prodboard 0.2.2 → 0.2.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # prodboard
 
+## 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/package.json

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

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/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 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,32 +18,63 @@ 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 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} />
       </Layout>
     );
@@ -68,46 +100,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>
-          {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">
+          <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="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,3 +1,4 @@
+/** @jsxImportSource hono/jsx */
 import { Hono } from "hono";
 import type { Database } from "bun:sqlite";
 import type { Config } from "../../types.ts";
@@ -13,31 +14,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 +64,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>
+        </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>
-          <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>
+
+        {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>
     );
   });

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;
+}
 `;