glitchdeck

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const els = $.ui.resolve(e)
    const [m, t, f, hist, v, ps, , now] = await Promise.all([
      read($, main),
      read($, todos),
      read($, files),
      read($, history),
      read($, view),
      read($, procs),
      // Read so a glitch frame redraws the pane; the frame itself is computed from the clock.
      read($, fx),
      $.clock.now(),
    ])
    const Client = 'Client' in els ? els.Client : undefined
    // Other surfaces list a Raster but draw it as nothing, so they get the braille graph.
    const Raster = e.surface === 'terminal' && 'Raster' in els ? els.Raster : undefined
    const clock: Clock = (key, since, endAt, color) =>
      since <= 0 ? (
        <els.Text color={color}>—</els.Text>
      ) : Client ? (
        <Client key={key} module="./clients/elapsed.tsx" props={{ since, now, endAt, color }} />
      ) : (
        <els.Text color={color}>{fmtClock((endAt ?? now) - since)}</els.Text>
      )
    const bar: Bar = (key, tone, rows = 1) => {
      if (tone === 'live' && Client) return <Client key={key} module="./clients/breathe.tsx" props={{ colors: BREATH, glyph: '▎', rows, ms: BREATH_MS, now }} />
      return (
        <els.Box flexDirection="column" flexShrink={0}>
          {Array.from({ length: rows }, () =>
            tone === 'none' ? <els.Text> </els.Text> : <els.Text color={tone === 'err' ? C.err : C.accent}>▎</els.Text>,
          )}
        </els.Box>
      )
    }

    // The body's own width: never wider, or the pane would draw past its frame.
    const W = Math.max(1, e.props.bodyColumns)
    const opened = v.agent ? ps.find(p => p.id === v.agent) : undefined
    const top = topLevel(ps)

    // Reading a timeline while drawing subscribes the pane to it: only the opened process's, its live
    // agents', and those of the live processes the short list can show are read.
    const wanted = new Set<string>()
    if (opened) {
      wanted.add(opened.id)
      for (const k of childrenOf(ps, opened.id)) if (isLive(k)) wanted.add(k.id)
    } else if (!v.allProcs)
      for (const p of top.filter(isLive)) {
        wanted.add(p.id)
        if (p.kind === 'workflow') for (const k of shownKids(ps, p.id).shown) if (isLive(k)) wanted.add(k.id)
      }
    const read2 = await Promise.all([...wanted].map(async id => [id, await read($, { ...timeline, id })] as const))
    const calls = new Map<string, Timeline>()
    for (const [id, tl] of read2) if (tl) calls.set(id, tl)
    const own = opened ? calls.get(opened.id) : undefined

    const L = layout({
      rows: e.props.scroll.bodyRows,
      main: {
        now: nowRows(m),
        past: m.tools.length - runningCalls(m).length,
        hasTodo: t.items.length > 0,
        hasActive: t.active !== '',
        hasFiles: f.length > 0,
        hasGraph: flow.cols.length > 0 && W >= GRAPH_MIN_W,
      },
      procs:
        ps.length === 0
          ? null
          : {
              items: top.map(p => (v.allProcs ? 1 : itemHeight(p, ps, secondLine(p, calls.get(p.id)) !== ''))),
              detail: opened ? detailItems(opened, ps, own?.calls ?? []) : null,
              isList: v.allProcs,
            },
      history: hist.length,
    })

    const raster = Raster ? (cols: number, cells: string) => <Raster key={GRAPH_KEY} columns={cols} rows={GRAPH_ROWS} cells={cells} /> : undefined
    if (W >= GRAPH_MIN_W) graphWidth = graphCols(W)
    isGraphDrawn = L.showGraph && raster !== undefined
    isFlowDrawn = flow.cols.length > 0
    const graph = L.showGraph ? graphView(els, C, W, { g: { flow, isLive: isFlowing(m, ps) }, raster }) : null

    const maxHist = Math.max(0, hist.length - L.histRows)
    const offset = Math.min(v.histOffset, maxHist)
    const page = (delta: number) => () =>
      void patchView($, x => {
        const o = clamp(x.histOffset + delta, 0, maxHist)
        return o === x.histOffset ? x : { ...x, histOffset: o }
      })
    const maxProcs = maxProcOffset(ps, L.listRows)
    const pageProcs = (delta: number) => () =>
      void patchView($, x => {
        const o = clamp(x.procOffset + delta, 0, maxProcs)
        return o === x.procOffset ? x : { ...x, procOffset: o }
      })
    const openProc = (id: string) => () => void update($, view, x => ({ ...x, agent: x.agent === id ? '' : id }))
    const back = () => void update($, view, x => ({ ...x, agent: '' }))
    const toggleAll = () => void update($, view, x => ({ ...x, allProcs: !x.allProcs, procOffset: 0 }))
    const shared = { list: ps, calls, now, clock, bar, onOpen: openProc, onAll: toggleAll }

    return (
      <els.Box flexDirection="column" width={W}>
        {mainSection(els, C, W, { m, todos: t, files: f, clock, bar, now, graph, pastRows: L.pastRows, showTodo: L.showTodo, showFiles: L.showFiles })}
        {L.procMode === 'detail' && opened
          ? detailSection(els, C, W, { ...shared, proc: opened, own, rows: L.detailRows, onBack: back })
          : L.procMode === 'list'
            ? listSection(els, C, W, { ...shared, rows: L.listRows, offset: Math.min(v.procOffset, maxProcs), onPage: pageProcs })
            : L.procMode === 'items'
              ? itemsSection(els, C, W, { ...shared, items: L.procItems })
              : null}
        {hist.length > 0
          ? historySection(els, C, W, { list: hist, offset, rows: L.histRows, onNewer: page(-L.histRows), onOlder: page(L.histRows) })
          : null}
      </els.Box>
    )
  })

export const mainSection = (
  els: Els,
  C: Palette,
  W: number,
  d: {
    m: Main
    todos: Todos
    files: readonly FileTouch[]
    clock: Clock
    bar: Bar
    now: number
    /** The throughput graph, three rows, when the layout has room for it. */
    graph: RenderNode | null
    /** Row counts from the pane's layout. */
    pastRows: number
    showTodo: boolean
    showFiles: boolean
  },
): RenderNode => {
  const { Box, Text } = els
  const { m, todos, files, clock } = d
  const a = m.activity

  const running = runningCalls(m)
  const now: RenderNode[] = []
  if (running.length > 0) now.push(...[...running].reverse().map(r => runningRow(els, C, W, r, d)))
  else if (m.isRunning) {
    const words = a.kind === 'tool-input' && a.tool ? `preparing ${a.tool}…` : WAITING[a.kind] || 'working…'
    now.push(
      line(
        els,
        <Box>
          {d.bar('bar-activity', 'live')}
          <Text color={C.hi}>{shorten(words, W - 8)}</Text>
        </Box>,
        clock('activity-clock', a.since, null, C.accent),
      ),
    )
  } else if (m.lastTurn) {
    const t = m.lastTurn
    const isOk = t.reason === 'answer'
    now.push(
      <Text wrap="truncate">
        <Text color={isOk ? C.dim : C.err}>{isOk ? '  ✓ ' : '  ✗ '}</Text>
        <Text color={C.body}>{`last turn ${fmtMs(t.durationMs)}`}</Text>
        <Text color={C.muted}>{` · ${plural(t.tools, 'tool')}`}</Text>
        {t.errors > 0 ? <Text color={C.err}>{` · ${plural(t.errors, 'error')}`}</Text> : null}
        {isOk ? null : <Text color={C.err}>{` · ${t.reason}`}</Text>}
      </Text>,
    )
  }

  const past = m.tools
    .filter(r => !running.includes(r))
    .reverse()
    .slice(0, Math.max(0, d.pastRows))
    .map(r => pastRow(els, C, W, r))

  const extras: RenderNode[] = []
  if (d.showTodo && todos.items.length > 0) {
    const done = todos.items.filter(t => t.status === 'completed').length
    const total = todos.items.length
    const count = `  ${done}/${total}`
    const meterW = Math.max(4, Math.min(34, W - 8 - cells(count)))
    const on = Math.round((done / total) * meterW)
    extras.push(
      <Text wrap="truncate">
        <Text color={C.muted}>{'  todo  '}</Text>
        <Text color={m.isRunning ? C.accent : C.muted}>{'━'.repeat(on)}</Text>
        <Text color={C.faint}>{'─'.repeat(meterW - on)}</Text>
        <Text color={C.body}>{count}</Text>
      </Text>,
    )
    if (todos.active)
      extras.push(
        <Text color={C.body} wrap="truncate">
          {`        ${todos.active}`}
        </Text>,
      )
  }
  if (d.showFiles && files.length > 0) {
    const reads = files.filter(f => f.reads > 0).length
    const edits = files.filter(f => f.edits > 0).length
    extras.push(
      <Text wrap="truncate">
        <Text color={C.muted}>{'  files '}</Text>
        <Text color={C.body}>{`${reads} read · ${edits} edited `}</Text>
        {[...files]
          .reverse()
          .slice(0, 3)
          .map(f => (
            <Text color={f.edits > 0 ? C.body : C.muted}>{`  ${f.path.split('/').pop() ?? f.path}`}</Text>
          ))}
      </Text>,
    )
  }

  // The model's name once it is known; the turn clock beside it while a turn runs.
  const model = m.model ? prettyModel(m.model).toLowerCase() : ''
  const right = m.isRunning ? (
    <Box>
      {model ? <Text color={C.muted}>{`${model} · `}</Text> : null}
      {clock('turn-clock', m.turnStartedAt, null, C.accent)}
    </Box>
  ) : model ? (
    <Text color={C.muted}>{model}</Text>
  ) : undefined
  const rightW = m.isRunning ? (model ? cells(`${model} · `) : 0) + cells(fmtClock(d.now - m.turnStartedAt)) : cells(model)

  return section(els, C, {
    key: 'main',
    W,
    name: (
      <Text color={C.hi} bold>
        main
      </Text>
    ),
    nameW: 4,
    right,
    rightW,
    rows: [...(d.graph ? [d.graph, blank(els)] : []), ...now, ...past, ...(extras.length > 0 ? [blank(els), ...extras] : [])],
  })
}

export const section = (els: Els, C: Palette, s: Section) => {
  const { Box, Text } = els
  // A clock that gains a digit between redraws cuts the hatch, never the status: the left side shrinks.
  const hatchW = Math.max(0, s.W - s.nameW - 1 - (s.right === undefined ? 0 : (s.rightW ?? 0) + 1))
  return (
    <Box key={s.key} flexDirection="column" width={s.W} marginTop={s.isSpaced ? 1 : 0}>
      <Box justifyContent="space-between" width={s.W}>
        <Box flexShrink={1} overflow="hidden">
          {s.name}
          <Text wrap="truncate"> {hatch(els, C, hatchW)}</Text>
        </Box>
        {s.right === undefined ? null : (
          <Box flexShrink={0} marginLeft={1}>
            {s.right}
          </Box>
        )}
      </Box>
      {s.rows.length > 0 ? <Text> </Text> : null}
      {s.rows}
    </Box>
  )
}

const hatch = (els: Els, C: Palette, n: number) => {
  const { Text } = els
  const runs: { color: string; count: number }[] = []
  for (let i = 0; i < n; i++) {
    const color = mix(C.accent, C.faint, 0.45 + (i / Math.max(1, n - 1)) * 2.2)
    const last = runs[runs.length - 1]
    if (last && last.color === color) last.count += 1
    else runs.push({ color, count: 1 })
  }
  return runs.map(r => <Text color={r.color}>{HATCH.repeat(r.count)}</Text>)
}

export const detailSection = (
  els: Els,
  C: Palette,
  W: number,
  d: Shared & { proc: Proc; own: Timeline | undefined; rows: number; onBack: () => void },
): RenderNode => {
  const { Box, Button, Text } = els
  const p = d.proc
  const own = d.own?.calls ?? []
  const kids = childrenOf(d.list, p.id)

  const running = isLive(p) ? own.filter(r => r.state === 'run') : []
  const calls = [
    ...[...running].reverse().map(r => runningRow(els, C, W, r, d)),
    ...own
      .filter(r => !running.includes(r))
      .reverse()
      .map(r => pastRow(els, C, W, r)),
  ].slice(0, d.rows)

  // A workflow's agents, newest work first; when they outnumber the rows, the last one says how many more.
  const kidRows = (): RenderNode[] => {
    const fits = kids.length <= d.rows ? kids : kids.slice(0, Math.max(0, d.rows - 1))
    const rows = fits.map((k, i) => (
      <Box key={`row-${k.id}`}>
        {d.bar(`bar-${k.id}`, toneOf(k))}
        <Box flexGrow={1}>{kidRow(els, C, W - 1, k, i === kids.length - 1, d)}</Box>
      </Box>
    ))
    if (fits.length < kids.length) rows.push(<Text color={C.muted}>{`    +${kids.length - fits.length} more`}</Text>)
    return rows
  }
  const body = p.kind === 'workflow' ? kidRows() : calls

  const total = totalOf(d.own)
  const stats =
    p.kind === 'agent' || p.kind === 'wfagent'
      ? `${kTokens(p.ctx)} ctx · ${kTokens(p.tokOut)} out · ${plural(p.steps, 'step')} · ${plural(total, 'tool')}${calls.length > 0 && calls.length < total ? `, last ${calls.length}` : ''}`
      : p.kind === 'workflow'
        ? `${plural(kids.length, 'agent')} · ${kids.filter(isLive).length} live`
        : `${p.type} · started ${fmtWall(p.startedAt)}${p.why ? ` · ${p.why}` : ''}`

  const word = p.state === 'R' ? 'live' : p.state === 'S' ? 'waiting' : p.state === 'X' ? 'done' : p.why || 'failed'
  const wordColor = isLive(p) ? C.accent : p.state === 'Z' ? C.err : C.muted
  const time = p.startedAt > 0 ? fmtClock((p.endedAt ?? d.now) - p.startedAt) : '—'
  const name = `‹ ${shorten(p.type.toLowerCase(), 24)}`
  const words = wrapLines(p.lastText, W - 3, 2)
  return section(els, C, {
    key: 'procs',
    W,
    isSpaced: true,
    name: (
      <Button key={BACK_KEY} plain onPress={d.onBack}>
        <Text color={C.hi} bold>
          {name}
        </Text>
      </Button>
    ),
    nameW: cells(name),
    right: (
      <Box>
        <Text color={wordColor}>{shorten(word, 12)}</Text>
        <Text color={C.muted}>{' · '}</Text>
        {d.clock(`detail-clock-${p.id}`, p.startedAt, p.endedAt, C.muted)}
      </Box>
    ),
    rightW: cells(shorten(word, 12)) + 3 + cells(time),
    rows: [
      <Text color={C.hi} bold wrap="truncate">
        {` ${p.task || p.type}`}
      </Text>,
      <Text color={p.state === 'Z' ? C.err : C.muted} wrap="truncate">
        {` ${stats}`}
      </Text>,
      ...(body.length > 0 ? [blank(els), ...body] : []),
      blank(els),
      <Text wrap="truncate">
        {words[0] ? <Text color={C.dim}>{' » '}</Text> : ' '}
        {words[0] ? (
          <Text color={C.muted} italic>
            {words[0]}
          </Text>
        ) : null}
      </Text>,
      <Text color={C.muted} italic wrap="truncate">
        {words[1] ? `   ${words[1]}` : ' '}
      </Text>,
    ],
  })
}

export const listSection = (
  els: Els,
  C: Palette,
  W: number,
  d: Shared & { rows: number; offset: number; onPage: (delta: number) => () => void },
): RenderNode => {
  const { Box, Button, Text } = els
  const top = topLevel(d.list)
  const offset = Math.max(0, Math.min(d.offset, top.length - d.rows))
  const shown = top.slice(offset, offset + d.rows)
  const rows = shown.map(p => {
    const s = status(els, C, p, d)
    const isLoud = isLive(p) || p.state === 'Z'
    return (
      <Box key={`row-${p.id}`} hover={{ backgroundColor: C.hover }}>
        {d.bar(`bar-${p.id}`, toneOf(p))}
        <Box flexGrow={1}>
          {line(
            els,
            <Button key={`${PROC_PREFIX}${p.id}`} plain onPress={d.onOpen(p.id)}>
              <Text color={isLoud ? C.hi : C.muted} bold={isLoud}>
                {fit(shorten(p.type.toLowerCase(), TYPE_W - 1), TYPE_W)}
              </Text>
              <Text color={isLoud ? C.body : C.muted}>{shorten(p.task || p.type, W - 1 - TYPE_W - s.width - 1)}</Text>
            </Button>,
            s.node,
          )}
        </Box>
      </Box>
    )
  })
  const canUp = offset > 0
  const canDown = offset + d.rows < top.length
  const paging = canUp || canDown
  rows.push(
    <Box columnGap={2}>
      {control(els, C, 'procs-all', ' ‹ fewer', true, d.onAll)}
      {paging ? control(els, C, 'procs-up', '▴', canUp, d.onPage(-d.rows)) : null}
      {paging ? control(els, C, 'procs-down', '▾', canDown, d.onPage(d.rows)) : null}
      {paging ? <Text color={C.dim}>{`${offset + 1}-${offset + shown.length} of ${top.length}`}</Text> : null}
    </Box>,
  )
  return section(els, C, { key: 'procs', W, isSpaced: true, ...header(els, C, top), rows })
}