da08d7a588
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>
59 lines
2.9 KiB
JavaScript
59 lines
2.9 KiB
JavaScript
import { html, useState, useEffect } from '../lib/preact.js';
|
|
|
|
export function Header({ sessions }) {
|
|
const [clock, setClock] = useState(() => new Date());
|
|
|
|
useEffect(() => {
|
|
const timer = setInterval(() => setClock(new Date()), 30000);
|
|
return () => clearInterval(timer);
|
|
}, []);
|
|
|
|
const counts = {
|
|
attention: sessions.filter(s => s.status === 'needs_attention').length,
|
|
active: sessions.filter(s => s.status === 'active').length,
|
|
starting: sessions.filter(s => s.status === 'starting').length,
|
|
done: sessions.filter(s => s.status === 'done').length,
|
|
};
|
|
const total = sessions.length;
|
|
|
|
return html`
|
|
<header class="sticky top-0 z-50 px-4 pt-4 sm:px-6 sm:pt-6">
|
|
<div class="glass-panel rounded-2xl px-4 py-4 sm:px-6">
|
|
<div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
|
|
<div class="min-w-0">
|
|
<div class="inline-flex items-center gap-2 rounded-full border border-starting/40 bg-starting/10 px-3 py-1 text-micro font-medium uppercase tracking-[0.24em] text-starting">
|
|
<span class="h-1.5 w-1.5 rounded-full bg-starting animate-float"></span>
|
|
Control Plane
|
|
</div>
|
|
<h1 class="mt-3 truncate font-display text-xl font-semibold text-bright sm:text-2xl">
|
|
Agent Mission Control
|
|
</h1>
|
|
<p class="mt-1 text-sm text-dim">
|
|
${total} live session${total === 1 ? '' : 's'} • Updated ${clock.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' })}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-2 gap-2 text-xs sm:grid-cols-4 sm:gap-3">
|
|
<div class="rounded-xl border border-attention/40 bg-attention/12 px-3 py-2 text-attention">
|
|
<div class="font-mono text-lg font-medium tabular-nums text-bright">${counts.attention}</div>
|
|
<div class="text-micro uppercase tracking-[0.16em]">Attention</div>
|
|
</div>
|
|
<div class="rounded-xl border border-active/40 bg-active/12 px-3 py-2 text-active">
|
|
<div class="font-mono text-lg font-medium tabular-nums text-bright">${counts.active}</div>
|
|
<div class="text-micro uppercase tracking-[0.16em]">Active</div>
|
|
</div>
|
|
<div class="rounded-xl border border-starting/40 bg-starting/12 px-3 py-2 text-starting">
|
|
<div class="font-mono text-lg font-medium tabular-nums text-bright">${counts.starting}</div>
|
|
<div class="text-micro uppercase tracking-[0.16em]">Starting</div>
|
|
</div>
|
|
<div class="rounded-xl border border-done/40 bg-done/12 px-3 py-2 text-done">
|
|
<div class="font-mono text-lg font-medium tabular-nums text-bright">${counts.done}</div>
|
|
<div class="text-micro uppercase tracking-[0.16em]">Done</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
`;
|
|
}
|