qa-guide

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (options.chatQuestions === 'off' || e.props.hasSurvey || e.props.isWorking) return next(e)
    const pending = await read($, waiting)
    if (!pending) return next(e)
    const { Box, Text, Button } = $.ui.resolve(e)
    const lang = pending.lang
    const width = Math.max(20, e.props.bodyColumns)
    const cells = (text: string) => [...text].reduce((n, char) => n + cellWidth(char), 0)
    // Icon, label, button or status, ×, the gaps between them and a margin for the engine's own controls.
    const fixed = 2 + cells(t(lang, 'waitingLabel')) + 2 +
      (pending.entryId ? cells(t(lang, 'waitingPending')) : cells(t(lang, 'explainWaiting')) + 4) + 1 + 4 + 6
    // The ?? hint is the first thing to go in a narrow row, so it never wraps.
    const hint = !pending.entryId && width - fixed - cells(t(lang, 'waitingHint')) - 1 >= 16
    const room = Math.max(10, width - fixed - (hint ? cells(t(lang, 'waitingHint')) + 1 : 0))
    return (
      <Box flexDirection="row" gap={1}>
        <Text color="yellow" bold>⏳</Text>
        <Text wrap="truncate-end">
          <Text color="yellow">{t(lang, 'waitingLabel')}: </Text>
          <Text dimColor>{truncateCells(oneLine(pending.question), room)}</Text>
        </Text>
        {pending.entryId
          ? <Text dimColor>{t(lang, 'waitingPending')}</Text>
          : <Button key="explain-waiting" hotkey="e" variant="primary" label={t(lang, 'explainWaiting')}
              onPress={() => explainWaiting($, pending, compactContexts, runIds, settled)} />}
        {hint && <Text dimColor wrap="truncate-end">{t(lang, 'waitingHint')}</Text>}
        <Button key="dismiss-waiting" plain label="×" onPress={async () => {
          let removed: QaWaiting | null = null
          await update($, waiting, w => {
            removed = null
            if (!w || w.id !== pending.id) return w
            removed = w
            return null
          })
          const old = removed as QaWaiting | null
          if (old?.entryId) await settleChat($, old.entryId, { status: 'cancelled', answers: {} }, settled)
        }} />
      </Box>
    )
  })

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const { Box, Text, Button, Markdown } = $.ui.resolve(e)
    // State survives reloads; normalize entries saved before prompts/language existed.
    const list = (await read($, entries)).map(x => ({
      ...x,
      lang: x.lang ?? 'ja',
      explainMode: x.explainMode ?? 'full',
      userPrompts: Array.isArray(x.userPrompts) ? x.userPrompts : [],
    }))
    const aiOn = await read($, isAiOn)
    const history = await read($, showHistory)
    const total = await read($, usageTotal)
    const cost = await read($, costTotal)
    const showCost = options.showCost !== 'off'
    const width = Math.max(20, e.props.bodyColumns)
    const selectedCursor = clampCursor(await read($, cursor), list.length)
    const openDialog = [...list].reverse().find(isOpenDialog)
    const current = openDialog ?? list[list.length - 1 - selectedCursor]
    const lang = current?.lang ?? await resolveLang($, options.language)
    const sessionCost = showCost && cost.hasPricedUsage
      ? costSuffix(lang, cost.usd, cost.hasUnpricedUsage || total > cost.tokens) : ''

    const navigate = async (select: (value: number) => number) => {
      await update($, cursor, value => clampCursor(select(clampCursor(value, list.length)), list.length))
      try {
        const selected = list[list.length - 1 - clampCursor(await read($, cursor), list.length)]
        if (selected && selected.lang !== lang) {
          await $.ui.open({ id: PANE, title: t(selected.lang, 'title') }).catch(() => undefined)
        }
        // History buttons can sit below the selected question's full content.
        await $.ui.scroll({ in: PANE, to: 'start' })
      } catch {
        // The pane may have closed while changing the selection.
      }
    }

    const rule = <Text dimColor>{t(lang, 'rule').repeat(Math.min(width, 60))}</Text>

    const toolbar = (
      <Box flexDirection="column">
        {current && (
          <Box flexDirection="row" gap={1}>
            <Text dimColor>{t(lang, 'counter', { number: selectedCursor + 1, count: list.length })}</Text>
            {selectedCursor < list.length - 1 && (
              <Button
                key="prev"
                hotkey="p"
                plain
                label={t(lang, 'previous')}
                onPress={() => navigate(value => value + 1)}
              />
            )}
            {selectedCursor > 0 && (
              <Button
                key="next"
                hotkey="n"
                plain
                label={t(lang, 'next')}
                onPress={() => navigate(value => value - 1)}
              />
            )}
            {selectedCursor > 0 && (
              <Button key="latest" hotkey="l" plain label={t(lang, 'latest')} onPress={() => navigate(() => 0)} />
            )}
          </Box>
        )}
        <Box flexDirection="row" gap={1}>
          <Button
            key="ai"
            hotkey="a"
            plain
            label={t(lang, 'aiToggle', { state: t(lang, aiOn ? 'on' : 'off') })}
            onPress={() => update($, isAiOn, v => !v)}
          />
          <Button
            key="hist"
            hotkey="h"
            plain
            label={t(lang, history ? 'hideHistory' : 'history', { count: list.length })}
            onPress={() => update($, showHistory, v => !v)}
          />
          <Button key="close" role="dismiss" plain label={t(lang, 'close')} onPress={() => $.ui.close({ id: PANE })} />
        </Box>
        <Text dimColor>{t(lang, 'sessionUsage', { total: totalTokens(lang, total) })}{sessionCost}</Text>
      </Box>
    )

    if (!current) {
      return (
        <Box flexDirection="column">
          <Text dimColor>{t(lang, 'empty')}</Text>
          {toolbar}
        </Box>
      )
    }

    const statusBadge =
      current.status === 'open' ? (
        <Text backgroundColor="yellow" color="black" bold>{t(lang, 'awaiting')}</Text>
      ) : current.status === 'answered' ? (
        <Text backgroundColor="green" color="black" bold>{t(lang, 'answered')}</Text>
      ) : (
        <Text backgroundColor="gray" color="black" bold>{t(lang, 'cancelled')}</Text>
      )
    const modeTag = t(lang, current.explainMode === 'compact' ? 'compactContext' : 'fullContext')
    const usageLine = current.usage && current.usageModel ? t(lang, 'usageLine', {
      input: groupedTokens(current.usage.input_tokens),
      read: groupedTokens(current.usage.cache_read_input_tokens),
      write: groupedTokens(current.usage.cache_creation_input_tokens),
      output: groupedTokens(current.usage.output_tokens),
      model: t(lang, current.usageModel === 'session' ? 'sessionModel' : 'haikuModel'),
    }) + (showCost ? costSuffix(lang, current.costUsd, current.costIncomplete) : '') : undefined
    const deepButton = <Button key="deep" hotkey="f" plain label={t(lang, 'deep')} onPress={() => explain($, current.id, 'full', compactContexts, runIds)} />

    if (openDialog) {
      const columns = Math.max(1, Math.floor(e.props.bodyColumns))
      const bodyRows = Math.max(0, Math.floor(e.props.scroll?.bodyRows ?? e.viewport?.rows ?? 24))
      let remaining = Math.max(0, bodyRows - 1) // one header row
      const latestPrompt = current.userPrompts[current.userPrompts.length - 1]
      const instructionLines = latestPrompt ? promptLines(latestPrompt, columns) : []
      const contextRows = (instructionLines.length ? 1 + instructionLines.length : 0) + (current.lead ? 2 : 0)
      const aiText = current.explainState === 'pending'
        ? t(lang, 'generating')
        : current.explainState === 'done'
          ? current.explanation
          : current.explainState === 'error'
            ? t(lang, 'explainError', { explanation: current.explanation })
            : t(lang, 'compactOff')
      // Each Text costs one row. Reserve the newest instruction and a lead
      // tail, then let completed AI guidance use up to 65% of the visible rows.
      // Short OFF/pending/error messages leave their spare rows for the lead.
      const aiBudget = Math.min(remaining, Math.max(1, Math.floor(bodyRows * 0.65)),
        Math.max(1, remaining - contextRows))
      const rawAiLines = compactAiLines(aiText, columns, lang)
      const aiContent = clampedLines(rawAiLines.filter(line => !line.spacer), aiBudget, columns)
      remaining -= aiContent.length

      const requestLines = remaining >= 2 ? instructionLines.slice(0, remaining - 1) : []
      if (requestLines.length) remaining -= 1 + requestLines.length
      const leadLines = current.lead && remaining >= 2
        ? wrappedLines(current.lead, columns).slice(-(remaining - 1))
        : []
      if (leadLines.length) remaining -= 1 + leadLines.length
      // Allocate text first across the whole tree. Only unused rows can become
      // spacers, and AI spacers also stay inside its 65% limit.
      const aiLines = clampedLines(rawAiLines, Math.min(aiBudget, aiContent.length + remaining), columns)
      remaining -= aiLines.length - aiContent.length
      const requestSpacer = requestLines.length > 0 && remaining > 0
      if (requestSpacer) remaining -= 1
      const leadSpacer = leadLines.length > 0 && remaining > 0
      if (leadSpacer) remaining -= 1
      const showDeep = current.explainState === 'done' && remaining > 0
      if (showDeep) remaining -= 1
      const showUsage = !!usageLine && aiLines.length > 0 && remaining > 0
      const showModeTag = !!aiLines[0] &&
        (current.explainState === 'done' ||
          [...`${aiLines[0].text} ${modeTag}`].reduce((cells, char) => cells + cellWidth(char), 0) <= columns)
      const inlineModeTag = truncateCells(modeTag, columns)
      const tagCells = [...inlineModeTag].reduce((cells, char) => cells + cellWidth(char), 0)
      const firstAiColumns = Math.max(0, columns - tagCells - 1)