9to5 0.1.2 → 0.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "9to5",
-	"version": "0.1.2",
+	"version": "0.1.4",
 	"description": "Cron for Claude Code — schedule and automate Claude Code tasks",
 	"license": "MIT",
 	"repository": {
@@ -12,11 +12,7 @@
 	"bin": {
 		"9to5": "./packages/cli/src/index.ts"
 	},
-	"files": [
-		"packages/cli/src",
-		"packages/core/src",
-		"packages/tui/src"
-	],
+	"files": ["packages/cli/src", "packages/core/src", "packages/tui/src"],
 	"scripts": {
 		"dev": "bun run packages/cli/src/index.ts",
 		"build": "bun build --compile packages/cli/src/index.ts --outfile 9to5",

package/packages/cli/src/commands/edit.ts

@@ -10,17 +10,20 @@ export function registerEdit(program: Command): void {
 		.option("--cwd <dir>", "Update working directory")
 		.option("--rrule <rule>", "Update recurrence rule")
 		.option("--model <model>", "Update model (sonnet, opus, haiku)")
-		.option("--max-budget-usd <amount>", "Update max budget in USD", Number.parseFloat)
-		.option("--allowed-tools <tools>", "Update allowed tools (comma-separated)")
 		.option(
-			"--system-prompt <prompt>",
-			"Update system prompt",
+			"--max-budget-usd <amount>",
+			"Update max budget in USD",
+			Number.parseFloat,
 		)
+		.option("--allowed-tools <tools>", "Update allowed tools (comma-separated)")
+		.option("--system-prompt <prompt>", "Update system prompt")
 		.option("--status <status>", "Set status (active, paused)")
 		.action((id: string, opts) => {
 			const db = getDb();
 
-			const row = db.query("SELECT * FROM automations WHERE id = ?").get(id) as Automation | null;
+			const row = db
+				.query("SELECT * FROM automations WHERE id = ?")
+				.get(id) as Automation | null;
 			if (!row) {
 				console.error(`Automation ${id} not found.`);
 				process.exit(1);
@@ -66,7 +69,9 @@ export function registerEdit(program: Command): void {
 			if (opts.allowedTools != null) {
 				sets.push("allowed_tools = ?");
 				values.push(
-					JSON.stringify(opts.allowedTools.split(",").map((t: string) => t.trim())),
+					JSON.stringify(
+						opts.allowedTools.split(",").map((t: string) => t.trim()),
+					),
 				);
 			}
 
@@ -82,10 +87,21 @@ export function registerEdit(program: Command): void {
 				}
 				sets.push("status = ?");
 				values.push(opts.status);
+
+				// Recalculate next_run_at when resuming an automation with an rrule
+				const rrule = opts.rrule ?? row.rrule;
+				if (opts.status === "active" && rrule) {
+					const rule = RRule.fromString(`RRULE:${rrule}`);
+					const next = rule.after(new Date());
+					sets.push("next_run_at = ?");
+					values.push(next ? next.getTime() : null);
+				}
 			}
 
 			if (sets.length === 0) {
-				console.error("No fields to update. Use --name, --prompt, --model, etc.");
+				console.error(
+					"No fields to update. Use --name, --prompt, --model, etc.",
+				);
 				process.exit(1);
 			}
 
@@ -93,10 +109,7 @@ export function registerEdit(program: Command): void {
 			values.push(Date.now());
 			values.push(id);
 
-			db.run(
-				`UPDATE automations SET ${sets.join(", ")} WHERE id = ?`,
-				values,
-			);
+			db.run(`UPDATE automations SET ${sets.join(", ")} WHERE id = ?`, values);
 
 			console.log(`Updated automation ${id} (${opts.name ?? row.name})`);
 		});

package/packages/cli/src/commands/onboard.ts

@@ -0,0 +1,73 @@
+import { existsSync, mkdirSync, readFileSync, writeFileSync } from "node:fs";
+import { homedir } from "node:os";
+import { join } from "node:path";
+import type { Command } from "commander";
+
+const INSTRUCTIONS = `
+## Task Scheduling (9to5)
+
+Use **9to5** to schedule and manage recurring Claude Code tasks. Run \`9to5 --help\` or \`9to5 <command> --help\` for full usage.
+
+Key commands: \`add\`, \`list\`, \`run\`, \`runs\`, \`inbox\`, \`edit\`, \`remove\`, \`start\`, \`stop\`, \`export\`, \`import\`, \`ui\`.
+
+### Options for \`add\` and \`edit\`
+
+| Option | Default |
+|--------|---------|
+| \`--prompt <prompt>\` | Required |
+| \`--cwd <dir>\` | Current directory |
+| \`--rrule <rule>\` | None (manual only) |
+| \`--model <model>\` | sonnet |
+| \`--max-budget-usd <amount>\` | None |
+| \`--allowed-tools <tools>\` | All tools |
+| \`--system-prompt <prompt>\` | None |
+
+### Scheduling (rrule)
+
+The \`--rrule\` flag uses RFC 5545 recurrence rules:
+- Daily at 9 AM: \`FREQ=DAILY;BYHOUR=9\`
+- Every 4 hours: \`FREQ=HOURLY;INTERVAL=4\`
+- Weekdays at 10 AM: \`FREQ=DAILY;BYDAY=MO,TU,WE,TH,FR;BYHOUR=10\`
+- Mondays at 9 AM: \`FREQ=WEEKLY;BYDAY=MO;BYHOUR=9\`
+
+Without \`--rrule\`, automations are manual-only (\`9to5 run <id>\`).
+`.trim();
+
+const MARKER = "## Task Scheduling (9to5)";
+
+export function registerOnboard(program: Command): void {
+	program
+		.command("onboard")
+		.description("Add 9to5 instructions to ~/.claude/CLAUDE.md")
+		.action(() => {
+			const claudeDir = join(homedir(), ".claude");
+			const claudeMd = join(claudeDir, "CLAUDE.md");
+
+			if (!existsSync(claudeDir)) {
+				mkdirSync(claudeDir, { recursive: true });
+			}
+
+			let existingContent = "";
+			if (existsSync(claudeMd)) {
+				existingContent = readFileSync(claudeMd, "utf-8");
+			}
+
+			if (existingContent.includes(MARKER)) {
+				console.log("✓ Already onboarded");
+				console.log(`  ${claudeMd}`);
+				return;
+			}
+
+			if (existingContent) {
+				const newContent = `${existingContent.trimEnd()}\n\n${INSTRUCTIONS}\n`;
+				writeFileSync(claudeMd, newContent);
+			} else {
+				writeFileSync(claudeMd, `${INSTRUCTIONS}\n`);
+			}
+
+			console.log(`✓ Added 9to5 instructions to ${claudeMd}`);
+			console.log();
+			console.log("Your agent now knows how to use 9to5!");
+			console.log();
+		});
+}

package/packages/cli/src/index.ts

@@ -6,6 +6,7 @@ import { registerExport } from "./commands/export.ts";
 import { registerImport } from "./commands/import.ts";
 import { registerInbox } from "./commands/inbox.ts";
 import { registerList } from "./commands/list.ts";
+import { registerOnboard } from "./commands/onboard.ts";
 import { registerRemove } from "./commands/remove.ts";
 import { registerRun } from "./commands/run.ts";
 import { registerRuns } from "./commands/runs.ts";
@@ -22,6 +23,7 @@ registerEdit(program);
 registerExport(program);
 registerImport(program);
 registerList(program);
+registerOnboard(program);
 registerRemove(program);
 registerRun(program);
 registerRuns(program);

package/packages/core/src/config.ts

@@ -1,4 +1,4 @@
-import { mkdirSync } from "node:fs";
+import { existsSync, mkdirSync, readFileSync } from "node:fs";
 import { homedir } from "node:os";
 import { join } from "node:path";
 
@@ -10,3 +10,15 @@ export const DAEMON_POLL_INTERVAL_MS = 30_000;
 export function ensureDataDir(): void {
 	mkdirSync(DATA_DIR, { recursive: true });
 }
+
+export function isDaemonRunning(): boolean {
+	if (!existsSync(PID_FILE)) return false;
+	try {
+		const pid = Number.parseInt(readFileSync(PID_FILE, "utf-8").trim(), 10);
+		if (Number.isNaN(pid)) return false;
+		process.kill(pid, 0);
+		return true;
+	} catch {
+		return false;
+	}
+}

package/packages/core/src/index.ts

@@ -4,6 +4,7 @@ export {
 	PID_FILE,
 	DAEMON_POLL_INTERVAL_MS,
 	ensureDataDir,
+	isDaemonRunning,
 } from "./config.ts";
 export type {
 	Automation,

package/packages/tui/src/app.tsx

@@ -1,5 +1,5 @@
 import type { Automation, Run } from "@9to5/core";
-import { getDb } from "@9to5/core";
+import { getDb, isDaemonRunning } from "@9to5/core";
 import { useKeyboard, useRenderer } from "@opentui/react";
 import { useState } from "react";
 import { AutomationDetail } from "./components/AutomationDetail.tsx";
@@ -34,13 +34,16 @@ export function App() {
 	const renderer = useRenderer();
 	const db = getDb();
 	const [view, setView] = useState<View>("automations");
-	const [selectedAutomation, setSelectedAutomation] = useState<Automation | null>(null);
+	const [selectedAutomation, setSelectedAutomation] =
+		useState<Automation | null>(null);
 	const [selectedRun, setSelectedRun] = useState<Run | null>(null);
 	const { message: notification, notify } = useNotification();
 
 	const { data: stats } = useDbQuery(() => {
 		const { count: running } = db
-			.query("SELECT COUNT(*) as count FROM runs WHERE status IN ('running','pending')")
+			.query(
+				"SELECT COUNT(*) as count FROM runs WHERE status IN ('running','pending')",
+			)
 			.get() as { count: number };
 		const { count: failed } = db
 			.query(
@@ -51,13 +54,15 @@ export function App() {
 			.get() as { count: number };
 		const { next: nextRunAt } = db
 			.query(
-				"SELECT MIN(next_run_at) as next FROM automations WHERE status = 'active' AND next_run_at IS NOT NULL",
+				"SELECT MIN(next_run_at) as next FROM automations WHERE status = 'active' AND next_run_at IS NOT NULL AND next_run_at > ?",
 			)
-			.get() as { next: number | null };
-		return { running, failed, nextRunAt };
+			.get(Date.now()) as { next: number | null };
+		const daemonUp = isDaemonRunning();
+		return { running, failed, nextRunAt, daemonUp };
 	});
 
 	const statParts: string[] = [];
+	if (!stats.daemonUp) statParts.push("daemon stopped");
 	if (stats.running > 0) statParts.push(`${stats.running} running`);
 	if (stats.failed > 0) statParts.push(`${stats.failed} failed`);
 	const nextIn = formatCountdown(stats.nextRunAt);
@@ -81,109 +86,120 @@ export function App() {
 
 	const leftTitle =
 		view === "automations" ? (
-			<span fg="cyan"><strong>Automations</strong></span>
+			<span fg="cyan">
+				<strong>Automations</strong>
+			</span>
 		) : (
 			<>
 				<span fg="cyan">{"← "}</span>
-				<span fg="cyan"><strong>{selectedAutomation?.name ?? ""}</strong></span>
+				<span fg="cyan">
+					<strong>{selectedAutomation?.name ?? ""}</strong>
+				</span>
 			</>
 		);
 
 	return (
-		<box
-			flexDirection="column"
-			width="100%"
-			height="100%"
-			position="relative"
-		>
-		<box
-			flexDirection="column"
-			flexGrow={1}
-			border
-			borderStyle="rounded"
-			borderColor="#444"
-		>
-			{/* Header */}
-			<box height={1} flexDirection="row" paddingLeft={1} paddingRight={1}>
-				<text>
-					<span fg="#c084fc">
-						<strong>{"◆ 9to5"}</strong>
-					</span>
-				</text>
-				<box flexGrow={1} />
-				{statParts.length > 0 ? (
+		<box flexDirection="column" width="100%" height="100%" position="relative">
+			<box
+				flexDirection="column"
+				flexGrow={1}
+				border
+				borderStyle="rounded"
+				borderColor="#444"
+			>
+				{/* Header */}
+				<box height={1} flexDirection="row" paddingLeft={1} paddingRight={1}>
 					<text>
-						<span fg="#666">{statParts.join(" · ")}</span>
+						<span fg="#c084fc">
+							<strong>{"◆ 9to5"}</strong>
+						</span>
 					</text>
-				) : null}
-			</box>
-
-			{/* 2-Column Content */}
-			<box flexDirection="row" flexGrow={1}>
-				{/* Left Panel */}
-				<box
-					flexDirection="column"
-					width={28}
-					overflow="hidden"
-				>
-					<box height={1} paddingLeft={1}>
-						<text>{leftTitle}</text>
-					</box>
-					{view === "automations" ? (
-						<AutomationList
-							focused={true}
-							onSelect={setSelectedAutomation}
-							onNotify={notify}
-							onDrillDown={handleDrillDown}
-						/>
-					) : selectedAutomation ? (
-						<RunList
-							key={selectedAutomation.id}
-							automationId={selectedAutomation.id}
-							focused={true}
-							onSelect={setSelectedRun}
-							onNotify={notify}
-							onBack={handleBack}
-						/>
+					<box flexGrow={1} />
+					{statParts.length > 0 ? (
+						<text>
+							{!stats.daemonUp ? (
+								<span fg="yellow">{"daemon stopped"}</span>
+							) : null}
+							{!stats.daemonUp && statParts.length > 1 ? (
+								<span fg="#666">{" · "}</span>
+							) : null}
+							<span fg="#666">
+								{(stats.daemonUp ? statParts : statParts.slice(1)).join(" · ")}
+							</span>
+						</text>
 					) : null}
 				</box>
 
-				{/* Separator */}
-				<box width={1} backgroundColor="#444" />
-
-				{/* Right Panel - Detail */}
-				<box flexDirection="column" flexGrow={1} paddingLeft={1}>
-					{view === "automations" && selectedAutomation ? (
-						<AutomationDetail automation={selectedAutomation} />
-					) : view === "runs" && selectedRun ? (
-						<RunDetail
-							run={selectedRun}
-							automationName={selectedAutomation?.name}
-						/>
-					) : (
-						<box
-							flexGrow={1}
-							justifyContent="center"
-							alignItems="center"
-						>
-							<text>
-								<span fg="#666">Select an item to view details</span>
-							</text>
+				{/* 2-Column Content */}
+				<box flexDirection="row" flexGrow={1}>
+					{/* Left Panel */}
+					<box flexDirection="column" width={28} overflow="hidden">
+						<box height={1} paddingLeft={1}>
+							<text>{leftTitle}</text>
 						</box>
-					)}
-				</box>
-			</box>
+						{view === "automations" ? (
+							<AutomationList
+								focused={true}
+								onSelect={setSelectedAutomation}
+								onNotify={notify}
+								onDrillDown={handleDrillDown}
+							/>
+						) : selectedAutomation ? (
+							<RunList
+								key={selectedAutomation.id}
+								automationId={selectedAutomation.id}
+								focused={true}
+								onSelect={setSelectedRun}
+								onNotify={notify}
+								onBack={handleBack}
+							/>
+						) : null}
+					</box>
 
-			{/* Status Bar */}
-			<StatusBar hints={view === "runs" ? RUNS_HINTS : [
-				{ k: "↑↓", label: "navigate" },
-				{ k: "→/⏎", label: "runs" },
-				{ k: "r", label: "run" },
-				{ k: "p", label: selectedAutomation?.status === "active" ? "pause" : "resume" },
-				{ k: "dd", label: "delete" },
-			]} notification={notification} />
-		</box>
+					{/* Separator */}
+					<box width={1} backgroundColor="#444" />
+
+					{/* Right Panel - Detail */}
+					<box flexDirection="column" flexGrow={1} paddingLeft={1}>
+						{view === "automations" && selectedAutomation ? (
+							<AutomationDetail automation={selectedAutomation} />
+						) : view === "runs" && selectedRun ? (
+							<RunDetail
+								run={selectedRun}
+								automationName={selectedAutomation?.name}
+							/>
+						) : (
+							<box flexGrow={1} justifyContent="center" alignItems="center">
+								<text>
+									<span fg="#666">Select an item to view details</span>
+								</text>
+							</box>
+						)}
+					</box>
+				</box>
 
+				{/* Status Bar */}
+				<StatusBar
+					hints={
+						view === "runs"
+							? RUNS_HINTS
+							: [
+									{ k: "↑↓", label: "navigate" },
+									{ k: "→/⏎", label: "runs" },
+									{ k: "r", label: "run" },
+									{
+										k: "p",
+										label:
+											selectedAutomation?.status === "active"
+												? "pause"
+												: "resume",
+									},
+									{ k: "dd", label: "delete" },
+								]
+					}
+					notification={notification}
+				/>
+			</box>
 		</box>
 	);
 }

package/packages/tui/src/components/AutomationDetail.tsx

@@ -1,12 +1,12 @@
 import type { Automation, Run } from "@9to5/core";
 import { getDb } from "@9to5/core";
 import { useDbQuery } from "../hooks/useDbQuery.ts";
+import { useSpinner } from "../hooks/useSpinner.ts";
 import { Field } from "./Field.tsx";
 import { Section } from "./Section.tsx";
 
 const STATUS_STYLE: Record<string, { symbol: string; color: string }> = {
 	pending: { symbol: "◦", color: "yellow" },
-	running: { symbol: "⟳", color: "#5599ff" },
 	completed: { symbol: "✓", color: "green" },
 	failed: { symbol: "✗", color: "red" },
 };
@@ -26,9 +26,7 @@ function formatDuration(ms: number | null): string {
 	return `${Math.floor(ms / 60000)}m ${Math.round((ms % 60000) / 1000)}s`;
 }
 
-export function AutomationDetail({
-	automation,
-}: { automation: Automation }) {
+export function AutomationDetail({ automation }: { automation: Automation }) {
 	const a = automation;
 	const db = getDb();
 
@@ -44,6 +42,9 @@ export function AutomationDetail({
 				.all(a.id) as Run[],
 	);
 
+	const hasRunning = recentRuns.some((r) => r.status === "running");
+	const spinnerFrame = useSpinner(hasRunning);
+
 	const statusColor = a.status === "active" ? "green" : "yellow";
 	const statusSymbol = a.status === "active" ? "●" : "○";
 
@@ -65,24 +66,18 @@ export function AutomationDetail({
 					<Field label="Schedule" value={a.rrule} />
 					<Field
 						label="Budget"
-						value={
-							a.max_budget_usd != null ? `$${a.max_budget_usd}` : null
-						}
+						value={a.max_budget_usd != null ? `$${a.max_budget_usd}` : null}
 					/>
 					<Field
 						label="Next Run"
 						value={
-							a.next_run_at
-								? new Date(a.next_run_at).toLocaleString()
-								: null
+							a.next_run_at ? new Date(a.next_run_at).toLocaleString() : null
 						}
 					/>
 					<Field
 						label="Last Run"
 						value={
-							a.last_run_at
-								? new Date(a.last_run_at).toLocaleString()
-								: null
+							a.last_run_at ? new Date(a.last_run_at).toLocaleString() : null
 						}
 					/>
 				</Section>
@@ -110,10 +105,16 @@ export function AutomationDetail({
 				{recentRuns.length > 0 ? (
 					<Section title="Recent Runs">
 						{recentRuns.map((run) => {
-							const st = STATUS_STYLE[run.status] ?? STATUS_STYLE.pending;
+							const st =
+								run.status === "running"
+									? { symbol: spinnerFrame, color: "#5599ff" }
+									: (STATUS_STYLE[run.status] ?? STATUS_STYLE.pending);
 							const duration = formatDuration(run.duration_ms);
-							const cost = run.cost_usd != null ? `$${run.cost_usd.toFixed(4)}` : "";
-							const parts = [timeAgo(run.created_at), duration, cost].filter(Boolean).join(" · ");
+							const cost =
+								run.cost_usd != null ? `$${run.cost_usd.toFixed(4)}` : "";
+							const parts = [timeAgo(run.created_at), duration, cost]
+								.filter(Boolean)
+								.join(" · ");
 
 							return (
 								<text key={run.id}>

package/packages/tui/src/components/AutomationList.tsx

@@ -1,9 +1,16 @@
-import { type Automation, executeRun, generateId, getDb } from "@9to5/core";
+import {
+	type Automation,
+	RRule,
+	executeRun,
+	generateId,
+	getDb,
+} from "@9to5/core";
 import { useKeyboard } from "@opentui/react";
 import { useCallback, useEffect } from "react";
 import { useDoubleTap } from "../hooks/useConfirm.ts";
 import { useDbQuery } from "../hooks/useDbQuery.ts";
 import { useListNav } from "../hooks/useListNav.ts";
+import { useSpinner } from "../hooks/useSpinner.ts";
 import { ListItem } from "./ListItem.tsx";
 
 const STATUS_ICON: Record<string, { symbol: string; color: string }> = {
@@ -49,7 +56,12 @@ export function AutomationList({
 				.all() as AutomationRow[],
 	);
 
-	const { selectedIndex, setSelectedIndex } = useListNav(automations.length, focused);
+	const { selectedIndex, setSelectedIndex } = useListNav(
+		automations.length,
+		focused,
+	);
+	const hasRunning = automations.some((a) => a.running_count > 0);
+	const spinnerFrame = useSpinner(hasRunning);
 
 	const selected = automations[selectedIndex] as AutomationRow | undefined;
 
@@ -78,12 +90,25 @@ export function AutomationList({
 
 		if (key.name === "p") {
 			const newStatus = selected.status === "active" ? "paused" : "active";
-			db.run(
-				"UPDATE automations SET status = ?, updated_at = ? WHERE id = ?",
-				[newStatus, Date.now(), selected.id],
-			);
+			if (newStatus === "active" && selected.rrule) {
+				const rule = RRule.fromString(`RRULE:${selected.rrule}`);
+				const next = rule.after(new Date());
+				db.run(
+					"UPDATE automations SET status = ?, next_run_at = ?, updated_at = ? WHERE id = ?",
+					[newStatus, next ? next.getTime() : null, Date.now(), selected.id],
+				);
+			} else {
+				db.run(
+					"UPDATE automations SET status = ?, updated_at = ? WHERE id = ?",
+					[newStatus, Date.now(), selected.id],
+				);
+			}
 			refresh();
-			onNotify(newStatus === "paused" ? `Paused "${selected.name}"` : `Resumed "${selected.name}"`);
+			onNotify(
+				newStatus === "paused"
+					? `Paused "${selected.name}"`
+					: `Resumed "${selected.name}"`,
+			);
 		}
 	});
 
@@ -126,17 +151,27 @@ export function AutomationList({
 				const isRunning = a.running_count > 0;
 				const isPaused = a.status === "paused";
 				const s = isRunning
-					? { symbol: "⟳", color: "#5599ff" }
+					? { symbol: spinnerFrame, color: "#5599ff" }
 					: (STATUS_ICON[a.status] ?? STATUS_ICON.active);
 				const sel = i === selectedIndex;
-				const nameColor = sel ? "cyan" : isRunning ? "#ccc" : isPaused ? "#777" : "#ddd";
+				const nameColor = sel
+					? "cyan"
+					: isRunning
+						? "#ccc"
+						: isPaused
+							? "#777"
+							: "#ddd";
 				const suffixLen =
 					(a.unread_count > 0 ? ` (${a.unread_count})`.length : 0) +
 					(isRunning ? " running…".length : 0);
 				const nameMax = MAX_NAME_LEN - suffixLen;
 
 				return (
-					<ListItem key={a.id} selected={sel} onClick={() => setSelectedIndex(i)}>
+					<ListItem
+						key={a.id}
+						selected={sel}
+						onClick={() => setSelectedIndex(i)}
+					>
 						<text>
 							<span fg={sel ? "cyan" : "#333"}>{sel ? "▸ " : "  "}</span>
 							<span fg={s.color}>{s.symbol} </span>
@@ -146,9 +181,7 @@ export function AutomationList({
 							{a.unread_count > 0 ? (
 								<span fg="cyan">{` (${a.unread_count})`}</span>
 							) : null}
-							{isRunning ? (
-								<span fg="#5599ff">{" "}running…</span>
-							) : null}
+							{isRunning ? <span fg="#5599ff"> running…</span> : null}
 						</text>
 					</ListItem>
 				);

package/packages/tui/src/components/RunDetail.tsx

@@ -1,10 +1,10 @@
 import type { Run } from "@9to5/core";
+import { useSpinner } from "../hooks/useSpinner.ts";
 import { Field } from "./Field.tsx";
 import { Section } from "./Section.tsx";
 
 const STATUS_STYLE: Record<string, { symbol: string; color: string }> = {
 	pending: { symbol: "◦", color: "yellow" },
-	running: { symbol: "⟳", color: "blue" },
 	completed: { symbol: "✓", color: "green" },
 	failed: { symbol: "✗", color: "red" },
 };
@@ -29,7 +29,11 @@ export function RunDetail({
 	run,
 	automationName,
 }: { run: Run; automationName?: string }) {
-	const st = STATUS_STYLE[run.status] ?? STATUS_STYLE.pending;
+	const spinnerFrame = useSpinner(run.status === "running");
+	const st =
+		run.status === "running"
+			? { symbol: spinnerFrame, color: "#5599ff" }
+			: (STATUS_STYLE[run.status] ?? STATUS_STYLE.pending);
 
 	return (
 		<scrollbox flexGrow={1}>
@@ -48,9 +52,7 @@ export function RunDetail({
 					<Field
 						label="Started"
 						value={
-							run.started_at
-								? new Date(run.started_at).toLocaleString()
-								: null
+							run.started_at ? new Date(run.started_at).toLocaleString() : null
 						}
 					/>
 					<Field
@@ -64,14 +66,12 @@ export function RunDetail({
 				</Section>
 
 				{/* Stats */}
-				{(run.cost_usd != null || run.duration_ms != null) ? (
+				{run.cost_usd != null || run.duration_ms != null ? (
 					<Section title="Stats">
 						<Field
 							label="Cost"
 							value={
-								run.cost_usd != null
-									? `$${run.cost_usd.toFixed(4)}`
-									: null
+								run.cost_usd != null ? `$${run.cost_usd.toFixed(4)}` : null
 							}
 						/>
 						<Field label="Duration" value={formatDuration(run.duration_ms)} />

package/packages/tui/src/components/RunList.tsx

@@ -5,11 +5,11 @@ import { useCallback, useEffect } from "react";
 import { useDoubleTap } from "../hooks/useConfirm.ts";
 import { useDbQuery } from "../hooks/useDbQuery.ts";
 import { useListNav } from "../hooks/useListNav.ts";
+import { useSpinner } from "../hooks/useSpinner.ts";
 import { ListItem } from "./ListItem.tsx";
 
 const STATUS_STYLE: Record<string, { symbol: string; color: string }> = {
 	pending: { symbol: "◦", color: "yellow" },
-	running: { symbol: "⟳", color: "#5599ff" },
 	completed: { symbol: "✓", color: "green" },
 	failed: { symbol: "✗", color: "red" },
 };
@@ -59,6 +59,8 @@ export function RunList({
 	);
 
 	const { selectedIndex, setSelectedIndex } = useListNav(rows.length, focused);
+	const hasRunning = rows.some((r) => r.status === "running");
+	const spinnerFrame = useSpinner(hasRunning);
 
 	const selected = rows[selectedIndex] as RunRow | undefined;
 
@@ -94,14 +96,35 @@ export function RunList({
 			lines.push(`Run: ${selected.id}`);
 			lines.push(`Status: ${selected.status}`);
 			if (selected.session_id) lines.push(`Session: ${selected.session_id}`);
-			if (selected.started_at) lines.push(`Started: ${new Date(selected.started_at).toLocaleString()}`);
-			if (selected.completed_at) lines.push(`Completed: ${new Date(selected.completed_at).toLocaleString()}`);
-			if (selected.cost_usd != null) lines.push(`Cost: $${selected.cost_usd.toFixed(4)}`);
-			if (selected.duration_ms != null) lines.push(`Duration: ${selected.duration_ms}ms`);
-			if (selected.num_turns != null) lines.push(`Turns: ${selected.num_turns}`);
-			if (selected.result) { lines.push(""); lines.push("--- Result ---"); lines.push(selected.result); }
-			if (selected.output) { lines.push(""); lines.push("--- Output ---"); lines.push(selected.output); }
-			if (selected.error) { lines.push(""); lines.push("--- Error ---"); lines.push(selected.error); }
+			if (selected.started_at)
+				lines.push(
+					`Started: ${new Date(selected.started_at).toLocaleString()}`,
+				);
+			if (selected.completed_at)
+				lines.push(
+					`Completed: ${new Date(selected.completed_at).toLocaleString()}`,
+				);
+			if (selected.cost_usd != null)
+				lines.push(`Cost: $${selected.cost_usd.toFixed(4)}`);
+			if (selected.duration_ms != null)
+				lines.push(`Duration: ${selected.duration_ms}ms`);
+			if (selected.num_turns != null)
+				lines.push(`Turns: ${selected.num_turns}`);
+			if (selected.result) {
+				lines.push("");
+				lines.push("--- Result ---");
+				lines.push(selected.result);
+			}
+			if (selected.output) {
+				lines.push("");
+				lines.push("--- Output ---");
+				lines.push(selected.output);
+			}
+			if (selected.error) {
+				lines.push("");
+				lines.push("--- Error ---");
+				lines.push(selected.error);
+			}
 			const content = lines.join("\n");
 			Bun.spawn(["pbcopy"], { stdin: new Blob([content]) });
 			onNotify("Copied run details to clipboard");
@@ -131,7 +154,10 @@ export function RunList({
 	return (
 		<box flexDirection="column">
 			{rows.map((r, i) => {
-				const st = STATUS_STYLE[r.status] ?? STATUS_STYLE.pending;
+				const st =
+					r.status === "running"
+						? { symbol: spinnerFrame, color: "#5599ff" }
+						: (STATUS_STYLE[r.status] ?? STATUS_STYLE.pending);
 				const sel = i === selectedIndex;
 				const unread = r.inbox_id != null && r.inbox_read_at == null;
 				const nameColor = sel
@@ -143,7 +169,11 @@ export function RunList({
 							: "#aaa";
 
 				return (
-					<ListItem key={r.id} selected={sel} onClick={() => setSelectedIndex(i)}>
+					<ListItem
+						key={r.id}
+						selected={sel}
+						onClick={() => setSelectedIndex(i)}
+					>
 						<text>
 							<span fg={sel ? "cyan" : "#333"}>{sel ? "▸ " : "  "}</span>
 							<span fg={st.color}>{st.symbol} </span>

package/packages/tui/src/components/Section.tsx

@@ -11,7 +11,9 @@ export function Section({
 					<strong>{title}</strong>
 				</span>
 			</text>
-			<box flexDirection="column" paddingLeft={1}>{children}</box>
+			<box flexDirection="column" paddingLeft={1}>
+				{children}
+			</box>
 		</box>
 	);
 }

package/packages/tui/src/components/StatusBar.tsx

@@ -3,7 +3,13 @@ export function StatusBar({
 	notification,
 }: { hints: { k: string; label: string }[]; notification?: string | null }) {
 	return (
-		<box height={1} flexDirection="row" paddingLeft={1} paddingRight={1} gap={2}>
+		<box
+			height={1}
+			flexDirection="row"
+			paddingLeft={1}
+			paddingRight={1}
+			gap={2}
+		>
 			{hints.map((h) => (
 				<text key={h.k}>
 					<span fg="cyan">

package/packages/tui/src/hooks/useConfirm.ts

@@ -3,10 +3,7 @@ import { useCallback, useRef } from "react";
 
 const DEBOUNCE_MS = 400;
 
-export function useDoubleTap(
-	targetKey: string,
-	onDoubleTap: () => void,
-): void {
+export function useDoubleTap(targetKey: string, onDoubleTap: () => void): void {
 	const lastTapRef = useRef(0);
 
 	useKeyboard(

package/packages/tui/src/hooks/useListNav.ts

@@ -1,7 +1,10 @@
 import { useKeyboard } from "@opentui/react";
 import { useEffect, useState } from "react";
 
-export function useListNav(listLength: number, active = true): {
+export function useListNav(
+	listLength: number,
+	active = true,
+): {
 	selectedIndex: number;
 	setSelectedIndex: (i: number) => void;
 	scrollOffset: number;

package/packages/tui/src/hooks/useSpinner.ts

@@ -0,0 +1,32 @@
+import { useEffect, useRef, useState } from "react";
+
+const FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
+const INTERVAL_MS = 80;
+
+export function useSpinner(active: boolean): string {
+	const [index, setIndex] = useState(0);
+	const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+	useEffect(() => {
+		if (active) {
+			intervalRef.current = setInterval(() => {
+				setIndex((i) => (i + 1) % FRAMES.length);
+			}, INTERVAL_MS);
+		} else {
+			if (intervalRef.current) {
+				clearInterval(intervalRef.current);
+				intervalRef.current = null;
+			}
+			setIndex(0);
+		}
+
+		return () => {
+			if (intervalRef.current) {
+				clearInterval(intervalRef.current);
+				intervalRef.current = null;
+			}
+		};
+	}, [active]);
+
+	return active ? FRAMES[index] : "";
+}