better-symphony 1.0.0

package/src/web-ui/components/stats-cards.tsx

@@ -0,0 +1,142 @@
+import { useState, useMemo } from "react";
+import { Card, CardHeader, CardTitle, CardContent } from "./ui/card";
+import { Badge } from "./ui/badge";
+import { formatDuration, formatElapsed } from "../lib/utils";
+import type { RuntimeSnapshot } from "../lib/use-sse";
+
+interface StatsCardsProps {
+  snapshot: RuntimeSnapshot | null;
+  onAgentClick?: (issueIdentifier: string) => void;
+}
+
+export function StatsCards({ snapshot, onAgentClick }: StatsCardsProps) {
+  const [showModal, setShowModal] = useState(false);
+
+  const running = snapshot?.running.length ?? 0;
+  const workflows = snapshot?.workflows ?? [];
+  const totalSlots = workflows.reduce((s, w) => s + w.max_concurrent_agents, 0);
+  const seconds = snapshot?.token_totals.seconds_running ?? 0;
+
+  // Group running agents by workflow name for the modal
+  const agentsByWorkflow = useMemo(() => {
+    if (!snapshot) return new Map<string, RuntimeSnapshot["running"]>();
+    const map = new Map<string, RuntimeSnapshot["running"]>();
+    for (const agent of snapshot.running) {
+      const key = agent.workflow ?? "default";
+      const list = map.get(key);
+      if (list) list.push(agent);
+      else map.set(key, [agent]);
+    }
+    return map;
+  }, [snapshot]);
+
+  return (
+    <>
+      <div className="grid grid-cols-3 gap-3 sm:gap-4">
+        <Card>
+          <CardHeader>
+            <CardTitle>Running Agents</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold text-success">{running}</div>
+          </CardContent>
+        </Card>
+
+        <Card
+          className="cursor-pointer hover:border-muted-foreground transition-colors"
+          onClick={() => setShowModal(true)}
+        >
+          <CardHeader>
+            <CardTitle>Workflows</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">
+              {workflows.length}
+              <span className="text-muted-foreground text-base font-normal ml-1">
+                ({totalSlots} slots)
+              </span>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>Agent Runtime</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">{formatDuration(seconds)}</div>
+          </CardContent>
+        </Card>
+      </div>
+
+      {showModal && (
+        <div
+          className="fixed inset-0 z-50 flex items-center justify-center bg-black/60"
+          onClick={() => setShowModal(false)}
+        >
+          <div
+            className="bg-card border border-border rounded-lg shadow-xl w-full max-w-lg mx-4"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div className="flex items-center justify-between p-4 border-b border-border">
+              <h3 className="text-lg font-semibold">Workflows</h3>
+              <button
+                className="text-muted-foreground hover:text-foreground text-xl leading-none px-2"
+                onClick={() => setShowModal(false)}
+              >
+                &times;
+              </button>
+            </div>
+
+            <div className="p-4 space-y-3">
+              {workflows.length === 0 ? (
+                <div className="text-center text-muted-foreground py-4">No workflows loaded</div>
+              ) : (
+                workflows.map((wf) => {
+                  const available = wf.max_concurrent_agents - wf.running_count;
+                  const agents = agentsByWorkflow.get(wf.name) ?? [];
+                  return (
+                    <div key={wf.name} className="bg-muted/20 rounded-lg p-3">
+                      <div className="flex items-center justify-between mb-2">
+                        <span className="font-medium">{wf.name}</span>
+                        <Badge variant={wf.running_count > 0 ? "success" : "secondary"} className="text-xs">
+                          {wf.running_count} / {wf.max_concurrent_agents} agents
+                        </Badge>
+                      </div>
+                      <div className="w-full bg-muted rounded-full h-1.5">
+                        <div
+                          className="bg-success rounded-full h-1.5 transition-all"
+                          style={{ width: `${wf.max_concurrent_agents > 0 ? (wf.running_count / wf.max_concurrent_agents) * 100 : 0}%` }}
+                        />
+                      </div>
+                      <div className="text-xs text-muted-foreground mt-1.5">
+                        {available} slot{available !== 1 ? "s" : ""} available
+                      </div>
+
+                      {agents.map((agent) => (
+                        <div
+                          key={agent.issue_id}
+                          className="flex items-center justify-between mt-2 bg-muted/20 rounded px-2.5 py-1.5 text-sm cursor-pointer hover:bg-muted/40 transition-colors"
+                          onClick={() => {
+                            onAgentClick?.(agent.issue_identifier);
+                            setShowModal(false);
+                          }}
+                        >
+                          <span className="font-mono text-xs">{agent.issue_identifier}</span>
+                          <div className="flex items-center gap-2 text-xs text-muted-foreground">
+                            <span>{agent.turn_count} turns</span>
+                            <span>{formatElapsed(agent.started_at)}</span>
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+                  );
+                })
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}

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

@@ -0,0 +1,30 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../../lib/utils";
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground",
+        secondary: "border-transparent bg-secondary text-secondary-foreground",
+        destructive: "border-transparent bg-destructive text-white",
+        outline: "text-foreground",
+        success: "border-transparent bg-success/20 text-success",
+        warning: "border-transparent bg-warning/20 text-warning",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+);
+
+interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
+}
+
+export { Badge, badgeVariants };

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

@@ -0,0 +1,39 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../../lib/utils";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-white hover:bg-destructive/90",
+        outline: "border border-border bg-transparent hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, ...props }, ref) => (
+    <button className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />
+  )
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };

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

@@ -0,0 +1,32 @@
+import * as React from "react";
+import { cn } from "../../lib/utils";
+
+const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("rounded-lg border border-border bg-card text-card-foreground shadow-sm", className)} {...props} />
+  )
+);
+Card.displayName = "Card";
+
+const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("flex flex-col space-y-1.5 p-4", className)} {...props} />
+  )
+);
+CardHeader.displayName = "CardHeader";
+
+const CardTitle = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("text-sm font-medium text-muted-foreground", className)} {...props} />
+  )
+);
+CardTitle.displayName = "CardTitle";
+
+const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("p-4 pt-0", className)} {...props} />
+  )
+);
+CardContent.displayName = "CardContent";
+
+export { Card, CardHeader, CardTitle, CardContent };

package/src/web-ui/globals.css

@@ -0,0 +1,27 @@
+@import "tailwindcss";
+
+@theme {
+  --color-background: oklch(0.145 0 0);
+  --color-foreground: oklch(0.985 0 0);
+  --color-card: oklch(0.17 0 0);
+  --color-card-foreground: oklch(0.985 0 0);
+  --color-muted: oklch(0.269 0 0);
+  --color-muted-foreground: oklch(0.708 0 0);
+  --color-border: oklch(0.3 0 0);
+  --color-accent: oklch(0.269 0 0);
+  --color-accent-foreground: oklch(0.985 0 0);
+  --color-destructive: oklch(0.577 0.245 27.325);
+  --color-primary: oklch(0.985 0 0);
+  --color-primary-foreground: oklch(0.205 0 0);
+  --color-secondary: oklch(0.269 0 0);
+  --color-secondary-foreground: oklch(0.985 0 0);
+  --color-ring: oklch(0.556 0 0);
+  --radius: 0.5rem;
+
+  --color-success: oklch(0.7 0.2 145);
+  --color-warning: oklch(0.75 0.18 85);
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
+}

package/src/web-ui/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Better Symphony</title>
+  <link rel="stylesheet" href="/app.css">
+</head>
+<body class="bg-background text-foreground min-h-screen">
+  <div id="root"></div>
+  <script src="/main.js" type="module"></script>
+</body>
+</html>

package/src/web-ui/lib/use-sse.ts

@@ -0,0 +1,98 @@
+import { useState, useEffect, useCallback, useRef } from "react";
+
+export interface LogLine {
+  source: string;
+  message: string;
+  type: "line" | "error" | "info" | "comment";
+  timestamp: number;
+}
+
+export interface RuntimeSnapshot {
+  running: Array<{
+    issue_id: string;
+    issue_identifier: string;
+    state: string;
+    started_at: string;
+    turn_count: number;
+    session_id: string | null;
+    workflow: string | null;
+  }>;
+  retrying: Array<{
+    issue_id: string;
+    identifier: string;
+    attempt: number;
+    due_at: string;
+    error: string | null;
+    workflow: string | null;
+  }>;
+  workflows: Array<{
+    name: string;
+    max_concurrent_agents: number;
+    running_count: number;
+  }>;
+  token_totals: {
+    input_tokens: number;
+    output_tokens: number;
+    total_tokens: number;
+    seconds_running: number;
+  };
+  rate_limits: {
+    requests_remaining: number;
+    requests_limit: number;
+    tokens_remaining: number;
+    tokens_limit: number;
+    reset_at: string;
+  } | null;
+}
+
+const MAX_LOGS = 1000;
+
+export function useSSE() {
+  const [snapshot, setSnapshot] = useState<RuntimeSnapshot | null>(null);
+  const [logs, setLogs] = useState<LogLine[]>([]);
+  const [connected, setConnected] = useState(false);
+  const startTimeRef = useRef(Date.now());
+
+  useEffect(() => {
+    const es = new EventSource("/api/events");
+
+    es.onopen = () => setConnected(true);
+
+    es.onmessage = (e) => {
+      const data = JSON.parse(e.data);
+      setSnapshot(data.snapshot);
+
+      if (data.type === "initial") {
+        setLogs(data.logs ?? []);
+      } else if (data.logs?.length) {
+        setLogs((prev) => [...prev, ...data.logs].slice(-MAX_LOGS));
+      }
+    };
+
+    es.onerror = () => {
+      setConnected(false);
+    };
+
+    return () => es.close();
+  }, []);
+
+  const forcePoll = useCallback(async () => {
+    await fetch("/api/force-poll", { method: "POST" });
+  }, []);
+
+  const restart = useCallback(async () => {
+    await fetch("/api/restart", { method: "POST" });
+  }, []);
+
+  const shutdown = useCallback(async () => {
+    await fetch("/api/shutdown", { method: "POST" });
+  }, []);
+
+  return {
+    snapshot,
+    logs,
+    connected,
+    startTime: startTimeRef.current,
+    actions: { forcePoll, restart, shutdown },
+  };
+}

package/src/web-ui/lib/utils.ts

@@ -0,0 +1,25 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+export function formatTokens(n: number): string {
+  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
+  if (n >= 1_000) return `${(n / 1_000).toFixed(1)}K`;
+  return String(n);
+}
+
+export function formatDuration(seconds: number): string {
+  if (seconds < 60) return `${Math.round(seconds)}s`;
+  if (seconds < 3600) return `${Math.floor(seconds / 60)}m ${Math.round(seconds % 60)}s`;
+  const h = Math.floor(seconds / 3600);
+  const m = Math.floor((seconds % 3600) / 60);
+  return `${h}h ${m}m`;
+}
+
+export function formatElapsed(startedAt: string): string {
+  const ms = Date.now() - new Date(startedAt).getTime();
+  return formatDuration(ms / 1000);
+}

package/src/web-ui/main.tsx

@@ -0,0 +1,4 @@
+import { createRoot } from "react-dom/client";
+import { App } from "./App";
+
+createRoot(document.getElementById("root")!).render(<App />);

package/src/workspace/hooks.ts

@@ -0,0 +1,97 @@
+/**
+ * Workspace Hooks
+ * Shell script execution for workspace lifecycle events
+ */
+
+import { spawn } from "child_process";
+import { logger } from "../logging/logger.js";
+
+export interface HookResult {
+  success: boolean;
+  stdout: string;
+  stderr: string;
+  exitCode: number | null;
+  timedOut: boolean;
+}
+
+/**
+ * Execute a hook script in a workspace directory
+ */
+export async function executeHook(
+  hookName: string,
+  script: string,
+  cwd: string,
+  timeoutMs: number
+): Promise<HookResult> {
+  logger.debug(`Executing hook ${hookName}`, { hook: hookName, cwd });
+
+  return new Promise((resolve) => {
+    const proc = spawn("bash", ["-lc", script], {
+      cwd,
+      stdio: ["ignore", "pipe", "pipe"],
+      env: {
+        ...process.env,
+        SYMPHONY_HOOK: hookName,
+        SYMPHONY_WORKSPACE: cwd,
+      },
+    });
+
+    let stdout = "";
+    let stderr = "";
+    let timedOut = false;
+
+    const timer = setTimeout(() => {
+      timedOut = true;
+      proc.kill("SIGTERM");
+      setTimeout(() => {
+        if (!proc.killed) {
+          proc.kill("SIGKILL");
+        }
+      }, 5000);
+    }, timeoutMs);
+
+    proc.stdout?.on("data", (data) => {
+      stdout += data.toString();
+    });
+
+    proc.stderr?.on("data", (data) => {
+      stderr += data.toString();
+    });
+
+    proc.on("close", (exitCode) => {
+      clearTimeout(timer);
+
+      if (timedOut) {
+        logger.warn(`Hook ${hookName} timed out after ${timeoutMs}ms`, { hook: hookName });
+      } else if (exitCode !== 0) {
+        logger.warn(`Hook ${hookName} failed with exit code ${exitCode}`, {
+          hook: hookName,
+          exitCode,
+          stderr: stderr.slice(0, 500),
+        });
+      } else {
+        logger.debug(`Hook ${hookName} completed successfully`, { hook: hookName });
+      }
+
+      resolve({
+        success: !timedOut && exitCode === 0,
+        stdout,
+        stderr,
+        exitCode,
+        timedOut,
+      });
+    });
+
+    proc.on("error", (err) => {
+      clearTimeout(timer);
+      logger.error(`Hook ${hookName} failed to execute: ${err.message}`, { hook: hookName });
+      resolve({
+        success: false,
+        stdout: "",
+        stderr: err.message,
+        exitCode: null,
+        timedOut: false,
+      });
+    });
+  });
+}