nastechai-desktop 18.1.0

package/src/app/chat/right-rail/preview.tsx

@@ -0,0 +1,171 @@
+import { useStore } from '@nanostores/react'
+import { useEffect, useMemo } from 'react'
+
+import type { SetTitlebarToolGroup } from '@/app/shell/titlebar-controls'
+import { Codicon } from '@/components/ui/codicon'
+import { Tip } from '@/components/ui/tooltip'
+import { translateNow, useI18n } from '@/i18n'
+import { cn } from '@/lib/utils'
+import {
+  $rightRailActiveTabId,
+  RIGHT_RAIL_PREVIEW_TAB_ID,
+  type RightRailTabId,
+  selectRightRailTab
+} from '@/store/layout'
+import {
+  $filePreviewTabs,
+  $previewReloadRequest,
+  $previewTarget,
+  closeRightRail,
+  closeRightRailTab,
+  type PreviewTarget
+} from '@/store/preview'
+
+import { PreviewPane } from './preview-pane'
+
+export const PREVIEW_RAIL_MIN_WIDTH = '18rem'
+export const PREVIEW_RAIL_MAX_WIDTH = '38rem'
+
+const INTRINSIC = `clamp(${PREVIEW_RAIL_MIN_WIDTH}, 36vw, 32rem)`
+
+// Track for <Pane id="preview">. Folds the intrinsic clamp with a min-floor
+// against --chat-min-width so the chat surface never gets squeezed below it.
+// Subtracts the project browser width so preview yields rather than crushing
+// the chat when both right-side panes are open.
+export const PREVIEW_RAIL_PANE_WIDTH = `min(${INTRINSIC}, max(0rem, calc(100vw - var(--pane-chat-sidebar-width) - var(--pane-file-browser-width, 0rem) - var(--chat-min-width))))`
+
+interface ChatPreviewRailProps {
+  onRestartServer?: (url: string, context?: string) => Promise<string>
+  setTitlebarToolGroup?: SetTitlebarToolGroup
+}
+
+interface RailTab {
+  id: RightRailTabId
+  label: string
+  target: PreviewTarget
+}
+
+function tabLabelFor(target: PreviewTarget): string {
+  const value = target.label || target.path || target.source || target.url
+  const tail = value.split(/[\\/]/).filter(Boolean).at(-1)
+
+  return tail || value || translateNow('preview.tab')
+}
+
+export function ChatPreviewRail({ onRestartServer, setTitlebarToolGroup }: ChatPreviewRailProps) {
+  const { t } = useI18n()
+  const previewReloadRequest = useStore($previewReloadRequest)
+  const activeTabId = useStore($rightRailActiveTabId)
+  const filePreviewTabs = useStore($filePreviewTabs)
+  const previewTarget = useStore($previewTarget)
+
+  const tabs = useMemo<readonly RailTab[]>(
+    () => [
+      ...(previewTarget ? [{ id: RIGHT_RAIL_PREVIEW_TAB_ID, label: t.preview.tab, target: previewTarget } as RailTab] : []),
+      ...filePreviewTabs.map(({ id, target }) => ({ id, label: tabLabelFor(target), target }) as RailTab)
+    ],
+    [filePreviewTabs, previewTarget, t.preview.tab]
+  )
+
+  const activeTab = tabs.find(tab => tab.id === activeTabId) ?? tabs[0]
+
+  useEffect(() => {
+    if (activeTab && activeTab.id !== activeTabId) {
+      selectRightRailTab(activeTab.id)
+    }
+  }, [activeTab, activeTabId])
+
+  if (!activeTab) {
+    return null
+  }
+
+  const isPreview = activeTab.id === RIGHT_RAIL_PREVIEW_TAB_ID
+
+  return (
+    <aside className="relative flex h-full w-full min-w-0 flex-col overflow-hidden border-l border-(--ui-stroke-tertiary) bg-(--ui-editor-surface-background) text-(--ui-text-tertiary)">
+      <div className="group/rail-tabs flex h-(--titlebar-height) shrink-0 border-b border-(--ui-stroke-tertiary) bg-(--ui-sidebar-surface-background)">
+        <div
+          className="flex min-w-0 flex-1 overflow-x-auto overflow-y-hidden overscroll-x-contain [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+          role="tablist"
+        >
+          {tabs.map(tab => {
+            const active = tab.id === activeTab.id
+
+            return (
+              <div
+                className={cn(
+                  'group/tab relative flex h-full min-w-0 max-w-48 shrink-0 items-center text-[0.6875rem] font-medium [-webkit-app-region:no-drag] last:border-r last:border-(--ui-stroke-quaternary)',
+                  active
+                    ? 'bg-(--ui-editor-surface-background) text-foreground [--tab-bg:var(--ui-editor-surface-background)]'
+                    : 'border-r border-(--ui-stroke-quaternary) text-(--ui-text-tertiary) [--tab-bg:var(--ui-sidebar-surface-background)] hover:bg-(--chrome-action-hover) hover:text-foreground'
+                )}
+                key={tab.id}
+                // Middle-click closes the tab, matching browser/IDE muscle
+                // memory. `onMouseDown` swallows the middle-button press so
+                // Chromium doesn't switch into autoscroll mode.
+                onAuxClick={event => {
+                  if (event.button !== 1) {
+                    return
+                  }
+
+                  event.preventDefault()
+                  closeRightRailTab(tab.id)
+                }}
+                onMouseDown={event => {
+                  if (event.button === 1) {
+                    event.preventDefault()
+                  }
+                }}
+              >
+                {active && (
+                  <span aria-hidden="true" className="absolute inset-x-0 top-0 h-px bg-(--ui-stroke-primary)" />
+                )}
+                <Tip label={tab.label}>
+                  <button
+                    aria-selected={active}
+                    className="flex h-full min-w-0 max-w-full items-center overflow-hidden pl-3 pr-2 text-left outline-none"
+                    onClick={() => selectRightRailTab(tab.id)}
+                    role="tab"
+                    type="button"
+                  >
+                    <span className="block min-w-0 truncate">{tab.label}</span>
+                  </button>
+                </Tip>
+                <span
+                  aria-hidden="true"
+                  className="pointer-events-none absolute inset-y-0 right-0 w-9 bg-[linear-gradient(to_right,transparent,var(--tab-bg)_55%)] opacity-0 transition-opacity group-hover/tab:opacity-100 group-focus-within/tab:opacity-100"
+                />
+                <button
+                  aria-label={t.preview.closeTab(tab.label)}
+                  className="pointer-events-none absolute right-1.5 top-1/2 grid size-4 -translate-y-1/2 place-items-center rounded-sm text-(--ui-text-tertiary) opacity-0 transition-[background-color,color,opacity] hover:bg-(--ui-bg-secondary) hover:text-foreground focus-visible:pointer-events-auto focus-visible:opacity-100 group-hover/tab:pointer-events-auto group-hover/tab:opacity-100 group-focus-within/tab:pointer-events-auto group-focus-within/tab:opacity-100"
+                  onClick={() => closeRightRailTab(tab.id)}
+                  type="button"
+                >
+                  <Codicon name="close" size="0.75rem" />
+                </button>
+              </div>
+            )
+          })}
+        </div>
+        <button
+          aria-label={t.preview.closePane}
+          className="mr-1.5 grid size-6 shrink-0 self-center place-items-center rounded-md text-(--ui-text-tertiary) opacity-0 transition-opacity hover:bg-(--ui-control-hover-background) hover:text-foreground focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sidebar-ring group-hover/rail-tabs:opacity-100 [-webkit-app-region:no-drag]"
+          onClick={closeRightRail}
+          type="button"
+        >
+          <Codicon name="close" size="0.75rem" />
+        </button>
+      </div>
+
+      <div className="min-h-0 flex-1 overflow-hidden">
+        <PreviewPane
+          embedded
+          onRestartServer={isPreview ? onRestartServer : undefined}
+          reloadRequest={previewReloadRequest}
+          setTitlebarToolGroup={setTitlebarToolGroup}
+          target={activeTab.target}
+        />
+      </div>
+    </aside>
+  )
+}

package/src/app/chat/scroll-to-bottom-button.test.tsx

@@ -0,0 +1,67 @@
+import { cleanup, fireEvent, render, screen } from '@testing-library/react'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+
+import { clearAllPrompts, setApprovalRequest } from '@/store/prompts'
+import { $activeSessionId } from '@/store/session'
+import { onScrollToBottomRequest, resetThreadScroll, setThreadAtBottom } from '@/store/thread-scroll'
+
+import { ScrollToBottomButton } from './scroll-to-bottom-button'
+
+function pendingApproval() {
+  $activeSessionId.set('sess-1')
+  setApprovalRequest({ command: 'rm -rf /tmp/x', description: 'dangerous command', sessionId: 'sess-1' })
+}
+
+afterEach(() => {
+  cleanup()
+  clearAllPrompts()
+  resetThreadScroll()
+  $activeSessionId.set(null)
+})
+
+// `getByRole('button')` excludes aria-hidden nodes, so "queryByRole null" is the
+// control's hidden (parked-at-bottom) state.
+describe('ScrollToBottomButton', () => {
+  it('stays hidden while parked at the bottom', () => {
+    render(<ScrollToBottomButton />)
+
+    expect(screen.queryByRole('button')).toBeNull()
+  })
+
+  it('is a plain jump-to-bottom control when scrolled up with no approval', () => {
+    setThreadAtBottom(false)
+    render(<ScrollToBottomButton />)
+
+    expect(screen.getByRole('button', { name: 'Scroll to bottom' })).toBeTruthy()
+    expect(screen.queryByText('Approval needed')).toBeNull()
+  })
+
+  it('morphs into the approval pill when scrolled up with a pending approval', () => {
+    pendingApproval()
+    setThreadAtBottom(false)
+    render(<ScrollToBottomButton />)
+
+    expect(screen.getByRole('button', { name: 'Approval needed' })).toBeTruthy()
+    expect(screen.getByText('Approval needed')).toBeTruthy()
+  })
+
+  it('does not morph while a pending approval is still in view (at bottom)', () => {
+    pendingApproval()
+    render(<ScrollToBottomButton />)
+
+    // Parked at bottom → control hidden, so it can't claim "approval needed".
+    expect(screen.queryByRole('button')).toBeNull()
+  })
+
+  it('re-arms sticky-bottom on click', () => {
+    const handler = vi.fn()
+    const stop = onScrollToBottomRequest(handler)
+    setThreadAtBottom(false)
+    render(<ScrollToBottomButton />)
+
+    fireEvent.click(screen.getByRole('button'))
+
+    expect(handler).toHaveBeenCalledTimes(1)
+    stop()
+  })
+})

package/src/app/chat/scroll-to-bottom-button.tsx

@@ -0,0 +1,74 @@
+import { useStore } from '@nanostores/react'
+import { useRef } from 'react'
+
+import { Codicon } from '@/components/ui/codicon'
+import { useI18n } from '@/i18n'
+import { triggerHaptic } from '@/lib/haptics'
+import { cn } from '@/lib/utils'
+import { $approvalRequest } from '@/store/prompts'
+import { $threadJumpButtonVisible, requestScrollToBottom } from '@/store/thread-scroll'
+
+/**
+ * Floating "jump to bottom" control. Sits centered just above the composer,
+ * clearing the out-of-flow status stack via the same measured-height CSS vars
+ * the thread's bottom clearance uses (`--composer-measured-height` +
+ * `--status-stack-measured-height`), so it never overlaps the queue / subagent
+ * / background cards. Visible only while the user has scrolled meaningfully
+ * away from the bottom; clicking re-arms sticky-bottom and pins the viewport.
+ *
+ * When the turn is BLOCKED on an approval, this same control morphs into an
+ * "Approval needed" pill — the only response surface is the inline Run/Reject
+ * bar on the parked tool row, which is always the bottom-most content, so the
+ * existing scroll-to-bottom action lands the user right on it. One control, no
+ * collision, no second scroll path (native scrollIntoView would scroll
+ * overflow:hidden ancestors that can't scroll back and wreck the layout).
+ *
+ * Enter/exit motion lives in styles.css under `.thread-jump-button` — a
+ * directional scale (contract in from 1.1, contract out to 0.9) keyed off
+ * `data-state`. `idle` (never-shown) stays silent so it can't flash on mount;
+ * `in`/`out` only swap once it has actually appeared.
+ */
+export function ScrollToBottomButton() {
+  const { t } = useI18n()
+  const visible = useStore($threadJumpButtonVisible)
+  const request = useStore($approvalRequest)
+  // Scrolled away while an approval is pending → the inline Run/Reject bar is
+  // below the fold. Relabel so the user knows the session needs them, not just
+  // that there's more to read.
+  const approval = visible && Boolean(request)
+  const hasShownRef = useRef(false)
+
+  if (visible) {
+    hasShownRef.current = true
+  }
+
+  const state = visible ? 'in' : hasShownRef.current ? 'out' : 'idle'
+  const label = approval ? t.assistant.approval.jumpToApproval : t.assistant.thread.scrollToBottom
+
+  return (
+    <button
+      aria-hidden={!visible}
+      aria-label={label}
+      className={cn(
+        'thread-jump-button absolute left-1/2 z-20 grid place-items-center backdrop-blur-[0.75rem] [-webkit-backdrop-filter:blur(0.75rem)]',
+        approval
+          ? 'h-8 grid-flow-col gap-1.5 rounded-full border border-primary/40 bg-(--composer-fill) px-3 text-primary hover:bg-primary/10'
+          : 'size-8 rounded-full border border-border/65 bg-(--composer-fill) text-muted-foreground hover:text-foreground',
+        !visible && 'pointer-events-none'
+      )}
+      data-state={state}
+      onClick={() => {
+        triggerHaptic('selection')
+        requestScrollToBottom()
+      }}
+      style={{
+        bottom: 'calc(var(--composer-measured-height) + var(--status-stack-measured-height) + 0.625rem)'
+      }}
+      tabIndex={visible ? 0 : -1}
+      type="button"
+    >
+      <Codicon name="arrow-down" size={approval ? '0.875rem' : '1rem'} />
+      {approval && <span className="text-xs font-medium">{label}</span>}
+    </button>
+  )
+}

package/src/app/chat/sidebar/cron-jobs-section.tsx

@@ -0,0 +1,325 @@
+import { useStore } from '@nanostores/react'
+import { useEffect, useMemo, useState } from 'react'
+
+import { Codicon } from '@/components/ui/codicon'
+import { DisclosureCaret } from '@/components/ui/disclosure-caret'
+import { SidebarGroup, SidebarGroupContent } from '@/components/ui/sidebar'
+import { Tip } from '@/components/ui/tooltip'
+import { getCronJobRuns, type SessionInfo } from '@/nastech'
+import { useI18n } from '@/i18n'
+import { cn } from '@/lib/utils'
+import { $selectedStoredSessionId } from '@/store/session'
+import type { CronJob } from '@/types/nastech'
+
+import { jobState, jobTitle, STATE_DOT } from '../../cron/job-state'
+import { SidebarPanelLabel } from '../../shell/sidebar-label'
+
+const INACTIVE_STATES = new Set(['completed', 'disabled', 'error', 'paused'])
+
+// Recent runs shown in the inline quick-peek — enough to glance at history
+// without turning the sidebar into the full Cron page.
+const PEEK_RUN_LIMIT = 5
+
+// Runs are written by the background scheduler tick (no UI signal), so poll the
+// open peek so a freshly-fired run shows up within a few seconds.
+const PEEK_POLL_INTERVAL_MS = 8000
+
+const relativeFmt = new Intl.RelativeTimeFormat(undefined, { numeric: 'auto', style: 'short' })
+
+// Localized "in 5 min" / "2 hr ago" without hand-rolled strings — picks the
+// coarsest sensible unit so a daily job reads "in 14 hr", not "in 840 min".
+function relativeTime(targetMs: number, nowMs: number): string {
+  const diff = targetMs - nowMs
+  const abs = Math.abs(diff)
+  const sign = diff < 0 ? -1 : 1
+
+  if (abs < 60_000) {return relativeFmt.format(sign * Math.round(abs / 1000), 'second')}
+
+  if (abs < 3_600_000) {return relativeFmt.format(sign * Math.round(abs / 60_000), 'minute')}
+
+  if (abs < 86_400_000) {return relativeFmt.format(sign * Math.round(abs / 3_600_000), 'hour')}
+
+  return relativeFmt.format(sign * Math.round(abs / 86_400_000), 'day')
+}
+
+function nextRunMs(job: CronJob): null | number {
+  if (!job.next_run_at) {return null}
+
+  const ms = Date.parse(job.next_run_at)
+
+  return Number.isNaN(ms) ? null : ms
+}
+
+// Runs all belong to the same job, so the run name just repeats the job name —
+// the timestamp is what tells them apart. Compact (no year, no seconds) for the
+// narrow sidebar.
+function formatRunTime(seconds?: null | number): string {
+  if (!seconds) {return '—'}
+
+  const date = new Date(seconds * 1000)
+
+  return Number.isNaN(date.valueOf())
+    ? '—'
+    : date.toLocaleString(undefined, { day: 'numeric', hour: 'numeric', minute: '2-digit', month: 'short' })
+}
+
+interface SidebarCronJobsSectionProps {
+  jobs: CronJob[]
+  label: string
+  max?: number
+  // Open a run session's chat (1 click to output).
+  onOpenRun: (sessionId: string) => void
+  // Open the full Cron page focused on this job (manage / full history).
+  onManageJob: (jobId: string) => void
+  // Fire the job now.
+  onTriggerJob: (jobId: string) => void
+  onToggle: () => void
+  open: boolean
+}
+
+export function SidebarCronJobsSection({
+  jobs,
+  label,
+  max = 50,
+  onManageJob,
+  onOpenRun,
+  onTriggerJob,
+  onToggle,
+  open
+}: SidebarCronJobsSectionProps) {
+  const [nowMs, setNowMs] = useState(() => Date.now())
+  // Single-open inline peek so the section stays scannable.
+  const [peekJobId, setPeekJobId] = useState<null | string>(null)
+
+  // One clock for the whole section (rows are pure) so the countdowns tick
+  // without re-rendering the rest of the sidebar. Only runs while expanded.
+  useEffect(() => {
+    if (!open) {return}
+
+    const id = window.setInterval(() => setNowMs(Date.now()), 1000)
+
+    return () => window.clearInterval(id)
+  }, [open])
+
+  // Upcoming first (soonest next run), jobs with no next run sink to the bottom,
+  // then alphabetical for stability.
+  const sorted = useMemo(() => {
+    return [...jobs].sort((a, b) => {
+      const an = nextRunMs(a)
+      const bn = nextRunMs(b)
+
+      if (an !== null && bn !== null && an !== bn) {return an - bn}
+
+      if (an === null && bn !== null) {return 1}
+
+      if (an !== null && bn === null) {return -1}
+
+      return jobTitle(a).localeCompare(jobTitle(b))
+    })
+  }, [jobs])
+
+  const shown = sorted.slice(0, max)
+  // When capped, signal "50+" rather than implying the list is complete.
+  const countLabel = jobs.length > max ? `${max}+` : String(jobs.length)
+
+  return (
+    <SidebarGroup className="shrink-0 p-0 pb-1">
+      <div className="group/section flex shrink-0 items-center justify-between pb-1 pt-1.5">
+        <button
+          className="group/section-label flex w-fit items-center gap-1 bg-transparent text-left leading-none"
+          onClick={onToggle}
+          type="button"
+        >
+          <SidebarPanelLabel>{label}</SidebarPanelLabel>
+          <span className="text-[0.6875rem] font-medium text-(--ui-text-quaternary)">{countLabel}</span>
+          <DisclosureCaret
+            className="text-(--ui-text-tertiary) opacity-0 transition group-hover/section-label:opacity-100"
+            open={open}
+          />
+        </button>
+      </div>
+      {open && (
+        <SidebarGroupContent className="flex max-h-72 shrink-0 flex-col gap-px overflow-y-auto overscroll-contain pb-1.75">
+          {shown.map(job => (
+            <CronJobSidebarRow
+              expanded={peekJobId === job.id}
+              job={job}
+              key={job.id}
+              nowMs={nowMs}
+              onManage={() => onManageJob(job.id)}
+              onOpenRun={onOpenRun}
+              onTogglePeek={() => setPeekJobId(prev => (prev === job.id ? null : job.id))}
+              onTrigger={() => onTriggerJob(job.id)}
+            />
+          ))}
+        </SidebarGroupContent>
+      )}
+    </SidebarGroup>
+  )
+}
+
+function CronJobSidebarRow({
+  expanded,
+  job,
+  nowMs,
+  onManage,
+  onOpenRun,
+  onTogglePeek,
+  onTrigger
+}: {
+  expanded: boolean
+  job: CronJob
+  nowMs: number
+  onManage: () => void
+  onOpenRun: (sessionId: string) => void
+  onTogglePeek: () => void
+  onTrigger: () => void
+}) {
+  const { t } = useI18n()
+  const c = t.cron
+  const state = jobState(job)
+  const next = nextRunMs(job)
+  const label = jobTitle(job)
+
+  const meta = INACTIVE_STATES.has(state)
+    ? (c.states[state] ?? state)
+    : next !== null
+      ? relativeTime(next, nowMs)
+      : '—'
+
+  return (
+    <div>
+      <div className="group/cron relative grid min-h-[1.625rem] grid-cols-[minmax(0,1fr)_auto] items-center rounded-md hover:bg-(--chrome-action-hover)">
+        {/* Lead with the dot in the same w-3.5 cell + pl-2 the session rows use
+            so the cron dots line up with the sessions above; the caret sits next
+            to the label (matching the other sidebar disclosures) and the whole
+            label area toggles the run peek. */}
+        <button
+          aria-expanded={expanded}
+          aria-label={expanded ? c.hideRuns : c.showRuns}
+          className="flex min-w-0 items-center gap-1.5 bg-transparent py-0.5 pl-2 pr-1 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40"
+          onClick={onTogglePeek}
+          title={label}
+          type="button"
+        >
+          <span className="grid w-3.5 shrink-0 place-items-center">
+            <span
+              aria-hidden="true"
+              className={cn(
+                'size-1 rounded-full',
+                STATE_DOT[state] ?? 'bg-(--ui-text-quaternary)',
+                state === 'running' && 'size-1.5 animate-pulse'
+              )}
+            />
+          </span>
+          <span className="min-w-0 truncate text-[0.8125rem] text-(--ui-text-secondary) group-hover/cron:text-foreground">
+            {label}
+          </span>
+          <DisclosureCaret
+            className={cn(
+              'shrink-0 text-(--ui-text-tertiary) transition',
+              expanded ? 'opacity-100' : 'opacity-0 group-hover/cron:opacity-100'
+            )}
+            open={expanded}
+          />
+        </button>
+        {/* Trailing cluster: countdown by default, quick actions on hover. */}
+        <div className="flex items-center gap-0.5 justify-self-end pr-1">
+          <span className="text-[0.6875rem] text-(--ui-text-tertiary) tabular-nums group-hover/cron:hidden">
+            {meta}
+          </span>
+          <div className="hidden items-center gap-0.5 group-hover/cron:flex">
+            <Tip label={c.triggerNow}>
+              <button
+                aria-label={c.triggerNow}
+                className="grid size-5 place-items-center rounded-sm text-(--ui-text-tertiary) hover:bg-(--ui-control-hover-background) hover:text-foreground"
+                onClick={onTrigger}
+                type="button"
+              >
+                <Codicon name="zap" size="0.75rem" />
+              </button>
+            </Tip>
+            <Tip label={c.manage}>
+              <button
+                aria-label={c.manage}
+                className="grid size-5 place-items-center rounded-sm text-(--ui-text-tertiary) hover:bg-(--ui-control-hover-background) hover:text-foreground"
+                onClick={onManage}
+                type="button"
+              >
+                <Codicon name="watch" size="0.75rem" />
+              </button>
+            </Tip>
+          </div>
+        </div>
+      </div>
+      {expanded && <CronJobSidebarRuns jobId={job.id} onOpenRun={onOpenRun} />}
+    </div>
+  )
+}
+
+function CronJobSidebarRuns({
+  jobId,
+  onOpenRun
+}: {
+  jobId: string
+  onOpenRun: (sessionId: string) => void
+}) {
+  const { t } = useI18n()
+  const c = t.cron
+  const selectedSessionId = useStore($selectedStoredSessionId)
+  const [runs, setRuns] = useState<null | SessionInfo[]>(null)
+
+  useEffect(() => {
+    let cancelled = false
+
+    const load = () =>
+      getCronJobRuns(jobId, PEEK_RUN_LIMIT)
+        .then(result => {
+          if (!cancelled) {setRuns(result)}
+        })
+        .catch(() => {
+          if (!cancelled) {setRuns(prev => prev ?? [])}
+        })
+
+    void load()
+
+    const intervalId = window.setInterval(() => {
+      if (document.visibilityState === 'visible') {void load()}
+    }, PEEK_POLL_INTERVAL_MS)
+
+    return () => {
+      cancelled = true
+      window.clearInterval(intervalId)
+    }
+  }, [jobId])
+
+  return (
+    <div className="mb-1 ml-[1.375rem] flex flex-col gap-px">
+      {runs === null ? (
+        <div className="flex items-center gap-1.5 py-1 pl-1 text-[0.6875rem] text-(--ui-text-tertiary)">
+          <Codicon name="loading" size="0.75rem" spinning />
+        </div>
+      ) : runs.length === 0 ? (
+        <div className="py-1 pl-1 text-[0.6875rem] text-(--ui-text-tertiary)">{c.noRuns}</div>
+      ) : (
+        <>
+          {runs.map(run => (
+            <button
+              className={cn(
+                'truncate rounded-md px-1.5 py-0.5 text-left text-[0.6875rem] tabular-nums focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40',
+                run.id === selectedSessionId
+                  ? 'bg-(--ui-row-active-background) text-foreground'
+                  : 'text-(--ui-text-secondary) hover:bg-(--chrome-action-hover) hover:text-foreground'
+              )}
+              key={run.id}
+              onClick={() => onOpenRun(run.id)}
+              type="button"
+            >
+              {formatRunTime(run.last_active || run.started_at)}
+            </button>
+          ))}
+        </>
+      )}
+    </div>
+  )
+}