@multiclawcli/dashboard 0.0.0-stage → 0.1.0

package/dist/server/DashboardServer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DashboardServer.js","sourceRoot":"","sources":["../../src/server/DashboardServer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,IAAI,MAAM,MAAM,CAAA;AAC5B,OAAO,KAAK,IAAI,MAAM,MAAM,CAAA;AAC5B,OAAO,KAAK,EAAE,MAAM,IAAI,CAAA;AACxB,OAAO,EAAE,eAAe,EAAE,MAAM,IAAI,CAAA;AAEpC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAO7C,MAAM,OAAO,eAAe;IAK1B,YAAY,OAA+B;QACzC,IAAI,CAAC,IAAI,GAAG,OAAO,CAAC,IAAI,CAAA;QAExB,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAA;QAElF,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,YAAY,CAAC,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE;YAC3C,IAAI,QAAQ,GAAG,IAAI,CAAC,IAAI,CACtB,UAAU,EACV,GAAG,CAAC,GAAG,KAAK,GAAG,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,CAAC,GAAI,CAC1C,CAAA;YACD,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC;gBAAE,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,YAAY,CAAC,CAAA;YAE5E,MAAM,GAAG,GAAG,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAA;YAClC,MAAM,IAAI,GAA2B;gBACnC,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,iBAAiB;gBAC9C,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,eAAe;aAC5C,CAAA;YACD,MAAM,MAAM,GAAG,EAAE,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAA;YAC5C,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,GAAG,EAAE,GAAG,GAAG,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,EAAE,CAAA,CAAC,CAAC,CAAC,CAAA;YAC3D,GAAG,CAAC,SAAS,CAAC,GAAG,EAAE,EAAE,cAAc,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,YAAY,EAAE,CAAC,CAAA;YACjE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;QAClB,CAAC,CAAC,CAAA;QAEF,MAAM,GAAG,GAAG,IAAI,eAAe,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,CAAA;QACxD,IAAI,CAAC,GAAG,GAAG,IAAI,YAAY,CAAC,GAAG,EAAE,OAAO,CAAC,kBAAkB,CAAC,CAAA;IAC9D,CAAC;IAED,KAAK;QACH,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,EAAE,GAAG,EAAE,CAAC,OAAO,EAAE,CAAC,CAAC,CAAA;IACjF,CAAC;IAED,YAAY,CAAC,QAAkB;QAC7B,QAAQ,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAA;IAClD,CAAC;IAED,IAAI;QACF,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,CAAA;IACrB,CAAC;CACF"}

package/dist/server/WebSocketHub.d.ts

@@ -0,0 +1,9 @@
+import { WebSocketServer } from "ws";
+import type { MultiClawEvent } from "@multiclawcli/core";
+export declare class WebSocketHub {
+    private wss;
+    private clients;
+    private history;
+    constructor(wss: WebSocketServer, acceptClientEvents?: boolean);
+    broadcast(event: MultiClawEvent): void;
+}

package/dist/server/WebSocketHub.js

@@ -0,0 +1,31 @@
+export class WebSocketHub {
+    constructor(wss, acceptClientEvents = false) {
+        this.clients = new Set();
+        this.history = [];
+        this.wss = wss;
+        this.wss.on("connection", (ws) => {
+            this.clients.add(ws);
+            for (const e of this.history)
+                ws.send(JSON.stringify(e));
+            if (acceptClientEvents) {
+                ws.on("message", (data) => {
+                    try {
+                        const event = JSON.parse(data.toString());
+                        this.broadcast(event);
+                    }
+                    catch { /* ignore */ }
+                });
+            }
+            ws.on("close", () => this.clients.delete(ws));
+        });
+    }
+    broadcast(event) {
+        this.history.push(event);
+        const msg = JSON.stringify(event);
+        for (const ws of this.clients) {
+            if (ws.readyState === ws.OPEN)
+                ws.send(msg);
+        }
+    }
+}
+//# sourceMappingURL=WebSocketHub.js.map

package/dist/server/WebSocketHub.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WebSocketHub.js","sourceRoot":"","sources":["../../src/server/WebSocketHub.ts"],"names":[],"mappings":"AAGA,MAAM,OAAO,YAAY;IAKvB,YAAY,GAAoB,EAAE,kBAAkB,GAAG,KAAK;QAHpD,YAAO,GAAG,IAAI,GAAG,EAAa,CAAA;QAC9B,YAAO,GAAqB,EAAE,CAAA;QAGpC,IAAI,CAAC,GAAG,GAAG,GAAG,CAAA;QACd,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,YAAY,EAAE,CAAC,EAAE,EAAE,EAAE;YAC/B,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAA;YACpB,KAAK,MAAM,CAAC,IAAI,IAAI,CAAC,OAAO;gBAAE,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAA;YAExD,IAAI,kBAAkB,EAAE,CAAC;gBACvB,EAAE,CAAC,EAAE,CAAC,SAAS,EAAE,CAAC,IAAI,EAAE,EAAE;oBACxB,IAAI,CAAC;wBACH,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAmB,CAAA;wBAC3D,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAA;oBACvB,CAAC;oBAAC,MAAM,CAAC,CAAC,YAAY,CAAC,CAAC;gBAC1B,CAAC,CAAC,CAAA;YACJ,CAAC;YAED,EAAE,CAAC,EAAE,CAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,CAAA;QAC/C,CAAC,CAAC,CAAA;IACJ,CAAC;IAED,SAAS,CAAC,KAAqB;QAC7B,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QACxB,MAAM,GAAG,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAA;QACjC,KAAK,MAAM,EAAE,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YAC9B,IAAI,EAAE,CAAC,UAAU,KAAK,EAAE,CAAC,IAAI;gBAAE,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;QAC7C,CAAC;IACH,CAAC;CACF"}

package/dist/server/index.d.ts

@@ -0,0 +1,2 @@
+export { DashboardServer } from "./DashboardServer";
+export type { DashboardServerOptions } from "./DashboardServer";

package/dist/server/index.js

@@ -0,0 +1,2 @@
+export { DashboardServer } from "./DashboardServer";
+//# sourceMappingURL=index.js.map

package/dist/server/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/server/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA"}

package/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="zh">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>MultiClaw Dashboard</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/client/main.tsx"></script>
+  </body>
+</html>

package/package.json

@@ -1,6 +1,44 @@
 {
   "name": "@multiclawcli/dashboard",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.0",
+  "type": "module",
+  "exports": {
+    "./server": {
+      "types": "./dist/server/index.d.ts",
+      "default": "./dist/server/index.js"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "ws": "^8.16.0",
+    "zustand": "^4.5.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.0",
+    "tailwind-merge": "^2.2.0",
+    "lucide-react": "^0.400.0",
+    "@radix-ui/react-scroll-area": "^1.0.5",
+    "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-separator": "^1.0.3",
+    "@multiclawcli/core": "0.1.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.2.0",
+    "vite": "^5.1.0",
+    "tailwindcss": "^3.4.0",
+    "tailwindcss-animate": "^1.0.7",
+    "autoprefixer": "^10.4.0",
+    "postcss": "^8.4.0",
+    "typescript": "^5.4.0",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@types/ws": "^8.5.0"
+  },
+  "scripts": {
+    "build": "vite build && tsc -p tsconfig.server.json",
+    "dev:client": "vite"
+  }
 }

package/postcss.config.js

@@ -0,0 +1,3 @@
+export default {
+  plugins: { tailwindcss: {}, autoprefixer: {} },
+}

package/src/client/App.tsx

@@ -0,0 +1,62 @@
+import React, { useState, useEffect } from "react"
+import { Badge } from "@/components/ui/badge"
+import { Separator } from "@/components/ui/separator"
+import { useWebSocket } from "./hooks/useWebSocket"
+import { useOrchestrationStore } from "./store/useOrchestrationStore"
+import { StageList } from "./components/StageList"
+import { LogPanel } from "./components/LogPanel"
+
+export function App() {
+  const apply = useOrchestrationStore((s) => s.apply)
+  const { name, running, success, totalDuration } = useOrchestrationStore()
+  const [selected, setSelected] = useState<string | null>(null)
+  const [elapsed, setElapsed] = useState(0)
+
+  useWebSocket(apply)
+
+  useEffect(() => {
+    if (!running) { setElapsed(0); return }
+    const start = Date.now()
+    const id = setInterval(() => setElapsed(Date.now() - start), 1000)
+    return () => clearInterval(id)
+  }, [running])
+
+  const statusBadge = running
+    ? <Badge className="bg-green-500 hover:bg-green-500/80">运行中</Badge>
+    : success === undefined
+      ? <Badge variant="secondary">等待中</Badge>
+      : success
+        ? <Badge className="bg-green-500 hover:bg-green-500/80">完成</Badge>
+        : <Badge variant="destructive">存在失败</Badge>
+
+  const displayDuration = totalDuration != null
+    ? totalDuration
+    : running ? elapsed : null
+
+  return (
+    <div className="h-screen flex flex-col bg-background">
+      <header className="flex items-center justify-between px-6 py-3 border-b">
+        <h1 className="text-base font-semibold">
+          MultiClaw{name && <span className="text-muted-foreground font-normal"> · {name}</span>}
+        </h1>
+        <div className="flex items-center gap-3 text-sm">
+          {displayDuration != null && (
+            <span className="text-muted-foreground">
+              ⏱ {(displayDuration / 1000).toFixed(1)}s
+            </span>
+          )}
+          {statusBadge}
+        </div>
+      </header>
+      <main className="flex-1 flex gap-4 p-4 overflow-hidden">
+        <div className="w-80 overflow-auto">
+          <StageList onSelect={setSelected} selectedId={selected} />
+        </div>
+        <Separator orientation="vertical" />
+        <div className="flex-1 overflow-hidden">
+          <LogPanel agentId={selected} />
+        </div>
+      </main>
+    </div>
+  )
+}

package/src/client/components/AgentCard.tsx

@@ -0,0 +1,50 @@
+import React from "react"
+import { Card, CardContent } from "@/components/ui/card"
+import { Badge } from "@/components/ui/badge"
+import { cn } from "@/lib/utils"
+
+type AgentStatus = "pending" | "running" | "retrying" | "success" | "failed" | "skipped"
+
+const STATUS_CONFIG: Record<AgentStatus, {
+  label: string
+  variant: "secondary" | "default" | "destructive" | "outline"
+  className?: string
+}> = {
+  pending:   { label: "等待中", variant: "secondary" },
+  running:   { label: "运行中", variant: "default", className: "animate-pulse" },
+  retrying:  { label: "重试中", variant: "default", className: "animate-pulse bg-yellow-500 hover:bg-yellow-500/80" },
+  success:   { label: "完成",   variant: "default",  className: "bg-green-500 hover:bg-green-500/80" },
+  failed:    { label: "失败",   variant: "destructive" },
+  skipped:   { label: "跳过",   variant: "outline" },
+}
+
+export function AgentCard({ agent, onClick, selected }: {
+  agent: { name: string; icon?: string; status: string; duration?: number }
+  onClick: () => void
+  selected?: boolean
+}) {
+  const cfg = STATUS_CONFIG[agent.status as AgentStatus] ?? STATUS_CONFIG.pending
+  return (
+    <Card
+      onClick={onClick}
+      className={cn("cursor-pointer hover:bg-accent transition-colors", selected && "bg-accent ring-1 ring-ring")}
+    >
+      <CardContent className="flex items-center justify-between p-3">
+        <div className="flex items-center gap-2">
+          <span>{agent.icon ?? "▶"}</span>
+          <span className="font-medium text-sm">{agent.name}</span>
+        </div>
+        <div className="flex items-center gap-2">
+          {agent.duration != null && (
+            <span className="text-xs text-muted-foreground">
+              {(agent.duration / 1000).toFixed(1)}s
+            </span>
+          )}
+          <Badge variant={cfg.variant} className={cn(cfg.className)}>
+            {cfg.label}
+          </Badge>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}

package/src/client/components/LogPanel.tsx

@@ -0,0 +1,41 @@
+import React, { useEffect, useRef } from "react"
+import { useOrchestrationStore } from "../store/useOrchestrationStore"
+
+export function LogPanel({ agentId }: { agentId: string | null }) {
+  const agents = useOrchestrationStore((s) => s.agents)
+  const scrollRef = useRef<HTMLDivElement>(null)
+  const userScrolled = useRef(false)
+  const logs = agentId ? agents[agentId]?.logs ?? "" : ""
+  const agentName = agentId ? agents[agentId]?.name : null
+
+  const handleScroll = () => {
+    const el = scrollRef.current
+    if (!el) return
+    userScrolled.current = el.scrollHeight - el.scrollTop - el.clientHeight > 50
+  }
+
+  useEffect(() => {
+    if (userScrolled.current) return
+    const el = scrollRef.current
+    if (el) el.scrollTop = el.scrollHeight
+  }, [logs])
+
+  return (
+    <div
+      ref={scrollRef}
+      onScroll={handleScroll}
+      className="h-full overflow-auto rounded-lg border bg-zinc-950 text-zinc-100"
+    >
+      <div className="p-4 font-mono text-sm">
+        {agentId ? (
+          <>
+            <p className="text-zinc-400 mb-3 text-xs">📄 {agentName} 日志</p>
+            <pre className="whitespace-pre-wrap leading-relaxed">{logs}</pre>
+          </>
+        ) : (
+          <p className="text-zinc-500">← 选择一个 Agent 查看实时日志</p>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/client/components/StageList.tsx

@@ -0,0 +1,30 @@
+import React from "react"
+import { Separator } from "@/components/ui/separator"
+import { useOrchestrationStore } from "../store/useOrchestrationStore"
+import { AgentCard } from "./AgentCard"
+
+export function StageList({ onSelect, selectedId }: { onSelect: (agentId: string) => void; selectedId?: string | null }) {
+  const { stages, agents } = useOrchestrationStore()
+  return (
+    <div className="space-y-4">
+      {stages.map((stage, idx) => (
+        <div key={stage.stageIndex}>
+          {idx > 0 && <Separator className="my-3" />}
+          <p className="text-xs font-semibold text-muted-foreground mb-2 uppercase tracking-wide">
+            Stage {stage.stageIndex + 1}
+          </p>
+          <div className="space-y-2">
+            {stage.agents.map((a) => (
+              <AgentCard
+                key={a.id}
+                agent={agents[a.id] ?? { name: a.name, icon: a.icon, status: "pending" }}
+                onClick={() => onSelect(a.id)}
+                selected={selectedId === a.id}
+              />
+            ))}
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}

package/src/client/components/ui/badge.tsx

@@ -0,0 +1,28 @@
+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-md 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 shadow hover:bg-primary/80",
+        secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive: "border-transparent bg-destructive text-destructive-foreground shadow 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/client/components/ui/button.tsx

@@ -0,0 +1,43 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+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 transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      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" },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }

package/src/client/components/ui/card.tsx

@@ -0,0 +1,22 @@
+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-xl border bg-card text-card-foreground shadow", className)}
+      {...props}
+    />
+  )
+)
+Card.displayName = "Card"
+
+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"
+
+export { Card, CardContent }

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

@@ -0,0 +1,43 @@
+import * as React from "react"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+import { cn } from "@/lib/utils"
+
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    className={cn("relative overflow-hidden", className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+))
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = "vertical", ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    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}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+))
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
+
+export { ScrollArea, ScrollBar }

package/src/client/components/ui/separator.tsx

@@ -0,0 +1,23 @@
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+import { cn } from "@/lib/utils"
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => (
+  <SeparatorPrimitive.Root
+    ref={ref}
+    decorative={decorative}
+    orientation={orientation}
+    className={cn(
+      "shrink-0 bg-border",
+      orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+      className
+    )}
+    {...props}
+  />
+))
+Separator.displayName = SeparatorPrimitive.Root.displayName
+
+export { Separator }

package/src/client/hooks/useWebSocket.ts

@@ -0,0 +1,33 @@
+import { useEffect, useRef } from "react"
+import type { MultiClawEvent } from "@multiclawcli/core"
+
+export function useWebSocket(onEvent: (e: MultiClawEvent) => void): void {
+  const ref = useRef(onEvent)
+  ref.current = onEvent
+  // 编排完成后停止重连，避免 server 已关闭时持续刷错误
+  const doneRef = useRef(false)
+
+  useEffect(() => {
+    const wsUrl = `ws://${location.host}`
+    let ws: WebSocket
+    let retry: ReturnType<typeof setTimeout>
+
+    const connect = () => {
+      if (doneRef.current) return
+      ws = new WebSocket(wsUrl)
+      ws.onmessage = (msg) => {
+        try {
+          const event = JSON.parse(msg.data) as MultiClawEvent
+          if (event.type === "orchestration:complete") doneRef.current = true
+          ref.current(event)
+        } catch {}
+      }
+      ws.onclose = () => {
+        if (!doneRef.current) retry = setTimeout(connect, 1500)
+      }
+    }
+    connect()
+
+    return () => { clearTimeout(retry); ws?.close() }
+  }, [])
+}

package/src/client/index.css

@@ -0,0 +1,31 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --primary: 221.2 83.2% 53.3%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 221.2 83.2% 53.3%;
+    --radius: 0.5rem;
+  }
+}
+
+@layer base {
+  * { @apply border-border; }
+  body { @apply bg-background text-foreground; }
+}

package/src/client/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/src/client/main.tsx

@@ -0,0 +1,8 @@
+import React from "react"
+import ReactDOM from "react-dom/client"
+import { App } from "./App"
+import "./index.css"
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <React.StrictMode><App /></React.StrictMode>
+)

package/src/client/store/useOrchestrationStore.ts

@@ -0,0 +1,79 @@
+import { create } from "zustand"
+import type { MultiClawEvent, StageInfo, AgentStatus } from "@multiclawcli/core"
+
+const stripAnsi = (str: string) => str.replace(/\x1b\[[0-9;]*[a-zA-Z]/g, "")
+
+interface AgentState {
+  id: string
+  name: string
+  icon?: string
+  status: AgentStatus
+  duration?: number
+  logs: string
+}
+
+interface OrchestrationState {
+  name: string
+  running: boolean
+  success?: boolean
+  totalDuration?: number
+  stages: StageInfo[]
+  agents: Record<string, AgentState>
+  apply: (e: MultiClawEvent) => void
+}
+
+export const useOrchestrationStore = create<OrchestrationState>((set) => ({
+  name: "",
+  running: false,
+  stages: [],
+  agents: {},
+  apply: (e) => set((state) => {
+    const agents = { ...state.agents }
+    switch (e.type) {
+      case "orchestration:start": {
+        const map: Record<string, AgentState> = {}
+        for (const stage of e.payload.stages) {
+          for (const a of stage.agents) {
+            map[a.id] = { id: a.id, name: a.name, icon: a.icon, status: "pending", logs: "" }
+          }
+        }
+        return { name: e.payload.name, running: true, stages: e.payload.stages, agents: map }
+      }
+      case "agent:start":
+        agents[e.payload.agentId] = { ...agents[e.payload.agentId], status: "running" }
+        return { agents }
+      case "agent:output":
+        agents[e.payload.agentId] = {
+          ...agents[e.payload.agentId],
+          logs: (agents[e.payload.agentId]?.logs ?? "") + stripAnsi(e.payload.chunk),
+        }
+        return { agents }
+      case "agent:retrying":
+        agents[e.payload.agentId] = {
+          ...agents[e.payload.agentId],
+          status: "retrying",
+          logs: (agents[e.payload.agentId]?.logs ?? "") + `\n🔄 第 ${e.payload.attempt} 次重试 (共 ${e.payload.maxAttempts} 次)...\n`,
+        }
+        return { agents }
+      case "agent:complete":
+        agents[e.payload.agentId] = {
+          ...agents[e.payload.agentId], status: "success", duration: e.payload.duration,
+        }
+        return { agents }
+      case "agent:failed":
+        agents[e.payload.agentId] = {
+          ...agents[e.payload.agentId], status: "failed", duration: e.payload.duration,
+        }
+        return { agents }
+      case "agent:skipped":
+        agents[e.payload.agentId] = {
+          ...agents[e.payload.agentId], status: "skipped",
+        }
+        return { agents }
+      case "orchestration:complete":
+        return { running: false, success: e.payload.success, totalDuration: e.payload.totalDuration }
+      default:
+        return {}
+    }
+  }),
+}))