opencode-gh-ci 0.1.0 → 0.2.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "opencode-gh-ci",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "type": "module",
   "description": "GitHub Actions CI status in the OpenCode sidebar with live elapsed timers.",
   "license": "MIT",
@@ -37,7 +37,6 @@
   },
   "peerDependencies": {
     "@opencode-ai/plugin": "*",
-    "@opentui/core": "*",
     "@opentui/solid": "*",
     "solid-js": "*"
   }

package/server.ts

@@ -5,6 +5,7 @@ import type { Plugin } from "@opencode-ai/plugin"
 import {
   PLUGIN_ID,
   parseOptions,
+  readCacheText,
   buildCachePath,
   buildRegistryPath,
   registerSession,
@@ -14,56 +15,45 @@ import {
   emptyCache,
   nowISO,
 } from "./shared"
-
-import type { WorkflowJob, WorkflowRun, CICache } from "./shared"
+import type { WorkflowJob, WorkflowRun } from "./shared"
 
 // ---------------------------------------------------------------------------
-// Git branch detection
+// Git helpers
 // ---------------------------------------------------------------------------
 
 async function detectBranch(cwd: string): Promise<string> {
   const proc = Bun.spawn(["git", "rev-parse", "--abbrev-ref", "HEAD"], {
-    cwd,
-    stdout: "pipe",
-    stderr: "pipe",
+    cwd, stdout: "pipe", stderr: "pipe",
   })
   const out = await new Response(proc.stdout).text()
-  const code = await proc.exited
-  if (code !== 0) return ""
-  return out.trim()
+  return (await proc.exited) === 0 ? out.trim() : ""
 }
 
-// ---------------------------------------------------------------------------
-// GitHub CLI data fetching
-// ---------------------------------------------------------------------------
-
 async function runCmd(args: string[], cwd: string): Promise<string> {
   const proc = Bun.spawn(args, { cwd, stdout: "pipe", stderr: "pipe" })
   const out = await new Response(proc.stdout).text()
-  const code = await proc.exited
-  if (code !== 0) throw new Error(`exit ${code}: ${args.join(" ")}`)
+  if ((await proc.exited) !== 0) throw new Error(`exit: ${args.join(" ")}`)
   return out.trim()
 }
 
+// ---------------------------------------------------------------------------
+// GitHub CLI data fetching
+// ---------------------------------------------------------------------------
+
 async function fetchJobsForRun(runId: number, cwd: string): Promise<WorkflowJob[]> {
-  const jobsRaw = await runCmd(
-    ["gh", "api",
-     `repos/{owner}/{repo}/actions/runs/${runId}/jobs`,
+  const raw = await runCmd(
+    ["gh", "api", `repos/{owner}/{repo}/actions/runs/${runId}/jobs`,
      "--jq", ".jobs[] | {name,status,conclusion,started_at,completed_at}"],
     cwd,
   )
-  return jobsRaw
-    .split("\n")
-    .filter((l: string) => l.trim())
-    .map((l: string) => { try { return JSON.parse(l) } catch { return null } })
+  return raw.split("\n")
+    .filter((l) => l.trim())
+    .map((l) => { try { return JSON.parse(l) } catch { return null } })
     .filter(Boolean)
 }
 
 async function fetchRuns(
-  branch: string,
-  cwd: string,
-  maxRuns: number,
-  pushWindowMs: number,
+  branch: string, cwd: string, maxRuns: number, pushWindowMs: number,
 ): Promise<WorkflowRun[]> {
   const raw = await runCmd(
     ["gh", "run", "list", "--branch", branch, "--limit", String(maxRuns),
@@ -75,54 +65,37 @@ async function fetchRuns(
 
   const latestTime = new Date(allRuns[0].createdAt).getTime()
   const pushRuns = allRuns.filter(
-    (r: any) => Math.abs(new Date(r.createdAt).getTime() - latestTime) < pushWindowMs
+    (r: any) => Math.abs(new Date(r.createdAt).getTime() - latestTime) < pushWindowMs,
   )
 
-  const results: WorkflowRun[] = await Promise.all(
-    pushRuns.map(async (r: any) => {
-      const jobs = await fetchJobsForRun(r.databaseId, cwd)
-      return {
-        id: r.databaseId,
-        name: r.name,
-        status: r.status,
-        conclusion: r.conclusion,
-        head_branch: r.headBranch,
-        jobs,
-      }
-    })
+  return Promise.all(
+    pushRuns.map(async (r: any) => ({
+      id: r.databaseId,
+      name: r.name,
+      status: r.status,
+      conclusion: r.conclusion,
+      head_branch: r.headBranch,
+      jobs: await fetchJobsForRun(r.databaseId, cwd),
+    })),
   )
-
-  return results
 }
 
 // ---------------------------------------------------------------------------
 // Cache I/O
 // ---------------------------------------------------------------------------
 
-async function readCache(filePath: string): Promise<CICache> {
-  try {
-    const text = await readFile(filePath, "utf8")
-    const parsed = JSON.parse(text)
-    if (!parsed || typeof parsed !== "object") return emptyCache()
-    return {
-      version: 1,
-      updatedAt: parsed.updatedAt || nowISO(),
-      branch: parsed.branch || "",
-      runs: parsed.runs || (parsed.run ? [parsed.run] : []),
-      error: parsed.error || null,
-    }
-  } catch {
-    return emptyCache()
-  }
+async function readCache(filePath: string) {
+  try { return readCacheText(await readFile(filePath, "utf8")) }
+  catch { return emptyCache() }
 }
 
-async function writeCache(filePath: string, cache: CICache): Promise<void> {
+async function writeCache(filePath: string, cache: any): Promise<void> {
   await mkdir(dirname(filePath), { recursive: true })
-  await writeFile(filePath, `${JSON.stringify(cache, null, 2)}\n`, "utf8")
+  await writeFile(filePath, JSON.stringify(cache, null, 2) + "\n", "utf8")
 }
 
 // ---------------------------------------------------------------------------
-// Plugin entry
+// Plugin
 // ---------------------------------------------------------------------------
 
 const server: Plugin = async (input, options) => {
@@ -133,17 +106,9 @@ const server: Plugin = async (input, options) => {
   const cachePath = buildCachePath()
   const registryPath = buildRegistryPath(cwd)
 
-  // Clean up orphaned sessions from dead processes
   await cleanupOrphans(registryPath)
+  await registerSession(registryPath, { cachePath, pid: process.pid, startedAt: nowISO() })
 
-  // Register this session
-  await registerSession(registryPath, {
-    cachePath,
-    pid: process.pid,
-    startedAt: nowISO(),
-  })
-
-  // Global last-refresh timestamp — shared by poll timer and event handlers
   let lastRefreshAt = 0
 
   const refresh = async () => {
@@ -153,65 +118,44 @@ const server: Plugin = async (input, options) => {
         await writeCache(cachePath, { ...emptyCache(), error: "Not a git repo" })
         return
       }
-
-      const runs = await fetchRuns(branch, cwd, opts.max_runs, opts.push_window_ms)
       await writeCache(cachePath, {
-        version: 1,
-        updatedAt: nowISO(),
-        branch,
-        runs,
+        version: 1, updatedAt: nowISO(), branch,
+        runs: await fetchRuns(branch, cwd, opts.max_runs, opts.push_window_ms),
         error: null,
       })
     } catch (e: any) {
       const prev = await readCache(cachePath)
-      await writeCache(cachePath, {
-        ...prev,
-        updatedAt: nowISO(),
-        error: e?.message ?? "fetch failed",
-      })
+      await writeCache(cachePath, { ...prev, updatedAt: nowISO(), error: e?.message ?? "fetch failed" })
     }
     lastRefreshAt = Date.now()
   }
 
-  // Global debounce — skips if any source (poll or event) already refreshed recently
   const maybeRefresh = () => {
-    if (Date.now() - lastRefreshAt >= opts.debounce_ms) {
-      void refresh()
-    }
+    if (Date.now() - lastRefreshAt >= opts.debounce_ms) void refresh()
   }
 
-  // Initial fetch + periodic poll (also debounced)
   void refresh()
-  const timer = setInterval(() => maybeRefresh(), opts.server_poll_ms)
+  const timer = setInterval(maybeRefresh, opts.server_poll_ms)
   timer.unref?.()
 
-  // Cleanup on graceful shutdown
   const cleanup = async () => {
     clearInterval(timer)
     await cleanupSession(cachePath)
     await deregisterSession(registryPath, cachePath)
   }
 
-  const onExit = () => { void cleanup() }
-  process.on("exit", onExit)
-  process.on("SIGINT", onExit)
-  process.on("SIGTERM", onExit)
+  process.on("exit", () => void cleanup())
+  process.on("SIGINT", () => void cleanup())
+  process.on("SIGTERM", () => void cleanup())
 
-  // Build return object with dynamic event handlers
   const handlers: Record<string, unknown> = { dispose: cleanup }
-
   if (opts.refresh_on_events) {
     for (const event of opts.refresh_on_events) {
-      handlers[event] = async () => {
-        maybeRefresh()
-      }
+      handlers[event] = async () => maybeRefresh()
     }
   }
 
   return handlers
 }
 
-export default {
-  id: PLUGIN_ID,
-  server,
-}
+export default { id: PLUGIN_ID, server }

package/shared.ts

@@ -8,10 +8,70 @@ export const PLUGIN_ID = "gh-ci"
 const BASE_DIR = path.join(os.tmpdir(), "opencode-gh-ci")
 
 // ---------------------------------------------------------------------------
-// Options
+// Types
+// ---------------------------------------------------------------------------
+
+export interface WorkflowJob {
+  name: string
+  status: "queued" | "in_progress" | "completed" | "waiting"
+  conclusion: string | null
+  started_at: string | null
+  completed_at: string | null
+}
+
+export interface WorkflowRun {
+  id: number
+  name: string
+  status: string
+  conclusion: string | null
+  head_branch: string
+  jobs: WorkflowJob[]
+}
+
+export interface CICache {
+  version: 1
+  updatedAt: string
+  branch: string
+  runs: WorkflowRun[]
+  error: string | null
+}
+
+export interface RegistryEntry {
+  cachePath: string
+  pid: number
+  startedAt: string
+}
+
+export interface HideFilters {
+  workflows: RegExp[]
+  jobs: RegExp[]
+}
+
+export type DetailLevel = "overall" | "workflows" | "jobs"
+
+export interface JobsDetailOptions {
+  collapse_single_workflow: boolean
+}
+
+export interface PluginOptions {
+  enabled: boolean
+  server_poll_ms: number
+  tui_poll_ms: number
+  debounce_ms: number
+  push_window_ms: number
+  max_runs: number
+  max_name_length: number
+  right_align_elapsed: boolean
+  refresh_on_events: string[] | false
+  hide: HideFilters
+  detail: DetailLevel
+  jobs_detail: JobsDetailOptions
+}
+
+// ---------------------------------------------------------------------------
+// Options parsing
 // ---------------------------------------------------------------------------
 
-// All plugin trigger events that can be subscribed to
 const ALL_EVENTS = [
   "chat.message",
   "tool.execute.before",
@@ -20,8 +80,6 @@ const ALL_EVENTS = [
   "shell.env",
 ] as const
 
-const DEFAULT_EVENTS = [...ALL_EVENTS] as string[]
-
 const DEFAULTS = {
   enabled: true,
   server_poll_ms: 10_000,
@@ -29,23 +87,18 @@ const DEFAULTS = {
   debounce_ms: 10_000,
   push_window_ms: 60_000,
   max_runs: 10,
+  max_name_length: 24,
+  right_align_elapsed: true,
 } as const
 
-export interface HideFilters {
-  workflows: RegExp[]
-  jobs: RegExp[]
-}
+const DEFAULT_JOBS_DETAIL: JobsDetailOptions = { collapse_single_workflow: true }
 
-export interface PluginOptions {
-  enabled: boolean
-  server_poll_ms: number
-  tui_poll_ms: number
-  debounce_ms: number
-  push_window_ms: number
-  max_runs: number
-  refresh_on_events: string[] | false
-  hide: HideFilters
-  collapse_single_workflow: boolean
+const EMPTY_OPTIONS: PluginOptions = {
+  ...DEFAULTS,
+  refresh_on_events: [...ALL_EVENTS],
+  hide: { workflows: [], jobs: [] },
+  detail: "jobs",
+  jobs_detail: { ...DEFAULT_JOBS_DETAIL },
 }
 
 const toRecord = (v: unknown): Record<string, unknown> | undefined =>
@@ -53,8 +106,9 @@ const toRecord = (v: unknown): Record<string, unknown> | undefined =>
     ? Object.fromEntries(Object.entries(v))
     : undefined
 
-const toBool = (v: unknown, fallback: boolean): boolean =>
-  typeof v === "boolean" ? v : fallback
+const toBool = (v: unknown, fb: boolean) => (typeof v === "boolean" ? v : fb)
+const toNum = (v: unknown, fb: number, min = 0) =>
+  typeof v === "number" && Number.isFinite(v) ? Math.max(min, v) : fb
 
 const toRegexList = (v: unknown): RegExp[] => {
   if (!Array.isArray(v)) return []
@@ -64,37 +118,42 @@ const toRegexList = (v: unknown): RegExp[] => {
     .filter((r): r is RegExp => r !== null)
 }
 
-const toNum = (v: unknown, fallback: number, min = 0): number => {
-  if (typeof v !== "number" || !Number.isFinite(v)) return fallback
-  return Math.max(min, v)
-}
-
 export function parseOptions(raw: unknown): PluginOptions {
   const rec = toRecord(raw)
-  if (!rec) return { ...DEFAULTS, refresh_on_events: [...DEFAULT_EVENTS], hide: { workflows: [], jobs: [] }, collapse_single_workflow: true }
-
-  // Parse refresh_on_events:
-  //   false                          → disabled
-  //   true                           → all available events
-  //   undefined                      → default events (chat.message)
-  //   ["chat.message", "tool.execute.after"]  → specific events
-  let refreshOnEvents: string[] | false
+  if (!rec) return EMPTY_OPTIONS
+
+  // refresh_on_events: false | true | string[]
   const roe = rec.refresh_on_events
-  if (roe === false) {
-    refreshOnEvents = false
-  } else if (roe === true) {
-    refreshOnEvents = [...ALL_EVENTS]
-  } else if (Array.isArray(roe)) {
-    refreshOnEvents = roe.filter((e): e is string => typeof e === "string")
-  } else {
-    refreshOnEvents = [...DEFAULT_EVENTS]
-  }
+  const refreshOnEvents: string[] | false =
+    roe === false ? false
+    : roe === true ? [...ALL_EVENTS]
+    : Array.isArray(roe) ? roe.filter((e): e is string => typeof e === "string")
+    : [...ALL_EVENTS]
 
-  // Parse hide: { workflows: [...], jobs: [...] }
+  // hide: { workflows: [...], jobs: [...] }
   const hideRec = toRecord(rec.hide)
-  const hide: HideFilters = {
-    workflows: toRegexList(hideRec?.workflows),
-    jobs: toRegexList(hideRec?.jobs),
+
+  // detail: "overall" | "workflows" | "jobs" | { jobs: {...} } | { workflows: {} } | { overall: {} }
+  const VALID_LEVELS: DetailLevel[] = ["overall", "workflows", "jobs"]
+  let detail: DetailLevel = "jobs"
+  let jobsDetail: JobsDetailOptions = { ...DEFAULT_JOBS_DETAIL }
+
+  const d = rec.detail
+  if (typeof d === "string" && VALID_LEVELS.includes(d as DetailLevel)) {
+    detail = d as DetailLevel
+  } else if (d && typeof d === "object" && !Array.isArray(d)) {
+    const dRec = d as Record<string, unknown>
+    if ("jobs" in dRec) {
+      detail = "jobs"
+      const jRec = toRecord(dRec.jobs)
+      jobsDetail = {
+        collapse_single_workflow: toBool(jRec?.collapse_single_workflow, DEFAULT_JOBS_DETAIL.collapse_single_workflow),
+      }
+    } else if ("workflows" in dRec) {
+      detail = "workflows"
+    } else if ("overall" in dRec) {
+      detail = "overall"
+    }
   }
 
   return {
@@ -104,9 +163,15 @@ export function parseOptions(raw: unknown): PluginOptions {
     debounce_ms: toNum(rec.debounce_ms, DEFAULTS.debounce_ms, 1000),
     push_window_ms: toNum(rec.push_window_ms, DEFAULTS.push_window_ms, 10_000),
     max_runs: toNum(rec.max_runs, DEFAULTS.max_runs, 1),
+    max_name_length: toNum(rec.max_name_length, DEFAULTS.max_name_length, 10),
+    right_align_elapsed: toBool(rec.right_align_elapsed, DEFAULTS.right_align_elapsed),
     refresh_on_events: refreshOnEvents,
-    hide,
-    collapse_single_workflow: toBool(rec.collapse_single_workflow, true),
+    hide: {
+      workflows: toRegexList(hideRec?.workflows),
+      jobs: toRegexList(hideRec?.jobs),
+    },
+    detail,
+    jobs_detail: jobsDetail,
   }
 }
 
@@ -114,7 +179,6 @@ export function parseOptions(raw: unknown): PluginOptions {
 // Filtering
 // ---------------------------------------------------------------------------
 
-/** Filter runs and jobs based on hide regexes. Returns a new array (no mutation). */
 export function filterRuns(runs: WorkflowRun[] | undefined, hide: HideFilters): WorkflowRun[] {
   if (!runs?.length) return []
   if (!hide.workflows.length && !hide.jobs.length) return runs
@@ -123,48 +187,13 @@ export function filterRuns(runs: WorkflowRun[] | undefined, hide: HideFilters):
     .filter((r) => !hide.workflows.some((re) => re.test(r.name)))
     .map((r) => {
       if (!hide.jobs.length) return r
-      const filteredJobs = r.jobs.filter((j) => !hide.jobs.some((re) => re.test(j.name)))
-      return filteredJobs.length === r.jobs.length ? r : { ...r, jobs: filteredJobs }
+      const filtered = r.jobs.filter((j) => !hide.jobs.some((re) => re.test(j.name)))
+      return filtered.length === r.jobs.length ? r : { ...r, jobs: filtered }
     })
 }
 
 // ---------------------------------------------------------------------------
-// Domain types
-// ---------------------------------------------------------------------------
-
-export interface WorkflowJob {
-  name: string
-  status: "queued" | "in_progress" | "completed" | "waiting"
-  conclusion: string | null
-  started_at: string | null
-  completed_at: string | null
-}
-
-export interface WorkflowRun {
-  id: number
-  name: string
-  status: string
-  conclusion: string | null
-  head_branch: string
-  jobs: WorkflowJob[]
-}
-
-export interface CICache {
-  version: 1
-  updatedAt: string
-  branch: string
-  runs: WorkflowRun[]
-  error: string | null
-}
-
-export interface RegistryEntry {
-  cachePath: string
-  pid: number
-  startedAt: string
-}
-
-// ---------------------------------------------------------------------------
-// Cache path helpers
+// Cache paths
 // ---------------------------------------------------------------------------
 
 export const nowISO = () => new Date().toISOString()
@@ -177,25 +206,22 @@ export const emptyCache = (): CICache => ({
   error: null,
 })
 
-/** Random per-session cache directory: <tmpdir>/opencode-gh-ci/<uuid>/ci.json */
 export function buildCachePath(): string {
   return path.join(BASE_DIR, randomUUID(), "ci.json")
 }
 
-/** Deterministic registry file per project: <tmpdir>/opencode-gh-ci/<hash>.registry.json */
 export function buildRegistryPath(root: string): string {
   const digest = createHash("sha1").update(path.resolve(root)).digest("hex").slice(0, 12)
   return path.join(BASE_DIR, `${digest}.registry.json`)
 }
 
 // ---------------------------------------------------------------------------
-// Registry helpers
+// Registry
 // ---------------------------------------------------------------------------
 
 export async function readRegistry(registryPath: string): Promise<RegistryEntry[]> {
   try {
-    const text = await readFile(registryPath, "utf8")
-    const parsed = JSON.parse(text)
+    const parsed = JSON.parse(await readFile(registryPath, "utf8"))
     return Array.isArray(parsed) ? parsed : []
   } catch {
     return []
@@ -208,35 +234,20 @@ async function writeRegistry(registryPath: string, entries: RegistryEntry[]): Pr
 }
 
 function isPidAlive(pid: number): boolean {
-  try {
-    process.kill(pid, 0)
-    return true
-  } catch {
-    return false
-  }
+  try { process.kill(pid, 0); return true } catch { return false }
 }
 
-/** Register this session in the registry */
-export async function registerSession(
-  registryPath: string,
-  entry: RegistryEntry,
-): Promise<void> {
+export async function registerSession(registryPath: string, entry: RegistryEntry): Promise<void> {
   const entries = await readRegistry(registryPath)
   entries.push(entry)
   await writeRegistry(registryPath, entries)
 }
 
-/** Remove this session from the registry */
-export async function deregisterSession(
-  registryPath: string,
-  cachePath: string,
-): Promise<void> {
+export async function deregisterSession(registryPath: string, cachePath: string): Promise<void> {
   const entries = await readRegistry(registryPath)
-  const filtered = entries.filter((e) => e.cachePath !== cachePath)
-  await writeRegistry(registryPath, filtered)
+  await writeRegistry(registryPath, entries.filter((e) => e.cachePath !== cachePath))
 }
 
-/** Scan registry, remove entries with dead PIDs, delete their cache directories */
 export async function cleanupOrphans(registryPath: string): Promise<void> {
   const entries = await readRegistry(registryPath)
   const alive: RegistryEntry[] = []
@@ -245,26 +256,15 @@ export async function cleanupOrphans(registryPath: string): Promise<void> {
     if (isPidAlive(entry.pid)) {
       alive.push(entry)
     } else {
-      try {
-        const dir = path.dirname(entry.cachePath)
-        await rm(dir, { recursive: true, force: true })
-      } catch {
-        // ignore
-      }
+      try { await rm(path.dirname(entry.cachePath), { recursive: true, force: true }) } catch {}
     }
   }
 
   await writeRegistry(registryPath, alive)
 }
 
-/** Delete this session's cache directory */
 export async function cleanupSession(cachePath: string): Promise<void> {
-  try {
-    const dir = path.dirname(cachePath)
-    await rm(dir, { recursive: true, force: true })
-  } catch {
-    // ignore
-  }
+  try { await rm(path.dirname(cachePath), { recursive: true, force: true }) } catch {}
 }
 
 // ---------------------------------------------------------------------------
@@ -279,7 +279,7 @@ export function readCacheText(text: string): CICache {
       version: 1,
       updatedAt: parsed.updatedAt || nowISO(),
       branch: parsed.branch || "",
-      runs: parsed.runs || (parsed.run ? [parsed.run] : []),
+      runs: parsed.runs || [],
       error: parsed.error || null,
     }
   } catch {
@@ -294,22 +294,20 @@ export function readCacheText(text: string): CICache {
 export const DOT = "\u2022"
 export const PULSE_FRAMES = ["\u2022", "\u25E6"]
 
-export function formatElapsed(seconds: number): string {
+function formatElapsed(seconds: number): string {
   if (seconds < 0) seconds = 0
   const m = Math.floor(seconds / 60)
   const s = seconds % 60
-  if (m > 0) return `${m}m ${s}s`
-  return `${s}s`
+  return m > 0 ? `${m}m ${s}s` : `${s}s`
 }
 
 export function getJobElapsed(job: WorkflowJob, nowSec: number): string {
   if (!job.started_at) return ""
   const started = Math.floor(new Date(job.started_at).getTime() / 1000)
-  if (job.completed_at) {
-    const completed = Math.floor(new Date(job.completed_at).getTime() / 1000)
-    return formatElapsed(completed - started)
-  }
-  return formatElapsed(nowSec - started)
+  const end = job.completed_at
+    ? Math.floor(new Date(job.completed_at).getTime() / 1000)
+    : nowSec
+  return formatElapsed(end - started)
 }
 
 export function truncate(s: string, max: number): string {

package/tui.tsx

@@ -17,21 +17,18 @@ import {
   getJobElapsed,
   truncate,
 } from "./shared"
-import type { CICache, HideFilters, WorkflowJob, WorkflowRun } from "./shared"
+import type { CICache, DetailLevel, HideFilters, JobsDetailOptions, WorkflowJob, WorkflowRun } from "./shared"
 
 type Api = Parameters<TuiPlugin>[0]
 
 // ---------------------------------------------------------------------------
-// Color helpers
+// Helpers
 // ---------------------------------------------------------------------------
 
 function dotColor(theme: any, status: string, conclusion: string | null) {
   if (status === "completed" && conclusion === "success") return theme.success
   if (status === "completed" && conclusion === "failure") return theme.error
-  if (status === "completed" && conclusion === "skipped") return theme.textMuted
-  if (status === "completed" && conclusion === "cancelled") return theme.textMuted
   if (status === "in_progress") return theme.warning
-  if (status === "queued" || status === "waiting") return theme.textMuted
   return theme.textMuted
 }
 
@@ -45,38 +42,74 @@ function overallStatus(runs: WorkflowRun[]): { status: string; conclusion: strin
   return { status: "completed", conclusion: runs[0]?.conclusion ?? null }
 }
 
-// ---------------------------------------------------------------------------
-// Read cache from disk
-// ---------------------------------------------------------------------------
+function countItems(items: { status: string; conclusion: string | null }[]): string {
+  const pending = items.filter((i) => i.status === "in_progress" || i.status === "queued" || i.status === "waiting").length
+  const success = items.filter((i) => i.status === "completed" && i.conclusion === "success").length
+  const failed = items.filter((i) => i.status === "completed" && i.conclusion === "failure").length
+  const skipped = items.filter((i) => i.status === "completed" && (i.conclusion === "skipped" || i.conclusion === "cancelled")).length
+  const parts: string[] = []
+  if (pending) parts.push(`${pending} pending`)
+  if (success) parts.push(`${success} passed`)
+  if (failed) parts.push(`${failed} failed`)
+  if (skipped) parts.push(`${skipped} skipped`)
+  return parts.join(", ")
+}
 
 async function readCache(filePath: string): Promise<CICache> {
-  try {
-    return readCacheText(await readFile(filePath, "utf8"))
-  } catch {
-    return emptyCache()
-  }
+  try { return readCacheText(await readFile(filePath, "utf8")) }
+  catch { return emptyCache() }
 }
 
-/** Find this session's cache file via the registry (matched by PID) */
 async function discoverCachePath(registryPath: string): Promise<string | null> {
   const entries = await readRegistry(registryPath)
-  const mine = entries.find((e) => e.pid === process.pid)
-  return mine?.cachePath ?? null
+  return entries.find((e) => e.pid === process.pid)?.cachePath ?? null
 }
 
 // ---------------------------------------------------------------------------
-// Per-workflow row (stateless — toggle state lifted to parent)
+// Job row
+// ---------------------------------------------------------------------------
+
+const JobRow = (props: {
+  job: WorkflowJob; theme: any; nowSec: number; pulseFrame: number
+  indent: string; maxLen: number; rightAlign: boolean
+}) => {
+  const elapsed = () => getJobElapsed(props.job, props.nowSec)
+  const isActive = () => props.job.status === "in_progress"
+  const dot = () => isActive() ? PULSE_FRAMES[props.pulseFrame % PULSE_FRAMES.length] : DOT
+  const nameLen = () => props.maxLen - props.indent.length
+
+  const label = () => (
+    <text flexGrow={props.rightAlign ? 1 : undefined}>
+      <span style={{ fg: dotColor(props.theme, props.job.status, props.job.conclusion) }}>
+        {props.indent}{dot()}
+      </span>
+      <span style={{ fg: props.theme.text }}>
+        {" "}{truncate(props.job.name, nameLen())}
+      </span>
+      {!props.rightAlign && elapsed() ? <span style={{ fg: props.theme.textMuted }}> {elapsed()}</span> : null}
+    </text>
+  )
+
+  if (!props.rightAlign) return label()
+
+  return (
+    <box flexDirection="row" width="100%" gap={0}>
+      {label()}
+      {elapsed() ? <text fg={props.theme.textMuted}>{elapsed()}</text> : null}
+    </box>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// Workflow row (multi-workflow mode)
 // ---------------------------------------------------------------------------
 
 const WorkflowRow = (props: {
-  run: WorkflowRun
-  theme: any
-  nowSec: number
-  pulseFrame: number
-  expanded: boolean
-  onToggle: () => void
+  run: WorkflowRun; theme: any; nowSec: number; pulseFrame: number
+  expanded: boolean; onToggle: () => void; maxLen: number; rightAlign: boolean
 }) => {
   const arrowColor = () => dotColor(props.theme, props.run.status, props.run.conclusion)
+  const visibleJobs = createMemo(() => props.expanded ? props.run.jobs : [])
 
   return (
     <box flexDirection="column" gap={0}>
@@ -86,33 +119,15 @@ const WorkflowRow = (props: {
           {props.expanded ? "▼" : "▶"}
         </span>
         <span style={{ fg: props.theme.text }}>
-          {" "}{truncate(props.run.name, 28)}
+          {" "}{truncate(props.run.name, props.maxLen)}
         </span>
       </text>
-      <Show when={props.expanded}>
-        <Index each={props.run.jobs}>
-          {(job) => {
-            const elapsed = () => getJobElapsed(job(), props.nowSec)
-            const isJobActive = () => job().status === "in_progress"
-            const jobDot = () => isJobActive() ? PULSE_FRAMES[props.pulseFrame % PULSE_FRAMES.length] : DOT
-            return (
-              <box flexDirection="row" width="100%" gap={0}>
-                <text flexGrow={1}>
-                  <span style={{ fg: dotColor(props.theme, job().status, job().conclusion) }}>
-                    {"    "}{jobDot()}
-                  </span>
-                  <span style={{ fg: props.theme.text }}>
-                    {" "}{truncate(job().name, 22)}
-                  </span>
-                </text>
-                <Show when={elapsed()}>
-                  <text fg={props.theme.textMuted}>{elapsed()}</text>
-                </Show>
-              </box>
-            )
-          }}
-        </Index>
-      </Show>
+      <Index each={visibleJobs()}>
+        {(job) => (
+          <JobRow job={job()} theme={props.theme} nowSec={props.nowSec} pulseFrame={props.pulseFrame}
+            indent={"    "} maxLen={props.maxLen} rightAlign={props.rightAlign} />
+        )}
+      </Index>
     </box>
   )
 }
@@ -121,59 +136,42 @@ const WorkflowRow = (props: {
 // Main sidebar card
 // ---------------------------------------------------------------------------
 
-const CICard = (props: { api: Api; theme: any; tuiPollMs: number; hide: HideFilters; collapseSingleWorkflow: boolean }) => {
+const CICard = (props: {
+  api: Api; theme: any; tuiPollMs: number; hide: HideFilters
+  detail: DetailLevel; jobsDetail: JobsDetailOptions
+  maxNameLength: number; rightAlignElapsed: boolean
+}) => {
   const [cache, setCache] = createSignal<CICache>(emptyCache())
   const [nowSec, setNowSec] = createSignal(Math.floor(Date.now() / 1000))
   const [collapsed, setCollapsed] = createSignal(false)
   const [pulseFrame, setPulseFrame] = createSignal(0)
   const [cachePath, setCachePath] = createSignal<string | null>(null)
-
-  // Toggle state keyed by run ID — persists across cache updates
   const [expandedMap, setExpandedMap] = createSignal<Record<number, boolean>>({})
 
-  const toggleRun = (runId: number) => {
-    setExpandedMap((prev) => ({
-      ...prev,
-      [runId]: prev[runId] === undefined ? false : !prev[runId],
-    }))
-  }
-
-  const isRunExpanded = (runId: number) => {
-    const map = expandedMap()
-    return map[runId] === undefined ? true : map[runId]
-  }
+  const toggleRun = (id: number) =>
+    setExpandedMap((m) => ({ ...m, [id]: m[id] === undefined ? false : !m[id] }))
+  const isRunExpanded = (id: number) => expandedMap()[id] ?? true
 
   const registryPath = buildRegistryPath(props.api.state.path.directory)
 
   const load = async () => {
-    // Discover cache path if not yet found
-    let path = cachePath()
-    if (!path) {
-      path = await discoverCachePath(registryPath)
-      if (path) setCachePath(path)
-    }
-    if (!path) return
-
-    setCache(await readCache(path))
+    let p = cachePath()
+    if (!p) { p = await discoverCachePath(registryPath); if (p) setCachePath(p) }
+    if (p) setCache(await readCache(p))
   }
 
   onMount(() => {
     void load()
-    const pollTimer = setInterval(() => void load(), props.tuiPollMs)
-    const tickTimer = setInterval(() => setNowSec(Math.floor(Date.now() / 1000)), 1000)
-    onCleanup(() => {
-      clearInterval(pollTimer)
-      clearInterval(tickTimer)
-    })
+    const poll = setInterval(() => void load(), props.tuiPollMs)
+    const tick = setInterval(() => setNowSec(Math.floor(Date.now() / 1000)), 1000)
+    onCleanup(() => { clearInterval(poll); clearInterval(tick) })
   })
 
-  // Pulse animation — only runs when something is in progress
   const hasActive = createMemo(() =>
     (cache().runs ?? []).some((r) =>
-      r.status === "in_progress" || r.jobs.some((j) => j.status === "in_progress")
-    )
+      r.status === "in_progress" || r.jobs.some((j) => j.status === "in_progress"),
+    ),
   )
-
   createEffect(() => {
     if (!hasActive()) return
     const id = setInterval(() => setPulseFrame((f) => f + 1), 500)
@@ -185,115 +183,99 @@ const CICard = (props: { api: Api; theme: any; tuiPollMs: number; hide: HideFilt
   const hasRuns = createMemo(() => runs().length > 0)
   const overall = createMemo(() => hasRuns() ? overallStatus(runs()) : null)
 
-  const isSingleCollapsed = createMemo(() =>
-    props.collapseSingleWorkflow && runs().length === 1
+  const canToggle = () => props.detail !== "overall"
+  const isSingle = createMemo(() =>
+    props.detail === "jobs" && props.jobsDetail.collapse_single_workflow && runs().length === 1,
   )
 
-  function countItems(items: { status: string; conclusion: string | null }[]) {
-    const pending = items.filter((i) => i.status === "in_progress" || i.status === "queued" || i.status === "waiting").length
-    const success = items.filter((i) => i.status === "completed" && i.conclusion === "success").length
-    const failed = items.filter((i) => i.status === "completed" && i.conclusion === "failure").length
-    const skipped = items.filter((i) => i.status === "completed" && (i.conclusion === "skipped" || i.conclusion === "cancelled")).length
-    const parts: string[] = []
-    if (pending) parts.push(`${pending} pending`)
-    if (success) parts.push(`${success} passed`)
-    if (failed) parts.push(`${failed} failed`)
-    if (skipped) parts.push(`${skipped} skipped`)
-    return parts.join(", ")
-  }
-
   const summary = createMemo(() => {
     const all = runs()
     if (!all.length) return ""
-    const text = isSingleCollapsed() ? countItems(all[0].jobs) : countItems(all)
-    return `(${text})`
+    return `(${isSingle() ? countItems(all[0].jobs) : countItems(all)})`
   })
 
-  // Global status icon: checkmark, cross, or spinner
-  const globalStatusIcon = createMemo(() => {
+  const globalIcon = createMemo(() => {
     const o = overall()
     if (!o) return { icon: "", color: "" }
     if (o.status === "in_progress" || o.status === "queued")
       return { icon: PULSE_FRAMES[pulseFrame() % PULSE_FRAMES.length], color: props.theme.warning }
-    if (o.status === "completed" && o.conclusion === "success")
-      return { icon: "\u2713", color: props.theme.success }
-    if (o.status === "completed" && o.conclusion === "failure")
-      return { icon: "\u2717", color: props.theme.error }
-    if (o.status === "completed" && (o.conclusion === "skipped" || o.conclusion === "cancelled"))
-      return { icon: "-", color: props.theme.textMuted }
-    return { icon: "?", color: props.theme.textMuted }
+    if (o.conclusion === "success") return { icon: "\u2713", color: props.theme.success }
+    if (o.conclusion === "failure") return { icon: "\u2717", color: props.theme.error }
+    return { icon: "-", color: props.theme.textMuted }
+  })
+
+  // Computed arrays — empty arrays produce zero DOM nodes
+  const statusMessages = createMemo(() => {
+    if (error()) return [{ text: ` ${error()}`, color: props.theme.error }]
+    if (!hasRuns()) return [{ text: " waiting...", color: props.theme.textMuted }]
+    return [] as { text: string; color: any }[]
   })
 
-  // Flat list of displayable jobs for single-collapsed mode
+  // "workflows" detail: workflow names with status dots
+  const workflowRows = createMemo(() => {
+    if (props.detail !== "workflows" || !hasRuns() || collapsed()) return []
+    return runs()
+  })
+
+  // "jobs" detail with single workflow collapsed: flat job list
   const flatJobs = createMemo(() => {
-    if (!hasRuns() || collapsed() || !isSingleCollapsed()) return []
+    if (props.detail !== "jobs" || !hasRuns() || collapsed() || !isSingle()) return []
     return runs()[0]?.jobs ?? []
   })
 
-  // Runs to display in multi-workflow mode
+  // "jobs" detail with multiple workflows
   const displayRuns = createMemo(() => {
-    if (!hasRuns() || collapsed() || isSingleCollapsed()) return []
+    if (props.detail !== "jobs" || !hasRuns() || collapsed() || isSingle()) return []
     return runs()
   })
 
-  // Status messages as a computed array (empty = no node rendered)
-  const statusMessages = createMemo(() => {
-    if (error()) return [{ text: ` ${error()}`, color: props.theme.error }]
-    if (!hasRuns()) return [{ text: " waiting...", color: props.theme.textMuted }]
-    return [] as { text: string; color: any }[]
-  })
-
   return (
     <box flexDirection="column" gap={0}>
-      <box flexDirection="row" width="100%" gap={0} onMouseDown={() => hasRuns() && setCollapsed((c) => !c)}>
+      {/* Header */}
+      <box flexDirection="row" width="100%" gap={0} onMouseDown={() => canToggle() && hasRuns() && setCollapsed((c) => !c)}>
         <text flexGrow={1} fg={props.theme.text}>
           <Show when={hasRuns()} fallback={<b>CI</b>}>
             <span>
-              {collapsed() ? "▶" : "▼"}{" "}<b>CI</b>
-              <span style={{ fg: props.theme.textMuted }}>
-                {" "}{summary()}
-              </span>
+              {canToggle() ? (collapsed() ? "▶ " : "▼ ") : ""}<b>CI</b>
+              <span style={{ fg: props.theme.textMuted }}>{" "}{summary()}</span>
             </span>
           </Show>
         </text>
         <Show when={hasRuns()}>
-          <text fg={globalStatusIcon().color}>{globalStatusIcon().icon}</text>
+          <text fg={globalIcon().color}>{globalIcon().icon}</text>
         </Show>
       </box>
+      {/* Status messages (error / waiting) */}
       <Index each={statusMessages()}>
         {(msg) => <text fg={msg().color}>{msg().text}</text>}
       </Index>
+      {/* Workflows detail */}
+      <Index each={workflowRows()}>
+        {(run) => (
+          <text>
+            <span style={{ fg: dotColor(props.theme, run().status, run().conclusion) }}>
+              {"  "}{DOT}
+            </span>
+            <span style={{ fg: props.theme.text }}>
+              {" "}{truncate(run().name, props.maxNameLength)}
+            </span>
+          </text>
+        )}
+      </Index>
+      {/* Jobs detail: single workflow collapsed */}
       <Index each={flatJobs()}>
-        {(job) => {
-          const elapsed = () => getJobElapsed(job(), nowSec())
-          const isJobActive = () => job().status === "in_progress"
-          const jobDot = () => isJobActive() ? PULSE_FRAMES[pulseFrame() % PULSE_FRAMES.length] : DOT
-          return (
-            <box flexDirection="row" width="100%" gap={0}>
-              <text flexGrow={1}>
-                <span style={{ fg: dotColor(props.theme, job().status, job().conclusion) }}>
-                  {jobDot()}
-                </span>
-                <span style={{ fg: props.theme.text }}>
-                  {" "}{truncate(job().name, 28)}
-                </span>
-              </text>
-              <Show when={elapsed()}>
-                <text fg={props.theme.textMuted}>{elapsed()}</text>
-              </Show>
-            </box>
-          )
-        }}
+        {(job) => (
+          <JobRow job={job()} theme={props.theme} nowSec={nowSec()} pulseFrame={pulseFrame()}
+            indent={""} maxLen={props.maxNameLength} rightAlign={props.rightAlignElapsed} />
+        )}
       </Index>
+      {/* Jobs detail: multiple workflows */}
       <For each={displayRuns()}>
         {(run) => (
           <WorkflowRow
-            run={run}
-            theme={props.theme}
-            nowSec={nowSec()}
-            pulseFrame={pulseFrame()}
-            expanded={isRunExpanded(run.id)}
-            onToggle={() => toggleRun(run.id)}
+            run={run} theme={props.theme} nowSec={nowSec()} pulseFrame={pulseFrame()}
+            expanded={isRunExpanded(run.id)} onToggle={() => toggleRun(run.id)}
+            maxLen={props.maxNameLength} rightAlign={props.rightAlignElapsed}
           />
         )}
       </For>
@@ -313,15 +295,16 @@ const tui: TuiPlugin = async (api, options) => {
     order: 350,
     slots: {
       sidebar_content(ctx) {
-        return <CICard api={api} theme={ctx.theme.current} tuiPollMs={opts.tui_poll_ms} hide={opts.hide} collapseSingleWorkflow={opts.collapse_single_workflow} />
+        return (
+          <CICard
+            api={api} theme={ctx.theme.current} tuiPollMs={opts.tui_poll_ms}
+            hide={opts.hide} detail={opts.detail} jobsDetail={opts.jobs_detail}
+            maxNameLength={opts.max_name_length} rightAlignElapsed={opts.right_align_elapsed}
+          />
+        )
       },
     },
   })
 }
 
-const plugin: TuiPluginModule & { id: string } = {
-  id: PLUGIN_ID,
-  tui,
-}
-
-export default plugin
+export default { id: PLUGIN_ID, tui } satisfies TuiPluginModule & { id: string }