sitrep

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (e.props.hasSurvey) return next(e)
    const pending = await read($, pendingAtom)
    const answers = pending ? (await read($, answersAtom))[pending.id] ?? {} : {}
    const open = pending ? pending.decisions.map((d, n) => ({ d, n })).filter(({ n }) => answers[n] === undefined) : []
    const first = open[0]
    const todo = pending?.todo[0]
    // pane 開著時題目在 pane 裡選：這列不畫，alt+n（ctrl+x tab）才會直接跳到 pane
    const hasAsk = !!pending && (!!first || todo !== undefined) && !(await read($, paneOpenAtom))
    const running = await runningAgents($)
    if (!hasAsk && running.length === 0) return next(e)
    // band 只有一個：先讓排在下面的 mod 畫（例如 ctx-relay 的交接列），自己這列疊在它下面
    const below = await next(e)
    const { Box, Button, Text } = $.ui.resolve(e)
    // 子代理在跑、子代理 pane 沒畫出來時一行：tmux 預設不是 fullscreen，pane 疊在提示框上方太占位，平常看這行就夠
    const agentsLine = running.length > 0 ? (
      <Text key="above-agents" wrap="truncate-end">
        <Text color={BLUE} bold>{`${spin()} `}</Text>
        <Text color={SOFT}>{`子代理 ${running.length} 個進行中 · 輸出 ${tokens(running.reduce((n, a) => n + (a.output ?? 0), 0))}`}</Text>
        <Text color={DIM}>{'   /agents-info 看細節'}</Text>
      </Text>
    ) : null
    let line: RenderElement | null = null
    if (hasAsk && pending && first) {
      const { d, n } = first
      const total = pending.decisions.length
      // hotkey 只收一個小寫字母；數字不給：空的提示框裡按數字會直接按到 band 的按鈕，也會撞 ctx-relay 的 "1"
      line = (
        <Box key="above-row" flexDirection="row">
          <Text color={YELLOW} bold>{`? ${open.length} 題待決`}</Text>
          <Text color={BRIGHT}>{total > 1 ? `   ${n + 1}.` : '  '}</Text>
          {(d.options ?? []).map(o => {
            const hotkey = /^[a-z]$/i.test(o.key) ? o.key.toLowerCase() : undefined
            return (
              <Box key={`above-opt-${o.key}`} flexDirection="row" marginLeft={2}>
                <Button key={`above-pick-${n}-${o.key}`} plain label={hotkey ? o.label : `${o.key} ${o.label}`} {...(hotkey ? { hotkey } : {})} onPress={() => pick($, pending.id, n, o.key, total)} />
                {d.recommended === o.key ? <Text color={YELLOW}>{' 建議'}</Text> : null}
              </Box>
            )
          })}
          <Text color={DIM} wrap="truncate-end">{'   · 聚焦後按字母，只填入輸入框'}</Text>
        </Box>
      )
    } else if (hasAsk) {
      line = (
        <Text key="above-todo" wrap="truncate-end">
          <Text color={YELLOW} bold>{'等你動手：'}</Text>
          <Text>{todo}</Text>
        </Text>
      )
    }
    return (
      <Box flexDirection="column">
        {below}
        {agentsLine}
        {line}
      </Box>
    )
  })

  on('ui.render', { component: 'Pane' }, async ($, e, next) => {
    if (e.requestId === AGENTS_PANE) return drawAgents($, e, e.props.bodyColumns)
    if (e.requestId !== PANE) return next(e)
    return drawPane($, e, e.props.bodyColumns)
  })

async function drawAgents($: EngineInterface, e: RenderEvent, width: number) {
  const { Box, Text } = $.ui.resolve(e)
  const list = await read($, agentsAtom)
  if (list.length === 0) return <Text color={DIM}>{'這個 session 還沒派過子代理'}</Text>
  const now = await $.clock.now().catch(() => null)
  const { running, ended } = splitAgents(list)
  const row = (a: AgentNote) => {
    const { mark, time, detail } = agentLine(a, now)
    // 描述的預算扣掉符號、類型、右邊的時間（都按欄寬算，中文 2 欄），太窄也至少留 6 欄
    const room = Math.max(6, width - 2 - cols(a.type) - 2 - (time === '' ? 0 : cols(time) + 1))
    return (
      <Box key={`ag-${a.id}`} flexDirection="column">
        <Box flexDirection="row">
          <Text color={mark.color} bold>{`${mark.glyph} `}</Text>
          <Text color={SOFT}>{`${a.type}  `}</Text>
          <Text wrap="truncate-end">{clip(a.description, room)}</Text>
          <Box flexGrow={1} />
          <Text color={DIM}>{time}</Text>
        </Box>
        {detail !== '' ? <Text color={DIM} wrap="truncate-end">{`  ${clip(detail, Math.max(1, width - 2))}`}</Text> : null}
      </Box>
    )
  }
  return (
    <Box flexDirection="column">
      <Text color={SOFT}>{agentsHeader(list)}</Text>
      {running.length > 0 ? (
        <Box key="running" flexDirection="column" marginTop={1}>
          <Text color={BLUE}>{'進行中'}</Text>
          {running.map(row)}
        </Box>
      ) : null}
      {ended.length > 0 ? (
        <Box key="ended" flexDirection="column" marginTop={1}>
          <Text color={DIM}>{'已結束'}</Text>
          {ended.slice(0, 10).map(row)}
          {ended.length > 10 ? <Text key="more" color={DIM}>{`…還有 ${ended.length - 10} 個`}</Text> : null}
        </Box>
      ) : null}
    </Box>
  )
}

async function drawPane($: EngineInterface, e: RenderEvent, width: number) {
  const { Box, Button, Text } = $.ui.resolve(e)
  const last = await read($, lastAtom)
  const pending = await read($, pendingAtom)
  const answers = pending ? (await read($, answersAtom))[pending.id] ?? {} : {}
  const sections: { title: string; color: string; rows: RenderElement[]; max: number }[] = []

  // 需要你：每題一塊黃底，選項照引擎問卷樣式畫成「a: 標籤」（第一題沒答的有字母熱鍵），選過的整題變灰、選中的打 ●
  const need: RenderElement[] = []
  let left = 0
  if (pending) {
    const total = pending.decisions.length
    const firstOpen = pending.decisions.findIndex((_, n) => answers[n] === undefined)
    pending.decisions.forEach((d, n) => {
      const picked = answers[n]
      if (picked === undefined) left++
      need.push(
        <Box key={`need-${n}`} flexDirection="column" backgroundColor={picked === undefined ? NEED_BG : undefined} paddingX={1}>
          <Text color={picked === undefined ? BRIGHT : DIM}>{total > 1 ? `${n + 1}. ${d.text}` : d.text}</Text>
          <Box flexDirection="row">
            {(d.options ?? []).map(o => {
              const isLetter = /^[a-z]$/i.test(o.key)
              const letter = isLetter ? o.key.toLowerCase() : o.key
              const hotkey = n === firstOpen && isLetter ? letter : undefined
              return (
                // 有熱鍵時引擎自己畫「a: 標籤」（字母用強調色）；沒熱鍵的照同一個樣子把「a: 」寫進標籤
                <Box key={`pane-opt-${n}-${o.key}`} flexDirection="row" marginRight={3}>
                  {picked === o.key ? <Text color={BRIGHT} bold>{'● '}</Text> : null}
                  <Button key={`pane-pick-${n}-${o.key}`} plain label={hotkey ? o.label : `${letter}: ${o.label}`} {...(hotkey ? { hotkey } : {})} {...(picked !== undefined && picked !== o.key ? { dimColor: true } : {})} onPress={() => pick($, pending.id, n, o.key, total)} />
                  {d.recommended === o.key && picked === undefined ? <Text color={YELLOW}>{' 建議'}</Text> : null}
                </Box>
              )
            })}
          </Box>
        </Box>,
      )
    })
  }
  const userNext = (last?.summary.items ?? []).filter(x => x.kind === 'user-next')
  for (const [i, item] of userNext.entries()) {
    need.push(<Text key={`you-${i}`}><Text color={YELLOW} bold>{'> '}</Text>{clip(item.text, width - 2)}</Text>)
  }
  sections.push({ title: `需要你 · ${left + userNext.length}`, color: YELLOW, rows: need, max: 8 })

  // 進行中：轉圈字形＋子代理／背景 描述，已跑時間靠右
  const now = await $.clock.now().catch(() => null)
  const runningRow = (key: string, label: string, since: number | undefined) => (
    <Box key={key} flexDirection="row">
      <Text color={BLUE}>{`${spin()} `}</Text>
      <Text>{clip(label, width - 10)}</Text>
      <Box flexGrow={1} />
      <Text color={DIM}>{now !== null && since !== undefined ? duration(now - since) : ''}</Text>
    </Box>
  )
  const agents = (await read($, agentsAtom)).filter(a => !(a.status in TASK_MARKS))
  sections.push({
    title: '進行中',
    color: DIM,
    rows: [
      ...agents.map(a => runningRow(`run-${a.id}`, `子代理 ${a.description}`, a.startedAt)),
      ...(await read($, backgroundAtom)).map((b, i) => runningRow(`bg-${i}`, `背景 ${b}`, undefined)),
    ],
    max: 5,
  })

  // 任務 完成數/總數：✓ 完成（灰）、▸ 下一項（亮）、○ 還沒做（灰）。
  // 來源：最近一張結論框的 tasks（使用者環境沒有任務工具）；沒有才用引擎的 TaskCreated／TaskCompleted
  const fromSummary = (last?.summary.tasks ?? []).map((t, i) => ({ id: `s${i}`, subject: t.text, done: t.done }))
  const tasks = fromSummary.length > 0 ? fromSummary : await read($, tasksAtom)
  const current = tasks.findIndex(t => !t.done)
  sections.push({
    title: `任務 ${tasks.filter(t => t.done).length}/${tasks.length}`,
    color: DIM,
    rows: tasks.map((t, i) => (
      <Text key={`task-${t.id}`}>
        <Text color={t.done ? GREEN : i === current ? undefined : DIM}>{t.done ? '✓ ' : i === current ? '▸ ' : '○ '}</Text>
        <Text color={i === current ? BRIGHT : DIM}>{clip(t.subject, width - 2)}</Text>
      </Text>
    )),
    max: 7,
  })

  // 證據：最近一次「驗證」摘要拆成一顆顆有框的小標籤（51 pass · tsc ✓ → [✓ 51 pass] [✓ tsc]）；不是這一輪的，標題註明幾輪前
  const evidence = await read($, evidenceAtom)
  const chips = evidence?.chips ?? []
  const proof = evidence?.proof ?? []
  sections.push({
    title: evidence && evidence.age > 0 ? `證據 · ${evidence.age} 輪前` : '證據',
    color: DIM,
    rows: chips.length === 0 ? [] : [
      ...[
        <Box key="chips" flexDirection="row" flexWrap="wrap">
          {chips.map((c, i) => {
            const chip = chipOf(c)
            return (
              <Box key={`chip-${i}`} borderStyle="round" borderColor={LINE} paddingX={1} marginRight={1}>
                <Text><Text color={chip.color}>{chip.glyph}</Text>{` ${clip(chip.text, 24)}`}</Text>
              </Box>
            )
          })}
        </Box>,
      ],
      // 細節：回覆「驗證」段的前 4 行（指令與結果），超過的看結論框的 › 驗證
      ...proof.slice(0, 4).map((l, i) => <Text key={`proof-${i}`} color={SOFT}>{clip(l, width)}</Text>),
      ...(proof.length > 4 ? [<Text key="proof-more" color={DIM}>{`…還有 ${proof.length - 4} 行，點結論框的 › 驗證看全部`}</Text>] : []),
    ],
    max: 6,
  })

  // 變更 · 未 commit：這個 session 改過的檔逐檔列（+綠 −紅）；其餘依最上層目錄收成一行「（不是這次改的）N 檔」
  const changes = await read($, changesAtom)
  const touched = new Set(await read($, touchedAtom))
  const mine = changes.filter(c => touched.has(c.abs))
  const others = new Map<string, number>()
  for (const c of changes.filter(c => !touched.has(c.abs))) {
    const top = c.path.includes('/') ? c.path.slice(0, c.path.indexOf('/')) : c.path
    others.set(top, (others.get(top) ?? 0) + 1)
  }
  const pathWidth = Math.max(12, width - 14)
  sections.push({
    title: '變更 · 未 commit',
    color: DIM,
    rows: [
      ...mine.map((c, i) => (
        <Box key={`chg-${i}`} flexDirection="row">
          <Box width={pathWidth}><Text color={SOFT}>{clip(c.path, pathWidth - 1)}</Text></Box>
          <Box width={6}><Text color={GREEN}>{`+${c.add}`}</Text></Box>
          <Text color={RED}>{`−${c.del}`}</Text>
        </Box>
      )),
      ...[...others].map(([top, n]) => (
        <Box key={`other-${top}`} flexDirection="row">
          <Box width={pathWidth}><Text color={DIM}>{clip(`${top}（不是這次改的）`, pathWidth - 1)}</Text></Box>
          <Text color={DIM}>{`${n} 檔`}</Text>
        </Box>
      )),
    ],
    max: 6,
  })

  const shown = sections.filter(sec => sec.rows.length > 0)
  if (shown.length === 0) return <Text color={DIM}>{'目前沒有需要你或進行中的事'}</Text>
  return (
    <Box flexDirection="column">
      {shown.map(sec => (
        <Box key={`sec-${sec.title}`} flexDirection="column" marginBottom={1}>
          <Text color={sec.color} bold={sec.color === YELLOW}>{sec.title}</Text>
          {sec.rows.length > sec.max ? [...sec.rows.slice(0, sec.max - 1), <Text key="more" color={DIM}>{`…還有 ${sec.rows.length - sec.max + 1} 項`}</Text>] : sec.rows}
        </Box>
      ))}
    </Box>
  )
}