ide-mod

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (e.props.hasSurvey) return next(e)
    const isLecture = await read($, lectureAtom)
    const gate = await read($, gateAtom)
    const isGateOpen = await read($, gateOpenAtom)
    const showGate = gate !== null && gate.verdict !== 'pass'
    if (!isLecture && !showGate) return next(e)
    const { Box, Text, Button } = $.ui.resolve(e)
    const width = Math.max(10, e.props.bodyColumns)
    await read($, tickAtom)
    const below = await next(e)
    const caption = isLecture ? await read($, captionAtom) : undefined
    const running = isLecture ? Object.values(await read($, agentsAtom)).filter(r => r.id !== MAIN && r.phase === 'running').length : 0

    return (
      <Box flexDirection="column" width={width}>
        {caption !== undefined && (
          <Box key="lecture" flexDirection="column" borderStyle="round" borderColor="claude" paddingX={1}>
            <Text bold color="warning" wrap="truncate-end">▶ {caption.text || '대기 중'}</Text>
            <Text dimColor wrap="truncate-end">
              {caption.prev !== '' ? `방금: ${caption.prev} · ` : ''}{caption.step}단계{caption.startedAt > 0 ? ` · ${formatElapsed(Date.now() - caption.startedAt)}` : ''}{running > 0 ? ` · 도우미 에이전트 ${running}명 작업 중` : ''}
            </Text>
          </Box>
        )}
        {showGate && gate !== null && (
          <Box key="gate" flexDirection="column">
            <Box flexDirection="row" columnGap={2} height={1} overflow="hidden">
              <Text color={gate.verdict === 'stop' ? 'error' : 'warning'} wrap="truncate-end">문체 게이트 · {gateSummary(gate)}</Text>
              <Button key="gate-open" plain hotkey="g" label={isGateOpen ? '접기' : '예문'} onPress={() => void update($, gateOpenAtom, v => !v)} />
              <Button key="gate-close" plain hotkey="d" label="닫기" onPress={() => void update($, gateAtom, () => null)} />
            </Box>
            {isGateOpen && gate.examples.map((x, i) => <Text key={`gate-ex:${i}`} dimColor wrap="truncate-end">  {x}</Text>)}
          </Box>
        )}
        {below}
      </Box>
    )
  })

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const { Box, Text } = $.ui.resolve(e)
    const width = Math.max(10, e.props.bodyColumns)
    const bodyRows = Math.max(4, e.props.scroll.bodyRows)
    const board = await drawBoard($, e, width, clamp(Math.round(bodyRows * 0.35), 2, 12))
    const explorerRows = Math.max(2, bodyRows - board.length - 1)
    const explorer = await drawExplorer($, e, width, explorerRows, board.length + 2)

    return (
      <Box flexDirection="column" width={width}>
        {board}
        <Text key="board-rule" dimColor>{'─'.repeat(width)}</Text>
        {explorer}
      </Box>
    )
  })

async function drawBoard($: EngineInterface, e: RenderInput<'Pane'>, width: number, maxRows: number): Promise<RenderElement[]> {
  const { Box, Text, Button } = $.ui.resolve(e)
  lastDrawnAt = Date.now()
  startTimers($)
  const all = await read($, agentsAtom)
  const isFolded = await read($, foldedAtom)
  const hideDone = await read($, hideDoneAtom)
  const isRecapOn = await read($, recapOnAtom)
  await read($, tickAtom)
  const now = Date.now()

  const subs = Object.values(all).filter(r => r.id !== MAIN)
  const running = subs.filter(r => r.phase === 'running').length
  const main = all[MAIN]
  const mainBrain = main === undefined ? '' : `${shortModel(main.model) || '…'}${main.effort ? ` · ${main.effort}` : ''}`
  const summary = `에이전트 ${main === undefined ? '대기' : `${PHASE_ICON[main.phase]} ${mainBrain}`} · 서브 ${running}개 작업 중 / ${subs.length - running}개 끝남`

  const sessionId = await $.session.id().catch(() => '')
  const header = (
    <Box key="board-header" flexDirection="row" columnGap={2} height={1} overflow="hidden">
      <Text bold wrap="truncate-end">{summary}</Text>
      {sessionId !== '' && <Text dimColor wrap="truncate-end">세션 {sessionId.slice(0, 8)}</Text>}
      <Button key="board-handoff" plain hotkey="i" label="핸드오프" onPress={() => void openHandoff($)} />
      <Button key="board-fold" plain hotkey="a" label={isFolded ? '보드 펼치기' : '보드 접기'} onPress={() => void update($, foldedAtom, v => !v)} />
      {!isFolded && <Button key="board-hide" plain hotkey="h" label={hideDone ? '끝난 것 보이기' : '끝난 것 숨기기'} onPress={() => void update($, hideDoneAtom, v => !v)} />}
      {!isFolded && <Button key="board-recap" plain hotkey="s" label={isRecapOn ? `요약 끄기(${RECAP_MODEL})` : '요약 켜기'} onPress={() => { recapFailures = 0; void update($, recapOnAtom, v => !v) }} />}
      {!isFolded && (
        <Button
          key="board-clear"
          plain
          hotkey="x"
          label="끝난 것 지우기"
          onPress={() => void update($, agentsAtom, list => Object.fromEntries(Object.entries(list).filter(([id, r]) => id === MAIN || r.phase === 'running')))}
        />
      )}
    </Box>
  )
  if (isFolded || maxRows <= 1) return [header]

  // 숨길 때도 돌고 있는 에이전트와 그 조상은 남겨 트리가 끊기지 않게 한다
  const visible = new Set<string>([MAIN])
  for (const row of subs) {
    if (hideDone && row.phase !== 'running') continue
    for (let at: AgentRow | undefined = row; at !== undefined && !visible.has(at.id); at = at.parentId === undefined ? undefined : all[at.parentId]) visible.add(at.id)
  }
  const children = new Map<string, AgentRow[]>()
  for (const row of subs) {
    if (!visible.has(row.id)) continue
    const parent = row.parentId !== undefined && visible.has(row.parentId) && all[row.parentId] !== undefined ? row.parentId : MAIN
    children.set(parent, [...(children.get(parent) ?? []), row])
  }
  for (const list of children.values()) list.sort((a, b) => a.startedAt - b.startedAt)
  const roleColor = new Map<string, Color>()
  const colorOf = (role: string) => {
    const base = role.split(' ')[0] ?? role
    if (!roleColor.has(base)) roleColor.set(base, ROLE_COLORS[roleColor.size % ROLE_COLORS.length] ?? 'suggestion')
    return roleColor.get(base) ?? 'suggestion'
  }

  const lines: RenderElement[] = []
  const draw = (row: AgentRow, lead: string, branch: string, depth: number) => {
    const elapsed = formatElapsed((row.endedAt ?? now) - row.startedAt)
    const brain = `${shortModel(row.model) || '모델 확인 중'}${row.effort ? ` · ${row.effort}` : ''}`
    const pad = `${lead}${depth === 0 ? '' : branch === '└─ ' ? '   ' : '│  '}  `
    // 지금 하는 일·요약은 노란색(돌고 있을 때만), 끝난 결과는 흐리게
    const isLive = row.phase === 'running'
    const [label, body] = isLive && row.recap !== '' ? ['요약', row.recap] : isLive && row.activity !== '' ? ['지금', row.activity] : row.recap !== '' ? ['결과', row.recap] : ['', row.activity]
    const live = isLive && body !== ''
    lines.push(
      <Text key={`agent:${row.id}`} wrap="truncate-end">
        <Text dimColor>{lead}{depth === 0 ? '' : branch}</Text>
        <Text color={PHASE_COLOR[row.phase]}>{PHASE_ICON[row.phase]} </Text>
        <Text bold color={row.id === MAIN ? 'claude' : colorOf(row.role)}>{row.id === MAIN ? '메인' : row.role}</Text>
        <Text>  {brain}</Text>
        <Text dimColor>  {PHASE_LABEL[row.phase]} {elapsed}{row.isBackground ? ' · 백그라운드' : ''}{row.toolCount > 0 ? ` · 도구 ${row.toolCount}` : ''}</Text>
        {/* 맡긴 일(메인은 사람이 입력한 프롬프트, 서브에이전트는 받은 작업 설명)은 초록색 */}
        <Text color="success">{row.task !== '' ? `  ${oneLine(row.task, 80)}` : ''}</Text>
      </Text>,
    )
    if (body !== '') {
      lines.push(
        <Text key={`agent-doing:${row.id}`} wrap="truncate-end">
          <Text dimColor>{pad}{label === '' ? '' : `${label} `}</Text>
          <Text color={live ? 'warning' : undefined} dimColor={!live}>{oneLine(body, Math.max(10, width))}</Text>
        </Text>,
      )
    }
    const kids = children.get(row.id) ?? []
    kids.forEach((kid, i) => {
      const nextLead = depth === 0 ? lead : `${lead}${branch === '└─ ' ? '   ' : '│  '}`
      draw(kid, nextLead, i === kids.length - 1 ? '└─ ' : '├─ ', depth + 1)
    })
  }
  if (main !== undefined) draw(main, '', '', 0)
  else (children.get(MAIN) ?? []).forEach((kid, i, kids) => draw(kid, '', i === kids.length - 1 ? '└─ ' : '├─ ', 1))

  const room = maxRows - 1
  if (lines.length === 0) return [header, <Text key="board-empty" dimColor>프롬프트를 보내면 에이전트가 여기 나타나요.</Text>].slice(0, maxRows)
  if (lines.length <= room) return [header, ...lines]
  return [header, ...lines.slice(0, room - 1), <Text key="board-more" dimColor>… {lines.length - room + 1}줄 더 (a로 접기, h로 끝난 것 숨기기)</Text>]
}

async function drawExplorer($: EngineInterface, e: RenderInput<'Pane'>, width: number, rows: number, topRows: number): Promise<RenderElement> {
  const { Box, Text, Button, Code, Markdown } = $.ui.resolve(e)
  const root = (await read($, rootAtom)) || (await $.session.cwd())
  const expanded = await read($, expandedAtom)
  const tabs = await read($, tabsAtom)
  const active = await read($, activeAtom)
  const offsets = await read($, offsetsAtom)
  const mode = await read($, modeAtom)
  const touched = new Set(await read($, touchedAtom))
  const isTreeHidden = await read($, treeHiddenAtom)
  const rev = await read($, revAtom)
  const leftMode = await read($, leftModeAtom)
  const requests = await read($, requestsAtom)
  const selectedN = await read($, selectedRequestAtom)
  const hwpView = await read($, hwpViewAtom)
  const isRequests = leftMode === 'requests'
  const isHandoff = leftMode === 'handoff'
  const isFiles = leftMode === 'files'
  const peers = isHandoff ? await read($, peersAtom) : []
  const handoff = isHandoff ? await currentHandoff($).catch(() => undefined) : undefined
  const sent = isHandoff ? await read($, handoffSentAtom) : null
  // 요청 기록 모드: 기본은 이번 세션 요청 전부를 오른쪽에 이어서 보여 주고, 왼쪽에서 고르면 그 요청 하나만 펼친다
  const requestView = await read($, requestViewAtom)
  const isAllRequests = isRequests && requestView === 'all' && requests.length > 0
  const selected = requests.find(r => r.n === selectedN) ?? requests[requests.length - 1]
  const rightKey = isHandoff ? 'handoff' : isRequests ? (isAllRequests ? 'requests:all' : selected === undefined ? '' : `request:${selected.n}`) : active
  const isHwp = isFiles && HWP.test(active)

  const isWide = width >= SPLIT_MIN_COLUMNS
  const showTree = isWide ? !isTreeHidden || rightKey === '' : !(isTreeHidden && rightKey !== '')
  const showFile = isWide ? true : !showTree
  const treeWidth = showTree && showFile ? clamp(Math.round(width * 0.3), 24, 44) : width
  const fileWidth = showTree && showFile ? width - treeWidth - 1 : width
  const mainRows = Math.max(1, rows - 1)
  const isMarkdown = isFiles && MARKDOWN.test(active)
  layout.topRows = topRows
  layout.leftMode = leftMode

  // ── 툴바 ──
  const toolbar = (
    <Box key="ide-toolbar" flexDirection="row" columnGap={2} height={1} overflow="hidden">
      <Button key="tree" plain hotkey="t" label={showTree && showFile ? '트리 접기' : '트리'} onPress={() => void update($, treeHiddenAtom, v => (rightKey === '' ? false : !v))} />
      <Button
        key="left-mode"
        plain
        hotkey="q"
        label={isFiles ? `요청 기록 ${requests.length}` : '파일 트리'}
        onPress={() =>
          void (async () => {
            await update($, leftModeAtom, m => (m === 'files' ? 'requests' : 'files'))
            await update($, treeHiddenAtom, () => false)
          })()
        }
      />
      <Button
        key="up"
        plain
        hotkey="u"
        label="상위 폴더"
        onPress={() =>
          void (async () => {
            await update($, expandedAtom, list => [...new Set([...list, root])])
            await update($, rootAtom, () => parentOf(root))
            await update($, treeOffsetAtom, () => 0)
          })()
        }
      />
      <Button
        key="reload"
        plain
        hotkey="r"
        label="새로고침"
        onPress={() => {
          if (isHandoff) {
            void loadPeers($).catch(() => undefined)
            return
          }
          fileCache.clear()
          hwpTextCache.clear()
          hwpPageCache.clear()
          hwpGridCache.clear()
          treeEpoch += 1
          void update($, revAtom, n => n + 1)
        }}
      />
      {isHwp && (
        <Button key="hwp-view" plain hotkey="v" label={hwpView === 'image' ? '문서 보기' : '그림 보기'} onPress={() => void update($, hwpViewAtom, v => (v === 'image' ? 'doc' : 'image'))} />
      )}
      {isHwp && (
        <Button key="hwp-open" plain hotkey="o" label="미리보기로 열기" onPress={() => void openHwpPreview($, active, hwpNow.path === active ? hwpNow.page : 0)} />
      )}
      {isHwp && (
        <Button key="hwp-prev" plain hotkey="b" label="◀ 앞쪽" onPress={() => void update($, hwpPagesAtom, all => ({ ...all, [active]: Math.max(0, (all[active] ?? 0) - 1) }))} />
      )}
      {isHwp && (
        <Button key="hwp-next" plain hotkey="n" label="뒤쪽 ▶" onPress={() => void update($, hwpPagesAtom, all => ({ ...all, [active]: (all[active] ?? 0) + 1 }))} />
      )}
      {isRequests && requests.length > 0 && (
        <Button key="request-all" plain hotkey="l" label={isAllRequests ? '하나만 보기' : '모두 보기'} onPress={() => void update($, requestViewAtom, v => (v === 'all' ? 'one' : 'all'))} />
      )}
      {isRequests && !isAllRequests && selected !== undefined && (
        <Button key="request-again" plain hotkey="p" label="입력창에 다시 넣기" onPress={() => void $.prompt.fill({ text: selected.text, mode: 'insert' })} />
      )}
      {isRequests && !isAllRequests && selected !== undefined && <Button key="request-copy" plain hotkey="c" label="복사" onPress={() => void $.ui.copy({ text: selected.text, surface: e.surface })} />}
      {isAllRequests && <Button key="request-copy-all" plain hotkey="c" label="전부 복사" onPress={() => void $.ui.copy({ text: requestsAsText(requests), surface: e.surface })} />}
      {isHandoff && handoff !== undefined && (
        <Button key="handoff-copy" plain hotkey="c" label="핸드오프 글 복사" onPress={() => void $.ui.copy({ text: handoff.text, surface: e.surface })} />
      )}
      {isHandoff && handoff !== undefined && <Button key="handoff-id" plain hotkey="y" label="세션 ID 복사" onPress={() => void $.ui.copy({ text: handoff.info.id, surface: e.surface })} />}
      {isHandoff && handoff !== undefined && (
        <Button
          key="handoff-resume"
          plain
          hotkey="e"
          label="이어서 열기 명령 복사"
          onPress={() => void $.ui.copy({ text: `cd ${shellQuote(handoff.info.root)} && claude --resume ${handoff.info.id} --fork-session`, surface: e.surface })}
        />
      )}
      {isFiles && active !== '' && isMarkdown && (
        <Button key="mode" plain hotkey="m" label={mode === 'rendered' ? '원문' : '렌더'} onPress={() => void update($, modeAtom, m => (m === 'rendered' ? 'code' : 'rendered'))} />
      )}
      {isFiles && active !== '' && <Button key="mention" plain hotkey="p" label="@프롬프트" onPress={() => void $.prompt.fill({ text: `@${active} `, mode: 'insert' })} />}
      {isFiles && active !== '' && <Button key="copy" plain hotkey="c" label="경로 복사" onPress={() => void $.ui.copy({ text: active, surface: e.surface })} />}
      {isFiles && active !== '' && <Button key="close" plain hotkey="w" label="탭 닫기" onPress={() => void closeTab($, active)} />}
    </Box>
  )

  // ── 트리 / 요청 기록 ──
  let treeColumn: RenderElement | false = false
  if (showTree && isHandoff) {
    const self = await read($, selfNameAtom)
    treeColumn = (
      <Box key="ide-peers" flexDirection="column" width={treeWidth} height={mainRows} overflow="hidden">
        <Text bold wrap="truncate-end">보낼 세션 {peers.length}개 · r 새로고침</Text>
        {self !== '' && <Text dimColor wrap="truncate-end">이 세션: {self}</Text>}
        {peers.length === 0 && <Text dimColor>열려 있는 다른 세션이 없어요. c로 핸드오프 글을 복사해 다른 에이전트에 붙여 넣으세요.</Text>}
        {peers.slice(0, Math.max(1, mainRows - 2)).map(peer => (
          <Box key={`peer-row:${peer.ref}`} flexDirection="row" height={1} overflow="hidden">
            <Button
              key={`peer:${peer.ref}`}
              plain
              dimColor={peer.status !== 'idle'}
              label={fit(`→ ${peer.name} · ${peer.status === 'busy' ? '작업 중' : peer.status === 'idle' ? '대기' : peer.status}`, treeWidth)}
              onPress={() => void sendHandoff($, peer)}
            />
          </Box>
        ))}
      </Box>
    )
  } else if (showTree && isRequests) {
    const treeView = Math.max(1, mainRows - 1)
    const newestFirst = [...requests].reverse()
    const requestOffset = clamp(await read($, requestOffsetAtom), 0, newestFirst.length - treeView)
    Object.assign(layout, { requestRows: newestFirst.length, treeView })
    const shown = newestFirst.slice(requestOffset, requestOffset + treeView)
    treeColumn = (
      <Box key="ide-requests" flexDirection="column" width={treeWidth} height={mainRows} overflow="hidden">
        <Text bold wrap="truncate-end">요청 기록 {requests.length}개{requests.length > treeView ? ` · ${requestOffset + 1}-${requestOffset + shown.length}` : ''}</Text>
        {shown.length === 0 && <Text dimColor>아직 보낸 요청이 없어요. 이 세션에서 보내는 요청이 여기 쌓여요.</Text>}
        {shown.map(r => {