mirror of
https://github.com/catlog22/Claude-Code-Workflow.git
synced 2026-02-05 01:50:27 +08:00
feat(dashboard): simplify lite task list and add dedicated drawer
- Remove META/CONTEXT/FLOW_CONTROL collapsible sections from task list - Add compact task item with action/scope/mods/steps badges - Create dedicated renderLiteTaskDrawerContent for plan.json parsing - Add Overview tab with description, scope, acceptance, dependencies - Add Implementation tab with steps and modification points - Add proper file list extraction from modification_points - Add CSS styles for lite task badges and drawer components 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
catlog22
@@ -3609,3 +3609,179 @@ ol.step-commands code {
|
||||
line-height: 1.6;
|
||||
color: var(--text-primary, #374151);
|
||||
}
|
||||
|
||||
|
||||
/* Lite Task List Item Styles */
|
||||
.lite-task-item {
|
||||
border: 1px solid var(--border-color, #e5e7eb);
|
||||
border-radius: 8px;
|
||||
padding: 12px 16px;
|
||||
margin-bottom: 8px;
|
||||
transition: all 0.2s ease;
|
||||
background: var(--bg-primary, #fff);
|
||||
}
|
||||
|
||||
.lite-task-item:hover {
|
||||
border-color: var(--primary, #3b82f6);
|
||||
box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
|
||||
}
|
||||
|
||||
.task-item-header-lite {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.task-item-header-lite .task-title {
|
||||
flex: 1;
|
||||
font-weight: 500;
|
||||
color: var(--text-primary, #111827);
|
||||
}
|
||||
|
||||
.task-item-meta-lite {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.meta-badge {
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.meta-badge.action {
|
||||
background: var(--bg-primary-light, #eff6ff);
|
||||
color: var(--primary, #3b82f6);
|
||||
border: 1px solid var(--primary, #3b82f6);
|
||||
}
|
||||
|
||||
.meta-badge.scope {
|
||||
background: var(--bg-secondary, #f9fafb);
|
||||
color: var(--text-secondary, #6b7280);
|
||||
}
|
||||
|
||||
.meta-badge.mods {
|
||||
background: var(--bg-warning, #fffbeb);
|
||||
color: var(--warning, #d97706);
|
||||
}
|
||||
|
||||
.meta-badge.impl {
|
||||
background: var(--bg-success, #ecfdf5);
|
||||
color: var(--success, #059669);
|
||||
}
|
||||
|
||||
.meta-badge.accept {
|
||||
background: var(--bg-info, #eff6ff);
|
||||
color: var(--info, #2563eb);
|
||||
}
|
||||
|
||||
/* Lite Task Drawer Styles */
|
||||
.action-badge {
|
||||
padding: 4px 10px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
background: var(--primary, #3b82f6);
|
||||
color: white;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.scope-path {
|
||||
display: block;
|
||||
padding: 8px 12px;
|
||||
background: var(--bg-secondary, #f9fafb);
|
||||
border-radius: 4px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.impl-steps-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
counter-reset: step-counter;
|
||||
}
|
||||
|
||||
.impl-step-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px solid var(--border-color, #e5e7eb);
|
||||
}
|
||||
|
||||
.impl-step-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.step-number {
|
||||
flex-shrink: 0;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--primary, #3b82f6);
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.step-text {
|
||||
flex: 1;
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
color: var(--text-primary, #374151);
|
||||
}
|
||||
|
||||
.mod-points-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.mod-point-card {
|
||||
padding: 12px;
|
||||
background: var(--bg-secondary, #f9fafb);
|
||||
border-radius: 6px;
|
||||
border-left: 3px solid var(--primary, #3b82f6);
|
||||
}
|
||||
|
||||
.mod-point-card .mod-file code {
|
||||
font-size: 12px;
|
||||
color: var(--primary, #3b82f6);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.mod-point-card .mod-target {
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary, #6b7280);
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.mod-point-card .mod-change {
|
||||
font-size: 13px;
|
||||
color: var(--text-primary, #374151);
|
||||
margin-top: 6px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.ref-item {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.ref-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.ref-files-list {
|
||||
margin: 4px 0 0 16px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.ref-files-list li {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
@@ -1803,49 +1803,26 @@ function renderLiteTaskDetailItem(sessionId, task) {
|
||||
const taskJsonId = `task-json-${sessionId}-${task.id}`.replace(/[^a-zA-Z0-9-]/g, '-');
|
||||
taskJsonStore[taskJsonId] = rawTask;
|
||||
|
||||
// Get preview info for lite tasks
|
||||
const action = rawTask.action || '';
|
||||
const scope = rawTask.scope || '';
|
||||
const modCount = rawTask.modification_points?.length || 0;
|
||||
const implCount = rawTask.implementation?.length || 0;
|
||||
const acceptCount = rawTask.acceptance?.length || 0;
|
||||
|
||||
return `
|
||||
<div class="detail-task-item-full">
|
||||
<div class="task-item-header-full" onclick="openTaskDrawerForLite('${sessionId}', '${escapeHtml(task.id)}')" style="cursor: pointer;" title="Click to open task details">
|
||||
<div class="detail-task-item-full lite-task-item" onclick="openTaskDrawerForLite('${sessionId}', '${escapeHtml(task.id)}')" style="cursor: pointer;" title="Click to view details">
|
||||
<div class="task-item-header-lite">
|
||||
<span class="task-id-badge">${escapeHtml(task.id)}</span>
|
||||
<span class="task-title">${escapeHtml(task.title || 'Untitled')}</span>
|
||||
<button class="btn-view-json" onclick="event.stopPropagation(); showJsonModal('${taskJsonId}', '${escapeHtml(task.id)}')">{ } JSON</button>
|
||||
</div>
|
||||
|
||||
<!-- Collapsible: Meta -->
|
||||
<div class="collapsible-section">
|
||||
<div class="collapsible-header">
|
||||
<span class="collapse-icon">▶</span>
|
||||
<span class="section-label">meta</span>
|
||||
<span class="section-preview">${escapeHtml(getMetaPreviewForLite(task, rawTask))}</span>
|
||||
</div>
|
||||
<div class="collapsible-content collapsed">
|
||||
${renderDynamicFields(task.meta || rawTask, ['type', 'action', 'agent', 'scope', 'module'])}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Collapsible: Context -->
|
||||
<div class="collapsible-section">
|
||||
<div class="collapsible-header">
|
||||
<span class="collapse-icon">▶</span>
|
||||
<span class="section-label">context</span>
|
||||
<span class="section-preview">${escapeHtml(getContextPreview(task.context, rawTask))}</span>
|
||||
</div>
|
||||
<div class="collapsible-content collapsed">
|
||||
${renderContextFields(task.context, rawTask)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Collapsible: Flow Control (with Flowchart) -->
|
||||
<div class="collapsible-section">
|
||||
<div class="collapsible-header">
|
||||
<span class="collapse-icon">▶</span>
|
||||
<span class="section-label">flow_control</span>
|
||||
<span class="section-preview">${escapeHtml(getFlowControlPreview(task.flow_control, rawTask))}</span>
|
||||
</div>
|
||||
<div class="collapsible-content collapsed">
|
||||
<div class="flowchart-container" id="flowchart-${sessionId}-${task.id}"></div>
|
||||
${renderFlowControlDetails(task.flow_control, rawTask)}
|
||||
</div>
|
||||
<div class="task-item-meta-lite">
|
||||
${action ? `<span class="meta-badge action">${escapeHtml(action)}</span>` : ''}
|
||||
${scope ? `<span class="meta-badge scope">${escapeHtml(scope)}</span>` : ''}
|
||||
${modCount > 0 ? `<span class="meta-badge mods">${modCount} mods</span>` : ''}
|
||||
${implCount > 0 ? `<span class="meta-badge impl">${implCount} steps</span>` : ''}
|
||||
${acceptCount > 0 ? `<span class="meta-badge accept">${acceptCount} acceptance</span>` : ''}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@@ -1866,18 +1843,15 @@ function openTaskDrawerForLite(sessionId, taskId) {
|
||||
const task = session.tasks?.find(t => t.id === taskId);
|
||||
if (!task) return;
|
||||
|
||||
// Set current drawer tasks
|
||||
// Set current drawer tasks and session context
|
||||
currentDrawerTasks = session.tasks || [];
|
||||
window._currentDrawerSession = session;
|
||||
|
||||
document.getElementById('drawerTaskTitle').textContent = task.title || taskId;
|
||||
document.getElementById('drawerContent').innerHTML = renderTaskDrawerContent(task);
|
||||
// Use dedicated lite task drawer renderer
|
||||
document.getElementById('drawerContent').innerHTML = renderLiteTaskDrawerContent(task, session);
|
||||
document.getElementById('taskDetailDrawer').classList.add('open');
|
||||
document.getElementById('drawerOverlay').classList.add('active');
|
||||
|
||||
// Initialize flowchart after DOM is updated
|
||||
setTimeout(() => {
|
||||
renderFullFlowchart(task.flow_control || task._raw?.flow_control);
|
||||
}, 100);
|
||||
}
|
||||
|
||||
function renderLitePlanTab(session) {
|
||||
@@ -2816,6 +2790,199 @@ function renderTaskImplementationDetails(task) {
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Dedicated lite task drawer content renderer
|
||||
function renderLiteTaskDrawerContent(task, session) {
|
||||
const rawTask = task._raw || task;
|
||||
|
||||
return `
|
||||
<!-- Task Header -->
|
||||
<div class="drawer-task-header">
|
||||
<span class="task-id-badge">${escapeHtml(task.task_id || task.id || 'N/A')}</span>
|
||||
${rawTask.action ? `<span class="action-badge">${escapeHtml(rawTask.action)}</span>` : ''}
|
||||
</div>
|
||||
|
||||
<!-- Tab Navigation -->
|
||||
<div class="drawer-tabs">
|
||||
<button class="drawer-tab active" data-tab="overview" onclick="switchDrawerTab('overview')">Overview</button>
|
||||
<button class="drawer-tab" data-tab="implementation" onclick="switchDrawerTab('implementation')">Implementation</button>
|
||||
<button class="drawer-tab" data-tab="files" onclick="switchDrawerTab('files')">Files</button>
|
||||
<button class="drawer-tab" data-tab="raw" onclick="switchDrawerTab('raw')">Raw JSON</button>
|
||||
</div>
|
||||
|
||||
<!-- Tab Content -->
|
||||
<div class="drawer-tab-content">
|
||||
<!-- Overview Tab (default) -->
|
||||
<div class="drawer-panel active" data-tab="overview">
|
||||
${renderLiteTaskOverview(rawTask)}
|
||||
</div>
|
||||
|
||||
<!-- Implementation Tab -->
|
||||
<div class="drawer-panel" data-tab="implementation">
|
||||
${renderLiteTaskImplementation(rawTask)}
|
||||
</div>
|
||||
|
||||
<!-- Files Tab -->
|
||||
<div class="drawer-panel" data-tab="files">
|
||||
${renderLiteTaskFiles(rawTask)}
|
||||
</div>
|
||||
|
||||
<!-- Raw JSON Tab -->
|
||||
<div class="drawer-panel" data-tab="raw">
|
||||
<pre class="json-view">${escapeHtml(JSON.stringify(rawTask, null, 2))}</pre>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// Render lite task overview
|
||||
function renderLiteTaskOverview(task) {
|
||||
let sections = [];
|
||||
|
||||
// Description
|
||||
if (task.description) {
|
||||
sections.push(`
|
||||
<div class="drawer-section">
|
||||
<h4 class="drawer-section-title">Description</h4>
|
||||
<p class="task-description">${escapeHtml(task.description)}</p>
|
||||
</div>
|
||||
`);
|
||||
}
|
||||
|
||||
// Scope
|
||||
if (task.scope) {
|
||||
sections.push(`
|
||||
<div class="drawer-section">
|
||||
<h4 class="drawer-section-title">Scope</h4>
|
||||
<code class="scope-path">${escapeHtml(task.scope)}</code>
|
||||
</div>
|
||||
`);
|
||||
}
|
||||
|
||||
// Acceptance Criteria
|
||||
if (task.acceptance && task.acceptance.length > 0) {
|
||||
sections.push(`
|
||||
<div class="drawer-section">
|
||||
<h4 class="drawer-section-title">Acceptance Criteria</h4>
|
||||
<ul class="acceptance-list">
|
||||
${task.acceptance.map(a => `<li>${escapeHtml(a)}</li>`).join('')}
|
||||
</ul>
|
||||
</div>
|
||||
`);
|
||||
}
|
||||
|
||||
// Dependencies
|
||||
if (task.depends_on && task.depends_on.length > 0) {
|
||||
sections.push(`
|
||||
<div class="drawer-section">
|
||||
<h4 class="drawer-section-title">Dependencies</h4>
|
||||
<div class="dependencies-list">
|
||||
${task.depends_on.map(dep => `<span class="dep-badge">${escapeHtml(dep)}</span>`).join(' ')}
|
||||
</div>
|
||||
</div>
|
||||
`);
|
||||
}
|
||||
|
||||
// Reference
|
||||
if (task.reference) {
|
||||
sections.push(`
|
||||
<div class="drawer-section">
|
||||
<h4 class="drawer-section-title">Reference</h4>
|
||||
${task.reference.pattern ? `<div class="ref-item"><strong>Pattern:</strong> ${escapeHtml(task.reference.pattern)}</div>` : ''}
|
||||
${task.reference.files && task.reference.files.length > 0 ? `
|
||||
<div class="ref-item">
|
||||
<strong>Files:</strong>
|
||||
<ul class="ref-files-list">
|
||||
${task.reference.files.map(f => `<li><code>${escapeHtml(f)}</code></li>`).join('')}
|
||||
</ul>
|
||||
</div>
|
||||
` : ''}
|
||||
${task.reference.examples ? `<div class="ref-item"><strong>Examples:</strong> ${escapeHtml(task.reference.examples)}</div>` : ''}
|
||||
</div>
|
||||
`);
|
||||
}
|
||||
|
||||
return sections.length > 0 ? sections.join('') : '<div class="empty-section">No overview data</div>';
|
||||
}
|
||||
|
||||
// Render lite task implementation steps
|
||||
function renderLiteTaskImplementation(task) {
|
||||
let sections = [];
|
||||
|
||||
// Implementation Steps
|
||||
if (task.implementation && task.implementation.length > 0) {
|
||||
sections.push(`
|
||||
<div class="drawer-section">
|
||||
<h4 class="drawer-section-title">Implementation Steps</h4>
|
||||
<ol class="impl-steps-list">
|
||||
${task.implementation.map((step, idx) => `
|
||||
<li class="impl-step-item">
|
||||
<span class="step-number">${idx + 1}</span>
|
||||
<span class="step-text">${escapeHtml(typeof step === 'string' ? step : step.step || JSON.stringify(step))}</span>
|
||||
</li>
|
||||
`).join('')}
|
||||
</ol>
|
||||
</div>
|
||||
`);
|
||||
}
|
||||
|
||||
// Modification Points
|
||||
if (task.modification_points && task.modification_points.length > 0) {
|
||||
sections.push(`
|
||||
<div class="drawer-section">
|
||||
<h4 class="drawer-section-title">Modification Points</h4>
|
||||
<div class="mod-points-list">
|
||||
${task.modification_points.map(mp => `
|
||||
<div class="mod-point-card">
|
||||
<div class="mod-file"><code>${escapeHtml(mp.file || '')}</code></div>
|
||||
${mp.target ? `<div class="mod-target"><strong>Target:</strong> ${escapeHtml(mp.target)}</div>` : ''}
|
||||
${mp.change ? `<div class="mod-change">${escapeHtml(mp.change)}</div>` : ''}
|
||||
</div>
|
||||
`).join('')}
|
||||
</div>
|
||||
</div>
|
||||
`);
|
||||
}
|
||||
|
||||
return sections.length > 0 ? sections.join('') : '<div class="empty-section">No implementation data</div>';
|
||||
}
|
||||
|
||||
// Render lite task files
|
||||
function renderLiteTaskFiles(task) {
|
||||
const files = [];
|
||||
|
||||
// Collect from modification_points
|
||||
if (task.modification_points) {
|
||||
task.modification_points.forEach(mp => {
|
||||
if (mp.file && !files.includes(mp.file)) files.push(mp.file);
|
||||
});
|
||||
}
|
||||
|
||||
// Collect from scope
|
||||
if (task.scope && !files.includes(task.scope)) {
|
||||
files.push(task.scope);
|
||||
}
|
||||
|
||||
if (files.length === 0) {
|
||||
return '<div class="empty-section">No files specified</div>';
|
||||
}
|
||||
|
||||
return `
|
||||
<div class="drawer-section">
|
||||
<h4 class="drawer-section-title">Target Files</h4>
|
||||
<ul class="target-files-list">
|
||||
${files.map(f => `
|
||||
<li class="file-item">
|
||||
<span class="file-icon">📄</span>
|
||||
<code>${escapeHtml(f)}</code>
|
||||
</li>
|
||||
`).join('')}
|
||||
</ul>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
|
||||
function closeTaskDrawer() {
|
||||
document.getElementById('taskDetailDrawer').classList.remove('open');
|
||||
document.getElementById('drawerOverlay').classList.remove('active');
|
||||
|
||||
Reference in New Issue
Block a user