@multiclawcli/dashboard 0.0.0-stage → 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 PengQi Shi
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,16 @@
-# Temporary Holding Version
+# @multiclawcli/dashboard
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+[![npm](https://img.shields.io/npm/v/@multiclawcli/dashboard)](https://www.npmjs.com/package/@multiclawcli/dashboard)
+[![GitHub](https://img.shields.io/badge/GitHub-shipengqi%2Fmulticlaw-blue?logo=github)](https://github.com/shipengqi/multiclaw)
+
+Real-time dashboard for [multiclaw](https://github.com/shipengqi/multiclaw) — the multi-agent orchestration CLI.
+
+This package provides the web UI and WebSocket server used internally by the `multiclaw` CLI. It is not intended for direct use; install [`multiclaw`](https://www.npmjs.com/package/multiclaw) instead.
+
+## Documentation
+
+Full documentation is available in the [main repository](https://github.com/shipengqi/multiclaw).
+
+## License
+
+[MIT](https://github.com/shipengqi/multiclaw/blob/main/LICENSE)

package/components.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/client/index.css",
+    "baseColor": "slate",
+    "cssVariables": true
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}

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,53 @@
 {
   "name": "@multiclawcli/dashboard",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.2.0",
+  "type": "module",
+  "exports": {
+    "./server": {
+      "types": "./dist/server/index.d.ts",
+      "default": "./dist/server/index.js"
+    }
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/shipengqi/multiclaw.git",
+    "directory": "packages/dashboard"
+  },
+  "homepage": "https://github.com/shipengqi/multiclaw#readme",
+  "bugs": {
+    "url": "https://github.com/shipengqi/multiclaw/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@multiclawcli/core": "0.2.0",
+    "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"
+  },
+  "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,96 @@
+import React, { useState, useEffect, useRef } from "react"
+import { Badge } from "@/components/ui/badge"
+import { useWebSocket } from "./hooks/useWebSocket"
+import { useOrchestrationStore } from "./store/useOrchestrationStore"
+import { PipelineBar } from "./components/PipelineBar"
+import { LogPanel } from "./components/LogPanel"
+
+export function App() {
+  const apply = useOrchestrationStore((s) => s.apply)
+  const { name, requirement, running, success, totalDuration, stages, agents, preflightAgentIds, preflightBuffer } =
+    useOrchestrationStore()
+  const [selected, setSelected] = useState<string | null>(null)
+  const [elapsed, setElapsed] = useState(0)
+  const autoSelectedRef = useRef(false)
+
+  useWebSocket(apply)
+
+  useEffect(() => {
+    if (!running) { setElapsed(0); return }
+    const start = Date.now()
+    const id = setInterval(() => setElapsed(Date.now() - start), 1000)
+    return () => clearInterval(id)
+  }, [running])
+
+  // Auto-select leader the moment it appears as running
+  useEffect(() => {
+    if (autoSelectedRef.current) return
+    for (const [id, agent] of Object.entries(preflightBuffer)) {
+      if (agent.status === "running") {
+        setSelected(id)
+        autoSelectedRef.current = true
+        return
+      }
+    }
+  }, [preflightBuffer])
+
+  // Reset auto-select flag at the start of each new run
+  useEffect(() => {
+    if (running) autoSelectedRef.current = false
+  }, [running])
+
+  const leaderIds = preflightAgentIds.length > 0 ? preflightAgentIds : Object.keys(preflightBuffer)
+  const leaderAgents = preflightAgentIds.length > 0 ? agents : preflightBuffer
+
+  const hasPipelineBar = leaderIds.length > 0 || stages.length > 0
+
+  const statusBadge = running
+    ? <Badge className="bg-green-500 hover:bg-green-500/80">Running</Badge>
+    : success === undefined
+      ? <Badge variant="secondary">Waiting</Badge>
+      : success
+        ? <Badge className="bg-green-500 hover:bg-green-500/80">Done</Badge>
+        : <Badge variant="destructive">Failed</Badge>
+
+  const displayDuration = totalDuration != null ? totalDuration : running ? elapsed : null
+
+  return (
+    <div className="h-screen flex flex-col bg-background">
+      <header className="flex flex-col items-start justify-between px-6 py-3 border-b shrink-0 gap-2">
+        <div className="flex w-full items-center justify-between">
+          <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>
+        </div>
+        {requirement && (
+          <p className="text-sm text-muted-foreground line-clamp-2">
+            {requirement}
+          </p>
+        )}
+      </header>
+
+      {hasPipelineBar && (
+        <div className="border-b px-4 py-3 shrink-0 overflow-x-auto">
+          <PipelineBar
+            leaderIds={leaderIds}
+            leaderAgents={leaderAgents}
+            stages={stages}
+            agents={agents}
+            onSelect={setSelected}
+            selectedId={selected}
+          />
+        </div>
+      )}
+
+      <div className="flex-1 overflow-hidden p-4">
+        <LogPanel agentId={selected} />
+      </div>
+    </div>
+  )
+}

package/src/client/components/AgentCard.tsx

@@ -0,0 +1,60 @@
+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: "pending",  variant: "secondary" },
+  running:   { label: "running",  variant: "default", className: "animate-pulse" },
+  retrying:  { label: "retrying", variant: "default", className: "animate-pulse bg-yellow-500 hover:bg-yellow-500/80" },
+  success:   { label: "done",     variant: "default",  className: "bg-green-500 hover:bg-green-500/80" },
+  failed:    { label: "failed",   variant: "destructive" },
+  skipped:   { label: "skipped",  variant: "outline" },
+}
+
+export function AgentCard({ agent, onClick, selected }: {
+  agent: { name: string; icon?: string; status: string; duration?: number; taskTitle?: string; model?: string }
+  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 flex-col gap-2 p-3">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <span>{agent.icon ?? "-"}</span>
+            <div className="flex flex-col gap-0.5">
+              <span className="font-medium text-sm">{agent.name}</span>
+              {agent.taskTitle && (
+                <span className="text-xs text-muted-foreground">{agent.taskTitle}</span>
+              )}
+            </div>
+          </div>
+          <Badge variant={cfg.variant} className={cn(cfg.className)}>
+            {cfg.label}
+          </Badge>
+        </div>
+        <div className="flex items-center justify-between text-xs">
+          {agent.duration != null && (
+            <span className="text-muted-foreground">
+              {(agent.duration / 1000).toFixed(1)}s
+            </span>
+          )}
+          {agent.model && (
+            <span className="text-muted-foreground">{agent.model}</span>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  )
+}

package/src/client/components/LogPanel.tsx

@@ -0,0 +1,43 @@
+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 preflightBuffer = useOrchestrationStore((s) => s.preflightBuffer)
+  const scrollRef = useRef<HTMLDivElement>(null)
+  const userScrolled = useRef(false)
+  const agentState = agentId ? (agents[agentId] ?? preflightBuffer[agentId]) : undefined
+  const logs = agentState?.logs ?? ""
+  const agentName = agentState?.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} logs</p>
+            <pre className="whitespace-pre-wrap leading-relaxed">{logs}</pre>
+          </>
+        ) : (
+          <p className="text-zinc-500">Select an agent to view live logs</p>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/client/components/PipelineBar.tsx

@@ -0,0 +1,234 @@
+import React from "react"
+import { cn } from "@/lib/utils"
+import type { StageInfo } from "@multiclawcli/core"
+
+type Status = "pending" | "running" | "retrying" | "success" | "failed" | "skipped"
+
+const LEADER_BAR: Record<Status, string> = {
+  pending:  "bg-muted-foreground/20",
+  running:  "bg-violet-500 animate-pulse",
+  retrying: "bg-yellow-500 animate-pulse",
+  success:  "bg-violet-400",
+  failed:   "bg-destructive",
+  skipped:  "bg-muted-foreground/20",
+}
+
+const STAGE_BAR: Record<Status, string> = {
+  pending:  "bg-muted-foreground/20",
+  running:  "bg-blue-500 animate-pulse",
+  retrying: "bg-yellow-500 animate-pulse",
+  success:  "bg-green-500",
+  failed:   "bg-destructive",
+  skipped:  "bg-muted-foreground/20",
+}
+
+const NAME_COLOR: Record<Status, string> = {
+  pending:  "text-muted-foreground",
+  running:  "text-foreground",
+  retrying: "text-yellow-600",
+  success:  "text-foreground",
+  failed:   "text-destructive",
+  skipped:  "text-muted-foreground/50",
+}
+
+const STATUS_LABEL: Record<Status, string> = {
+  pending:  "pending",
+  running:  "running",
+  retrying: "retrying",
+  success:  "",
+  failed:   "failed",
+  skipped:  "skipped",
+}
+
+const STATUS_LABEL_COLOR: Record<Status, string> = {
+  pending:  "text-muted-foreground/50",
+  running:  "text-blue-500",
+  retrying: "text-yellow-500",
+  success:  "text-green-500",
+  failed:   "text-destructive",
+  skipped:  "text-muted-foreground/40",
+}
+
+const LEADER_LABEL_COLOR: Record<Status, string> = {
+  ...STATUS_LABEL_COLOR,
+  running: "text-violet-500",
+  success: "text-violet-400",
+}
+
+function stageAggregate(stage: StageInfo, agents: Record<string, { status: string }>): Status {
+  const ss = stage.agents.map((a) => (agents[a.id]?.status ?? "pending") as Status)
+  if (ss.some((s) => s === "failed")) return "failed"
+  if (ss.some((s) => s === "running" || s === "retrying")) return "running"
+  if (ss.every((s) => s === "success")) return "success"
+  if (ss.every((s) => s === "skipped")) return "skipped"
+  return "pending"
+}
+
+interface AgentInfo {
+  id: string
+  name: string
+  icon?: string
+  model?: string
+  taskTitle?: string
+  status: string
+  duration?: number
+}
+
+function AgentRow({
+  agent,
+  isSelected,
+  onClick,
+  labelColor,
+}: {
+  agent: AgentInfo
+  isSelected: boolean
+  onClick: () => void
+  labelColor: Record<Status, string>
+}) {
+  const status = agent.status as Status
+  return (
+    <button
+      onClick={onClick}
+      className={cn(
+        "flex items-center gap-1.5 w-full px-2 py-1.5 text-left transition-colors rounded",
+        "hover:bg-accent",
+        isSelected && "bg-accent",
+      )}
+    >
+      <span className="text-sm leading-none shrink-0">{agent.icon ?? "-"}</span>
+      <div className="flex-1 min-w-0">
+        <div className={cn("text-[11px] font-medium truncate", NAME_COLOR[status])}>
+          {agent.name}
+        </div>
+        {agent.taskTitle && (
+          <div className="text-[8px] text-muted-foreground truncate">
+            {agent.taskTitle}
+          </div>
+        )}
+        <div className="flex items-center justify-between gap-2 text-[9px]">
+          <div className={cn(labelColor[status])}>
+            {agent.duration != null
+              ? `${(agent.duration / 1000).toFixed(1)}s`
+              : STATUS_LABEL[status]}
+          </div>
+          {agent.model && (
+            <span className="text-muted-foreground text-[8px] truncate">
+              {agent.model}
+            </span>
+          )}
+        </div>
+      </div>
+    </button>
+  )
+}
+
+export function PipelineBar({
+  leaderIds,
+  leaderAgents,
+  stages,
+  agents,
+  onSelect,
+  selectedId,
+}: {
+  leaderIds: string[]
+  leaderAgents: Record<string, AgentInfo>
+  stages: StageInfo[]
+  agents: Record<string, AgentInfo>
+  onSelect: (id: string) => void
+  selectedId?: string | null
+}) {
+  const hasLeader = leaderIds.length > 0
+  const hasPipeline = stages.length > 0
+  const leaderRunning = leaderIds.some((id) => leaderAgents[id]?.status === "running")
+  if (!hasLeader && !hasPipeline) return null
+
+  return (
+    <div className="flex items-stretch gap-0 overflow-x-auto">
+      {/* Leader card */}
+      {hasLeader && leaderIds.map((id) => {
+        const agent = leaderAgents[id] ?? { id, name: id, status: "pending" }
+        const status = agent.status as Status
+        return (
+          <div key={id} className="shrink-0 w-[130px] rounded-md border bg-card overflow-hidden">
+            <div className={cn("h-1 w-full", LEADER_BAR[status])} />
+            <div className="px-2 pt-1 pb-0.5">
+              <span className="text-[9px] uppercase tracking-wide text-muted-foreground/70 font-semibold">
+                Leader
+              </span>
+            </div>
+            <AgentRow
+              agent={agent}
+              isSelected={selectedId === id}
+              onClick={() => onSelect(id)}
+              labelColor={LEADER_LABEL_COLOR}
+            />
+          </div>
+        )
+      })}
+
+      {/* Connector: "generating" dots while leader is running, "generated" arrow once pipeline is ready */}
+      {hasLeader && (
+        <div className="flex flex-col items-center justify-center shrink-0 px-2 gap-0.5 self-center">
+          {hasPipeline ? (
+            <>
+              <span className="text-[8px] uppercase tracking-wide text-muted-foreground/50">generated</span>
+              <div className="flex items-center">
+                <div className="w-5 h-px border-t border-dashed border-muted-foreground/30" />
+                <svg width="5" height="7" viewBox="0 0 5 7" className="text-muted-foreground/40 shrink-0">
+                  <path d="M0 0 L5 3.5 L0 7 Z" fill="currentColor" />
+                </svg>
+              </div>
+            </>
+          ) : leaderRunning ? (
+            <>
+              <span className="text-[8px] text-violet-400 animate-pulse">generating</span>
+              <div className="flex items-center gap-0.5">
+                {[0, 1, 2].map((i) => (
+                  <span
+                    key={i}
+                    className="w-1 h-1 rounded-full bg-violet-400 animate-bounce"
+                    style={{ animationDelay: `${i * 150}ms` }}
+                  />
+                ))}
+              </div>
+            </>
+          ) : null}
+        </div>
+      )}
+
+      {/* Pipeline stage cards */}
+      {hasPipeline && stages.map((stage, idx) => {
+        const ss = stageAggregate(stage, agents)
+        return (
+          <React.Fragment key={stage.stageIndex}>
+            {idx > 0 && (
+              <div className="flex items-center self-center shrink-0">
+                <div className="w-3 h-px bg-border" />
+                <svg width="5" height="7" viewBox="0 0 5 7" className="text-muted-foreground/40 shrink-0">
+                  <path d="M0 0 L5 3.5 L0 7 Z" fill="currentColor" />
+                </svg>
+              </div>
+            )}
+            <div className="shrink-0 w-[130px] rounded-md border bg-card overflow-hidden">
+              <div className={cn("h-1 w-full", STAGE_BAR[ss])} />
+              <div className="py-1">
+                {stage.agents.map((a) => {
+                  const agent = agents[a.id] ?? { id: a.id, name: a.name, icon: a.icon, status: "pending" }
+                  return (
+                    <AgentRow
+                      key={a.id}
+                      agent={agent}
+                      isSelected={selectedId === a.id}
+                      onClick={() => onSelect(a.id)}
+                      labelColor={STATUS_LABEL_COLOR}
+                    />
+                  )
+                })}
+              </div>
+            </div>
+          </React.Fragment>
+        )
+      })}
+    </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
+  // Stop reconnecting after orchestration completes to avoid errors when server has shut down
+  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,132 @@
+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
+  model?: string
+  taskTitle?: string
+  status: AgentStatus
+  duration?: number
+  logs: string
+}
+
+interface OrchestrationState {
+  name: string
+  requirement?: string
+  running: boolean
+  success?: boolean
+  totalDuration?: number
+  stages: StageInfo[]
+  agents: Record<string, AgentState>
+  // Agents that completed before orchestration:start (e.g. leader)
+  preflightBuffer: Record<string, AgentState>
+  preflightAgentIds: string[]
+  apply: (e: MultiClawEvent) => void
+}
+
+export const useOrchestrationStore = create<OrchestrationState>((set) => ({
+  name: "",
+  requirement: undefined,
+  running: false,
+  stages: [],
+  agents: {},
+  preflightBuffer: {},
+  preflightAgentIds: [],
+  apply: (e) => set((state) => {
+    switch (e.type) {
+      case "orchestration:start": {
+        // Move pre-flight agents (e.g. leader) into the main agents map
+        const preflightAgentIds = Object.keys(state.preflightBuffer)
+        const map: Record<string, AgentState> = { ...state.preflightBuffer }
+        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, model: a.model, taskTitle: a.taskTitle, status: "pending", logs: "" }
+          }
+        }
+        return {
+          name: e.payload.name, requirement: e.payload.requirement, running: true,
+          stages: e.payload.stages, agents: map,
+          preflightBuffer: {}, preflightAgentIds,
+        }
+      }
+      case "agent:start": {
+        const agentId = e.payload.agentId
+        // If already a known pipeline agent, update in place
+        if (agentId in state.agents) {
+          return { agents: { ...state.agents, [agentId]: { ...state.agents[agentId], status: "running" } } }
+        }
+        // Otherwise buffer as pre-flight (will be merged at orchestration:start)
+        const existing = state.preflightBuffer[agentId]
+        return {
+          preflightBuffer: {
+            ...state.preflightBuffer,
+            [agentId]: existing
+              ? { ...existing, status: "running" }
+              : { id: agentId, name: e.payload.agentName, icon: e.payload.icon, model: e.payload.model, taskTitle: e.payload.taskTitle, status: "running", logs: "" },
+          },
+        }
+      }
+      case "agent:output": {
+        const { agentId, chunk } = e.payload
+        const text = stripAnsi(chunk)
+        if (agentId in state.agents) {
+          const a = state.agents[agentId]
+          return { agents: { ...state.agents, [agentId]: { ...a, logs: a.logs + text } } }
+        }
+        if (agentId in state.preflightBuffer) {
+          const a = state.preflightBuffer[agentId]
+          return { preflightBuffer: { ...state.preflightBuffer, [agentId]: { ...a, logs: a.logs + text } } }
+        }
+        return {}
+      }
+      case "agent:retrying": {
+        const { agentId, attempt, maxAttempts } = e.payload
+        const msg = `\n[retry] attempt ${attempt} of ${maxAttempts}...\n`
+        if (agentId in state.agents) {
+          const a = state.agents[agentId]
+          return { agents: { ...state.agents, [agentId]: { ...a, status: "retrying", logs: a.logs + msg } } }
+        }
+        if (agentId in state.preflightBuffer) {
+          const a = state.preflightBuffer[agentId]
+          return { preflightBuffer: { ...state.preflightBuffer, [agentId]: { ...a, status: "retrying", logs: a.logs + msg } } }
+        }
+        return {}
+      }
+      case "agent:complete": {
+        const { agentId, duration } = e.payload
+        if (agentId in state.agents) {
+          return { agents: { ...state.agents, [agentId]: { ...state.agents[agentId], status: "success", duration } } }
+        }
+        if (agentId in state.preflightBuffer) {
+          return { preflightBuffer: { ...state.preflightBuffer, [agentId]: { ...state.preflightBuffer[agentId], status: "success", duration } } }
+        }
+        return {}
+      }
+      case "agent:failed": {
+        const { agentId, duration } = e.payload
+        if (agentId in state.agents) {
+          return { agents: { ...state.agents, [agentId]: { ...state.agents[agentId], status: "failed", duration } } }
+        }
+        if (agentId in state.preflightBuffer) {
+          return { preflightBuffer: { ...state.preflightBuffer, [agentId]: { ...state.preflightBuffer[agentId], status: "failed", duration } } }
+        }
+        return {}
+      }
+      case "agent:skipped": {
+        const { agentId } = e.payload
+        if (agentId in state.agents) {
+          return { agents: { ...state.agents, [agentId]: { ...state.agents[agentId], status: "skipped" } } }
+        }
+        return {}
+      }
+      case "orchestration:complete":
+        return { running: false, success: e.payload.success, totalDuration: e.payload.totalDuration }
+      default:
+        return {}
+    }
+  }),
+}))

package/src/server/DashboardServer.ts

@@ -0,0 +1,56 @@
+import * as http from "http"
+import * as path from "path"
+import * as fs from "fs"
+import { WebSocketServer } from "ws"
+import type { EventBus } from "@multiclawcli/core"
+import { WebSocketHub } from "./WebSocketHub"
+
+export interface DashboardServerOptions {
+  port: number
+  acceptClientEvents?: boolean
+}
+
+export class DashboardServer {
+  private server: http.Server
+  private hub: WebSocketHub
+  private port: number
+
+  constructor(options: DashboardServerOptions) {
+    this.port = options.port
+
+    const clientDist = path.resolve(new URL(import.meta.url).pathname, "../../client")
+
+    this.server = http.createServer((req, res) => {
+      let filePath = path.join(
+        clientDist,
+        req.url === "/" ? "index.html" : req.url!
+      )
+      if (!fs.existsSync(filePath)) filePath = path.join(clientDist, "index.html")
+
+      const ext = path.extname(filePath)
+      const mime: Record<string, string> = {
+        ".html": "text/html", ".js": "text/javascript",
+        ".css": "text/css", ".svg": "image/svg+xml",
+      }
+      const stream = fs.createReadStream(filePath)
+      stream.on("error", () => { res.writeHead(404); res.end() })
+      res.writeHead(200, { "Content-Type": mime[ext] ?? "text/plain" })
+      stream.pipe(res)
+    })
+
+    const wss = new WebSocketServer({ server: this.server })
+    this.hub = new WebSocketHub(wss, options.acceptClientEvents)
+  }
+
+  start(): Promise<void> {
+    return new Promise((resolve) => this.server.listen(this.port, () => resolve()))
+  }
+
+  bindEventBus(eventBus: EventBus): void {
+    eventBus.subscribe((e) => this.hub.broadcast(e))
+  }
+
+  stop(): void {
+    this.server.close()
+  }
+}

package/src/server/WebSocketHub.ts

@@ -0,0 +1,35 @@
+import { WebSocketServer, WebSocket } from "ws"
+import type { MultiClawEvent } from "@multiclawcli/core"
+
+export class WebSocketHub {
+  private wss: WebSocketServer
+  private clients = new Set<WebSocket>()
+  private history: MultiClawEvent[] = []
+
+  constructor(wss: WebSocketServer, acceptClientEvents = false) {
+    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()) as MultiClawEvent
+            this.broadcast(event)
+          } catch { /* ignore */ }
+        })
+      }
+
+      ws.on("close", () => this.clients.delete(ws))
+    })
+  }
+
+  broadcast(event: MultiClawEvent): void {
+    this.history.push(event)
+    const msg = JSON.stringify(event)
+    for (const ws of this.clients) {
+      if (ws.readyState === ws.OPEN) ws.send(msg)
+    }
+  }
+}

package/src/server/index.ts

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

package/tailwind.config.js

@@ -0,0 +1,50 @@
+import tailwindAnimate from "tailwindcss-animate"
+
+export default {
+  content: ["./src/client/**/*.{ts,tsx,html}", "./index.html"],
+  theme: {
+    extend: {
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+      keyframes: {
+        "pulse-fast": { "0%, 100%": { opacity: "1" }, "50%": { opacity: ".5" } },
+      },
+      animation: { "pulse-fast": "pulse-fast 1s ease-in-out infinite" },
+    },
+  },
+  plugins: [tailwindAnimate],
+}

package/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "lib": ["ES2021", "DOM"],
+    "jsx": "react-jsx",
+    "noEmit": true,
+    "paths": {
+      "@/*": ["./src/client/*"]
+    }
+  },
+  "include": ["src/client"]
+}

package/tsconfig.server.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "dist/server",
+    "rootDir": "src/server",
+    "lib": ["ES2021"]
+  },
+  "include": ["src/server"]
+}

package/vite.config.ts

@@ -0,0 +1,25 @@
+import { defineConfig } from "vite"
+import react from "@vitejs/plugin-react"
+import * as path from "path"
+
+export default defineConfig({
+  plugins: [react()],
+  root: ".",
+  define: {
+    // ws 等 Node.js 包引用了 global，浏览器端需要映射到 globalThis
+    global: "globalThis",
+  },
+  build: {
+    outDir: "dist/client",
+    emptyOutDir: true,
+  },
+  resolve: {
+    alias: {
+      "@multiclawcli/core": path.resolve(__dirname, "../core/src"),
+      "@": path.resolve(__dirname, "./src/client"),
+    },
+  },
+  optimizeDeps: {
+    exclude: ["ws", "child_process", "fs", "path"],
+  },
+})