thimble-cc-mod

  on('ui.render', { component: 'Pane', requestId: PANEL }, async ($, e) => {
    switch ((await read($, viewA)) as PanelView) {
      case 'card':
        return drawCard($, e)
      case 'thread':
        return drawThread($, e)
      case 'threads':
        return drawThreads($, e)
      case 'menu':
        return drawMenu($, e)
      default:
        return drawCite($, e)
    }
  })

async function drawCard($: Dollar, e: PaneEvent): Promise<RenderElement> {
  const id = await read($, paneCardA)
  const mode = await read($, paneModeA)
  const card = id ? await loadCard($, id) : null
  if (e.surface !== 'terminal' && e.surface !== 'desktop') {
    const { Text } = $.ui.resolve(e)
    return <Text dimColor>The interactive card needs the terminal or the desktop app.</Text>
  }
  const { Box, Text, Client, Code, Button } = $.ui.resolve(e)
  if (!card) return <Text dimColor>No card open. /thimble-card &lt;id&gt;</Text>
  const w = Math.max(30, e.props.bodyColumns - 1)
  const picked = await read($, pickedA)
  const meta = await metaOf($, card.id)
  const run: ChatRun | undefined = (await $.state.get({ ...RUNS, id: card.id })).value
  const cardEl = <Client key={`pane-${id}`} module="./card.tsx" width={w} props={{ card, cols: w, plotRows: 16, debug, meta, pane: true }} />
  const body: RenderElement[] = mode === 'script' && card.source?.script ? [] : [cardEl]
  if (mode === 'script' && card.source?.script) {
    // the script first, with its buttons on top, so they show however tall the card is; the card below
    await paths($)
    let source = ''
    try {
      source = await $.fs.read(`${cwd}/${card.source.script}`)
    } catch {
      source = `(cannot read ${card.source.script})`
    }
    body.push(
      <Box flexDirection="row" columnGap={2}>
        <Button key="rerun" label={meta.busy ? 'running…' : 'run it again'} hotkey="r" variant="primary" onPress={() => void rerunCard($, card.id)} />
        <Button key="close" label="close" hotkey="x" role="dismiss" onPress={() => void closePanel($)} />
        <Text dimColor>{run?.exitCode !== undefined ? `last run: exit ${run.exitCode}` : ''}</Text>
      </Box>,
    )
    body.push(<Text wrap="truncate-end"><Text bold>{card.source.script}</Text><Text dimColor>{`  edit it in your editor, then run it again here${card.source.sha1 ? ` · sha1 ${card.source.sha1} when the card was made` : ''}`}</Text></Text>)
    body.push(<Code source={source.slice(0, 9000)} language="python" startLine={1} wrap="truncate-end" />)
    if (run?.exitCode !== undefined) {
      const tail = `${scriptOutput(run.stdout ?? '')}${run.stderr ? `\n${run.stderr}` : ''}`.trim().split('\n').slice(-8)
      body.push(<Text dimColor>{`output of the last run (exit ${run.exitCode})${tail.join('').trim() ? '' : ': nothing printed'}`}</Text>)
      if (tail.join('').trim()) body.push(<Box flexDirection="column">{tail.map(l => <Text wrap="truncate-end">{l || ' '}</Text>)}</Box>)
    }
    body.push(cardEl)
  } else {
    const cited = citedOnCard(picked, card.id)
    if (cited) body.push(<Text dimColor wrap="truncate-end">{`last cited: ${cited}`}</Text>)
  }
  return <Box flexDirection="column">{body}</Box>
}

async function drawThread($: Dollar, e: PaneEvent): Promise<RenderElement> {
  if (e.surface === 'mobile') {
    const { Text } = $.ui.resolve(e)
    return <Text dimColor>Side threads need a surface with text fields.</Text>
  }
  const { Box, Text, Button, Input } = $.ui.resolve(e)
  const t = await getThread($, await read($, threadA))
  const cols = Math.max(30, e.props.bodyColumns - 1)
  if (!t) return <Text dimColor>No side thread.</Text>
  const g = await ensureGuide($)
  const body: RenderElement[] = []
  body.push(paintLine(Text, [{ s: 'side thread about ', d: true }, ...linkSegs(t.label, { b: true })]))
  if (t.context) body.push(paintLine(Text, linkSegs(t.context.split('\n')[0] ?? '', { d: true })))
  body.push(<Text dimColor>{'─'.repeat(Math.min(cols, 80))}</Text>)
  let k = 0
  for (const turn of t.turns) {
    k++
    body.push(<Text color={COLORS.accent} bold wrap="wrap">{`› ${plainCites(turn.q)}`}</Text>)
    if (turn.state === 'running') {
      body.push(<Text dimColor wrap="truncate-end">{`working · ${turn.tools} tool call${turn.tools === 1 ? '' : 's'}${turn.partial ? ` · ${clip(turn.partial, cols - 30)}` : ''}`}</Text>)
    } else if (turn.state === 'error') {
      body.push(<Text color={COLORS.problem} wrap="wrap">{turn.a}</Text>)
    } else {
      // each block of the answer stands right of the reply's margin, so a card gets the panel's width less it
      body.push(<Box flexDirection="column">{await drawReply($, e, threadBody(turn.a), cols - MARGIN, `${t.id}:${k}`, `t${k}-`)}</Box>)
    }
    body.push(<Text> </Text>)
  }
  const last = t.turns.at(-1)
  body.push(
    <Input
      key="ask"
      {...(t.turns.length === 0 ? { autoFocus: true as const } : {})}
      label="ask"
      placeholder={t.turns.length ? 'a follow-up (Enter sends it to this thread)' : `ask about ${clip(plainCites(t.label), 40)} (Enter)`}
      submitLabel="ask"
      onSubmit={v => void askThread($, t.id, v, g)}
    />,
  )
  body.push(
    <Box flexDirection="row" columnGap={2}>
      <Button key="threads" label="all threads" hotkey="t" onPress={() => void openPane($, 'threads', 'Side threads')} />
      <Button key="close" label="close" hotkey="x" role="dismiss" onPress={() => void closePanel($)} />
      <Text dimColor>{last?.state === 'running' ? 'answering…' : t.engine ? `${t.engine} subagent · ${t.file}` : ''}</Text>
    </Box>,
  )
  return <Box flexDirection="column">{body}</Box>
}

async function drawThreads($: Dollar, e: PaneEvent): Promise<RenderElement> {
  const { Box, Text, Button } = $.ui.resolve(e)
  const cols = Math.max(30, e.props.bodyColumns - 1)
  const threads = await allThreads($)
  const current = await read($, threadA)
  const rows: RenderElement[] = [<Text bold>{`Side threads (${threads.length})`}</Text>]
  if (!threads.length) rows.push(<Text dimColor>No side threads yet: click a plot, a card's title or "ask ›" beside a paragraph.</Text>)
  threads.forEach((t, i) => {
    const n = t.turns.length
    const state = t.turns.at(-1)?.state === 'running' ? ' · answering…' : ''
    const what = `${n} question${n === 1 ? '' : 's'}${state}`
    const last = t.turns.at(-1)?.q
    rows.push(
      <Box key={`thread-row:${t.id}`} flexDirection="column" marginTop={i ? 1 : 0}>
        <Button
          key={`thread-open:${t.id}`}
          label={clip(plainCites(t.label), cols - 4)}
          plain
          {...(i < 9 ? { hotkey: String(i + 1) } : {})}
          {...(t.id === current ? { variant: 'primary' as const } : {})}
          hover={{ underline: true }}
          onPress={() => void showThread($, t)}
        />
        <Text dimColor wrap="truncate-end">{`   ${what}${last ? ` · last: ${clip(plainCites(last), cols - what.length - 12)}` : ''}`}</Text>
      </Box>,
    )
  })
  rows.push(
    <Box flexDirection="row" columnGap={2} marginTop={1}>
      <Button key="close" label="close" hotkey="x" role="dismiss" onPress={() => void closePanel($)} />
    </Box>,
  )
  return <Box flexDirection="column">{rows}</Box>
}

async function drawMenu($: Dollar, e: PaneEvent): Promise<RenderElement> {
  const { Box, Text, Button } = $.ui.resolve(e)
  const t = await read($, menuA)
  if (!t) return <Text dimColor>Nothing selected.</Text>
  const items = menuItems(t)
  const cols = Math.max(20, e.props.bodyColumns)
  return (
    <Box flexDirection="column">
      <Text dimColor wrap="truncate-end">{targetLabel(t, cols - 2)}</Text>
      {items.map((m, i) => (
        <Button
          key={`menu-${m.act}`}
          label={m.label}
          hotkey={m.hotkey}
          plain
          {...(i === 0 ? { autoFocus: true as const } : {})}
          onPress={async () => {
            // a choice that shows something replaces the menu in the panel; one that only runs closes it
            if (m.act === 'rerun') await closePanel($)
            await act($, m.act, t)
          }}
        />
      ))}
    </Box>
  )
}

async function drawCite($: Dollar, e: PaneEvent): Promise<RenderElement> {
  const { Box, Text, Button, Code } = $.ui.resolve(e)
  // `id` keys the claim's fix and verification (a citation's own id for a mark or a record); the verdict is the
  // citation's, whatever sentence holds it
  const id = await read($, openA)
  const own = id ? (await $.state.get({ ...VERDICTS, id })).value : undefined
  // after a reload the module's maps are empty; the verdict in state still holds a citation opened by its own id
  const c = id ? (citeOf(id) ?? (own ? { raw: own.raw, ref: own.ref, display: own.display } : undefined)) : undefined
  const cols = Math.max(30, e.props.bodyColumns)
  if (!c) return <Text dimColor>No citation open.</Text>
  const v = own ?? (await $.state.get({ ...VERDICTS, id: cid(c.raw) })).value
  const run = (await $.state.get({ ...VERIFY, id })).value
  const fix = (await $.state.get({ ...FIXES, id })).value
  const status = v?.status ?? 'pending'
  const look = chipLook(status, fix?.state, run?.state)
  // the passage an example quotes, or the words a citation quotes
  const quote = quotes.get(cid(c.raw)) ?? quotedWords(c.display)
  const body: RenderElement[] = []
  const head = paraLayout({ prefix: '', heading: 0, quote: false, runs: [{ text: citeLabel(c), cite: c }, { text: ` · ${statusWords(c, status, run)}` }] }, [{ label: citeLabel(c), ...look, tip: '' }], cols, -1)
  body.push(paintLines(Box, Text, head.lines))
  const sentence = claimMap.get(id)?.sentence
  body.push(<Text dimColor wrap="truncate-end">{clip(sentence ? `${placeName(c.ref)} · in "${plainCites(sentence)}"` : placeName(c.ref), cols)}</Text>)
  const red = status === 'missing' || status === 'differs'
  if (v?.why && (red || c.display !== null)) body.push(<Text color={red ? COLORS.problem : COLORS.dim} wrap="truncate-end">{clip(plainWhy(v.why), cols)}</Text>)
  const choice = await otherChoice($, c.ref)
  if (choice) body.push(<Text dimColor wrap="wrap">{choice}</Text>)
  if (fixNote(status, fix)) body.push(<Text color={COLORS.problem} wrap="wrap">{fixNote(status, fix)}</Text>)
  if (!v) body.push(<Text dimColor>checking…</Text>)
  else if (v.kind === 'value' || v.kind === 'card') {
    const card = v.card ? await loadCard($, v.card) : null
    if (card) {
      body.push(<Text bold wrap="truncate-end">{`card: ${card.question}`}</Text>)
      // the cited item drawn as hovered (a table's row, a line's point, a timeline's event, a node), its cells lit,
      // and kept in view: a table's header, then the rows around it
      const w = Math.min(cols - 2, 90)
      const shown = v.kind === 'value' ? withCitedRow(card, v) : card
      const k = citedItem(shown, cardLayout(shown, w, -1, 8).items, v)
      const lay = cardLayout(shown, w, k, 8)
      let rows = shown.kind === 'table' || shown.kind === 'bar' ? litItem(lay, k, COLORS.highlight) : lay.lines
      if (k < 0 && shown.kind === 'bar' && v.kind === 'value' && v.row === 'all') rows = rows.map(l => l.map(s => (s.s.startsWith('all: ') ? { ...s, bg: COLORS.highlight } : s)))
      const room = Math.max(8, (e.props.scroll?.bodyRows || 20) - 9)
      const ys = rows.flatMap((l, y) => (l.some(s => s.bg === COLORS.highlight || s.bg === COLORS.cursor) ? [y] : []))
      if (rows.length > room && ys.length && ys.at(-1)! >= room) {
        const head = shown.kind === 'table' ? rows.findIndex(l => l[0]?.fg === COLORS.rule) + 1 : 0
        const lo = Math.max(head, Math.min(ys[0]! - 1, rows.length - (room - head)))
        rows = [...rows.slice(0, head), ...rows.slice(lo, lo + room - head)]
      }
      body.push(paintLines(Box, Text, rows))
      body.push(<Text dimColor wrap="truncate-end">{card.source?.script ? `made by ${card.source.script}` : 'no script recorded'}</Text>)
    }
  } else if (v.window.length) {
    const head = v.kind === 'call' ? `output of $ ${clip(v.command ?? '', cols - 15)}` : `${v.file}${v.start ? ` · line ${v.start}${v.end && v.end !== v.start ? `-${v.end}` : ''}` : ''}`
    body.push(<Text bold wrap="truncate-end">{head}</Text>)
    const gutter = Math.max(...v.window.map(w => String(w.n).length))
    // the cited lines wrapped, the value or the quoted passage lit; when they take many rows, less context around
    const hits = v.window.filter(w => w.hit)
    const hitRows = Math.max(3, Math.min(8, Math.floor(((e.props.scroll?.bodyRows || 20) - 12) / Math.max(1, hits.length))))
    const wraps = hits.some(w => w.text.length > cols - gutter - 3)
    const near = wraps ? 2 : 99
    const firstHit = v.window.findIndex(w => w.hit)
    const lastHit = v.window.length - 1 - [...v.window].reverse().findIndex(w => w.hit)
    const lines = v.window.filter((w, i) => w.hit || (i >= firstHit - near && i <= lastHit + near))
    body.push(<Box flexDirection="column">{lines.flatMap(w => (w.hit ? wrappedRows({ Text } as never, w, quote, gutter, cols, hitRows) : [lineRow({ Text } as never, w, gutter, cols)]))}</Box>)
    if (quote && status !== 'differs' && !hits.some(w => quoteSpan(w.text, quote))) body.push(<Text wrap="wrap"><Text dimColor>{'quoted: '}</Text><Text backgroundColor={COLORS.highlight} bold>{clip(quote, 600)}</Text></Text>)
  }

  // verification, and a side thread about this citation
  const canVerify = c.display !== null
  // the thread pane replaces this one, so it shows and takes the keys (a second pane would open behind as a tab)
  const ask = (
    <Button
      key="ask"
      label="ask"
      hotkey="a"
      onPress={async () => {
        const about = await citationContext($, id)
        await openThread($, about)
      }}
    />
  )
  const close = <Button key="close" label="close" hotkey="x" role="dismiss" onPress={() => void closePanel($)} />
  body.push(<Text dimColor>{'─'.repeat(Math.min(cols, 80))}</Text>)
  if (!run) {
    body.push(
      canVerify ? (
        <Box flexDirection="column">
          <Box flexDirection="row" columnGap={2}>
            <Button key="verify" label="verify" hotkey="v" variant="primary" onPress={() => void askVerify($, id)} />
            {ask}
            {close}
          </Box>
        </Box>
      ) : (
        <Box flexDirection="row" columnGap={2}>
          <Text dimColor>This citation shows no value to recompute.</Text>
          {ask}
          {close}
        </Box>
      ),
    )
  } else {
    const color = run.state === 'verified' ? COLORS.ok : verifyFailed(run.state) ? COLORS.problem : COLORS.dim
    const words: Record<string, string> = {
      asked: `a subagent is writing ${run.script} …`,
      running: `running ${run.script} …`,
      missing: `✗ not written: ${run.stderr ? `the subagent ended without writing ${run.script}: ${clip(run.stderr, 200)}` : `there is no ${run.script}`}`,
      verified: `✓ the script recomputed ${run.result}, as cited`,
      refuted: `✗ the script recomputed ${run.result}, the reply cites ${run.expected}`,
      error: `✗ ${verifyError(run)}`,
    }
    body.push(<Text color={color} bold wrap="wrap">{words[run.state] ?? run.state}</Text>)
    if (run.source) {
      body.push(<Text dimColor wrap="truncate-end">{run.script}</Text>)
      body.push(<Code source={run.source.slice(0, 6000)} language="python" startLine={1} wrap="truncate-end" />)
    }
    if (run.stdout || run.stderr) {
      body.push(<Text dimColor>output</Text>)
      const tail = `${run.stdout ?? ''}${run.stderr ? `\n${run.stderr}` : ''}`.trim().split('\n').slice(-12)
      body.push(<Box flexDirection="column">{tail.map(l => <Text wrap="truncate-end">{l || ' '}</Text>)}</Box>)
    }
    body.push(
      <Box flexDirection="row" columnGap={2}>
        {run.state !== 'asked' && run.state !== 'running' ? <Button key="rerun" label="run it again" hotkey="r" onPress={() => void runVerify($, id)} /> : null}
        {run.state === 'missing' || run.state === 'error' ? <Button key="again" label="verify again" hotkey="v" onPress={() => void askVerify($, id)} /> : null}
        {ask}
        {close}
      </Box>,
    )
  }
  return <Box flexDirection="column">{body}</Box>
}