tenbo-dashboard 0.1.0

package/src/ui/LayerPage/LayerPage.tsx

@@ -0,0 +1,76 @@
+import { ArrowRight } from 'lucide-react';
+import { useLayerContent } from '../../hooks/useLayerContent';
+import { PlainEnglishTab } from './tabs/PlainEnglishTab';
+import { IntentTab } from './tabs/IntentTab';
+import { CodeMapTab } from './tabs/CodeMapTab';
+import { DeepDivesTab } from './tabs/DeepDivesTab';
+import type { Route, LayerTab } from '../../router/routes';
+import type { TenboState } from '../../types';
+import styles from './LayerPage.module.css';
+
+const TABS: LayerTab[] = ['overview', 'purpose', 'files', 'docs'];
+
+const TAB_LABELS: Record<LayerTab, string> = {
+  'overview': 'Overview',
+  'purpose': 'What it does',
+  'files': 'File guide',
+  'docs': 'More docs',
+};
+
+export function LayerPage(props: {
+  scopeId: string;
+  layerId: string;
+  tab: LayerTab;
+  navigate: (r: Route) => void;
+  state: TenboState;
+  generation: number;
+}) {
+  const { content, error } = useLayerContent(props.scopeId, props.layerId, props.generation);
+  const scope = props.state.scopes.find((s) => s.id === props.scopeId);
+  const layer = scope?.layers.find((l) => l.id === props.layerId);
+
+  if (!layer) return <div>Layer not found: {props.scopeId} / {props.layerId}.</div>;
+  if (error) return <div>Failed to load layer content: {error}</div>;
+  if (!content) return <div>Loading…</div>;
+
+  return (
+    <div className={styles.page}>
+      <nav aria-label="breadcrumb" className={styles.breadcrumb}>
+        <button className="link-button" onClick={() => props.navigate({ kind: 'docs-project', tab: 'overview' })}>Project</button>
+        {' / '}
+        <button className="link-button" onClick={() => props.navigate({ kind: 'docs-scope', scopeId: props.scopeId })}>{props.scopeId}</button>
+        {' / '}
+        <span>{layer.name}</span>
+      </nav>
+      <header className={styles.header}>
+        <h1 className={styles.title}>{layer.name}</h1>
+        <div className={styles.headerSpacer}>
+          <button
+            className="outlined-button icon-text"
+            onClick={() => props.navigate({ kind: 'roadmap', scope: props.scopeId, layer: props.layerId })}
+          >
+            View roadmap
+            <ArrowRight size={14} strokeWidth={1.75} />
+          </button>
+        </div>
+      </header>
+      <nav className={styles.tabs}>
+        {TABS.map((t) => (
+          <button
+            key={t}
+            aria-pressed={props.tab === t}
+            onClick={() => props.navigate({ kind: 'docs-layer', scopeId: props.scopeId, layerId: props.layerId, tab: t })}
+          >
+            {TAB_LABELS[t]}
+          </button>
+        ))}
+      </nav>
+      <div className={styles.body}>
+        {props.tab === 'overview' && <PlainEnglishTab scopeId={props.scopeId} layerId={props.layerId} content={content.readme} />}
+        {props.tab === 'purpose' && <IntentTab scopeId={props.scopeId} layerId={props.layerId} content={content.intentMd} />}
+        {props.tab === 'files' && <CodeMapTab scopeId={props.scopeId} layerId={props.layerId} content={content.codeMapMd} />}
+        {props.tab === 'docs' && <DeepDivesTab scopeId={props.scopeId} layerId={props.layerId} />}
+      </div>
+    </div>
+  );
+}

package/src/ui/LayerPage/MetricsBadges.tsx

@@ -0,0 +1,18 @@
+import type { ScopeMetrics } from '../../types';
+
+export function MetricsBadges({ scopeMetrics, layerId }: { scopeMetrics: ScopeMetrics | undefined; layerId: string }) {
+  if (!scopeMetrics) return null;
+  const layer = scopeMetrics.layers?.[layerId];
+  if (!layer) return null;
+  return (
+    <div>
+      <span>files: {layer.file_count}</span>
+      {' '}
+      <span>lines: {layer.total_lines}</span>
+      {' '}
+      <span>deps: {layer.outbound_deps}</span>
+      {' '}
+      <span>intent age: {layer.intent_age_days ?? 'n/a'}d</span>
+    </div>
+  );
+}

package/src/ui/LayerPage/isTemplateOnly.test.ts

@@ -0,0 +1,45 @@
+import { describe, it, expect } from 'vitest';
+import { isTemplateOnly } from './isTemplateOnly';
+
+describe('isTemplateOnly', () => {
+  it('returns true for empty input', () => {
+    expect(isTemplateOnly('')).toBe(true);
+    expect(isTemplateOnly('   \n\n  ')).toBe(true);
+  });
+  it('returns true for headings + html comments only', () => {
+    const tpl = `# layer\n\n## Purpose\n<!-- One paragraph. -->\n\n## Responsibilities\n- <!-- Verb phrases. -->\n`;
+    expect(isTemplateOnly(tpl)).toBe(true);
+  });
+  it('returns true for the migration scaffolding template', () => {
+    const tpl = `# property-editor
+
+## Purpose
+<!-- One paragraph. Why this layer exists. The user-facing job it does. -->
+
+## Responsibilities
+- <!-- Verb phrases. ≤ 7 items. -->
+
+## Boundaries
+- **Upstream (depends on):** <!-- layers and what's consumed -->
+- **Downstream (depended on by):** <!-- layers and what's provided -->
+- **External:** <!-- libraries/services and roles -->
+
+## Boundary decisions
+<!-- Newest first. -->
+- 2026-04-26: created — initial intent draft.
+`;
+    expect(isTemplateOnly(tpl)).toBe(true);
+  });
+  it('returns false when real prose is present', () => {
+    const real = `# layer\n\n## Purpose\nThis layer renders the canvas tree.\n`;
+    expect(isTemplateOnly(real)).toBe(false);
+  });
+  it('returns false when a list item has real content', () => {
+    const real = `# layer\n\n## Responsibilities\n- Render nodes.\n- Persist edits.\n`;
+    expect(isTemplateOnly(real)).toBe(false);
+  });
+  it('returns false when an Upstream bullet has been filled in', () => {
+    const real = `# layer\n\n## Boundaries\n- **Upstream (depends on):** Tokens & Themes.\n`;
+    expect(isTemplateOnly(real)).toBe(false);
+  });
+});

package/src/ui/LayerPage/isTemplateOnly.ts

@@ -0,0 +1,19 @@
+// Returns true when a markdown file contains only template scaffolding
+// (HTML comments, headings, dangling section labels like "- **Upstream:**", and
+// the migration's "created — initial intent draft" marker bullet). Once an
+// agent populates real prose anywhere in the file, this returns false.
+const SCAFFOLDING_PATTERNS: RegExp[] = [
+  /^#{1,6}\s/,                            // headings
+  /^-\s*$/,                               // bare list markers
+  /^-\s+\*\*[^*]+:\*\*\s*$/,              // "- **Label:**" with no body
+  /^-\s+\d{4}-\d{2}-\d{2}:\s*created\b/,  // migration's "initial intent draft" marker
+];
+
+export function isTemplateOnly(source: string): boolean {
+  const stripped = source
+    .replace(/<!--[\s\S]*?-->/g, '')
+    .split('\n')
+    .map((l) => l.trim())
+    .filter((l) => l.length > 0);
+  return stripped.every((l) => SCAFFOLDING_PATTERNS.some((re) => re.test(l)));
+}

package/src/ui/LayerPage/tabs/CodeMapTab.tsx

@@ -0,0 +1,19 @@
+import { Markdown } from '../../Markdown';
+import { FillThisInButton } from '../FillThisInButton';
+import { populateLayerPrompt } from '../../../prompts/populateLayer';
+import { isTemplateOnly } from '../isTemplateOnly';
+
+export function CodeMapTab({ scopeId, layerId, content }: { scopeId: string; layerId: string; content: string }) {
+  if (isTemplateOnly(content)) {
+    return (
+      <div>
+        <p>No code-map recorded for this layer yet.</p>
+        <FillThisInButton
+          label="Copy prompt to populate this layer's code-map"
+          prompt={populateLayerPrompt('codeMap', scopeId, layerId)}
+        />
+      </div>
+    );
+  }
+  return <Markdown source={content} />;
+}

package/src/ui/LayerPage/tabs/DeepDivesTab.tsx

@@ -0,0 +1,35 @@
+import { useEffect, useState } from 'react';
+import { tenboApi } from '../../../api/client';
+import type { LayerDoc } from '../../../types';
+
+export function DeepDivesTab({ scopeId, layerId }: { scopeId: string; layerId: string }) {
+  const [docs, setDocs] = useState<LayerDoc[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    let cancelled = false;
+    setLoading(true);
+    tenboApi.getLayerDocs(scopeId, layerId)
+      .then((d) => { if (!cancelled) { setDocs(d); setLoading(false); } })
+      .catch(() => { if (!cancelled) { setDocs([]); setLoading(false); } });
+    return () => { cancelled = true; };
+  }, [scopeId, layerId]);
+
+  if (loading) return <div>Loading…</div>;
+  if (docs.length === 0) return <p>No deep-dive docs found for this layer.</p>;
+
+  return (
+    <ul>
+      {docs.map((d) => (
+        <li key={d.filename}>
+          <button
+            className="link-button"
+            onClick={() => tenboApi.openFile(`.tenbo/scopes/${scopeId}/layers/${layerId}/${d.filename}`).catch(() => {})}
+          >
+            {d.title || d.filename}
+          </button>
+        </li>
+      ))}
+    </ul>
+  );
+}

package/src/ui/LayerPage/tabs/IntentTab.tsx

@@ -0,0 +1,19 @@
+import { Markdown } from '../../Markdown';
+import { FillThisInButton } from '../FillThisInButton';
+import { populateLayerPrompt } from '../../../prompts/populateLayer';
+import { isTemplateOnly } from '../isTemplateOnly';
+
+export function IntentTab({ scopeId, layerId, content }: { scopeId: string; layerId: string; content: string }) {
+  if (isTemplateOnly(content)) {
+    return (
+      <div>
+        <p>No intent recorded for this layer yet.</p>
+        <FillThisInButton
+          label="Copy prompt to populate this layer's intent"
+          prompt={populateLayerPrompt('intent', scopeId, layerId)}
+        />
+      </div>
+    );
+  }
+  return <Markdown source={content} />;
+}

package/src/ui/LayerPage/tabs/PlainEnglishTab.tsx

@@ -0,0 +1,19 @@
+import { Markdown } from '../../Markdown';
+import { FillThisInButton } from '../FillThisInButton';
+import { populateLayerPrompt } from '../../../prompts/populateLayer';
+import { isTemplateOnly } from '../isTemplateOnly';
+
+export function PlainEnglishTab({ scopeId, layerId, content }: { scopeId: string; layerId: string; content: string }) {
+  if (isTemplateOnly(content)) {
+    return (
+      <div>
+        <p>No README recorded for this layer yet.</p>
+        <FillThisInButton
+          label="Copy prompt to populate this layer's README"
+          prompt={populateLayerPrompt('readme', scopeId, layerId)}
+        />
+      </div>
+    );
+  }
+  return <Markdown source={content} />;
+}

package/src/ui/Markdown.module.css

@@ -0,0 +1,115 @@
+.root :global(h1) {
+  font-size: 24px;
+  font-weight: 600;
+  line-height: 1.2;
+  letter-spacing: -0.01em;
+  color: var(--console-snow);
+  margin: 24px 0 12px;
+}
+.root :global(h2) {
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 1.3;
+  letter-spacing: -0.005em;
+  color: var(--console-snow);
+  margin: 20px 0 8px;
+}
+.root :global(h3) {
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1.4;
+  color: var(--console-snow);
+  margin: 16px 0 4px;
+}
+.root :global(p) {
+  font-size: 13px;
+  line-height: 1.55;
+  color: var(--console-snow);
+  margin: 0 0 12px;
+  max-width: 75ch;
+}
+.root :global(ul), .root :global(ol) {
+  font-size: 13px;
+  line-height: 1.55;
+  color: var(--console-snow);
+  padding-left: 22px;
+  margin: 0 0 12px;
+}
+.root :global(li) { margin-bottom: 2px; }
+.root :global(strong) { font-weight: 600; color: var(--console-snow); }
+.root :global(em) {
+  font-style: normal;
+  color: var(--console-snow);
+  background: var(--console-iron);
+  padding: 0 4px;
+  border-radius: var(--r-sm);
+}
+.root :global(code) {
+  background: var(--console-iron);
+  color: var(--console-snow);
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 12px;
+  padding: 1px 5px;
+  border-radius: var(--r-sm);
+}
+.root :global(pre) {
+  background: var(--console-soot);
+  border: 1px solid var(--console-mist);
+  border-radius: var(--r-md);
+  padding: 12px;
+  overflow-x: auto;
+  margin: 0 0 12px;
+}
+.root :global(pre code) {
+  display: block;
+  padding: 0;
+  background: transparent;
+  border: none;
+  font-size: 12px;
+  line-height: 1.5;
+}
+.root :global(hr) {
+  border: none;
+  border-top: 1px solid var(--console-mist);
+  margin: 16px 0;
+}
+.root :global(table) {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+  line-height: 1.5;
+  margin: 0 0 12px;
+  table-layout: fixed;
+}
+.root :global(th) {
+  text-align: left;
+  font-weight: 600;
+  color: var(--console-snow);
+  padding: 6px 8px;
+  border-bottom: 2px solid var(--console-mist);
+  white-space: nowrap;
+}
+.root :global(td) {
+  padding: 6px 8px;
+  border-bottom: 1px solid var(--console-mist);
+  color: var(--console-snow);
+  vertical-align: top;
+  overflow-wrap: break-word;
+  word-break: break-word;
+}
+.root :global(td code) {
+  word-break: break-all;
+}
+.root :global(blockquote) {
+  border-left: 1px solid var(--console-mist);
+  padding-left: 12px;
+  margin: 0 0 12px;
+  color: var(--console-fog);
+  font-style: normal;
+}
+.empty {
+  color: var(--console-smoke);
+  font-style: normal;
+  font-size: 13px;
+  padding: 24px 0;
+}

package/src/ui/Markdown.tsx

@@ -0,0 +1,27 @@
+import { type ComponentProps } from 'react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import styles from './Markdown.module.css';
+import { formatRoute } from '../router/routes';
+
+const LAYER_LINK_RE = /^(?:\.\/)?scopes\/([^/]+)\/layers\/([^/]+?)(?:\.md)?$/;
+
+function rewriteLayerLinks({ href, children, ...rest }: ComponentProps<'a'>) {
+  if (typeof href === 'string') {
+    const m = LAYER_LINK_RE.exec(href);
+    if (m) {
+      const target = formatRoute({ kind: 'docs-layer', scopeId: m[1], layerId: m[2], tab: 'overview' });
+      return <a href={target} {...rest}>{children}</a>;
+    }
+  }
+  return <a href={href} {...rest}>{children}</a>;
+}
+
+export function Markdown({ source }: { source: string }) {
+  if (!source.trim()) return <div className={styles.empty}>This document is empty.</div>;
+  return (
+    <div className={styles.root}>
+      <ReactMarkdown remarkPlugins={[remarkGfm]} components={{ a: rewriteLayerLinks }}>{source}</ReactMarkdown>
+    </div>
+  );
+}

package/src/ui/RoadmapPage/RoadmapPage.module.css

@@ -0,0 +1,93 @@
+/* Sticky secondary nav — sits flush below the 48px TopBar */
+.stickyBar {
+  position: sticky;
+  top: 48px;
+  z-index: 40;
+  background: var(--console-black);
+}
+
+/* Filter + view-toggle row */
+.filterRow {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 16px;
+  border-bottom: 1px solid var(--console-mist);
+}
+
+.filterLabel {
+  font-size: 12px;
+  color: var(--console-smoke);
+  white-space: nowrap;
+}
+
+.filterDivider {
+  width: 1px;
+  height: 18px;
+  background: var(--console-mist);
+  flex-shrink: 0;
+}
+
+.filterSpacer {
+  flex: 1;
+}
+
+.searchInput {
+  width: 180px;
+  /* inherit padding/border/bg from global input rule; only override what differs */
+  background: var(--console-iron);
+  transition: border-color var(--dur-state) var(--ease), width var(--dur-state) var(--ease);
+}
+.searchInput:focus-visible {
+  border-color: var(--signal-cyan);
+  width: 260px;
+}
+
+/* Item counts — far right of filter row */
+.counts {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--console-smoke);
+  white-space: nowrap;
+}
+.counts strong {
+  font-weight: 700;
+  margin-left: 3px;
+}
+.countNow strong  { color: var(--live-green); }
+.countNext strong { color: var(--signal-cyan); }
+.countLater strong { color: var(--console-fog); }
+.countDone strong  { color: var(--console-smoke); }
+
+/* Kanban / List toggle */
+.viewToggle {
+  display: flex;
+  gap: 2px;
+  background: var(--console-iron);
+  border-radius: var(--r-md);
+  padding: 2px;
+}
+
+.viewBtn {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 4px 10px;
+  border-radius: calc(var(--r-md) - 2px);
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--console-fog);
+  transition: background var(--dur-state) var(--ease), color var(--dur-state) var(--ease);
+}
+
+.viewBtnActive {
+  background: var(--console-mist);
+  color: var(--console-snow);
+}
+
+.viewBtn:hover:not(.viewBtnActive) {
+  color: var(--console-snow);
+}