tenbo-dashboard 0.1.0

package/src/ui/FindingModal/RelatedFindingsSection.tsx

@@ -0,0 +1,29 @@
+import type { Finding } from '../../api/lib/health/types';
+import styles from './FindingModal.module.css';
+
+interface Props {
+  finding: Finding;
+  allFindings: Finding[];
+  onSelect: (f: Finding) => void;
+}
+
+export function RelatedFindingsSection({ finding, allFindings, onSelect }: Props) {
+  const related = allFindings.filter(f =>
+    f.id !== finding.id && (f.target === finding.target || (f.layer === finding.layer && f.signal === finding.signal))
+  ).slice(0, 5);
+  if (related.length === 0) return null;
+  return (
+    <section className={styles.section}>
+      <h3 className={styles.sectionTitle}>Related findings</h3>
+      <ul className={styles.relatedList}>
+        {related.map(f => (
+          <li key={f.id}>
+            <button type="button" className={styles.relatedLink} onClick={() => onSelect(f)}>
+              {f.headline}
+            </button>
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+}

package/src/ui/FindingModal/SuggestionSection.tsx

@@ -0,0 +1,13 @@
+import type { Finding } from '../../api/lib/health/types';
+import styles from './FindingModal.module.css';
+
+export function SuggestionSection({ finding }: { finding: Finding }) {
+  return (
+    <section className={styles.section}>
+      <h3 className={styles.sectionTitle}>Suggestion</h3>
+      <p className={styles.suggestionSummary}>{finding.suggestion.summary}</p>
+      <p className={styles.suggestionRationale}>{finding.suggestion.rationale}</p>
+      <p className={styles.actionKind}>action_kind: <code>{finding.suggestion.action_kind}</code></p>
+    </section>
+  );
+}

package/src/ui/FindingModal/index.tsx

@@ -0,0 +1,36 @@
+import { X } from 'lucide-react';
+import type { Finding } from '../../api/lib/health/types';
+import { HeadlineSection } from './HeadlineSection';
+import { SuggestionSection } from './SuggestionSection';
+import { EvidenceSection } from './EvidenceSection';
+import { RelatedFindingsSection } from './RelatedFindingsSection';
+import styles from './FindingModal.module.css';
+
+interface Props {
+  finding: Finding | null;
+  allFindings: Finding[];
+  onClose: () => void;
+  onOpenFile: (path: string) => void;
+  onSelectFinding?: (f: Finding) => void;
+}
+
+export function FindingModal({ finding, allFindings, onClose, onOpenFile, onSelectFinding }: Props) {
+  if (!finding) return null;
+  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>
+        <HeadlineSection finding={finding} />
+        <button type="button" className={styles.targetLink} onClick={() => onOpenFile(finding.target)}>
+          {finding.target}
+        </button>
+        <SuggestionSection finding={finding} />
+        <EvidenceSection finding={finding} />
+        {onSelectFinding && <RelatedFindingsSection finding={finding} allFindings={allFindings} onSelect={onSelectFinding} />}
+      </div>
+    </>
+  );
+}

package/src/ui/HealthPage/Digest.tsx

@@ -0,0 +1,29 @@
+import type { Finding, Signal } from '../../api/lib/health/types';
+import { sortFindings } from './severity';
+import { FindingRow } from './FindingRow';
+import styles from './HealthPage.module.css';
+
+interface Props {
+  findings: Finding[];
+  signalWeights: readonly Signal[];
+  onSelect: (finding: Finding) => void;
+  limit?: number;
+}
+
+export function Digest({ findings, signalWeights, onSelect, limit = 10 }: Props) {
+  const top = sortFindings(findings, signalWeights).slice(0, limit);
+  return (
+    <section className={styles.section}>
+      <h2 className={styles.sectionTitle}>Top findings</h2>
+      {top.length === 0 ? (
+        <p className={styles.emptyState}>No findings — everything looks healthy.</p>
+      ) : (
+        <ul className={styles.findingList}>
+          {top.map(f => (
+            <li key={f.id}><FindingRow finding={f} onClick={onSelect} /></li>
+          ))}
+        </ul>
+      )}
+    </section>
+  );
+}

package/src/ui/HealthPage/FindingRow.tsx

@@ -0,0 +1,21 @@
+import type { Finding } from '../../api/lib/health/types';
+import { SeverityIcon } from './SeverityIcon';
+import styles from './HealthPage.module.css';
+
+interface Props {
+  finding: Finding;
+  onClick: (finding: Finding) => void;
+  showLayer?: boolean;
+}
+
+export function FindingRow({ finding, onClick, showLayer = true }: Props) {
+  return (
+    <button type="button" className={styles.findingRow} onClick={() => onClick(finding)}>
+      <span className={styles.findingSev}><SeverityIcon severity={finding.severity} /></span>
+      <span className={styles.findingSignal}>{finding.signal}</span>
+      {showLayer && <span className={styles.findingLayer}>· {finding.layer}</span>}
+      <span className={styles.findingHeadline}>{finding.headline}</span>
+      <span className={styles.findingSuggestion}>→ {finding.suggestion.summary}</span>
+    </button>
+  );
+}

package/src/ui/HealthPage/HealthPage.module.css

@@ -0,0 +1,45 @@
+/* tenbo-dashboard/src/ui/HealthPage/HealthPage.module.css */
+.page { padding: 24px 32px; max-width: 1200px; margin: 0 auto; }
+.pageTitle { font-size: 24px; font-weight: 600; margin-bottom: 8px; }
+.totals { color: var(--muted, #888); font-size: 14px; }
+
+.section { margin-bottom: 32px; }
+.sectionTitle { font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted, #888); margin-bottom: 12px; }
+
+.findingList { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
+.findingRow {
+  display: grid;
+  grid-template-columns: 24px max-content max-content 1fr max-content;
+  gap: 8px; align-items: baseline;
+  padding: 10px 12px; border: 1px solid var(--border, #2a2a2a); border-radius: 6px;
+  background: var(--console-soot); color: inherit; cursor: pointer; text-align: left; width: 100%;
+  font-family: inherit; font-size: 13px;
+}
+.findingRow:hover { background: var(--console-iron); }
+.findingSignal { font-weight: 500; text-transform: capitalize; }
+.findingLayer { color: var(--muted, #888); }
+.findingHeadline { color: var(--text, #ddd); }
+.findingSuggestion { color: var(--muted, #888); }
+
+.layerGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
+.layerCard {
+  display: flex; flex-direction: column; gap: 8px;
+  padding: 16px; border: 1px solid var(--border, #2a2a2a); border-radius: 8px;
+  background: var(--console-soot); color: inherit; cursor: pointer; text-align: left;
+  font-family: inherit;
+}
+.layerCard:hover { background: var(--console-iron); }
+.layerCardTitle { font-size: 15px; font-weight: 600; margin: 0; }
+.layerCardStats { display: flex; gap: 8px; color: var(--muted, #888); font-size: 13px; }
+.layerCardCounts { display: flex; gap: 8px; font-size: 13px; flex-wrap: wrap; }
+.layerCardLink { color: var(--muted, #888); font-size: 12px; }
+.emptyState { color: var(--muted, #888); font-style: italic; }
+
+.findingSev { display: inline-flex; align-items: center; }
+
+.severityChip { display: inline-flex; align-items: center; gap: 4px; }
+
+.severityLegend { display: inline-flex; gap: 16px; align-items: center; flex-wrap: wrap; }
+.severityLegendItem { display: inline-flex; align-items: center; gap: 6px; }
+.severityLegendCount { font-weight: 600; color: var(--text, #ddd); }
+.severityLegendLabel { color: var(--muted, #888); text-transform: lowercase; }

package/src/ui/HealthPage/HealthPage.test.tsx

@@ -0,0 +1,49 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { HealthPage } from './HealthPage';
+import type { TenboState } from '../../types';
+import type { Finding } from '../../api/lib/health/types';
+
+const finding = (over: Partial<Finding>): Finding => ({
+  id: 'editor.hotspot-files.foo', signal: 'hotspot-files', severity: 'critical',
+  confidence: 'high', layer: 'visual-canvas', target: 'apps/editor/src/foo.ts',
+  headline: 'foo.ts (1500 LOC)',
+  suggestion: { summary: 'Split foo.ts', rationale: '', action_kind: 'split-file' },
+  details: { kind: 'hotspot-files', loc: 1500, top_functions: [], commits_30d: 0, split_candidates: [] },
+  ...over,
+});
+
+const state: TenboState = {
+  scopes: [{
+    id: 'editor', path: 'apps/editor', description: 'Editor', layers: [
+      { id: 'visual-canvas', name: 'Visual Canvas', description: '', files: ['src/**'], dependencies: { inbound: [], outbound: [], external: [] } },
+    ],
+    items: [],
+  }],
+  crossCutting: [], narratives: {}, workspaceContent: {} as any,
+  metrics: {
+    editor: {
+      generated_at: '2026-05-02T00:00:00Z',
+      layers: { 'visual-canvas': { file_count: 100, total_lines: 5000, outbound_deps: 0, deep_dive_count: 0, intent_age_days: null, pct_roadmap_in_now: 0 } },
+      findings: [finding({})],
+    },
+  },
+};
+
+describe('HealthPage', () => {
+  it('renders digest section with finding headline', () => {
+    render(<HealthPage state={state} onSelectLayer={vi.fn()} onSelectFinding={vi.fn()} />);
+    expect(screen.getByText(/foo\.ts \(1500 LOC\)/)).toBeInTheDocument();
+  });
+
+  it('renders one layer card per layer', () => {
+    render(<HealthPage state={state} onSelectLayer={vi.fn()} onSelectFinding={vi.fn()} />);
+    expect(screen.getByText('Visual Canvas')).toBeInTheDocument();
+    expect(screen.getByText(/100 files/)).toBeInTheDocument();
+  });
+
+  it('does not render the old "limit"-suffix violation messages', () => {
+    render(<HealthPage state={state} onSelectLayer={vi.fn()} onSelectFinding={vi.fn()} />);
+    expect(screen.queryByText(/\(limit \d+\)/)).toBeNull();
+  });
+});

package/src/ui/HealthPage/HealthPage.tsx

@@ -0,0 +1,66 @@
+import { useMemo } from 'react';
+import type { TenboState } from '../../types';
+import type { Finding } from '../../api/lib/health/types';
+import { SIGNAL_WEIGHTS_DEFAULT } from '../../api/lib/health/types';
+import { Digest } from './Digest';
+import { LayerCard } from './LayerCard';
+import { SeverityLegend } from './SeverityLegend';
+import styles from './HealthPage.module.css';
+
+interface Props {
+  state: TenboState;
+  onSelectLayer: (scopeId: string, layerId: string) => void;
+  onSelectFinding: (finding: Finding) => void;
+}
+
+export function HealthPage({ state, onSelectLayer, onSelectFinding }: Props) {
+  const allFindings = useMemo<Finding[]>(() => {
+    const out: Finding[] = [];
+    for (const m of Object.values(state.metrics ?? {})) out.push(...(m.findings ?? []));
+    return out;
+  }, [state.metrics]);
+
+  const totals = { critical: 0, warning: 0, info: 0 };
+  for (const f of allFindings) totals[f.severity]++;
+
+  return (
+    <div className={styles.page}>
+      <section className={styles.section}>
+        <h1 className={styles.pageTitle}>Health overview</h1>
+        <div className={styles.totals}>
+          <SeverityLegend counts={totals} />
+        </div>
+      </section>
+
+      <Digest
+        findings={allFindings}
+        signalWeights={SIGNAL_WEIGHTS_DEFAULT}
+        onSelect={onSelectFinding}
+      />
+
+      <section className={styles.section}>
+        <h2 className={styles.sectionTitle}>Layers</h2>
+        <div className={styles.layerGrid}>
+          {state.scopes.flatMap(scope =>
+            scope.layers.map(layer => {
+              const metrics = state.metrics?.[scope.id]?.layers[layer.id];
+              const findings = (state.metrics?.[scope.id]?.findings ?? []).filter(f => f.layer === layer.id);
+              if (!metrics) return null;
+              return (
+                <LayerCard
+                  key={`${scope.id}/${layer.id}`}
+                  scopeId={scope.id}
+                  layerId={layer.id}
+                  layerName={layer.name}
+                  metrics={metrics}
+                  findings={findings}
+                  onSelect={() => onSelectLayer(scope.id, layer.id)}
+                />
+              );
+            })
+          )}
+        </div>
+      </section>
+    </div>
+  );
+}

package/src/ui/HealthPage/LayerCard.tsx

@@ -0,0 +1,36 @@
+import type { Finding } from '../../api/lib/health/types';
+import type { LayerMetrics } from '../../types';
+import { Check } from 'lucide-react';
+import { SeverityIcon } from './SeverityIcon';
+import styles from './HealthPage.module.css';
+
+interface Props {
+  scopeId: string;
+  layerId: string;
+  layerName: string;
+  metrics: LayerMetrics;
+  findings: Finding[];
+  onSelect: () => void;
+}
+
+export function LayerCard({ layerName, metrics, findings, onSelect }: Props) {
+  const counts = { critical: 0, warning: 0, info: 0 };
+  for (const f of findings) counts[f.severity]++;
+  return (
+    <button type="button" className={styles.layerCard} onClick={onSelect}>
+      <h3 className={styles.layerCardTitle}>{layerName}</h3>
+      <div className={styles.layerCardStats}>
+        <span>{metrics.file_count.toLocaleString()} files</span>
+        <span>·</span>
+        <span>{metrics.total_lines.toLocaleString()} LOC</span>
+      </div>
+      <div className={styles.layerCardCounts}>
+        {counts.critical > 0 && <span className={styles.severityChip}><SeverityIcon severity="critical" /> {counts.critical}</span>}
+        {counts.warning > 0 && <span className={styles.severityChip}><SeverityIcon severity="warning" /> {counts.warning}</span>}
+        {counts.info > 0 && <span className={styles.severityChip}><SeverityIcon severity="info" /> {counts.info}</span>}
+        {counts.critical === 0 && counts.warning === 0 && counts.info === 0 && <span className={styles.severityChip}><Check size={14} strokeWidth={2} color="var(--success, #48bb78)" aria-label="healthy" /></span>}
+      </div>
+      <span className={styles.layerCardLink}>drill in →</span>
+    </button>
+  );
+}

package/src/ui/HealthPage/SeverityIcon.tsx

@@ -0,0 +1,29 @@
+import { AlertOctagon, AlertTriangle, Info, type LucideIcon } from 'lucide-react';
+import type { Severity } from '../../api/lib/health/types';
+import { severityColor } from './severity';
+
+const ICONS: Record<Severity, LucideIcon> = {
+  critical: AlertOctagon,
+  warning: AlertTriangle,
+  info: Info,
+};
+
+interface Props {
+  severity: Severity;
+  size?: number;
+  className?: string;
+  'aria-label'?: string;
+}
+
+export function SeverityIcon({ severity, size = 14, className, ...rest }: Props) {
+  const Icon = ICONS[severity];
+  return (
+    <Icon
+      size={size}
+      strokeWidth={2}
+      color={severityColor(severity)}
+      className={className}
+      aria-label={rest['aria-label'] ?? severity}
+    />
+  );
+}

package/src/ui/HealthPage/SeverityLegend.tsx

@@ -0,0 +1,27 @@
+import { SeverityIcon } from './SeverityIcon';
+import styles from './HealthPage.module.css';
+
+interface Props {
+  counts: { critical: number; warning: number; info: number };
+  /** When true (default), severity tiers with a count of 0 are still shown so the legend reads as a key. */
+  showZero?: boolean;
+}
+
+export function SeverityLegend({ counts, showZero = true }: Props) {
+  const items: Array<{ severity: 'critical' | 'warning' | 'info'; count: number; label: string }> = [
+    { severity: 'critical', count: counts.critical, label: 'critical' },
+    { severity: 'warning', count: counts.warning, label: 'warning' },
+    { severity: 'info', count: counts.info, label: 'info' },
+  ];
+  return (
+    <span className={styles.severityLegend}>
+      {items.filter(i => showZero || i.count > 0).map(({ severity, count, label }) => (
+        <span key={severity} className={styles.severityLegendItem}>
+          <SeverityIcon severity={severity} />
+          <span className={styles.severityLegendCount}>{count}</span>
+          <span className={styles.severityLegendLabel}>{label}</span>
+        </span>
+      ))}
+    </span>
+  );
+}

package/src/ui/HealthPage/severity.test.ts

@@ -0,0 +1,46 @@
+import { describe, it, expect } from 'vitest';
+import { sortFindings, severityColor } from './severity';
+import type { Finding } from '../../api/lib/health/types';
+
+const f = (over: Partial<Finding>): Finding => ({
+  id: 'x', signal: 'hotspot-files', severity: 'warning', confidence: 'high',
+  layer: 'l', target: 't', headline: 'h',
+  suggestion: { summary: '', rationale: '', action_kind: 'split-file' },
+  details: { kind: 'hotspot-files', loc: 0, top_functions: [], commits_30d: 0, split_candidates: [] },
+  ...over,
+});
+
+describe('sortFindings', () => {
+  const weights = ['dead-code', 'hotspot-files', 'aging-todos'] as const;
+  it('orders by severity tier first', () => {
+    const sorted = sortFindings([
+      f({ id: 'a', severity: 'info' }),
+      f({ id: 'b', severity: 'critical' }),
+      f({ id: 'c', severity: 'warning' }),
+    ], weights as any);
+    expect(sorted.map(x => x.id)).toEqual(['b', 'c', 'a']);
+  });
+
+  it('breaks ties by signal weight', () => {
+    const sorted = sortFindings([
+      f({ id: 'a', severity: 'critical', signal: 'aging-todos' }),
+      f({ id: 'b', severity: 'critical', signal: 'dead-code' }),
+    ], weights as any);
+    expect(sorted.map(x => x.id)).toEqual(['b', 'a']);
+  });
+
+  it('breaks remaining ties by confidence', () => {
+    const sorted = sortFindings([
+      f({ id: 'a', severity: 'critical', signal: 'dead-code', confidence: 'low' }),
+      f({ id: 'b', severity: 'critical', signal: 'dead-code', confidence: 'high' }),
+    ], weights as any);
+    expect(sorted.map(x => x.id)).toEqual(['b', 'a']);
+  });
+});
+
+describe('severityColor', () => {
+  it('returns distinct strings per severity', () => {
+    expect(severityColor('critical')).not.toBe(severityColor('warning'));
+    expect(severityColor('warning')).not.toBe(severityColor('info'));
+  });
+});

package/src/ui/HealthPage/severity.ts

@@ -0,0 +1,21 @@
+import { CONFIDENCE_RANK, SEVERITY_RANK, type Finding, type Severity, type Signal } from '../../api/lib/health/types';
+
+export function sortFindings(findings: Finding[], signalWeights: readonly Signal[]): Finding[] {
+  const weightOf = (s: Signal): number => {
+    const i = signalWeights.indexOf(s);
+    return i === -1 ? signalWeights.length : i;
+  };
+  return findings.slice().sort((a, b) => {
+    const sev = SEVERITY_RANK[b.severity] - SEVERITY_RANK[a.severity];
+    if (sev !== 0) return sev;
+    const sig = weightOf(a.signal) - weightOf(b.signal);
+    if (sig !== 0) return sig;
+    return CONFIDENCE_RANK[b.confidence] - CONFIDENCE_RANK[a.confidence];
+  });
+}
+
+export function severityColor(s: Severity): string {
+  return s === 'critical' ? 'var(--health-critical, #f56565)'
+       : s === 'warning'  ? 'var(--health-warning, #ecc94b)'
+       :                    'var(--health-info, #4299e1)';
+}

package/src/ui/ItemCard.module.css

@@ -0,0 +1,131 @@
+.card {
+  padding: 10px;
+  background: var(--console-iron);
+  border-radius: var(--r-md);
+  margin-bottom: 4px;
+  cursor: grab;
+  position: relative;
+  transition: background var(--dur-state) var(--ease);
+}
+.card:hover { background: var(--console-mist); }
+.card:focus-visible {
+  outline: 2px solid var(--signal-cyan);
+  outline-offset: 2px;
+}
+
+.id {
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0.04em;
+  color: var(--console-fog);
+  margin-bottom: 4px;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 4px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+}
+
+/* Priority pill — single-letter, color carries meaning. */
+.priority {
+  font-size: 10px;
+  font-weight: 600;
+  padding: 1px 6px;
+  border-radius: var(--r-full);
+  letter-spacing: 0.04em;
+  font-family: 'Inter', sans-serif;
+}
+.p0 { background: var(--halt-red); color: var(--console-black); }
+.p1 { background: var(--slow-amber); color: var(--console-black); }
+.p2 { background: var(--console-mist); color: var(--console-fog); }
+.p3 { background: transparent; color: var(--console-smoke); border: 1px solid var(--console-mist); }
+
+/* Relationship chip — shows spawned_from, related count, etc. */
+.relChip {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  font-size: 10px;
+  font-weight: 500;
+  letter-spacing: 0.02em;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  color: var(--console-smoke);
+  background: var(--console-soot);
+  padding: 1px 6px;
+  border-radius: var(--r-sm);
+  white-space: nowrap;
+}
+
+.titleInput {
+  width: 100%;
+  font: inherit;
+  font-weight: 600;
+  font-size: 13px;
+  color: var(--console-snow);
+  background: transparent;
+  border: none;
+  padding: 0;
+}
+
+.title {
+  font-weight: 600;
+  font-size: 13px;
+  color: var(--console-snow);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.descInput {
+  width: 100%;
+  font: inherit;
+  font-size: 12px;
+  margin-top: 4px;
+  min-height: 40px;
+  color: var(--console-snow);
+  background: var(--console-soot);
+  border: 1px solid var(--console-mist);
+  border-radius: var(--r-md);
+  padding: 6px 8px;
+}
+
+.desc {
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 1.45;
+  color: var(--console-fog);
+  margin-top: 4px;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.phaseProgress {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 8px;
+}
+.phaseChip {
+  font-size: 10px;
+  font-weight: 500;
+  letter-spacing: 0.04em;
+  color: var(--console-fog);
+  background: transparent;
+  padding: 0;
+  white-space: nowrap;
+}
+.phaseBar {
+  flex: 1;
+  height: 2px;
+  background: var(--console-mist);
+  border-radius: var(--r-full);
+  overflow: hidden;
+}
+.phaseBarFill {
+  display: block;
+  height: 100%;
+  background: var(--signal-cyan);
+  transition: width var(--dur-entry) var(--ease);
+}