tenbo-dashboard 0.1.0

package/src/ui/RoadmapPage/RoadmapPage.tsx

@@ -0,0 +1,255 @@
+import { useMemo, useState } from 'react';
+import { Columns2, List } from 'lucide-react';
+import { DndContext, type DragEndEvent, PointerSensor, useSensor, useSensors } from '@dnd-kit/core';
+import { LayerKanban } from '../LayerKanban';
+import { TaskList, type FlatItem } from '../TaskList';
+import { effectiveStatus } from '../../api/lib/phases';
+import { tenboApi } from '../../api/client';
+import type { Route } from '../../router/routes';
+import type { Item, Layer, Status, TenboState } from '../../types';
+import styles from './RoadmapPage.module.css';
+
+const GENERAL_SCOPE = 'general';
+const GENERAL_LAYER: Layer = {
+  id: 'general',
+  name: 'General / cross-cutting',
+  description: 'Items that span scopes or do not fit a single layer.',
+  files: [],
+};
+
+function layersInRenderOrder(layers: Layer[]): Array<{ layer: Layer; depth: number }> {
+  const out: Array<{ layer: Layer; depth: number }> = [];
+  const tops = layers.filter((l) => !l.parent);
+  for (const top of tops) {
+    out.push({ layer: top, depth: 0 });
+    for (const child of layers.filter((l) => l.parent === top.id)) {
+      out.push({ layer: child, depth: 1 });
+    }
+  }
+  return out;
+}
+
+interface Props {
+  state: TenboState;
+  scopeFilter: string | undefined;
+  layerFilter: string | undefined;
+  navigate: (r: Route) => void;
+  onCardClick: (scopeId: string, item: Item) => void;
+  onPatch: (scopeId: string, itemId: string, patch: Partial<Item>) => Promise<void>;
+}
+
+export function RoadmapPage({ state, scopeFilter, layerFilter, navigate, onCardClick, onPatch }: Props) {
+  const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 4 } }));
+  const [view, setView] = useState<'kanban' | 'list'>('kanban');
+  const [search, setSearch] = useState('');
+
+  const itemBySource = useMemo(() => {
+    const m = new Map<string, { scopeId: string; item: Item }>();
+    for (const s of state.scopes) for (const i of s.items) m.set(i.id, { scopeId: s.id, item: i });
+    return m;
+  }, [state]);
+
+  const crossCuttingItems = state.crossCuttingRoadmap ?? [];
+  const showGeneral = !scopeFilter || scopeFilter === GENERAL_SCOPE;
+  const showScopes = !scopeFilter || scopeFilter !== GENERAL_SCOPE;
+  const visibleScopes = showScopes
+    ? (scopeFilter ? state.scopes.filter((s) => s.id === scopeFilter) : state.scopes)
+    : [];
+  const visibleGeneral = showGeneral && !layerFilter ? crossCuttingItems : [];
+  const q = search.toLowerCase();
+  const matchesSearch = (item: Item) =>
+    !q ||
+    item.id.toLowerCase().includes(q) ||
+    item.title.toLowerCase().includes(q) ||
+    (item.description ?? '').toLowerCase().includes(q);
+
+  const allItems = [
+    ...visibleScopes.flatMap((s) => s.items).filter((i) => (!layerFilter || i.layer === layerFilter) && matchesSearch(i)),
+    ...visibleGeneral.filter(matchesSearch),
+  ];
+
+  const flatItems = useMemo<FlatItem[]>(() => {
+    const result: FlatItem[] = [];
+    for (const scope of visibleScopes) {
+      const layerMap = new Map(scope.layers.map(l => [l.id, l.name]));
+      for (const item of scope.items) {
+        if (layerFilter && item.layer !== layerFilter) continue;
+        if (!matchesSearch(item)) continue;
+        result.push({ item, scopeId: scope.id, layerName: item.layer ? layerMap.get(item.layer) : undefined });
+      }
+    }
+    for (const item of visibleGeneral) {
+      if (matchesSearch(item)) result.push({ item, scopeId: GENERAL_SCOPE });
+    }
+    return result;
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [state, scopeFilter, layerFilter, search]);
+
+  const handleDragEnd = async (e: DragEndEvent) => {
+    const activeId = String(e.active.id);
+    const overId = e.over?.id ? String(e.over.id) : null;
+    if (!overId) return;
+    const meta = itemBySource.get(activeId);
+    if (!meta) return;
+
+    if (overId.includes('::')) {
+      const [, status] = overId.split('::');
+      if (meta.item.status !== status) {
+        await onPatch(meta.scopeId, activeId, { status: status as Status });
+      }
+    } else {
+      const scope = state.scopes.find((s) => s.id === meta.scopeId)!;
+      const orderedIds = scope.items.map((i) => i.id);
+      const fromIdx = orderedIds.indexOf(activeId);
+      const toIdx = orderedIds.indexOf(overId);
+      if (fromIdx === -1 || toIdx === -1) return;
+      orderedIds.splice(toIdx, 0, orderedIds.splice(fromIdx, 1)[0]);
+      await tenboApi.reorder(meta.scopeId, orderedIds);
+    }
+  };
+
+  return (
+    <DndContext sensors={sensors} onDragEnd={handleDragEnd}>
+      <div className={styles.stickyBar}>
+        <RoadmapFilterBar
+          scopes={state.scopes}
+          scopeFilter={scopeFilter}
+          layerFilter={layerFilter}
+          navigate={navigate}
+          view={view}
+          onViewChange={setView}
+          allItems={allItems}
+          search={search}
+          onSearchChange={setSearch}
+        />
+      </div>
+      <main style={{ padding: view === 'list' ? '16px 0 0' : 16 }}>
+        {view === 'list' ? (
+          <TaskList
+            items={flatItems}
+            onRowClick={(scopeId, item) => onCardClick(scopeId, item)}
+          />
+        ) : (
+          <>
+            {visibleScopes.map((scope) => (
+              <section key={scope.id}>
+                {!scopeFilter && <h3 style={{ marginTop: 16 }}>{scope.id}</h3>}
+                {layersInRenderOrder(scope.layers)
+                  .filter(({ layer }) => !layerFilter || layer.id === layerFilter)
+                  .map(({ layer, depth }) => (
+                    <LayerKanban
+                      key={layer.id}
+                      layer={layer}
+                      depth={depth}
+                      alwaysOpen={!!layerFilter}
+                      items={scope.items.filter((i) => i.layer === layer.id && matchesSearch(i))}
+                      onCardClick={(item) => onCardClick(scope.id, item)}
+                      onTitleEdit={(id, title) => onPatch(scope.id, id, { title })}
+                      onDescEdit={(id, desc) => onPatch(scope.id, id, { description: desc })}
+                    />
+                  ))}
+              </section>
+            ))}
+            {visibleGeneral.length > 0 && (
+              <section>
+                {!scopeFilter && <h3 style={{ marginTop: 16 }}>{GENERAL_SCOPE}</h3>}
+                <LayerKanban
+                  layer={GENERAL_LAYER}
+                  items={visibleGeneral.filter(matchesSearch)}
+                  onCardClick={(item) => onCardClick(GENERAL_SCOPE, item)}
+                  onTitleEdit={() => {}}
+                  onDescEdit={() => {}}
+                />
+              </section>
+            )}
+          </>
+        )}
+      </main>
+    </DndContext>
+  );
+}
+
+function RoadmapFilterBar({ scopes, scopeFilter, layerFilter, navigate, view, onViewChange, allItems, search, onSearchChange }: {
+  scopes: TenboState['scopes'];
+  scopeFilter: string | undefined;
+  layerFilter: string | undefined;
+  navigate: (r: Route) => void;
+  view: 'kanban' | 'list';
+  onViewChange: (v: 'kanban' | 'list') => void;
+  allItems: Item[];
+  search: string;
+  onSearchChange: (v: string) => void;
+}) {
+  const activeScope = scopeFilter && scopeFilter !== GENERAL_SCOPE ? scopes.find((s) => s.id === scopeFilter) : undefined;
+  const counts = { now: 0, next: 0, later: 0, done: 0 };
+  for (const i of allItems) counts[effectiveStatus(i)]++;
+
+  return (
+    <div className={styles.filterRow}>
+      {/* View toggle — far left */}
+      <div className={styles.viewToggle} role="group" aria-label="View layout">
+        <button
+          className={`${styles.viewBtn} ${view === 'kanban' ? styles.viewBtnActive : ''}`}
+          onClick={() => onViewChange('kanban')}
+          aria-pressed={view === 'kanban'}
+          title="Kanban board"
+        >
+          <Columns2 size={13} strokeWidth={1.75} />
+          Kanban
+        </button>
+        <button
+          className={`${styles.viewBtn} ${view === 'list' ? styles.viewBtnActive : ''}`}
+          onClick={() => onViewChange('list')}
+          aria-pressed={view === 'list'}
+          title="Task list"
+        >
+          <List size={13} strokeWidth={1.75} />
+          List
+        </button>
+      </div>
+
+      <div className={styles.filterDivider} />
+
+      {/* Scope + layer filters */}
+      <span className={styles.filterLabel}>Scope</span>
+      <select
+        value={scopeFilter ?? ''}
+        onChange={(e) => navigate({ kind: 'roadmap', scope: e.target.value || undefined })}
+      >
+        <option value="">All</option>
+        {scopes.map((s) => <option key={s.id} value={s.id}>{s.id}</option>)}
+        <option value={GENERAL_SCOPE}>General / cross-cutting</option>
+      </select>
+      {activeScope && (
+        <>
+          <span className={styles.filterLabel}>Layer</span>
+          <select
+            value={layerFilter ?? ''}
+            onChange={(e) => navigate({ kind: 'roadmap', scope: activeScope.id, layer: e.target.value || undefined })}
+          >
+            <option value="">All layers</option>
+            {activeScope.layers.map((l) => <option key={l.id} value={l.id}>{l.name}</option>)}
+          </select>
+        </>
+      )}
+
+      <input
+        className={styles.searchInput}
+        type="search"
+        placeholder="Search tasks…"
+        value={search}
+        onChange={(e) => onSearchChange(e.target.value)}
+        aria-label="Search tasks by title"
+      />
+
+      {/* Counts — far right */}
+      <div className={styles.filterSpacer} />
+      <div className={styles.counts}>
+        <span className={styles.countNow}>Now <strong>{counts.now}</strong></span>
+        <span className={styles.countNext}>Next <strong>{counts.next}</strong></span>
+        <span className={styles.countLater}>Later <strong>{counts.later}</strong></span>
+        <span className={styles.countDone}>Done <strong>{counts.done}</strong></span>
+      </div>
+    </div>
+  );
+}

package/src/ui/ScopePage/ScopePage.module.css

@@ -0,0 +1,72 @@
+.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);
+}
+.description {
+  margin-top: 6px;
+  color: var(--console-fog);
+}
+.meta {
+  font-size: 12px;
+  color: var(--console-fog);
+}
+.headerSpacer {
+  margin-left: auto;
+}
+.layerList {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.layerItem {
+  padding: 12px 0;
+  border-bottom: 1px solid var(--console-mist);
+}
+.layerName {
+  font-weight: 600;
+}
+.layerDesc {
+  font-size: 13px;
+  color: var(--console-fog);
+  margin-top: 2px;
+}
+.layerDeps {
+  font-size: 12px;
+  margin-top: 6px;
+  color: var(--console-fog);
+  display: grid;
+  gap: 2px;
+}
+.depLabel {
+  font-weight: 500;
+}

package/src/ui/ScopePage/ScopePage.tsx

@@ -0,0 +1,131 @@
+import { ArrowRight } from 'lucide-react';
+import type { Route } from '../../router/routes';
+import type { Layer, TenboState } from '../../types';
+import styles from './ScopePage.module.css';
+
+function layersInRenderOrder(layers: Layer[]): Array<{ layer: Layer; depth: number }> {
+  const out: Array<{ layer: Layer; depth: number }> = [];
+  const tops = layers.filter((l) => !l.parent);
+  for (const top of tops) {
+    out.push({ layer: top, depth: 0 });
+    for (const child of layers.filter((l) => l.parent === top.id)) {
+      out.push({ layer: child, depth: 1 });
+    }
+  }
+  return out;
+}
+
+function LayerLink({ layerId, layers, scopeId, navigate }: {
+  layerId: string;
+  layers: Layer[];
+  scopeId: string;
+  navigate: (r: Route) => void;
+}) {
+  const target = layers.find((l) => l.id === layerId);
+  return (
+    <button
+      className="link-button"
+      onClick={() => navigate({ kind: 'docs-layer', scopeId, layerId, tab: 'overview' })}
+    >
+      {target?.name ?? layerId}
+    </button>
+  );
+}
+
+function joinList(nodes: Array<React.ReactNode>): React.ReactNode {
+  return nodes.map((n, i) => (
+    <span key={i}>
+      {n}
+      {i < nodes.length - 1 ? ', ' : ''}
+    </span>
+  ));
+}
+
+export function ScopePage({ scopeId, state, navigate }: { scopeId: string; state: TenboState; navigate: (r: Route) => void }) {
+  const scope = state.scopes.find((s) => s.id === scopeId);
+  if (!scope) return <div style={{ padding: 24 }}>Scope not found: {scopeId}</div>;
+
+  const ordered = layersInRenderOrder(scope.layers);
+  const itemCount = scope.items.length;
+
+  return (
+    <div className={styles.page}>
+      <nav aria-label="breadcrumb" className={styles.breadcrumb}>
+        <button className="link-button" onClick={() => navigate({ kind: 'docs-project', tab: 'overview' })}>Project</button>
+        {' / '}
+        <span>{scope.id}</span>
+      </nav>
+
+      <header className={styles.header}>
+        <div style={{ flex: 1 }}>
+          <h1 className={styles.title}>{scope.id}</h1>
+          <p className={styles.description}>{scope.description}</p>
+          <div className={styles.meta}>
+            <code>{scope.path}</code> · {scope.layers.length} layers · {itemCount} roadmap items
+          </div>
+        </div>
+        <div className={styles.headerSpacer}>
+          <button
+            className="outlined-button icon-text"
+            onClick={() => navigate({ kind: 'roadmap', scope: scope.id })}
+          >
+            View roadmap
+            <ArrowRight size={14} strokeWidth={1.75} />
+          </button>
+        </div>
+      </header>
+
+      <section>
+        <h2 style={{ fontSize: 14, fontWeight: 700, marginBottom: 12 }}>Layers</h2>
+        <ul className={styles.layerList}>
+          {ordered.map(({ layer, depth }) => {
+            const uses = layer.dependencies?.outbound ?? [];
+            const usedBy = layer.dependencies?.inbound ?? [];
+            const external = layer.dependencies?.external ?? [];
+            return (
+              <li
+                key={layer.id}
+                className={styles.layerItem}
+                style={{ paddingLeft: depth * 20 }}
+              >
+                <button
+                  className={`link-button ${styles.layerName}`}
+                  onClick={() => navigate({ kind: 'docs-layer', scopeId: scope.id, layerId: layer.id, tab: 'overview' })}
+                >
+                  {layer.name}
+                </button>
+                <div className={styles.layerDesc}>{layer.description}</div>
+                {(uses.length > 0 || usedBy.length > 0 || external.length > 0) && (
+                  <div className={styles.layerDeps}>
+                    {uses.length > 0 && (
+                      <div>
+                        <span className={styles.depLabel}>Uses: </span>
+                        {joinList(uses.map((id) => (
+                          <LayerLink key={id} layerId={id} layers={scope.layers} scopeId={scope.id} navigate={navigate} />
+                        )))}
+                      </div>
+                    )}
+                    {usedBy.length > 0 && (
+                      <div>
+                        <span className={styles.depLabel}>Used by: </span>
+                        {joinList(usedBy.map((id) => (
+                          <LayerLink key={id} layerId={id} layers={scope.layers} scopeId={scope.id} navigate={navigate} />
+                        )))}
+                      </div>
+                    )}
+                    {external.length > 0 && (
+                      <div>
+                        <span className={styles.depLabel}>External: </span>
+                        <code>{external.join(', ')}</code>
+                      </div>
+                    )}
+                  </div>
+                )}
+              </li>
+            );
+          })}
+        </ul>
+      </section>
+    </div>
+  );
+}

package/src/ui/SummaryStrip.module.css

@@ -0,0 +1,18 @@
+.strip {
+  padding: 10px 16px;
+  background: var(--console-soot);
+  font-size: 12px;
+  font-weight: 500;
+  letter-spacing: 0.02em;
+  color: var(--console-fog);
+  display: flex;
+  gap: 24px;
+  border-bottom: 1px solid var(--console-mist);
+}
+.strip strong, .strip span[class] {
+  font-weight: 600;
+  margin-left: 4px;
+}
+.now { color: var(--live-green); }
+.next { color: var(--signal-cyan); }
+.done { color: var(--console-smoke); }

package/src/ui/SummaryStrip.tsx

@@ -0,0 +1,16 @@
+import type { Item } from '../types';
+import { effectiveStatus } from '../api/lib/phases';
+import styles from './SummaryStrip.module.css';
+
+export function SummaryStrip({ items }: { items: Item[] }) {
+  const counts = { now: 0, next: 0, later: 0, done: 0 };
+  for (const i of items) counts[effectiveStatus(i)]++;
+  return (
+    <div className={styles.strip}>
+      <span>Now: <strong className={styles.now}>{counts.now}</strong></span>
+      <span>Next: <strong className={styles.next}>{counts.next}</strong></span>
+      <span>Later: <strong>{counts.later}</strong></span>
+      <span>Done: <strong className={styles.done}>{counts.done}</strong></span>
+    </div>
+  );
+}

package/src/ui/TaskList.module.css

@@ -0,0 +1,136 @@
+.wrap {
+  padding: 0 16px 32px;
+  overflow-x: auto;
+}
+
+.table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 12px;
+}
+
+/* Header */
+.table thead tr {
+  border-bottom: 1px solid var(--console-mist);
+}
+.table th {
+  padding: 8px 10px;
+  text-align: left;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--console-smoke);
+  white-space: nowrap;
+}
+
+/* Column widths */
+.thStatus   { width: 76px; }
+.thId       { width: 110px; }
+.thPriority { width: 80px; }
+.thTitle    { min-width: 240px; }
+.thLayer    { width: 180px; }
+.thType     { width: 90px; }
+
+/* Data rows */
+.row {
+  border-bottom: 1px solid var(--console-mist);
+  cursor: pointer;
+  transition: background var(--dur-state) var(--ease);
+}
+.row:hover { background: var(--console-soot); }
+.row:focus-visible {
+  outline: none;
+  background: var(--console-soot);
+  box-shadow: inset 2px 0 0 var(--signal-cyan);
+}
+.row td {
+  padding: 8px 10px;
+  vertical-align: middle;
+}
+
+/* Status badge */
+.badge {
+  display: inline-block;
+  padding: 2px 7px;
+  border-radius: var(--r-full);
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+.badge_now   { background: color-mix(in srgb, var(--live-green) 15%, transparent);   color: var(--live-green); }
+.badge_next  { background: color-mix(in srgb, var(--signal-cyan) 15%, transparent);  color: var(--signal-cyan); }
+.badge_later { background: color-mix(in srgb, var(--console-steel) 20%, transparent); color: var(--console-fog); }
+.badge_done  { background: color-mix(in srgb, var(--console-smoke) 15%, transparent); color: var(--console-smoke); }
+
+/* ID cell — inner div handles flex so <td> stays a proper table cell */
+.tdId {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  white-space: nowrap;
+}
+.idText {
+  color: var(--console-fog);
+  font-family: 'ui-monospace', 'SFMono-Regular', monospace;
+  font-size: 11px;
+}
+.relChip {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  color: var(--console-steel);
+  font-size: 10px;
+}
+
+/* Title cell */
+.titleText {
+  color: var(--console-snow);
+  font-weight: 500;
+  line-height: 1.4;
+}
+
+/* Priority chip */
+.priority {
+  display: inline-block;
+  padding: 1px 5px;
+  border-radius: var(--r-sm);
+  font-size: 9px;
+  font-weight: 800;
+  letter-spacing: 0.05em;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+.pri_p0 { background: color-mix(in srgb, var(--halt-red) 20%, transparent);   color: var(--halt-red); }
+.pri_p1 { background: color-mix(in srgb, var(--slow-amber) 20%, transparent); color: var(--slow-amber); }
+.pri_p2 { background: color-mix(in srgb, var(--signal-cyan) 15%, transparent); color: var(--signal-cyan); }
+.pri_p3 { background: var(--console-iron); color: var(--console-fog); }
+
+/* Type cell */
+.tdType {
+  color: var(--console-fog);
+  font-size: 11px;
+  text-transform: capitalize;
+  white-space: nowrap;
+}
+
+/* Layer cell */
+.tdLayer {
+  color: var(--console-fog);
+  font-size: 11px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 180px;
+}
+
+.dash { color: var(--console-steel); }
+
+.empty {
+  padding: 48px 16px;
+  text-align: center;
+  color: var(--console-smoke);
+  font-size: 13px;
+}