tenbo-dashboard 0.1.0

package/src/ui/TaskList.tsx

@@ -0,0 +1,91 @@
+import { CornerLeftUp, ArrowLeftRight } from 'lucide-react';
+import type { Item, Status } from '../types';
+import { effectiveStatus } from '../api/lib/phases';
+import styles from './TaskList.module.css';
+
+export interface FlatItem {
+  item: Item;
+  scopeId: string;
+  layerName?: string;
+}
+
+interface Props {
+  items: FlatItem[];
+  onRowClick: (scopeId: string, item: Item) => void;
+}
+
+const STATUS_ORDER: Status[] = ['now', 'next', 'later', 'done'];
+const STATUS_LABEL: Record<Status, string> = { now: 'Now', next: 'Next', later: 'Later', done: 'Done' };
+
+export function TaskList({ items, onRowClick }: Props) {
+  const sorted = STATUS_ORDER.flatMap(s =>
+    items.filter(({ item }) => effectiveStatus(item) === s)
+  );
+
+  if (items.length === 0) {
+    return <div className={styles.empty}>No items to show.</div>;
+  }
+
+  return (
+    <div className={styles.wrap}>
+      <table className={styles.table}>
+        <thead>
+          <tr>
+            <th className={styles.thStatus}>Status</th>
+            <th className={styles.thId}>ID</th>
+            <th className={styles.thPriority}>Priority</th>
+            <th className={styles.thTitle}>Title</th>
+            <th className={styles.thLayer}>Layer</th>
+            <th className={styles.thType}>Type</th>
+          </tr>
+        </thead>
+        <tbody>
+          {sorted.map(({ item, scopeId, layerName }) => {
+            const status = effectiveStatus(item);
+            return (
+              <tr
+                key={item.id}
+                className={styles.row}
+                onClick={() => onRowClick(scopeId, item)}
+                tabIndex={0}
+                onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onRowClick(scopeId, item); } }}
+              >
+                <td>
+                  <span className={`${styles.badge} ${styles[`badge_${status}`]}`}>
+                    {STATUS_LABEL[status]}
+                  </span>
+                </td>
+                <td>
+                  <div className={styles.tdId}>
+                    <span className={styles.idText}>{item.id}</span>
+                    {item.spawned_from && (
+                      <span className={styles.relChip} title={`Spawned from ${item.spawned_from}`}>
+                        <CornerLeftUp size={10} strokeWidth={1.75} />
+                      </span>
+                    )}
+                    {item.related && item.related.length > 0 && (
+                      <span className={styles.relChip} title={`Related to ${item.related.length} item(s)`}>
+                        <ArrowLeftRight size={10} strokeWidth={1.75} /> {item.related.length}
+                      </span>
+                    )}
+                  </div>
+                </td>
+                <td>
+                  {item.priority
+                    ? <span className={`${styles.priority} ${styles[`pri_${item.priority}`]}`}>{item.priority.toUpperCase()}</span>
+                    : <span className={styles.dash}>—</span>
+                  }
+                </td>
+                <td>
+                  <span className={styles.titleText}>{item.title}</span>
+                </td>
+                <td className={styles.tdLayer}>{layerName ?? item.layer ?? <span className={styles.dash}>—</span>}</td>
+                <td className={styles.tdType}>{item.type ?? <span className={styles.dash}>—</span>}</td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    </div>
+  );
+}

package/src/ui/TopBar.module.css

@@ -0,0 +1,78 @@
+.header {
+  position: sticky;
+  top: 0;
+  z-index: var(--z-header, 50);
+  display: flex;
+  align-items: stretch;
+  gap: 24px;
+  padding: 0 16px;
+  height: 48px;
+  background: var(--console-black);
+  border-bottom: 1px solid var(--console-mist);
+}
+.brand {
+  display: inline-flex;
+  align-items: center;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--console-snow);
+  letter-spacing: -0.005em;
+}
+
+/* Mode nav — DESIGN.md spec: 2px Signal Cyan bottom strut on active, no pill, no fill. */
+.modeToggle {
+  display: flex;
+  gap: 0;
+  height: 100%;
+}
+.modeButton, .modeActive {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  height: 100%;
+  padding: 0 12px;
+  background: transparent;
+  border: none;
+  border-radius: 0;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--console-fog);
+  cursor: pointer;
+  transition: color var(--dur-state) var(--ease);
+}
+.modeButton:hover, .modeActive:hover { color: var(--console-snow); }
+.modeActive {
+  color: var(--signal-cyan);
+}
+.modeActive::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: -1px;
+  height: 2px;
+  background: var(--signal-cyan);
+}
+
+.spacer {
+  flex: 1;
+}
+.validateBtn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.dot {
+  width: 8px;
+  height: 8px;
+  border-radius: var(--r-full);
+}
+.label {
+  font-size: 12px;
+  color: var(--console-fog);
+}
+
+/* Center the Reload button vertically with the header */
+.header > :global(.outlined-button) {
+  align-self: center;
+}

package/src/ui/TopBar.tsx

@@ -0,0 +1,48 @@
+import { RefreshCw } from 'lucide-react';
+import type { Mode } from '../router/routes';
+import styles from './TopBar.module.css';
+
+interface Props {
+  mode: Mode;
+  onSelectMode: (m: Mode) => void;
+  onReload: () => void;
+}
+
+export function TopBar({ mode, onSelectMode, onReload }: Props) {
+  return (
+    <header className={styles.header}>
+      <strong className={styles.brand}>tenbo</strong>
+      <nav className={styles.modeToggle} role="tablist" aria-label="Top-level view">
+        <button
+          role="tab"
+          aria-selected={mode === 'roadmap'}
+          className={mode === 'roadmap' ? styles.modeActive : styles.modeButton}
+          onClick={() => onSelectMode('roadmap')}
+        >
+          Roadmap
+        </button>
+        <button
+          role="tab"
+          aria-selected={mode === 'health'}
+          className={mode === 'health' ? styles.modeActive : styles.modeButton}
+          onClick={() => onSelectMode('health')}
+        >
+          Health
+        </button>
+        <button
+          role="tab"
+          aria-selected={mode === 'docs'}
+          className={mode === 'docs' ? styles.modeActive : styles.modeButton}
+          onClick={() => onSelectMode('docs')}
+        >
+          Docs
+        </button>
+      </nav>
+      <div className={styles.spacer} />
+      <button onClick={onReload} className="outlined-button icon-text">
+        <RefreshCw size={14} strokeWidth={1.75} />
+        Reload
+      </button>
+    </header>
+  );
+}

package/src/ui/WorkspacePage/WorkspacePage.module.css

@@ -0,0 +1,24 @@
+.page {
+  max-width: 960px;
+  margin: 0 auto;
+  padding: 0 32px 48px;
+}
+.breadcrumb {
+  padding: 12px 32px;
+  border-bottom: 1px solid var(--console-mist);
+  font-size: 12px;
+  font-weight: 500;
+  letter-spacing: 0.02em;
+  color: var(--console-fog);
+  margin: 0 -32px;
+}
+.tabs {
+  display: flex;
+  gap: 0;
+  padding: 16px 32px 8px;
+  border-bottom: 1px solid var(--console-mist);
+  margin: 0 -32px 24px;
+}
+.body {
+  padding-top: 8px;
+}

package/src/ui/WorkspacePage/WorkspacePage.tsx

@@ -0,0 +1,36 @@
+import type { Route, WorkspaceTab } from '../../router/routes';
+import type { TenboState } from '../../types';
+import { OverviewTab } from './tabs/OverviewTab';
+import { PrinciplesTab } from './tabs/PrinciplesTab';
+import { GlossaryTab } from './tabs/GlossaryTab';
+import styles from './WorkspacePage.module.css';
+
+const TABS: WorkspaceTab[] = ['overview', 'principles', 'glossary'];
+
+const TAB_LABELS: Record<WorkspaceTab, string> = {
+  'overview': 'Project overview',
+  'principles': 'Principles',
+  'glossary': 'Glossary',
+};
+
+export function WorkspacePage(props: { tab: WorkspaceTab; navigate: (r: Route) => void; state: TenboState }) {
+  return (
+    <div className={styles.page}>
+      <nav aria-label="breadcrumb" className={styles.breadcrumb}>
+        <span>Project</span>
+      </nav>
+      <nav className={styles.tabs}>
+        {TABS.map((t) => (
+          <button key={t} aria-pressed={props.tab === t} onClick={() => props.navigate({ kind: 'docs-project', tab: t })}>
+            {TAB_LABELS[t]}
+          </button>
+        ))}
+      </nav>
+      <div className={styles.body}>
+        {props.tab === 'overview' && <OverviewTab state={props.state} navigate={props.navigate} />}
+        {props.tab === 'principles' && <PrinciplesTab state={props.state} />}
+        {props.tab === 'glossary' && <GlossaryTab state={props.state} />}
+      </div>
+    </div>
+  );
+}

package/src/ui/WorkspacePage/tabs/GlossaryTab.tsx

@@ -0,0 +1,6 @@
+import { Markdown } from '../../Markdown';
+import type { TenboState } from '../../../types';
+
+export function GlossaryTab({ state }: { state: TenboState }) {
+  return <Markdown source={state.workspaceContent.glossaryMd} />;
+}

package/src/ui/WorkspacePage/tabs/OverviewTab.tsx

@@ -0,0 +1,28 @@
+import { Markdown } from '../../Markdown';
+import type { Route } from '../../../router/routes';
+import type { TenboState } from '../../../types';
+
+export function OverviewTab({ state }: { state: TenboState; navigate: (r: Route) => void }) {
+  return (
+    <div>
+      <Markdown source={state.workspaceContent.overviewMd} />
+
+      {state.crossCutting.length > 0 && (
+        <section style={{ marginTop: 24 }}>
+          <h2 style={{ fontSize: 14, fontWeight: 700, marginBottom: 12 }}>Cross-cutting concerns</h2>
+          {state.crossCutting.map((cc) => (
+            <div key={cc.id} style={{ padding: '8px 0', borderBottom: '1px solid var(--border, #eee)' }}>
+              <span style={{ fontSize: 11, color: 'var(--muted, #888)', marginRight: 8 }}>{cc.id}</span>
+              <span style={{ fontWeight: 500 }}>{cc.description}</span>
+              {cc.spans.length > 0 && (
+                <div style={{ fontSize: 12, color: 'var(--muted, #888)', marginTop: 2 }}>
+                  Spans: {cc.spans.join(', ')}
+                </div>
+              )}
+            </div>
+          ))}
+        </section>
+      )}
+    </div>
+  );
+}

package/src/ui/WorkspacePage/tabs/PrinciplesTab.tsx

@@ -0,0 +1,6 @@
+import { Markdown } from '../../Markdown';
+import type { TenboState } from '../../../types';
+
+export function PrinciplesTab({ state }: { state: TenboState }) {
+  return <Markdown source={state.workspaceContent.principlesMd} />;
+}

package/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "isolatedModules": true,
+    "allowImportingTsExtensions": false,
+    "noEmit": true
+  },
+  "include": ["src", "tests", "vite.config.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import { tenboApiPlugin } from './src/api/plugin';
+
+export default defineConfig({
+  plugins: [react(), tenboApiPlugin()],
+  server: { port: 5174 },
+  test: { environment: 'jsdom', globals: true, setupFiles: ['./src/test-setup.ts'] },
+});