@g3nomaly/g3n-mods 0.1.5 → 0.1.6

package/mods/tool-timeline/hooks/register.tsx

@@ -1,12 +1,13 @@
 // packages/g3n-mods/mods/tool-timeline/hooks/register.tsx
 import { atom, read, update } from 'claude-code'
-import type { EngineInterface, Register } from 'claude-code'
+import type { EngineInterface, Register, RenderElement } from 'claude-code'
 
-import type { CallStatus, TimelineCall } from '../types'
+import type { CallStatus, TimelineCall, TimelineViewData } from '../types'
 
 const PANE = 'tool-timeline'
 const TITLE = 'Tool timeline'
 const calls = atom({ plugin: 'tool-timeline', key: 'calls' } as const, [])
+const selected = atom({ plugin: 'tool-timeline', key: 'selected' } as const, '')
 
 /** Calls kept in state; older ones fall off. */
 const KEEP = 100
@@ -28,15 +29,21 @@ const TOOL_COLORS: ReadonlyArray<[RegExp, string]> = [
   [/^(Agent|Task)$/, '#f09bb5'],
 ]
 
-/** Background of a row's hover card. */
+/** Text color on a badge. */
 const CARD = '#1b1f27'
 
+/** Rows of the box under the calls: the clicked call in full, else the latest denied call; fixed, so the pane never changes height. */
+const DETAIL_ROWS = 3
+
 /** Idle time between calls, in milliseconds, kept on the bars' axis; longer idle stretches shrink to this. */
 const IDLE_MS = 200
 
-/** Most characters of a call's input the hover card keeps. */
+/** Most characters of a call's input the detail box keeps. */
 const DETAIL_MAX = 2000
 
+/** Call rows the pane always draws, empty slots filling the rest, so its height never changes and panes beside it stay put. */
+const ROWS = 10
+
 /** Most characters of a call's label kept; the pane cuts it to one line anyway. */
 const LABEL_MAX = 200
 
@@ -72,7 +79,7 @@ export function labelOf(input: Record<string, unknown>): string {
 }
 
 /**
- * @brief Finds a call's whole input text for the row's hover card: the full command, path, pattern or first text field.
+ * @brief Finds a call's whole input text for the detail box: the full command, path, pattern or first text field.
  *
  * @param input - Arguments of the tool call.
  * @returns The text with its line breaks, cut at `DETAIL_MAX` characters.
@@ -112,6 +119,24 @@ export function placeCalls(list: readonly TimelineCall[], now: number): { spans:
   return { spans, length }
 }
 
+/**
+ * @brief Places every call on a waterfall of its own screen: the newest `ROWS` calls on one axis, the `ROWS` before
+ * them on another, and so on, so each screenful of the scrolled list reads as a waterfall of its own.
+ *
+ * @param list - Calls in start order.
+ * @param now - Current time, the end of calls still running.
+ * @returns Each call's bar as shares of its screen's axis, from 0 to 1, in `list` order.
+ */
+export function screenSpans(list: readonly TimelineCall[], now: number): Span[] {
+  const spans: Span[] = new Array(list.length)
+  for (let end = list.length; end > 0; end -= ROWS) {
+    const start = Math.max(0, end - ROWS)
+    const axis = placeCalls(list.slice(start, end), now)
+    axis.spans.forEach((span, i) => { spans[start + i] = { from: span.from / axis.length, to: span.to / axis.length } })
+  }
+  return spans
+}
+
 /**
  * @brief Joins the text of a tool result's content, which is a string or a list of text blocks.
  *
@@ -211,6 +236,16 @@ function barSvg(width: number, x: number, fill: number, color: string): string {
   return `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="8" viewBox="0 0 ${width} 8"><rect width="${width}" height="8" rx="2" fill="${TRACK}"/><rect x="${x.toFixed(1)}" width="${fill.toFixed(1)}" height="8" rx="2" fill="${color}"/></svg>`
 }
 
+/**
+ * Shows a call in full in the box under the rows, or clears the box when that call is shown already.
+ *
+ * @param $ - Engine handle the press came through.
+ * @param id - Tool use id of the clicked call.
+ */
+async function toggleSelected($: EngineInterface, id: string): Promise<void> {
+  await update($, selected, current => (current === id ? '' : id))
+}
+
 /**
  * @brief Subscribes the timeline's handlers to the engine's events, its command and its pane.
  *
@@ -283,17 +318,53 @@ export const register: Register = on => {
   }).catch(($, e, next) => next(e))
 
   on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
-    const { Box, Text } = $.ui.resolve(e)
+    const { Box, Text, Button } = $.ui.resolve(e)
     const list = await read($, calls)
-    if (list.length === 0) return <Text dimColor>No tool calls yet.</Text>
-
+    const chosen = await read($, selected)
     const now = await $.clock.now()
-    const room = Math.max(4, (e.viewport?.rows ?? 30) - 6)
-    const shown = list.slice(-room)
+    const shown = list.slice(-ROWS)
     /** Length of a call so far, or up to its end when it has one. */
     const durationOf = (call: TimelineCall): number => (call.endedAt ?? now) - call.startedAt
     const total = list.reduce((sum, call) => sum + (call.status === 'denied' ? 0 : durationOf(call)), 0)
     const axis = placeCalls(shown, now)
+
+    // The viewer draws the timeline with the mod's own view: hand it the calls as data.
+    if (e.surface === 'vscode') {
+      const { Input } = $.ui.resolve(e)
+      const spans = screenSpans(list, now)
+      const data: TimelineViewData = {
+        count: list.length,
+        total: seconds(total),
+        // Every call kept, not just a screenful: the view scrolls through them.
+        calls: list.map((call, index) => {
+          const span = spans[index] ?? { from: 0, to: 0 }
+          const replacement = call.status === 'denied' ? replacementOf(list, index)?.label : undefined
+          return {
+            id: call.id,
+            tool: call.tool,
+            badge: badgeOf(call.tool),
+            color: colorOf(call.tool),
+            label: call.label,
+            detail: call.detail ?? call.label,
+            status: call.status,
+            isSub: call.agentId !== undefined,
+            from: span.from,
+            to: span.to,
+            barColor: call.status === 'error' ? ERROR : call.status === 'ok' && call.tool === 'Bash' ? '#5fae6e' : colorOf(call.tool),
+            time: seconds(durationOf(call)),
+            ...(call.note === undefined ? {} : { note: shortNote(call.note) }),
+            ...(replacement === undefined ? {} : { replacement }),
+          }
+        }),
+      }
+      return (
+        <Box key="g3n-view:tool-timeline">
+          <Text>{JSON.stringify(data)}</Text>
+          <Input key="g3n-act:tool-timeline" onSubmit={() => undefined} />
+        </Box>
+      )
+    }
+
     const barCells = Math.max(8, Math.floor(e.props.bodyColumns * 0.3))
     const labelCells = Math.max(12, e.props.bodyColumns - barCells - 12)
 
@@ -331,38 +402,69 @@ export const register: Register = on => {
       }
     }
 
-    // One line per call; the keyed row reveals a card with the call's whole input while the pointer is on it.
+    // One line per call; a click shows the call in full in the box under the rows, so nothing moves. A Button holds only
+    // text, so a plain one covers the row; the terminal, where it would hide the row, has no cover.
     const rows = shown.map((call, index) => (
-      <Box key={call.id} flexDirection="row" columnGap={1}>
-        <Text bold color={CARD} backgroundColor={colorOf(call.tool)}>{e.surface === 'terminal' ? ` ${badgeOf(call.tool)} ` : badgeOf(call.tool)}</Text>
-        <Box width={labelCells}>
-          <Text wrap="truncate-end" strikethrough={call.status === 'denied'} color={call.status === 'denied' ? ERROR : undefined}>
-            {call.agentId === undefined ? '' : '↳ '}{call.tool} <Text dimColor>{call.label}</Text>
-          </Text>
-        </Box>
-        {bar(call, axis.spans[index] ?? { from: 0, to: 0 })}
-        <Box width={8} justifyContent="flex-end">{outcome(call)}</Box>
-        <Box position="absolute" top={1} left={4} right={0} display="none" hover={{ display: 'flex' }} backgroundColor={CARD} borderStyle="round" borderColor={DIM} paddingX={1}>
-          <Text wrap="wrap">{call.tool} <Text dimColor>{call.detail ?? call.label}</Text></Text>
+        <Box key={`row:${call.id}`} flexDirection="row" columnGap={1} alignItems="center">
+          <Text bold color={CARD} backgroundColor={colorOf(call.tool)}>{e.surface === 'terminal' ? ` ${badgeOf(call.tool)} ` : badgeOf(call.tool)}</Text>
+          <Box width={labelCells}>
+            <Text wrap="truncate-end" strikethrough={call.status === 'denied'} color={call.status === 'denied' ? ERROR : undefined} bold={call.id === chosen}>
+              {call.agentId === undefined ? '' : '↳ '}{call.tool} <Text dimColor>{call.label}</Text>
+            </Text>
+          </Box>
+          {bar(call, axis.spans[index] ?? { from: 0, to: 0 })}
+          <Box width={8} justifyContent="flex-end">{outcome(call)}</Box>
+          {e.surface === 'terminal'
+            ? ''
+            : (
+                <Box position="absolute" top={0} left={0} right={0} bottom={0}>
+                  <Button key={`call:${call.id}`} plain label={call.id === chosen ? 'hide' : 'details'} onPress={() => toggleSelected($, call.id)} />
+                </Box>
+              )}
         </Box>
+    ))
+
+    // Empty lines up to ROWS, so the pane keeps one height as calls arrive; a badge is no taller than a line.
+    const slots = Array.from({ length: ROWS - shown.length }, (_, index) => (
+      <Box key={`slot:${index}`}>
+        <Text dimColor>{index === 0 && shown.length === 0 ? 'No tool calls yet.' : ' '}</Text>
       </Box>
     ))
 
-    // Denied calls get their callout under the list, so every call keeps to its one line.
-    const callouts = shown.flatMap((call, index) => {
-      if (call.status !== 'denied') return []
-      const replacement = replacementOf(shown, index)
-      return [
-        <Box borderStyle="round" borderColor="#7a3b3b" paddingX={1} flexDirection="row" justifyContent="space-between">
-          <Text wrap="truncate-end">
-            <Text color={ERROR}>⊘ </Text>
-            <Text strikethrough dimColor>{call.label}</Text>
-            {replacement === undefined ? '' : <Text> → <Text color="#7cc47f">{replacement.label}</Text></Text>}
-          </Text>
-          <Text color={ERROR}>denied{call.note === undefined ? '' : ` · ${shortNote(call.note)}`}</Text>
-        </Box>,
-      ]
-    })
+    // A fixed box under the rows: the clicked call in full, else the latest denied call, else a hint.
+    const picked = list.find(call => call.id === chosen)
+    const deniedAt = shown.map(call => call.status).lastIndexOf('denied')
+    const denied = shown[deniedAt]
+    const replacement = deniedAt === -1 ? undefined : replacementOf(shown, deniedAt)
+    const detailBox = (body: RenderElement, edge: string) => (
+      <Box borderStyle="round" borderColor={edge} paddingX={1} flexDirection="column" marginTop={1} height={DETAIL_ROWS} overflow="hidden">
+        {body}
+      </Box>
+    )
+    const callout = picked !== undefined
+      ? detailBox(
+          <Box flexDirection="column">
+            <Box flexDirection="row" justifyContent="space-between" columnGap={2}>
+              <Text bold>{picked.tool}</Text>
+              {outcome(picked)}
+            </Box>
+            <Text wrap="wrap" dimColor>{picked.detail ?? picked.label}</Text>
+          </Box>,
+          colorOf(picked.tool),
+        )
+      : denied !== undefined
+        ? detailBox(
+            <Box flexDirection="row" justifyContent="space-between" columnGap={2}>
+              <Text wrap="truncate-end">
+                <Text color={ERROR}>⊘ </Text>
+                <Text strikethrough dimColor>{denied.label}</Text>
+                {replacement === undefined ? '' : <Text> → <Text color="#7cc47f">{replacement.label}</Text></Text>}
+              </Text>
+              <Text color={ERROR}>denied{denied.note === undefined ? '' : ` · ${shortNote(denied.note)}`}</Text>
+            </Box>,
+            '#7a3b3b',
+          )
+        : detailBox(<Text dimColor>Click a call to see it in full.</Text>, TRACK)
 
     return (
       <Box flexDirection="column" gap={0}>
@@ -371,7 +473,8 @@ export const register: Register = on => {
           <Text dimColor>{list.length} call{list.length === 1 ? '' : 's'} · {seconds(total)}</Text>
         </Box>
         {rows}
-        {callouts.length > 0 && <Box flexDirection="column" marginTop={1}>{callouts}</Box>}
+        {slots}
+        {callout}
       </Box>
     )
   })

package/mods/tool-timeline/types/index.d.ts

@@ -9,7 +9,7 @@ export type TimelineCall = {
   tool: string
   /** Short form of the call's input, e.g. `rm -rf dist` or `package.json` */
   label: string
-  /** The call's whole input text for the row's hover card, e.g. the full command or path */
+  /** The call's whole input text for the detail box under the rows, e.g. the full command or path */
   detail?: string
   status: CallStatus
   startedAt: number
@@ -20,8 +20,39 @@ export type TimelineCall = {
   agentId?: string
 }
 
+/** One call as the view draws it: its badge, its line, where its bar sits and what it ended with. */
+export type TimelineViewCall = {
+  id: string
+  tool: string
+  /** One letter, `$` for shell tools */
+  badge: string
+  color: string
+  label: string
+  detail: string
+  status: CallStatus
+  /** Made by a subagent, not the main thread */
+  isSub: boolean
+  /** Start and end of the bar, as shares of the axis from 0 to 1 */
+  from: number
+  to: number
+  barColor: string
+  /** Duration so far, e.g. `0.3s` */
+  time: string
+  /** The reason a denied or failed call gave, shortened */
+  note?: string
+  /** The label of the call that replaced a denied one */
+  replacement?: string
+}
+
+/** What the timeline's view gets: every call kept, oldest first, and their totals. */
+export type TimelineViewData = {
+  count: number
+  total: string
+  calls: TimelineViewCall[]
+}
+
 declare module 'claude-code' {
   interface PluginState {
-    'tool-timeline': { calls: TimelineCall[] }
+    'tool-timeline': { calls: TimelineCall[]; selected: string }
   }
 }

package/mods/tool-timeline/view/view.css

@@ -0,0 +1,124 @@
+/* packages/g3n-mods/mods/tool-timeline/view/view.css */
+.tl {
+  --row-height: 26px;
+  --mono: var(--vscode-editor-font-family, ui-monospace, monospace);
+  --dim: var(--vscode-descriptionForeground, #9d9d9d);
+  --bad: #e06c6c;
+  --busy: #e5b567;
+  --track: color-mix(in srgb, var(--vscode-foreground) 10%, transparent);
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.tl-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
+.tl-title { font-weight: 600; font-size: 14px; }
+.tl-sum { color: var(--dim); font-size: 12px; font-variant-numeric: tabular-nums; }
+
+/* Ten rows tall whatever the number of calls; more scroll inside. */
+.tl-rows {
+  display: flex;
+  flex-direction: column;
+  height: calc(var(--row-height) * 10);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scrollbar-width: thin;
+  scrollbar-color: color-mix(in srgb, var(--vscode-foreground) 25%, transparent) transparent;
+}
+.tl-row { flex-shrink: 0; }
+
+/* A row is a real button: badge, the call, its bar on the shared axis, its time. */
+.tl-row {
+  display: grid;
+  grid-template-columns: 20px minmax(0, 1fr) minmax(80px, 34%) 64px;
+  align-items: center;
+  column-gap: 12px;
+  height: var(--row-height);
+  margin: 0;
+  padding: 0 8px;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-family: var(--mono);
+  font-size: 13px;
+  text-align: left;
+  cursor: pointer;
+  transition: background-color 100ms ease;
+}
+.tl-row:hover { background: color-mix(in srgb, var(--vscode-foreground) 6%, transparent); }
+.tl-row:focus-visible { outline: 1px solid var(--vscode-focusBorder); outline-offset: -1px; }
+.tl-row.is-selected { background: color-mix(in srgb, var(--vscode-foreground) 9%, transparent); }
+.tl-row.tl-empty { cursor: default; pointer-events: none; }
+
+.tl-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  border-radius: 5px;
+  background: var(--badge);
+  color: #1b1f27;
+  font-family: var(--mono);
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 1;
+}
+
+.tl-label { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+.tl-tool { color: var(--vscode-foreground); }
+.tl-arg { color: var(--dim); margin-left: 0.6ch; }
+.tl-row[data-status="denied"] .tl-label { color: var(--bad); text-decoration: line-through; text-decoration-color: var(--bad); }
+.tl-row[data-status="denied"] .tl-tool, .tl-row[data-status="denied"] .tl-arg { color: var(--bad); }
+
+.tl-track { position: relative; height: 6px; border-radius: 3px; background: var(--track); overflow: hidden; }
+.tl-fill { position: absolute; top: 0; bottom: 0; min-width: 3px; border-radius: 3px; transition: left 200ms ease, width 200ms ease; }
+.tl-row[data-status="running"] .tl-fill { animation: tl-pulse 1.2s ease-in-out infinite; }
+@keyframes tl-pulse { 50% { opacity: 0.55; } }
+
+.tl-time { text-align: right; font-family: var(--mono); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
+.tl-time[data-tone="dim"] { color: var(--dim); }
+.tl-time[data-tone="bad"] { color: var(--bad); }
+.tl-time[data-tone="busy"] { color: var(--busy); }
+
+/* The box under the rows keeps one height whatever it shows, so the pane never moves. */
+.tl-detail {
+  box-sizing: border-box;
+  height: 150px;
+  padding: 8px 12px;
+  border: 1px solid var(--track);
+  border-radius: 8px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 4px;
+}
+.tl-detail.is-call { justify-content: flex-start; border-color: color-mix(in srgb, var(--badge) 55%, transparent); }
+.tl-detail.is-denied { border-color: color-mix(in srgb, var(--bad) 45%, transparent); background: color-mix(in srgb, var(--bad) 7%, transparent); }
+.tl-detail-head { display: grid; grid-template-columns: 20px 1fr auto; align-items: center; column-gap: 10px; }
+.tl-detail-tool { font-weight: 600; font-family: var(--mono); font-size: 13px; }
+.tl-detail-body {
+  flex: 1;
+  min-height: 0;
+  margin: 0;
+  overflow: auto;
+  white-space: pre-wrap;
+  word-break: break-word;
+  color: var(--dim);
+  font-family: var(--mono);
+  font-size: 12px;
+  line-height: 1.45;
+}
+.tl-detail-note { color: var(--bad); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.tl-hint { color: var(--dim); font-size: 12px; text-align: center; }
+
+.tl-callout { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-family: var(--mono); font-size: 13px; }
+.tl-callout-what { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+.tl-callout-mark { color: var(--bad); margin-right: 0.8ch; }
+.tl-callout-from { color: var(--dim); text-decoration-color: var(--bad); }
+.tl-callout-arrow { color: var(--dim); margin: 0 0.8ch; }
+.tl-callout-to { color: #7cc47f; }
+.tl-callout-why { color: var(--bad); font-family: var(--vscode-font-family, sans-serif); font-size: 12px; white-space: nowrap; }

package/mods/tool-timeline/view/view.ts

@@ -0,0 +1,164 @@
+// packages/g3n-mods/mods/tool-timeline/view/view.ts
+import type { TimelineViewCall, TimelineViewData } from '../types'
+
+/** What the viewer hands a view: a way to send the mod an action and to open a link. */
+type ViewApi = { act: (name: string, arg?: unknown) => void; openLink: (href: string) => void }
+
+/** Rows the list shows at once; more calls scroll inside it, and fewer leave empty rows, so its height never changes. */
+const ROWS = 10
+
+/** Makes an element with a class, and text when given. */
+function el<K extends keyof HTMLElementTagNameMap>(tag: K, className: string, text?: string): HTMLElementTagNameMap[K] {
+  const node = document.createElement(tag)
+  node.className = className
+  if (text !== undefined) node.textContent = text
+  return node
+}
+
+/** Sets an element's text only when it changed, so the DOM is left alone between identical updates. */
+function setText(node: Element, text: string): void {
+  if (node.textContent !== text) node.textContent = text
+}
+
+/** The text and tone at the end of a row: its time, `denied`, `queued`, or its time with a mark. */
+function outcomeOf(call: TimelineViewCall): { text: string; tone: string } {
+  switch (call.status) {
+    case 'denied': return { text: 'denied', tone: 'bad' }
+    case 'error': return { text: `${call.time} ✗`, tone: 'bad' }
+    case 'running': return { text: `${call.time}…`, tone: 'busy' }
+    case 'queued': return { text: 'queued', tone: 'dim' }
+    case 'ok': return { text: call.time, tone: 'dim' }
+  }
+}
+
+/**
+ * @brief Mounts the tool timeline: a header with the totals, a list of every kept call that shows ten at a time and
+ * scrolls, and a box under it that shows the clicked call in full, else the latest denied call. Each row is a real
+ * button. The list follows the newest call unless the person scrolled up to read.
+ *
+ * @param root - The shadow root the viewer gives this view.
+ * @param _api - Unused: the timeline sends its mod no actions.
+ * @returns The instance the viewer hands each update to.
+ */
+export function mount(root: ShadowRoot, _api: ViewApi): { update: (data: unknown) => void } {
+  const frame = el('div', 'tl')
+  const head = el('header', 'tl-head')
+  const title = el('span', 'tl-title', 'Tool timeline')
+  const sum = el('span', 'tl-sum')
+  head.append(title, sum)
+  const rows = el('div', 'tl-rows')
+  const detail = el('div', 'tl-detail')
+  frame.append(head, rows, detail)
+  root.append(frame)
+
+  const byId = new Map<string, HTMLButtonElement>()
+  let calls: TimelineViewCall[] = []
+  let selected: string | undefined
+
+  /** Builds the row of a call once; `fill` keeps it current. */
+  const makeRow = (id: string): HTMLButtonElement => {
+    const row = el('button', 'tl-row')
+    row.type = 'button'
+    row.dataset.id = id
+    const badge = el('span', 'tl-badge')
+    const label = el('span', 'tl-label')
+    label.append(el('span', 'tl-tool'), el('span', 'tl-arg'))
+    const track = el('span', 'tl-track')
+    track.append(el('span', 'tl-fill'))
+    const time = el('span', 'tl-time')
+    row.append(badge, label, track, time)
+    row.addEventListener('click', () => {
+      selected = selected === id ? undefined : id
+      draw()
+    })
+    return row
+  }
+
+  /** Brings a row up to date with its call. */
+  const fill = (row: HTMLButtonElement, call: TimelineViewCall): void => {
+    const [badge, label, track, time] = Array.from(row.children) as HTMLElement[]
+    if (badge === undefined || label === undefined || track === undefined || time === undefined) return
+    setText(badge, call.badge)
+    badge.style.setProperty('--badge', call.color)
+    const [tool, arg] = Array.from(label.children) as HTMLElement[]
+    if (tool !== undefined) setText(tool, `${call.isSub ? '↳ ' : ''}${call.tool}`)
+    if (arg !== undefined) setText(arg, call.label)
+    row.title = `${call.tool} ${call.detail}`
+    const bar = track.firstElementChild as HTMLElement
+    const from = Math.min(1, Math.max(0, call.from))
+    const width = call.status === 'denied' ? 0.03 : Math.max(0.02, call.to - call.from)
+    bar.style.left = `${(Math.min(from, 1 - width) * 100).toFixed(2)}%`
+    bar.style.width = `${(width * 100).toFixed(2)}%`
+    bar.style.background = call.barColor
+    const outcome = outcomeOf(call)
+    setText(time, outcome.text)
+    time.dataset.tone = outcome.tone
+    row.dataset.status = call.status
+    row.classList.toggle('is-selected', call.id === selected)
+  }
+
+  /** Draws the box under the rows: the selected call in full, else the latest denied call, else a hint. */
+  const drawDetail = (): void => {
+    const picked = calls.find(call => call.id === selected)
+    const denied = [...calls].reverse().find(call => call.status === 'denied')
+    detail.replaceChildren()
+    detail.className = 'tl-detail'
+    if (picked !== undefined) {
+      detail.classList.add('is-call')
+      detail.style.setProperty('--badge', picked.color)
+      const top = el('div', 'tl-detail-head')
+      const badge = el('span', 'tl-badge', picked.badge)
+      badge.style.setProperty('--badge', picked.color)
+      const outcome = outcomeOf(picked)
+      const time = el('span', 'tl-time', outcome.text)
+      time.dataset.tone = outcome.tone
+      top.append(badge, el('span', 'tl-detail-tool', picked.tool), time)
+      detail.append(top, el('pre', 'tl-detail-body', picked.detail))
+      if (picked.note !== undefined && picked.status !== 'ok') detail.append(el('div', 'tl-detail-note', picked.note))
+      return
+    }
+    if (denied !== undefined) {
+      detail.classList.add('is-denied')
+      const line = el('div', 'tl-callout')
+      const what = el('span', 'tl-callout-what')
+      what.append(el('span', 'tl-callout-mark', '⊘'), el('s', 'tl-callout-from', denied.label))
+      if (denied.replacement !== undefined) what.append(el('span', 'tl-callout-arrow', '→'), el('span', 'tl-callout-to', denied.replacement))
+      line.append(what, el('span', 'tl-callout-why', `denied${denied.note === undefined ? '' : ` · ${denied.note}`}`))
+      detail.append(line)
+      return
+    }
+    detail.append(el('div', 'tl-hint', calls.length === 0 ? 'No tool calls yet.' : 'Click a call to see it in full.'))
+  }
+
+  /** Lays the rows out: the calls' rows in order, then empty slots up to `ROWS`; keeps to the newest when it was there. */
+  const draw = (): void => {
+    const isAtEnd = rows.scrollHeight - rows.scrollTop - rows.clientHeight < 4
+    const wanted: HTMLElement[] = calls.map(call => {
+      let row = byId.get(call.id)
+      if (row === undefined) {
+        row = makeRow(call.id)
+        byId.set(call.id, row)
+      }
+      fill(row, call)
+      return row
+    })
+    for (const [id, row] of byId) if (!calls.some(call => call.id === id)) { row.remove(); byId.delete(id) }
+    for (let i = wanted.length; i < ROWS; i++) wanted.push((rows.children[i] as HTMLElement | undefined)?.classList.contains('tl-empty') === true ? rows.children[i] as HTMLElement : el('div', 'tl-row tl-empty'))
+    wanted.forEach((row, index) => {
+      if (rows.children[index] !== row) rows.insertBefore(row, rows.children[index] ?? null)
+    })
+    while (rows.children.length > wanted.length) rows.lastElementChild?.remove()
+    if (isAtEnd) rows.scrollTop = rows.scrollHeight
+    drawDetail()
+  }
+
+  return {
+    update: (data: unknown) => {
+      const view = data as TimelineViewData | null
+      calls = view?.calls ?? []
+      if (selected !== undefined && !calls.some(call => call.id === selected)) selected = undefined
+      setText(sum, view === null ? '' : `${view.count} call${view.count === 1 ? '' : 's'} · ${view.total}`)
+      draw()
+    },
+  }
+}

package/mods/tsconfig.view.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "es2023",
+    "lib": ["es2023", "dom", "dom.iterable"],
+    "types": [],
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "noUncheckedIndexedAccess": true,
+    "noEmit": true,
+    "skipLibCheck": true
+  },
+  "include": ["*/view", "*/hooks/sprite.ts"]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@g3nomaly/g3n-mods",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "The g3n Claude Code mods: panes, status lines, commands and hooks, installed with @g3nomaly/mods.",
   "type": "module",
   "files": [
@@ -9,7 +9,7 @@
   ],
   "scripts": {
     "build": "bun run build:marketplace",
-    "typecheck": "tsc --noEmit && tsc --noEmit --project mods/tsconfig.json",
+    "typecheck": "tsc --noEmit && tsc --noEmit --project mods/tsconfig.json && tsc --noEmit --project mods/tsconfig.view.json",
     "validate": "bun scripts/validate.ts",
     "build:marketplace": "bun scripts/build-marketplace.ts",
     "types": "bun scripts/sync-types.ts"