refactor(dashboard): extract modular Preact component structure
Replace the monolithic single-file dashboards (dashboard.html,
dashboard-preact.html) with a proper modular directory structure:
dashboard/
index.html - Entry point, loads main.js
main.js - App bootstrap, mounts <App> to #root
styles.css - Global styles (dark theme, typography)
components/
App.js - Root component, state management, polling
Header.js - Top bar with refresh/timing info
Sidebar.js - Project tree navigation
SessionCard.js - Individual session card with status/actions
SessionGroup.js - Group sessions by project path
Modal.js - Full conversation viewer overlay
ChatMessages.js - Message list with role styling
MessageBubble.js - Individual message with markdown
QuestionBlock.js - User question input with quick options
EmptyState.js - "No sessions" placeholder
OptionButton.js - Quick response button component
SimpleInput.js - Text input with send button
lib/
preact.js - Preact + htm ESM bundle (CDN shim)
markdown.js - Lightweight markdown-to-HTML renderer
utils/
api.js - fetch wrappers for /api/* endpoints
formatting.js - Time formatting, truncation helpers
status.js - Session status logic, action availability
This structure enables:
- Browser-native ES modules (no build step required)
- Component reuse and isolation
- Easier styling and theming
- IDE support for component navigation
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
teernisse
102
dashboard/components/Sidebar.js
Normal file
102
dashboard/components/Sidebar.js
Normal file
@@ -0,0 +1,102 @@
|
||||
import { html } from '../lib/preact.js';
|
||||
import { getStatusMeta, STATUS_PRIORITY } from '../utils/status.js';
|
||||
|
||||
export function Sidebar({ projectGroups, selectedProject, onSelectProject, totalSessions }) {
|
||||
// Calculate totals for "All Projects"
|
||||
const allStatusCounts = { needs_attention: 0, active: 0, starting: 0, done: 0 };
|
||||
for (const group of projectGroups) {
|
||||
for (const s of group.sessions) {
|
||||
allStatusCounts[s.status] = (allStatusCounts[s.status] || 0) + 1;
|
||||
}
|
||||
}
|
||||
|
||||
// Worst status across all projects
|
||||
const allWorstStatus = totalSessions > 0
|
||||
? Object.keys(allStatusCounts).reduce((worst, status) =>
|
||||
allStatusCounts[status] > 0 && (STATUS_PRIORITY[status] ?? 99) < (STATUS_PRIORITY[worst] ?? 99) ? status : worst
|
||||
, 'done')
|
||||
: 'done';
|
||||
const allWorstMeta = getStatusMeta(allWorstStatus);
|
||||
|
||||
// Tiny inline status indicator
|
||||
const StatusPips = ({ counts }) => html`
|
||||
<div class="flex items-center gap-1 shrink-0">
|
||||
${counts.needs_attention > 0 && html`<span class="rounded-full bg-attention/20 px-1.5 py-0.5 font-mono text-micro tabular-nums text-attention">${counts.needs_attention}</span>`}
|
||||
${counts.active > 0 && html`<span class="rounded-full bg-active/20 px-1.5 py-0.5 font-mono text-micro tabular-nums text-active">${counts.active}</span>`}
|
||||
${counts.starting > 0 && html`<span class="rounded-full bg-starting/20 px-1.5 py-0.5 font-mono text-micro tabular-nums text-starting">${counts.starting}</span>`}
|
||||
${counts.done > 0 && html`<span class="rounded-full bg-done/15 px-1.5 py-0.5 font-mono text-micro tabular-nums text-done/70">${counts.done}</span>`}
|
||||
</div>
|
||||
`;
|
||||
|
||||
return html`
|
||||
<aside class="fixed left-0 top-0 z-40 flex h-screen w-80 flex-col border-r border-selection/50 bg-surface/95 backdrop-blur-sm">
|
||||
<!-- Sidebar Header -->
|
||||
<div class="shrink-0 border-b border-selection/50 px-5 py-4">
|
||||
<div class="inline-flex items-center gap-2 rounded-full border border-starting/40 bg-starting/10 px-2.5 py-0.5 text-micro font-medium uppercase tracking-[0.2em] text-starting">
|
||||
<span class="h-1.5 w-1.5 rounded-full bg-starting animate-float"></span>
|
||||
Control Plane
|
||||
</div>
|
||||
<h1 class="mt-2 font-display text-lg font-semibold text-bright">
|
||||
Agent Mission Control
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<!-- Project List -->
|
||||
<nav class="flex-1 overflow-y-auto px-3 py-3">
|
||||
<!-- All Projects -->
|
||||
<button
|
||||
onClick=${() => onSelectProject(null)}
|
||||
class="group flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-left transition-all ${
|
||||
selectedProject === null
|
||||
? 'bg-selection/50'
|
||||
: 'hover:bg-selection/25'
|
||||
}"
|
||||
>
|
||||
<span class="h-2 w-2 shrink-0 rounded-full ${allWorstMeta.dot}"></span>
|
||||
<span class="flex-1 truncate font-medium text-bright">All Projects</span>
|
||||
<${StatusPips} counts=${allStatusCounts} />
|
||||
</button>
|
||||
|
||||
<!-- Divider -->
|
||||
<div class="my-2 border-t border-selection/30"></div>
|
||||
|
||||
<!-- Individual Projects -->
|
||||
${projectGroups.map(group => {
|
||||
const statusCounts = { needs_attention: 0, active: 0, starting: 0, done: 0 };
|
||||
for (const s of group.sessions) {
|
||||
statusCounts[s.status] = (statusCounts[s.status] || 0) + 1;
|
||||
}
|
||||
|
||||
const worstStatus = group.sessions.reduce((worst, s) =>
|
||||
(STATUS_PRIORITY[s.status] ?? 99) < (STATUS_PRIORITY[worst] ?? 99) ? s.status : worst
|
||||
, 'done');
|
||||
const worstMeta = getStatusMeta(worstStatus);
|
||||
const isSelected = selectedProject === group.projectDir;
|
||||
|
||||
return html`
|
||||
<button
|
||||
key=${group.projectDir}
|
||||
onClick=${() => onSelectProject(group.projectDir)}
|
||||
class="group flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-left transition-all ${
|
||||
isSelected
|
||||
? 'bg-selection/50'
|
||||
: 'hover:bg-selection/25'
|
||||
}"
|
||||
>
|
||||
<span class="h-2 w-2 shrink-0 rounded-full ${worstMeta.dot}"></span>
|
||||
<span class="flex-1 truncate text-fg">${group.projectName}</span>
|
||||
<${StatusPips} counts=${statusCounts} />
|
||||
</button>
|
||||
`;
|
||||
})}
|
||||
</nav>
|
||||
|
||||
<!-- Sidebar Footer -->
|
||||
<div class="shrink-0 border-t border-selection/50 px-5 py-3">
|
||||
<div class="font-mono text-micro text-dim">
|
||||
${totalSessions} session${totalSessions === 1 ? '' : 's'} total
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
`;
|
||||
}
|
||||
Reference in New Issue
Block a user