better-symphony 1.0.0

package/src/web/server.ts

@@ -0,0 +1,182 @@
+/**
+ * Web Dashboard Server
+ * Bun.serve() with API routes, SSE streaming, and static file serving.
+ */
+
+import { resolve } from "path";
+import { logger } from "../logging/logger.js";
+import { WebLogBuffer, createWebSink } from "./sink.js";
+import type { RuntimeSnapshot } from "../orchestrator/state.js";
+import type { LogSink } from "../logging/logger.js";
+
+interface OrchestratorHandle {
+  getSnapshot(): RuntimeSnapshot | null;
+  forcePoll(): Promise<void>;
+  stop(): Promise<void>;
+}
+
+export interface WebServerOptions {
+  port: number;
+  host: string;
+  orchestrator: OrchestratorHandle;
+}
+
+const STATIC_DIR = resolve(import.meta.dir, "../../dist/web");
+
+const MIME_TYPES: Record<string, string> = {
+  ".html": "text/html",
+  ".js": "application/javascript",
+  ".css": "text/css",
+  ".json": "application/json",
+  ".png": "image/png",
+  ".svg": "image/svg+xml",
+  ".ico": "image/x-icon",
+};
+
+function getMimeType(path: string): string {
+  const ext = path.substring(path.lastIndexOf("."));
+  return MIME_TYPES[ext] ?? "application/octet-stream";
+}
+
+export function startWebServer(options: WebServerOptions) {
+  const { port, host, orchestrator } = options;
+  const logBuffer = new WebLogBuffer(2000);
+  const webSink: LogSink = createWebSink(logBuffer);
+  logger.addSink(webSink);
+
+  const sseClients = new Set<ReadableStreamDefaultController>();
+
+  // Push updates to all SSE clients every second
+  const pushInterval = setInterval(() => {
+    if (sseClients.size === 0) return;
+
+    const snapshot = orchestrator.getSnapshot();
+    const logs = logBuffer.drain();
+    const payload = JSON.stringify({
+      type: "update",
+      snapshot,
+      logs,
+      timestamp: Date.now(),
+    });
+
+    const message = `data: ${payload}\n\n`;
+    for (const controller of sseClients) {
+      try {
+        controller.enqueue(message);
+      } catch {
+        sseClients.delete(controller);
+      }
+    }
+  }, 1000);
+
+  const server = Bun.serve({
+    port,
+    hostname: host,
+
+    async fetch(req) {
+      const url = new URL(req.url);
+      const { pathname } = url;
+
+      // ── API Routes ────────────────────────────────────────
+
+      if (pathname === "/api/snapshot") {
+        return Response.json(orchestrator.getSnapshot());
+      }
+
+      if (pathname === "/api/events") {
+        const stream = new ReadableStream({
+          start(controller) {
+            sseClients.add(controller);
+            // Send initial state with log backfill
+            const snapshot = orchestrator.getSnapshot();
+            const initial = JSON.stringify({
+              type: "initial",
+              snapshot,
+              logs: logBuffer.getRecent(200),
+              timestamp: Date.now(),
+            });
+            controller.enqueue(`data: ${initial}\n\n`);
+          },
+          cancel(controller) {
+            sseClients.delete(controller);
+          },
+        });
+
+        return new Response(stream, {
+          headers: {
+            "Content-Type": "text/event-stream",
+            "Cache-Control": "no-cache",
+            Connection: "keep-alive",
+          },
+        });
+      }
+
+      if (pathname === "/api/force-poll" && req.method === "POST") {
+        await orchestrator.forcePoll();
+        return Response.json({ ok: true });
+      }
+
+      if (pathname === "/api/shutdown" && req.method === "POST") {
+        // Respond first, then stop
+        setTimeout(async () => {
+          await orchestrator.stop();
+          process.exit(0);
+        }, 200);
+        return Response.json({ ok: true });
+      }
+
+      if (pathname === "/api/restart" && req.method === "POST") {
+        // Stop the server to release the port, then re-exec
+        setTimeout(() => {
+          clearInterval(pushInterval);
+          server.stop();
+          const args = process.argv;
+          Bun.spawn(args, {
+            stdio: ["inherit", "inherit", "inherit"],
+            env: process.env,
+          });
+          setTimeout(() => process.exit(0), 500);
+        }, 100);
+        return Response.json({ ok: true });
+      }
+
+      // ── Static Files ──────────────────────────────────────
+
+      const filePath = pathname === "/" ? "/index.html" : pathname;
+      const fullPath = resolve(STATIC_DIR, `.${filePath}`);
+
+      // Prevent directory traversal
+      if (!fullPath.startsWith(STATIC_DIR)) {
+        return new Response("Forbidden", { status: 403 });
+      }
+
+      const file = Bun.file(fullPath);
+      if (await file.exists()) {
+        return new Response(file, {
+          headers: { "Content-Type": getMimeType(fullPath) },
+        });
+      }
+
+      // SPA fallback
+      const indexFile = Bun.file(resolve(STATIC_DIR, "index.html"));
+      if (await indexFile.exists()) {
+        return new Response(indexFile, {
+          headers: { "Content-Type": "text/html" },
+        });
+      }
+
+      return new Response("Not Found", { status: 404 });
+    },
+  });
+
+  logger.info(`Web dashboard at http://${host === "0.0.0.0" ? "localhost" : host}:${port}`);
+
+  return {
+    server,
+    stop() {
+      clearInterval(pushInterval);
+      server.stop();
+      logger.removeSink(webSink);
+    },
+  };
+}

package/src/web/sink.ts

@@ -0,0 +1,67 @@
+/**
+ * Web Log Sink
+ * Buffers log lines for SSE streaming to the web dashboard.
+ */
+
+import type { LogSink, LogEntry } from "../logging/logger.js";
+import type { LogLine } from "../tui/types.js";
+
+export class WebLogBuffer {
+  private buffer: LogLine[] = [];
+  private pending: LogLine[] = [];
+  private maxSize: number;
+
+  constructor(maxSize: number) {
+    this.maxSize = maxSize;
+  }
+
+  push(line: LogLine): void {
+    this.buffer.push(line);
+    this.pending.push(line);
+    if (this.buffer.length > this.maxSize) {
+      this.buffer = this.buffer.slice(-this.maxSize);
+    }
+  }
+
+  /** Return and clear accumulated lines since last drain. */
+  drain(): LogLine[] {
+    const lines = this.pending;
+    this.pending = [];
+    return lines;
+  }
+
+  /** Return the last N lines from the full buffer. */
+  getRecent(n: number): LogLine[] {
+    return this.buffer.slice(-n);
+  }
+}
+
+export function createWebSink(buffer: WebLogBuffer): LogSink {
+  return (entry: LogEntry) => {
+    const type: LogLine["type"] =
+      entry.level === "error"
+        ? "error"
+        : entry.level === "warn"
+          ? "info"
+          : entry.level === "info"
+            ? "info"
+            : "comment";
+
+    const source =
+      (entry.context.issue_identifier as string) ?? "orchestrator";
+
+    let message = entry.message;
+    const extras: string[] = [];
+    for (const [key, value] of Object.entries(entry.context)) {
+      if (key === "issue_identifier" || key === "issue_id" || key === "session_id") continue;
+      if (value !== undefined && value !== null) {
+        extras.push(`${key}=${value}`);
+      }
+    }
+    if (extras.length > 0) {
+      message += ` (${extras.join(", ")})`;
+    }
+
+    buffer.push({ source, message, type, timestamp: Date.now() });
+  };
+}

package/src/web-ui/App.tsx

@@ -0,0 +1,60 @@
+import { useState, useCallback, useEffect } from "react";
+import { useSSE } from "./lib/use-sse";
+import { Header } from "./components/header";
+import { StatsCards } from "./components/stats-cards";
+import { AgentTable } from "./components/agent-table";
+import { RetryTable } from "./components/retry-table";
+import { LogStream } from "./components/log-stream";
+
+export function App() {
+  const { snapshot, logs, connected, startTime, actions } = useSSE();
+  const [sourceFilter, setSourceFilter] = useState("all");
+  const [polling, setPolling] = useState(false);
+
+  const handleAgentClick = useCallback((issueIdentifier: string) => {
+    setSourceFilter(issueIdentifier);
+  }, []);
+
+  const handleForcePoll = useCallback(async () => {
+    setPolling(true);
+    try { await actions.forcePoll(); } finally { setPolling(false); }
+  }, [actions.forcePoll]);
+
+  // Keyboard shortcuts
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement || e.target instanceof HTMLSelectElement) return;
+      if (e.key === "r") handleForcePoll();
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [handleForcePoll]);
+
+  return (
+    <div className="flex flex-col h-screen bg-background text-foreground overflow-x-hidden">
+      <Header
+        connected={connected}
+        startTime={startTime}
+        polling={polling}
+        onForcePoll={handleForcePoll}
+        onRestart={actions.restart}
+        onShutdown={actions.shutdown}
+      />
+
+      <main className="flex flex-col flex-1 min-h-0 p-4 sm:p-6 gap-4">
+        <StatsCards snapshot={snapshot} onAgentClick={handleAgentClick} />
+
+        <div className="flex flex-col gap-4">
+          <div>
+            <h2 className="text-sm font-medium text-muted-foreground mb-2">Running Agents</h2>
+            <AgentTable running={snapshot?.running ?? []} onAgentClick={handleAgentClick} />
+          </div>
+
+          <RetryTable retrying={snapshot?.retrying ?? []} />
+        </div>
+
+        <LogStream logs={logs} sourceFilter={sourceFilter} onSourceFilterChange={setSourceFilter} />
+      </main>
+    </div>
+  );
+}

package/src/web-ui/components/agent-table.tsx

@@ -0,0 +1,57 @@
+import { Badge } from "./ui/badge";
+import { formatElapsed } from "../lib/utils";
+import type { RuntimeSnapshot } from "../lib/use-sse";
+
+interface AgentTableProps {
+  running: RuntimeSnapshot["running"];
+  onAgentClick?: (issueIdentifier: string) => void;
+}
+
+export function AgentTable({ running, onAgentClick }: AgentTableProps) {
+  if (running.length === 0) {
+    return (
+      <div className="rounded-lg border border-border p-8 text-center text-muted-foreground">
+        No agents running
+      </div>
+    );
+  }
+
+  return (
+    <div className="rounded-lg border border-border overflow-hidden">
+      <table className="w-full text-sm">
+        <thead>
+          <tr className="border-b border-border bg-muted/50">
+            <th className="text-left p-3 font-medium text-muted-foreground">Issue</th>
+            <th className="text-left p-3 font-medium text-muted-foreground">Workflow</th>
+            <th className="text-left p-3 font-medium text-muted-foreground">State</th>
+            <th className="text-right p-3 font-medium text-muted-foreground">Turns</th>
+            <th className="text-right p-3 font-medium text-muted-foreground">Duration</th>
+          </tr>
+        </thead>
+        <tbody>
+          {running.map((agent) => (
+            <tr
+              key={agent.issue_id}
+              className="border-b border-border last:border-0 hover:bg-muted/30 cursor-pointer"
+              onClick={() => onAgentClick?.(agent.issue_identifier)}
+            >
+              <td className="p-3 font-mono">{agent.issue_identifier}</td>
+              <td className="p-3">
+                {agent.workflow ? (
+                  <Badge variant="secondary">{agent.workflow}</Badge>
+                ) : (
+                  <span className="text-muted-foreground">-</span>
+                )}
+              </td>
+              <td className="p-3">
+                <Badge variant="success">{agent.state}</Badge>
+              </td>
+              <td className="p-3 text-right font-mono">{agent.turn_count}</td>
+              <td className="p-3 text-right font-mono">{formatElapsed(agent.started_at)}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}

package/src/web-ui/components/header.tsx

@@ -0,0 +1,72 @@
+import { useState, useEffect } from "react";
+import { Button } from "./ui/button";
+import { formatDuration } from "../lib/utils";
+import { RefreshCw, Power, RotateCcw } from "lucide-react";
+
+interface HeaderProps {
+  connected: boolean;
+  startTime: number;
+  polling: boolean;
+  onForcePoll: () => void;
+  onRestart: () => void;
+  onShutdown: () => void;
+}
+
+export function Header({ connected, startTime, polling, onForcePoll, onRestart, onShutdown }: HeaderProps) {
+  const [uptime, setUptime] = useState("0s");
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setUptime(formatDuration((Date.now() - startTime) / 1000));
+    }, 1000);
+    return () => clearInterval(timer);
+  }, [startTime]);
+
+  const [confirmAction, setConfirmAction] = useState<"restart" | "shutdown" | null>(null);
+
+  const handleConfirm = () => {
+    if (confirmAction === "restart") onRestart();
+    if (confirmAction === "shutdown") onShutdown();
+    setConfirmAction(null);
+  };
+
+  return (
+    <header className="flex flex-wrap items-center justify-between gap-2 border-b border-border px-4 sm:px-6 py-3">
+      <div className="flex items-center gap-3 min-w-0">
+        <h1 className="text-lg font-semibold shrink-0">Better Symphony</h1>
+        <div className="flex items-center gap-2 text-sm text-muted-foreground">
+          <div className={`h-2 w-2 rounded-full ${connected ? "bg-success" : "bg-destructive"}`} />
+          {connected ? "Connected" : "Disconnected"}
+        </div>
+        <span className="text-sm text-muted-foreground">Uptime: {uptime}</span>
+      </div>
+
+      <div className="flex items-center gap-2">
+        {confirmAction ? (
+          <>
+            <span className="text-sm text-warning mr-2">
+              Confirm {confirmAction}?
+            </span>
+            <Button size="sm" variant="destructive" onClick={handleConfirm}>Yes</Button>
+            <Button size="sm" variant="outline" onClick={() => setConfirmAction(null)}>Cancel</Button>
+          </>
+        ) : (
+          <>
+            <Button size="sm" variant="outline" onClick={onForcePoll} disabled={polling}>
+              <RefreshCw className={`h-3.5 w-3.5 ${polling ? "animate-spin" : ""}`} />
+              Poll Now
+            </Button>
+            <Button size="sm" variant="outline" onClick={() => setConfirmAction("restart")}>
+              <RotateCcw className="h-3.5 w-3.5" />
+              Restart
+            </Button>
+            <Button size="sm" variant="destructive" onClick={() => setConfirmAction("shutdown")}>
+              <Power className="h-3.5 w-3.5" />
+              Shutdown
+            </Button>
+          </>
+        )}
+      </div>
+    </header>
+  );
+}

package/src/web-ui/components/log-stream.tsx

@@ -0,0 +1,111 @@
+import { useRef, useEffect, useState, useMemo } from "react";
+import { Badge } from "./ui/badge";
+import { Button } from "./ui/button";
+import { cn } from "../lib/utils";
+import { ArrowDown } from "lucide-react";
+import type { LogLine } from "../lib/use-sse";
+
+interface LogStreamProps {
+  logs: LogLine[];
+  sourceFilter: string;
+  onSourceFilterChange: (source: string) => void;
+}
+
+const TYPE_COLORS: Record<LogLine["type"], string> = {
+  error: "text-destructive",
+  info: "text-blue-400",
+  comment: "text-muted-foreground",
+  line: "text-foreground",
+};
+
+export function LogStream({ logs, sourceFilter, onSourceFilterChange }: LogStreamProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [autoFollow, setAutoFollow] = useState(true);
+
+  // Derive unique sources
+  const sources = useMemo(() => {
+    const set = new Set<string>();
+    for (const log of logs) set.add(log.source);
+    return Array.from(set).sort();
+  }, [logs]);
+
+  const filteredLogs = useMemo(() => {
+    if (sourceFilter === "all") return logs;
+    return logs.filter((l) => l.source === sourceFilter);
+  }, [logs, sourceFilter]);
+
+  // Auto-scroll to bottom
+  useEffect(() => {
+    if (autoFollow && containerRef.current) {
+      containerRef.current.scrollTop = containerRef.current.scrollHeight;
+    }
+  }, [filteredLogs, autoFollow]);
+
+  const handleScroll = () => {
+    if (!containerRef.current) return;
+    const { scrollTop, scrollHeight, clientHeight } = containerRef.current;
+    const atBottom = scrollHeight - scrollTop - clientHeight < 40;
+    setAutoFollow(atBottom);
+  };
+
+  return (
+    <div className="flex flex-col flex-1 min-h-0">
+      <div className="flex items-center justify-between mb-2">
+        <h2 className="text-sm font-medium text-muted-foreground">
+          Logs
+          {sourceFilter !== "all" && (
+            <button
+              className="ml-2 text-xs text-blue-400 hover:text-blue-300"
+              onClick={() => onSourceFilterChange("all")}
+            >
+              (filtered: {sourceFilter}) &times;
+            </button>
+          )}
+        </h2>
+        <div className="flex items-center gap-2">
+          <select
+            className="text-xs bg-muted border border-border rounded px-2 py-1 text-foreground"
+            value={sourceFilter}
+            onChange={(e) => onSourceFilterChange(e.target.value)}
+          >
+            <option value="all">All sources</option>
+            {sources.map((s) => (
+              <option key={s} value={s}>{s}</option>
+            ))}
+          </select>
+          {!autoFollow && (
+            <Button size="sm" variant="ghost" onClick={() => setAutoFollow(true)}>
+              <ArrowDown className="h-3.5 w-3.5" />
+            </Button>
+          )}
+        </div>
+      </div>
+
+      <div
+        ref={containerRef}
+        onScroll={handleScroll}
+        className="flex-1 min-h-0 overflow-y-auto rounded-lg border border-border bg-black/30 p-2 font-mono text-xs leading-5"
+      >
+        {filteredLogs.map((log, i) => (
+          <div key={i} className="flex gap-2 hover:bg-muted/20 px-1">
+            <span className="text-muted-foreground shrink-0 w-[70px]">
+              {new Date(log.timestamp).toLocaleTimeString()}
+            </span>
+            <Badge
+              variant={log.source === "orchestrator" ? "secondary" : "outline"}
+              className="shrink-0 text-[10px] px-1.5 py-0 h-4 mt-0.5"
+            >
+              {log.source.length > 12 ? log.source.slice(0, 12) : log.source}
+            </Badge>
+            <span className={cn("break-all", TYPE_COLORS[log.type])}>
+              {log.message}
+            </span>
+          </div>
+        ))}
+        {filteredLogs.length === 0 && (
+          <div className="text-muted-foreground text-center py-8">No logs yet</div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/web-ui/components/retry-table.tsx

@@ -0,0 +1,58 @@
+import { Badge } from "./ui/badge";
+import type { RuntimeSnapshot } from "../lib/use-sse";
+
+function formatTimeUntil(dateStr: string): string {
+  const ms = new Date(dateStr).getTime() - Date.now();
+  if (ms <= 0) return "now";
+  const s = Math.ceil(ms / 1000);
+  if (s < 60) return `${s}s`;
+  return `${Math.floor(s / 60)}m ${s % 60}s`;
+}
+
+interface RetryTableProps {
+  retrying: RuntimeSnapshot["retrying"];
+}
+
+export function RetryTable({ retrying }: RetryTableProps) {
+  if (retrying.length === 0) return null;
+
+  return (
+    <div>
+      <h2 className="text-sm font-medium text-muted-foreground mb-2">Retrying</h2>
+      <div className="rounded-lg border border-border overflow-hidden">
+        <table className="w-full text-sm">
+          <thead>
+            <tr className="border-b border-border bg-muted/50">
+              <th className="text-left p-3 font-medium text-muted-foreground">Issue</th>
+              <th className="text-left p-3 font-medium text-muted-foreground">Workflow</th>
+              <th className="text-right p-3 font-medium text-muted-foreground">Attempt</th>
+              <th className="text-right p-3 font-medium text-muted-foreground">Retry In</th>
+              <th className="text-left p-3 font-medium text-muted-foreground">Error</th>
+            </tr>
+          </thead>
+          <tbody>
+            {retrying.map((entry) => (
+              <tr key={entry.issue_id} className="border-b border-border last:border-0 hover:bg-muted/30">
+                <td className="p-3 font-mono">{entry.identifier}</td>
+                <td className="p-3">
+                  {entry.workflow ? (
+                    <Badge variant="secondary">{entry.workflow}</Badge>
+                  ) : (
+                    <span className="text-muted-foreground">-</span>
+                  )}
+                </td>
+                <td className="p-3 text-right font-mono">#{entry.attempt}</td>
+                <td className="p-3 text-right font-mono">
+                  <Badge variant="warning">{formatTimeUntil(entry.due_at)}</Badge>
+                </td>
+                <td className="p-3 text-muted-foreground truncate max-w-xs">
+                  {entry.error ?? "-"}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}