@multiclawcli/dashboard 0.1.0 → 0.3.0

package/README.md

@@ -0,0 +1,16 @@
+# @multiclawcli/dashboard
+
+[![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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiclawcli/dashboard",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "type": "module",
   "exports": {
     "./server": {
@@ -8,10 +8,20 @@
       "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.3.0",
     "ws": "^8.16.0",
     "zustand": "^4.5.0",
     "react": "^18.2.0",
@@ -22,8 +32,7 @@
     "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"
+    "@radix-ui/react-separator": "^1.0.3"
   },
   "devDependencies": {
     "@vitejs/plugin-react": "^4.2.0",

package/src/client/App.tsx

@@ -1,16 +1,17 @@
-import React, { useState, useEffect } from "react"
+import React, { useState, useEffect, useRef } 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 { PipelineBar } from "./components/PipelineBar"
 import { LogPanel } from "./components/LogPanel"
 
 export function App() {
   const apply = useOrchestrationStore((s) => s.apply)
-  const { name, running, success, totalDuration } = useOrchestrationStore()
+  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)
 
@@ -21,42 +22,75 @@ export function App() {
     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">运行中</Badge>
+    ? <Badge className="bg-green-500 hover:bg-green-500/80">Running</Badge>
     : success === undefined
-      ? <Badge variant="secondary">等待中</Badge>
+      ? <Badge variant="secondary">Waiting</Badge>
       : success
-        ? <Badge className="bg-green-500 hover:bg-green-500/80">完成</Badge>
-        : <Badge variant="destructive">存在失败</Badge>
+        ? <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
+  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}
+      <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>
-      <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} />
+
+      {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>
-      </main>
+      )}
+
+      <div className="flex-1 overflow-hidden p-4">
+        <LogPanel agentId={selected} />
+      </div>
     </div>
   )
 }

package/src/client/components/AgentCard.tsx

@@ -10,16 +10,16 @@ const STATUS_CONFIG: Record<AgentStatus, {
   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" },
+  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 }
+  agent: { name: string; icon?: string; status: string; duration?: number; taskTitle?: string; model?: string }
   onClick: () => void
   selected?: boolean
 }) {
@@ -29,20 +29,30 @@ export function AgentCard({ agent, onClick, selected }: {
       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>
+      <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 gap-2">
+        <div className="flex items-center justify-between text-xs">
           {agent.duration != null && (
-            <span className="text-xs text-muted-foreground">
+            <span className="text-muted-foreground">
               {(agent.duration / 1000).toFixed(1)}s
             </span>
           )}
-          <Badge variant={cfg.variant} className={cn(cfg.className)}>
-            {cfg.label}
-          </Badge>
+          {agent.model && (
+            <span className="text-muted-foreground">{agent.model}</span>
+          )}
         </div>
       </CardContent>
     </Card>

package/src/client/components/LogPanel.tsx

@@ -3,10 +3,12 @@ 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 logs = agentId ? agents[agentId]?.logs ?? "" : ""
-  const agentName = agentId ? agents[agentId]?.name : null
+  const agentState = agentId ? (agents[agentId] ?? preflightBuffer[agentId]) : undefined
+  const logs = agentState?.logs ?? ""
+  const agentName = agentState?.name ?? null
 
   const handleScroll = () => {
     const el = scrollRef.current
@@ -29,11 +31,11 @@ export function LogPanel({ agentId }: { agentId: string | null }) {
       <div className="p-4 font-mono text-sm">
         {agentId ? (
           <>
-            <p className="text-zinc-400 mb-3 text-xs">📄 {agentName} 日志</p>
+            <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">← 选择一个 Agent 查看实时日志</p>
+          <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/hooks/useWebSocket.ts

@@ -4,7 +4,7 @@ import type { MultiClawEvent } from "@multiclawcli/core"
 export function useWebSocket(onEvent: (e: MultiClawEvent) => void): void {
   const ref = useRef(onEvent)
   ref.current = onEvent
-  // 编排完成后停止重连，避免 server 已关闭时持续刷错误
+  // Stop reconnecting after orchestration completes to avoid errors when server has shut down
   const doneRef = useRef(false)
 
   useEffect(() => {