claude-dashboard 0.1.0

package/src/components/pipeline/PipelineNode.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import type { AgentRole, StepStatus } from "@/lib/workflow/types";
+import { AGENT_CONFIG } from "@/lib/workflow/types";
+
+interface PipelineNodeProps {
+  role: AgentRole;
+  status: StepStatus;
+  isCurrent: boolean;
+}
+
+export function PipelineNode({ role, status, isCurrent }: PipelineNodeProps) {
+  const config = AGENT_CONFIG[role];
+
+  const statusStyles: Record<StepStatus, string> = {
+    pending: "border-gray-600 bg-gray-800/50 text-gray-500",
+    running:
+      "border-emerald-500 bg-emerald-500/10 text-emerald-400 shadow-lg shadow-emerald-500/20",
+    completed: "border-blue-500 bg-blue-500/10 text-blue-400",
+    failed: "border-red-500 bg-red-500/10 text-red-400",
+    skipped: "border-gray-700 bg-gray-800/30 text-gray-600",
+  };
+
+  return (
+    <div className="flex items-center gap-1">
+      <div
+        className={cn(
+          "relative px-3 py-1.5 rounded-md border text-xs font-medium transition-all duration-300",
+          statusStyles[status]
+        )}
+        style={{
+          borderColor:
+            status === "running" || status === "completed"
+              ? config.color
+              : undefined,
+        }}
+      >
+        {status === "running" && (
+          <span className="absolute -top-0.5 -right-0.5 flex h-2 w-2">
+            <span
+              className="animate-ping absolute inline-flex h-full w-full rounded-full opacity-75"
+              style={{ backgroundColor: config.color }}
+            />
+            <span
+              className="relative inline-flex rounded-full h-2 w-2"
+              style={{ backgroundColor: config.color }}
+            />
+          </span>
+        )}
+        {config.label}
+      </div>
+    </div>
+  );
+}

package/src/components/terminal/TerminalPanel.tsx

@@ -0,0 +1,138 @@
+"use client";
+
+import { useCallback, useRef, useState, useEffect } from "react";
+import dynamic from "next/dynamic";
+import { useTerminalStore } from "@/stores/terminalStore";
+import type { XTermHandle } from "./XTermRenderer";
+
+const XTermRenderer = dynamic(
+  () =>
+    import("./XTermRenderer").then((mod) => ({
+      default: mod.XTermRenderer,
+    })),
+  { ssr: false }
+);
+
+interface TerminalPanelProps {
+  send: (msg: object) => void;
+}
+
+export function TerminalPanel({ send }: TerminalPanelProps) {
+  const { terminalId, connected } = useTerminalStore();
+  const termRef = useRef<XTermHandle>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  // Track terminalId via ref to avoid listener re-registration gaps
+  const terminalIdRef = useRef<string | null>(terminalId);
+  useEffect(() => { terminalIdRef.current = terminalId; }, [terminalId]);
+
+  // Create terminal on mount
+  useEffect(() => {
+    if (connected && !terminalId) {
+      send({ type: "terminal:create", payload: { projectPath: "" } });
+    }
+  }, [connected, terminalId, send]);
+
+  // Listen for terminal output via CustomEvent — registered once, uses ref for terminalId.
+  // Accept output when terminalIdRef is still null (terminal initializing) to avoid
+  // dropping early output that arrives before the ref is synced from the store.
+  useEffect(() => {
+    const handler = (e: CustomEvent) => {
+      if (!terminalIdRef.current || e.detail.terminalId === terminalIdRef.current) {
+        termRef.current?.write(e.detail.data);
+      }
+    };
+    window.addEventListener("terminal:output" as any, handler);
+    return () => window.removeEventListener("terminal:output" as any, handler);
+  }, []);
+
+  // Listen for terminal errors via CustomEvent
+  useEffect(() => {
+    const handler = (e: CustomEvent) => {
+      setError(e.detail.error);
+    };
+    window.addEventListener("terminal:error" as any, handler);
+    return () => window.removeEventListener("terminal:error" as any, handler);
+  }, []);
+
+  const handleData = useCallback(
+    (data: string) => {
+      if (terminalId) {
+        send({
+          type: "terminal:input",
+          payload: { terminalId, data },
+        });
+      }
+    },
+    [terminalId, send]
+  );
+
+  const pendingSizeRef = useRef<{ cols: number; rows: number } | null>(null);
+
+  const handleResize = useCallback(
+    (cols: number, rows: number) => {
+      if (terminalId) {
+        send({
+          type: "terminal:resize",
+          payload: { terminalId, cols, rows },
+        });
+        pendingSizeRef.current = null;
+      } else {
+        // terminalId not yet available — stash for later
+        pendingSizeRef.current = { cols, rows };
+      }
+    },
+    [terminalId, send]
+  );
+
+  // Flush pending resize once terminalId becomes available
+  useEffect(() => {
+    if (terminalId && pendingSizeRef.current) {
+      send({
+        type: "terminal:resize",
+        payload: { terminalId, ...pendingSizeRef.current },
+      });
+      pendingSizeRef.current = null;
+    }
+  }, [terminalId, send]);
+
+  if (!connected) {
+    return (
+      <div className="flex items-center justify-center h-full text-xs text-muted-foreground">
+        Connecting to server...
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="h-full flex flex-col">
+        <div className="flex items-center justify-between px-3 py-1.5 border-b border-border">
+          <span className="text-xs font-medium">Terminal</span>
+          <span className="text-[10px] text-red-400">Error</span>
+        </div>
+        <div className="flex-1 flex items-center justify-center px-4">
+          <p className="text-xs text-red-400 text-center">{error}</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="h-full flex flex-col">
+      <div className="flex items-center justify-between px-3 py-1.5 border-b border-border">
+        <span className="text-xs font-medium">Terminal</span>
+        <span className="text-[10px] text-muted-foreground">
+          {terminalId ? "Connected" : "Initializing..."}
+        </span>
+      </div>
+      <div className="flex-1 min-h-0">
+        <XTermRenderer
+          ref={termRef}
+          onData={handleData}
+          onResize={handleResize}
+        />
+      </div>
+    </div>
+  );
+}

package/src/components/terminal/XTermRenderer.tsx

@@ -0,0 +1,129 @@
+"use client";
+
+import { useEffect, useRef, useImperativeHandle, forwardRef } from "react";
+
+export interface XTermHandle {
+  write: (data: string) => void;
+  clear: () => void;
+}
+
+interface XTermRendererProps {
+  onData: (data: string) => void;
+  onResize: (cols: number, rows: number) => void;
+}
+
+let Terminal: any;
+let FitAddon: any;
+
+export const XTermRenderer = forwardRef<XTermHandle, XTermRendererProps>(
+  function XTermRenderer({ onData, onResize }, ref) {
+    const containerRef = useRef<HTMLDivElement>(null);
+    const termRef = useRef<any>(null);
+    const fitAddonRef = useRef<any>(null);
+    const initialized = useRef(false);
+
+    // Refs to hold latest callbacks — avoids stale closures in xterm event handlers
+    const onDataRef = useRef(onData);
+    const onResizeRef = useRef(onResize);
+    useEffect(() => { onDataRef.current = onData; }, [onData]);
+    useEffect(() => { onResizeRef.current = onResize; }, [onResize]);
+
+    const pendingWrites = useRef<string[]>([]);
+
+    useImperativeHandle(ref, () => ({
+      write(data: string) {
+        if (termRef.current) {
+          termRef.current.write(data);
+        } else {
+          pendingWrites.current.push(data);
+        }
+      },
+      clear() {
+        termRef.current?.clear();
+      },
+    }));
+
+    const cleanupRef = useRef<(() => void) | null>(null);
+
+    useEffect(() => {
+      if (initialized.current || !containerRef.current) return;
+      initialized.current = true;
+      let disposed = false;
+
+      (async () => {
+        // Dynamic imports (including xterm.css for proper rendering)
+        const [xtermModule, fitModule] = await Promise.all([
+          import("xterm"),
+          import("xterm-addon-fit"),
+          import("xterm/css/xterm.css"),
+        ]);
+
+        if (disposed) return;
+
+        Terminal = xtermModule.Terminal;
+        FitAddon = fitModule.FitAddon;
+
+        const term = new Terminal({
+          theme: {
+            background: "#080808",
+            foreground: "#e0e0e0",
+            cursor: "#e0e0e0",
+            selectionBackground: "#ffffff30",
+          },
+          fontSize: 13,
+          fontFamily: '"SF Mono", Menlo, Monaco, "Courier New", monospace',
+          cursorBlink: true,
+          allowProposedApi: true,
+        });
+
+        const fitAddon = new FitAddon();
+        term.loadAddon(fitAddon);
+
+        term.open(containerRef.current!);
+        fitAddon.fit();
+
+        term.onData((data: string) => onDataRef.current(data));
+        term.onResize(({ cols, rows }: { cols: number; rows: number }) => {
+          onResizeRef.current(cols, rows);
+        });
+
+        termRef.current = term;
+        fitAddonRef.current = fitAddon;
+
+        // Flush any writes that arrived before xterm was ready
+        for (const data of pendingWrites.current) {
+          term.write(data);
+        }
+        pendingWrites.current = [];
+
+        // Initial resize report
+        onResizeRef.current(term.cols, term.rows);
+
+        // ResizeObserver for container
+        const observer = new ResizeObserver(() => {
+          fitAddon.fit();
+        });
+        observer.observe(containerRef.current!);
+
+        cleanupRef.current = () => {
+          observer.disconnect();
+          term.dispose();
+        };
+      })();
+
+      return () => {
+        disposed = true;
+        initialized.current = false;  // Allow re-init after HMR
+        termRef.current = null;       // Ensure writes go to pendingWrites until re-init
+        cleanupRef.current?.();
+      };
+    }, []);
+
+    return (
+      <div
+        ref={containerRef}
+        className="terminal-container w-full h-full bg-[#080808]"
+      />
+    );
+  }
+);

package/src/components/ui/badge.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+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 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+);
+
+export 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/components/ui/button.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+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 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 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background 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",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, ...props }, ref) => {
+    return (
+      <button
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };

package/src/components/ui/card.tsx

@@ -0,0 +1,80 @@
+"use client";
+
+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 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-6", className)}
+    {...props}
+  />
+));
+CardHeader.displayName = "CardHeader";
+
+const CardTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn(
+      "text-2xl font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+));
+CardTitle.displayName = "CardTitle";
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+CardDescription.displayName = "CardDescription";
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+));
+CardContent.displayName = "CardContent";
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+));
+CardFooter.displayName = "CardFooter";
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };

package/src/components/ui/input.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Input.displayName = "Input";
+
+export { Input };

package/src/components/ui/scroll-area.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export interface ScrollAreaProps extends React.HTMLAttributes<HTMLDivElement> {
+  orientation?: "vertical" | "horizontal" | "both";
+}
+
+const ScrollArea = React.forwardRef<HTMLDivElement, ScrollAreaProps>(
+  ({ className, orientation = "vertical", children, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "relative",
+          orientation === "vertical" && "overflow-y-auto overflow-x-hidden",
+          orientation === "horizontal" && "overflow-x-auto overflow-y-hidden",
+          orientation === "both" && "overflow-auto",
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+ScrollArea.displayName = "ScrollArea";
+
+const ScrollBar = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & {
+    orientation?: "vertical" | "horizontal";
+  }
+>(({ className, orientation = "vertical", ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" &&
+        "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      orientation === "horizontal" &&
+        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      className
+    )}
+    {...props}
+  />
+));
+ScrollBar.displayName = "ScrollBar";
+
+export { ScrollArea, ScrollBar };

package/src/components/ui/separator.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export interface SeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
+  orientation?: "horizontal" | "vertical";
+  decorative?: boolean;
+}
+
+const Separator = React.forwardRef<HTMLDivElement, SeparatorProps>(
+  (
+    { className, orientation = "horizontal", decorative = true, ...props },
+    ref
+  ) => (
+    <div
+      ref={ref}
+      role={decorative ? "none" : "separator"}
+      aria-orientation={decorative ? undefined : orientation}
+      className={cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className
+      )}
+      {...props}
+    />
+  )
+);
+Separator.displayName = "Separator";
+
+export { Separator };

package/src/components/ui/textarea.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Textarea.displayName = "Textarea";
+
+export { Textarea };