plain-view

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (e.props.hasSurvey) return next(e)
    const t = await read($, turn)
    if (!isOn && !t?.isDemo) return next(e)
    // A demo's card shows no agents.
    const team = t?.isDemo ? [] : await read($, agents)
    const view = { mode: requestMode, isOpen: await read($, unfolded) }
    const card = cardOf(t, await read($, items), await $.clock.now(), lang, agentText === 'card', team, view)
    if (!card) return next(e)
    const n = await read($, tick)
    const isWorking = (t !== null && t.end === undefined) || runningOf(team).length > 0
    // Rasters only on the terminal; another surface's table draws one as an empty box.
    const all = $.ui.resolve(e)
    const ui = { Box: all.Box, Text: all.Text, Button: all.Button, Raster: e.surface === 'terminal' ? (all as Elements['terminal']).Raster : undefined }
    const mine = drawCard(ui, card, {
      stops: animate ? stopsOf(palette, theme) : null,
      tick: animate && isWorking ? n : null,
      columns: e.props.bodyColumns || e.viewport?.columns || 80,
      icons: style,
      answerLabel: WORDS[lang].answer,
      ...(hasWatch ? { onWatch: () => quietly($.command.run({ command: WATCH, args: '' })) } : {}),
      request: { more: WORDS[lang].moreLines, show: WORDS[lang].showRequest, fold: WORDS[lang].foldRequest },
      onRequest: () => quietly(update($, unfolded, v => !v)),
    })
    const { Box } = $.ui.resolve(e)
    const theirs = await next(e)
    return theirs ? (
      <Box flexDirection="column">
        {mine}
        {theirs}
      </Box>
    ) : (
      mine
    )
  })

export function drawCard(ui: Ui, card: Card, o: DrawOptions) {
  const { Box, Text, Raster, Button } = ui
  const inner = Math.max(30, o.columns - 4)
  const L = layoutOf(inner)
  const gradient = o.stops !== null && Raster !== undefined

  const bar = (key: string, n: number, frac: number, mode: BarMode) => {
    if (gradient) return <Raster key={key} columns={n} rows={1} cells={rasterCells(barCells(n, frac, mode, o.stops!, o.tick))} />
    if (mode === 'comet') return <Text key={key} color="claude">{'░'.repeat(n)}</Text>
    const f = Math.max(0, Math.min(n, Math.round(n * frac)))
    return (
      <Text key={key}>
        <Text color={mode === 'ok' ? 'success' : mode === 'off' ? 'inactive' : 'claude'}>{'█'.repeat(f)}</Text>
        <Text dimColor>{'░'.repeat(n - f)}</Text>
      </Text>
    )
  }

  // The figures take the color of the bar's filled end.
  const tone = (state: string) =>
    o.stops ? hex(state === 'done' ? o.stops.k2 : state === 'stopped' ? o.stops.off : o.stops.g2) : state === 'done' ? 'success' : state === 'stopped' ? 'inactive' : 'claude'

  const title = (text: string, room: number, pal: 'work' | 'ok' | 'off') => {
    const shown = clip(text, Math.max(8, room))
    if (!o.stops || pal === 'off') return <Text bold dimColor={pal === 'off'} color={pal === 'off' ? undefined : pal === 'ok' ? 'success' : 'claude'}>{shown}</Text>
    const s = o.stops
    const last = Math.max(1, shown.length - 1)
    return (
      <Text bold>
        {[...shown].map((ch, i) => (
          <Text key={`t${i}`} color={hex(pal === 'ok' ? mix(s.k1, s.k2, i / last) : titleColor(s, i / last))}>{ch}</Text>
        ))}
      </Text>
    )
  }

  // One row for the main loop's agents: `◇ 1 agente rodando · code-review · 3m 12s   /watch`.
  const agentsLine = (a: AgentsRow) => {
    const onWatch = o.onWatch
    const watch = onWatch !== undefined && Button !== undefined
    const room = inner - a.text.length - (a.time ? a.time.length + 3 : 0) - (watch ? 9 : 0) - 6
    return (
      <Box key="agents" flexDirection="row">
        <Text>
          <Text color={a.isRunning ? 'claude' : 'success'}>◇ </Text>
          <Text bold={a.isRunning}>{a.text}</Text>
          <Text dimColor>{` · ${clip(a.label, Math.max(8, room))}${a.time ? ` · ${a.time}` : ''}`}</Text>
        </Text>
        {watch ? <Text>   </Text> : null}
        {onWatch && Button ? <Button key="watch" plain dimColor label="/watch" onPress={() => onWatch()} /> : null}
      </Box>
    )
  }

  // A request of several lines: `+5 linhas` after the title, the button that unfolds the request
  // (only when something is left out), and its lines under the title.
  const request: RequestView | undefined = card.request
  const words = o.request
  const titled = (text: string, room: number, pal: 'work' | 'ok' | 'off', badge?: { text: string; state: 'done' | 'stopped' }) => {
    const label = (request?.isOpen ? words?.fold : words?.show) ?? ''
    const onRequest = o.onRequest
    // A narrow card keeps the title: the button goes first, then the count.
    let more = request && request.more > 0 && words ? `  ${words.more(request.more)}` : ''
    let hasButton =
      request !== undefined && words !== undefined && onRequest !== undefined && Button !== undefined && (request.canOpen || (request.isJoined && text.length > room - more.length))
    if (hasButton && room - more.length - label.length - 6 < MIN_TITLE) hasButton = false
    if (room - more.length < MIN_TITLE) more = ''
    return (
      <Box flexDirection="row">
        <Text>
          {badge ? <Text bold inverse color={badge.state === 'done' ? 'success' : 'inactive'}>{` ${badge.text} `}</Text> : <Text color="claude">✦</Text>}
          <Text> </Text>
          {title(text, room - more.length - (hasButton ? label.length + 6 : 0), pal)}
          {more ? <Text dimColor>{more}</Text> : null}
        </Text>
        {hasButton ? <Text>  </Text> : null}
        {hasButton && onRequest ? <Button key="request" plain dimColor label={label} onPress={() => onRequest()} /> : null}
      </Box>
    )
  }
  const requestRows = () => request?.rest.map((line, i) => <Text key={`request${i}`} dimColor={line.startsWith('⟨')}>{`  ${clip(line, inner - 2)}`}</Text>)

  const titleRow = (text: string, time: string) => (
    <Box flexDirection="column">
      <Box flexDirection="row" justifyContent="space-between">
        {titled(text, inner - 10, 'work')}
        <Text dimColor>{time}</Text>
      </Box>
      {requestRows()}
    </Box>
  )

  if (card.kind === 'phrase') {
    return (
      <Box key="plain-view" flexDirection="column" borderStyle="round" borderColor="claude" paddingX={1}>
        {titleRow(card.title, card.time)}
        <Box flexDirection="row" gap={2}>
          <Text>
            <Text color="claude">{`${glyph(o.icons, ICONS.now)} `}</Text>
            <Text bold>{clip(card.doing, Math.max(10, inner - L.item - 6))}</Text>
          </Text>
          {bar('doing', L.item, 0, 'comet')}
        </Box>
        {card.agents !== undefined && agentsLine(card.agents)}
      </Box>
    )
  }

  if (card.kind === 'waiting') {
    return (
      <Box key="plain-view" flexDirection="column" borderStyle="round" borderColor="claude" paddingX={1}>
        {titleRow(card.title, card.time)}
        <Box flexDirection="row" gap={2}>
          <Text>
            <Text color="claude">◐ </Text>
            <Text bold>{card.text}</Text>
          </Text>
          {bar('waiting', L.item, 0, 'comet')}
        </Box>
        {agentsLine(card.agents)}
      </Box>
    )
  }

  // A badge, then the title in the end's colors.
  const badged = (badge: string, state: 'done' | 'stopped', text: string) =>
    titled(text, inner - badge.length - 18, state === 'done' ? 'ok' : 'off', { text: badge, state })

  const answerLine = (answer: string | undefined) =>
    answer !== undefined && (
      <Text>
        <Text dimColor>{`  ${o.answerLabel ?? ''}`}</Text>
        <Text>{answer}</Text>
      </Text>
    )

  if (card.kind === 'summary') {
    return (
      <Box key="plain-view" flexDirection="column" borderStyle="round" borderColor={card.state === 'done' ? 'success' : 'inactive'} paddingX={1}>
        <Box flexDirection="row" justifyContent="space-between">
          {badged(card.badge, card.state, card.title)}
          <Text dimColor>{card.time}</Text>
        </Box>
        {requestRows()}
        {card.detail !== undefined && <Text dimColor>{`  ${card.detail}`}</Text>}
        {answerLine(card.answer)}
      </Box>
    )
  }

  const pal = card.state === 'done' ? 'ok' : card.state === 'stopped' ? 'off' : 'work'
  const border = card.state === 'done' ? 'success' : card.state === 'stopped' ? 'inactive' : 'claude'
  const head = card.badge && card.state !== 'work' ? badged(card.badge, card.state, card.title) : titled(card.title, inner - 12, pal)

  const row = (r: Row, i: number) => {
    const icon = r.kind === 'done' ? ICONS.done : r.kind === 'now' ? ICONS.now : r.kind === 'halted' ? ICONS.halted : ICONS.wait
    const iconColor = r.kind === 'done' ? 'success' : r.kind === 'now' ? 'claude' : undefined
    const mode: BarMode = r.kind === 'done' ? 'ok' : r.kind === 'now' ? 'work' : 'off'
    const isNow = r.kind === 'now'
    return (

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const all = $.ui.resolve(e)
    const { Box, Text, Button } = all
    const Raster = e.surface === 'terminal' ? (all as Elements['terminal']).Raster : undefined
    const w = WORDS[lang]
    const p = w.pane
    const s = await settingsNow($)
    const shown = tabOf(await read($, tab))
    const said = await read($, flash)
    const columns = Math.max(30, (e.props.bodyColumns || e.viewport?.columns || 80) - 2)
    const isDark = !/light/i.test(String(theme ?? ''))
    const nameOf = (v: SettingValue) => (v === true ? p.yes : v === false ? p.no : String(v))
    const whatOf = (key: SettingKey, v: SettingValue) =>
      key === 'palette' ? (PALETTES.find(x => x.id === v)?.hint[lang] ?? '') : (p.values[key][String(v)] ?? '')

    const option = (key: SettingKey, cur: Setting) => (
      <Box key={`opt:${key}`} flexDirection="column">
        <Text bold>{p.labels[key]}</Text>
        {SETTINGS[key].values.map(v => {
          const isCur = v === cur.value
          const label = `${isCur ? '●' : '○'} ${nameOf(v)}`
          const pal = key === 'palette' ? PALETTES.find(x => x.id === v) : undefined
          return (
            <Box key={`val:${key}:${String(v)}`} flexDirection="row">
              <Box width={12}>
                {isCur || cur.isLocked ? (
                  <Text bold={isCur} color={cur.isLocked ? 'inactive' : 'claude'}>{label}</Text>
                ) : (
                  <Button key={`set:${key}:${String(v)}`} plain label={label} onPress={() => quietly(choose($, key, v))} />
                )}
              </Box>
              {pal && Raster ? <Raster key={`swatch:${pal.id}`} columns={6} rows={1} cells={rasterCells(barCells(6, 1, 'work', isDark ? pal.dark : pal.light, null))} /> : null}
              {pal && Raster ? <Text> </Text> : null}
              <Text dimColor={!cur.isLocked} color={cur.isLocked ? 'inactive' : undefined}>{whatOf(key, v)}</Text>
            </Box>
          )
        })}
        {cur.isLocked && <Text color="inactive">{p.locked}</Text>}
        {cur.isLocked && <Text dimColor>{p.lockedWhy}</Text>}
      </Box>
    )

    // The card tab's preview: the demo's second step, in the palette and animation the pane shows.
    const now = await $.clock.now()
    const preview = () => {
      const demo = demoOf(1, now - 12_000, lang)
      const sample = cardOf(demo.turn, demo.items, now, lang)
      if (!sample) return null
      const stops = s.animation.value === true ? stopsOf(paletteOf(s.palette.value), theme) : null
      return (
        <Box key="preview" flexDirection="column">
          <Text bold>{p.preview}</Text>
          {drawCard({ Box, Text, Raster }, sample, { stops, tick: null, columns, icons: style })}
        </Box>
      )
    }

    const line =
      said === null ? null : said.kind === 'saved' ? (
        <Text color="success">{p.saved(p.labels[said.key as SettingKey] ?? said.key, nameOf(said.value))}</Text>
      ) : said.kind === 'denied' ? (
        <Text color="warning">{p.denied(said.why)}</Text>
      ) : said.kind === 'reset' ? (
        <Text color="success">{p.reset}</Text>
      ) : (
        <Text dimColor>{p.resetNone}</Text>
      )

    return (
      <Box flexDirection="column" paddingX={1} gap={1}>
        <Box flexDirection="column">
          <Text color="claude" bold>{p.heading}</Text>
          <Text dimColor>{p.hint}</Text>
          {line}
        </Box>

        <Box flexDirection="row" flexWrap="wrap">
          {p.tabs.map((name, i) => (
            <Box key={`tabs:${i}`} flexDirection="row">
              {i > 0 && <Text dimColor> · </Text>}
              {i === shown ? (
                <Text color="claude" bold>{`▸ ${name}`}</Text>
              ) : (
                <Button key={`tab:${i}`} plain label={name} onPress={() => quietly(update($, tab, () => i).then(() => update($, flash, () => null)))} />
              )}
            </Box>
          ))}
        </Box>

        {TABS[shown]!.map(key => option(key, s[key]))}
        {shown === 1 && preview()}

        <Box flexDirection="column" alignItems="flex-start">
          {verbRow({ Box, Text, Button }, COMMAND, PANE_VERBS, v => quietly(pressVerb($, v)))}
          <Box flexDirection="row" gap={1}>
            <Button key="reset" label={p.defaults} onPress={() => quietly(askReset($))} />
            <Button key="close" role="dismiss" label={p.close} onPress={() => quietly($.ui.close({ id: PANE }))} />
          </Box>
        </Box>
      </Box>
    )
  })