pult

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    const theirs = await next(e)
    if (e.props.hasSurvey) return theirs
    const { Box, Button, Text } = $.ui.resolve(e)

    const now = (await read($, nowAtom)) || (await $.clock.now())
    const u = await read($, usage)
    const due = await read($, deadline)
    const box = await read($, server)
    const last = await read($, lastTurnAt)
    const keep = await read($, keepUntil)
    const resume = await read($, resumeAt)
    const n = await read($, turns)
    const isSaved = (await read($, journalPath)) !== ''
    const left = last > 0 ? last + CACHE_MS - now : 0
    const isBig = (u?.contextTokens ?? 0) >= BIG_CONTEXT

    const info: { text: string; color?: string; dim?: boolean }[] = [{ text: place || t.noFolder, dim: true }]
    if (due !== null) {
      const d = daysBetween(localDate(now), due.date)
      const label = due.label.length > 40 ? `${due.label.slice(0, 39)}…` : due.label
      info.push({ text: `${t.due} ${ddmm(due.date)} ${label} (${days(d)})`, ...(d <= 3 ? { color: 'red' } : d <= 10 ? { color: 'yellow' } : {}) })
    }
    if (box !== null) {
      const jobs = box.jobs.map(j => `${j.name} ${span(j.minutes * 60_000)}`).join(', ')
      info.push(box.isOnline ? { text: `${cfg.serverName} ${t.serverOk}${jobs ? ` ${jobs}` : ''}`, color: 'green' } : { text: `${cfg.serverName} ${t.serverDown}`, color: 'red' })
    }
    if (keep > now) info.push({ text: t.cacheKeptUntil(hhmm(keep)), color: 'green' })
    else if (left > 0) info.push({ text: t.cacheLeft(Math.ceil(left / 60_000)), ...(left < WARN_BEFORE_MS ? { color: 'yellow' } : { dim: true }) })
    else if (last > 0 && isBig) info.push({ text: t.cacheCold, dim: true })

    const fallback = hintSurfaces.has(e.surface) ? undefined : bottomLine(u, await read($, samples), await read($, tokens), now)

    return (
      <Box flexDirection="column">
        {theirs}
        <Box flexWrap="wrap" columnGap={1}>
          {cfg.quick.map((label, i) => (
            <Button key={`q${i + 1}`} label={label} onPress={() => void $.prompt.submit({ text: label, asUser: true })} />
          ))}
        </Box>
        <Box flexWrap="wrap" columnGap={1}>
          {info.map((item, i) => (
            <Text {...(item.color ? { color: item.color } : {})} {...(item.dim ? { dimColor: true } : {})}>
              {`${i > 0 ? '· ' : ''}${item.text}`}
            </Text>
          ))}
          {resume > now && <Text color="yellow">{t.resumeAt(hhmm(resume))}</Text>}
          {resume > now && <Button key="resume-cancel" label={t.cancel} plain dimColor onPress={() => void cancelResume($)} />}
          {keep <= now && left > 0 && left < WARN_BEFORE_MS && isBig && (
            <Button key="keep" label={t.keep3h} onPress={() => void keepCache($, 3).then(text => $.ui.toast(text))} />
          )}
          {cfg.journal !== '' && !isSaved && n >= LONG_SESSION && <Text dimColor>{t.turnsNoJournal(n)}</Text>}
          {cfg.journal !== '' && !isSaved && n >= LONG_SESSION && <Button key="journal" label={t.saveJournal} onPress={() => void saveJournal($)} />}
        </Box>
        {fallback !== undefined && <Text dimColor wrap="truncate-end">{fallback}</Text>}
      </Box>
    )
  })

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const table = $.ui.resolve(e)
    const { Box, Button, Text } = table
    // The terminal's table answers Svg with an empty fragment, so look at the surface
    const Svg = e.surface !== 'terminal' && 'Svg' in table ? table.Svg : undefined

    const now = (await read($, nowAtom)) || (await $.clock.now())
    const u = await read($, usage)
    const list = await read($, areaList)
    const picked = (await read($, area)) || here || (list[0]?.code ?? '')
    const info = (await read($, areas)).find(a => a.code === picked)
    const meta = list.find(a => a.code === picked)
    const wait = await read($, waiting)
    const unread = await read($, inbox)
    const mine = await read($, duties)
    const isAll = await read($, isDutiesOpen)
    const own = await read($, tokens)
    const helpers = await read($, agentTokens)
    const points = await read($, history)
    const n = await read($, turns)
    const toolCount = await read($, tools)
    const pace = u?.five ? forecast(await read($, samples), u.five.resetsAt, now) : undefined
    const resume = await read($, resumeAt)
    const last = await read($, lastTurnAt)
    const keep = await read($, keepUntil)
    const left = last > 0 ? last + CACHE_MS - now : 0
    const box = await read($, server)
    const isBusy = await read($, isPolling)
    const isSaved = (await read($, journalPath)) !== ''
    const elapsed = u && u.startedAt > 0 ? now - u.startedAt : 0

    const card = (key: string, title: string, aside: string | undefined, children: unknown[]) => (
      <Box key={key} flexDirection="column" borderStyle="round" borderDimColor paddingX={1} marginBottom={1}>
        <Box justifyContent="space-between">
          <Text bold>{title}</Text>
          {aside !== undefined && <Text dimColor>{aside}</Text>}
        </Box>
        {children}
      </Box>
    )
    const picture = (source: string, alt: string) => (Svg !== undefined ? <Svg source={source} alt={alt} /> : undefined)
    const dateRow = (key: string, date: string, label: string) => {
      const dn = daysBetween(localDate(now), date)
      return (
        <Box key={key}>
          <Box width={7} flexShrink={0}><Text dimColor>{ddmm(date)}</Text></Box>
          <Box flexGrow={1}><Text wrap="truncate-end">{label}</Text></Box>
          <Text {...dayTone(dn)}>{` ${days(dn)}`}</Text>
        </Box>
      )
    }
    const tokenText = (x: typeof own) => t.tokensLine(amount(x.input), amount(x.output), amount(x.cacheRead), amount(x.cacheWrite))

    return (
      <Box flexDirection="column">
        {list.length > 0 &&
          card('areas', t.areas, meta ? meta.folder : undefined, [
            <Box key="chips" flexWrap="wrap" columnGap={1}>
              {list.map(a => (
                <Button key={`area-${a.code}`} label={a.short} {...(a.code === picked ? { variant: 'primary' as const } : {})} onPress={() => void update($, area, () => a.code)} />
              ))}
            </Box>,
            ...(cfg.focus !== '' ? [<Text key="focus" wrap="wrap">{info?.text || t.nothingBurns}</Text>] : []),
            ...(info?.deadlines ?? []).map(d => dateRow(`d-${d.date}-${d.label}`, d.date, d.label)),
            picked !== here && meta !== undefined ? (
              <Box key="go" marginTop={1}>
                <Button key="area-go" label={t.workIn(meta.short)} onPress={() => void $.prompt.submit({ text: t.workInPrompt(meta.folder, `${cfg.areasRoot}/${meta.folder}`.replace(/\//g, isWindows() ? '\\' : '/')), asUser: true })} />
              </Box>
            ) : (
              <Text key="here" dimColor>{t.youAreHere}</Text>
            ),
          ])}

        {mine.length > 0 &&
          card('deadlines', t.myDeadlines, t.ahead(mine.length), [
            ...(isAll ? mine : mine.slice(0, SHOWN_DEADLINES)).map(d => dateRow(`dl-${d.date}-${d.what}`, d.date, isOwnRole(d.role) ? d.what : `${d.what} (${d.role})`)),
            <Box key="deadlines-actions" columnGap={1} marginTop={1}>
              {mine.length > SHOWN_DEADLINES && (
                <Button key="deadlines-more" label={isAll ? t.collapse : t.all(mine.length)} onPress={() => void update($, isDutiesOpen, v => !v)} />
              )}
              {cfg.obsidian !== '' && (
                <Button
                  key="deadlines-note"
                  label={t.openNote}
                  onPress={() => void $.process.run(opener(`obsidian://open?vault=${encodeURIComponent(cfg.obsidian)}&file=${encodeURIComponent(cfg.deadlinesNote.replace(/\.md$/, ''))}`))}
                />
              )}
            </Box>,
          ])}

        {(wait !== '' || unread > 0) &&
          card('waiting', t.waiting, unread > 0 ? t.inbox(unread) : undefined, [
            ...(wait !== '' ? [<Text key="w" wrap="wrap">{wait}</Text>] : []),
            ...(unread > 0
              ? [
                  <Box key="inbox-row" marginTop={1}>
                    <Button key="inbox" label={t.sortInbox} onPress={() => void $.prompt.submit({ text: t.sortInboxPrompt(cfg.inboxDir), asUser: true })} />
                  </Box>,
                ]
              : []),
          ])}

        {card('session', t.sessionCard, place, [
          picture(sessionSvg({ usage: u, tokens: own, agentTokens: helpers, turns: n, tools: toolCount, elapsedMs: elapsed, history: points }), `${t.context} ${Math.round(u?.contextPct ?? 0)}%, ${tokenText(own)}`) ?? (
            <Box key="session-text" flexDirection="column">
              <Text>{u ? (contextLine(u) ?? t.noData) : t.numbersLater}</Text>
              <Text dimColor>{tokenText(own)}</Text>
              {helpers.output + helpers.input > 0 && <Text dimColor>{`${t.helpers}: ${tokenText(helpers)}`}</Text>}
              <Text dimColor>{t.turnsLine(n, toolCount, span(elapsed))}</Text>
              {points.length >= 2 && <Text color="cyan">{sparkline(points.slice(-40).map(p => p.pct))}</Text>}
            </Box>
          ),
          <Box key="session-actions" flexWrap="wrap" columnGap={1} marginTop={1}>
            {cfg.journal !== '' && <Button key="pane-journal" label={isSaved ? t.journalSaved : t.saveJournal} onPress={() => void saveJournal($)} />}
            <Button key="compact" label={t.compact} onPress={() => void $.command.run({ command: 'compact' })} />
          </Box>,
        ])}

        {card('limits', t.limits, u?.costUsd !== undefined ? t.apiPrice(u.costUsd.toFixed(2)) : undefined, [
          picture(limitsSvg(u, pace, now), `${t.fiveHoursTitle} ${Math.round(u?.five?.pct ?? 0)}%, ${t.weekTitle} ${Math.round(u?.week?.pct ?? 0)}%`) ?? (
            <Box key="limits-text" flexDirection="column">
              <Text>{limitLine(t.fiveHours, u?.five, now, pace) ?? t.noDataFor(t.fiveHours)}</Text>
              <Text>{limitLine(t.week, u?.week, now) ?? t.noDataFor(t.week)}</Text>
            </Box>
          ),
          ...(resume > now
            ? [
                <Box key="resume" columnGap={1}>
                  <Text color="yellow">{t.resumeAt(hhmm(resume)).replace(/^· /, '')}</Text>
                  <Button key="pane-resume-cancel" label={t.cancel} onPress={() => void cancelResume($)} />
                </Box>,
              ]
            : []),
        ])}

        {card('cache', t.cache, undefined, [
          picture(cacheSvg(left, keep, now), keep > now ? t.cacheKeptUntil(hhmm(keep)) : left > 0 ? t.cacheLeft(Math.ceil(left / 60_000)) : t.cacheCold) ?? (
            <Text key="cache-text">{keep > now ? t.cacheKept(hhmm(keep)) : left > 0 ? t.cacheWarm(Math.ceil(left / 60_000)) : t.cacheColdLong}</Text>
          ),
          <Box key="cache-actions" columnGap={1} marginTop={1}>
            {keep > now ? (
              <Button key="release" label={t.release} onPress={() => void releaseCache($)} />
            ) : (
              <Button key="pane-keep" label={t.keep} onPress={() => void keepCache($, 3).then(text => $.ui.toast(text))} />
            )}
          </Box>,
        ])}

        {cfg.host !== '' &&
          card('server', cfg.serverName, box?.isOnline ? t.online : box ? t.offline('').replace(/: $/, '') : undefined, [
            picture(serverSvg(box, isBusy), box?.isOnline ? `${cfg.serverName}: ${t.online}, ${t.cpu} ${box.cpu ?? 0}%` : `${cfg.serverName}: ${t.noData}`) ?? (
              <Text key="server-text" {...(box?.isOnline ? { color: 'green' } : { color: 'red' })}>
                {box === null ? t.noData : box.isOnline ? `● ${t.cpu} ${box.cpu ?? 0}% · ${t.gpu} ${box.gpu?.util ?? 0}%` : `○ ${box.error ?? ''}`}
              </Text>
            ),
            ...(box?.isOnline ? [<Text key="jobs" wrap="wrap">{box.jobs.length > 0 ? t.running(box.jobs.map(j => `${j.name} ${span(j.minutes * 60_000)}`).join(', ')) : t.idle}</Text>] : []),
            <Box key="server-actions" columnGap={1} marginTop={1}>
              <Button key="refresh" label={isBusy ? t.checking : t.refresh} onPress={() => void pollServer($, true)} />
              <Button key="terminal" label={t.terminal} onPress={() => void $.process.run(terminalArgv())} />
            </Box>,