diff --git a/ccw/src/core/routes/loop-v2-routes.ts b/ccw/src/core/routes/loop-v2-routes.ts index db4556e8..65f36292 100644 --- a/ccw/src/core/routes/loop-v2-routes.ts +++ b/ccw/src/core/routes/loop-v2-routes.ts @@ -7,7 +7,8 @@ * - GET /api/loops/v2 - List all loops with pagination * - POST /api/loops/v2 - Create loop with {title, description, max_iterations} * - GET /api/loops/v2/:loopId - Get loop details - * - PUT /api/loops/v2/:loopId - Update loop metadata + * - PUT /api/loops/v2/:loopId - Update loop metadata (title, description, max_iterations, tags, priority, notes) + * - PATCH /api/loops/v2/:loopId/status - Quick status update with {status} * - DELETE /api/loops/v2/:loopId - Delete loop * - POST /api/loops/v2/:loopId/start - Start loop execution * - POST /api/loops/v2/:loopId/pause - Pause loop @@ -44,12 +45,18 @@ interface V2LoopCreateRequest { } /** - * V2 Loop Update Request + * V2 Loop Update Request (extended) */ interface V2LoopUpdateRequest { + // Basic fields title?: string; description?: string; max_iterations?: number; + + // Extended metadata fields + tags?: string[]; + priority?: 'low' | 'medium' | 'high'; + notes?: string; } /** @@ -66,6 +73,12 @@ interface V2LoopStorage { updated_at: string; completed_at?: string; failure_reason?: string; + + // Extended metadata fields + tags?: string[]; + priority?: 'low' | 'medium' | 'high'; + notes?: string; + // Tasks stored in separate tasks.jsonl file } @@ -505,7 +518,7 @@ export async function handleLoopV2Routes(ctx: RouteContext): Promise { } handlePostRequest(req, res, async (body) => { - const { title, description, max_iterations } = body as V2LoopUpdateRequest; + const { title, description, max_iterations, tags, priority, notes } = body as V2LoopUpdateRequest; try { const loop = await readLoopStorage(loopId); @@ -540,6 +553,28 @@ export async function handleLoopV2Routes(ctx: RouteContext): Promise { loop.max_iterations = max_iterations; } + // Extended metadata fields + if (tags !== undefined) { + if (!Array.isArray(tags) || !tags.every(t => typeof t === 'string')) { + return { success: false, error: 'tags must be an array of strings', status: 400 }; + } + loop.tags = tags; + } + + if (priority !== undefined) { + if (!['low', 'medium', 'high'].includes(priority)) { + return { success: false, error: 'priority must be one of: low, medium, high', status: 400 }; + } + loop.priority = priority; + } + + if (notes !== undefined) { + if (typeof notes !== 'string') { + return { success: false, error: 'notes must be a string', status: 400 }; + } + loop.notes = notes.trim(); + } + loop.updated_at = new Date().toISOString(); await writeLoopStorage(loop); @@ -553,6 +588,51 @@ export async function handleLoopV2Routes(ctx: RouteContext): Promise { return true; } + // PATCH /api/loops/v2/:loopId/status - Quick status update + if (pathname.match(/\/api\/loops\/v2\/[^/]+\/status$/) && req.method === 'PATCH') { + const loopId = pathname.split('/').slice(-2)[0]; + if (!loopId || !isValidId(loopId)) { + res.writeHead(400, { 'Content-Type': 'application/json' }); + res.end(JSON.stringify({ success: false, error: 'Invalid loop ID format' })); + return true; + } + + handlePostRequest(req, res, async (body) => { + const { status } = body as { status?: string }; + + if (!status || typeof status !== 'string') { + return { success: false, error: 'status is required', status: 400 }; + } + + if (!Object.values(LoopStatus).includes(status as LoopStatus)) { + return { success: false, error: `Invalid status: ${status}`, status: 400 }; + } + + try { + const loop = await readLoopStorage(loopId); + if (!loop) { + return { success: false, error: 'Loop not found', status: 404 }; + } + + loop.status = status as LoopStatus; + loop.updated_at = new Date().toISOString(); + + if (status === LoopStatus.COMPLETED && !loop.completed_at) { + loop.completed_at = new Date().toISOString(); + } + + await writeLoopStorage(loop); + + broadcastStateUpdate(loopId, loop.status); + + return { success: true, data: loop }; + } catch (error) { + return { success: false, error: (error as Error).message, status: 500 }; + } + }); + return true; + } + // DELETE /api/loops/v2/:loopId - Delete loop if (pathname.match(/^\/api\/loops\/v2\/[^/]+$/) && req.method === 'DELETE') { const loopId = pathname.split('/').pop(); diff --git a/ccw/src/templates/dashboard-css/36-loop-monitor.css b/ccw/src/templates/dashboard-css/36-loop-monitor.css index e32d38db..fb57dfe6 100644 --- a/ccw/src/templates/dashboard-css/36-loop-monitor.css +++ b/ccw/src/templates/dashboard-css/36-loop-monitor.css @@ -4,6 +4,105 @@ Target: ~500 lines, consistent with Dashboard design =================================== */ +/* ========================================== + ANIMATIONS + ========================================== */ + +@keyframes slideInUp { + from { + opacity: 0; + transform: translateY(10px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +@keyframes fadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +@keyframes slideInDown { + from { + opacity: 0; + transform: translateY(-10px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +@keyframes modalFadeIn { + from { + opacity: 0; + transform: scale(0.95); + } + to { + opacity: 1; + transform: scale(1); + } +} + +@keyframes pulse { + 0%, 100% { + opacity: 1; + } + 50% { + opacity: 0.5; + } +} + +/* Modal overlay animations */ +.modal-overlay { + animation: fadeIn 0.2s ease; +} + +.modal-content { + animation: modalFadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1); +} + +/* Loading spinner animation */ +.loading-spinner { + animation: pulse 1.5s ease-in-out infinite; +} + +/* Notification animations */ +.notification { + animation: slideInUp 0.3s ease; +} + +.notification.error { + background: hsl(var(--destructive) / 0.1); + border-left: 3px solid hsl(var(--destructive)); +} + +.notification.success { + background: hsl(var(--success) / 0.1); + border-left: 3px solid hsl(var(--success)); +} + +.notification.warning { + background: hsl(var(--warning) / 0.1); + border-left: 3px solid hsl(var(--warning)); +} + +/* Loop card animations */ +.loop-card { + animation: slideInUp 0.3s ease; +} + +/* Loop group animations */ +.loop-group { + animation: slideInUp 0.3s ease; +} + /* ========================================== LAYOUT ========================================== */ @@ -21,6 +120,43 @@ grid-template-columns: 1fr; height: auto; } + + .loop-kanban-board { + min-height: 500px; + } +} + +@media (max-width: 768px) { + .loop-monitor-layout { + grid-template-columns: 1fr; + gap: 1rem; + min-height: auto; + } + + .loop-list-panel { + max-height: 300px; + } + + .loop-kanban-board { + flex-wrap: wrap; + height: auto; + } + + .loop-kanban-column { + width: calc(50% - 0.5rem); + min-width: 150px; + } + + .detail-header { + flex-direction: column; + gap: 0.75rem; + align-items: flex-start; + } + + .detail-actions { + width: 100%; + flex-wrap: wrap; + } } /* ========================================== @@ -62,7 +198,79 @@ .header-actions { display: flex; align-items: center; + gap: 0.75rem; +} + +/* View Tabs for Loops/Tasks switch */ +.view-tabs { + display: flex; + gap: 0.25rem; + padding: 0.25rem; + background: hsl(var(--muted) / 0.3); + border-radius: 0.5rem; +} + +.tab-button { + display: flex; + align-items: center; + gap: 0.375rem; + padding: 0.5rem 0.875rem; + background: transparent; + border: none; + border-radius: 0.375rem; + color: hsl(var(--muted-foreground)); + font-size: 0.8125rem; + font-weight: 500; + cursor: pointer; + transition: all 0.2s ease; +} + +.tab-button:hover { + background: hsl(var(--background)); + color: hsl(var(--foreground)); +} + +.tab-button.active { + background: hsl(var(--background)); + color: hsl(var(--primary)); + box-shadow: 0 1px 3px hsl(var(--foreground) / 0.1); +} + +.tab-button i, +.tab-button svg { + width: 1rem; + height: 1rem; +} + +/* Button Styles Enhancement */ +.btn { + display: inline-flex; + align-items: center; gap: 0.5rem; + padding: 0.5rem 1rem; + border: none; + border-radius: 0.5rem; + font-size: 0.8125rem; + font-weight: 500; + cursor: pointer; + transition: all 0.2s ease; +} + +.btn-primary { + background: hsl(var(--primary)); + color: white; +} + +.btn-primary:hover { + background: hsl(var(--primary) / 0.9); + transform: translateY(-1px); + box-shadow: 0 2px 8px hsl(var(--primary) / 0.3); +} + +.btn i, +.btn svg { + width: 1rem; + height: 1rem; } .filter-select, @@ -1068,3 +1276,483 @@ textarea.form-control { justify-content: center; } } + +/* ========================================== + KANBAN BOARD + ========================================== */ + +.loop-kanban-container { + padding: 1rem; + height: 100%; + overflow-x: auto; +} + +.loop-kanban-header { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 1rem; + padding: 0 0.5rem; +} + +.loop-kanban-title { + font-size: 1rem; + font-weight: 600; + color: hsl(var(--foreground)); + display: flex; + align-items: center; + gap: 0.5rem; +} + +.loop-kanban-title i, +.loop-kanban-title svg { + color: hsl(var(--primary)); +} + +.loop-kanban-actions { + display: flex; + gap: 0.5rem; +} + +.loop-kanban-board { + display: flex; + gap: 1rem; + height: calc(100% - 4rem); + min-width: max-content; +} + +.loop-kanban-column { + width: 280px; + min-width: 280px; + background: hsl(var(--muted) / 0.2); + border-radius: 0.5rem; + display: flex; + flex-direction: column; + max-height: 100%; +} + +.loop-kanban-column-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 0.75rem 1rem; + border-bottom: 1px solid hsl(var(--border)); +} + +.loop-kanban-column-title { + font-size: 0.8125rem; + font-weight: 600; + color: hsl(var(--foreground)); + display: flex; + align-items: center; + gap: 0.5rem; +} + +.loop-kanban-column-count { + font-size: 0.6875rem; + padding: 0.125rem 0.5rem; + background: hsl(var(--muted)); + color: hsl(var(--muted-foreground)); + border-radius: 999px; + font-weight: 600; +} + +/* Column status colors */ +.loop-kanban-column[data-status="created"] .loop-kanban-column-title { color: hsl(var(--muted-foreground)); } +.loop-kanban-column[data-status="running"] .loop-kanban-column-title { color: hsl(var(--info)); } +.loop-kanban-column[data-status="paused"] .loop-kanban-column-title { color: hsl(var(--warning)); } +.loop-kanban-column[data-status="completed"] .loop-kanban-column-title { color: hsl(var(--success)); } +.loop-kanban-column[data-status="failed"] .loop-kanban-column-title { color: hsl(var(--destructive)); } + +.loop-kanban-column-body { + flex: 1; + overflow-y: auto; + padding: 0.5rem; + transition: all 0.2s ease; + min-height: 100px; +} + +/* Drag-over state for columns */ +.loop-kanban-column-body.drag-over { + background: hsl(var(--primary) / 0.08); + border: 2px dashed hsl(var(--primary) / 0.4); + border-radius: 0.5rem; +} + +/* Empty column placeholder */ +.kanban-empty-column { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 2rem 1rem; + color: hsl(var(--muted-foreground)); + font-size: 0.75rem; + text-align: center; + min-height: 80px; +} + +/* Kanban Task Card */ +.loop-task-card { + background: hsl(var(--card)); + border: 1px solid hsl(var(--border)); + border-radius: 0.5rem; + padding: 0.875rem; + margin-bottom: 0.5rem; + cursor: grab; + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + position: relative; + will-change: transform; +} + +.loop-task-card:hover { + transform: translateY(-2px); + box-shadow: 0 4px 12px hsl(var(--foreground) / 0.08); + border-color: hsl(var(--primary)); +} + +.loop-task-card:active { + cursor: grabbing; +} + +/* Dragging state */ +.loop-task-card.dragging { + opacity: 0.5; + cursor: grabbing; + transform: rotate(3deg) scale(1.02); + box-shadow: 0 8px 24px hsl(var(--foreground) / 0.15); +} + +/* Focus state for keyboard navigation */ +.loop-task-card:focus { + outline: 2px solid hsl(var(--primary)); + outline-offset: 2px; +} + +.loop-task-card-header { + display: flex; + align-items: flex-start; + justify-content: space-between; + margin-bottom: 0.5rem; +} + +.loop-task-card-title { + font-size: 0.8125rem; + font-weight: 500; + color: hsl(var(--foreground)); + line-height: 1.4; + flex: 1; + margin-right: 0.5rem; +} + +.loop-task-card-badge { + font-size: 0.625rem; + padding: 0.125rem 0.375rem; + border-radius: 0.25rem; + font-weight: 600; + text-transform: uppercase; + flex-shrink: 0; +} + +.loop-task-card-badge.tool { + background: hsl(var(--primary) / 0.15); + color: hsl(var(--primary)); +} + +.loop-task-card-badge.mode-analysis { + background: hsl(var(--info) / 0.15); + color: hsl(var(--info)); +} + +.loop-task-card-badge.mode-write { + background: hsl(var(--success) / 0.15); + color: hsl(var(--success)); +} + +.loop-task-card-description { + font-size: 0.75rem; + color: hsl(var(--muted-foreground)); + line-height: 1.5; + margin-bottom: 0.5rem; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; +} + +.loop-task-card-meta { + display: flex; + align-items: center; + gap: 0.75rem; + font-size: 0.6875rem; + color: hsl(var(--muted-foreground)); +} + +.loop-task-card-meta-item { + display: flex; + align-items: center; + gap: 0.25rem; +} + +.loop-task-card-meta-item i, +.loop-task-card-meta-item svg { + width: 0.75rem; + height: 0.75rem; +} + +/* Kanban Empty State */ +.loop-kanban-empty { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 2rem 1rem; + text-align: center; + color: hsl(var(--muted-foreground)); +} + +.loop-kanban-empty i, +.loop-kanban-empty svg { + width: 2rem; + height: 2rem; + margin-bottom: 0.75rem; + opacity: 0.5; +} + +.loop-kanban-empty-text { + font-size: 0.75rem; +} + +/* ========================================== + PRIORITY BADGES + ========================================== */ + +.priority-badge { + display: inline-flex; + align-items: center; + gap: 0.25rem; + font-size: 0.625rem; + font-weight: 600; + padding: 0.125rem 0.375rem; + border-radius: 0.25rem; + text-transform: uppercase; +} + +.priority-badge.low { + background: hsl(var(--muted) / 0.5); + color: hsl(var(--muted-foreground)); +} + +.priority-badge.medium { + background: hsl(var(--warning) / 0.15); + color: hsl(var(--warning)); +} + +.priority-badge.high { + background: hsl(var(--destructive) / 0.15); + color: hsl(var(--destructive)); +} + +/* ========================================== + STATUS UPDATE PANEL + ========================================== */ + +.status-update-panel { + display: flex; + flex-direction: column; + gap: 0.75rem; + padding: 1rem; + background: hsl(var(--muted) / 0.2); + border-radius: 0.5rem; + margin-top: 1rem; +} + +.status-update-header { + display: flex; + align-items: center; + justify-content: space-between; +} + +.status-update-title { + font-size: 0.875rem; + font-weight: 600; + color: hsl(var(--foreground)); +} + +.status-update-time { + font-size: 0.6875rem; + color: hsl(var(--muted-foreground)); +} + +.status-select-group { + display: flex; + gap: 0.5rem; + flex-wrap: wrap; +} + +.status-option { + padding: 0.5rem 1rem; + border: 1px solid hsl(var(--border)); + border-radius: 0.5rem; + background: hsl(var(--background)); + color: hsl(var(--muted-foreground)); + font-size: 0.75rem; + font-weight: 500; + cursor: pointer; + transition: all 0.2s; +} + +.status-option:hover { + border-color: hsl(var(--primary)); + color: hsl(var(--primary)); +} + +.status-option.active { + background: hsl(var(--primary) / 0.1); + border-color: hsl(var(--primary)); + color: hsl(var(--primary)); +} + +.status-option.created { --status-color: var(--muted-foreground); } +.status-option.running { --status-color: var(--info); } +.status-option.paused { --status-color: var(--warning); } +.status-option.completed { --status-color: var(--success); } +.status-option.failed { --status-color: var(--destructive); } + +.status-option.active.created, +.status-option.active.running, +.status-option.active.paused, +.status-option.active.completed, +.status-option.active.failed { + background: hsl(var(--status-color) / 0.1); + border-color: hsl(var(--status-color)); + color: hsl(var(--status-color)); +} + +/* ========================================== + DETAIL TABS (View Switcher) + ========================================== */ + +.detail-view-tabs { + display: flex; + gap: 0.25rem; + margin-bottom: 1rem; + padding: 0.25rem; + background: hsl(var(--muted) / 0.3); + border-radius: 0.5rem; + width: fit-content; +} + +.detail-tab-btn { + display: flex; + align-items: center; + gap: 0.375rem; + padding: 0.5rem 1rem; + background: transparent; + border: none; + border-radius: 0.375rem; + color: hsl(var(--muted-foreground)); + font-size: 0.8125rem; + font-weight: 500; + cursor: pointer; + transition: all 0.2s ease; +} + +.detail-tab-btn:hover { + background: hsl(var(--background)); + color: hsl(var(--foreground)); +} + +.detail-tab-btn.active { + background: hsl(var(--background)); + color: hsl(var(--primary)); + box-shadow: 0 1px 3px hsl(var(--foreground) / 0.1); +} + +.detail-tab-btn i, +.detail-tab-btn svg { + width: 1rem; + height: 1rem; +} + +/* Detail Tab Content */ +.detail-tab-content { + display: none; +} + +.detail-tab-content.active { + display: block; +} + +/* ========================================== + NOTES AND TAGS + ========================================== */ + +.loop-notes { + margin-top: 1rem; + padding: 1rem; + background: hsl(var(--muted) / 0.2); + border-radius: 0.5rem; +} + +.loop-notes-label { + font-size: 0.75rem; + font-weight: 600; + color: hsl(var(--muted-foreground)); + margin-bottom: 0.5rem; + text-transform: uppercase; + letter-spacing: 0.05em; +} + +.loop-notes-content { + font-size: 0.8125rem; + color: hsl(var(--foreground)); + line-height: 1.6; +} + +.loop-tags { + display: flex; + flex-wrap: wrap; + gap: 0.375rem; + margin-top: 0.75rem; +} + +.loop-tag { + display: inline-flex; + align-items: center; + padding: 0.25rem 0.5rem; + background: hsl(var(--primary) / 0.1); + color: hsl(var(--primary)); + border-radius: 0.25rem; + font-size: 0.6875rem; + font-weight: 500; +} + +/* ========================================== + KANBAN RESPONSIVE + ========================================== */ + +@media (max-width: 1024px) { + .loop-kanban-board { + gap: 0.75rem; + } + + .loop-kanban-column { + width: 250px; + min-width: 250px; + } +} + +@media (max-width: 768px) { + .loop-kanban-board { + flex-direction: column; + height: auto; + min-width: auto; + } + + .loop-kanban-column { + width: 100%; + min-width: 100%; + max-height: 400px; + } +} diff --git a/ccw/src/templates/dashboard-js/i18n.js b/ccw/src/templates/dashboard-js/i18n.js index ddd028a8..3bfa7807 100644 --- a/ccw/src/templates/dashboard-js/i18n.js +++ b/ccw/src/templates/dashboard-js/i18n.js @@ -2194,6 +2194,36 @@ const i18n = { 'loop.failImmediate': 'Fail immediately', 'loop.successCondition': 'Success Condition', + // Kanban Board + 'loop.kanban.title': 'Tasks Board', + 'loop.kanban.byStatus': 'By Status', + 'loop.kanban.byPriority': 'By Priority', + 'loop.kanban.noBoardData': 'No tasks to display', + + // Navigation & Grouping + 'loop.nav.groupBy': 'Group By', + 'loop.nav.allLoops': 'All Loops', + 'loop.nav.activeOnly': 'Active Only', + 'loop.nav.recentlyActive': 'Recently Active', + + // Task Status Details + 'loop.taskStatus.pending': 'Pending', + 'loop.taskStatus.inProgress': 'In Progress', + 'loop.taskStatus.blocked': 'Blocked', + 'loop.taskStatus.done': 'Done', + + // Status Management + 'loop.updateStatus': 'Update Status', + 'loop.updatedAt': 'Updated at', + 'loop.updateSuccess': 'Status updated successfully', + 'loop.updateError': 'Failed to update status', + 'loop.priority': 'Priority', + 'loop.priority.low': 'Low', + 'loop.priority.medium': 'Medium', + 'loop.priority.high': 'High', + 'loop.tags': 'Tags', + 'loop.notes': 'Notes', + // Issue Discovery 'discovery.title': 'Issue Discovery', 'discovery.description': 'Discover potential issues from multiple perspectives', @@ -4755,6 +4785,36 @@ const i18n = { 'loop.failImmediate': '立即失败', 'loop.successCondition': '成功条件', + // Kanban Board + 'loop.kanban.title': '任务看板', + 'loop.kanban.byStatus': '按状态', + 'loop.kanban.byPriority': '按优先级', + 'loop.kanban.noBoardData': '没有要显示的任务', + + // Navigation & Grouping + 'loop.nav.groupBy': '分组', + 'loop.nav.allLoops': '所有循环', + 'loop.nav.activeOnly': '仅活跃', + 'loop.nav.recentlyActive': '最近活跃', + + // Task Status Details + 'loop.taskStatus.pending': '待处理', + 'loop.taskStatus.inProgress': '进行中', + 'loop.taskStatus.blocked': '已阻止', + 'loop.taskStatus.done': '已完成', + + // Status Management + 'loop.updateStatus': '更新状态', + 'loop.updatedAt': '更新于', + 'loop.updateSuccess': '状态更新成功', + 'loop.updateError': '更新状态失败', + 'loop.priority': '优先级', + 'loop.priority.low': '低', + 'loop.priority.medium': '中', + 'loop.priority.high': '高', + 'loop.tags': '标签', + 'loop.notes': '备注', + // Issue Discovery 'discovery.title': '议题发现', 'discovery.description': '从多个视角发现潜在问题', diff --git a/ccw/src/templates/dashboard-js/views/loop-monitor.js b/ccw/src/templates/dashboard-js/views/loop-monitor.js index 44b37586..bed97239 100644 --- a/ccw/src/templates/dashboard-js/views/loop-monitor.js +++ b/ccw/src/templates/dashboard-js/views/loop-monitor.js @@ -1359,6 +1359,973 @@ function showError(message) { showNotification(message, 'error'); } +// ========================================== +// VIEW SWITCHING AND KANBAN BOARD +// ========================================== + +// Current view state +window.currentLoopView = 'loops'; // 'loops' | 'kanban' + +/** + * Switch between loops list view and kanban board view + * @param {string} view - 'loops' or 'kanban' + */ +function switchView(view) { + window.currentLoopView = view; + + // Update tab buttons + const tabs = document.querySelectorAll('.view-tabs .tab-button'); + tabs.forEach(tab => { + const tabView = tab.dataset.tab; + const isActive = tabView === view; + tab.classList.toggle('active', isActive); + // Add ARIA attributes for accessibility + tab.setAttribute('aria-selected', isActive ? 'true' : 'false'); + tab.setAttribute('aria-pressed', isActive ? 'true' : 'false'); + }); + + // Announce view change for screen readers + const viewLabel = view === 'loops' ? 'Loops list view' : 'Tasks kanban board view'; + announceToScreenReader(viewLabel); + + // Render appropriate view + if (view === 'loops') { + renderLoopList(); + // Show loop detail if one is selected + if (window.selectedLoopId) { + renderLoopDetail(window.selectedLoopId); + } + } else if (view === 'tasks' || view === 'kanban') { + if (window.selectedLoopId) { + renderKanbanBoard(window.selectedLoopId); + } else { + // No loop selected, show instruction + const detailPanel = document.getElementById('loopDetailPanel'); + if (detailPanel) { + detailPanel.innerHTML = ` +
+
+ +
+

${t('loop.selectLoopForKanban') || 'Select a Loop'}

+

${t('loop.selectLoopForKanbanHint') || 'Select a loop from the list to view its task board'}

+
+ `; + if (typeof lucide !== 'undefined') lucide.createIcons(); + } + } + } +} + +/** + * Render kanban board for a loop's tasks + * Displays tasks grouped by status in columns + */ +async function renderKanbanBoard(loopId) { + const container = document.getElementById('loopDetailPanel'); + const loop = window.loopStateStore[loopId]; + + if (!container) return; + + if (!loop) { + container.innerHTML = ` +
+
+ +
+

${t('loop.loopNotFound')}

+
+ `; + if (typeof lucide !== 'undefined') lucide.createIcons(); + return; + } + + // Show loading state + container.innerHTML = ` +
+
+
+ + ${t('loop.kanban.title') || 'Tasks Board'} +
+
+ + +
+
+
+ +
+
+ `; + if (typeof lucide !== 'undefined') lucide.createIcons(); + + // Fetch tasks + try { + const response = await fetch(`/api/loops/v2/${encodeURIComponent(loopId)}/tasks`); + const result = await response.json(); + + if (!result.success) { + container.innerHTML = ` +
+
+ +
+

${t('loop.loadTasksFailed') || 'Failed to load tasks'}

+

${result.error || ''}

+
+ `; + if (typeof lucide !== 'undefined') lucide.createIcons(); + return; + } + + const tasks = result.data || []; + + // Group tasks by status + const tasksByStatus = groupTasksByStatus(tasks); + + // Render kanban board + renderKanbanBoardContent(container, loop, loopId, tasksByStatus); + + } catch (err) { + console.error('Load tasks for kanban error:', err); + container.innerHTML = ` +
+
+ +
+

${t('loop.loadTasksError') || 'Error loading tasks'}

+

${err.message}

+
+ `; + if (typeof lucide !== 'undefined') lucide.createIcons(); + } +} + +/** + * Group tasks by their status + */ +function groupTasksByStatus(tasks) { + const statuses = ['pending', 'in_progress', 'blocked', 'done']; + const grouped = {}; + + statuses.forEach(status => { + grouped[status] = []; + }); + + tasks.forEach(task => { + const status = task.status || 'pending'; + if (!grouped[status]) { + grouped[status] = []; + } + grouped[status].push(task); + }); + + return grouped; +} + +/** + * Render the actual kanban board content + */ +function renderKanbanBoardContent(container, loop, loopId, tasksByStatus) { + const statusConfig = { + pending: { + label: t('loop.taskStatus.pending') || 'Pending', + icon: 'circle', + color: 'muted' + }, + in_progress: { + label: t('loop.taskStatus.inProgress') || 'In Progress', + icon: 'loader', + color: 'info' + }, + blocked: { + label: t('loop.taskStatus.blocked') || 'Blocked', + icon: 'octagon', + color: 'warning' + }, + done: { + label: t('loop.taskStatus.done') || 'Done', + icon: 'check-circle-2', + color: 'success' + } + }; + + const columns = Object.entries(statusConfig).map(([status, config]) => { + const tasks = tasksByStatus[status] || []; + return ` +
+
+
+ + ${config.label} +
+ ${tasks.length} +
+
+ ${tasks.length > 0 ? tasks.map(task => renderKanbanTaskCard(task, loopId)).join('') : ` +
+

${t('loop.kanban.noBoardData') || 'No tasks'}

+
+ `} +
+
+ `; + }).join(''); + + container.innerHTML = ` +
+
+
+ + ${t('loop.kanban.title') || 'Tasks Board'} + ${escapeHtml(loop.title || loop.loop_id)} +
+
+ + +
+
+
+
+ ${columns} +
+
+
+ `; + + if (typeof lucide !== 'undefined') lucide.createIcons(); + + // Initialize drag and drop for kanban cards + initKanbanDragDrop(); + + // Initialize keyboard navigation for accessibility + initializeKeyboardNavigation(); + + // Announce to screen reader + const totalTasks = Object.values(tasksByStatus).reduce((sum, tasks) => sum + tasks.length, 0); + announceToScreenReader(`Kanban board loaded with ${totalTasks} tasks across 4 columns`); +} + +/** + * Render a single task card for the kanban board + */ +function renderKanbanTaskCard(task, loopId) { + const priorityClass = task.priority || 'medium'; + const priorityLabel = t(`loop.priority.${priorityClass}`) || priorityClass; + const taskDescription = escapeHtml(task.description || t('loop.noDescription') || 'No description'); + const taskTool = task.tool || 'gemini'; + const taskMode = task.mode || 'analysis'; + + return ` +
+
+ ${taskDescription} + +
+
+
+ ${task.tool || 'gemini'} + ${task.mode || 'analysis'} +
+ ${task.priority ? ` +
+ ${priorityLabel} +
+ ` : ''} +
+
+
+ + +
+
+
+ `; +} + +/** + * Initialize drag and drop for kanban board + */ +function initKanbanDragDrop() { + const cards = document.querySelectorAll('.loop-task-card[draggable="true"]'); + cards.forEach(card => { + card.addEventListener('dragend', handleKanbanDragEnd); + }); +} + +/** + * Handle drag start for kanban card + */ +function handleKanbanDragStart(event) { + const card = event.target.closest('.loop-task-card'); + if (!card) return; + + card.classList.add('dragging'); + event.dataTransfer.effectAllowed = 'move'; + event.dataTransfer.setData('text/plain', JSON.stringify({ + taskId: card.dataset.taskId, + loopId: card.dataset.loopId + })); +} + +/** + * Handle drag end for kanban card + */ +function handleKanbanDragEnd(event) { + const card = event.target.closest('.loop-task-card'); + if (card) { + card.classList.remove('dragging'); + } +} + +/** + * Handle drag over for kanban column + */ +function handleKanbanDragOver(event) { + event.preventDefault(); + event.dataTransfer.dropEffect = 'move'; + + const column = event.target.closest('.loop-kanban-column-body'); + if (column) { + column.classList.add('drag-over'); + } +} + +/** + * Handle drop for kanban column + */ +async function handleKanbanDrop(event, loopId, newStatus) { + event.preventDefault(); + + // Remove drag-over style + document.querySelectorAll('.loop-kanban-column-body').forEach(col => { + col.classList.remove('drag-over'); + }); + + try { + const data = JSON.parse(event.dataTransfer.getData('text/plain')); + const taskId = data.taskId; + + if (!taskId) return; + + // Update task status + await updateTaskStatus(loopId, taskId, newStatus); + + // Refresh kanban board + await renderKanbanBoard(loopId); + + } catch (err) { + console.error('Kanban drop error:', err); + } +} + +// ========================================== +// STATUS UPDATE FUNCTIONS +// ========================================== + +/** + * Update loop status via PATCH endpoint + * @param {string} loopId - The loop ID + * @param {string} status - New status (created, running, paused, completed, failed) + */ +async function updateLoopStatus(loopId, status) { + try { + const response = await fetch(`/api/loops/v2/${encodeURIComponent(loopId)}/status`, { + method: 'PATCH', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ status }) + }); + + const result = await response.json(); + + if (result.success) { + showNotification(t('loop.updateSuccess') || 'Status updated successfully', 'success'); + + // Update local store + if (window.loopStateStore[loopId]) { + window.loopStateStore[loopId] = result.data; + } + + // Refresh UI + renderLoopList(); + if (window.selectedLoopId === loopId) { + renderLoopDetail(loopId); + } + + return result.data; + } else { + showNotification(t('loop.updateError') || 'Failed to update status: ' + (result.error || ''), 'error'); + return null; + } + } catch (err) { + console.error('Update loop status error:', err); + showNotification(t('loop.updateError') || 'Failed to update status: ' + err.message, 'error'); + return null; + } +} + +/** + * Update loop metadata via PUT endpoint + * @param {string} loopId - The loop ID + * @param {object} metadata - Metadata to update (title, description, tags, priority, notes, etc.) + */ +async function updateLoopMetadata(loopId, metadata) { + try { + const response = await fetch(`/api/loops/v2/${encodeURIComponent(loopId)}`, { + method: 'PUT', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify(metadata) + }); + + const result = await response.json(); + + if (result.success) { + showNotification(t('loop.updateSuccess') || 'Loop updated successfully', 'success'); + + // Update local store + if (window.loopStateStore[loopId]) { + window.loopStateStore[loopId] = result.data; + } + + // Refresh UI + renderLoopList(); + if (window.selectedLoopId === loopId) { + renderLoopDetail(loopId); + } + + return result.data; + } else { + showNotification(t('loop.updateError') || 'Failed to update loop: ' + (result.error || ''), 'error'); + return null; + } + } catch (err) { + console.error('Update loop metadata error:', err); + showNotification(t('loop.updateError') || 'Failed to update loop: ' + err.message, 'error'); + return null; + } +} + +/** + * Update task status within a loop + * @param {string} loopId - The loop ID + * @param {string} taskId - The task ID + * @param {string} newStatus - New status (pending, in_progress, blocked, done) + */ +async function updateTaskStatus(loopId, taskId, newStatus) { + try { + const response = await fetch(`/api/loops/v2/${encodeURIComponent(loopId)}/tasks/${encodeURIComponent(taskId)}`, { + method: 'PUT', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ status: newStatus }) + }); + + const result = await response.json(); + + if (result.success) { + showNotification(t('loop.updateSuccess') || 'Task status updated', 'success'); + return result.data; + } else { + showNotification(t('loop.updateError') || 'Failed to update task: ' + (result.error || ''), 'error'); + return null; + } + } catch (err) { + console.error('Update task status error:', err); + showNotification(t('loop.updateError') || 'Failed to update task: ' + err.message, 'error'); + return null; + } +} + +/** + * Show status update panel for a task + */ +function showTaskStatusUpdate(taskId, loopId) { + const statuses = [ + { value: 'pending', label: t('loop.taskStatus.pending') || 'Pending', icon: 'circle' }, + { value: 'in_progress', label: t('loop.taskStatus.inProgress') || 'In Progress', icon: 'loader' }, + { value: 'blocked', label: t('loop.taskStatus.blocked') || 'Blocked', icon: 'octagon' }, + { value: 'done', label: t('loop.taskStatus.done') || 'Done', icon: 'check-circle-2' } + ]; + + const modal = document.createElement('div'); + modal.id = 'statusUpdateModal'; + modal.className = 'modal-overlay'; + modal.innerHTML = ` +
+
+

${t('loop.updateStatus') || 'Update Status'}

+ +
+
+
+ ${statuses.map(status => ` + + `).join('')} +
+
+
+ `; + + document.body.appendChild(modal); + if (typeof lucide !== 'undefined') lucide.createIcons(); +} + +/** + * Close status update modal + */ +function closeStatusUpdateModal() { + const modal = document.getElementById('statusUpdateModal'); + if (modal) modal.remove(); +} + +/** + * Apply task status and close modal + */ +async function applyTaskStatus(taskId, loopId, newStatus) { + closeStatusUpdateModal(); + await updateTaskStatus(loopId, taskId, newStatus); + + // Refresh the appropriate view + if (window.currentLoopView === 'kanban' || window.currentLoopView === 'tasks') { + await renderKanbanBoard(loopId); + } else { + await loadLoopTasks(loopId); + } +} + +/** + * Show task context menu + */ +function showTaskContextMenu(event, taskId, loopId) { + event.stopPropagation(); + + // Remove existing menu if any + const existing = document.getElementById('taskContextMenu'); + if (existing) existing.remove(); + + const menu = document.createElement('div'); + menu.id = 'taskContextMenu'; + menu.className = 'context-menu'; + menu.style.cssText = ` + position: fixed; + left: ${event.clientX}px; + top: ${event.clientY}px; + z-index: 10000; + background: hsl(var(--card)); + border: 1px solid hsl(var(--border)); + border-radius: 0.5rem; + padding: 0.25rem; + box-shadow: 0 4px 12px hsl(var(--foreground) / 0.15); + min-width: 150px; + `; + + menu.innerHTML = ` + + +
+ + `; + + document.body.appendChild(menu); + if (typeof lucide !== 'undefined') lucide.createIcons(); + + // Close on click outside + setTimeout(() => { + document.addEventListener('click', closeTaskContextMenu, { once: true }); + }, 10); +} + +/** + * Close task context menu + */ +function closeTaskContextMenu() { + const menu = document.getElementById('taskContextMenu'); + if (menu) menu.remove(); +} + +// ========================================== +// ACCESSIBILITY UTILITIES +// ========================================== + +/** + * Announce message to screen readers using ARIA live region + * @param {string} message - Message to announce + * @param {string} priority - 'polite' or 'assertive' (default: 'polite') + */ +function announceToScreenReader(message, priority = 'polite') { + // Create or get existing live region + let liveRegion = document.getElementById('screen-reader-announcements'); + if (!liveRegion) { + liveRegion = document.createElement('div'); + liveRegion.id = 'screen-reader-announcements'; + liveRegion.className = 'sr-only'; + liveRegion.setAttribute('role', 'status'); + liveRegion.setAttribute('aria-live', priority); + liveRegion.setAttribute('aria-atomic', 'true'); + liveRegion.style.cssText = 'position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden;'; + document.body.appendChild(liveRegion); + } + + // Update aria-live if priority changes + if (liveRegion.getAttribute('aria-live') !== priority) { + liveRegion.setAttribute('aria-live', priority); + } + + // Clear and set message + liveRegion.textContent = ''; + setTimeout(() => { + liveRegion.textContent = message; + }, 100); +} + +/** + * Add keyboard navigation for task cards + * @param {HTMLElement} card - Task card element + */ +function addTaskCardKeyboardSupport(card) { + if (!card) return; + + // Make card focusable + card.setAttribute('tabindex', '0'); + card.setAttribute('role', 'button'); + card.setAttribute('aria-label', `Task: ${card.querySelector('.task-card-title')?.textContent || 'Unnamed task'}`); + + // Add keyboard event listener + card.addEventListener('keydown', (event) => { + const taskId = card.dataset.taskId; + const loopId = card.dataset.loopId; + + if (!taskId || !loopId) return; + + // Enter or Space to open task context menu or edit + if (event.key === 'Enter' || event.key === ' ') { + event.preventDefault(); + showTaskContextMenu(event, taskId, loopId); + } + + // Arrow keys for navigation between cards + if (event.key === 'ArrowDown') { + event.preventDefault(); + const nextCard = card.nextElementSibling; + if (nextCard && nextCard.classList.contains('loop-task-card')) { + nextCard.focus(); + } + } else if (event.key === 'ArrowUp') { + event.preventDefault(); + const prevCard = card.previousElementSibling; + if (prevCard && prevCard.classList.contains('loop-task-card')) { + prevCard.focus(); + } + } + + // Arrow Left/Right to move between columns (in kanban view) + else if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') { + event.preventDefault(); + const currentColumn = card.closest('.loop-kanban-column-body'); + if (!currentColumn) return; + + const parentColumn = currentColumn.closest('.loop-kanban-column'); + const siblingColumn = event.key === 'ArrowLeft' + ? parentColumn.previousElementSibling + : parentColumn.nextElementSibling; + + if (siblingColumn) { + const siblingBody = siblingColumn.querySelector('.loop-kanban-column-body'); + const firstCard = siblingBody?.querySelector('.loop-task-card'); + if (firstCard) { + firstCard.focus(); + } + } + } + }); +} + +/** + * Initialize keyboard navigation for all task cards + */ +function initializeKeyboardNavigation() { + const cards = document.querySelectorAll('.loop-task-card'); + cards.forEach(card => addTaskCardKeyboardSupport(card)); + + // Add keyboard shortcut hints + document.addEventListener('keydown', (event) => { + // Ctrl+K or Cmd+K to focus search/filter + if ((event.ctrlKey || event.metaKey) && event.key === 'k') { + event.preventDefault(); + const filterSelect = document.getElementById('loopFilter'); + if (filterSelect) { + filterSelect.focus(); + } + } + + // ? to show keyboard shortcuts help + if (event.key === '?' && !event.ctrlKey && !event.metaKey && !event.altKey) { + const activeElement = document.activeElement; + const isTyping = activeElement && ( + activeElement.tagName === 'INPUT' || + activeElement.tagName === 'TEXTAREA' || + activeElement.isContentEditable + ); + + if (!isTyping) { + event.preventDefault(); + showKeyboardShortcutsHelp(); + } + } + }); +} + +/** + * Show keyboard shortcuts help dialog + */ +function showKeyboardShortcutsHelp() { + const modal = document.createElement('div'); + modal.id = 'keyboardShortcutsModal'; + modal.className = 'modal-overlay'; + modal.innerHTML = ` + + `; + + document.body.appendChild(modal); + if (typeof lucide !== 'undefined') lucide.createIcons(); + + // Focus on close button + setTimeout(() => { + const closeBtn = modal.querySelector('.modal-close'); + if (closeBtn) closeBtn.focus(); + }, 100); + + // Close on Escape + const handleEscape = (event) => { + if (event.key === 'Escape') { + closeKeyboardShortcutsHelp(); + document.removeEventListener('keydown', handleEscape); + } + }; + document.addEventListener('keydown', handleEscape); +} + +/** + * Close keyboard shortcuts help + */ +function closeKeyboardShortcutsHelp() { + const modal = document.getElementById('keyboardShortcutsModal'); + if (modal) modal.remove(); +} + +// ========================================== +// PERFORMANCE OPTIMIZATIONS +// ========================================== + +/** + * Debounce function to limit how often a function is called + * @param {Function} func - Function to debounce + * @param {number} wait - Wait time in milliseconds + * @returns {Function} Debounced function + */ +function debounce(func, wait) { + let timeout; + return function executedFunction(...args) { + const later = () => { + clearTimeout(timeout); + func(...args); + }; + clearTimeout(timeout); + timeout = setTimeout(later, wait); + }; +} + +/** + * Throttle function to limit execution frequency + * @param {Function} func - Function to throttle + * @param {number} limit - Minimum time between executions in ms + * @returns {Function} Throttled function + */ +function throttle(func, limit) { + let inThrottle; + return function(...args) { + if (!inThrottle) { + func.apply(this, args); + inThrottle = true; + setTimeout(() => inThrottle = false, limit); + } + }; +} + +// Debounced versions of frequently called functions +const debouncedRenderLoopList = debounce(renderLoopList, 300); +const debouncedRenderKanbanBoard = debounce(renderKanbanBoard, 300); + +// ========================================== +// NAVIGATION GROUPING +// ========================================== + +/** + * Group loops by their status for navigation display + * @returns {object} Loops grouped by status with counts + */ +function groupLoopsByStatus() { + const loops = Object.values(window.loopStateStore); + const groups = { + all: { loops: loops, count: loops.length }, + running: { loops: [], count: 0 }, + paused: { loops: [], count: 0 }, + completed: { loops: [], count: 0 }, + failed: { loops: [], count: 0 }, + created: { loops: [], count: 0 } + }; + + loops.forEach(loop => { + const status = loop.status || 'created'; + if (groups[status]) { + groups[status].loops.push(loop); + groups[status].count++; + } + }); + + return groups; +} + +/** + * Render loop list with status grouping + */ +function renderGroupedLoopList() { + const container = document.getElementById('loopList'); + if (!container) return; + + const groups = groupLoopsByStatus(); + const filter = document.getElementById('loopFilter')?.value || 'all'; + + // Get loops based on filter + let loops; + if (filter === 'all') { + loops = groups.all.loops; + } else { + loops = groups[filter]?.loops || []; + } + + // Sort by updated_at descending + loops.sort((a, b) => new Date(b.updated_at) - new Date(a.updated_at)); + + if (loops.length === 0) { + container.innerHTML = ` +
+
+ +
+

${t('loop.noLoops')}

+

${t('loop.noLoopsHint')}

+
+ `; + if (typeof lucide !== 'undefined') lucide.createIcons(); + return; + } + + // Render grouped navigation + const statusGroups = ['running', 'paused', 'created', 'completed', 'failed']; + const groupHeaders = []; + + statusGroups.forEach(status => { + const group = groups[status]; + if (group.count > 0 && (filter === 'all' || filter === status)) { + const statusLabel = t(`loop.${status}`) || status; + const groupLoops = group.loops.map(loop => renderLoopCard(loop)).join(''); + groupHeaders.push(` +
+
+ ${statusLabel} + ${group.count} +
+
+ ${groupLoops} +
+
+ `); + } + }); + + // If filter is not 'all', just show filtered list without group headers + if (filter !== 'all') { + container.innerHTML = loops.map(loop => renderLoopCard(loop)).join(''); + } else { + container.innerHTML = groupHeaders.join(''); + } + + if (typeof lucide !== 'undefined') lucide.createIcons(); +} + // ========================================== // LOOP TASK CREATION // ==========================================