glanceflow

  on('ui.render', { component: 'Pane', requestId: HISTORY_PANE }, async ($, e) => {
    const table = $.ui.resolve(e)
    const { Box, Text, Button } = table
    const kit = kitOf(table, e.surface)
    const vector = kit.isVector
    const view = await read($, historyAtom)
    const columns = Math.max(30, e.props.bodyColumns)
    const today = dayKey(await now($))
    // The app draws a panel's own close control; the terminal's panel needs the button.
    const close = vector ? null : <Button key="close" label="Close" role="dismiss" onPress={() => $.ui.close({ id: HISTORY_PANE })} />
    if (view === null) {
      return (
        <Box flexDirection="column">
          <Text dimColor>Type /glanceflow history to see today's tasks.</Text>
          {close}
        </Box>
      )
    }

    // Day picker: earlier, a drop-down of saved days, later, and today.
    const dayLabel = (day: string) => (vector ? (day === today ? `Today · ${longDay(day)}` : longDay(day)) : day === today ? `Today, ${day}` : day)
    const picker = (
      <Box key="picker" flexDirection="column" marginBottom={1}>
        {/* The app titles the panel "History · <folder>"; the terminal's panel shows the day here too. */}
        {!vector && (
          <Text key="heading" bold wrap="truncate-end">
            {`${projectName(view.project)} · ${longDay(view.day)}`}
          </Text>
        )}
        <Box key="controls" flexDirection="row" gap={1} alignItems={vector ? 'center' : undefined}>
          <Button key="earlier" label={vector ? 'Previous day' : '◀ Earlier'} onPress={() => showHistory($, shiftDay(view.day, -1), false)} />
          {'Select' in table && table.Select ? (
            <table.Select
              key="day"
              // The terminal's Select draws "label: value" itself, so the label carries no colon. The desktop's value
              // already starts with the day ("Today · …"): a label there would stutter.
              label={vector ? undefined : 'Day'}
              value={view.day}
              options={view.days.map(day => ({ value: day, label: dayLabel(day) }))}
              onSelect={day => void showHistory($, day, false)}
            />
          ) : (
            <Text bold>{dayLabel(view.day)}</Text>
          )}
          {view.day < today && (
            <Button key="later" label={vector ? 'Next day' : 'Later ▶'} onPress={() => showHistory($, shiftDay(view.day, 1), false)} />
          )}
          {view.day !== today && <Button key="today" label="Today" onPress={() => showHistory($, today, false)} />}
        </Box>
      </Box>
    )

    const report = reportOf(view)
    if (view.isReportShown) {
      const copy = <Button key="copy" variant="primary" label="Copy report" onPress={() => showReport($, true, report, e.surface)} />
      return (
        <Box flexDirection="column" width={columns}>
          {picker}
          {vector && (
            <Text key="caption" dimColor>
              What you'll paste
            </Text>
          )}
          <Box
            key="report"
            flexDirection="column"
            borderStyle={vector ? 'round' : undefined}
            borderDimColor={vector || undefined}
            paddingX={vector ? 1 : undefined}
            paddingY={vector ? 1 : undefined}
            marginTop={vector ? 1 : undefined}
          >
            {report.split('\n').map((line, index, lines) => (
              // On vector surfaces a section's label (a line a list starts under) reads bold too.
              <Text key={`report-${index}`} bold={index === 0 || (vector && line !== '' && !/^[\s•]/.test(line) && /^•/.test(lines[index + 1] ?? ''))} wrap="wrap">
                {line || ' '}
              </Text>
            ))}
          </Box>
          <Box key="report-actions" flexDirection="row" gap={1} marginTop={1}>
            {vector && <Button key="back" label="Back to the list" onPress={() => showReport($, false, report, e.surface)} />}
            {!vector && copy}
            {view.reportSpan === 'mine' ? null : view.reportSpan === 'week' ? (
              <Button key="span" label={vector ? 'Day report' : 'This day'} onPress={() => showReportSpan($, 'day', e.surface)} />
            ) : (
              <Button key="span" label={vector ? 'Week report' : 'This week'} onPress={() => showReportSpan($, 'week', e.surface)} />
            )}
            {!vector && <Button key="back" label="Back to the list" onPress={() => showReport($, false, report, e.surface)} />}
            {/* Elsewhere than the terminal the main button comes last, as a dialog's does. */}
            {vector && copy}
            {close}
          </Box>
        </Box>
      )
    }

    if (view.entries.length === 0) {
      const words = 'No tasks saved for this project on that day yet.'
      return (
        <Box flexDirection="column" width={columns}>
          {picker}
          {vector ? (
            <Box flexDirection="row" gap={1}>
              {kit.icon('plan', 'quiet', NOTICE)}
              <Text dimColor wrap="wrap">
                {words}
              </Text>
            </Box>
          ) : (
            <Text dimColor>{words}</Text>
          )}
          <Box key="actions" flexDirection="row" gap={1} marginTop={1}>
            <Button key="mine" label={vector ? 'All projects this week' : 'Your week'} onPress={() => showReportSpan($, 'mine', e.surface)} />
            {close}
          </Box>
        </Box>
      )
    }

    const marks: Record<GlanceHistoryEntry['outcome'], [string, string | undefined]> = {
      done: ['✓', 'green'],
      stopped: ['■', undefined],
      stuck: ['⚠', 'yellow'],
      waiting: ['‖', 'yellow'],
      background: ['◷', 'cyan'],
      working: ['▶', 'cyan'],
    }
    const outcomeMark = (outcome: GlanceHistoryEntry['outcome']) =>
      outcome === 'done'
        ? kit.icon('done', 'ok', 'Done')
        : outcome === 'stopped'
          ? kit.badge('stop', 'quiet', 'Stopped')
          : outcome === 'stuck'
            ? kit.badge('bang', 'alert', 'Stuck')
            : outcome === 'waiting'
              ? kit.badge('bell', 'warn', 'Waiting')
              : outcome === 'background'
                ? kit.icon('clock', 'active', 'In the background')
                : kit.ring(null, 0, 'Working')
    const titleWidth = Math.max(12, Math.min(MAX_NAME, columns - 9 - 36))
    const rows = view.entries.map(one => {
      const [mark, color] = marks[one.outcome]
      // Elsewhere than the terminal times read as the report says them ("13 min"), so one job reads one way.
      const took = one.finishedAt === null ? 'not finished' : (vector ? plainDuration : formatDuration)(one.finishedAt - one.startedAt)
      const details = [
        `${one.stepsDone}/${one.stepsTotal}`,
        took,
        tokenNote(one.newTokens + one.cachedTokens, one.cachedTokens),
        typeof one.costUsd === 'number' ? formatCost(one.costUsd) : '',
      ]
        .filter(Boolean)
        .join(' · ')
      const files = filesNote(entryFiles(one))
      if (vector) {
        return (
          <Box key={`job-${one.jobId}`} flexDirection="column" marginBottom={1}>
            <Box key="row" flexDirection="row" gap={1} width={columns}>
              {outcomeMark(one.outcome)}
              <Box flexGrow={1} flexShrink={1} minWidth={0}>
                <Text bold={one.outcome !== 'stopped'} dimColor={one.outcome === 'stopped'} wrap="truncate-end">

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (e.props.hasSurvey) {
      return next(e)
    }
    // Other mods draw in this band too (an approval card, prompt buttons): keep theirs, under ours.
    const beneath = await next(e).catch(() => null)
    const table = $.ui.resolve(e)
    const { Box, Text, Button } = table
    // The desktop app, VS Code and the phone set text in a proportional font and draw vectors: there the band is
    // flex rows with SVG marks and one slim bar. The terminal lines its columns up by cells, with glyphs.
    const kit = kitOf(table, e.surface)
    const vector = kit.isVector
    const isEnabled = await read($, enabledAtom)
    const list = isEnabled ? await read($, checklistAtom) : null
    // Another mod's buttons (Replay, say) sit with GlanceFlow's own actions at the bottom right, in every state of the
    // band; anything else it draws stays under it.
    const lifted = vector && isEnabled ? liftButtons(beneath) : { buttons: [], rest: beneath }
    const kept = lifted.rest as RenderElement | null
    // What is beneath may be the engine's own node, which can't sit under a Box with a width: wrap, don't nest.
    const withBeneath = (tree: RenderElement): RenderElement =>
      kept ? (
        <Box flexDirection="column">
          {tree}
          {kept}
        </Box>
      ) : (
        tree
      )
    const tick = list ? await read($, tickAtom) : 0
    const usage = isEnabled ? await read($, usageAtom) : NO_USAGE
    const isDetailed = isEnabled && (await read($, detailAtom)) === 'detailed'
    const isCalm = isEnabled && (await read($, calmAtom))
    const handoff = isEnabled ? await read($, handoffAtom) : 'idle'
    const armed = isEnabled ? await read($, armedAtom) : null
    const canShip = isEnabled && (await read($, shipOnGithubAtom)) && (await read($, hasGithubAtom))
    const columns = Math.max(20, e.props.bodyColumns)
    const current = await now($)

    // A line of the band on vector surfaces: a mark, then what it says, then anything kept to the right.
    // A box that holds a cut line needs minWidth 0: in the desktop app's flex rows, it would otherwise push past the edge.
    const line = (key: string, mark: RenderChildren, body: RenderChildren, right?: RenderChildren) => (
      <Box key={key} flexDirection="row" alignItems="center" gap={1} width={columns}>
        {mark}
        <Box flexGrow={1} flexShrink={1} minWidth={0}>
          {body}
        </Box>
        {right !== undefined && <Box flexShrink={0}>{right}</Box>}
      </Box>
    )

    // Plan usage, always in view; it turns yellow, then red, as a window fills.
    const warnings: RenderChildren[] = []
    // The other chats on this computer: one that needs the person, in amber, else how many are at work, quietly.
    const others = isEnabled && (await read($, showsOthersAtom)) ? await read($, othersAtom) : []
    const otherWords = otherChatsWords(others)
    // Who needs the person comes first and is never left out for the shorter count after it: cut to whole words instead.
    const otherLine = (room: number) => wholePieces(widthOf(otherWords[0] ?? '') <= room ? otherWords : otherWords.slice(0, 1), room)
    if (otherWords.length > 0) {
      const needsYou = others.some(one => one.needsYou)
      warnings.push(
        vector
          ? line(
              'others',
              kit.icon(needsYou ? 'bell' : 'eye', needsYou ? 'warn' : 'quiet', NOTICE),
              <Text wrap="truncate-end" dimColor={!needsYou}>
                {otherLine(Math.floor(columns / 0.8) - 3)}
              </Text>,
            )
          : (
              <Box key="others" width={columns}>
                <Text wrap="truncate-end" color={needsYou ? 'yellow' : undefined} dimColor={!needsYou}>
                  {needsYou ? `${GLYPH.bell} ${otherLine(columns - 2)}` : otherLine(columns)}
                </Text>
              </Box>
            ),
      )
    }
    // Last row: open the history, or hand this chat off to a fresh one (a second press confirms).
    const list0 = isEnabled ? await read($, checklistAtom) : null
    const canPause =
      runningTurn !== undefined &&
      list0 !== null &&
      (list0.phase === 'working' || list0.phase === 'needsYou') &&
      list0.needsYouReason !== WAITING &&
      list0.approval !== 'waiting'
    // Claude asked something: elsewhere than the terminal Continue would read as a yes, so only an answer moves on.
    const canContinue =
      list0 !== null &&
      (list0.phase === 'stopped' ||
        list0.phase === 'stuck' ||
        (list0.phase === 'needsYou' && list0.needsYouReason === WAITING && !(vector && list0.question)))
    // An action: on the terminal its glyph leads the label. Elsewhere it is the app's own button, so it reads as one
    // at a glance; the one that matters now (Continue, Start) is the primary one.
    const action = (key: string, icon: IconName, label: string, onPress: () => unknown, short?: string, isMain = false) =>
      vector ? (
        <Button key={key} variant={isMain ? 'primary' : 'secondary'} label={label} onPress={onPress} />
      ) : (
        <Button key={key} plain label={short ?? `${GLYPH[icon]} ${label}`} onPress={onPress} />
      )
    const handoffLabel =
      armed === 'handoff' ? 'Press again to start a fresh chat' : handoff === 'working' ? 'Writing a handoff note…' : 'Fresh chat'
    // What steers the job (Pause, Start, Continue); elsewhere than the terminal it sits beside the job's status.
    // Elsewhere than the terminal a stuck job is tried again, and a usage limit won't lift for a press, so that
    // button stays quiet.
    const isStuck = list0?.phase === 'stuck'
    const pauseLabel = 'Pause'
    const isLimitStuck = isStuck && /limit/i.test(list0?.stuckReason ?? '')
    // Beside "try again later" a usage limit's button checks whether it has lifted.
    const continueLabel = vector && isStuck ? (isLimitStuck ? 'Check again' : 'Try again') : 'Continue'
    const controls = isEnabled
      ? [
          canPause && action('pause', 'pause', pauseLabel, () => pauseJob($)),
          list0?.approval === 'waiting' && action('start', 'play', 'Start', () => startPlan($), undefined, true),
          canContinue && action('continue', 'play', continueLabel, () => continueJob($), undefined, !(vector && isLimitStuck)),
        ].filter(Boolean)
      : []
    const tidyAt = isEnabled ? await read($, tidyAtAtom) : 0
    const isChatFull = usage.contextPercent !== null && tidyAt > 0 && usage.contextPercent >= tidyAt
    // A fresh chat ends this one. Elsewhere than the terminal it stands apart from the places to go, and only once the
    // job has stopped or finished (mid-job, Tidy up now is the way to make room), or while a first press waits.
    // While a stopped job's chat is full, Tidy up now is the one way offered to make room.
    const handoffItem =
      list0 !== null &&
      (!vector || list0.phase === 'done' || (list0.phase === 'stopped' && !isChatFull) || handoff === 'working' || armed === 'handoff') &&
      action('handoff', 'fresh', handoffLabel, () => pressHandoff($), handoffLabel === 'Fresh chat' && columns < 40 ? '↻ Fresh' : undefined)
    // Finish on GitHub: once the job is done, one press closes it out; a merged pull request archives the chat.
    const shipItem =
      canShip &&
      (list0?.phase === 'done' || armed === 'ship') &&
      action('ship', 'ship', armed === 'ship' ? 'Press again to ship' : 'Ship it', () => pressTwice($, 'ship', () => shipIt($)), undefined, armed !== 'ship')
    // Where to go from here: the plan, the history, the settings.
    const places = isEnabled
      ? [
          list0?.hasPlan && action('plan', 'plan', 'Plan', () => showPlan($)),
          // ≣, not ☰: Unicode 16 made ☰ two cells wide, and the row shifted in newer terminals.
          action('history', 'history', 'History', () => showHistory($, dayKey(current), true)),
          action('settings', 'sliders', 'Settings', () => showSettings($), columns < 60 ? '⚙' : undefined),
          !vector && handoffItem,
          !vector && shipItem,
        ].filter(Boolean)
      : []
    const actionItems = isEnabled ? [...controls, ...places] : null
    const chatPart = usage.contextPercent === null ? '' : `chat ${Math.round(usage.contextPercent)}% full`
    const usageParts = [
      ...usage.limits.map(one => `${one.label} ${Math.round(one.percent)}%`),
      // On the terminal the line below says how full the chat is, with the button to tidy it up: not twice.
      isChatFull && !vector ? '' : chatPart,
    ].filter(Boolean)
    const top = usage.limitPercent ?? 0
    const isHigh = top >= LIMIT_WARN
    const reset = isHigh ? resetTime(usage.limitResetsAt, await now($)) : null
    const tidy = <Button key="compact" label={vector ? 'Tidy up now' : 'Tidy it up'} onPress={() => tidyUp($)} />
    if (vector) {
      // One quiet row: the details view always shows usage; the simple view only near a limit or with the chat past the
      // tidy-up mark, whose button sits with the other actions. The icon carries the colour, as the app's own notices do.
      if (usageParts.length > 0 && (isDetailed || isHigh || isChatFull)) {
        const words = isHigh
          ? [`You've used ${Math.round(top)}% of your ${usage.limitLabel ?? 'plan'} limit`, reset === null ? '' : `resets ${reset}`, isChatFull ? chatPart : '']
          : isDetailed
            ? [`Usage: ${usageParts[0] ?? ''}`, ...usageParts.slice(1)]