prodboard 0.2.2 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # prodboard
 
+## 0.3.0
+
+### Minor Changes
+
+- [#17](https://github.com/G4brym/prodboard/pull/17) [`20f3860`](https://github.com/G4brym/prodboard/commit/20f38608b1a5a9d986bcf1d04d4dfb579fa7ec18) Thanks [@G4brym](https://github.com/G4brym)! - Add `trigger_schedule` MCP tool to manually trigger a schedule run
+
+  Adds a new MCP tool that allows agents and users to trigger a schedule to run immediately without waiting for the cron interval. The run is started asynchronously and returns the run ID so callers can check status via `list_runs`. Disabled schedules are rejected, and the concurrent run limit is enforced.
+
+### Patch Changes
+
+- [#20](https://github.com/G4brym/prodboard/pull/20) [`53c5d4d`](https://github.com/G4brym/prodboard/commit/53c5d4d1ee7331e50f4b4cc5fb1aa8e37836967e) Thanks [@G4brym](https://github.com/G4brym)! - Fix schedules with identical cron patterns — all matching schedules now fire
+
+  Snapshot the running-run count once before the tick loop instead of re-querying
+  inside the loop. This prevents a run created for schedule A from counting against
+  schedule B's concurrency check when both share the same cron expression.
+
+## 0.2.3
+
+### Patch Changes
+
+- [#13](https://github.com/G4brym/prodboard/pull/13) [`5465723`](https://github.com/G4brym/prodboard/commit/54657238021a20fb0d5a4bb6e13a1b8eab026c31) Thanks [@G4brym](https://github.com/G4brym)! - Fix systemd service missing PATH environment variable
+
+  The generated systemd service file only set `HOME` but not `PATH`, causing the daemon to run with a minimal default PATH. This meant tools like `claude` and `gh` installed in user-local directories (e.g. `~/.local/bin`) were not found, resulting in scheduled runs failing with exit code 127.
+
+  The fix captures the current `PATH` at install time and includes it in the systemd service file.
+
+- [`af1ff32`](https://github.com/G4brym/prodboard/commit/af1ff3291993e0720a4044220b84f8b048fef26e) Thanks [@G4brym](https://github.com/G4brym)! - Fix webui failing to load when prodboard is installed globally by adding `@jsxImportSource hono/jsx` pragma to all TSX files.
+
 ## 0.2.2
 
 ### Patch Changes

package/README.md

@@ -197,6 +197,7 @@ These are the tools Claude Code sees when connected to the board:
 | `create_schedule` | Set up a new cron job |
 | `update_schedule` | Modify a schedule |
 | `delete_schedule` | Remove a schedule |
+| `trigger_schedule` | Trigger a schedule to run immediately |
 | `list_runs` | Check run history and results |
 
 MCP resources: `prodboard://issues` (board summary) and `prodboard://schedules` (active schedules).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "prodboard",
-  "version": "0.2.2",
+  "version": "0.3.0",
   "description": "Self-hosted, CLI-first issue tracker and cron scheduler for AI coding agents",
   "type": "module",
   "license": "MIT",

package/src/agents/claude.ts

@@ -86,13 +86,14 @@ export class ClaudeDriver implements AgentDriver {
         }
       }
       if (event.type === "result") {
-        if (event.result?.tokens_in) tokens_in = event.result.tokens_in;
-        if (event.result?.tokens_out) tokens_out = event.result.tokens_out;
-        if (event.result?.cost_usd) cost_usd = event.result.cost_usd;
+        if (event.usage) {
+          tokens_in = (event.usage.input_tokens ?? 0)
+            + (event.usage.cache_read_input_tokens ?? 0)
+            + (event.usage.cache_creation_input_tokens ?? 0);
+          tokens_out = event.usage.output_tokens ?? 0;
+        }
+        if (event.total_cost_usd) cost_usd = event.total_cost_usd;
       }
-      if (event.tokens_in) tokens_in = event.tokens_in;
-      if (event.tokens_out) tokens_out = event.tokens_out;
-      if (event.cost_usd) cost_usd = event.cost_usd;
     }
 
     return {

package/src/agents/types.ts

@@ -25,10 +25,12 @@ export interface StreamEvent {
   session_id?: string;
   tool?: string;
   tool_input?: any;
-  result?: {
-    tokens_in?: number;
-    tokens_out?: number;
-    cost_usd?: number;
+  total_cost_usd?: number;
+  usage?: {
+    input_tokens?: number;
+    output_tokens?: number;
+    cache_read_input_tokens?: number;
+    cache_creation_input_tokens?: number;
   };
   [key: string]: any;
 }

package/src/commands/install.ts

@@ -43,7 +43,8 @@ export async function runSystemctl(...args: string[]): Promise<{ exitCode: numbe
   return { exitCode, stdout, stderr };
 }
 
-export function generateServiceFile(bunPath: string, prodboardPath: string, home: string): string {
+export function generateServiceFile(bunPath: string, prodboardPath: string, home: string, envPath?: string): string {
+  const pathLine = envPath ? `\nEnvironment="PATH=${envPath}"` : "";
   return `[Unit]
 Description=prodboard scheduler daemon
 After=network.target
@@ -53,7 +54,7 @@ Type=simple
 ExecStart=${bunPath} run ${prodboardPath} daemon
 Restart=on-failure
 RestartSec=10
-Environment="HOME=${home}"
+Environment="HOME=${home}"${pathLine}
 
 [Install]
 WantedBy=default.target
@@ -83,7 +84,7 @@ export async function install(args: string[]): Promise<void> {
   const prodboardPath = Bun.which("prodboard") ?? `${bunPath} x prodboard`;
   const home = os.homedir();
 
-  const serviceContent = generateServiceFile(bunPath, prodboardPath, home);
+  const serviceContent = generateServiceFile(bunPath, prodboardPath, home, process.env.PATH);
 
   fs.mkdirSync(SERVICE_DIR, { recursive: true });
   fs.writeFileSync(SERVICE_PATH, serviceContent);

package/src/commands/schedules.ts

@@ -205,6 +205,7 @@ export async function scheduleLogs(args: string[], dbOverride?: Database): Promi
     schedule_id: (flags.schedule ?? flags.s) as string | undefined,
     status: flags.status as string | undefined,
     limit: safeParseInt(flags.limit ?? flags.n),
+    include_output: isJson,
   });
 
   if (isJson) {

package/src/mcp.ts

@@ -200,16 +200,28 @@ const TOOLS = [
   },
   {
     name: "list_runs",
-    description: "List run history for schedules.",
+    description: "List run history for schedules. By default excludes large fields (stdout_tail, prompt_used) for compact output.",
     inputSchema: {
       type: "object" as const,
       properties: {
         schedule_id: { type: "string" as const, description: "Filter by schedule ID" },
         status: { type: "string" as const, description: "Filter by run status" },
         limit: { type: "number" as const, description: "Max runs to return" },
+        include_output: { type: "boolean" as const, description: "Include stdout_tail and prompt_used fields (default: false)" },
       },
     },
   },
+  {
+    name: "trigger_schedule",
+    description: "Manually trigger a schedule to run immediately. The run is started asynchronously — returns the run ID so you can check status later via list_runs.",
+    inputSchema: {
+      type: "object" as const,
+      properties: {
+        id: { type: "string" as const, description: "Schedule ID or unique prefix" },
+      },
+      required: ["id"],
+    },
+  },
 ];
 
 const RESOURCES = [
@@ -429,7 +441,50 @@ export async function handleListRuns(db: Database, params: any) {
     schedule_id: params?.schedule_id,
     status: params?.status,
     limit: params?.limit,
+    include_output: params?.include_output,
+  });
+}
+
+export async function handleTriggerSchedule(db: Database, config: Config, params: any) {
+  const sq = await getScheduleQueries();
+  if (!sq) throw new Error("Schedule module not available");
+  const rq = await getRunQueries();
+  if (!rq) throw new Error("Run module not available");
+
+  const schedule = sq.getScheduleByPrefix(db, params.id);
+
+  if (!schedule.enabled) {
+    throw new Error(`Schedule "${schedule.name}" is disabled. Enable it first via update_schedule.`);
+  }
+
+  // Respect concurrent run limit
+  const runningRuns = rq.getRunningRuns(db);
+  if (runningRuns.length >= config.daemon.maxConcurrentRuns) {
+    throw new Error(
+      `Concurrent run limit reached (${runningRuns.length}/${config.daemon.maxConcurrentRuns}). Wait for a running schedule to finish or increase maxConcurrentRuns.`
+    );
+  }
+
+  const run = rq.createRun(db, {
+    schedule_id: schedule.id,
+    prompt_used: schedule.prompt,
+    agent: config.daemon.agent,
   });
+
+  // Fire-and-forget: start execution asynchronously
+  // Note: ExecutionManager created without tmux/worktree managers — MCP-triggered runs
+  // use direct execution only. Daemon-triggered runs get full tmux/worktree support.
+  const { ExecutionManager } = await import("./scheduler.ts");
+  const em = new ExecutionManager(db, config);
+  em.executeRun(schedule, run).catch(() => {});
+
+  return {
+    run_id: run.id,
+    schedule_id: schedule.id,
+    schedule_name: schedule.name,
+    status: "started",
+    message: "Run started asynchronously. Use list_runs to check status.",
+  };
 }
 
 export async function startMcpServer(): Promise<void> {
@@ -497,6 +552,9 @@ export async function startMcpServer(): Promise<void> {
         case "list_runs":
           result = await handleListRuns(db, params ?? {});
           break;
+        case "trigger_schedule":
+          result = await handleTriggerSchedule(db, config, params ?? {});
+          break;
         default:
           return {
             content: [{ type: "text", text: `Unknown tool: ${name}` }],

package/src/queries/runs.ts

@@ -50,7 +50,7 @@ export function updateRun(
 
 export function listRuns(
   db: Database,
-  opts?: { schedule_id?: string; status?: string; limit?: number }
+  opts?: { schedule_id?: string; status?: string; limit?: number; include_output?: boolean }
 ): Run[] {
   const conditions: string[] = [];
   const params: any[] = [];
@@ -67,8 +67,15 @@ export function listRuns(
   const where = conditions.length > 0 ? "WHERE " + conditions.join(" AND ") : "";
   const limit = opts?.limit ?? 50;
 
+  const columns = opts?.include_output
+    ? "r.*"
+    : `r.id, r.schedule_id, r.status, r.pid, r.started_at, r.finished_at,
+       r.exit_code, r.stderr_tail, r.session_id, r.worktree_path,
+       r.tokens_in, r.tokens_out, r.cost_usd, r.tools_used,
+       r.issues_touched, r.tmux_session, r.agent`;
+
   return db.query(`
-    SELECT r.*, s.name as schedule_name
+    SELECT ${columns}, s.name as schedule_name
     FROM runs r
     LEFT JOIN schedules s ON r.schedule_id = s.id
     ${where}

package/src/scheduler.ts

@@ -282,6 +282,13 @@ export class CronLoop {
 
       const schedules = listSchedules(this.db);
 
+      // Snapshot running count once before creating any new runs this tick.
+      // Without this, createRun() for schedule A inserts a 'running' row that
+      // getRunningRuns() would count when evaluating schedule B, causing
+      // schedules with identical cron patterns to block each other.
+      const runningCount = getRunningRuns(this.db).length;
+      let newRunsThisTick = 0;
+
       for (const schedule of schedules) {
         try {
           if (!shouldFire(schedule.cron, now)) continue;
@@ -289,8 +296,7 @@ export class CronLoop {
           const lastFiredMinute = this.lastFired.get(schedule.id);
           if (lastFiredMinute === minuteTs) continue;
 
-          const runningRuns = getRunningRuns(this.db);
-          if (runningRuns.length >= this.config.daemon.maxConcurrentRuns) continue;
+          if (runningCount + newRunsThisTick >= this.config.daemon.maxConcurrentRuns) break;
 
           const run = createRun(this.db, {
             schedule_id: schedule.id,
@@ -299,6 +305,7 @@ export class CronLoop {
           });
 
           this.lastFired.set(schedule.id, minuteTs);
+          newRunsThisTick++;
 
           this.executionManager.executeRun(schedule, run).catch(() => {});
         } catch (err) {

package/src/webui/components/board.tsx

@@ -1,3 +1,4 @@
+/** @jsxImportSource hono/jsx */
 import type { FC } from "hono/jsx";
 import type { Issue } from "../../types.ts";
 import { StatusBadge } from "./status-badge.tsx";
@@ -13,18 +14,25 @@ export const Board: FC<{ issues: Issue[]; statuses: string[] }> = ({ issues, sta
   }
 
   return (
-    <div class="board">
+    <div id="board" data-statuses={JSON.stringify(statuses.filter((s) => s !== "archived"))} class="flex gap-4 overflow-x-auto pb-4">
       {statuses.filter((s) => s !== "archived").map((status) => (
-        <div class="board-column" key={status}>
-          <h3>
-            {status} <span class="count">({(grouped[status] || []).length})</span>
-          </h3>
-          {(grouped[status] || []).map((issue) => (
-            <a href={`/issues/${issue.id}`} class="card" key={issue.id}>
-              <div class="card-title">{issue.title}</div>
-              <div class="card-meta">{issue.id.slice(0, 8)}</div>
-            </a>
-          ))}
+        <div class="flex-1 min-w-[220px]" key={status}>
+          <div class="flex items-center gap-2 mb-3 px-1">
+            <h3 class="text-xs font-semibold uppercase tracking-wider text-muted-foreground">{status}</h3>
+            <span class="text-xs text-muted-foreground/60">{(grouped[status] || []).length}</span>
+          </div>
+          <div class="space-y-2">
+            {(grouped[status] || []).map((issue) => (
+              <a
+                href={`/issues/${issue.id}`}
+                class="block rounded-lg border border-border bg-card p-3 hover:bg-accent transition-colors group"
+                key={issue.id}
+              >
+                <div class="text-sm font-medium text-card-foreground group-hover:text-foreground">{issue.title}</div>
+                <div class="text-xs text-muted-foreground mt-1 font-mono">{issue.id.slice(0, 8)}</div>
+              </a>
+            ))}
+          </div>
         </div>
       ))}
     </div>

package/src/webui/components/layout.tsx

@@ -1,5 +1,7 @@
+/** @jsxImportSource hono/jsx */
 import type { FC } from "hono/jsx";
-import { STYLES } from "../static/style.ts";
+import { raw } from "hono/html";
+import { TAILWIND_SCRIPT, THEME, STYLES } from "../static/style.ts";
 
 export const Layout: FC<{ title?: string; children: any }> = ({ title, children }) => {
   return (
@@ -8,20 +10,30 @@ export const Layout: FC<{ title?: string; children: any }> = ({ title, children
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <title>{title ? `${title} - prodboard` : "prodboard"}</title>
+        {raw(TAILWIND_SCRIPT)}
+        {raw(THEME)}
         <style>{STYLES}</style>
       </head>
-      <body>
-        <nav>
-          <div class="nav-inner">
-            <a href="/" class="logo">prodboard</a>
-            <div class="nav-links">
-              <a href="/issues">Issues</a>
-              <a href="/schedules">Schedules</a>
-              <a href="/runs">Runs</a>
-            </div>
+      <body class="bg-background text-foreground min-h-screen">
+        <header class="border-b border-border">
+          <div class="mx-auto max-w-7xl flex items-center justify-between px-6 h-14">
+            <a href="/" class="text-sm font-bold tracking-tight text-foreground hover:text-foreground/80">
+              prodboard
+            </a>
+            <nav class="flex items-center gap-1">
+              <a href="/issues" class="px-3 py-1.5 text-sm text-muted-foreground hover:text-foreground hover:bg-accent rounded-md transition-colors">
+                Issues
+              </a>
+              <a href="/schedules" class="px-3 py-1.5 text-sm text-muted-foreground hover:text-foreground hover:bg-accent rounded-md transition-colors">
+                Schedules
+              </a>
+              <a href="/runs" class="px-3 py-1.5 text-sm text-muted-foreground hover:text-foreground hover:bg-accent rounded-md transition-colors">
+                Runs
+              </a>
+            </nav>
           </div>
-        </nav>
-        <main>{children}</main>
+        </header>
+        <main class="mx-auto max-w-7xl px-6 py-6">{children}</main>
       </body>
     </html>
   );

package/src/webui/components/status-badge.tsx

@@ -1,22 +1,23 @@
+/** @jsxImportSource hono/jsx */
 import type { FC } from "hono/jsx";
 
-const STATUS_COLORS: Record<string, string> = {
-  "todo": "#6b7280",
-  "in-progress": "#3b82f6",
-  "review": "#f59e0b",
-  "done": "#10b981",
-  "archived": "#9ca3af",
-  "running": "#3b82f6",
-  "success": "#10b981",
-  "failed": "#ef4444",
-  "timeout": "#f59e0b",
-  "cancelled": "#9ca3af",
+const STATUS_STYLES: Record<string, string> = {
+  "todo": "bg-zinc-700/50 text-zinc-300 border-zinc-600",
+  "in-progress": "bg-blue-500/15 text-blue-400 border-blue-500/30",
+  "review": "bg-amber-500/15 text-amber-400 border-amber-500/30",
+  "done": "bg-emerald-500/15 text-emerald-400 border-emerald-500/30",
+  "archived": "bg-zinc-700/30 text-zinc-500 border-zinc-600/50",
+  "running": "bg-blue-500/15 text-blue-400 border-blue-500/30",
+  "success": "bg-emerald-500/15 text-emerald-400 border-emerald-500/30",
+  "failed": "bg-red-500/15 text-red-400 border-red-500/30",
+  "timeout": "bg-amber-500/15 text-amber-400 border-amber-500/30",
+  "cancelled": "bg-zinc-700/30 text-zinc-500 border-zinc-600/50",
 };
 
 export const StatusBadge: FC<{ status: string }> = ({ status }) => {
-  const color = STATUS_COLORS[status] ?? "#6b7280";
+  const styles = STATUS_STYLES[status] ?? "bg-zinc-700/50 text-zinc-300 border-zinc-600";
   return (
-    <span class="badge" style={`background:${color}`}>
+    <span class={`inline-flex items-center px-2 py-0.5 text-xs font-medium rounded-md border ${styles}`}>
       {status}
     </span>
   );

package/src/webui/routes/auth.tsx

@@ -1,3 +1,4 @@
+/** @jsxImportSource hono/jsx */
 import { Hono } from "hono";
 import crypto from "crypto";
 import { Layout } from "../components/layout.tsx";
@@ -22,16 +23,39 @@ export function authRoutes(_db: Database, _config: Config, authSalt: string) {
     const error = c.req.query("error");
     return c.html(
       <Layout title="Login">
-        <div class="login-box">
-          <h1>Login</h1>
-          {error && <div class="flash">Invalid password</div>}
-          <form method="post" action="/login">
-            <div class="form-row">
-              <label for="password">Password</label>
-              <input type="password" name="password" id="password" required autofocus />
+        <div class="flex items-center justify-center min-h-[calc(100vh-10rem)]">
+          <div class="w-full max-w-sm">
+            <div class="rounded-lg border border-border bg-card p-6">
+              <div class="mb-6">
+                <h1 class="text-lg font-semibold text-card-foreground">Login</h1>
+                <p class="text-sm text-muted-foreground mt-1">Enter your password to access prodboard.</p>
+              </div>
+              {error && (
+                <div class="mb-4 rounded-md border border-red-500/30 bg-red-500/10 px-4 py-3 text-sm text-red-400">
+                  Invalid password
+                </div>
+              )}
+              <form method="post" action="/login">
+                <div class="mb-4">
+                  <label for="password" class="block text-sm font-medium text-foreground mb-1.5">Password</label>
+                  <input
+                    type="password"
+                    name="password"
+                    id="password"
+                    required
+                    autofocus
+                    class="w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background"
+                  />
+                </div>
+                <button
+                  type="submit"
+                  class="w-full rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors"
+                >
+                  Sign in
+                </button>
+              </form>
             </div>
-            <button type="submit" class="btn btn-primary">Login</button>
-          </form>
+          </div>
         </div>
       </Layout>
     );

package/src/webui/routes/issues.tsx

@@ -1,3 +1,4 @@
+/** @jsxImportSource hono/jsx */
 import { Hono } from "hono";
 import type { Database } from "bun:sqlite";
 import type { Config } from "../../types.ts";
@@ -17,33 +18,142 @@ export function issueRoutes(db: Database, config: Config) {
     const { issues } = listIssues(db, { includeArchived: true, limit: 500 });
     return c.html(
       <Layout title="Issues">
-        <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem">
-          <h1>Issues</h1>
-          <a href="#new-issue" class="btn btn-primary btn-sm" onclick="document.getElementById('new-issue-form').style.display='block'">New Issue</a>
+        <div class="flex items-center justify-between mb-6">
+          <div>
+            <h1 class="text-xl font-semibold">Issues</h1>
+            <p id="board-total" class="text-sm text-muted-foreground mt-0.5">{issues.length} total</p>
+          </div>
+          <button
+            onclick="document.getElementById('new-issue-form').classList.toggle('hidden')"
+            class="inline-flex items-center rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors"
+          >
+            <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" /></svg>
+            New Issue
+          </button>
         </div>
-        <div id="new-issue-form" style="display:none;margin-bottom:1rem" class="detail">
-          <h2>New Issue</h2>
-          <form method="post" action="/issues">
-            <div class="form-row">
-              <label for="title">Title</label>
-              <input type="text" name="title" id="title" required />
-            </div>
-            <div class="form-row">
-              <label for="description">Description</label>
-              <textarea name="description" id="description"></textarea>
-            </div>
-            <div class="form-row">
-              <label for="status">Status</label>
-              <select name="status" id="status">
-                {config.general.statuses.map((s) => (
-                  <option value={s} selected={s === config.general.defaultStatus}>{s}</option>
-                ))}
-              </select>
-            </div>
-            <button type="submit" class="btn btn-primary">Create</button>
-          </form>
+
+        <div id="new-issue-form" class="hidden mb-6">
+          <div class="rounded-lg border border-border bg-card p-5">
+            <h2 class="text-base font-semibold text-card-foreground mb-4">Create Issue</h2>
+            <form method="post" action="/issues">
+              <div class="grid gap-4">
+                <div>
+                  <label for="title" class="block text-sm font-medium text-foreground mb-1.5">Title</label>
+                  <input type="text" name="title" id="title" required
+                    class="w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background"
+                    placeholder="Issue title"
+                  />
+                </div>
+                <div>
+                  <label for="description" class="block text-sm font-medium text-foreground mb-1.5">Description</label>
+                  <textarea name="description" id="description" rows={3}
+                    class="w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background resize-y"
+                    placeholder="Optional description"
+                  ></textarea>
+                </div>
+                <div>
+                  <label for="status" class="block text-sm font-medium text-foreground mb-1.5">Status</label>
+                  <select name="status" id="status"
+                    class="w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background"
+                  >
+                    {config.general.statuses.map((s) => (
+                      <option value={s} selected={s === config.general.defaultStatus}>{s}</option>
+                    ))}
+                  </select>
+                </div>
+                <div class="flex justify-end gap-2">
+                  <button type="button"
+                    onclick="document.getElementById('new-issue-form').classList.add('hidden')"
+                    class="rounded-md border border-border px-3 py-1.5 text-sm font-medium text-foreground hover:bg-accent transition-colors"
+                  >Cancel</button>
+                  <button type="submit"
+                    class="rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors"
+                  >Create</button>
+                </div>
+              </div>
+            </form>
+          </div>
         </div>
+
         <Board issues={issues} statuses={config.general.statuses} />
+
+        <p id="board-updated" class="text-xs text-muted-foreground/50 mt-2 text-right"></p>
+
+        <script dangerouslySetInnerHTML={{ __html: `
+(function() {
+  var INTERVAL = 30000;
+  var board = document.getElementById('board');
+  var updatedEl = document.getElementById('board-updated');
+  var statuses = JSON.parse(board.dataset.statuses);
+  var lastUpdate = Date.now();
+
+  var STATUS_STYLES = {
+    'todo': 'bg-zinc-700/50 text-zinc-300 border-zinc-600',
+    'in-progress': 'bg-blue-500/15 text-blue-400 border-blue-500/30',
+    'review': 'bg-amber-500/15 text-amber-400 border-amber-500/30',
+    'done': 'bg-emerald-500/15 text-emerald-400 border-emerald-500/30',
+    'human-approval': 'bg-amber-500/15 text-amber-400 border-amber-500/30',
+    'running': 'bg-blue-500/15 text-blue-400 border-blue-500/30'
+  };
+  var DEFAULT_STYLE = 'bg-zinc-700/50 text-zinc-300 border-zinc-600';
+
+  function escapeHtml(s) {
+    var d = document.createElement('div');
+    d.textContent = s;
+    return d.innerHTML;
+  }
+
+  function renderBoard(issues) {
+    var grouped = {};
+    statuses.forEach(function(s) { grouped[s] = []; });
+    issues.forEach(function(issue) {
+      if (grouped[issue.status]) grouped[issue.status].push(issue);
+    });
+
+    var html = '';
+    statuses.forEach(function(status) {
+      var items = grouped[status] || [];
+      html += '<div class="flex-1 min-w-[220px]">';
+      html += '<div class="flex items-center gap-2 mb-3 px-1">';
+      html += '<h3 class="text-xs font-semibold uppercase tracking-wider text-muted-foreground">' + escapeHtml(status) + '</h3>';
+      html += '<span class="text-xs text-muted-foreground/60">' + items.length + '</span>';
+      html += '</div>';
+      html += '<div class="space-y-2">';
+      items.forEach(function(issue) {
+        html += '<a href="/issues/' + escapeHtml(issue.id) + '" class="block rounded-lg border border-border bg-card p-3 hover:bg-accent transition-colors group">';
+        html += '<div class="text-sm font-medium text-card-foreground group-hover:text-foreground">' + escapeHtml(issue.title) + '</div>';
+        html += '<div class="text-xs text-muted-foreground mt-1 font-mono">' + escapeHtml(issue.id.slice(0, 8)) + '</div>';
+        html += '</a>';
+      });
+      html += '</div></div>';
+    });
+
+    board.innerHTML = html;
+  }
+
+  function updateTimestamp() {
+    var secs = Math.round((Date.now() - lastUpdate) / 1000);
+    updatedEl.textContent = 'Updated ' + secs + 's ago';
+  }
+
+  function poll() {
+    fetch('/api/issues')
+      .then(function(r) { return r.ok ? r.json() : null; })
+      .then(function(issues) {
+        if (!issues) return;
+        renderBoard(issues);
+        var countEl = document.getElementById('board-total');
+        if (countEl) countEl.textContent = issues.length + ' total';
+        lastUpdate = Date.now();
+        updateTimestamp();
+      })
+      .catch(function() {});
+  }
+
+  setInterval(poll, INTERVAL);
+  setInterval(updateTimestamp, 5000);
+})();
+        ` }} />
       </Layout>
     );
   });
@@ -68,46 +178,73 @@ export function issueRoutes(db: Database, config: Config) {
     const comments = listComments(db, issue.id);
     return c.html(
       <Layout title={issue.title}>
-        <div class="detail">
-          <h1>
-            <StatusBadge status={issue.status} />
-            {issue.title}
-          </h1>
-          <div class="detail-meta">
-            ID: {issue.id} | Created: {issue.created_at} | Updated: {issue.updated_at}
+        <div class="mb-4">
+          <a href="/issues" class="text-sm text-muted-foreground hover:text-foreground transition-colors">&larr; Back to issues</a>
+        </div>
+
+        <div class="rounded-lg border border-border bg-card p-5 mb-4">
+          <div class="flex items-start justify-between gap-4">
+            <div class="flex items-center gap-3">
+              <StatusBadge status={issue.status} />
+              <h1 class="text-lg font-semibold text-card-foreground">{issue.title}</h1>
+            </div>
+          </div>
+          <div class="mt-2 flex items-center gap-3 text-xs text-muted-foreground font-mono">
+            <span>{issue.id}</span>
+            <span>&middot;</span>
+            <span>Created {issue.created_at}</span>
+            <span>&middot;</span>
+            <span>Updated {issue.updated_at}</span>
           </div>
-          {issue.description && <div class="description">{issue.description}</div>}
-          <div class="actions">
-            <form method="post" action={`/issues/${issue.id}/move`} style="display:flex;gap:0.5rem;align-items:center">
-              <select name="status">
+          {issue.description && (
+            <div class="mt-4 rounded-md bg-muted p-4 text-sm text-foreground whitespace-pre-wrap">{issue.description}</div>
+          )}
+          <div class="mt-4 flex items-center gap-2 pt-4 border-t border-border">
+            <form method="post" action={`/issues/${issue.id}/move`} class="flex items-center gap-2">
+              <select name="status"
+                class="rounded-md border border-input bg-background px-2.5 py-1.5 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+              >
                 {config.general.statuses.map((s) => (
                   <option value={s} selected={s === issue.status}>{s}</option>
                 ))}
               </select>
-              <button type="submit" class="btn btn-primary btn-sm">Move</button>
+              <button type="submit"
+                class="rounded-md bg-secondary px-2.5 py-1.5 text-sm font-medium text-secondary-foreground hover:bg-secondary/80 transition-colors"
+              >Move</button>
             </form>
             <form method="post" action={`/issues/${issue.id}/delete`} onsubmit="return confirm('Delete this issue?')">
-              <button type="submit" class="btn btn-danger btn-sm">Delete</button>
+              <button type="submit"
+                class="rounded-md bg-destructive/15 border border-destructive/30 px-2.5 py-1.5 text-sm font-medium text-red-400 hover:bg-destructive/25 transition-colors"
+              >Delete</button>
             </form>
           </div>
         </div>
 
-        <div class="detail">
-          <h2>Comments ({comments.length})</h2>
-          {comments.map((comment) => (
-            <div class="comment" key={comment.id}>
-              <div>
-                <span class="comment-author">{comment.author}</span>
-                <span class="comment-date"> - {comment.created_at}</span>
-              </div>
-              <div>{comment.body}</div>
+        <div class="rounded-lg border border-border bg-card p-5">
+          <h2 class="text-sm font-semibold text-card-foreground mb-4">Comments <span class="text-muted-foreground font-normal">({comments.length})</span></h2>
+          {comments.length > 0 && (
+            <div class="space-y-3 mb-4">
+              {comments.map((comment) => (
+                <div class="border-l-2 border-border pl-3 py-1" key={comment.id}>
+                  <div class="flex items-center gap-2 text-xs">
+                    <span class="font-semibold text-foreground">{comment.author}</span>
+                    <span class="text-muted-foreground">{comment.created_at}</span>
+                  </div>
+                  <div class="text-sm text-foreground/90 mt-0.5">{comment.body}</div>
+                </div>
+              ))}
             </div>
-          ))}
-          <form method="post" action={`/issues/${issue.id}/comment`} style="margin-top:1rem">
-            <div class="form-row">
-              <textarea name="body" placeholder="Add a comment..." required></textarea>
+          )}
+          <form method="post" action={`/issues/${issue.id}/comment`}>
+            <textarea name="body" required rows={2}
+              class="w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background resize-y"
+              placeholder="Add a comment..."
+            ></textarea>
+            <div class="flex justify-end mt-2">
+              <button type="submit"
+                class="rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors"
+              >Comment</button>
             </div>
-            <button type="submit" class="btn btn-primary btn-sm">Comment</button>
           </form>
         </div>
       </Layout>

package/src/webui/routes/runs.tsx

@@ -1,9 +1,11 @@
+/** @jsxImportSource hono/jsx */
 import { Hono } from "hono";
 import type { Database } from "bun:sqlite";
 import type { Config } from "../../types.ts";
 import { Layout } from "../components/layout.tsx";
 import { StatusBadge } from "../components/status-badge.tsx";
 import { listRuns, getRunningRuns } from "../../queries/runs.ts";
+import { listIssues } from "../../queries/issues.ts";
 import type { Run } from "../../types.ts";
 
 export function runRoutes(db: Database, _config: Config) {
@@ -13,31 +15,46 @@ export function runRoutes(db: Database, _config: Config) {
     const runs = listRuns(db, { limit: 50 });
     return c.html(
       <Layout title="Runs">
-        <h1>Runs</h1>
-        <table>
-          <thead>
-            <tr>
-              <th>ID</th>
-              <th>Schedule</th>
-              <th>Agent</th>
-              <th>Status</th>
-              <th>Started</th>
-              <th>Cost</th>
-            </tr>
-          </thead>
-          <tbody>
-            {runs.map((run) => (
-              <tr key={run.id}>
-                <td><a href={`/runs/${run.id}`}>{run.id.slice(0, 8)}</a></td>
-                <td>{run.schedule_name ?? run.schedule_id.slice(0, 8)}</td>
-                <td>{run.agent}</td>
-                <td><StatusBadge status={run.status} /></td>
-                <td>{run.started_at}</td>
-                <td>{run.cost_usd != null ? `$${run.cost_usd.toFixed(4)}` : "-"}</td>
+        <div class="mb-6">
+          <h1 class="text-xl font-semibold">Runs</h1>
+          <p class="text-sm text-muted-foreground mt-0.5">Recent execution history</p>
+        </div>
+
+        <div class="rounded-lg border border-border overflow-hidden">
+          <table class="w-full">
+            <thead>
+              <tr class="border-b border-border bg-muted/50">
+                <th class="text-left px-4 py-3 text-xs font-medium text-muted-foreground uppercase tracking-wider">ID</th>
+                <th class="text-left px-4 py-3 text-xs font-medium text-muted-foreground uppercase tracking-wider">Schedule</th>
+                <th class="text-left px-4 py-3 text-xs font-medium text-muted-foreground uppercase tracking-wider">Agent</th>
+                <th class="text-left px-4 py-3 text-xs font-medium text-muted-foreground uppercase tracking-wider">Status</th>
+                <th class="text-left px-4 py-3 text-xs font-medium text-muted-foreground uppercase tracking-wider">Started</th>
+                <th class="text-right px-4 py-3 text-xs font-medium text-muted-foreground uppercase tracking-wider">Cost</th>
               </tr>
-            ))}
-          </tbody>
-        </table>
+            </thead>
+            <tbody class="divide-y divide-border">
+              {runs.map((run) => (
+                <tr class="hover:bg-muted/30 transition-colors" key={run.id}>
+                  <td class="px-4 py-3">
+                    <a href={`/runs/${run.id}`} class="text-sm font-mono text-blue-400 hover:text-blue-300 hover:underline">
+                      {run.id.slice(0, 8)}
+                    </a>
+                  </td>
+                  <td class="px-4 py-3 text-sm text-foreground">{run.schedule_name ?? run.schedule_id.slice(0, 8)}</td>
+                  <td class="px-4 py-3 text-sm text-muted-foreground">{run.agent}</td>
+                  <td class="px-4 py-3"><StatusBadge status={run.status} /></td>
+                  <td class="px-4 py-3 text-sm text-muted-foreground">{run.started_at}</td>
+                  <td class="px-4 py-3 text-sm text-right font-mono text-muted-foreground">
+                    {run.cost_usd != null ? `$${run.cost_usd.toFixed(4)}` : "-"}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+          {runs.length === 0 && (
+            <div class="px-4 py-8 text-center text-sm text-muted-foreground">No runs yet.</div>
+          )}
+        </div>
       </Layout>
     );
   });
@@ -48,38 +65,60 @@ export function runRoutes(db: Database, _config: Config) {
     const run = runs.find((r) => r.id === id || r.id.startsWith(id));
     if (!run) return c.text("Run not found", 404);
 
+    const details = [
+      { label: "Exit Code", value: run.exit_code ?? "-" },
+      { label: "Tokens In", value: run.tokens_in != null ? run.tokens_in.toLocaleString() : "-" },
+      { label: "Tokens Out", value: run.tokens_out != null ? run.tokens_out.toLocaleString() : "-" },
+      { label: "Cost", value: run.cost_usd != null ? `$${run.cost_usd.toFixed(4)}` : "-" },
+      { label: "Session ID", value: run.session_id ?? "-" },
+      { label: "tmux Session", value: run.tmux_session ?? "-" },
+      { label: "Tools Used", value: run.tools_used ?? "-" },
+      { label: "Issues Touched", value: run.issues_touched ?? "-" },
+    ];
+
     return c.html(
       <Layout title={`Run ${run.id.slice(0, 8)}`}>
-        <div class="detail">
-          <h1>
+        <div class="mb-4">
+          <a href="/runs" class="text-sm text-muted-foreground hover:text-foreground transition-colors">&larr; Back to runs</a>
+        </div>
+
+        <div class="rounded-lg border border-border bg-card p-5 mb-4">
+          <div class="flex items-center gap-3">
             <StatusBadge status={run.status} />
-            Run {run.id.slice(0, 8)}
-          </h1>
-          <div class="detail-meta">
-            Schedule: {run.schedule_name ?? run.schedule_id.slice(0, 8)} |
-            Agent: {run.agent} |
-            Started: {run.started_at}
-            {run.finished_at && ` | Finished: ${run.finished_at}`}
+            <h1 class="text-lg font-semibold text-card-foreground font-mono">Run {run.id.slice(0, 8)}</h1>
+          </div>
+          <div class="mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-muted-foreground">
+            <span>Schedule: {run.schedule_name ?? run.schedule_id.slice(0, 8)}</span>
+            <span>&middot;</span>
+            <span>Agent: {run.agent}</span>
+            <span>&middot;</span>
+            <span>Started: {run.started_at}</span>
+            {run.finished_at && (
+              <>
+                <span>&middot;</span>
+                <span>Finished: {run.finished_at}</span>
+              </>
+            )}
           </div>
-          <table>
-            <tbody>
-              <tr><td><strong>Exit Code</strong></td><td>{run.exit_code ?? "-"}</td></tr>
-              <tr><td><strong>Tokens In</strong></td><td>{run.tokens_in ?? "-"}</td></tr>
-              <tr><td><strong>Tokens Out</strong></td><td>{run.tokens_out ?? "-"}</td></tr>
-              <tr><td><strong>Cost</strong></td><td>{run.cost_usd != null ? `$${run.cost_usd.toFixed(4)}` : "-"}</td></tr>
-              <tr><td><strong>Session ID</strong></td><td>{run.session_id ?? "-"}</td></tr>
-              <tr><td><strong>tmux Session</strong></td><td>{run.tmux_session ?? "-"}</td></tr>
-              <tr><td><strong>Tools Used</strong></td><td>{run.tools_used ?? "-"}</td></tr>
-              <tr><td><strong>Issues Touched</strong></td><td>{run.issues_touched ?? "-"}</td></tr>
-            </tbody>
-          </table>
-          {run.stderr_tail && (
-            <div>
-              <h3 style="margin-top:1rem">Stderr</h3>
-              <pre class="description">{run.stderr_tail}</pre>
-            </div>
-          )}
         </div>
+
+        <div class="rounded-lg border border-border bg-card overflow-hidden mb-4">
+          <div class="divide-y divide-border">
+            {details.map((d) => (
+              <div class="flex items-center px-4 py-2.5 hover:bg-muted/30 transition-colors" key={d.label}>
+                <span class="text-sm font-medium text-muted-foreground w-40 shrink-0">{d.label}</span>
+                <span class="text-sm text-foreground font-mono">{d.value}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {run.stderr_tail && (
+          <div class="rounded-lg border border-border bg-card p-5">
+            <h3 class="text-sm font-semibold text-card-foreground mb-3">Stderr</h3>
+            <pre class="rounded-md bg-muted p-4 text-sm text-foreground overflow-x-auto font-mono whitespace-pre-wrap">{run.stderr_tail}</pre>
+          </div>
+        )}
       </Layout>
     );
   });
@@ -99,5 +138,10 @@ export function apiRoutes(db: Database, _config: Config) {
     });
   });
 
+  app.get("/issues", (c) => {
+    const { issues } = listIssues(db, { includeArchived: true, limit: 500 });
+    return c.json(issues);
+  });
+
   return app;
 }

package/src/webui/routes/schedules.tsx

@@ -1,3 +1,4 @@
+/** @jsxImportSource hono/jsx */
 import { Hono } from "hono";
 import type { Database } from "bun:sqlite";
 import type { Config } from "../../types.ts";
@@ -17,69 +18,119 @@ export function scheduleRoutes(db: Database, _config: Config) {
     const schedules = listSchedules(db, { includeDisabled: true });
     return c.html(
       <Layout title="Schedules">
-        <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem">
-          <h1>Schedules</h1>
-          <a href="#" class="btn btn-primary btn-sm" onclick="document.getElementById('new-schedule-form').style.display='block'">New Schedule</a>
+        <div class="flex items-center justify-between mb-6">
+          <div>
+            <h1 class="text-xl font-semibold">Schedules</h1>
+            <p class="text-sm text-muted-foreground mt-0.5">{schedules.length} total</p>
+          </div>
+          <button
+            onclick="document.getElementById('new-schedule-form').classList.toggle('hidden')"
+            class="inline-flex items-center rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors"
+          >
+            <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" /></svg>
+            New Schedule
+          </button>
         </div>
-        <div id="new-schedule-form" style="display:none;margin-bottom:1rem" class="detail">
-          <h2>New Schedule</h2>
-          <form method="post" action="/schedules">
-            <div class="form-row">
-              <label for="name">Name</label>
-              <input type="text" name="name" id="name" required />
-            </div>
-            <div class="form-row">
-              <label for="cron">Cron Expression</label>
-              <input type="text" name="cron" id="cron" placeholder="*/30 * * * *" required />
-            </div>
-            <div class="form-row">
-              <label for="prompt">Prompt</label>
-              <textarea name="prompt" id="prompt" required></textarea>
-            </div>
-            <div class="form-row">
-              <label for="workdir">Working Directory</label>
-              <input type="text" name="workdir" id="workdir" placeholder="." />
-            </div>
-            <button type="submit" class="btn btn-primary">Create</button>
-          </form>
+
+        <div id="new-schedule-form" class="hidden mb-6">
+          <div class="rounded-lg border border-border bg-card p-5">
+            <h2 class="text-base font-semibold text-card-foreground mb-4">Create Schedule</h2>
+            <form method="post" action="/schedules">
+              <div class="grid gap-4">
+                <div>
+                  <label for="name" class="block text-sm font-medium text-foreground mb-1.5">Name</label>
+                  <input type="text" name="name" id="name" required
+                    class="w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background"
+                    placeholder="Schedule name"
+                  />
+                </div>
+                <div>
+                  <label for="cron" class="block text-sm font-medium text-foreground mb-1.5">Cron Expression</label>
+                  <input type="text" name="cron" id="cron" required
+                    class="w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground font-mono placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background"
+                    placeholder="*/30 * * * *"
+                  />
+                </div>
+                <div>
+                  <label for="prompt" class="block text-sm font-medium text-foreground mb-1.5">Prompt</label>
+                  <textarea name="prompt" id="prompt" required rows={3}
+                    class="w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background resize-y"
+                    placeholder="What should the agent do?"
+                  ></textarea>
+                </div>
+                <div>
+                  <label for="workdir" class="block text-sm font-medium text-foreground mb-1.5">Working Directory</label>
+                  <input type="text" name="workdir" id="workdir"
+                    class="w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground font-mono placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background"
+                    placeholder="."
+                  />
+                </div>
+                <div class="flex justify-end gap-2">
+                  <button type="button"
+                    onclick="document.getElementById('new-schedule-form').classList.add('hidden')"
+                    class="rounded-md border border-border px-3 py-1.5 text-sm font-medium text-foreground hover:bg-accent transition-colors"
+                  >Cancel</button>
+                  <button type="submit"
+                    class="rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors"
+                  >Create</button>
+                </div>
+              </div>
+            </form>
+          </div>
+        </div>
+
+        <div class="rounded-lg border border-border overflow-hidden">
+          <table class="w-full">
+            <thead>
+              <tr class="border-b border-border bg-muted/50">
+                <th class="text-left px-4 py-3 text-xs font-medium text-muted-foreground uppercase tracking-wider">Name</th>
+                <th class="text-left px-4 py-3 text-xs font-medium text-muted-foreground uppercase tracking-wider">Cron</th>
+                <th class="text-left px-4 py-3 text-xs font-medium text-muted-foreground uppercase tracking-wider">Status</th>
+                <th class="text-left px-4 py-3 text-xs font-medium text-muted-foreground uppercase tracking-wider">Last Run</th>
+                <th class="text-right px-4 py-3 text-xs font-medium text-muted-foreground uppercase tracking-wider">Actions</th>
+              </tr>
+            </thead>
+            <tbody class="divide-y divide-border">
+              {schedules.map((s) => {
+                const lastRun = getLastRun(db, s.id);
+                return (
+                  <tr class="hover:bg-muted/30 transition-colors" key={s.id}>
+                    <td class="px-4 py-3 text-sm font-medium text-foreground">{s.name}</td>
+                    <td class="px-4 py-3 text-sm text-muted-foreground font-mono">{s.cron}</td>
+                    <td class="px-4 py-3">
+                      {s.enabled
+                        ? <span class="inline-flex items-center px-2 py-0.5 text-xs font-medium rounded-md border bg-emerald-500/15 text-emerald-400 border-emerald-500/30">enabled</span>
+                        : <span class="inline-flex items-center px-2 py-0.5 text-xs font-medium rounded-md border bg-zinc-700/30 text-zinc-500 border-zinc-600/50">disabled</span>
+                      }
+                    </td>
+                    <td class="px-4 py-3 text-sm">
+                      {lastRun ? <StatusBadge status={lastRun.status} /> : <span class="text-muted-foreground">Never</span>}
+                    </td>
+                    <td class="px-4 py-3 text-right">
+                      <div class="flex items-center justify-end gap-1.5">
+                        <form method="post" action={`/schedules/${s.id}/toggle`}>
+                          <button type="submit"
+                            class="rounded-md border border-border px-2.5 py-1 text-xs font-medium text-foreground hover:bg-accent transition-colors"
+                          >
+                            {s.enabled ? "Disable" : "Enable"}
+                          </button>
+                        </form>
+                        <form method="post" action={`/schedules/${s.id}/delete`} onsubmit="return confirm('Delete this schedule?')">
+                          <button type="submit"
+                            class="rounded-md bg-destructive/15 border border-destructive/30 px-2.5 py-1 text-xs font-medium text-red-400 hover:bg-destructive/25 transition-colors"
+                          >Delete</button>
+                        </form>
+                      </div>
+                    </td>
+                  </tr>
+                );
+              })}
+            </tbody>
+          </table>
+          {schedules.length === 0 && (
+            <div class="px-4 py-8 text-center text-sm text-muted-foreground">No schedules yet.</div>
+          )}
         </div>
-        <table>
-          <thead>
-            <tr>
-              <th>Name</th>
-              <th>Cron</th>
-              <th>Enabled</th>
-              <th>Last Run</th>
-              <th>Actions</th>
-            </tr>
-          </thead>
-          <tbody>
-            {schedules.map((s) => {
-              const lastRun = getLastRun(db, s.id);
-              return (
-                <tr key={s.id}>
-                  <td>{s.name}</td>
-                  <td><code>{s.cron}</code></td>
-                  <td>{s.enabled ? "Yes" : "No"}</td>
-                  <td>
-                    {lastRun ? <StatusBadge status={lastRun.status} /> : "Never"}
-                  </td>
-                  <td>
-                    <form method="post" action={`/schedules/${s.id}/toggle`} style="display:inline">
-                      <button type="submit" class="btn btn-sm btn-primary">
-                        {s.enabled ? "Disable" : "Enable"}
-                      </button>
-                    </form>
-                    {" "}
-                    <form method="post" action={`/schedules/${s.id}/delete`} style="display:inline" onsubmit="return confirm('Delete?')">
-                      <button type="submit" class="btn btn-sm btn-danger">Delete</button>
-                    </form>
-                  </td>
-                </tr>
-              );
-            })}
-          </tbody>
-        </table>
       </Layout>
     );
   });

package/src/webui/static/style.ts

@@ -1,47 +1,35 @@
+export const TAILWIND_SCRIPT = `<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>`;
+
+export const THEME = `
+<style type="text/tailwindcss">
+@theme {
+  --color-border: oklch(0.3 0 0);
+  --color-input: oklch(0.3 0 0);
+  --color-ring: oklch(0.55 0 0);
+  --color-background: oklch(0.13 0 0);
+  --color-foreground: oklch(0.93 0 0);
+  --color-card: oklch(0.16 0 0);
+  --color-card-foreground: oklch(0.93 0 0);
+  --color-muted: oklch(0.21 0 0);
+  --color-muted-foreground: oklch(0.55 0 0);
+  --color-accent: oklch(0.21 0 0);
+  --color-accent-foreground: oklch(0.93 0 0);
+  --color-destructive: oklch(0.55 0.2 25);
+  --color-primary: oklch(0.93 0 0);
+  --color-primary-foreground: oklch(0.13 0 0);
+  --color-secondary: oklch(0.21 0 0);
+  --color-secondary-foreground: oklch(0.93 0 0);
+  --radius-lg: 0.5rem;
+  --radius-md: calc(var(--radius-lg) - 2px);
+  --radius-sm: calc(var(--radius-lg) - 4px);
+}
+</style>
+`;
+
 export const STYLES = `
-* { margin: 0; padding: 0; box-sizing: border-box; }
-body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: #f8f9fa; color: #1a1a2e; line-height: 1.5; }
-nav { background: #1a1a2e; color: #fff; padding: 0.75rem 1.5rem; }
-.nav-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; }
-.logo { color: #fff; text-decoration: none; font-weight: 700; font-size: 1.1rem; }
-.nav-links a { color: #cbd5e1; text-decoration: none; margin-left: 1.5rem; font-size: 0.9rem; }
-.nav-links a:hover { color: #fff; }
-main { max-width: 1200px; margin: 1.5rem auto; padding: 0 1.5rem; }
-h1 { margin-bottom: 1rem; font-size: 1.5rem; }
-h2 { margin-bottom: 0.75rem; font-size: 1.25rem; }
-h3 { margin-bottom: 0.5rem; font-size: 1rem; text-transform: capitalize; }
-.board { display: flex; gap: 1rem; overflow-x: auto; }
-.board-column { flex: 1; min-width: 200px; background: #e9ecef; border-radius: 8px; padding: 0.75rem; }
-.board-column h3 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; color: #495057; }
-.count { font-weight: 400; color: #868e96; }
-.card { display: block; background: #fff; border-radius: 6px; padding: 0.75rem; margin-top: 0.5rem; text-decoration: none; color: inherit; box-shadow: 0 1px 2px rgba(0,0,0,0.06); transition: box-shadow 0.15s; }
-.card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
-.card-title { font-weight: 500; font-size: 0.9rem; }
-.card-meta { font-size: 0.75rem; color: #868e96; margin-top: 0.25rem; }
-.badge { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 999px; color: #fff; font-size: 0.75rem; font-weight: 500; }
-table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
-th, td { text-align: left; padding: 0.5rem 0.75rem; border-bottom: 1px solid #dee2e6; font-size: 0.9rem; }
-th { background: #e9ecef; font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; }
-tr:hover td { background: #f1f3f5; }
-.detail { background: #fff; border-radius: 8px; padding: 1.5rem; box-shadow: 0 1px 3px rgba(0,0,0,0.08); margin-bottom: 1rem; }
-.detail h1 { display: flex; align-items: center; gap: 0.75rem; }
-.detail-meta { color: #868e96; font-size: 0.85rem; margin-bottom: 1rem; }
-.description { white-space: pre-wrap; margin: 1rem 0; padding: 1rem; background: #f8f9fa; border-radius: 6px; }
-.comment { border-left: 3px solid #dee2e6; padding: 0.5rem 0.75rem; margin: 0.75rem 0; }
-.comment-author { font-weight: 600; font-size: 0.85rem; }
-.comment-date { color: #868e96; font-size: 0.75rem; }
-form { margin: 1rem 0; }
-label { display: block; font-weight: 500; margin-bottom: 0.25rem; font-size: 0.9rem; }
-input[type="text"], input[type="password"], textarea, select { width: 100%; padding: 0.5rem; border: 1px solid #ced4da; border-radius: 4px; font-size: 0.9rem; font-family: inherit; }
-textarea { min-height: 80px; resize: vertical; }
-.form-row { margin-bottom: 0.75rem; }
-button, .btn { display: inline-block; padding: 0.5rem 1rem; border: none; border-radius: 4px; font-size: 0.9rem; cursor: pointer; text-decoration: none; font-family: inherit; }
-.btn-primary { background: #3b82f6; color: #fff; }
-.btn-primary:hover { background: #2563eb; }
-.btn-danger { background: #ef4444; color: #fff; }
-.btn-danger:hover { background: #dc2626; }
-.btn-sm { padding: 0.25rem 0.5rem; font-size: 0.8rem; }
-.actions { display: flex; gap: 0.5rem; margin-top: 1rem; }
-.login-box { max-width: 360px; margin: 4rem auto; }
-.flash { padding: 0.75rem 1rem; border-radius: 4px; margin-bottom: 1rem; background: #fef3cd; color: #856404; }
+body {
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
 `;