glimt

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const ui = $.ui.resolve(e)
    const { Box, Text } = ui
    const request = await read($, focus)
    const approved = await read($, plan)
    const list = await read($, steps)
    const team = await read($, agents)
    const open = await read($, expanded)
    // Esc hands the keyboard back to the prompt and raises nothing else:
    // drawn without the keyboard, a form shows no more, and the clock's next
    // frame closes it (a drawing may not write); drawn with the keyboard
    // again before that frame, it stays. Only the terminal holds the
    // keyboard: another surface drawing the pane says nothing about it.
    if (e.surface === 'terminal') {
      if (e.props.isFocused) {
        runtime.hasLostKeyboard = false
      } else if (runtime.isFocused) {
        runtime.hasLostKeyboard = true
      }
      runtime.isFocused = e.props.isFocused
    }
    const form = e.props.isFocused ? await read($, composer) : null
    // The rows hold the keyboard while the pane does and no form of glimt's
    // is open; the cursor's row, the keys and h follow it. Claude Code can't
    // say reliably where its focus ring is, so typing in the message field
    // inside an agent or a session leaves the row inverse, as before 0.6.2.
    const holdsRows = e.props.isFocused && form === null
    const view: View = {
      ui,
      Input: 'Input' in ui ? ui.Input : undefined,
      columns: Math.max(12, e.props.bodyColumns),
      at: await read($, now),
      isTurnRunning: isTurnRunning(request),
      cursor: await read($, cursor),
      isFocused: holdsRows,
      toggle: key => void toggle($, key),
      colors,
    }

    // This session at the top; the other sessions on the machine, and what
    // their glimts share, at the bottom.
    const listed = named(await read($, sessions), await read($, titles))
    const selfId = await read($, self)
    const others = listed === null ? null : sortSessions(listed.filter(s => s.sessionId !== selfId))
    const sharedBy = await read($, shared)
    const pointed = others?.find(s => view.cursor === `toggle-session-${s.sessionId}`)
    const pointedAgent = team.find(a => view.cursor === `toggle-agent-${a.id}`)
    const isOnSelf = view.cursor === 'toggle-self'
    const renameTarget = isOnSelf ? selfId : pointed !== undefined && sharedBy[pointed.sessionId] !== undefined ? pointed.sessionId : null
    const keys = holdsRows
      ? keySection(
          view,
          {
            canInto: /^toggle-(agent|session|remote)-/.test(view.cursor ?? ''),
            canClear: isOnSelf,
            canRename: renameTarget !== null,
            canReach: pointed !== undefined && isReachable(pointed),
            canStop: pointedAgent !== undefined && isStoppable(pointedAgent),
          },
          {
            into: () => void goInto($),
            spawn: () => void openComposer($, { kind: 'spawn', where: 'here' }),
            help: () => void update($, help, () => true),
            rename: () => void (renameTarget === null ? undefined : openComposer($, { kind: 'rename', sessionId: renameTarget })),
            clear: () => void update($, clearing, () => true),
            attach: () => void attachSession($),
            stop: () => void askStop($),
          },
        )
      : undefined

    const folders = sharedFolders(listed ?? [])
    const selfSession = listed?.find(s => s.sessionId === selfId)
    const header = selfSection(view, {
      session: selfSession,
      isOpen: open.includes('self'),
      isClearing: await read($, clearing),
      answer: isYes => void answerClear($, isYes),
      mode: await read($, mode),
      limits: await read($, limits),
      isSameFolder: selfSession !== undefined && folders.has(selfSession.cwd),
      engine: await read($, engine),
    })
    const formRows = form === null ? 0 : FORM_ROWS
    const formNode =
      form === null
        ? undefined
        : composerSection(view, form, listed ?? [], {
            spawn: (task, where) => void spawnAgent($, task, where),
            rename: (sessionId, name) => void renameSession($, sessionId, name),
            cancel: () => void update($, composer, () => null),
          })

    // The sections stack from the top, each in a place that never moves: this
    // session, any open form, what is in progress, the plan, the agents, the
    // other sessions, and the keys while the pane holds the keyboard. Docked,
    // the pane's height is a budget: the agents and the sessions take up to
    // their shares and the plan, the longest list, gets what is left and
    // folds to fit. Inline, nothing is cut.
    const rows = e.props.placement === 'dock' ? e.props.scroll.bodyRows : undefined

    // i: the key list takes the pane until i again, or a key it lists.
    if (await read($, help)) {
      runtime.toggles = []
      const leave = async (then: () => Promise<unknown>) => {
        await update($, help, () => false)
        await then()
      }
      return (
        <Box flexDirection="column" width={view.columns}>
          {helpSection(view, {
            spawn: () => void leave(() => openComposer($, { kind: 'spawn', where: 'here' })),
            session: () => void leave(() => openComposer($, { kind: 'spawn', where: 'session' })),
            // glimt's own close passes no ui.close hook of its own; refused,
            // the pane stays as it was, the key list too.
            close: () =>
              void $.ui.close({ id: PANE }).then(
                () => forgetPane($),
                () => undefined,
              ),
            back: () => void update($, help, () => false),
          })}
        </Box>
      )
    }

    // Gone into an agent or a session, it takes the pane: the arrows walk a
    // session's agents, and h steps back out to where it was.
    const into = (await read($, opened)).at(-1)
    const remoteBy = await read($, remote)
    const tasks = await read($, remoteTasks)
    if (into !== undefined) {
      const sessionId = into.kind === 'agent' ? undefined : into.sessionId
      // h goes back to the session the pane went into first, else to the overview.
      const below = (await read($, opened)).at(-2)
      const parent = below?.kind === 'session' ? listed?.find(s => s.sessionId === below.sessionId) : undefined
      const drill = drillSection(view, {
        into,
        backTo: below === undefined ? 'Overview' : (parent?.name ?? 'back'),
        agent: into.kind === 'agent' ? team.find(a => a.id === into.id) : undefined,
        session: sessionId === undefined ? undefined : listed?.find(s => s.sessionId === sessionId),
        phase: into.kind === 'session' ? (await read($, phases))[into.sessionId] : undefined,
        mode: sessionId === undefined ? undefined : sharedBy[sessionId]?.mode,
        remoteAgent: into.kind === 'remote' ? remoteBy[into.sessionId]?.agents.find(a => a.id === into.agentId) : undefined,
        remote: sessionId === undefined ? undefined : remoteBy[sessionId],
        shared: sessionId === undefined ? [] : (sharedBy[sessionId]?.agents ?? []),
        isSharing: sessionId !== undefined && sharedBy[sessionId] !== undefined,
        tasks,
        open,
        feed: await read($, feed),
        asked: await read($, stopping),
        isFocused: holdsRows,
        room: rows === undefined ? undefined : rows - formRows,
        act: {
          back: () => void goBack($),
          into: () => void goInto($),
          message: () => void $.ui.focus({ requestId: PANE, key: 'message-field' }).catch(() => undefined),
          send: (to, name, text) => void sendFromField($, to, name, text),
          rename: () => void (into.kind === 'session' ? openComposer($, { kind: 'rename', sessionId: into.sessionId }) : undefined),
          attach: () => void attachSession($),

export function helpSection(view: View, act: HelpActions) {
  const { Box, Button, Text } = view.ui
  const line = (keys: string, what: string) => (
    <Text>
      <Text color="claude">{keys}</Text>
      {fit(`: ${what}`, view.columns - cells(keys))}
    </Text>
  )

  return (
    <Box key="help" flexDirection="column">
      <Text color={view.colors.quiet}>{fit('glimt · github.com/mmedum/glimt', view.columns)}</Text>
      <Box key="help-keys" flexDirection="column" marginTop={1}>
        {KEY_LIST.map(([keys, what]) => line(keys, what))}
        <Button key="help-spawn" plain hotkey="n" label="new agent here" onPress={act.spawn} />
        <Button key="help-session" plain hotkey="s" label="new background session" onPress={act.session} />
        <Button key="help-close" plain hotkey="q" label="close the pane" onPress={act.close} />
      </Box>
      <Box key="keys" marginTop={1}>
        {keyButton(view, 'help', 'i', 'back', act.back)}
      </Box>
    </Box>
  )
}

export function keyButton({ ui: { Button } }: View, name: string, hotkey: string, label: string, press: () => void) {
  return <Button key={`key-${name}`} plain dimColor hotkey={hotkey} label={label} onPress={press} />
}

export function planSection(view: View, approved: Plan | null, list: Step[], lines: PlanLine[], hasTaskList: boolean | null) {
  const { Box, Button, Text } = view.ui
  const { quiet } = view.colors
  const done = list.filter(step => step.status === 'completed').length

  return (
    <Box flexDirection="column">
      {heading(view, 'plan-heading', approved === null ? 'Plan' : `Plan · ${approved.title}`, list.length === 0 ? '' : `${done}/${list.length}`)}
      {list.length === 0 && (
        <Box key="no-steps">
          <Text color={quiet}>{hasTaskList === false ? 'No task list in this session.' : 'No steps yet.'}</Text>
        </Box>
      )}
      {lines.map(line => {
        if (line.kind === 'done') {
          return (
            <Box key="folded">
              <Text color={quiet}>
                {'  '}
                <Text color={STATUS_COLOR.completed}>{STEP_MARK.completed}</Text> {line.count} done
              </Text>
            </Box>
          )
        }
        if (line.kind === 'more') {
          return (
            <Box key="more">
              <Text color={quiet}>
                {'  '}
                <Text color={view.colors.mark}>{STEP_MARK.pending}</Text> {line.count} more
              </Text>
            </Box>
          )
        }

        const { step, detail, depth } = line
        const indent = ' '.repeat(depth * INDENT)
        const isOpen = detail.length > 0
        const { mark, color } = stepMark(view, step.status)
        const cursor = cursorStyle(view, `toggle-${step.id}`)

        return (
          <Box key={`step-${step.id}`} flexDirection="column">
            <Box flexDirection="row" {...cursor.row}>
              {indent !== '' && <Text>{indent}</Text>}
              <Button key={`toggle-${step.id}`} plain label={isOpen ? '▾' : '▸'} onPress={() => view.toggle(step.id)} />
              <Text {...(step.status === 'completed' ? { color: quiet } : {})} bold={step.status === 'in_progress'}>
                {' '}
                <Text color={color}>{mark}</Text> <Text {...cursor.name}>{fit(step.subject, view.columns - 4 - indent.length)}</Text>
              </Text>
            </Box>
            {isOpen && (
              <Box key={`detail-${step.id}`} flexDirection="column" paddingLeft={4 + indent.length}>
                {detail.map(text => (
                  <Text color={quiet}>{text}</Text>
                ))}
              </Box>
            )}
          </Box>
        )
      })}
    </Box>
  )
}

export function heading({ ui: { Box, Text }, columns, colors }: View, key: string, label: string, count: string) {
  const shown = fit(label, count === '' ? columns : Math.max(1, columns - cells(count) - 2))

  return (
    <Box key={key} flexDirection="row">
      <Text bold {...(colors.heading === undefined ? {} : { color: colors.heading })}>
        {shown}
      </Text>
      {count !== '' && <Text color={colors.quiet}>{fit(`  ${count}`, columns - cells(shown))}</Text>}
    </Box>
  )
}