prodboard 0.1.2 → 0.2.0

package/src/tmux.ts

@@ -0,0 +1,68 @@
+import * as fs from "fs";
+
+export class TmuxManager {
+  private available: boolean | null = null;
+
+  isAvailable(): boolean {
+    if (this.available !== null) return this.available;
+    try {
+      const result = Bun.spawnSync(["tmux", "-V"], {
+        stdout: "pipe",
+        stderr: "pipe",
+      });
+      this.available = result.exitCode === 0;
+    } catch {
+      this.available = false;
+    }
+    return this.available;
+  }
+
+  sessionName(runId: string): string {
+    return "prodboard-" + runId.slice(0, 8);
+  }
+
+  wrapCommand(sessionName: string, cmd: string[], jsonlPath: string): string[] {
+    const escaped = cmd.map((arg) => shellEscape(arg)).join(" ");
+    const bashCmd = `${escaped} > ${shellEscape(jsonlPath)}; echo $? > ${shellEscape(jsonlPath)}.exit`;
+    return [
+      "tmux", "new-session", "-d", "-s", sessionName,
+      "bash", "-c", bashCmd,
+    ];
+  }
+
+  async waitForCompletion(sessionName: string, jsonlPath: string): Promise<number> {
+    // Poll until tmux session ends
+    while (true) {
+      const result = Bun.spawnSync(["tmux", "has-session", "-t", sessionName], {
+        stdout: "pipe",
+        stderr: "pipe",
+      });
+      if (result.exitCode !== 0) break;
+      await new Promise((resolve) => setTimeout(resolve, 2000));
+    }
+
+    // Read exit code from .exit file
+    const exitFile = `${jsonlPath}.exit`;
+    try {
+      const code = fs.readFileSync(exitFile, "utf-8").trim();
+      const parsed = parseInt(code, 10);
+      return Number.isNaN(parsed) ? 1 : parsed;
+    } catch {
+      return 1;
+    }
+  }
+
+  killSession(sessionName: string): void {
+    try {
+      Bun.spawnSync(["tmux", "kill-session", "-t", sessionName], {
+        stdout: "pipe",
+        stderr: "pipe",
+      });
+    } catch {}
+  }
+}
+
+function shellEscape(arg: string): string {
+  if (/^[a-zA-Z0-9_./:=@,-]+$/.test(arg)) return arg;
+  return "'" + arg.replace(/'/g, "'\\''") + "'";
+}

package/src/types.ts

@@ -5,6 +5,14 @@ export interface Config {
     idPrefix: string;
   };
   daemon: {
+    agent: "claude" | "opencode";
+    basePath: string | null;
+    useTmux: boolean;
+    opencode: {
+      serverUrl: string | null;
+      model: string | null;
+      agent: string | null;
+    };
     maxConcurrentRuns: number;
     maxTurns: number;
     hardMaxTurns: number;
@@ -17,6 +25,12 @@ export interface Config {
     nonGitDefaultAllowedTools: string[];
     useWorktrees: "auto" | "always" | "never";
   };
+  webui: {
+    enabled: boolean;
+    port: number;
+    hostname: string;
+    password: string | null;
+  };
 }
 
 export interface Issue {
@@ -72,11 +86,14 @@ export interface Run {
   cost_usd: number | null;
   tools_used: string | null;
   issues_touched: string | null;
+  tmux_session: string | null;
+  agent: string;
   schedule_name?: string;
 }
 
 export interface EnvironmentInfo {
   hasGit: boolean;
   hasClaude: boolean;
+  hasOpencode: boolean;
   worktreeSupported: boolean;
 }

package/src/webui/components/board.tsx

@@ -0,0 +1,32 @@
+import type { FC } from "hono/jsx";
+import type { Issue } from "../../types.ts";
+import { StatusBadge } from "./status-badge.tsx";
+
+export const Board: FC<{ issues: Issue[]; statuses: string[] }> = ({ issues, statuses }) => {
+  const grouped: Record<string, Issue[]> = {};
+  for (const s of statuses) {
+    grouped[s] = [];
+  }
+  for (const issue of issues) {
+    if (!grouped[issue.status]) grouped[issue.status] = [];
+    grouped[issue.status].push(issue);
+  }
+
+  return (
+    <div class="board">
+      {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>
+      ))}
+    </div>
+  );
+};

package/src/webui/components/layout.tsx

@@ -0,0 +1,28 @@
+import type { FC } from "hono/jsx";
+import { STYLES } from "../static/style.ts";
+
+export const Layout: FC<{ title?: string; children: any }> = ({ title, children }) => {
+  return (
+    <html lang="en">
+      <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <title>{title ? `${title} - prodboard` : "prodboard"}</title>
+        <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>
+          </div>
+        </nav>
+        <main>{children}</main>
+      </body>
+    </html>
+  );
+};

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

@@ -0,0 +1,23 @@
+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",
+};
+
+export const StatusBadge: FC<{ status: string }> = ({ status }) => {
+  const color = STATUS_COLORS[status] ?? "#6b7280";
+  return (
+    <span class="badge" style={`background:${color}`}>
+      {status}
+    </span>
+  );
+};

package/src/webui/index.ts

@@ -0,0 +1,85 @@
+import { Hono } from "hono";
+import { getCookie } from "hono/cookie";
+import { secureHeaders } from "hono/secure-headers";
+import { csrf } from "hono/csrf";
+import crypto from "crypto";
+import type { Database } from "bun:sqlite";
+import type { Config } from "../types.ts";
+import { issueRoutes } from "./routes/issues.tsx";
+import { scheduleRoutes } from "./routes/schedules.tsx";
+import { runRoutes, apiRoutes } from "./routes/runs.tsx";
+import { authRoutes } from "./routes/auth.tsx";
+
+function timingSafeCompare(a: string, b: string): boolean {
+  const bufA = Buffer.from(a);
+  const bufB = Buffer.from(b);
+  if (bufA.length !== bufB.length) return false;
+  return crypto.timingSafeEqual(bufA, bufB);
+}
+
+function generateAuthToken(password: string, salt: string): string {
+  return crypto.createHmac("sha256", salt).update(password).digest("hex");
+}
+
+export function createApp(db: Database, config: Config, authSalt?: string): Hono {
+  const app = new Hono();
+  const salt = authSalt ?? crypto.randomBytes(32).toString("hex");
+
+  // Security headers
+  app.use("*", secureHeaders());
+
+  // CSRF protection
+  app.use("*", csrf());
+
+  // Error handler
+  app.onError((err, c) => {
+    if (err.message?.includes("not found") || err.message?.includes("No issue") || err.message?.includes("No schedule")) {
+      return c.text("Not found", 404);
+    }
+    if (err.message?.includes("Invalid status") || err.message?.includes("Invalid cron")) {
+      return c.text(err.message, 400);
+    }
+    console.error("[prodboard] Web UI error:", err.message);
+    return c.text("Internal server error", 500);
+  });
+
+  // Auth middleware
+  if (config.webui.password !== null) {
+    const expectedToken = generateAuthToken(config.webui.password, salt);
+
+    app.use("*", async (c, next) => {
+      const path = c.req.path;
+      if (path === "/login" || path === "/logout") {
+        return next();
+      }
+      const cookie = getCookie(c, "prodboard_auth");
+      if (!cookie || !timingSafeCompare(cookie, expectedToken)) {
+        return c.redirect("/login");
+      }
+      return next();
+    });
+  }
+
+  // Mount routes
+  app.route("/", authRoutes(db, config, salt));
+  app.route("/issues", issueRoutes(db, config));
+  app.route("/schedules", scheduleRoutes(db, config));
+  app.route("/runs", runRoutes(db, config));
+  app.route("/api", apiRoutes(db, config));
+
+  // Root redirect
+  app.get("/", (c) => c.redirect("/issues"));
+
+  return app;
+}
+
+export async function startWebUI(db: Database, config: Config): Promise<any> {
+  const app = createApp(db, config);
+  const server = Bun.serve({
+    fetch: app.fetch,
+    port: config.webui.port,
+    hostname: config.webui.hostname,
+  });
+  console.error(`[prodboard] Web UI started at http://${config.webui.hostname}:${config.webui.port}`);
+  return server;
+}

package/src/webui/routes/auth.tsx

@@ -0,0 +1,57 @@
+import { Hono } from "hono";
+import crypto from "crypto";
+import { Layout } from "../components/layout.tsx";
+import type { Database } from "bun:sqlite";
+import type { Config } from "../../types.ts";
+
+function timingSafeCompare(a: string, b: string): boolean {
+  const bufA = Buffer.from(a);
+  const bufB = Buffer.from(b);
+  if (bufA.length !== bufB.length) return false;
+  return crypto.timingSafeEqual(bufA, bufB);
+}
+
+function generateAuthToken(password: string, salt: string): string {
+  return crypto.createHmac("sha256", salt).update(password).digest("hex");
+}
+
+export function authRoutes(_db: Database, _config: Config, authSalt: string) {
+  const app = new Hono();
+
+  app.get("/login", (c) => {
+    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>
+            <button type="submit" class="btn btn-primary">Login</button>
+          </form>
+        </div>
+      </Layout>
+    );
+  });
+
+  app.post("/login", async (c) => {
+    const body = await c.req.parseBody();
+    const password = body.password as string;
+    if (timingSafeCompare(password, _config.webui.password!)) {
+      const token = generateAuthToken(password, authSalt);
+      c.header("Set-Cookie", `prodboard_auth=${token}; Path=/; HttpOnly; SameSite=Strict`);
+      return c.redirect("/");
+    }
+    return c.redirect("/login?error=1");
+  });
+
+  app.post("/logout", (c) => {
+    c.header("Set-Cookie", `prodboard_auth=; Path=/; HttpOnly; SameSite=Strict; Max-Age=0`);
+    return c.redirect("/login");
+  });
+
+  return app;
+}

package/src/webui/routes/issues.tsx

@@ -0,0 +1,162 @@
+import { Hono } from "hono";
+import type { Database } from "bun:sqlite";
+import type { Config } from "../../types.ts";
+import { Layout } from "../components/layout.tsx";
+import { Board } from "../components/board.tsx";
+import { StatusBadge } from "../components/status-badge.tsx";
+import {
+  listIssues, createIssue, getIssueByPrefix,
+  updateIssue, deleteIssue, validateStatus,
+} from "../../queries/issues.ts";
+import { createComment, listComments } from "../../queries/comments.ts";
+
+export function issueRoutes(db: Database, config: Config) {
+  const app = new Hono();
+
+  app.get("/", (c) => {
+    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>
+        <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>
+        <Board issues={issues} statuses={config.general.statuses} />
+      </Layout>
+    );
+  });
+
+  app.post("/", async (c) => {
+    const body = await c.req.parseBody();
+    const title = (body.title as string || "").trim();
+    if (!title) return c.text("Title is required", 400);
+    const status = (body.status as string) || config.general.defaultStatus;
+    validateStatus(status, config);
+    createIssue(db, {
+      title,
+      description: (body.description as string) || "",
+      status,
+    });
+    return c.redirect("/issues");
+  });
+
+  app.get("/:id", (c) => {
+    const id = c.req.param("id");
+    const issue = getIssueByPrefix(db, id);
+    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>
+          {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">
+                {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>
+            </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>
+            </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>
+          ))}
+          <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>
+            </div>
+            <button type="submit" class="btn btn-primary btn-sm">Comment</button>
+          </form>
+        </div>
+      </Layout>
+    );
+  });
+
+  app.post("/:id", async (c) => {
+    const id = c.req.param("id");
+    const issue = getIssueByPrefix(db, id);
+    const body = await c.req.parseBody();
+    const fields: any = {};
+    if (body.title) fields.title = body.title as string;
+    if (body.description !== undefined) fields.description = body.description as string;
+    if (body.status) {
+      validateStatus(body.status as string, config);
+      fields.status = body.status as string;
+    }
+    updateIssue(db, issue.id, fields);
+    return c.redirect(`/issues/${issue.id}`);
+  });
+
+  app.post("/:id/move", async (c) => {
+    const id = c.req.param("id");
+    const issue = getIssueByPrefix(db, id);
+    const body = await c.req.parseBody();
+    const status = body.status as string;
+    validateStatus(status, config);
+    updateIssue(db, issue.id, { status });
+    return c.redirect(`/issues/${issue.id}`);
+  });
+
+  app.post("/:id/delete", (c) => {
+    const id = c.req.param("id");
+    const issue = getIssueByPrefix(db, id);
+    deleteIssue(db, issue.id);
+    return c.redirect("/issues");
+  });
+
+  app.post("/:id/comment", async (c) => {
+    const id = c.req.param("id");
+    const issue = getIssueByPrefix(db, id);
+    const body = await c.req.parseBody();
+    createComment(db, {
+      issue_id: issue.id,
+      body: body.body as string,
+      author: "webui",
+    });
+    return c.redirect(`/issues/${issue.id}`);
+  });
+
+  return app;
+}

package/src/webui/routes/runs.tsx

@@ -0,0 +1,103 @@
+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 type { Run } from "../../types.ts";
+
+export function runRoutes(db: Database, _config: Config) {
+  const app = new Hono();
+
+  app.get("/", (c) => {
+    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>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </Layout>
+    );
+  });
+
+  app.get("/:id", (c) => {
+    const id = c.req.param("id");
+    const runs = listRuns(db, { limit: 500 });
+    const run = runs.find((r) => r.id === id || r.id.startsWith(id));
+    if (!run) return c.text("Run not found", 404);
+
+    return c.html(
+      <Layout title={`Run ${run.id.slice(0, 8)}`}>
+        <div class="detail">
+          <h1>
+            <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}`}
+          </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>
+      </Layout>
+    );
+  });
+
+  return app;
+}
+
+export function apiRoutes(db: Database, _config: Config) {
+  const app = new Hono();
+
+  app.get("/status", (c) => {
+    const running = getRunningRuns(db);
+    const recent = listRuns(db, { limit: 5 });
+    return c.json({
+      active_runs: running.length,
+      recent_runs: recent.length,
+    });
+  });
+
+  return app;
+}