@titan-design/react-ui 0.12.1 → 0.13.0

package/src/components/custom/ActiveWork/TaskTable.tsx

@@ -0,0 +1,321 @@
+// Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
+import { useMemo } from 'react'
+import { View } from 'react-native'
+import { cn } from '../../../utils/cn'
+import {
+  Table,
+  TableBody,
+  TableHeader,
+  TableHeaderCell,
+  TableRow,
+  useColumnFit,
+  useMeasuredWidth,
+  useTable,
+  type TableColumnFit,
+  type TableComparator,
+} from '../Table'
+import { Typography } from '../Typography'
+import { Eyebrow } from './Eyebrow'
+import { SeverityLabel, SEVERITY_ORDER, severityRank, type TaskSeverity } from './SeverityLabel'
+import { TaskRow, TASK_COLUMN_WIDTHS, type TaskListItem } from './TaskRow'
+
+import { formatTaskAge } from './format-time'
+
+// Kept on this module's surface: the session reader shares the helper now, but callers imported it from here first.
+export { formatTaskAge }
+
+type TaskSortKey = 'slug' | 'id' | 'title' | 'severity' | 'priority' | 'estimate' | 'updated'
+
+/** Any column the table can leave out; `title` is the one column that always renders. */
+export type TaskColumnKey = Exclude<TaskSortKey, 'title'> | 'tags'
+
+interface TaskColumn extends TableColumnFit {
+  key: TaskSortKey | 'tags'
+  label: string
+  /** Full name behind an abbreviated label, shown on hover. */
+  tooltip?: string
+  width?: number
+  align?: 'left' | 'right'
+  sortable: boolean
+}
+
+const NO_HIDDEN_COLUMNS: TaskColumnKey[] = []
+
+/**
+ * What leaves first when the table cannot fit everything. Metadata goes before
+ * anything that names the task: a row with no title is not a shorter row, it is
+ * a useless one, so `title` and `id` carry no priority and never drop. `slug`
+ * goes last of the droppable columns because the backlog reads across
+ * initiatives, so losing it costs more than losing the age.
+ */
+const TASK_DROP_ORDER = {
+  severity: 1,
+  priority: 2,
+  estimate: 3,
+  tags: 4,
+  updated: 5,
+  slug: 6,
+} as const
+
+/** The hairline frame the grid sits inside, which the measured width includes but the columns cannot use. */
+const GRID_FRAME_INSET = 2
+
+/** How the severity column renders: `auto` collapses to the dot below {@link COMPACT_SEVERITY_BELOW}. */
+export type SeverityDisplay = 'auto' | 'full' | 'dot'
+
+/**
+ * Table width under which severity collapses to its dot. Below this the fixed
+ * columns leave the flexible title under ~220px, which is where titles stop
+ * being scannable; the dot gives 68px back.
+ */
+export const COMPACT_SEVERITY_BELOW = 840
+
+const SEVERITY_COLUMN: Record<'full' | 'dot', TaskColumn> = {
+  full: {
+    key: 'severity',
+    label: 'Severity',
+    width: TASK_COLUMN_WIDTHS.severity,
+    minWidth: TASK_COLUMN_WIDTHS.severity,
+    dropPriority: TASK_DROP_ORDER.severity,
+    sortable: true,
+  },
+  dot: {
+    key: 'severity',
+    label: 'Sev',
+    tooltip: 'Severity',
+    width: TASK_COLUMN_WIDTHS.severityCompact,
+    minWidth: TASK_COLUMN_WIDTHS.severityCompact,
+    dropPriority: TASK_DROP_ORDER.severity,
+    sortable: true,
+  },
+}
+
+const taskColumns = (dotOnly: boolean, hidden: TaskColumnKey[]): TaskColumn[] =>
+  allTaskColumns(dotOnly).filter((col) => !hidden.includes(col.key as TaskColumnKey))
+
+const allTaskColumns = (dotOnly: boolean): TaskColumn[] => [
+  {
+    key: 'slug',
+    label: 'Initiative',
+    width: TASK_COLUMN_WIDTHS.slug,
+    minWidth: TASK_COLUMN_WIDTHS.slug,
+    dropPriority: TASK_DROP_ORDER.slug,
+    sortable: true,
+  },
+  {
+    key: 'id',
+    label: 'ID',
+    width: TASK_COLUMN_WIDTHS.id,
+    minWidth: TASK_COLUMN_WIDTHS.id,
+    sortable: true,
+  },
+  { key: 'title', label: 'Title', minWidth: TASK_COLUMN_WIDTHS.titleMin, sortable: true },
+  SEVERITY_COLUMN[dotOnly ? 'dot' : 'full'],
+  {
+    key: 'priority',
+    label: 'Pri',
+    tooltip: 'Priority',
+    width: TASK_COLUMN_WIDTHS.priority,
+    minWidth: TASK_COLUMN_WIDTHS.priority,
+    dropPriority: TASK_DROP_ORDER.priority,
+    align: 'right',
+    sortable: true,
+  },
+  {
+    key: 'estimate',
+    label: 'Est',
+    tooltip: 'Estimate',
+    width: TASK_COLUMN_WIDTHS.estimate,
+    minWidth: TASK_COLUMN_WIDTHS.estimate,
+    dropPriority: TASK_DROP_ORDER.estimate,
+    align: 'right',
+    sortable: true,
+  },
+  {
+    key: 'tags',
+    label: 'Tags',
+    width: TASK_COLUMN_WIDTHS.tags,
+    minWidth: TASK_COLUMN_WIDTHS.tags,
+    dropPriority: TASK_DROP_ORDER.tags,
+    sortable: false,
+  },
+  {
+    key: 'updated',
+    label: 'Age',
+    width: TASK_COLUMN_WIDTHS.age,
+    minWidth: TASK_COLUMN_WIDTHS.age,
+    dropPriority: TASK_DROP_ORDER.updated,
+    align: 'right',
+    sortable: true,
+  },
+]
+
+/**
+ * The columns whose order is not their raw field order. Everything else falls
+ * through to `useTable`'s default compare.
+ */
+const TASK_COMPARATORS: Record<string, TableComparator<TaskListItem>> = {
+  // Rank, not alphabet: "critical" < "high" < "low" as strings buries low in the middle.
+  severity: (a, b) =>
+    severityRank(a.severity) - severityRank(b.severity) || a.priority - b.priority,
+  // Newest first when ascending: for an age column, "most recent" is the useful top.
+  updated: (a, b) => (a.updated < b.updated ? 1 : a.updated > b.updated ? -1 : 0),
+  id: (a, b) => a.id.localeCompare(b.id, undefined, { numeric: true }),
+  slug: (a, b) => a.slug.localeCompare(b.slug) || a.priority - b.priority,
+}
+
+function SeverityLegend({ tasks }: { tasks: TaskListItem[] }) {
+  const counts = useMemo(() => {
+    const c: Record<TaskSeverity, number> = { critical: 0, high: 0, medium: 0, low: 0 }
+    for (const t of tasks) if (t.severity) c[t.severity]++
+    return c
+  }, [tasks])
+
+  return (
+    <View className="flex-row items-center gap-3">
+      {SEVERITY_ORDER.map((severity) => (
+        <View key={severity} className="flex-row items-center gap-1.5">
+          <SeverityLabel severity={severity} />
+          <Typography variant="mono" className="text-xs text-text-tertiary">
+            {String(counts[severity])}
+          </Typography>
+        </View>
+      ))}
+    </View>
+  )
+}
+
+export interface TaskTableProps {
+  tasks: TaskListItem[]
+  /**
+   * Reference timestamp for the age column. Injected rather than read from the
+   * clock so stories, tests and visual baselines render identically forever.
+   */
+  now: number
+  /** Column sorted on first render. Defaults to `priority`. */
+  defaultSortKey?: TaskSortKey
+  /** Hides the severity legend above the grid. */
+  hideLegend?: boolean
+  /** Severity column mode. Defaults to `auto`, driven by the table's measured width. */
+  severityDisplay?: SeverityDisplay
+  /** Columns to leave out, for an embedded table that already knows its context. */
+  hideColumns?: TaskColumnKey[]
+  /**
+   * Pins the width the column fit runs against instead of measuring it. For
+   * stories and tests that need to hold one step of the drop order still.
+   */
+  fitWidth?: number
+  /** Eyebrow over the grid. Defaults to the backlog wording, `N open · all initiatives`. */
+  label?: string
+  className?: string
+}
+
+/**
+ * One measurement drives both adaptations, in the order they should happen:
+ * severity collapses to its dot first, and only then do whole columns drop.
+ */
+function useFittedColumns(
+  display: SeverityDisplay,
+  hidden: TaskColumnKey[],
+  fitWidth: number | undefined
+) {
+  const { width, onLayout } = useMeasuredWidth(fitWidth)
+  const dotOnly =
+    display === 'dot' || (display === 'auto' && width !== null && width < COMPACT_SEVERITY_BELOW)
+  const candidates = useMemo(() => taskColumns(dotOnly, hidden), [dotOnly, hidden])
+  const fit = useColumnFit(candidates, width === null ? null : width - GRID_FRAME_INSET)
+
+  const columns = useMemo(() => candidates.filter((c) => fit.isVisible(c.key)), [candidates, fit])
+  // Rows take the same list the header dropped, so the two halves of a row cannot come apart.
+  const rowHidden = useMemo(
+    () => [...hidden, ...candidates.filter((c) => !fit.isVisible(c.key)).map((c) => c.key)],
+    [hidden, candidates, fit]
+  ) as TaskColumnKey[]
+
+  return { columns, dotOnly, rowHidden, onLayout, contentMinWidth: fit.contentMinWidth }
+}
+
+/**
+ * TaskTable — every open task across initiatives in one dense, sortable grid.
+ *
+ * Composes {@link Table} at `density="dense"` and drives it with
+ * {@link useTable}, passing per-column comparators so severity ranks by meaning
+ * and age reads newest-first. Rows are {@link TaskRow}; the legend tallies
+ * {@link SeverityLabel}.
+ *
+ * Narrow it and it adapts twice, in order: severity collapses to its dot, then
+ * whole columns drop along {@link TASK_DROP_ORDER}. `title` and `id` are not in
+ * that order and never drop; under them the table scrolls horizontally.
+ */
+export function TaskTable({
+  tasks,
+  now,
+  defaultSortKey = 'priority',
+  hideLegend = false,
+  severityDisplay = 'auto',
+  hideColumns = NO_HIDDEN_COLUMNS,
+  fitWidth,
+  label,
+  className,
+}: TaskTableProps) {
+  const { columns, dotOnly, rowHidden, onLayout, contentMinWidth } = useFittedColumns(
+    severityDisplay,
+    hideColumns,
+    fitWidth
+  )
+  const { sortedData, sortColumn, sortDirection, handleSort } = useTable<TaskListItem>({
+    data: tasks,
+    // One page: this grid is meant to be scanned and scrolled, not paged.
+    defaultPageSize: Number.MAX_SAFE_INTEGER,
+    defaultSortColumn: defaultSortKey,
+    defaultSortDirection: 'asc',
+    comparators: TASK_COMPARATORS,
+  })
+
+  return (
+    <View className={cn('gap-3', className)} onLayout={onLayout}>
+      <View className="flex-row items-center justify-between">
+        <Eyebrow>{label ?? `${tasks.length} open · all initiatives`}</Eyebrow>
+        {hideLegend ? null : <SeverityLegend tasks={tasks} />}
+      </View>
+
+      {/* A table frame is a hairline RULE, not a plane: it paints no background and casts no lift. */}
+      <View className="overflow-hidden rounded-lg border border-hairline" testID="task-grid">
+        <Table
+          density="dense"
+          contentMinWidth={contentMinWidth}
+          sortColumn={sortColumn}
+          sortDirection={sortDirection}
+          onSort={handleSort}
+        >
+          <TableHeader>
+            <TableRow isHoverable={false}>
+              {columns.map((col) => (
+                <TableHeaderCell
+                  key={col.key}
+                  sortKey={col.sortable ? col.key : undefined}
+                  tooltip={col.tooltip}
+                  width={col.width}
+                  align={col.align}
+                >
+                  {col.label}
+                </TableHeaderCell>
+              ))}
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {sortedData.map((task) => (
+              <TaskRow
+                key={`${task.slug}:${task.id}`}
+                task={task}
+                ageLabel={formatTaskAge(task.updated, now)}
+                severityDotOnly={dotOnly}
+                hideColumns={rowHidden}
+              />
+            ))}
+          </TableBody>
+        </Table>
+      </View>
+    </View>
+  )
+}

package/src/components/custom/ActiveWork/active-work-depth.test.tsx

@@ -0,0 +1,102 @@
+// The depth contract of the five ActiveWork specimens, asserted against the
+// stories Storybook actually renders — so a reverted decorator fails here too.
+//
+// The planes are asserted as INLINE STYLE on purpose. `Card` writes its
+// background into `style`, so a `bg-*` className on a Card is discarded and only
+// the inline value is real; asserting the class would pass while the render was
+// wrong. That is the exact bug this migration removed. The values come from the
+// ramp so a re-space moves them rather than breaking them.
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { composeStories } from '@storybook/react'
+import { greyRamp } from '../../../theme/tokens/primitives'
+import * as PortfolioStories from './PortfolioOverview.stories'
+import * as TaskTableStories from './TaskTable.stories'
+import * as SessionReaderStories from './SessionReader.stories'
+import * as InitiativeReaderStories from './InitiativeReader.stories'
+import * as ExplorerStories from './FileHistoryExplorer.stories'
+
+/** The page plane a `<Surface level="base">` paints. */
+const PAGE = greyRamp[925]
+/** The card plane, two lifts above the page. */
+const CARD = greyRamp[875]
+/** One plane DOWN from a card, where a `CardInset` well sits. */
+const WELL = greyRamp[900]
+
+function expectLiftedCard(el: HTMLElement) {
+  expect(el).toHaveStyle({ backgroundColor: CARD })
+  expect(el.style.boxShadow).toContain('inset 0 1px 0')
+  expect(el.style.borderTopWidth).toBe('')
+}
+
+function expectPage() {
+  expect(screen.getByTestId('page-surface')).toHaveStyle({ backgroundColor: PAGE })
+}
+
+describe('T1 · PortfolioOverview depth', () => {
+  const { Default } = composeStories(PortfolioStories)
+
+  it('puts every KPI tile and initiative card on the lifted card plane', () => {
+    render(<Default />)
+    expectPage()
+    for (const el of screen.getAllByTestId('portfolio-stat')) expectLiftedCard(el)
+    for (const el of screen.getAllByTestId('initiative-card')) expectLiftedCard(el)
+  })
+})
+
+describe('T2 · TaskTable depth', () => {
+  const { Default } = composeStories(TaskTableStories)
+
+  it('keeps the grid frame a hairline rule: no plane of its own, no lift', () => {
+    render(<Default />)
+    expectPage()
+    const grid = screen.getByTestId('task-grid')
+    expect(grid.style.backgroundColor).toBe('')
+    expect(grid.style.boxShadow).toBe('')
+  })
+})
+
+describe('M1 · Session reader depth', () => {
+  const { Default } = composeStories(SessionReaderStories)
+
+  it('lifts the detail card off the page and leaves the list on it', () => {
+    render(<Default />)
+    expectPage()
+    expectLiftedCard(screen.getByTestId('session-detail'))
+  })
+})
+
+describe('M2 · Initiative reader depth', () => {
+  const { Default } = composeStories(InitiativeReaderStories)
+
+  it('lifts all three reader cards onto the card plane', () => {
+    render(<Default />)
+    expectPage()
+    const cards = screen.getAllByTestId('reader-card')
+    expect(cards).toHaveLength(3)
+    for (const el of cards) expectLiftedCard(el)
+  })
+})
+
+describe('F1 · FileHistoryExplorer depth', () => {
+  const { Default } = composeStories(ExplorerStories)
+
+  it('lifts both panes and sinks the growth well one plane inside the detail', () => {
+    render(<Default />)
+    expectPage()
+    expectLiftedCard(screen.getByTestId('file-list-pane'))
+    expectLiftedCard(screen.getByTestId('file-activity-detail'))
+
+    const well = screen.getByTestId('growth-well')
+    expect(well).toHaveStyle({ backgroundColor: WELL })
+    expect(well.style.boxShadow).toContain('inset')
+    expect(well.style.boxShadow).not.toContain('inset 0 1px 0 rgba(255,255,255')
+  })
+
+  it('keeps co-change chips tone-only, so only the panes lift', () => {
+    render(<Default />)
+    const chip = screen.getAllByTestId('co-change-chip')[0]
+    expect(chip).toHaveStyle({ backgroundColor: CARD })
+    expect(chip.style.boxShadow).toBe('')
+  })
+})

package/src/components/custom/ActiveWork/file-history-fixture.ts

@@ -0,0 +1,91 @@
+import type { FileActivityDetailData } from './FileActivityDetail'
+import type { CoChangeEdge, FileHistoryStat } from './FileHistoryExplorer'
+
+/**
+ * A small, hand-trimmed slice of a real session-history mine, used by the
+ * ActiveWork file-history stories and tests. Fixed values (no `Date.now()`, no
+ * randomness) so visual baselines stay deterministic.
+ */
+export const FILE_HISTORY_FILES: FileActivityDetailData[] = [
+  {
+    path: 'src/commands/open.ts',
+    reads: 84,
+    writes: 12,
+    edits: 61,
+    touches: 157,
+    sessions: 23,
+    charsAdded: 41280,
+    charsRemoved: 9640,
+    netGrowth: 31640,
+    firstTouched: '2026-05-02T10:12:00Z',
+    lastTouched: '2026-07-11T18:40:00Z',
+    timeline: [120, 340, -80, 910, 420, 0, 1580, 260, -310, 740, 1120, 90],
+    coChange: [
+      { path: 'src/commands/_open-helpers.ts', count: 19 },
+      { path: 'src/registry/index.ts', count: 11 },
+      { path: '__tests__/commands/open.test.ts', count: 8 },
+    ],
+  },
+  {
+    path: 'src/bootstrap/prompt.ts',
+    reads: 71,
+    writes: 9,
+    edits: 44,
+    touches: 124,
+    sessions: 19,
+    charsAdded: 33900,
+    charsRemoved: 15220,
+    netGrowth: 18680,
+    firstTouched: '2026-05-04T09:00:00Z',
+    lastTouched: '2026-07-10T21:05:00Z',
+    timeline: [80, 610, 1240, -420, 300, 150, -90, 880, 410, 220],
+    coChange: [
+      { path: 'src/commands/open.ts', count: 14 },
+      { path: '__tests__/bootstrap/prompt.test.ts', count: 9 },
+    ],
+  },
+  {
+    path: 'src/utils/fs-atomic.ts',
+    reads: 52,
+    writes: 4,
+    edits: 18,
+    touches: 74,
+    sessions: 12,
+    charsAdded: 8110,
+    charsRemoved: 11480,
+    netGrowth: -3370,
+    firstTouched: '2026-05-09T14:30:00Z',
+    lastTouched: '2026-06-28T11:15:00Z',
+    timeline: [420, -180, -960, 240, -510, 130, -320, 80],
+    coChange: [{ path: 'src/utils/flock.ts', count: 7 }],
+  },
+  {
+    path: 'README.md',
+    reads: 40,
+    writes: 6,
+    edits: 9,
+    touches: 55,
+    sessions: 8,
+    charsAdded: 6200,
+    charsRemoved: 1450,
+    netGrowth: 4750,
+    firstTouched: '2026-05-01T08:00:00Z',
+    lastTouched: '2026-07-02T16:20:00Z',
+    timeline: [1200, 0, 340, 0, 0, 890, 120],
+    coChange: [],
+  },
+]
+
+export const FILE_HISTORY_CO_EDGES: CoChangeEdge[] = [
+  { a: 'src/commands/open.ts', b: 'src/commands/_open-helpers.ts', count: 19 },
+  { a: 'src/commands/open.ts', b: 'src/bootstrap/prompt.ts', count: 14 },
+  { a: 'src/bootstrap/prompt.ts', b: '__tests__/bootstrap/prompt.test.ts', count: 9 },
+  { a: 'src/utils/fs-atomic.ts', b: 'src/utils/flock.ts', count: 7 },
+]
+
+export const FILE_HISTORY_STATS: FileHistoryStat[] = [
+  { label: 'Files', value: '4' },
+  { label: 'File events', value: '410' },
+  { label: 'Sessions', value: '23' },
+  { label: 'Transcripts', value: '31' },
+]

package/src/components/custom/ActiveWork/format-time.test.ts

@@ -0,0 +1,23 @@
+import { describe, it, expect } from 'vitest'
+import { formatSessionDuration, formatTaskAge } from './format-time'
+
+describe('formatSessionDuration', () => {
+  it('reads minutes under an hour and hours plus minutes above it', () => {
+    expect(formatSessionDuration('2026-07-01T10:00:00Z', '2026-07-01T10:42:00Z')).toBe('42m')
+    expect(formatSessionDuration('2026-07-01T10:00:00Z', '2026-07-01T11:04:00Z')).toBe('1h 4m')
+  })
+
+  it('is empty for a missing, reversed or unparseable span so callers can drop the separator', () => {
+    expect(formatSessionDuration('2026-07-01T11:00:00Z', '2026-07-01T10:00:00Z')).toBe('')
+    expect(formatSessionDuration('nope', '2026-07-01T10:00:00Z')).toBe('')
+  })
+})
+
+describe('formatTaskAge (shared with the task table)', () => {
+  const now = new Date('2026-07-13T09:00:00Z').getTime()
+  it('still reads today, days and months', () => {
+    expect(formatTaskAge('2026-07-13T01:00:00Z', now)).toBe('today')
+    expect(formatTaskAge('2026-07-01T01:00:00Z', now)).toBe('12d ago')
+    expect(formatTaskAge('2026-05-13T01:00:00Z', now)).toBe('2mo ago')
+  })
+})

package/src/components/custom/ActiveWork/format-time.ts

@@ -0,0 +1,32 @@
+/**
+ * A compact age label for a dense column: `today`, `4d ago`, `3mo ago`.
+ *
+ * Deliberately not `DateTime format="relative"` — that renders Intl prose ("4
+ * days ago"), which is too long for a 74px column, and it reads `Date.now()`
+ * internally so a story or a visual baseline could never be deterministic. `now`
+ * is injected here for exactly that reason.
+ */
+export function formatTaskAge(iso: string | null | undefined, now: number): string {
+  if (!iso) return '—'
+  const then = new Date(iso).getTime()
+  if (Number.isNaN(then)) return '—'
+
+  const days = Math.floor((now - then) / 86_400_000)
+  if (days <= 0) return 'today'
+  if (days === 1) return '1d ago'
+  if (days < 30) return `${days}d ago`
+  return `${Math.floor(days / 30)}mo ago`
+}
+
+/**
+ * A session's wall-clock length as `1h 4m` or `42m`. Empty when the span is
+ * missing, unparseable or not positive, so callers can drop the separator
+ * rather than render `0m`.
+ */
+export function formatSessionDuration(started: string, ended: string): string {
+  const ms = new Date(ended).getTime() - new Date(started).getTime()
+  if (!(ms > 0)) return ''
+  const minutes = Math.round(ms / 60_000)
+  const hours = Math.floor(minutes / 60)
+  return hours ? `${hours}h ${minutes % 60}m` : `${minutes}m`
+}

package/src/components/custom/ActiveWork/index.ts

@@ -0,0 +1,19 @@
+export * from './Eyebrow'
+export * from './InitiativeCard'
+export * from './PortfolioOverview'
+export * from './FilePathLabel'
+export * from './FileActivityRow'
+export * from './FileActivityDetail'
+export * from './CoChangeChip'
+export * from './FileHistoryExplorer'
+export * from './SeverityLabel'
+export * from './TaskRow'
+export * from './TaskTable'
+export * from './format-time'
+export * from './session-linkers'
+export * from './SessionListItem'
+export * from './SessionList'
+export * from './SessionDetail'
+export * from './InitiativeHeader'
+export * from './InitiativeBrief'
+export * from './OpenLoops'