tenbo-dashboard 0.1.0

package/src/ui/ItemCard.tsx

@@ -0,0 +1,117 @@
+import { useState } from 'react';
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { CornerLeftUp, ArrowLeftRight } from 'lucide-react';
+import type { Item } from '../types';
+import { phaseProgress } from '../api/lib/phases';
+import styles from './ItemCard.module.css';
+
+interface Props {
+  item: Item;
+  onClick: () => void;
+  onTitleEdit: (newTitle: string) => void;
+  onDescEdit: (newDesc: string) => void;
+}
+
+export function ItemCard({ item, onClick, onTitleEdit, onDescEdit }: Props) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: item.id });
+  const dragStyle = {
+    transform: CSS.Translate.toString(transform),
+    transition,
+    opacity: isDragging ? 0.4 : 1,
+  };
+  const [editing, setEditing] = useState<null | 'title' | 'desc'>(null);
+  const phases = item.phases ?? [];
+  const progress = phases.length > 0 ? phaseProgress(phases) : null;
+
+  return (
+    <div
+      ref={setNodeRef}
+      className={styles.card}
+      style={dragStyle}
+      {...attributes}
+      {...listeners}
+      onClick={() => { if (!editing) onClick(); }}
+      onKeyDown={(e) => {
+        if (editing) return;
+        if (e.key === 'Enter') { e.preventDefault(); onClick(); }
+        // Space is consumed by dnd-kit for drag-pickup; don't intercept it.
+      }}
+    >
+      <div className={styles.id}>
+        {item.priority && <span className={`${styles.priority} ${styles[item.priority]}`}>{item.priority.toUpperCase()}</span>}
+        {item.id}
+        {item.spawned_from && (
+          <span
+            className={styles.relChip}
+            title={`Spawned from ${item.spawned_from}`}
+            aria-label={`Spawned from ${item.spawned_from}`}
+          >
+            <CornerLeftUp size={11} strokeWidth={1.75} /> {item.spawned_from}
+          </span>
+        )}
+        {item.related && item.related.length > 0 && (
+          <span
+            className={styles.relChip}
+            title={`Related to ${item.related.length} item${item.related.length === 1 ? '' : 's'}`}
+            aria-label={`Related to ${item.related.length} items`}
+          >
+            <ArrowLeftRight size={11} strokeWidth={1.75} /> {item.related.length}
+          </span>
+        )}
+      </div>
+
+      {editing === 'title' ? (
+        <input
+          autoFocus
+          defaultValue={item.title}
+          onBlur={(e) => { setEditing(null); if (e.target.value !== item.title) onTitleEdit(e.target.value); }}
+          onKeyDown={(e) => { if (e.key === 'Enter') (e.target as HTMLInputElement).blur(); if (e.key === 'Escape') setEditing(null); }}
+          onClick={(e) => e.stopPropagation()}
+          className={styles.titleInput}
+        />
+      ) : (
+        <div
+          onDoubleClick={(e) => { e.stopPropagation(); setEditing('title'); }}
+          className={styles.title}
+          title={item.title}
+        >
+          {item.title}
+        </div>
+      )}
+
+      {editing === 'desc' ? (
+        <textarea
+          autoFocus
+          defaultValue={item.description}
+          onBlur={(e) => { setEditing(null); if (e.target.value !== item.description) onDescEdit(e.target.value); }}
+          onClick={(e) => e.stopPropagation()}
+          className={styles.descInput}
+        />
+      ) : (
+        <div
+          onDoubleClick={(e) => { e.stopPropagation(); setEditing('desc'); }}
+          className={styles.desc}
+        >
+          {item.description}
+        </div>
+      )}
+
+      {progress && (
+        <div
+          className={styles.phaseProgress}
+          title={`${progress.done} of ${progress.total} phases complete${progress.active ? ` · active: ${progress.active.title}` : ''}`}
+          aria-label={`Phase progress: ${progress.done} of ${progress.total} done`}
+        >
+          <span className={styles.phaseChip}>{progress.done}/{progress.total}</span>
+          <span className={styles.phaseBar} aria-hidden="true">
+            <span
+              className={styles.phaseBarFill}
+              style={{ width: progress.total > 0 ? `${(progress.done / progress.total) * 100}%` : '0%' }}
+            />
+          </span>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/ui/ItemModal/DescriptionField.tsx

@@ -0,0 +1,22 @@
+import styles from './ItemModal.module.css';
+
+interface Props {
+  value: string;
+  initial: string;
+  onChange: (v: string) => void;
+  onCommit: (v: string) => void;
+}
+
+export function DescriptionField({ value, initial, onChange, onCommit }: Props) {
+  return (
+    <>
+      <label className={styles.descLabel}>Brief description</label>
+      <textarea
+        value={value}
+        onChange={e => onChange(e.target.value)}
+        onBlur={e => { if (e.target.value !== initial) onCommit(e.target.value); }}
+        className={styles.descTextarea}
+      />
+    </>
+  );
+}

package/src/ui/ItemModal/EnrichmentSections.tsx

@@ -0,0 +1,49 @@
+import type { ReactNode } from 'react';
+import type { Item } from '../../types';
+import type { Route } from '../../router/routes';
+
+export function EnrichmentSections({ item, scopeId, navigate }: { item: Item; scopeId: string; navigate: (r: Route) => void }) {
+  const affects = item.affects ?? [];
+  const sections: ReactNode[] = [];
+
+  if (affects.length > 0) {
+    sections.push(
+      <Section key="affects" title="Also touches">
+        <ul>
+          {affects.map((a) => {
+            // Same-scope: bare layer id (e.g., "ai-assistant"). Cross-scope: "<scope>:<layer>".
+            const [scope, layer] = a.includes(':') ? a.split(':') : [scopeId, a];
+            return (
+              <li key={a}>
+                <button className="link-button" onClick={() => navigate({ kind: 'docs-layer', scopeId: scope, layerId: layer, tab: 'overview' })}>{a}</button>
+              </li>
+            );
+          })}
+        </ul>
+      </Section>
+    );
+  }
+  if (item.done_when?.length) sections.push(<Section key="done" title="What done looks like"><List items={item.done_when} /></Section>);
+  if (item.risks?.length) sections.push(<Section key="risks" title="Risks / unknowns"><List items={item.risks} /></Section>);
+  if (item.type) sections.push(<Section key="type" title="Type">{item.type}</Section>);
+  if (item.files_to_read?.length) sections.push(<Section key="files" title="Files to read first" engineerOnly><List items={item.files_to_read} /></Section>);
+
+  if (sections.length === 0) return null;
+  return <div>{sections}</div>;
+}
+
+function Section({ title, children, engineerOnly = false }: { title: string; children: ReactNode; engineerOnly?: boolean }) {
+  return (
+    <details open={!engineerOnly}>
+      <summary>
+        <strong>{title}</strong>
+        {engineerOnly && <span style={{ fontSize: 11, color: 'var(--muted, #888)', marginLeft: 6 }}>· for engineers</span>}
+      </summary>
+      {children}
+    </details>
+  );
+}
+
+function List({ items }: { items: string[] }) {
+  return <ul>{items.map((x) => <li key={x}>{x}</li>)}</ul>;
+}

package/src/ui/ItemModal/ItemModal.module.css

@@ -0,0 +1,200 @@
+.backdrop {
+  z-index: var(--z-modal);
+  background: rgba(0, 0, 0, 0.6);
+}
+
+.modal {
+  position: fixed;
+  top: 8vh;
+  left: 50%;
+  transform: translateX(-50%);
+  width: min(640px, calc(100vw - 32px));
+  max-height: 84vh;
+  overflow-y: auto;
+  background: var(--console-iron);
+  border-radius: var(--r-lg);
+  padding: 20px 24px 24px;
+  box-shadow: var(--shadow-modal);
+  z-index: var(--z-modal-content);
+}
+
+/* Eyebrow chip: ID · layer name above the title */
+.chip {
+  display: inline-block;
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--console-fog);
+  margin-bottom: 4px;
+}
+
+/* Title — editable on click. No chrome at rest; reveals on hover/focus. */
+.titleHeader {
+  margin: 0 0 16px;
+}
+.titleInput {
+  font-family: inherit;
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 1.3;
+  letter-spacing: -0.005em;
+  color: var(--console-snow);
+  width: 100%;
+  background: transparent;
+  border: none;
+  border-radius: var(--r-sm);
+  padding: 4px 6px;
+  margin: -4px -6px;
+  outline: none;
+  transition: background var(--dur-state) var(--ease);
+}
+.titleInput:hover { background: var(--console-soot); }
+.titleInput:focus-visible { background: var(--console-soot); outline: 2px solid var(--signal-cyan); outline-offset: 2px; }
+
+/* Description label + textarea — meta label, inset textarea. */
+.descLabel {
+  display: block;
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--console-fog);
+  margin-bottom: 6px;
+}
+.descTextarea {
+  width: 100%;
+  min-height: 72px;
+  font: inherit;
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--console-snow);
+  background: var(--console-soot);
+  border: 1px solid var(--console-mist);
+  border-radius: var(--r-md);
+  padding: 8px 12px;
+  resize: vertical;
+  outline: none;
+  transition: border-color var(--dur-state) var(--ease);
+}
+.descTextarea:focus-visible { border-color: var(--signal-cyan); outline: 2px solid var(--signal-cyan); outline-offset: 2px; }
+
+/* Status / Layer / Priority — label-above-select rhythm. */
+.controls {
+  display: flex;
+  gap: 16px;
+  margin-top: 16px;
+  flex-wrap: wrap;
+}
+.controlLabel {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--console-fog);
+  flex: 1 1 120px;
+  min-width: 120px;
+}
+.controlSelect {
+  margin: 0;
+  width: 100%;
+}
+
+/* Section headings + dividers. */
+.sectionH {
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1.4;
+  color: var(--console-snow);
+  margin: 0 0 8px;
+}
+
+.empty {
+  color: var(--console-fog);
+  font-size: 12px;
+  font-style: normal;
+}
+
+.promote {
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0.04em;
+  color: var(--signal-cyan);
+}
+
+/* Relationships block. */
+.relGroup {
+  margin-top: 12px;
+}
+.relGroupLabel {
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--console-fog);
+  margin-bottom: 4px;
+}
+.relList {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.relList li { margin: 0; padding: 0; }
+
+/* The relationship row button — overrides .link-button utility */
+.relList li > button {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  background: transparent;
+  border: none;
+  border-radius: var(--r-md);
+  padding: 6px 8px;
+  text-align: left;
+  text-decoration: none;
+  color: var(--console-snow);
+  cursor: pointer;
+  transition: background var(--dur-state) var(--ease);
+}
+.relList li > button:hover { background: var(--console-soot); }
+
+.relRowId {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0;
+  color: var(--console-fog);
+  white-space: nowrap;
+}
+.relRowTitle {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--console-snow);
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.relRowStatus {
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--console-black);
+  background: var(--console-iron);
+  padding: 2px 8px;
+  border-radius: var(--r-full);
+  white-space: nowrap;
+}
+.relRowStatus[data-status="now"] { background: var(--live-green); }
+.relRowStatus[data-status="next"] { background: var(--signal-cyan); }
+.relRowStatus[data-status="later"] { background: var(--console-iron); color: var(--console-fog); }
+.relRowStatus[data-status="done"] { background: var(--console-soot); color: var(--console-smoke); }

package/src/ui/ItemModal/LinksSection.tsx

@@ -0,0 +1,26 @@
+import styles from './ItemModal.module.css';
+
+interface Props {
+  links: string[];
+  onOpenFile: (path: string) => void;
+}
+
+export function LinksSection({ links, onOpenFile }: Props) {
+  if (links.length === 0) return null;
+  return (
+    <>
+      <h3 className={styles.sectionH}>Linked spec/plan</h3>
+      <ul>
+        {links.map(p => {
+          const archived = p.startsWith('.tenbo/specs/archive/');
+          return (
+            <li key={p}>
+              <button onClick={() => onOpenFile(p)} className="link-button">{p}</button>
+              {archived && <span style={{ marginLeft: 6, fontSize: '0.75em', opacity: 0.7 }}>(archived)</span>}
+            </li>
+          );
+        })}
+      </ul>
+    </>
+  );
+}

package/src/ui/ItemModal/NotesSection.tsx

@@ -0,0 +1,18 @@
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import styles from './ItemModal.module.css';
+
+interface Props {
+  notes?: string;
+  itemId: string;
+}
+
+export function NotesSection({ notes }: Props) {
+  if (!notes) return null;
+  return (
+    <>
+      <h3 className={styles.sectionH}>Notes</h3>
+      <ReactMarkdown remarkPlugins={[remarkGfm]}>{notes}</ReactMarkdown>
+    </>
+  );
+}

package/src/ui/ItemModal/PhasesSection.tsx

@@ -0,0 +1,79 @@
+import type { Item, Phase, Status } from '../../types';
+import { phaseProgress } from '../../api/lib/phases';
+
+const STATUSES: Status[] = ['now', 'next', 'later', 'done'];
+
+interface Props {
+  item: Item;
+  onPhaseStatusChange?: (phaseId: number, status: Status) => void;
+}
+
+export function PhasesSection({ item, onPhaseStatusChange }: Props) {
+  const phases = item.phases ?? [];
+  if (phases.length === 0) return null;
+  const { done, total } = phaseProgress(phases);
+  const firstPendingId = phases.find(p => p.status !== 'done')?.id;
+
+  return (
+    <details open>
+      <summary>
+        <strong>Phases</strong>
+        <span style={{ fontSize: 11, color: 'var(--muted, #888)', marginLeft: 6 }}>
+          · {done}/{total} done
+        </span>
+      </summary>
+      <ol style={{ listStyle: 'none', paddingLeft: 0, marginTop: 6 }}>
+        {phases.map((p) => {
+          const isNext = p.id === firstPendingId;
+          const isDone = p.status === 'done';
+          return (
+            <li
+              key={p.id}
+              style={{
+                display: 'flex',
+                alignItems: 'baseline',
+                gap: 8,
+                padding: '4px 6px',
+                borderLeft: `3px solid ${isNext ? 'var(--accent, #4F46E5)' : 'var(--border, #ddd)'}`,
+                background: isNext ? 'var(--accent-soft, rgba(79,70,229,0.06))' : 'transparent',
+                marginBottom: 2,
+                opacity: isDone ? 0.7 : 1,
+              }}
+              data-phase-status={p.status}
+            >
+              <span style={{ fontSize: 11, color: 'var(--muted)', minWidth: 18 }}>p{p.id}</span>
+              <span style={{ flex: 1, fontWeight: isNext ? 600 : 400, textDecoration: isDone ? 'line-through' : 'none' }}>
+                {p.title}
+              </span>
+              {onPhaseStatusChange ? (
+                <select
+                  value={p.status}
+                  onChange={e => onPhaseStatusChange(p.id, e.target.value as Status)}
+                  style={{
+                    fontSize: 11,
+                    fontWeight: 500,
+                    color: 'var(--console-fog)',
+                    background: 'var(--console-soot)',
+                    border: '1px solid var(--console-mist)',
+                    borderRadius: 'var(--r-sm, 4px)',
+                    padding: '2px 20px 2px 8px',
+                    cursor: 'pointer',
+                    appearance: 'none',
+                    WebkitAppearance: 'none',
+                    backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")`,
+                    backgroundRepeat: 'no-repeat',
+                    backgroundPosition: 'right 6px center',
+                  }}
+                >
+                  {STATUSES.map(s => <option key={s} value={s}>{s.charAt(0).toUpperCase() + s.slice(1)}</option>)}
+                </select>
+              ) : (
+                <span style={{ fontSize: 11, color: 'var(--muted)' }}>{p.status.charAt(0).toUpperCase() + p.status.slice(1)}</span>
+              )}
+            </li>
+          );
+        })}
+      </ol>
+    </details>
+  );
+}

package/src/ui/ItemModal/RelatedSection.tsx

@@ -0,0 +1,26 @@
+import type { RelatedDoc } from '../../types';
+import styles from './ItemModal.module.css';
+
+interface Props {
+  related: RelatedDoc[];
+  onOpenFile: (path: string) => void;
+  onPromote: (path: string) => void;
+}
+
+export function RelatedSection({ related, onOpenFile, onPromote }: Props) {
+  if (related.length === 0) return null;
+  return (
+    <>
+      <h3 className={styles.sectionH}>Related docs</h3>
+      <ul>
+        {related.map(d => (
+          <li key={d.path}>
+            <button onClick={() => onOpenFile(d.path)} className="link-button">{d.title || d.path}</button>
+            {' '}
+            <button onClick={() => onPromote(d.path)} className={styles.promote}>promote</button>
+          </li>
+        ))}
+      </ul>
+    </>
+  );
+}

package/src/ui/ItemModal/RelationshipsSection.tsx

@@ -0,0 +1,69 @@
+import type { Item, TenboState } from '../../types';
+import { allItems, childrenOf, findItemById, relatedItems, type ItemRef } from '../../api/lib/relationships';
+import styles from './ItemModal.module.css';
+
+interface Props {
+  item: Item;
+  state: TenboState;
+  onSelect: (ref: ItemRef) => void;
+}
+
+function Row({ itemRef, onSelect }: { itemRef: ItemRef; onSelect: (r: ItemRef) => void }) {
+  const it = itemRef.item;
+  return (
+    <li>
+      <button onClick={() => onSelect(itemRef)}>
+        <span className={styles.relRowId}>{it.id}</span>
+        <span className={styles.relRowTitle}>{it.title}</span>
+        <span className={styles.relRowStatus} data-status={it.status}>{it.status}</span>
+      </button>
+    </li>
+  );
+}
+
+export function RelationshipsSection({ item, state, onSelect }: Props) {
+  const parent = item.spawned_from ? findItemById(state, item.spawned_from) : null;
+  const flat = allItems(state).map((r) => r.item);
+  const childItems = childrenOf(flat, item.id);
+  // childrenOf returns Item[]; resolve back to ItemRef so we can navigate w/ scope.
+  const children: ItemRef[] = childItems
+    .map((c) => findItemById(state, c.id))
+    .filter((r): r is ItemRef => r !== null);
+  const peers = relatedItems(state, item);
+
+  if (!parent && children.length === 0 && peers.length === 0) return null;
+
+  return (
+    <>
+      <hr className="section-divider" />
+      <h3 className={styles.sectionH}>Relationships</h3>
+
+      {parent && (
+        <div className={styles.relGroup}>
+          <div className={styles.relGroupLabel}>Spawned from</div>
+          <ul className={styles.relList}>
+            <Row itemRef={parent} onSelect={onSelect} />
+          </ul>
+        </div>
+      )}
+
+      {children.length > 0 && (
+        <div className={styles.relGroup}>
+          <div className={styles.relGroupLabel}>Children</div>
+          <ul className={styles.relList}>
+            {children.map((c) => <Row key={c.item.id} itemRef={c} onSelect={onSelect} />)}
+          </ul>
+        </div>
+      )}
+
+      {peers.length > 0 && (
+        <div className={styles.relGroup}>
+          <div className={styles.relGroupLabel}>Related</div>
+          <ul className={styles.relList}>
+            {peers.map((p) => <Row key={p.item.id} itemRef={p} onSelect={onSelect} />)}
+          </ul>
+        </div>
+      )}
+    </>
+  );
+}

package/src/ui/ItemModal/StatusLayerControls.tsx

@@ -0,0 +1,43 @@
+import type { Layer, Priority, Status } from '../../types';
+import styles from './ItemModal.module.css';
+
+const STATUSES: Status[] = ['now', 'next', 'later', 'done'];
+const PRIORITIES: Priority[] = ['p0', 'p1', 'p2', 'p3'];
+
+interface Props {
+  status: Status;
+  layer: string;
+  layers: Layer[];
+  priority?: Priority;
+  statusDisabled?: boolean;
+  onStatusChange: (s: Status) => void;
+  onLayerChange: (l: string) => void;
+  onPriorityChange: (p: Priority | undefined) => void;
+}
+
+export function StatusLayerControls({ status, layer, layers, priority, statusDisabled, onStatusChange, onLayerChange, onPriorityChange }: Props) {
+  return (
+    <div className={styles.controls}>
+      <label className={styles.controlLabel}>Status:
+        <select value={status} onChange={e => onStatusChange(e.target.value as Status)} className={styles.controlSelect} disabled={statusDisabled} title={statusDisabled ? 'Derived from phases' : undefined}>
+          {STATUSES.map(s => <option key={s} value={s}>{s}</option>)}
+        </select>
+      </label>
+      <label className={styles.controlLabel}>Layer:
+        <select value={layer} onChange={e => onLayerChange(e.target.value)} className={styles.controlSelect}>
+          {layers.map(l => <option key={l.id} value={l.id}>{l.name}</option>)}
+        </select>
+      </label>
+      <label className={styles.controlLabel}>Priority:
+        <select
+          value={priority ?? ''}
+          onChange={e => onPriorityChange(e.target.value === '' ? undefined : (e.target.value as Priority))}
+          className={styles.controlSelect}
+        >
+          <option value="">unset</option>
+          {PRIORITIES.map(p => <option key={p} value={p}>{p.toUpperCase()}</option>)}
+        </select>
+      </label>
+    </div>
+  );
+}

package/src/ui/ItemModal/TitleField.tsx

@@ -0,0 +1,21 @@
+import styles from './ItemModal.module.css';
+
+interface Props {
+  value: string;
+  initial: string;
+  onChange: (v: string) => void;
+  onCommit: (v: string) => void;
+}
+
+export function TitleField({ value, initial, onChange, onCommit }: Props) {
+  return (
+    <h2 className={styles.titleHeader}>
+      <input
+        value={value}
+        onChange={e => onChange(e.target.value)}
+        onBlur={e => { if (e.target.value !== initial) onCommit(e.target.value); }}
+        className={styles.titleInput}
+      />
+    </h2>
+  );
+}