sidebar

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (isOpen || e.props.hasSurvey) return next(e)
    const { Box, Button } = (await $.ui.resolve(e)) as any
    return (
      <Box>
        <Button key="toggle" label="Show sidebar  ctrl+x s" plain dimColor action={TOGGLE_ACTION} onPress={() => toggle($)} />
      </Box>
    )
  })

  on('ui.render', { component: 'Pane' }, async ($, e, next) => {
    if (e.requestId !== 'meter') return next(e)
    // Being drawn means it is open. An unasked open below 144 columns waits
    // ({ isPlaced: false }) and is seated later, after session.start already
    // recorded it closed; without this the band's "Show sidebar" lingers.
    if (!isOpen) {
      isOpen = true
      $.ui.invalidate('ui.render') // drop the band's show button
    }
    const els = (await $.ui.resolve(e)) as any // Svg exists on desktop, not terminal
    const { Box, Text } = els

    // CONTEXT figures from the session usage (same source as the status line).
    let contextPct: number | null = null
    let contextLine = '— / —'
    let rateLimits: { kind: string; percentUsed: number }[] = []
    let costUsd: number | undefined
    try {
      const usage = await $.session.usage()
      rateLimits = usage?.rateLimits ?? []
      costUsd = usage?.cost?.usd
      limitUse = trackLimitUse(limitUse, rateLimits)
      if (usage && usage.context && usage.context.window) {
        const used = usage.context.tokens ?? 0
        contextPct = used / usage.context.window
        contextLine = `${compact(used)} / ${compact(usage.context.window)}`
      }
    } catch {
      // a test or a build without session.usage: draw without context
    }

    // Prompt-cache TTL of the main conversation, resolved as Claude Code does.
    const [envTtl, force5m, enable1h, settings] = await Promise.all([
      $.env.get('CLAUDE_CODE_PROMPT_CACHE_TTL').catch(() => undefined),
      $.env.get('FORCE_PROMPT_CACHING_5M').catch(() => undefined),
      $.env.get('ENABLE_PROMPT_CACHING_1H').catch(() => undefined),
      $.settings.read().catch(() => ({}) as Record<string, unknown>),
    ])
    const ttl = resolveTtl({
      envTtl,
      force5m,
      enable1h,
      setting: settings.promptCacheTtl,
      rateLimits,
    })
    const ttlMin = ttl.minutes

    const now = await $.clock.now()
    if (now - gitAt > 5000) {
      gitAt = now
      await pollGit($)
    }
    const remaining = last ? ttlMin * 60_000 - (now - last.at) : null
    const remainingRatio = remaining !== null ? remaining / (ttlMin * 60_000) : 0

    let workspace = ''
    try {
      workspace = await $.session.cwd()
    } catch {
      // keep defaults
    }
    const workspaceName = workspace ? workspace.replace(/\\/g, '/').split('/').filter(Boolean).pop() ?? '' : '—'

    const liveStats = live ?? last
    const rate = hitRate()
    const contextBarRatio = contextPct ?? 0

    const ctxPctText = contextPct === null ? '—' : `${(contextPct * 100).toFixed(1)}%`
    const rateText = rate === null ? '—' : `${(rate * 100).toFixed(1)}%`
    const validText = remaining === null ? '—' : formatCountdown(remaining)
    const speedText = liveStats && liveStats.tps > 0 ? formatTps(liveStats.tps) : '—'
    // Expiry is the one value that changes meaning near zero: color it then.
    const expiryColor = remaining === null ? C.muted : remaining < 30_000 ? C.bad : remaining < 90_000 ? C.warn : undefined
    const el = els
    const barW = Math.max(10, (e.props.bodyColumns || 30) - 3) // minus paddingLeft 1 + paddingRight 2

    // Main-screen terminal seats the pane inline above the prompt, full width:
    // a sidebar layout there is a takeover, so draw a compact strip instead.
    if (e.props.placement === 'inline') {
      const dot = <Text color={C.track}>  ·  </Text>
      return (
        <Box flexDirection="column" width="100%">
          <Box flexDirection="row" width="100%" flexWrap="wrap">
            <Text color={C.muted}>Context </Text>
            <Bar ratio={contextBarRatio} color={C.accent} width={16} surface={e.surface} el={el} />
            <Text bold color={C.accent}> {ctxPctText}</Text>
            {dot}
            <Text color={C.muted}>Cache </Text><Text>{rateText}</Text>
            <Text color={C.muted}> expires </Text><Text color={expiryColor}>{validText}</Text>
            {dot}
            <Text color={C.muted}>Speed </Text><Text>{speedText}</Text>
            {dot}
            <Text color={C.muted}>Total </Text>
            <Text>{compact(sums.input + sums.output + sums.cacheRead + sums.cacheWrite)}</Text>
          </Box>
          <Text color={C.muted}>Run /tui fullscreen to dock this as a sidebar.</Text>
        </Box>
      )
    }

    const gap = <Box height={1} />
    return (
      <Box flexDirection="column" width="100%" minHeight={e.props.scroll?.bodyRows} paddingLeft={1} paddingRight={2} paddingTop={1}>
        {tasks.length > 0 ? (
          <Box flexDirection="column" width="100%" marginBottom={1}>
            <Title label="Tasks" right={`${taskDone(tasks)}/${tasks.length}${taskFailed(tasks) ? ` · ${taskFailed(tasks)} ✗` : ''}`} el={el} />
            <Bar ratio={(taskDone(tasks) + taskFailed(tasks)) / tasks.length} color={C.accent} width={barW} surface={e.surface} el={el} />
            <TaskRows tasks={tasks} starts={taskStarts} now={now} el={el} />
          </Box>
        ) : undefined}
        <Title label="Context" right={ctxPctText} el={el} />
        <Bar ratio={contextBarRatio} color={C.accent} width={barW} surface={e.surface} el={el} />
        <Text color={C.muted}>{contextLine} tokens</Text>
        {gap}

        <Title label="Tokens" el={el} />
        <Row label="Input" value={compact(sums.input)} el={el} />
        <Row label="Output" value={compact(sums.output)} el={el} />
        <Row label="Cache read" value={compact(sums.cacheRead)} el={el} />
        <Row label="Cache write" value={compact(sums.cacheWrite)} el={el} />
        <Box flexDirection="row" justifyContent="space-between" width="100%">
          <Text>Total</Text>
          <Text bold>{compact(sums.input + sums.output + sums.cacheRead + sums.cacheWrite)}</Text>
        </Box>
        {/* What this session spent, in the unit the person pays in: a share of
            the plan's limits on a subscription, dollars on an API key. */}
        {rateLimits.length > 0 ? (
          <Box flexDirection="column" width="100%">
            {LIMIT_ROWS.filter(([kind]) => limitUse.has(kind)).map(([kind, label]) => (
              <Row key={`limit-${kind}`} label={label} value={formatShare(sessionShare(limitUse.get(kind)!))} el={el} />
            ))}
          </Box>
        ) : costUsd !== undefined && costUsd > 0 ? ( // > 0: before the first reply, a subscriber has no readings yet
          <Row label="Cost" value={formatUsd(costUsd)} el={el} />
        ) : undefined}
        {gap}

        <Title label="Cache" el={el} />
        <Row label="Hit rate" value={rateText} el={el} color={C.accent} />
        <Bar ratio={rate ?? 0} color={C.accent} width={barW} surface={e.surface} el={el} />
        {gap}
        <Box flexDirection="row" justifyContent="space-between" width="100%">
          <Text color={C.muted}>Expires in</Text>
          <Text>
            <Text color={expiryColor}>{validText}</Text>
            <Text color={C.muted}> / {ttlMin === 60 ? '1h' : '5m'}</Text>
          </Text>
        </Box>
        <Bar ratio={remainingRatio} color={expiryColor ?? C.accent} width={barW} surface={e.surface} el={el} />
        {/* Which rule set the TTL, on its own line: beside the time it overflowed a narrow pane. */}
        <Text color={C.muted}>{ttlMin === 60 ? '1h' : '5m'} cache · {ttl.source}</Text>
        {gap}

        <Title label="Speed" el={el} />
        <Row label="First token" value={formatTtft(liveStats?.ttftMs ?? null)} el={el} />
        <Row label="Output" value={speedText} el={el} />
        {gap}

        <Title label="Workspace" el={el} />
        <Row label="Folder" value={workspaceName} el={el} />

function Bar(props: { ratio: number; color: string; width: number; surface: string; el: any }) {
  const { ratio, color, width, surface, el } = props
  const r = Math.max(0, Math.min(1, ratio))
  if (surface === 'terminal') {
    const { fill, track } = smoothBar(r, width)
    return (
      <el.Text>
        <el.Text color={color}>{fill}</el.Text>
        <el.Text color={C.track}>{track}</el.Text>
      </el.Text>
    )
  }
  const w = Math.round(r * 1000)
  // 8px pill centred in 14px: the transparent margin spaces rows on desktop.
  // rx is wider than ry because the 1000-wide viewBox is squeezed to the pane.
  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="14" viewBox="0 0 1000 14" preserveAspectRatio="none"><rect y="3" width="1000" height="8" rx="10" ry="4" fill="${C.track}"/>${w > 0 ? `<rect y="3" width="${Math.max(w, 20)}" height="8" rx="10" ry="4" fill="${color}"/>` : ''}</svg>`
  return (
    <el.Box width="100%">
      <el.Svg source={svg} alt={`${Math.round(r * 100)}%`} height={14} />
    </el.Box>
  )
}

function Title(props: { label: string; right?: string; el: any }) {
  const { label, right, el } = props
  return (
    <el.Box flexDirection="row" justifyContent="space-between" width="100%">
      <el.Text bold>{label}</el.Text>
      {right !== undefined ? <el.Text bold color={C.accent}>{right}</el.Text> : undefined}
    </el.Box>
  )
}

function TaskRows(props: { tasks: Task[]; starts: Map<string, number>; now: number; el: any }) {
  const { tasks, starts, now, el } = props
  const { rows, more } = visibleTasks(tasks)
  return (
    <el.Box flexDirection="column" width="100%">
      {rows.map(t => {
        const failed = t.status === 'completed' ? failedTitle(t.title) : null
        return (
        <el.Box key={`task-${t.id}`} flexDirection="row" width="100%">
          <el.Text color={failed !== null ? C.bad : t.status === 'completed' ? C.ok : t.status === 'in_progress' ? C.accent : C.muted}>
            {t.status === 'in_progress' ? spinnerFrame(now) : failed !== null ? '✗' : TASK_MARK[t.status]}{' '}
          </el.Text>
          <el.Text
            wrap="truncate"
            bold={t.status === 'in_progress'}
            color={t.status === 'in_progress' ? undefined : C.muted}
          >
            {t.status === 'in_progress' ? (t.active ?? t.title) : (failed ?? t.title)}
          </el.Text>
          {t.status === 'in_progress' && starts.has(taskKey(t)) ? (
            <el.Box flexGrow={1} justifyContent="flex-end">
              <el.Text color={C.muted}> {formatElapsed(now - starts.get(taskKey(t))!)}</el.Text>
            </el.Box>
          ) : undefined}
        </el.Box>
        )
      })}
      {more > 0 ? <el.Text color={C.muted}>+{more} more</el.Text> : undefined}
    </el.Box>
  )
}

function Row(props: { label: string; value: string; el: any; color?: string; dim?: boolean }) {
  const { label, value, el, color, dim } = props
  return (
    <el.Box flexDirection="row" justifyContent="space-between" width="100%">
      <el.Text color={C.muted}>{label}</el.Text>
      <el.Text color={dim ? C.muted : color}>{value}</el.Text>
    </el.Box>
  )
}