claude-dashboard 0.1.0

package/src/components/ui/tooltip.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export interface TooltipProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'content'> {
+  content: React.ReactNode;
+  side?: "top" | "bottom" | "left" | "right";
+  delayMs?: number;
+}
+
+const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(
+  ({ className, content, side = "top", delayMs = 200, children, ...props }, ref) => {
+    const [visible, setVisible] = React.useState(false);
+    const timeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
+
+    const showTooltip = React.useCallback(() => {
+      timeoutRef.current = setTimeout(() => setVisible(true), delayMs);
+    }, [delayMs]);
+
+    const hideTooltip = React.useCallback(() => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+        timeoutRef.current = null;
+      }
+      setVisible(false);
+    }, []);
+
+    React.useEffect(() => {
+      return () => {
+        if (timeoutRef.current) {
+          clearTimeout(timeoutRef.current);
+        }
+      };
+    }, []);
+
+    const positionClasses = {
+      top: "bottom-full left-1/2 -translate-x-1/2 mb-2",
+      bottom: "top-full left-1/2 -translate-x-1/2 mt-2",
+      left: "right-full top-1/2 -translate-y-1/2 mr-2",
+      right: "left-full top-1/2 -translate-y-1/2 ml-2",
+    };
+
+    return (
+      <div
+        ref={ref}
+        className={cn("relative inline-flex", className)}
+        onMouseEnter={showTooltip}
+        onMouseLeave={hideTooltip}
+        onFocus={showTooltip}
+        onBlur={hideTooltip}
+        {...props}
+      >
+        {children}
+        {visible && content && (
+          <div
+            role="tooltip"
+            className={cn(
+              "absolute z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95",
+              "pointer-events-none whitespace-nowrap",
+              positionClasses[side]
+            )}
+          >
+            {content}
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+Tooltip.displayName = "Tooltip";
+
+export { Tooltip };

package/src/components/workflow/WorkflowLauncher.tsx

@@ -0,0 +1,102 @@
+"use client";
+
+import { useState, useCallback, type FormEvent } from "react";
+import { useWorkflowStore } from "@/stores/workflowStore";
+import { useAgentStore } from "@/stores/agentStore";
+import { useEventStore } from "@/stores/eventStore";
+
+interface WorkflowLauncherProps {
+  onStart: (prompt: string) => void;
+  onPause: () => void;
+  onResume: () => void;
+  onCancel: () => void;
+}
+
+export function WorkflowLauncher({
+  onStart,
+  onPause,
+  onResume,
+  onCancel,
+}: WorkflowLauncherProps) {
+  const [prompt, setPrompt] = useState("");
+  const { status, workflowId } = useWorkflowStore();
+  const resetAgents = useAgentStore((s) => s.resetAll);
+  const clearEvents = useEventStore((s) => s.clear);
+  const resetWorkflow = useWorkflowStore((s) => s.reset);
+
+  const handleSubmit = useCallback(
+    (e: FormEvent) => {
+      e.preventDefault();
+      if (!prompt.trim()) return;
+      resetWorkflow();
+      resetAgents();
+      clearEvents();
+      onStart(prompt.trim());
+    },
+    [prompt, onStart, resetWorkflow, resetAgents, clearEvents]
+  );
+
+  const isIdle = status === "pending" || status === "completed" || status === "failed" || status === "cancelled";
+  const isRunning = status === "running";
+  const isPaused = status === "paused";
+
+  return (
+    <div className="border-b border-border bg-card/50 px-4 py-3">
+      <form onSubmit={handleSubmit} className="flex gap-2">
+        <input
+          type="text"
+          value={prompt}
+          onChange={(e) => setPrompt(e.target.value)}
+          placeholder="Describe your development task..."
+          disabled={!isIdle}
+          className="flex-1 h-9 rounded-md border border-border bg-background px-3 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:opacity-50"
+        />
+        {isIdle && (
+          <button
+            type="submit"
+            disabled={!prompt.trim()}
+            className="h-9 px-4 rounded-md bg-primary text-primary-foreground text-sm font-medium hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            Start
+          </button>
+        )}
+        {isRunning && (
+          <>
+            <button
+              type="button"
+              onClick={onPause}
+              className="h-9 px-4 rounded-md bg-yellow-600 text-white text-sm font-medium hover:bg-yellow-700"
+            >
+              Pause
+            </button>
+            <button
+              type="button"
+              onClick={onCancel}
+              className="h-9 px-4 rounded-md bg-red-600 text-white text-sm font-medium hover:bg-red-700"
+            >
+              Cancel
+            </button>
+          </>
+        )}
+        {isPaused && (
+          <>
+            <button
+              type="button"
+              onClick={onResume}
+              className="h-9 px-4 rounded-md bg-emerald-600 text-white text-sm font-medium hover:bg-emerald-700"
+            >
+              Resume
+            </button>
+            <button
+              type="button"
+              onClick={onCancel}
+              className="h-9 px-4 rounded-md bg-red-600 text-white text-sm font-medium hover:bg-red-700"
+            >
+              Cancel
+            </button>
+          </>
+        )}
+      </form>
+    </div>
+  );
+}

package/src/hooks/useAgentStream.ts

@@ -0,0 +1,27 @@
+"use client";
+
+import { useMemo } from "react";
+import { useAgentStore } from "@/stores/agentStore";
+import type { AgentRole } from "@/lib/workflow/types";
+
+export function useAgentStream(role: AgentRole) {
+  const agent = useAgentStore((s) => s.agents[role]);
+
+  const output = useMemo(() => {
+    return agent.outputChunks.join("");
+  }, [agent.outputChunks]);
+
+  return {
+    status: agent.status,
+    output,
+    error: agent.error,
+    startedAt: agent.startedAt,
+    completedAt: agent.completedAt,
+    durationMs: agent.durationMs,
+    tokensIn: agent.tokensIn,
+    tokensOut: agent.tokensOut,
+    activity: agent.activity,
+    lastActivityAt: agent.lastActivityAt,
+    retryCount: agent.retryCount,
+  };
+}

package/src/hooks/useAutoScroll.ts

@@ -0,0 +1,24 @@
+"use client";
+
+import { useRef, useEffect, useCallback } from "react";
+
+export function useAutoScroll<T extends HTMLElement>(deps: any[]) {
+  const ref = useRef<T>(null);
+  const userScrolled = useRef(false);
+
+  const handleScroll = useCallback(() => {
+    const el = ref.current;
+    if (!el) return;
+    const { scrollTop, scrollHeight, clientHeight } = el;
+    // User has scrolled up if not near bottom
+    userScrolled.current = scrollHeight - scrollTop - clientHeight > 50;
+  }, []);
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el || userScrolled.current) return;
+    el.scrollTop = el.scrollHeight;
+  }, deps);
+
+  return { ref, handleScroll };
+}

package/src/hooks/useUsage.ts

@@ -0,0 +1,66 @@
+"use client";
+
+import { useState, useEffect, useCallback, useRef } from "react";
+
+/** Shape of a single usage bucket */
+export interface UsageBucket {
+  utilization: number;
+  resets_at: string | null;
+}
+
+/** Response from /api/usage */
+export interface UsageData {
+  five_hour: UsageBucket | null;
+  seven_day: UsageBucket | null;
+  seven_day_sonnet: UsageBucket | null;
+  error?: string;
+}
+
+const POLL_INTERVAL_MS = 60_000; // 60 seconds
+
+/**
+ * Hook to poll Claude Code usage data from /api/usage.
+ *
+ * - Fetches immediately on mount
+ * - Polls every 60 seconds
+ * - Gracefully handles errors (returns null values)
+ */
+export function useUsage() {
+  const [data, setData] = useState<UsageData | null>(null);
+  const [loading, setLoading] = useState(true);
+  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  const fetchUsage = useCallback(async () => {
+    try {
+      const res = await fetch("/api/usage");
+      const json: UsageData = await res.json();
+      setData(json);
+    } catch (err) {
+      console.error("[useUsage] Failed to fetch usage:", err);
+      setData({
+        five_hour: null,
+        seven_day: null,
+        seven_day_sonnet: null,
+        error: "Network error",
+      });
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    // Fetch immediately
+    fetchUsage();
+
+    // Then poll every 60s
+    intervalRef.current = setInterval(fetchUsage, POLL_INTERVAL_MS);
+
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+      }
+    };
+  }, [fetchUsage]);
+
+  return { data, loading };
+}

package/src/hooks/useWebSocket.ts

@@ -0,0 +1,289 @@
+"use client";
+
+import { useEffect, useRef, useCallback } from "react";
+import { useWorkflowStore } from "@/stores/workflowStore";
+import { useAgentStore } from "@/stores/agentStore";
+import { useEventStore } from "@/stores/eventStore";
+import { useTerminalStore } from "@/stores/terminalStore";
+import { OutputBuffer } from "@/lib/output-buffer";
+import type { AgentRole } from "@/lib/workflow/types";
+import { AGENT_CONFIG, AGENT_ORDER, getStageForRole } from "@/lib/workflow/types";
+
+const RECONNECT_DELAYS = [1000, 2000, 4000, 8000, 16000];
+
+export function useWebSocket() {
+  const wsRef = useRef<WebSocket | null>(null);
+  const reconnectAttempt = useRef(0);
+  const reconnectTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const buffersRef = useRef<Map<string, OutputBuffer>>(new Map());
+
+  const { setWorkflow, setStatus, setCurrentStage, setCompleted } =
+    useWorkflowStore();
+  const { appendChunks, setAgentStarted, setAgentCompleted, setAgentFailed, setAgentActivity, setAgentRetry } =
+    useAgentStore();
+  const addEvent = useEventStore((s) => s.addEvent);
+  const { setTerminalId, setConnected } = useTerminalStore();
+
+  const getOrCreateBuffer = useCallback(
+    (role: AgentRole) => {
+      const key = role;
+      if (!buffersRef.current.has(key)) {
+        const buffer = new OutputBuffer((chunks) => {
+          appendChunks(role, chunks);
+        }, 50);
+        buffersRef.current.set(key, buffer);
+      }
+      return buffersRef.current.get(key)!;
+    },
+    [appendChunks]
+  );
+
+  const handleMessage = useCallback(
+    (data: any) => {
+      switch (data.type) {
+        case "pong":
+          break;
+
+        case "workflow:created": {
+          const { workflowId, title } = data.payload;
+          // Destroy old buffers so stale data from a previous workflow doesn't leak
+          for (const buffer of buffersRef.current.values()) buffer.destroy();
+          buffersRef.current.clear();
+          setWorkflow(workflowId, title);
+          addEvent({ type: "info", message: `Workflow started: ${title}` });
+          break;
+        }
+
+        case "workflow:completed": {
+          setCompleted();
+          addEvent({ type: "success", message: "Workflow completed successfully" });
+          // Flush all buffers
+          for (const buffer of buffersRef.current.values()) buffer.flush();
+          break;
+        }
+
+        case "workflow:failed": {
+          const { error } = data.payload;
+          setStatus("failed");
+          addEvent({ type: "error", message: `Workflow failed: ${error}` });
+          for (const buffer of buffersRef.current.values()) buffer.flush();
+          break;
+        }
+
+        case "workflow:paused":
+          setStatus("paused");
+          addEvent({ type: "warning", message: "Workflow paused" });
+          break;
+
+        case "workflow:cancelled":
+          setStatus("cancelled");
+          addEvent({ type: "warning", message: "Workflow cancelled" });
+          for (const buffer of buffersRef.current.values()) buffer.flush();
+          // Reset any agents still running — the server won't send step:failed for cancelled agents
+          for (const role of AGENT_ORDER) {
+            if (useAgentStore.getState().agents[role].status === "running") {
+              setAgentFailed(role, "Cancelled");
+            }
+          }
+          break;
+
+        case "step:started": {
+          const { role } = data.payload as { role: AgentRole };
+          const stage = getStageForRole(role);
+          const currentRetry = useAgentStore.getState().agents[role].retryCount;
+          setCurrentStage(stage.index);
+          setAgentStarted(role);
+          const retryLabel = currentRetry > 0 ? ` (retry ${currentRetry})` : "";
+          addEvent({
+            type: "info",
+            role,
+            message: `${AGENT_CONFIG[role].label} agent started${retryLabel}`,
+          });
+          break;
+        }
+
+        case "step:stream": {
+          const { role, chunk } = data.payload as {
+            role: AgentRole;
+            chunk: string;
+          };
+          const buffer = getOrCreateBuffer(role);
+          buffer.push(chunk);
+          break;
+        }
+
+        case "step:completed": {
+          const { role, output, durationMs, tokensIn, tokensOut } =
+            data.payload as {
+              role: AgentRole;
+              output: string;
+              durationMs: number;
+              tokensIn?: number;
+              tokensOut?: number;
+            };
+          // Flush buffer first
+          const buffer = buffersRef.current.get(role);
+          if (buffer) buffer.flush();
+          setAgentCompleted(role, output, durationMs, tokensIn, tokensOut);
+          addEvent({
+            type: "success",
+            role,
+            message: `${AGENT_CONFIG[role].label} agent completed in ${(durationMs / 1000).toFixed(1)}s`,
+          });
+          break;
+        }
+
+        case "step:failed": {
+          const { role, error } = data.payload as {
+            role: AgentRole;
+            error: string;
+          };
+          const buffer = buffersRef.current.get(role);
+          if (buffer) buffer.flush();
+          setAgentFailed(role, error);
+          addEvent({
+            type: "error",
+            role,
+            message: `${AGENT_CONFIG[role].label} agent failed: ${error}`,
+          });
+          break;
+        }
+
+        case "step:activity": {
+          const { role, activity } = data.payload as {
+            role: AgentRole;
+            activity: import("@/lib/workflow/types").AgentActivity;
+          };
+          setAgentActivity(role, activity);
+          break;
+        }
+
+        case "step:retry": {
+          const { role, attempt, maxRetries, reason } = data.payload as {
+            role: AgentRole;
+            attempt: number;
+            maxRetries: number;
+            reason: string;
+          };
+          setAgentRetry(role, attempt);
+          addEvent({
+            type: "warning",
+            role,
+            message: `${AGENT_CONFIG[role].label} agent retrying (${attempt}/${maxRetries}): ${reason}`,
+          });
+          break;
+        }
+
+        case "terminal:created": {
+          const { terminalId } = data.payload;
+          setTerminalId(terminalId);
+          break;
+        }
+
+        case "terminal:output": {
+          const terminalId = data.payload.terminalId;
+          const output = data.payload.data;
+          window.dispatchEvent(
+            new CustomEvent("terminal:output", {
+              detail: { terminalId, data: output },
+            })
+          );
+          break;
+        }
+
+        case "terminal:error": {
+          const { error } = data.payload;
+          window.dispatchEvent(
+            new CustomEvent("terminal:error", {
+              detail: { error },
+            })
+          );
+          break;
+        }
+
+        case "terminal:closed":
+          setTerminalId(null);
+          break;
+      }
+    },
+    [
+      setWorkflow,
+      setStatus,
+      setCurrentStage,
+      setCompleted,
+      setAgentStarted,
+      setAgentCompleted,
+      setAgentFailed,
+      setAgentActivity,
+      setAgentRetry,
+      addEvent,
+      setTerminalId,
+      getOrCreateBuffer,
+    ]
+  );
+
+  const connect = useCallback(() => {
+    const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+    const url = `${protocol}//${window.location.host}/ws`;
+
+    const ws = new WebSocket(url);
+    wsRef.current = ws;
+
+    ws.onopen = () => {
+      console.log("[WS] Connected");
+      reconnectAttempt.current = 0;
+      setConnected(true);
+      addEvent({ type: "info", message: "Connected to server" });
+    };
+
+    ws.onmessage = (event) => {
+      try {
+        const data = JSON.parse(event.data);
+        handleMessage(data);
+      } catch (err) {
+        console.error("[WS] Parse error:", err);
+      }
+    };
+
+    ws.onclose = () => {
+      console.log("[WS] Disconnected");
+      setConnected(false);
+      wsRef.current = null;
+
+      // Auto-reconnect with backoff
+      const delay =
+        RECONNECT_DELAYS[
+          Math.min(reconnectAttempt.current, RECONNECT_DELAYS.length - 1)
+        ];
+      reconnectAttempt.current++;
+      reconnectTimer.current = setTimeout(connect, delay);
+    };
+
+    ws.onerror = (err) => {
+      console.error("[WS] Error:", err);
+    };
+  }, [handleMessage, setConnected, addEvent]);
+
+  const send = useCallback((message: object) => {
+    if (wsRef.current?.readyState === WebSocket.OPEN) {
+      wsRef.current.send(JSON.stringify(message));
+    }
+  }, []);
+
+  useEffect(() => {
+    connect();
+    // Ping every 30s
+    const pingInterval = setInterval(() => {
+      send({ type: "ping" });
+    }, 30000);
+
+    return () => {
+      clearInterval(pingInterval);
+      if (reconnectTimer.current) clearTimeout(reconnectTimer.current);
+      if (wsRef.current) wsRef.current.close();
+      for (const buffer of buffersRef.current.values()) buffer.destroy();
+    };
+  }, [connect, send]);
+
+  return { send, wsRef };
+}