slab-deck

  on('ui.render', { component: 'Pane', requestId: POP }, async ($, e) => {
    const v = await view($, e, e.props.bodyColumns)
    const p = await read($, stPopup)
    const { Text } = v.T
    return p === null ? <Text>Nothing to show.</Text> : Pop(v, p)
  })

export function Pop(v: View, p: Popup): RenderElement {
  const { Box, Text, Button, Code, Markdown } = v.T
  const close = <Button key="pop-x" plain hotkey="x" label="close" role="dismiss" dimColor onPress={() => v.act.closePop()} />
  if (p.kind === 'help')
    return (
      <Box flexDirection="column" width={v.width} backgroundColor={C.BLOCK} paddingX={2}>
        <Markdown
          text={[
            '| where | keys |',
            '| --- | --- |',
            '| band | `^X ⇥` focus · `1`–`9` tmux window · `d` deck · `n` new window · `s` split · `h` keys |',
            '| deck | `1`–`7` section · `r` refresh · `⏎` on a row opens it |',
            '| tmux | `⏎` on a pane peeks · `g` go there · `p` pop out · `n` `v` `b` window / split · `c` claude window · `z` zoom me |',
            '| popup | `esc` or `x` dismiss |',
            '',
            '`/deck [section]` · `/deck-band full|compact|off` · hover a statusline fact for its card',
          ].join('\n')}
        />
        {close}
      </Box>
    )
  if (p.kind === 'tool') {
    const t = v.tools.find(x => x.id === p.id)
    if (!t) return <Box flexDirection="column"><Text color={C.FAINT}>that call is no longer kept</Text>{close}</Box>
    const isRunning = t.durationMs === null
    return (
      <Box flexDirection="column" width={v.width}>
        {Header(
          v,
          ['▸', isRunning ? C.LIVE : C.DIM],
          toolName(t.tool),
          t.summary,
          isRunning ? <Text color={C.LIVE}>▪▪▪</Text> : (
            <Text>
              <Text color={t.isError ? C.FAIL : C.OK}>{t.isError ? '✗' : '✓'}</Text>
              <Text color={C.DIM}>{` ${took(t.durationMs)}${t.agentId ? ` · agent ${t.agentId.slice(0, 8)}` : ''}`}</Text>
            </Text>
          ),
        )}
        <Box backgroundColor={C.BLOCK} paddingX={2} width={v.width}>
          <Code source={t.detail} language="json" />
        </Box>
        <Box flexDirection="row" gap={2} backgroundColor={C.BLOCK} paddingX={2} width={v.width}>
          <Button key="pop-copy" plain hotkey="c" label="copy input" onPress={() => v.act.copy(t.detail)} />
          {close}
        </Box>
      </Box>
    )
  }
  if (p.kind === 'turn') {
    const t = v.turns.find(x => x.id === p.id)
    if (!t) return <Box flexDirection="column"><Text color={C.FAINT}>that turn is no longer kept</Text>{close}</Box>
    const own = v.tools.filter(x => x.startedAt >= t.startedAt && x.startedAt <= t.startedAt + (t.durationMs ?? 0))
    const w = { ...v, width: v.width - 4 }
    return (
      <Box flexDirection="column" width={v.width}>
        {Header(v, t.isAborted ? ['✗', C.FAIL] : ['▸', C.DIM], 'turn', `${t.steps} steps · ${own.length} calls`, <Text color={C.DIM}>{dur(t.durationMs)}</Text>)}
        <Box flexDirection="column" backgroundColor={C.BLOCK} paddingX={2} width={v.width}>
          {Row(w, 'pt-in', 'input', tokens(t.inTokens))}
          {Row(w, 'pt-out', 'output', tokens(t.outTokens))}
          {Row(w, 'pt-cr', 'cache read', tokens(t.cacheRead))}
          {own.slice(-10).map(x => ToolRow(w, x))}
          {close}
        </Box>
      </Box>
    )
  }
  return (
    <Box flexDirection="column" width={v.width}>
      {Header(v, ['↳', C.REF], 'pane', p.id, <Text color={C.DIM}>{`${p.lines.length} rows`}</Text>)}
      <Box backgroundColor={C.BLOCK} paddingX={2} width={v.width}>
        <Code source={p.lines.length > 0 ? p.lines.join('\n') : '—'} wrap="truncate-end" />
      </Box>
      <Box flexDirection="row" gap={2} backgroundColor={C.BLOCK} paddingX={2} width={v.width}>
        {p.id !== v.tmux?.self && <Button key="pp-go" plain hotkey="g" label="go there" onPress={() => v.act.goPane(p.id)} />}
        <Button key="pp-split" plain hotkey="v" label="split beside it" dimColor onPress={() => v.act.split('h', p.id)} />
        <Button key="pp-r" plain hotkey="r" label="refresh" dimColor onPress={() => v.act.pop({ kind: 'pane', id: p.id, lines: [] })} />
        {close}
      </Box>
    </Box>
  )
}

function Header(v: View, glyph: [string, string], name: string, arg: string, right: RenderElement | null): RenderElement {
  const { Box, Text } = v.T
  const nm = name.length > 10 ? name.slice(0, 9) + '…' : name.padEnd(10, ' ')
  return (
    <Box flexDirection="row" justifyContent="space-between" backgroundColor={C.PLUS} width={v.width} paddingX={2}>
      <Text>
        <Text color={glyph[1]}>{glyph[0]} </Text>
        <Text color={C.DIM}>{nm}</Text>
        <Text color={C.INK}>{clip(arg, Math.max(8, v.width - 30))}</Text>
      </Text>
      {right}
    </Box>
  )
}

function Row(v: View, key: string, label: string, value: string, tone: string = C.INK): RenderElement {
  const { Box, Text } = v.T
  return (
    <Box key={key} flexDirection="row" justifyContent="space-between" width={v.width}>
      <Text color={C.DIM}>{label}</Text>
      <Text color={tone}>{value}</Text>
    </Box>
  )
}

function ToolRow(v: View, t: ToolRec): RenderElement {
  const { Box, Text, Button } = v.T
  const isRunning = t.durationMs === null
  const outcome = isRunning ? '▪▪▪' : `${t.isError ? '✗' : '✓'} ${took(t.durationMs)}`
  const name = toolName(t.tool)
  const nm = name.length > 10 ? name.slice(0, 9) + '…' : name.padEnd(10, ' ')
  return (
    <Box key={`tr-${t.id}`} flexDirection="row" justifyContent="space-between" width={v.width}>
      <Box flexDirection="row">
        <Text color={isRunning ? C.LIVE : C.DIM}>▸ </Text>
        <Button key={`tool-${t.id}`} plain dimColor label={`${nm}${clip(t.summary, Math.max(8, v.width - 24))}`} onPress={() => v.act.pop({ kind: 'tool', id: t.id })} />
      </Box>
      <Text>
        <Text color={isRunning ? C.LIVE : t.isError ? C.FAIL : C.OK}>{outcome.slice(0, isRunning ? 3 : 1)}</Text>
        {!isRunning && <Text color={C.DIM}>{outcome.slice(1)}</Text>}
      </Text>
    </Box>
  )
}