cursedbelt 2.7.0 → 3.0.0

package/src/react/studios/KnowledgeVerticalShells.tsx

@@ -1,851 +0,0 @@
-/**
- * The five hierarchical KnowledgeStudio surfaces (03 §1b) — kanban, the typed
- * list grid, contacts, the family tree and oral history.
- *
- * These are the near side of verticals whose far side has been complete for two
- * arcs: repositories, services, feature-gated routes and O(1) ordering ops all
- * exist, and until now not one line of UI read them (`00 §B` item 2 — "the built
- * server verticals are UI-unreachable"). Each shell here is presentation-pure in
- * exactly the sense the two landed shells are — rows in, callbacks out, zero
- * network — so `KnowledgeStudioView` owns every request and these stay testable
- * without a fetch mock.
- *
- * Two decisions are load-bearing and easy to undo by accident:
- *
- * **The grid renders the SORTED read when a column is chosen.** That is the whole
- * point of the typed-cell design: `l_values` stores one column per storage class
- * so a `number` column sorts 2, 10 rather than the class-first 10, 2. A grid that
- * sorted client-side would silently discard the guarantee the schema pays for.
- *
- * **A card moves through the `move-card` OP, not a PATCH.** The repo makes a move
- * ONE `UPDATE … SET position` guarded on both the card's and the destination's
- * tenant; re-writing positions from the client would be the O(n) rewrite loop the
- * `position` column exists to avoid.
- */
-import { type ReactNode, useMemo, useState } from 'react';
-import type { ListCellValue, ListColumnType, ListColumnView, KanbanCardView } from '../../server/mixins/services';
-import { Badge } from '../components/Badge';
-import { AddRow } from './AddRow';
-import { Button } from '../components/Button';
-import { EmptyState } from '../components/EmptyState';
-import { Input } from '../components/Input';
-import { ScrollArea } from '../components/ScrollArea';
-import { SelectField } from '../components/SelectField';
-import { cn } from '../lib/cn';
-import type {
-  ContactsShellProps,
-  FamilyTreeShellProps,
-  KanbanShellProps,
-  ListGridShellProps,
-  OralHistoryShellProps,
-} from './types';
-
-/* ------------------------------------------------------------- shared */
-
-/** A master-list rail: pick one parent, everything to the right follows it. */
-function PickerRail<T extends { id: string }>({
-  label,
-  rows,
-  activeId,
-  onSelect,
-  renderRow,
-  empty,
-  footer,
-}: {
-  label: string;
-  rows: readonly T[];
-  activeId?: string;
-  onSelect?: (id: string) => void;
-  renderRow: (row: T) => ReactNode;
-  empty: string;
-  footer?: ReactNode;
-}) {
-  return (
-    <div className='flex w-56 min-h-0 shrink-0 flex-col gap-2 border-border border-r pr-2' data-cc-rail={label}>
-      <ScrollArea className='min-h-0 flex-1' space='none'>
-        {rows.length === 0 ? (
-          <EmptyState compact title={empty} />
-        ) : (
-          <ul className='flex flex-col gap-0.5 pr-1'>
-            {rows.map((row) => (
-              <li key={row.id}>
-                <Button
-                  variant={row.id === activeId ? 'secondary' : 'ghost'}
-                  size='sm'
-                  tooltip={`Open ${label}`}
-                  className='w-full justify-start'
-                  aria-current={row.id === activeId ? 'true' : undefined}
-                  data-cc-row={row.id}
-                  onClick={() => onSelect?.(row.id)}
-                >
-                  {renderRow(row)}
-                </Button>
-              </li>
-            ))}
-          </ul>
-        )}
-      </ScrollArea>
-      {footer}
-    </div>
-  );
-}
-
-/* -------------------------------------------------------------- kanban */
-
-/** Keyed on `effectiveFeaturesHash` for the 02 §6.1 clean-remount-on-toggle rule. */
-export function KanbanShell(props: KanbanShellProps) {
-  return <KanbanBody key={props.instance.effectiveFeaturesHash} {...props} />;
-}
-
-function KanbanBody({
-  instance,
-  boards,
-  activeBoardId,
-  onSelectBoard,
-  columns,
-  cards,
-  onCreateBoard,
-  onCreateColumn,
-  onCreateCard,
-  onMoveCard,
-  onRemoveCard,
-  loading,
-  className,
-}: KanbanShellProps) {
-  const ordered = useMemo(() => [...columns].sort((a, b) => a.position - b.position), [columns]);
-  const byColumn = useMemo(() => {
-    const index = new Map<string, KanbanCardView[]>();
-    for (const card of [...cards].sort((a, b) => a.position - b.position)) {
-      const bucket = index.get(card.columnId);
-      if (bucket) bucket.push(card);
-      else index.set(card.columnId, [card]);
-    }
-    return index;
-  }, [cards]);
-
-  /** The next free position in a column — the client never renumbers siblings. */
-  const tailPosition = (columnId: string): number => (byColumn.get(columnId)?.length ?? 0) + 1;
-
-  return (
-    <section
-      data-cc-studio='knowledge'
-      data-cc-surface='kanban'
-      data-cc-instance={instance.id}
-      className={cn('flex min-h-0 min-w-0 gap-3', className)}
-    >
-      <PickerRail
-        label='board'
-        rows={boards}
-        activeId={activeBoardId}
-        onSelect={onSelectBoard}
-        renderRow={(board) => <span className='truncate'>{board.title}</span>}
-        empty={loading ? 'Loading…' : 'No boards yet'}
-        footer={onCreateBoard ? <AddRow label='New board' placeholder='Board title' onSubmit={onCreateBoard} /> : null}
-      />
-
-      <div className='flex min-h-0 min-w-0 flex-1 flex-col gap-2'>
-        {activeBoardId === undefined ? (
-          <EmptyState compact title='Pick a board' description='Boards hold the columns and cards.' />
-        ) : (
-          <>
-            {onCreateColumn ? <AddRow label='New column' placeholder='Column title' onSubmit={onCreateColumn} /> : null}
-            <ScrollArea axis='x' className='min-h-0 flex-1' space='none'>
-              <div className='flex min-h-0 items-start gap-3 pb-2' data-cc-board={activeBoardId}>
-                {ordered.length === 0 ? (
-                  <EmptyState compact title='No columns yet' description='Add one to start placing cards.' />
-                ) : (
-                  ordered.map((column, index) => (
-                    <KanbanColumn
-                      key={column.id}
-                      title={column.title}
-                      columnId={column.id}
-                      wipLimit={column.wipLimit}
-                      cards={byColumn.get(column.id) ?? []}
-                      leftId={ordered[index - 1]?.id}
-                      rightId={ordered[index + 1]?.id}
-                      onCreateCard={onCreateCard}
-                      onMoveCard={onMoveCard}
-                      onRemoveCard={onRemoveCard}
-                      tailPosition={tailPosition}
-                    />
-                  ))
-                )}
-              </div>
-            </ScrollArea>
-          </>
-        )}
-      </div>
-    </section>
-  );
-}
-
-function KanbanColumn({
-  title,
-  columnId,
-  wipLimit,
-  cards,
-  leftId,
-  rightId,
-  onCreateCard,
-  onMoveCard,
-  onRemoveCard,
-  tailPosition,
-}: {
-  title: string;
-  columnId: string;
-  wipLimit?: number;
-  cards: readonly KanbanCardView[];
-  leftId?: string;
-  rightId?: string;
-  onCreateCard?: (columnId: string, title: string) => void;
-  onMoveCard?: (cardId: string, toColumnId: string, position: number) => void;
-  onRemoveCard?: (cardId: string) => void;
-  tailPosition: (columnId: string) => number;
-}) {
-  // The WIP limit is the COLUMN's declared cap; over it the count reads
-  // destructive so the board says what the config asked it to enforce.
-  const over = wipLimit !== undefined && cards.length > wipLimit;
-
-  return (
-    <div className='flex w-64 shrink-0 flex-col gap-2 rounded-md border border-border p-2' data-cc-column={columnId}>
-      <header className='flex items-center justify-between gap-2'>
-        <span className='truncate font-medium text-foreground text-sm'>{title}</span>
-        <Badge tone={over ? 'destructive' : 'default'} data-cc-count={cards.length}>
-          {wipLimit === undefined ? cards.length : `${cards.length}/${wipLimit}`}
-        </Badge>
-      </header>
-
-      <ul className='flex flex-col gap-1'>
-        {cards.map((card) => (
-          <li key={card.id} data-cc-card={card.id} className='rounded-md border border-border px-2 py-1.5'>
-            <span className='flex items-start justify-between gap-2'>
-              <span className='min-w-0 flex-1 break-words text-foreground text-sm'>{card.title}</span>
-              {onRemoveCard ? (
-                <Button
-                  variant='ghost'
-                  size='sm'
-                  tooltip={`Delete "${card.title}"`}
-                  data-cc-action='delete-card'
-                  onClick={() => onRemoveCard(card.id)}
-                >
-                  ✕
-                </Button>
-              ) : null}
-            </span>
-            {onMoveCard && (leftId || rightId) ? (
-              <span className='mt-1 flex gap-1'>
-                {leftId ? (
-                  <Button
-                    variant='tertiary'
-                    size='sm'
-                    tooltip='Move one column left'
-                    data-cc-action='move-left'
-                    onClick={() => onMoveCard(card.id, leftId, tailPosition(leftId))}
-                  >
-                    ←
-                  </Button>
-                ) : null}
-                {rightId ? (
-                  <Button
-                    variant='tertiary'
-                    size='sm'
-                    tooltip='Move one column right'
-                    data-cc-action='move-right'
-                    onClick={() => onMoveCard(card.id, rightId, tailPosition(rightId))}
-                  >
-                    →
-                  </Button>
-                ) : null}
-              </span>
-            ) : null}
-          </li>
-        ))}
-      </ul>
-
-      {onCreateCard ? (
-        <AddRow label='New card' placeholder='Card title' onSubmit={(value) => onCreateCard(columnId, value)} />
-      ) : null}
-    </div>
-  );
-}
-
-/* ----------------------------------------------------------- list grid */
-
-const COLUMN_TYPES: readonly ListColumnType[] = ['text', 'select', 'number', 'bool', 'date', 'json'];
-
-/**
- * Parse a cell's typed text back to its column's storage class.
- *
- * The SERVER refuses a class mismatch (`LIST_VALUE_TYPE_MISMATCH`), so this is a
- * convenience, never the enforcement: an unparseable number is sent as the empty
- * string rather than silently coerced to 0, and the server's refusal is what the
- * grid renders. A client that "fixed" the value would write a number the user
- * never typed.
- */
-export const parseCellInput = (colType: ListColumnType, text: string): ListCellValue => {
-  if (text === '') return null;
-  switch (colType) {
-    case 'number': {
-      const parsed = Number(text);
-      return Number.isFinite(parsed) ? parsed : text;
-    }
-    case 'bool':
-      return text === 'true';
-    default:
-      return text;
-  }
-};
-
-/** Render a stored cell for an `<Input>` — `null` is a blank, not the text "null". */
-const cellText = (value: ListCellValue | undefined): string =>
-  value === undefined || value === null ? '' : String(value);
-
-/** Keyed on `effectiveFeaturesHash` for the 02 §6.1 clean-remount-on-toggle rule. */
-export function ListGridShell(props: ListGridShellProps) {
-  return <ListGridBody key={props.instance.effectiveFeaturesHash} {...props} />;
-}
-
-function ListGridBody({
-  instance,
-  lists,
-  activeListId,
-  onSelectList,
-  columns,
-  rows,
-  cells,
-  sortColumnId,
-  sortDescending = false,
-  onSort,
-  onCreateList,
-  onCreateColumn,
-  onCreateRow,
-  onSetCell,
-  onReorderColumn,
-  cellError,
-  loading,
-  className,
-}: ListGridShellProps) {
-  const ordered = useMemo(() => [...columns].sort((a, b) => a.position - b.position), [columns]);
-  const [newColumnType, setNewColumnType] = useState<ListColumnType>('text');
-
-  const cellIndex = useMemo(() => {
-    const index = new Map<string, ListCellValue>();
-    for (const cell of cells) index.set(`${cell.rowId}:${cell.columnId}`, cell.value);
-    return index;
-  }, [cells]);
-
-  return (
-    <section
-      data-cc-studio='knowledge'
-      data-cc-surface='lists'
-      data-cc-instance={instance.id}
-      className={cn('flex min-h-0 min-w-0 gap-3', className)}
-    >
-      <PickerRail
-        label='list'
-        rows={lists}
-        activeId={activeListId}
-        onSelect={onSelectList}
-        renderRow={(list) => <span className='truncate'>{list.title}</span>}
-        empty={loading ? 'Loading…' : 'No lists yet'}
-        footer={onCreateList ? <AddRow label='New list' placeholder='List title' onSubmit={onCreateList} /> : null}
-      />
-
-      <div className='flex min-h-0 min-w-0 flex-1 flex-col gap-2'>
-        {activeListId === undefined ? (
-          <EmptyState compact title='Pick a list' description='Lists hold typed columns and rows.' />
-        ) : (
-          <>
-            <div className='flex flex-wrap items-center gap-2'>
-              {onCreateColumn ? (
-                <AddRow
-                  label='New column'
-                  placeholder='Column name'
-                  onSubmit={(name) => onCreateColumn({ name, colType: newColumnType })}
-                >
-                  <SelectField
-                    value={newColumnType}
-                    onValueChange={(next) => setNewColumnType(next as ListColumnType)}
-                    options={COLUMN_TYPES.map((type) => ({ value: type, label: type }))}
-                    aria-label='Column type'
-                    size='sm'
-                  />
-                </AddRow>
-              ) : null}
-              {onCreateRow ? (
-                <Button variant='secondary' size='sm' tooltip='Append a row' onClick={onCreateRow}>
-                  Add row
-                </Button>
-              ) : null}
-              {onSort ? (
-                <span className='flex items-center gap-2' data-cc-sort={sortColumnId ?? 'none'}>
-                  {/* guardrails-ignore choice-needs-empty-state: the "List order" row is
-                      always first, so this never opens empty. */}
-                  <SelectField
-                    value={sortColumnId ?? ''}
-                    onValueChange={(next) => onSort(next === '' ? undefined : next, sortDescending)}
-                    options={[
-                      { value: '', label: 'List order' },
-                      ...ordered.map((column) => ({ value: column.id, label: `Sort by ${column.name}` })),
-                    ]}
-                    aria-label='Sort column'
-                    size='sm'
-                  />
-                  <Button
-                    variant='tertiary'
-                    size='sm'
-                    tooltip='Reverse the sort direction'
-                    disabled={sortColumnId === undefined}
-                    onClick={() => onSort(sortColumnId, !sortDescending)}
-                  >
-                    {sortDescending ? 'Desc' : 'Asc'}
-                  </Button>
-                </span>
-              ) : null}
-            </div>
-
-            <ScrollArea axis='both' className='min-h-0 flex-1' space='none'>
-              {/* guardrails-ignore no-raw-data-table: an EDITABLE grid — columns are
-                  reordered, resized, retyped and added in place, and cells are edited. That is
-                  the spreadsheet surface, not the read-and-scan table DataTable standardizes. */}
-              <table className='w-full border-collapse text-sm' data-cc-grid={activeListId}>
-                <thead>
-                  <tr>
-                    {ordered.map((column, index) => (
-                      <th
-                        key={column.id}
-                        scope='col'
-                        data-cc-col={column.id}
-                        className='border-border border-b px-2 py-1 text-left font-medium text-muted-foreground'
-                      >
-                        <span className='flex items-center gap-1'>
-                          <span className='truncate'>{column.name}</span>
-                          <Badge tone='outline'>{column.colType}</Badge>
-                          {onReorderColumn && index > 0 ? (
-                            <Button
-                              variant='ghost'
-                              size='sm'
-                              tooltip={`Move ${column.name} left`}
-                              data-cc-action='reorder-column'
-                              // The O(1) reorder op: ONE `UPDATE … SET position`,
-                              // never a renumber of every sibling.
-                              onClick={() => onReorderColumn(column.id, ordered[index - 1].position)}
-                            >
-                              ←
-                            </Button>
-                          ) : null}
-                        </span>
-                      </th>
-                    ))}
-                  </tr>
-                </thead>
-                <tbody>
-                  {rows.map((row) => (
-                    <tr key={row.id} data-cc-row={row.id}>
-                      {ordered.map((column) => (
-                        <td key={column.id} className='border-border border-b px-2 py-1 align-top'>
-                          <GridCell
-                            column={column}
-                            value={cellIndex.get(`${row.id}:${column.id}`)}
-                            onCommit={onSetCell ? (value) => onSetCell(row.id, column.id, value) : undefined}
-                            error={
-                              cellError && cellError.rowId === row.id && cellError.columnId === column.id
-                                ? cellError.message
-                                : undefined
-                            }
-                          />
-                        </td>
-                      ))}
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-              {ordered.length === 0 ? <EmptyState compact title='No columns yet' /> : null}
-              {ordered.length > 0 && rows.length === 0 ? (
-                <EmptyState compact title={loading ? 'Loading…' : 'No rows yet'} />
-              ) : null}
-            </ScrollArea>
-          </>
-        )}
-      </div>
-    </section>
-  );
-}
-
-function GridCell({
-  column,
-  value,
-  onCommit,
-  error,
-}: {
-  column: ListColumnView;
-  value: ListCellValue | undefined;
-  onCommit?: (value: ListCellValue) => void;
-  error?: string;
-}) {
-  const stored = cellText(value);
-  const [draft, setDraft] = useState<string | null>(null);
-  const shown = draft ?? stored;
-
-  const commit = (): void => {
-    setDraft(null);
-    if (draft === null || draft === stored) return;
-    onCommit?.(parseCellInput(column.colType, draft));
-  };
-
-  if (!onCommit) return <span data-cc-cell={column.id}>{stored}</span>;
-
-  return (
-    <span className='flex min-w-32 flex-col gap-0.5'>
-      <Input
-        value={shown}
-        onChange={(event) => setDraft(event.target.value)}
-        onEnter={commit}
-        onBlur={commit}
-        aria-label={`${column.name} value`}
-        aria-invalid={error ? true : undefined}
-        data-cc-cell={column.id}
-        size='sm'
-      />
-      {error ? <span className='text-destructive text-xs'>{error}</span> : null}
-    </span>
-  );
-}
-
-/* ------------------------------------------------------------ contacts */
-
-/** Keyed on `effectiveFeaturesHash` for the 02 §6.1 clean-remount-on-toggle rule. */
-export function ContactsShell(props: ContactsShellProps) {
-  return <ContactsBody key={props.instance.effectiveFeaturesHash} {...props} />;
-}
-
-function ContactsBody({
-  instance,
-  contacts,
-  activeId,
-  onSelect,
-  onCreate,
-  onRemove,
-  loading,
-  className,
-}: ContactsShellProps) {
-  const active = contacts.find((contact) => contact.id === activeId) ?? contacts[0] ?? null;
-
-  return (
-    <section
-      data-cc-studio='knowledge'
-      data-cc-surface='contacts'
-      data-cc-instance={instance.id}
-      className={cn('flex min-h-0 min-w-0 gap-3', className)}
-    >
-      <PickerRail
-        label='contact'
-        rows={contacts}
-        activeId={active?.id}
-        onSelect={onSelect}
-        renderRow={(contact) => <span className='truncate'>{contact.displayName}</span>}
-        empty={loading ? 'Loading…' : 'No contacts yet'}
-        footer={
-          onCreate ? (
-            <AddRow label='New contact' placeholder='Display name' onSubmit={(name) => onCreate({ displayName: name })} />
-          ) : null
-        }
-      />
-
-      <div className='min-h-0 min-w-0 flex-1'>
-        {active === null ? (
-          <EmptyState compact title='No contact selected' />
-        ) : (
-          <ScrollArea className='h-full' space='none'>
-            <article className='flex min-w-0 flex-col gap-2 pr-2' data-cc-contact={active.id}>
-              <header className='flex items-center justify-between gap-2'>
-                <h3 className='min-w-0 break-words font-semibold text-foreground text-lg'>{active.displayName}</h3>
-                {onRemove ? (
-                  <Button
-                    variant='ghost'
-                    size='sm'
-                    tooltip={`Delete ${active.displayName}`}
-                    data-cc-action='delete-contact'
-                    onClick={() => onRemove(active.id)}
-                  >
-                    Delete
-                  </Button>
-                ) : null}
-              </header>
-              <FieldRows
-                rows={[
-                  ...(active.birthday ? ([['Birthday', active.birthday]] as [string, string][]) : []),
-                  // `vcardUid` is the global-unique import key; showing it is what
-                  // makes a 409 on import comprehensible instead of mysterious.
-                  ...(active.vcardUid ? ([['vCard UID', active.vcardUid]] as [string, string][]) : []),
-                  ...Object.entries(active.fields).map(
-                    ([key, value]) => [key, typeof value === 'string' ? value : JSON.stringify(value)] as [string, string],
-                  ),
-                ]}
-              />
-            </article>
-          </ScrollArea>
-        )}
-      </div>
-    </section>
-  );
-}
-
-function FieldRows({ rows }: { rows: readonly [string, string][] }) {
-  if (rows.length === 0) return <p className='text-muted-foreground text-sm'>No details recorded.</p>;
-  return (
-    <dl className='grid grid-cols-[max-content_1fr] gap-x-3 gap-y-1 text-sm'>
-      {rows.map(([label, value]) => (
-        <div key={label} className='contents'>
-          <dt className='text-muted-foreground'>{label}</dt>
-          <dd className='min-w-0 break-words text-foreground'>{value}</dd>
-        </div>
-      ))}
-    </dl>
-  );
-}
-
-/* --------------------------------------------------------- family tree */
-
-/** Keyed on `effectiveFeaturesHash` for the 02 §6.1 clean-remount-on-toggle rule. */
-export function FamilyTreeShell(props: FamilyTreeShellProps) {
-  return <FamilyTreeBody key={props.instance.effectiveFeaturesHash} {...props} />;
-}
-
-function FamilyTreeBody({
-  instance,
-  people,
-  partnerships,
-  activePersonId,
-  onSelectPerson,
-  events,
-  onCreatePerson,
-  onCreateEvent,
-  onCreatePartnership,
-  loading,
-  className,
-}: FamilyTreeShellProps) {
-  const active = people.find((person) => person.id === activePersonId) ?? people[0] ?? null;
-  const nameOf = useMemo(() => new Map(people.map((person) => [person.id, person.displayName])), [people]);
-  const partners = useMemo(
-    () => (active === null ? [] : partnerships.filter((row) => row.aId === active.id || row.bId === active.id)),
-    [partnerships, active],
-  );
-  const [partnerId, setPartnerId] = useState('');
-
-  return (
-    <section
-      data-cc-studio='knowledge'
-      data-cc-surface='family-tree'
-      data-cc-instance={instance.id}
-      className={cn('flex min-h-0 min-w-0 gap-3', className)}
-    >
-      <PickerRail
-        label='person'
-        rows={people}
-        activeId={active?.id}
-        onSelect={onSelectPerson}
-        renderRow={(person) => <span className='truncate'>{person.displayName}</span>}
-        empty={loading ? 'Loading…' : 'No people yet'}
-        footer={
-          onCreatePerson ? (
-            <AddRow label='New person' placeholder='Display name' onSubmit={(name) => onCreatePerson({ displayName: name })} />
-          ) : null
-        }
-      />
-
-      <div className='min-h-0 min-w-0 flex-1'>
-        {active === null ? (
-          <EmptyState compact title='No people yet' description='Add someone to start the tree.' />
-        ) : (
-          <ScrollArea className='h-full' space='none'>
-            <article className='flex min-w-0 flex-col gap-3 pr-2' data-cc-person={active.id}>
-              <h3 className='break-words font-semibold text-foreground text-lg'>{active.displayName}</h3>
-              <FieldRows
-                rows={[
-                  ...(active.birth ? ([['Born', active.birth]] as [string, string][]) : []),
-                  ...(active.death ? ([['Died', active.death]] as [string, string][]) : []),
-                ]}
-              />
-
-              <section className='flex flex-col gap-1' data-cc-partnerships=''>
-                <h4 className='cb-meta-label text-muted-foreground'>Partnerships</h4>
-                {partners.length === 0 ? (
-                  <p className='text-muted-foreground text-sm'>None recorded.</p>
-                ) : (
-                  <ul className='flex flex-col gap-0.5 text-sm'>
-                    {partners.map((row) => {
-                      const otherId = row.aId === active.id ? row.bId : row.aId;
-                      return (
-                        <li key={row.id} data-cc-partnership={row.id} className='text-foreground'>
-                          {nameOf.get(otherId) ?? otherId}
-                          {row.kind ? <span className='text-muted-foreground'> · {row.kind}</span> : null}
-                        </li>
-                      );
-                    })}
-                  </ul>
-                )}
-                {onCreatePartnership && people.length > 1 ? (
-                  <span className='flex items-center gap-2'>
-                    <SelectField
-                      value={partnerId}
-                      onValueChange={setPartnerId}
-                      options={people
-                        .filter((person) => person.id !== active.id)
-                        .map((person) => ({ value: person.id, label: person.displayName }))}
-                      placeholder='Partner…'
-                      aria-label='Partner'
-                      size='sm'
-                    />
-                    <Button
-                      variant='secondary'
-                      size='sm'
-                      tooltip='Record this partnership'
-                      disabled={partnerId === ''}
-                      onClick={() => {
-                        onCreatePartnership({ aId: active.id, bId: partnerId });
-                        setPartnerId('');
-                      }}
-                    >
-                      Link
-                    </Button>
-                  </span>
-                ) : null}
-              </section>
-
-              <section className='flex flex-col gap-1' data-cc-events=''>
-                <h4 className='cb-meta-label text-muted-foreground'>Events</h4>
-                {events.length === 0 ? (
-                  <p className='text-muted-foreground text-sm'>No events recorded.</p>
-                ) : (
-                  <ul className='flex flex-col gap-0.5 text-sm'>
-                    {events.map((event) => (
-                      <li key={event.id} data-cc-event={event.id} className='text-foreground'>
-                        {event.kind}
-                        {event.at ? <span className='text-muted-foreground'> · {event.at}</span> : null}
-                        {event.place ? <span className='text-muted-foreground'> · {event.place}</span> : null}
-                      </li>
-                    ))}
-                  </ul>
-                )}
-                {onCreateEvent ? (
-                  <AddRow
-                    label='New event'
-                    placeholder='birth, marriage, …'
-                    onSubmit={(kind) => onCreateEvent({ personId: active.id, kind })}
-                  />
-                ) : null}
-              </section>
-            </article>
-          </ScrollArea>
-        )}
-      </div>
-    </section>
-  );
-}
-
-/* -------------------------------------------------------- oral history */
-
-/** Keyed on `effectiveFeaturesHash` for the 02 §6.1 clean-remount-on-toggle rule. */
-export function OralHistoryShell(props: OralHistoryShellProps) {
-  return <OralHistoryBody key={props.instance.effectiveFeaturesHash} {...props} />;
-}
-
-/** `ms → m:ss` — a transcript reads in minutes, never in milliseconds. */
-export const formatOffset = (ms: number): string => {
-  const total = Math.max(0, Math.round(ms / 1000));
-  return `${Math.floor(total / 60)}:${`${total % 60}`.padStart(2, '0')}`;
-};
-
-function OralHistoryBody({
-  instance,
-  recordings,
-  activeId,
-  onSelect,
-  segments,
-  onCreateRecording,
-  onAddSegment,
-  onEditSegment,
-  loading,
-  className,
-}: OralHistoryShellProps) {
-  const active = recordings.find((recording) => recording.id === activeId) ?? recordings[0] ?? null;
-  const ordered = useMemo(() => [...segments].sort((a, b) => a.seq - b.seq), [segments]);
-
-  return (
-    <section
-      data-cc-studio='knowledge'
-      data-cc-surface='oral-history'
-      data-cc-instance={instance.id}
-      className={cn('flex min-h-0 min-w-0 gap-3', className)}
-    >
-      <PickerRail
-        label='recording'
-        rows={recordings}
-        activeId={active?.id}
-        onSelect={onSelect}
-        renderRow={(recording) => <span className='truncate'>{recording.title}</span>}
-        empty={loading ? 'Loading…' : 'No recordings yet'}
-        footer={
-          onCreateRecording ? (
-            <AddRow label='New recording' placeholder='Recording title' onSubmit={(title) => onCreateRecording({ title })} />
-          ) : null
-        }
-      />
-
-      <div className='min-h-0 min-w-0 flex-1'>
-        {active === null ? (
-          <EmptyState compact title='No recordings yet' />
-        ) : (
-          <ScrollArea className='h-full' space='none'>
-            <article className='flex min-w-0 flex-col gap-2 pr-2' data-cc-recording={active.id}>
-              <h3 className='break-words font-semibold text-foreground text-lg'>{active.title}</h3>
-              {active.recordedAt ? (
-                <span className='cb-meta-label text-muted-foreground'>recorded {active.recordedAt}</span>
-              ) : null}
-
-              <ol className='flex flex-col gap-1'>
-                {ordered.map((segment) => (
-                  <li key={segment.id} data-cc-segment={segment.id} className='flex items-start gap-2'>
-                    <span className='shrink-0 tabular-nums text-muted-foreground text-xs'>
-                      {formatOffset(segment.startMs)}
-                    </span>
-                    {onEditSegment ? (
-                      <Input
-                        defaultValue={segment.transcript}
-                        onEnter={(event) => onEditSegment(segment.id, event.currentTarget.value)}
-                        onBlur={(event) => {
-                          if (event.target.value !== segment.transcript) onEditSegment(segment.id, event.target.value);
-                        }}
-                        aria-label={`Transcript at ${formatOffset(segment.startMs)}`}
-                        size='sm'
-                      />
-                    ) : (
-                      <span className='min-w-0 break-words text-foreground text-sm'>{segment.transcript}</span>
-                    )}
-                  </li>
-                ))}
-              </ol>
-              {ordered.length === 0 ? <EmptyState compact title='No transcript yet' /> : null}
-
-              {onAddSegment ? (
-                <AddRow
-                  label='New segment'
-                  placeholder='Transcript line'
-                  // The offsets follow the last segment: a transcript is appended
-                  // in order, and asking for two millisecond fields per line would
-                  // make the common case unusable.
-                  onSubmit={(transcript) => {
-                    const last = ordered[ordered.length - 1];
-                    const startMs = last ? last.endMs : 0;
-                    onAddSegment({ startMs, endMs: startMs + 5_000, transcript });
-                  }}
-                />
-              ) : null}
-            </article>
-          </ScrollArea>
-        )}
-      </div>
-    </section>
-  );
-}