@multiclawcli/dashboard 0.3.1 → 0.4.0

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

@@ -1,23 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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

@@ -1,31 +0,0 @@
-@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

@@ -1,6 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1,132 +0,0 @@
-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

@@ -1,56 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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

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

package/tailwind.config.js

@@ -1,50 +0,0 @@
-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

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

package/tsconfig.server.json

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

package/vite.config.ts

@@ -1,25 +0,0 @@
-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"],
-  },
-})