tenbo-dashboard 0.1.0

package/src/ui/ItemModal/index.tsx

@@ -0,0 +1,117 @@
+import { useEffect, useState } from 'react';
+import { X } from 'lucide-react';
+import type { Item, Layer, Priority, RelatedDoc, Status, TenboState } from '../../types';
+import { effectiveStatus } from '../../api/lib/phases';
+import type { Route } from '../../router/routes';
+import { TitleField } from './TitleField';
+import { DescriptionField } from './DescriptionField';
+import { StatusLayerControls } from './StatusLayerControls';
+import { NotesSection } from './NotesSection';
+import { LinksSection } from './LinksSection';
+import { RelatedSection } from './RelatedSection';
+import { RelationshipsSection } from './RelationshipsSection';
+import { EnrichmentSections } from './EnrichmentSections';
+import { PhasesSection } from './PhasesSection';
+import styles from './ItemModal.module.css';
+
+interface Props {
+  item: Item | null;
+  scopeId: string;
+  layers: Layer[];
+  relatedDocs: RelatedDoc[];
+  state?: TenboState;
+  onClose: () => void;
+  onPatch: (patch: Partial<Item>) => Promise<void>;
+  onOpenFile: (path: string) => void;
+  onPromoteRelated: (path: string) => Promise<void>;
+  onSelectItem?: (scopeId: string | undefined, item: Item) => void;
+  navigate: (r: Route) => void;
+}
+
+function hasEnrichment(item: Item): boolean {
+  return Boolean(item.affects?.length || item.done_when?.length || item.risks?.length || item.type || item.files_to_read?.length);
+}
+
+export function ItemModal({ item, scopeId, layers, relatedDocs, state, onClose, onPatch, onOpenFile, onPromoteRelated, onSelectItem, navigate }: Props) {
+  const [draft, setDraft] = useState(item);
+  useEffect(() => setDraft(item), [item]);
+
+  useEffect(() => {
+    const handleKey = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose(); };
+    window.addEventListener('keydown', handleKey);
+    return () => window.removeEventListener('keydown', handleKey);
+  }, [onClose]);
+
+  if (!item || !draft) return null;
+  const related = relatedDocs.filter(d => d.itemId === item.id);
+  const explicit = item.links ?? [];
+
+  const save = (patch: Partial<Item>) => onPatch(patch);
+
+  return (
+    <>
+      <div onClick={onClose} className={`overlay-backdrop ${styles.backdrop}`} />
+      <div className={styles.modal}>
+        <button onClick={onClose} className="close-x" aria-label="Close">
+          <X size={18} strokeWidth={1.75} />
+        </button>
+        <div className={styles.chip}>{item.id} · {item.layer ?? (item.layers || []).join(', ')}</div>
+
+        <TitleField
+          value={draft.title}
+          initial={item.title}
+          onChange={(v) => setDraft({ ...draft, title: v })}
+          onCommit={(v) => save({ title: v })}
+        />
+
+        <DescriptionField
+          value={draft.description}
+          initial={item.description}
+          onChange={(v) => setDraft({ ...draft, description: v })}
+          onCommit={(v) => save({ description: v })}
+        />
+
+        <StatusLayerControls
+          status={effectiveStatus(draft)}
+          layer={draft.layer ?? ''}
+          layers={layers}
+          priority={draft.priority}
+          statusDisabled={!!draft.phases?.length}
+          onStatusChange={(s: Status) => { setDraft({ ...draft, status: s }); save({ status: s }); }}
+          onLayerChange={(l) => { setDraft({ ...draft, layer: l }); save({ layer: l }); }}
+          onPriorityChange={(p: Priority | undefined) => { setDraft({ ...draft, priority: p }); save({ priority: p }); }}
+        />
+
+        {(draft.phases?.length ?? 0) > 0 && <hr className="section-divider" />}
+        <PhasesSection
+          item={draft}
+          onPhaseStatusChange={(phaseId, status) => {
+            const updatedPhases = (draft.phases ?? []).map(p =>
+              p.id === phaseId ? { ...p, status } : p
+            );
+            setDraft({ ...draft, phases: updatedPhases });
+            save({ phases: updatedPhases });
+          }}
+        />
+
+        {item.notes && <hr className="section-divider" />}
+        <NotesSection notes={item.notes} itemId={item.id} />
+
+        {(explicit.length > 0 || related.length > 0) && <hr className="section-divider" />}
+        <LinksSection links={explicit} onOpenFile={onOpenFile} />
+        <RelatedSection related={related} onOpenFile={onOpenFile} onPromote={onPromoteRelated} />
+
+        {state && onSelectItem && (
+          <RelationshipsSection
+            item={item}
+            state={state}
+            onSelect={(ref) => onSelectItem(ref.scopeId, ref.item)}
+          />
+        )}
+
+        {hasEnrichment(item) && <hr className="section-divider" />}
+        <EnrichmentSections item={item} scopeId={scopeId} navigate={(r) => { onClose(); navigate(r); }} />
+      </div>
+    </>
+  );
+}

package/src/ui/KanbanColumn.module.css

@@ -0,0 +1,20 @@
+.column {
+  flex: 1 1 0;
+  min-width: 0;
+  padding: 6px;
+  min-height: 60px;
+  border-radius: var(--r-md);
+  transition: background var(--dur-state) var(--ease);
+}
+.columnOver {
+  background: var(--console-iron);
+}
+.label {
+  font-size: 10px;
+  font-weight: 500;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--console-fog);
+  margin-bottom: 6px;
+  padding: 2px 4px;
+}

package/src/ui/KanbanColumn.tsx

@@ -0,0 +1,36 @@
+import { useDroppable } from '@dnd-kit/core';
+import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
+import { ItemCard } from './ItemCard';
+import type { Item, Status } from '../types';
+import styles from './KanbanColumn.module.css';
+
+interface Props {
+  layerId: string;
+  status: Status;
+  items: Item[];
+  onCardClick: (item: Item) => void;
+  onTitleEdit: (id: string, title: string) => void;
+  onDescEdit: (id: string, desc: string) => void;
+}
+
+const LABEL: Record<Status, string> = { now: 'NOW', next: 'NEXT', later: 'LATER', done: 'DONE' };
+
+export function KanbanColumn({ layerId, status, items, onCardClick, onTitleEdit, onDescEdit }: Props) {
+  const { setNodeRef, isOver } = useDroppable({ id: `${layerId}::${status}`, data: { layerId, status } });
+  return (
+    <div ref={setNodeRef} className={`${styles.column} ${isOver ? styles.columnOver : ''}`}>
+      <div className={styles.label}>{LABEL[status]}</div>
+      <SortableContext items={items.map(i => i.id)} strategy={verticalListSortingStrategy}>
+        {items.map(item => (
+          <ItemCard
+            key={item.id}
+            item={item}
+            onClick={() => onCardClick(item)}
+            onTitleEdit={(t) => onTitleEdit(item.id, t)}
+            onDescEdit={(d) => onDescEdit(item.id, d)}
+          />
+        ))}
+      </SortableContext>
+    </div>
+  );
+}

package/src/ui/LayerDetailPage/LayerDetailPage.module.css

@@ -0,0 +1,11 @@
+.page { padding: 24px 32px; max-width: 1200px; margin: 0 auto; }
+.back { background: transparent; border: none; color: var(--muted, #888); cursor: pointer; padding: 0; margin-bottom: 16px; font-size: 13px; }
+.title { font-size: 24px; font-weight: 600; margin: 0 0 8px; }
+.statsRow { display: flex; gap: 12px; align-items: baseline; color: var(--muted, #888); font-size: 14px; margin-bottom: 4px; }
+.legendRow { margin-bottom: 24px; }
+.signalSection { border-top: 1px solid var(--border, #2a2a2a); padding: 12px 0; }
+.signalHeader { display: flex; gap: 8px; align-items: center; background: transparent; border: none; color: inherit; cursor: pointer; padding: 0; font: inherit; width: 100%; }
+.caret { color: var(--muted, #888); width: 16px; }
+.signalName { font-weight: 600; }
+.signalCount { color: var(--muted, #888); font-size: 13px; margin-left: auto; }
+.findingList { list-style: none; padding: 8px 0 0 24px; margin: 0; display: flex; flex-direction: column; gap: 4px; }

package/src/ui/LayerDetailPage/LayerDetailPage.test.tsx

@@ -0,0 +1,30 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { LayerDetailPage } from './LayerDetailPage';
+import type { TenboState } from '../../types';
+
+const state: TenboState = {
+  scopes: [{
+    id: 'editor', path: 'apps/editor', description: '', layers: [
+      { id: 'lyr', name: 'Lyr', description: '', files: [], dependencies: { inbound: [], outbound: [], external: [] } },
+    ], items: [],
+  }],
+  crossCutting: [], narratives: {}, workspaceContent: {} as any,
+  metrics: {
+    editor: {
+      generated_at: '2026-05-02T00:00:00Z',
+      layers: { lyr: { file_count: 10, total_lines: 200, outbound_deps: 0, deep_dive_count: 0, intent_age_days: null, pct_roadmap_in_now: 0 } },
+      findings: [],
+    },
+  },
+};
+
+describe('LayerDetailPage', () => {
+  it('renders the layer name and all 8 signal sections', () => {
+    render(<LayerDetailPage state={state} scopeId="editor" layerId="lyr" onBack={vi.fn()} onSelectFinding={vi.fn()} />);
+    expect(screen.getByText('Lyr')).toBeInTheDocument();
+    expect(screen.getByText('Hotspot files')).toBeInTheDocument();
+    expect(screen.getByText('Dead code')).toBeInTheDocument();
+    expect(screen.getByText('Redundancy')).toBeInTheDocument();
+  });
+});

package/src/ui/LayerDetailPage/LayerDetailPage.tsx

@@ -0,0 +1,59 @@
+import type { TenboState } from '../../types';
+import type { Finding, Signal } from '../../api/lib/health/types';
+import { SignalSection } from './SignalSection';
+import { SeverityLegend } from '../HealthPage/SeverityLegend';
+import styles from './LayerDetailPage.module.css';
+
+interface Props {
+  state: TenboState;
+  scopeId: string;
+  layerId: string;
+  onBack: () => void;
+  onSelectFinding: (f: Finding) => void;
+}
+
+const SIGNAL_LABELS: Record<Signal, string> = {
+  'hotspot-files': 'Hotspot files',
+  'dead-code': 'Dead code',
+  'coupling': 'Cross-layer coupling',
+  'doc-drift': 'Doc drift',
+  'test-coverage': 'Test coverage',
+  'aging-todos': 'Aging TODOs',
+  'architecture-compliance': 'Architecture compliance',
+  'redundancy': 'Redundancy',
+};
+
+export function LayerDetailPage({ state, scopeId, layerId, onBack, onSelectFinding }: Props) {
+  const scope = state.scopes.find(s => s.id === scopeId);
+  const layer = scope?.layers.find(l => l.id === layerId);
+  const metrics = state.metrics?.[scopeId]?.layers[layerId];
+  const findings = (state.metrics?.[scopeId]?.findings ?? []).filter(f => f.layer === layerId);
+  if (!scope || !layer || !metrics) return <div className={styles.page}>Layer not found.</div>;
+  const counts = { critical: 0, warning: 0, info: 0 };
+  for (const f of findings) counts[f.severity]++;
+  const bySignal = (sig: Signal) => findings.filter(f => f.signal === sig);
+
+  return (
+    <div className={styles.page}>
+      <button type="button" className={styles.back} onClick={onBack}>← Back to health</button>
+      <h1 className={styles.title}>{layer.name}</h1>
+      <div className={styles.statsRow}>
+        <span>{metrics.file_count.toLocaleString()} files</span>
+        <span>·</span>
+        <span>{metrics.total_lines.toLocaleString()} LOC</span>
+      </div>
+      <div className={styles.legendRow}>
+        <SeverityLegend counts={counts} />
+      </div>
+      {(Object.keys(SIGNAL_LABELS) as Signal[]).map(sig => (
+        <SignalSection
+          key={sig}
+          signal={sig}
+          signalLabel={SIGNAL_LABELS[sig]}
+          findings={bySignal(sig)}
+          onSelectFinding={onSelectFinding}
+        />
+      ))}
+    </div>
+  );
+}

package/src/ui/LayerDetailPage/SignalSection.tsx

@@ -0,0 +1,33 @@
+import { useState } from 'react';
+import type { Finding, Signal } from '../../api/lib/health/types';
+import { FindingRow } from '../HealthPage/FindingRow';
+import { sortFindings } from '../HealthPage/severity';
+import styles from './LayerDetailPage.module.css';
+
+interface Props {
+  signal: Signal;
+  signalLabel: string;
+  findings: Finding[];
+  onSelectFinding: (f: Finding) => void;
+}
+
+export function SignalSection({ signal, signalLabel, findings, onSelectFinding }: Props) {
+  const [open, setOpen] = useState(findings.length > 0);
+  const sorted = sortFindings(findings, [signal] as Signal[]);
+  return (
+    <section className={styles.signalSection}>
+      <button type="button" className={styles.signalHeader} onClick={() => setOpen(!open)}>
+        <span className={styles.caret}>{open ? '▾' : '▸'}</span>
+        <span className={styles.signalName}>{signalLabel}</span>
+        <span className={styles.signalCount}>{findings.length === 0 ? '✅ no findings' : `${findings.length} finding${findings.length === 1 ? '' : 's'}`}</span>
+      </button>
+      {open && findings.length > 0 && (
+        <ul className={styles.findingList}>
+          {sorted.map(f => (
+            <li key={f.id}><FindingRow finding={f} onClick={onSelectFinding} showLayer={false} /></li>
+          ))}
+        </ul>
+      )}
+    </section>
+  );
+}

package/src/ui/LayerDrawer.module.css

@@ -0,0 +1,60 @@
+.backdrop {
+  z-index: var(--z-drawer);
+  background: rgba(0, 0, 0, 0.6);
+}
+.drawer {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: min(520px, calc(100vw - 32px));
+  background: var(--console-iron);
+  box-shadow: var(--shadow-modal);
+  overflow-y: auto;
+  padding: 24px;
+  z-index: var(--z-drawer-content);
+}
+.title {
+  margin: 0 0 4px;
+  font-size: 18px;
+  font-weight: 600;
+  letter-spacing: -0.005em;
+  color: var(--console-snow);
+}
+.subtitle {
+  color: var(--console-fog);
+  font-size: 13px;
+  font-style: normal;
+  margin: 0 0 16px;
+}
+.narrative {
+  margin-top: 16px;
+}
+.missing {
+  color: var(--console-smoke);
+  font-size: 13px;
+  margin: 0;
+}
+.filesSummary {
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0.04em;
+  color: var(--console-fog);
+}
+.filesList {
+  font-size: 12px;
+  color: var(--console-fog);
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+}
+.deepDivesHeading {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--console-snow);
+  margin: 16px 0 8px;
+}
+.deepDivesList {
+  margin: 0;
+  padding-left: 18px;
+  font-size: 13px;
+  color: var(--console-snow);
+}

package/src/ui/LayerDrawer.tsx

@@ -0,0 +1,69 @@
+import { useEffect, useState } from 'react';
+import { X } from 'lucide-react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import { tenboApi } from '../api/client';
+import type { Layer, LayerDoc } from '../types';
+import styles from './LayerDrawer.module.css';
+
+interface Props {
+  scopeId: string;
+  layer: Layer | null;
+  narrative: string | null;
+  onClose: () => void;
+}
+
+export function LayerDrawer({ scopeId, layer, narrative, onClose }: Props) {
+  const [docs, setDocs] = useState<LayerDoc[]>([]);
+  const layerId = layer?.id;
+  useEffect(() => {
+    if (!layerId) return;
+    tenboApi.getLayerDocs(scopeId, layerId).then(setDocs).catch(() => setDocs([]));
+  }, [scopeId, layerId]);
+
+  if (!layer) return null;
+  return (
+    <>
+      <div onClick={onClose} className={`dim-backdrop ${styles.backdrop}`} />
+      <aside className={styles.drawer}>
+        <button onClick={onClose} className="close-x" aria-label="Close">
+          <X size={18} strokeWidth={1.75} />
+        </button>
+        <h2 className={styles.title}>{layer.name}</h2>
+        <p className={styles.subtitle}>{layer.description}</p>
+        {narrative ? (
+          <div className={styles.narrative}>
+            <ReactMarkdown remarkPlugins={[remarkGfm]}>{narrative}</ReactMarkdown>
+          </div>
+        ) : <p className={styles.missing}>No narrative file found.</p>}
+
+        {docs.length > 0 && (
+          <>
+            <hr />
+            <h3 className={styles.deepDivesHeading}>Deep dives</h3>
+            <ul className={styles.deepDivesList}>
+              {docs.map(d => (
+                <li key={d.filename}>
+                  <button
+                    className="link-button"
+                    onClick={() => tenboApi.openFile(`.tenbo/scopes/${scopeId}/layers/${layer.id}/${d.filename}`)}
+                  >
+                    {d.title || d.filename}
+                  </button>
+                </li>
+              ))}
+            </ul>
+          </>
+        )}
+
+        <hr />
+        <details>
+          <summary className={styles.filesSummary}>Files (for the agent)</summary>
+          <ul className={styles.filesList}>
+            {layer.files.map(f => <li key={f}><code>{f}</code></li>)}
+          </ul>
+        </details>
+      </aside>
+    </>
+  );
+}

package/src/ui/LayerKanban.module.css

@@ -0,0 +1,45 @@
+.wrap {
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(255, 255, 255, 0.05);
+  border-radius: var(--r-md);
+  margin-bottom: 8px;
+  overflow: hidden;
+}
+.header {
+  padding: 10px 12px;
+  background: transparent;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  cursor: pointer;
+  transition: background var(--dur-state) var(--ease);
+}
+.header:hover { background: var(--console-iron); }
+.headerOpen {
+  border-bottom: 1px solid var(--console-mist);
+}
+.toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--console-fog);
+}
+.name {
+  font-weight: 600;
+  font-size: 14px;
+  color: var(--console-snow);
+}
+.counts {
+  margin-left: auto;
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0.06em;
+  color: var(--console-fog);
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+}
+.body {
+  display: flex;
+  gap: 4px;
+  padding: 8px;
+  background: var(--console-black);
+}

package/src/ui/LayerKanban.tsx

@@ -0,0 +1,65 @@
+import { useState } from 'react';
+import { ChevronDown, ChevronRight } from 'lucide-react';
+import { KanbanColumn } from './KanbanColumn';
+import type { Item, Layer, Status } from '../types';
+import { effectiveStatus } from '../api/lib/phases';
+import styles from './LayerKanban.module.css';
+
+interface Props {
+  layer: Layer;
+  items: Item[];
+  depth?: number;
+  /** When true, hides the collapse header and always shows the board (e.g. single-layer filter). */
+  alwaysOpen?: boolean;
+  onCardClick: (item: Item) => void;
+  onTitleEdit: (id: string, title: string) => void;
+  onDescEdit: (id: string, desc: string) => void;
+}
+
+const STATUSES: Status[] = ['now', 'next', 'later', 'done'];
+
+export function LayerKanban({ layer, items, depth = 0, alwaysOpen = false, onCardClick, onTitleEdit, onDescEdit }: Props) {
+  const counts = STATUSES.map(s => items.filter(i => effectiveStatus(i) === s).length);
+  const hasActive = counts[0] > 0 || counts[1] > 0;
+  const [open, setOpen] = useState(hasActive);
+
+  const isOpen = alwaysOpen || open;
+
+  return (
+    <div className={styles.wrap} style={{ marginLeft: depth * 24 }}>
+      {!alwaysOpen && (
+        <div
+          className={`${styles.header} ${isOpen ? styles.headerOpen : ''}`}
+          role="button"
+          tabIndex={0}
+          aria-expanded={isOpen}
+          onClick={() => setOpen(o => !o)}
+          onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); setOpen(o => !o); } }}
+        >
+          <span className={styles.toggle} aria-hidden="true">
+            {isOpen ? <ChevronDown size={14} strokeWidth={1.75} /> : <ChevronRight size={14} strokeWidth={1.75} />}
+          </span>
+          <span className={styles.name}>{layer.name}</span>
+          <span className={styles.counts}>
+            {counts[0]} · {counts[1]} · {counts[2]} · {counts[3]}
+          </span>
+        </div>
+      )}
+      {isOpen && (
+        <div className={styles.body}>
+          {STATUSES.map(status => (
+            <KanbanColumn
+              key={status}
+              layerId={layer.id}
+              status={status}
+              items={items.filter(i => effectiveStatus(i) === status)}
+              onCardClick={onCardClick}
+              onTitleEdit={onTitleEdit}
+              onDescEdit={onDescEdit}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/ui/LayerPage/FillThisInButton.tsx

@@ -0,0 +1,11 @@
+import { usePrompt } from '../../hooks/usePrompt';
+
+export function FillThisInButton({ label, prompt }: { label: string; prompt: string }) {
+  const { copy, toast } = usePrompt();
+  return (
+    <>
+      <button onClick={() => copy(prompt, 'Prompt')}>{label}</button>
+      {toast && <div role="status">{toast}</div>}
+    </>
+  );
+}

package/src/ui/LayerPage/LayerPage.module.css

@@ -0,0 +1,52 @@
+.page {
+  max-width: 960px;
+  margin: 0 auto;
+  padding: 0 32px 48px;
+}
+.breadcrumb {
+  padding: 12px 0;
+  border-bottom: 1px solid var(--console-mist);
+  font-size: 12px;
+  font-weight: 500;
+  letter-spacing: 0.02em;
+  color: var(--console-fog);
+  margin: 0 -32px;
+  padding-left: 32px;
+  padding-right: 32px;
+}
+.breadcrumb button {
+  font-size: 12px;
+}
+.header {
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+  padding: 20px 0 12px;
+  flex-wrap: wrap;
+}
+.title {
+  margin: 0;
+  font-size: 24px;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  line-height: 1.2;
+  color: var(--console-snow);
+  flex-shrink: 0;
+}
+.headerSpacer {
+  margin-left: auto;
+}
+.tabs {
+  display: flex;
+  gap: 0;
+  padding-bottom: 8px;
+  border-bottom: 1px solid var(--console-mist);
+  margin: 0 -32px 20px;
+  padding-left: 32px;
+  padding-right: 32px;
+}
+.body {
+  padding-top: 8px;
+  overflow-x: auto;
+  min-width: 0;
+}