glanceflow

  on('ui.render', { component: 'Pane', requestId: HISTORY_PANE }, async ($, e) => {
    const table = $.ui.resolve(e)
    const { Box, Text, Button } = table
    const view = await read($, historyAtom)
    const columns = Math.max(30, e.props.bodyColumns)
    const today = dayKey(await now($))
    const close = <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) => (day === today ? `Today, ${day}` : day)
    const picker = (
      <Box key="picker" flexDirection="column" marginBottom={1}>
        <Text key="heading" bold wrap="truncate-end">
          {`${projectName(view.project)} · ${longDay(view.day)}`}
        </Text>
        <Box key="controls" flexDirection="row" gap={1}>
        <Button key="earlier" label="◀ Earlier" onPress={() => showHistory($, shiftDay(view.day, -1), false)} />
        {'Select' in table && table.Select ? (
          <table.Select
            key="day"
            label="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="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) {
      return (
        <Box flexDirection="column" width={columns}>
          {picker}
          {report.split('\n').map((line, index) => (
            <Text key={`report-${index}`} bold={index === 0} wrap="wrap">
              {line || ' '}
            </Text>
          ))}
          <Box key="report-actions" flexDirection="row" gap={1} marginTop={1}>
            <Button key="copy" variant="primary" label="Copy report" onPress={() => showReport($, true, report, e.surface)} />
            {view.reportSpan === 'mine' ? null : view.reportSpan === 'week' ? (
              <Button key="span" label="This day" onPress={() => showReportSpan($, 'day', e.surface)} />
            ) : (
              <Button key="span" label="This week" onPress={() => showReportSpan($, 'week', e.surface)} />
            )}
            <Button key="back" label="Back to the list" onPress={() => showReport($, false, report, e.surface)} />
            {close}
          </Box>
        </Box>
      )
    }

    if (view.entries.length === 0) {
      return (
        <Box flexDirection="column" width={columns}>
          {picker}
          <Text dimColor>No tasks saved for this project on that day yet.</Text>
          <Box key="actions" flexDirection="row" gap={1} marginTop={1}>
            <Button key="mine" label="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 titleWidth = Math.max(12, Math.min(MAX_NAME, columns - 9 - 36))
    const rows = view.entries.map(one => {
      const [mark, color] = marks[one.outcome]
      const took = one.finishedAt === null ? 'not finished' : 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))
      return (
        <Box key={`job-${one.jobId}`} flexDirection="column">
          <Box key="row" flexDirection="row">
            <Text dimColor>{`${clockTime(one.startedAt)}  `}</Text>
            <Text color={color} dimColor={one.outcome === 'stopped'}>{`${mark} `}</Text>
            <Text bold={one.outcome !== 'stopped'}>{fit(one.title, titleWidth)}</Text>
            <Text dimColor wrap="truncate-end">
              {` ${fit(details, Math.max(0, columns - 9 - titleWidth - 1)).trimEnd()}`}
            </Text>
          </Box>
          {files !== '' && (
            <Text key="files" dimColor wrap="wrap">
              {`         ${files}`}
            </Text>
          )}
        </Box>
      )
    })

    const finished = view.entries.filter(one => one.finishedAt !== null)
    const time = finished.reduce((sum, one) => sum + (one.finishedAt! - one.startedAt), 0)
    const newTokens = view.entries.reduce((sum, one) => sum + one.newTokens, 0)
    const cached = view.entries.reduce((sum, one) => sum + one.cachedTokens, 0)
    const priced = view.entries.filter(one => typeof one.costUsd === 'number')
    const spent = priced.reduce((sum, one) => sum + (one.costUsd ?? 0), 0)
    const counts = (Object.keys(marks) as GlanceHistoryEntry['outcome'][])
      .map(outcome => [outcome, view.entries.filter(one => one.outcome === outcome).length] as const)
      .filter(([, count]) => count > 0)
      .map(([outcome, count]) => `${count} ${outcome}`)
    const total = [
      `${view.entries.length} ${view.entries.length === 1 ? 'task' : 'tasks'}`,
      counts.join(', '),
      formatDuration(time),
      tokenNote(newTokens + cached, cached),
      priced.length > 0 ? formatCost(spent) : '',
    ]
      .filter(Boolean)
      .join(' · ')

    return (
      <Box flexDirection="column" width={columns}>
        {picker}
        {rows}
        <Box key="total" marginTop={1}>
          <Text bold wrap="truncate-end">{`Total: ${total}`}</Text>
        </Box>
        <Box key="actions" flexDirection="row" gap={1} marginTop={1}>
          <Button
            key="report"
            variant="primary"
            label="Team report"
            onPress={() => showReportSpan($, view.reportSpan === 'week' ? 'week' : 'day', e.surface)}
          />
          <Button key="mine" label="Your week" onPress={() => showReportSpan($, 'mine', e.surface)} />
          {close}
        </Box>
      </Box>
    )

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (e.props.hasSurvey) {
      return next(e)
    }
    const { Box, Text, Button } = $.ui.resolve(e)
    const isEnabled = await read($, enabledAtom)
    const list = isEnabled ? await read($, checklistAtom) : null
    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 columns = Math.max(20, e.props.bodyColumns)
    const current = await now($)

    // Plan usage, always in view; it turns yellow, then red, as a window fills.
    const warnings: RenderChildren[] = []
    // 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
    const canContinue =
      list0 !== null &&
      (list0.phase === 'stopped' || list0.phase === 'stuck' || (list0.phase === 'needsYou' && list0.needsYouReason === WAITING))
    const actions = isEnabled ? (
      <Box key="actions" flexDirection="row" gap={columns < 44 ? 1 : 2}>
        {canPause && <Button key="pause" plain label="‖ Pause" onPress={() => pauseJob($)} />}
        {list0?.approval === 'waiting' && <Button key="start" plain label="▶ Start" onPress={() => startPlan($)} />}
        {canContinue && <Button key="continue" plain label="▶ Continue" onPress={() => continueJob($)} />}
        {list0?.hasPlan && <Button key="plan" plain label="▤ Plan" onPress={() => showPlan($)} />}
        <Button key="history" plain label="☰ History" onPress={() => showHistory($, dayKey(current), true)} />
        <Button key="settings" plain label={columns < 60 ? '⚙' : '⚙ Settings'} onPress={() => showSettings($)} />
        {list0 !== null && (
        <Button
          key="handoff"
          plain
          label={
            handoff === 'armed'
              ? '↻ Press again to start a fresh chat'
              : handoff === 'working'
                ? '↻ Writing a handoff note…'
                : columns < 40
                  ? '↻ Fresh'
                  : '↻ Fresh chat'
          }
          onPress={() => pressHandoff($)}
        />
        )}
      </Box>
    ) : null
    const usageParts = [
      ...usage.limits.map(one => `${one.label} ${Math.round(one.percent)}%`),
      usage.contextPercent === null ? '' : `chat ${Math.round(usage.contextPercent)}% full`,
    ].filter(Boolean)
    const top = usage.limitPercent ?? 0
    const isHigh = top >= LIMIT_WARN
    const reset = isHigh ? resetTime(usage.limitResetsAt, await now($)) : null
    // The simple view speaks up only near a limit; the detailed view always shows usage.
    if (usageParts.length > 0 && (isDetailed || isHigh)) {
      warnings.push(
        <Box key="limit" width={columns}>
          <Text
            wrap="truncate-end"
            color={top >= LIMIT_ALERT ? 'red' : isHigh ? 'yellow' : undefined}
            dimColor={!isHigh}
          >
            {isHigh
              ? `⚠ You've used ${Math.round(top)}% of your ${usage.limitLabel ?? 'plan'} limit${reset === null ? '' : ` · resets ${reset}`} · ${usageParts.join(' · ')}`
              : `Plan usage: ${usageParts.join(' · ')}`}
          </Text>
        </Box>,
      )
    }
    const tidyAt = isEnabled ? await read($, tidyAtAtom) : 0
    if (usage.contextPercent !== null && tidyAt > 0 && usage.contextPercent >= tidyAt) {
      warnings.push(
        <Box key="long-chat" flexDirection="row" justifyContent="space-between" width={columns}>
          <Box flexShrink={1}>
            <Text wrap="truncate-end" color="yellow">
              {`This chat is ${Math.round(usage.contextPercent)}% full. Claude saves a checkpoint before tidying up.`}
            </Text>
          </Box>
          <Button
            key="compact"
            label="Tidy it up"
            onPress={() => tidyUp($)}
          />
        </Box>,
      )
    }

    if (isEnabled && (await read($, recapAtom))) {
      warnings.push(
        <Box key="recap" flexDirection="row" justifyContent="space-between" width={columns}>
          <Box flexShrink={1}>
            <Text wrap="truncate-end" color="green">
              ✓ Chat tidied up. Claude kept a checkpoint of the work.
            </Text>
          </Box>
          <Box flexDirection="row" gap={1}>
            <Button key="recap" label="Where we left off" onPress={() => showRecap($)} />
            <Button key="recap-ok" plain label="OK" onPress={() => update($, recapAtom, () => false)} />
          </Box>
        </Box>,
      )
    }

    // One button for every choice: Simple → Details → Off.
    const button = (
      <Button
        key="toggle"
        label={
          columns < NARROW
            ? !isEnabled
              ? '○ Off'
              : isDetailed
                ? '● Details'
                : '● Simple'
            : !isEnabled
              ? '○ GlanceFlow: Off'
              : isDetailed
                ? '● GlanceFlow: Details'
                : '● GlanceFlow: Simple'
        }
        variant={isEnabled ? 'primary' : 'secondary'}
        onPress={() => cycleMode($, isEnabled, isDetailed)}
      />
    )
    const headerWidth = Math.max(0, columns - (columns < NARROW ? 15 : 27))
    const row = (header: RenderChildren) => (
      <Box key="header" flexDirection="row" justifyContent="space-between" width={columns}>
        <Box flexShrink={1} flexGrow={1}>
          {header}
        </Box>
        {button}
      </Box>
    )

    const tourStep = isEnabled && list === null ? await read($, tourAtom) : null
    if (tourStep !== null) {
      const isLast = tourStep === TOUR.length - 1
      return (
        <Box flexDirection="column" width={columns}>
          <Text bold wrap="truncate-end">{`Welcome to GlanceFlow · ${tourStep + 1} of ${TOUR.length}`}</Text>
          <Text wrap="wrap">{TOUR[tourStep]}</Text>
          <Box key="tour" flexDirection="row" gap={2} marginBottom={1}>
            <Button key="tour-next" plain label={isLast ? '✓ Got it' : 'Next ▶'} onPress={() => stepTour($, tourStep + 1)} />
            {!isLast && <Button key="tour-skip" plain label="Skip" onPress={() => stepTour($, null)} />}
          </Box>
          {warnings}
          {actions}
        </Box>
      )
    }

    if (list === null) {
      return (