@spacek33z/autoauto 0.0.1

package/src/components/ModelPicker.tsx

@@ -0,0 +1,97 @@
+import { useCallback, useEffect, useState } from "react"
+import { useKeyboard } from "@opentui/react"
+import type { ModelSlot } from "../lib/config.ts"
+import type { AgentProviderID } from "../lib/agent/index.ts"
+import { loadModelPickerOptions, type ModelPickerOption } from "../lib/model-options.ts"
+import { formatShellError } from "../lib/git.ts"
+
+interface SelectOption {
+  name: string
+  description: string
+  value?: ModelSlot
+}
+
+interface ModelPickerProps {
+  cwd: string
+  title: string
+  providerId: AgentProviderID
+  onSelect: (slot: ModelSlot) => void
+  onCancel: () => void
+}
+
+export function ModelPicker({ cwd, title, providerId, onSelect, onCancel }: ModelPickerProps) {
+  const [options, setOptions] = useState<SelectOption[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  const load = useCallback(async (forceRefresh = false) => {
+    setLoading(true)
+    setError(null)
+    try {
+      const models = await loadModelPickerOptions(providerId, cwd, forceRefresh)
+      if (models.length === 0) {
+        setOptions([{
+          name: "No models available",
+          description: providerId === "opencode" ? "Run opencode auth login or /connect" : "No models found",
+        }])
+      } else {
+        setOptions(models.map(toSelectOption))
+      }
+    } catch (err) {
+      const message = formatShellError(err)
+      setError(message)
+      setOptions([{ name: "Unavailable", description: message }])
+    } finally {
+      setLoading(false)
+    }
+  }, [cwd, providerId])
+
+  useEffect(() => {
+    load().catch(() => {})
+  }, [load])
+
+  useKeyboard((key) => {
+    if (key.name === "escape") {
+      onCancel()
+      return
+    }
+    if (key.name === "r" && providerId === "opencode") {
+      load(true).catch(() => {})
+    }
+  })
+
+  const hint = providerId === "opencode"
+    ? "  Enter: select | r: refresh | Escape: cancel"
+    : "  Enter: select | Escape: cancel"
+
+  return (
+    <box flexDirection="column" flexGrow={1} border borderStyle="rounded" title={title}>
+      <box height={1} />
+      <text fg="#888888">{hint}</text>
+      <box height={1} />
+      {error && <text fg="#ff5555">{`  Error: ${error}`}</text>}
+      {loading && <text fg="#888888">{"  Loading models..."}</text>}
+      <select
+        flexGrow={1}
+        focused
+        options={options}
+        selectedBackgroundColor="#333333"
+        selectedTextColor="#ffffff"
+        onSelect={(_index: number, option: SelectOption | null) => {
+          if (!option?.value) return
+          onSelect(option.value)
+        }}
+      />
+    </box>
+  )
+}
+
+function toSelectOption(option: ModelPickerOption): SelectOption {
+  // Strip provider prefix from labels (e.g. "Claude / Sonnet" → "Sonnet")
+  const label = option.label.replace(/^(?:Claude|Codex|OpenCode)\s*\/\s*/, "")
+  return {
+    name: label,
+    description: option.description ?? "",
+    value: option.value,
+  }
+}

package/src/components/PostUpdatePrompt.tsx

@@ -0,0 +1,46 @@
+import { useState } from "react"
+import { useKeyboard } from "@opentui/react"
+
+interface PostUpdatePromptProps {
+  programSlug: string
+  onStartRun: () => void
+  onGoHome: () => void
+}
+
+export function PostUpdatePrompt({ programSlug, onStartRun, onGoHome }: PostUpdatePromptProps) {
+  const [selected, setSelected] = useState(0)
+
+  useKeyboard((key) => {
+    if (key.name === "up" || key.name === "k") {
+      setSelected(0)
+    } else if (key.name === "down" || key.name === "j") {
+      setSelected(1)
+    } else if (key.name === "return") {
+      if (selected === 0) onStartRun()
+      else onGoHome()
+    } else if (key.name === "escape") {
+      onGoHome()
+    }
+  })
+
+  return (
+    <box flexDirection="column" flexGrow={1} border borderStyle="rounded" title="Program Updated">
+      <box flexDirection="column" padding={1}>
+        <text fg="#9ece6a"><strong>Program updated</strong></text>
+        <box height={1} />
+        <text selectable>Program: {programSlug}</text>
+        <box height={1} />
+        <text><strong>What would you like to do?</strong></text>
+        <box height={1} />
+        <text fg={selected === 0 ? "#ffffff" : "#888888"}>
+          {selected === 0 ? " > " : "   "}
+          Start a new run
+        </text>
+        <text fg={selected === 1 ? "#ffffff" : "#888888"}>
+          {selected === 1 ? " > " : "   "}
+          Go back to home
+        </text>
+      </box>
+    </box>
+  )
+}

package/src/components/ResultsTable.tsx

@@ -0,0 +1,172 @@
+import { memo, useState, useEffect, useMemo } from "react"
+import { useKeyboard } from "@opentui/react"
+import type { ExperimentResult, ExperimentStatus } from "../lib/run.ts"
+import { parseSecondaryValues } from "../lib/run.ts"
+import type { SecondaryMetric } from "../lib/programs.ts"
+import { allocateColumnWidths, formatCell, type ColumnSpec } from "../lib/format.ts"
+
+interface ResultsTableProps {
+  results: ExperimentResult[]
+  metricField: string
+  secondaryMetrics?: Record<string, SecondaryMetric>
+  width: number
+  experimentNumber?: number
+  focused?: boolean
+  selectedResult?: ExperimentResult | null
+  onSelect?: (result: ExperimentResult) => void
+}
+
+export function statusColor(status: ExperimentStatus): string {
+  switch (status) {
+    case "keep": return "#9ece6a"
+    case "discard": return "#ff5555"
+    case "crash": return "#ff5555"
+    case "measurement_failure": return "#e0af68"
+  }
+}
+
+const ResultRow = memo(function ResultRow({ result: r, secondaryFields, highlighted, selected, columnWidths, lineWidth, rowWidth }: {
+  result: ExperimentResult
+  secondaryFields: string[]
+  highlighted?: boolean
+  selected?: boolean
+  columnWidths: number[]
+  lineWidth: number
+  rowWidth: number
+}) {
+  const bg = selected ? "#3d59a1" : highlighted ? "#292e42" : undefined
+  const fg = statusColor(r.status)
+
+  const secondaryValues = secondaryFields.length > 0 ? parseSecondaryValues(r.secondary_values) : null
+  const fixedCells = [
+    formatCell(String(r.experiment_number), columnWidths[0]),
+    formatCell(r.commit, columnWidths[1]),
+    formatCell(r.metric_value != null ? String(r.metric_value) : "—", columnWidths[2]),
+  ]
+  const secondaryCells = secondaryFields.map((field, i) => {
+    const val = secondaryValues?.secondary_metrics[field]
+    return formatCell(val != null ? String(val) : "—", columnWidths[3 + i])
+  })
+  const trailingCells = [
+    formatCell(r.status, columnWidths[3 + secondaryFields.length]),
+    formatCell(r.description, columnWidths[4 + secondaryFields.length]),
+  ]
+
+  const line = formatCell(`${fixedCells.join("")}${secondaryCells.join("")}${trailingCells.join("")}`, lineWidth)
+
+  return (
+    <box width={rowWidth} paddingX={1} backgroundColor={bg}>
+      <text width={lineWidth} fg={fg} selectable>
+        {line}
+      </text>
+    </box>
+  )
+})
+
+// outer border (2) + paddingX (2)
+const CHROME_WIDTH = 4
+const ROW_CHROME_WIDTH = 2
+
+function labelWidth(label: string, base: number, max: number): number {
+  return Math.min(Math.max(base, label.length + 2), max)
+}
+
+export function ResultsTable({ results, metricField, secondaryMetrics, width, experimentNumber, focused, selectedResult, onSelect }: ResultsTableProps) {
+  const secondaryFields = useMemo(() => secondaryMetrics ? Object.keys(secondaryMetrics) : [], [secondaryMetrics])
+
+  // Skip the baseline row (#0) — it's in the stats header
+  const experiments = results.filter(r => r.experiment_number > 0)
+  const innerWidth = Math.max(width - CHROME_WIDTH, 0)
+  const rowWidth = innerWidth + ROW_CHROME_WIDTH
+
+  const columnSpecs = useMemo(() => {
+    const fixedCols: ColumnSpec[] = [
+      { ideal: 4, min: 3 }, // #
+      { ideal: 10, min: 0 }, // commit collapses first on narrow terminals
+      { ideal: labelWidth(metricField, 16, 24), min: 8 },
+    ]
+    const secondaryCols = secondaryFields.map((field) => ({
+      ideal: labelWidth(field, 12, 18),
+      min: 8,
+    }))
+    const statusCol = { ideal: 20, min: 8 }
+    const usedBeforeDescription = [...fixedCols, ...secondaryCols, statusCol]
+      .reduce((sum, spec) => sum + spec.ideal, 0)
+    const trailingCols: ColumnSpec[] = [
+      statusCol,
+      { ideal: Math.max(innerWidth - usedBeforeDescription, 24), min: 8 },
+    ]
+    return [...fixedCols, ...secondaryCols, ...trailingCols]
+  }, [metricField, secondaryFields, innerWidth])
+
+  const columnWidths = useMemo(() => allocateColumnWidths(innerWidth, columnSpecs), [innerWidth, columnSpecs])
+
+  const [highlightIndex, setHighlightIndex] = useState(0)
+
+  // Reset highlight to latest row when table gains focus
+  useEffect(() => {
+    if (focused && experiments.length > 0) {
+      setHighlightIndex(experiments.length - 1)
+    }
+  }, [focused, experiments.length])
+
+  useKeyboard((key) => {
+    if (!focused || experiments.length === 0) return
+
+    if (key.name === "up" || key.name === "k") {
+      setHighlightIndex(i => Math.max(0, i - 1))
+    } else if (key.name === "down" || key.name === "j") {
+      setHighlightIndex(i => Math.min(experiments.length - 1, i + 1))
+    } else if (key.name === "enter") {
+      onSelect?.(experiments[highlightIndex])
+    }
+  })
+
+  // Keep highlight in bounds when results change
+  const safeHighlight = experiments.length > 0 ? Math.min(highlightIndex, experiments.length - 1) : 0
+
+  // Build header
+  const headerCells = [
+    formatCell("#", columnWidths[0]),
+    formatCell("commit", columnWidths[1]),
+    formatCell(metricField, columnWidths[2]),
+    ...secondaryFields.map((field, i) => formatCell(field, columnWidths[3 + i])),
+    formatCell("status", columnWidths[3 + secondaryFields.length]),
+    formatCell("description", columnWidths[4 + secondaryFields.length]),
+  ]
+  const headerLine = formatCell(headerCells.join(""), innerWidth)
+
+  return (
+    <box flexDirection="column" flexGrow={1}>
+      <box width={rowWidth} paddingX={1}>
+        <text width={innerWidth} fg="#ffffff">
+          {headerLine}
+        </text>
+      </box>
+      <scrollbox flexGrow={1} stickyScroll={!focused} stickyStart="bottom">
+        {experiments.length === 0 ? (
+          <box width={rowWidth} paddingX={1}>
+            <text width={innerWidth} fg="#ffffff">
+              {formatCell(experimentNumber != null && experimentNumber > 0
+                ? `Running experiment #${experimentNumber}...`
+                : "Running baseline measurement...", innerWidth)}
+            </text>
+          </box>
+        ) : (
+          experiments.map((r, i) => (
+            <ResultRow
+              key={r.experiment_number}
+              result={r}
+              secondaryFields={secondaryFields}
+              columnWidths={columnWidths}
+              lineWidth={innerWidth}
+              rowWidth={rowWidth}
+              highlighted={focused && i === safeHighlight}
+              selected={selectedResult?.experiment_number === r.experiment_number}
+            />
+          ))
+        )}
+      </scrollbox>
+    </box>
+  )
+}

package/src/components/RunCompletePrompt.tsx

@@ -0,0 +1,90 @@
+import { useState } from "react"
+import { useKeyboard } from "@opentui/react"
+import type { RunState } from "../lib/run.ts"
+import { getRunStats } from "../lib/run.ts"
+import type { TerminationReason } from "../lib/experiment-loop.ts"
+
+interface RunCompletePromptProps {
+  state: RunState
+  direction: "lower" | "higher"
+  terminationReason: TerminationReason | null
+  error: string | null
+  onFinalize: () => void
+  onAbandon: () => void
+  onUpdateProgram: () => void
+}
+
+export function RunCompletePrompt({
+  state,
+  direction,
+  terminationReason,
+  error,
+  onFinalize,
+  onAbandon,
+  onUpdateProgram,
+}: RunCompletePromptProps) {
+  const [selected, setSelected] = useState(0)
+  const stats = getRunStats(state, direction)
+
+  useKeyboard((key) => {
+    if (key.name === "up" || key.name === "k") {
+      setSelected((s) => Math.max(0, s - 1))
+    } else if (key.name === "down" || key.name === "j") {
+      setSelected((s) => Math.min(2, s + 1))
+    } else if (key.name === "return") {
+      if (selected === 0) onFinalize()
+      else if (selected === 1) onUpdateProgram()
+      else onAbandon()
+    } else if (key.name === "f") {
+      onFinalize()
+    } else if (key.name === "u") {
+      onUpdateProgram()
+    } else if (key.name === "a") {
+      onAbandon()
+    }
+  })
+
+  const reasonLabel =
+    terminationReason === "aborted" ? "Aborted by user"
+    : terminationReason === "max_experiments" ? `Reached max experiments (${state.experiment_number})`
+    : terminationReason === "stagnation" ? "Stopped — no improvements (stagnation)"
+    : "Run complete"
+
+  const improvementStr = stats.improvement_pct !== 0
+    ? ` (${stats.improvement_pct > 0 ? "+" : ""}${stats.improvement_pct.toFixed(1)}%)`
+    : ""
+
+  return (
+    <box flexDirection="column" flexGrow={1} border borderStyle="rounded" title="Run Complete">
+      <box flexDirection="column" padding={1}>
+        <text fg="#9ece6a" selectable><strong>{reasonLabel}</strong></text>
+        <box height={1} />
+        <text selectable>Program: {state.program_slug}</text>
+        <text selectable>Branch: {state.branch_name}</text>
+        <text selectable>Experiments: {stats.total_experiments} ({stats.total_keeps} kept, {stats.total_discards} discarded, {stats.total_crashes} crashed)</text>
+        <text selectable>Original baseline: {state.original_baseline}</text>
+        <text selectable>Best metric: {state.best_metric}{improvementStr}</text>
+        {stats.total_keeps > 0 && (
+          <text selectable>Keep rate: {(stats.keep_rate * 100).toFixed(0)}%</text>
+        )}
+        {error && <text fg="#ff5555" selectable>Error: {error}</text>}
+
+        <box height={1} />
+        <text><strong>What would you like to do?</strong></text>
+        <box height={1} />
+        <text fg={selected === 0 ? "#ffffff" : "#888888"}>
+          {selected === 0 ? " > " : "   "}
+          Finalize (review & package changes)
+        </text>
+        <text fg={selected === 1 ? "#ffffff" : "#888888"}>
+          {selected === 1 ? " > " : "   "}
+          Update Program (edit config/scripts)
+        </text>
+        <text fg={selected === 2 ? "#ffffff" : "#888888"}>
+          {selected === 2 ? " > " : "   "}
+          Abandon (keep branch as-is)
+        </text>
+      </box>
+    </box>
+  )
+}

package/src/components/RunSettingsOverlay.tsx

@@ -0,0 +1,49 @@
+interface RunSettingsOverlayProps {
+  maxExpText: string
+  experimentNumber: number
+  validationError: string | null
+}
+
+export function RunSettingsOverlay({ maxExpText, experimentNumber, validationError }: RunSettingsOverlayProps) {
+  const parsed = parseInt(maxExpText, 10)
+  const hasMax = !isNaN(parsed) && parsed > 0
+
+  return (
+    <box
+      position="absolute"
+      left={0}
+      top={0}
+      width="100%"
+      height="100%"
+      justifyContent="center"
+      alignItems="center"
+      zIndex={100}
+    >
+      <box
+        border
+        borderStyle="rounded"
+        title="Run Settings"
+        flexDirection="column"
+        paddingX={1}
+        width={50}
+        backgroundColor="#1a1b26"
+      >
+        <box>
+          <text>
+            <span fg="#7aa2f7"><strong>{`Max Experiments: ${maxExpText}`}<span fg="#7aa2f7">{"\u2588"}</span></strong></span>
+            {"  "}
+            {hasMax && (
+              <span fg="#666666">{`(${experimentNumber} of ${parsed} done)`}</span>
+            )}
+          </text>
+        </box>
+        {validationError ? (
+          <text fg="#ff5555" selectable>{validationError}</text>
+        ) : (
+          <text fg="#888888">Type a number to set the experiment limit</text>
+        )}
+        <text fg="#666666">Esc: close</text>
+      </box>
+    </box>
+  )
+}

package/src/components/RunsTable.tsx

@@ -0,0 +1,219 @@
+import { memo } from "react"
+import type { RunInfo, RunState } from "../lib/run.ts"
+import type { ProgramConfig } from "../lib/programs.ts"
+import { allocateColumnWidths, formatCell } from "../lib/format.ts"
+import { formatModelSlot, type EffortLevel } from "../lib/config.ts"
+
+export interface RunsTableProps {
+  runs: RunInfo[]
+  /** Map from program_slug → ProgramConfig for computing gains */
+  programConfigs: Record<string, ProgramConfig>
+  width: number
+  focused?: boolean
+  selectedIndex?: number
+}
+
+function phaseColor(state: RunState | null): string {
+  if (!state) return "#666666"
+  switch (state.phase) {
+    case "agent_running":
+    case "measuring":
+    case "baseline":
+      return "#7aa2f7" // blue — in progress
+    case "complete":
+      return "#9ece6a" // green
+    case "crashed":
+      return "#ff5555" // red
+    case "stopping":
+    case "finalizing":
+      return "#e0af68" // yellow
+    default:
+      return "#666666" // dim
+  }
+}
+
+function formatTokens(n: number | undefined): string {
+  if (n == null || n === 0) return "—"
+  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`
+  if (n >= 1_000) return `${(n / 1_000).toFixed(0)}K`
+  return String(n)
+}
+
+function formatDuration(startedAt: string, updatedAt: string, phase: string): string {
+  const start = new Date(startedAt).getTime()
+  const end = phase === "complete" || phase === "crashed"
+    ? new Date(updatedAt).getTime()
+    : Date.now()
+  const ms = Math.max(0, end - start)
+  const totalSec = Math.floor(ms / 1000)
+  const hours = Math.floor(totalSec / 3600)
+  const minutes = Math.floor((totalSec % 3600) / 60)
+  const seconds = totalSec % 60
+  if (hours > 0) return `${hours}h ${minutes}m`
+  return `${minutes}m ${seconds}s`
+}
+
+function formatGains(
+  state: RunState,
+  config: ProgramConfig | undefined,
+): { text: string; color: string } {
+  const hasKeeps = state.total_keeps > 0
+
+  if (!hasKeeps) {
+    return { text: "—", color: "#666666" }
+  }
+
+  if (!config) {
+    return { text: "—", color: "#666666" }
+  }
+
+  const original = state.original_baseline
+  const best = state.best_metric
+
+  if (original === 0) {
+    return { text: "—", color: "#666666" }
+  }
+
+  const absDelta = best - original
+  const relPct = ((best - original) / Math.abs(original)) * 100
+
+  const isGood = config.direction === "lower" ? absDelta < 0 : absDelta > 0
+  const color = isGood ? "#9ece6a" : "#ff5555"
+
+  const sign = absDelta >= 0 ? "+" : ""
+  const absStr = Math.abs(absDelta) >= 1000
+    ? `${sign}${(absDelta / 1000).toFixed(1)}K`
+    : `${sign}${Number(absDelta.toFixed(2))}`
+  const relStr = `${sign}${relPct.toFixed(1)}%`
+
+  return { text: `${absStr} (${relStr})`, color }
+}
+
+const VALID_EFFORTS = new Set<string>(["low", "medium", "high", "max"])
+
+function formatModelEffort(state: RunState): string {
+  if (!state.model) return "—"
+  const provider = state.provider === "opencode" || state.provider === "codex" ? state.provider : "claude"
+  const effort: EffortLevel = VALID_EFFORTS.has(state.effort ?? "") ? state.effort as EffortLevel : "high"
+  if (provider === "opencode") {
+    return formatModelSlot({ provider, model: state.model, effort }, true)
+  }
+  // Short format: "sonnet/high", "cx/sonnet/high", "opus/max"
+  const prefix = provider === "codex" ? "cx/" : ""
+  return state.effort ? `${prefix}${state.model}/${state.effort}` : `${prefix}${state.model}`
+}
+
+
+
+const COL_STATUS = 2    // color dot
+const COL_PROGRAM = 30
+const COL_EXP = 5       // "##"
+const COL_MODEL = 16    // "cx/sonnet/high" or "sonnet/high"
+const COL_TOKENS = 7
+const COL_TIME = 9
+const COL_GAINS_MIN = 16
+const CHROME = 4 // border + padding
+
+interface RunColumnWidths {
+  status: number
+  program: number
+  exp: number
+  model: number
+  tokens: number
+  time: number
+  gains: number
+}
+
+const RunRow = memo(function RunRow({
+  run,
+  config,
+  widths,
+  selected,
+}: {
+  run: RunInfo
+  config: ProgramConfig | undefined
+  widths: RunColumnWidths
+  selected: boolean
+}) {
+  const state = run.state
+  if (!state) return null
+
+  const dotColor = phaseColor(state)
+  const totalExp = state.total_keeps + state.total_discards + state.total_crashes
+  const gains = formatGains(state, config)
+  const slug = state.program_slug
+
+  return (
+    <box paddingX={1} backgroundColor={selected ? "#333333" : undefined}>
+      <text selectable>
+        <span fg={dotColor}>{formatCell("● ", widths.status)}</span>
+        <span fg="#ffffff">{formatCell(slug, widths.program)}</span>
+        <span fg="#ffffff">{formatCell(String(totalExp), widths.exp)}</span>
+        <span fg="#ffffff">{formatCell(formatModelEffort(state), widths.model)}</span>
+        <span fg="#ffffff">{formatCell(formatTokens(state.total_tokens), widths.tokens)}</span>
+        <span fg="#ffffff">{formatCell(formatDuration(state.started_at, state.updated_at, state.phase), widths.time)}</span>
+        <span fg={gains.color}>{formatCell(gains.text, widths.gains)}</span>
+      </text>
+    </box>
+  )
+})
+
+export function RunsTable({ runs, programConfigs, width, focused = false, selectedIndex = 0 }: RunsTableProps) {
+  const innerWidth = Math.max(width - CHROME, 0)
+  const fixedWidth = COL_STATUS + COL_PROGRAM + COL_EXP + COL_MODEL + COL_TOKENS + COL_TIME
+  const [statusWidth, programWidth, expWidth, modelWidth, tokensWidth, timeWidth, gainsWidth] = allocateColumnWidths(innerWidth, [
+    { ideal: COL_STATUS, min: 0 },
+    { ideal: COL_PROGRAM, min: 8 },
+    { ideal: COL_EXP, min: 0 },
+    { ideal: COL_MODEL, min: 0 },
+    { ideal: COL_TOKENS, min: 0 },
+    { ideal: COL_TIME, min: 0 },
+    { ideal: Math.max(innerWidth - fixedWidth, COL_GAINS_MIN), min: 0 },
+  ])
+  const widths = {
+    status: statusWidth,
+    program: programWidth,
+    exp: expWidth,
+    model: modelWidth,
+    tokens: tokensWidth,
+    time: timeWidth,
+    gains: gainsWidth,
+  }
+
+  const validRuns = runs.filter((r) => r.state != null)
+
+  return (
+    <box flexDirection="column" flexGrow={1}>
+      {/* Header */}
+      <box paddingX={1}>
+        <text fg="#666666">
+          {formatCell("", widths.status)}
+          {formatCell("program", widths.program)}
+          {formatCell("exp", widths.exp)}
+          {formatCell("model", widths.model)}
+          {formatCell("tokens", widths.tokens)}
+          {formatCell("time", widths.time)}
+          {formatCell("gains", widths.gains)}
+        </text>
+      </box>
+
+      <scrollbox flexGrow={1} stickyScroll stickyStart="bottom">
+        {validRuns.length === 0 ? (
+          <box paddingX={1}>
+            <text fg="#666666">No runs yet.</text>
+          </box>
+        ) : (
+          validRuns.map((run, index) => (
+            <RunRow
+              key={`${run.state!.program_slug}-${run.run_id}`}
+              run={run}
+              config={programConfigs[run.state!.program_slug]}
+              widths={widths}
+              selected={focused && index === selectedIndex}
+            />
+          ))
+        )}
+      </scrollbox>
+    </box>
+  )
+}