openclaw-node-harness 2.0.0

package/mission-control/src/app/globals.css

@@ -0,0 +1,67 @@
+@import "tailwindcss";
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-border: var(--border);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-destructive: var(--destructive);
+  --color-success: var(--success);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+}
+
+:root {
+  --background: #09090b;
+  --foreground: #fafafa;
+  --card: #18181b;
+  --card-foreground: #fafafa;
+  --border: #27272a;
+  --muted: #27272a;
+  --muted-foreground: #a1a1aa;
+  --accent: #27272a;
+  --accent-foreground: #fafafa;
+  --primary: #6d28d9;
+  --primary-foreground: #fafafa;
+  --destructive: #ef4444;
+  --success: #22c55e;
+}
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+  font-family: var(--font-sans), system-ui, sans-serif;
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background: #3f3f46;
+  border-radius: 3px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: #52525b;
+}
+
+/* Daedalus active task glow */
+@keyframes daedalus-glow {
+  from {
+    box-shadow: 0 0 8px rgba(239, 68, 68, 0.2), 0 0 3px rgba(239, 68, 68, 0.15);
+  }
+  to {
+    box-shadow: 0 0 16px rgba(239, 68, 68, 0.4), 0 0 6px rgba(239, 68, 68, 0.3);
+  }
+}

package/mission-control/src/app/graph/page.tsx

@@ -0,0 +1,352 @@
+"use client";
+
+import { useState, useEffect, useRef, useCallback, useMemo } from "react";
+import dynamic from "next/dynamic";
+
+// Dynamic import — react-force-graph-3d requires WebGL, no SSR
+const ForceGraph3D = dynamic(() => import("react-force-graph-3d"), {
+  ssr: false,
+  loading: () => (
+    <div className="h-full flex items-center justify-center text-muted-foreground text-sm">
+      Initializing 3D engine...
+    </div>
+  ),
+});
+
+// ── Types ──
+
+interface GraphNode {
+  id: number;
+  name: string;
+  type: string;
+  accessCount: number;
+  lastSeen: string;
+}
+
+interface GraphEdge {
+  id: number;
+  source: number;
+  target: number;
+  relationType: string;
+  confidence: number;
+}
+
+interface GraphStats {
+  entityCount: number;
+  relationCount: number;
+  activeRelations: number;
+  topTypes: Array<{ type: string; count: number }>;
+}
+
+// ── Color Scheme ──
+
+const TYPE_COLORS: Record<string, string> = {
+  person: "#f59e0b",
+  project: "#3b82f6",
+  contract: "#8b5cf6",
+  tool: "#10b981",
+  concept: "#ec4899",
+  file: "#6b7280",
+};
+
+const RELATION_COLORS: Record<string, string> = {
+  uses: "#60a5fa",
+  depends_on: "#f97316",
+  blocks: "#ef4444",
+  part_of: "#a78bfa",
+  owns: "#fbbf24",
+  supersedes: "#6b7280",
+  related_to: "#9ca3af",
+};
+
+// ── Component ──
+
+export default function GraphPage() {
+  const [graphData, setGraphData] = useState<{ nodes: GraphNode[]; links: GraphEdge[] } | null>(null);
+  const [stats, setStats] = useState<GraphStats | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [selectedNode, setSelectedNode] = useState<GraphNode | null>(null);
+  const [dimensions, setDimensions] = useState({ width: 800, height: 600 });
+  const containerRef = useRef<HTMLDivElement>(null);
+  const fgRef = useRef<any>(null);
+
+  // Resize observer
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+
+    const obs = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        setDimensions({
+          width: entry.contentRect.width,
+          height: entry.contentRect.height,
+        });
+      }
+    });
+    obs.observe(el);
+    return () => obs.disconnect();
+  }, []);
+
+  // Fetch data
+  useEffect(() => {
+    fetch("/api/memory/graph?format=viz")
+      .then((r) => r.json())
+      .then((data) => {
+        // react-force-graph expects { nodes, links } with source/target matching node ids
+        setGraphData({
+          nodes: data.nodes,
+          links: data.edges.map((e: GraphEdge) => ({
+            ...e,
+            source: e.source,
+            target: e.target,
+          })),
+        });
+        setStats(data.stats);
+        setLoading(false);
+      })
+      .catch((e) => {
+        setError(e.message);
+        setLoading(false);
+      });
+  }, []);
+
+  // Node click handler
+  const handleNodeClick = useCallback((node: any) => {
+    setSelectedNode(node);
+
+    // Fly camera to the clicked node
+    if (fgRef.current) {
+      const distance = 120;
+      const distRatio = 1 + distance / Math.hypot(node.x, node.y, node.z);
+      fgRef.current.cameraPosition(
+        { x: node.x * distRatio, y: node.y * distRatio, z: node.z * distRatio },
+        node,
+        1000
+      );
+    }
+  }, []);
+
+  // Node color
+  const nodeColor = useCallback((node: any) => {
+    return TYPE_COLORS[node.type] || "#6b7280";
+  }, []);
+
+  // Node size by access count
+  const nodeVal = useCallback((node: any) => {
+    return Math.max(2, Math.min(12, 2 + (node.accessCount || 0) * 0.8));
+  }, []);
+
+  // Link color
+  const linkColor = useCallback((link: any) => {
+    return RELATION_COLORS[link.relationType] || "#9ca3af";
+  }, []);
+
+  // Node label (shown on hover)
+  const nodeLabel = useCallback((node: any) => {
+    const esc = (s: string) => s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+    const name = esc(String(node.name ?? ""));
+    const type = esc(String(node.type ?? ""));
+    return `<div style="background:rgba(0,0,0,0.85);color:#fff;padding:8px 12px;border-radius:8px;font-size:12px;max-width:280px;line-height:1.4">
+      <div style="display:flex;align-items:center;gap:6px;margin-bottom:4px">
+        <span style="width:8px;height:8px;border-radius:50%;background:${TYPE_COLORS[node.type] || "#6b7280"};display:inline-block"></span>
+        <strong>${name}</strong>
+        <span style="color:#9ca3af">(${type})</span>
+      </div>
+      <div style="color:#9ca3af">
+        Access count: ${node.accessCount || 0}<br/>
+        Last seen: ${node.lastSeen?.split("T")[0] || "unknown"}
+      </div>
+    </div>`;
+  }, []);
+
+  // Link label (shown on hover)
+  const linkLabel = useCallback((link: any) => {
+    const esc = (s: string) => s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+    const srcName = esc(String(typeof link.source === "object" ? link.source.name : link.source));
+    const tgtName = esc(String(typeof link.target === "object" ? link.target.name : link.target));
+    const relType = esc(String(link.relationType ?? ""));
+    return `<div style="background:rgba(0,0,0,0.85);color:#fff;padding:6px 10px;border-radius:6px;font-size:11px">
+      ${srcName} → <strong>${relType}</strong> → ${tgtName}
+    </div>`;
+  }, []);
+
+  // Connected nodes for selected node
+  const connectedInfo = useMemo(() => {
+    if (!selectedNode || !graphData) return [];
+    return graphData.links
+      .filter((l: any) => {
+        const sid = typeof l.source === "object" ? l.source.id : l.source;
+        const tid = typeof l.target === "object" ? l.target.id : l.target;
+        return sid === selectedNode.id || tid === selectedNode.id;
+      })
+      .map((l: any) => {
+        const sid = typeof l.source === "object" ? l.source.id : l.source;
+        const tid = typeof l.target === "object" ? l.target.id : l.target;
+        const otherId = sid === selectedNode.id ? tid : sid;
+        const otherNode = graphData.nodes.find((n) => n.id === otherId);
+        const direction = sid === selectedNode.id ? "out" : "in";
+        return {
+          name: otherNode?.name || `#${otherId}`,
+          type: otherNode?.type || "unknown",
+          relationType: l.relationType,
+          direction,
+        };
+      });
+  }, [selectedNode, graphData]);
+
+  if (loading) {
+    return (
+      <div className="h-full flex items-center justify-center text-muted-foreground text-sm">
+        Loading graph...
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="h-full flex items-center justify-center text-red-400 text-sm">
+        Error: {error}
+      </div>
+    );
+  }
+
+  return (
+    <div className="h-full flex flex-col">
+      <header className="border-b border-border px-6 py-3 flex items-center justify-between shrink-0">
+        <div className="flex items-center gap-3">
+          <h1 className="text-xl font-semibold text-foreground">Knowledge Graph</h1>
+          <span className="text-[10px] text-muted-foreground bg-accent px-2 py-0.5 rounded">3D</span>
+        </div>
+        {stats && (
+          <div className="flex items-center gap-4 text-xs text-muted-foreground">
+            <span>{stats.entityCount} entities</span>
+            <span>{stats.activeRelations} relations</span>
+            {stats.topTypes.map((t) => (
+              <span key={t.type} className="flex items-center gap-1">
+                <span
+                  className="inline-block w-2 h-2 rounded-full"
+                  style={{ backgroundColor: TYPE_COLORS[t.type] || "#6b7280" }}
+                />
+                {t.type}: {t.count}
+              </span>
+            ))}
+          </div>
+        )}
+      </header>
+
+      <div className="flex-1 overflow-hidden relative">
+        <div ref={containerRef} className="w-full h-full bg-[#0a0a0f]">
+          {graphData && (
+            <ForceGraph3D
+              ref={fgRef}
+              width={dimensions.width}
+              height={dimensions.height}
+              graphData={graphData}
+              nodeId="id"
+              nodeLabel={nodeLabel}
+              nodeColor={nodeColor}
+              nodeVal={nodeVal}
+              nodeOpacity={0.9}
+              nodeResolution={16}
+              linkLabel={linkLabel}
+              linkColor={linkColor}
+              linkWidth={1.5}
+              linkOpacity={0.4}
+              linkDirectionalArrowLength={4}
+              linkDirectionalArrowRelPos={1}
+              linkDirectionalArrowColor={linkColor}
+              linkDirectionalParticles={1}
+              linkDirectionalParticleWidth={1.5}
+              linkDirectionalParticleSpeed={0.005}
+              onNodeClick={handleNodeClick}
+              onBackgroundClick={() => setSelectedNode(null)}
+              backgroundColor="#0a0a0f"
+              showNavInfo={false}
+              enableNodeDrag={true}
+              cooldownTicks={100}
+              warmupTicks={50}
+            />
+          )}
+        </div>
+
+        {/* Legend overlay */}
+        <div className="absolute top-4 right-4 bg-background/80 backdrop-blur border border-border rounded-lg px-3 py-2 text-[10px] space-y-1 pointer-events-none">
+          <div className="text-[9px] text-muted-foreground font-semibold uppercase tracking-wider mb-1">Entity Types</div>
+          {Object.entries(TYPE_COLORS).map(([type, color]) => (
+            <div key={type} className="flex items-center gap-1.5">
+              <span
+                className="inline-block w-2 h-2 rounded-full"
+                style={{ backgroundColor: color }}
+              />
+              <span className="text-muted-foreground">{type}</span>
+            </div>
+          ))}
+          <div className="border-t border-border my-1.5 pt-1.5">
+            <div className="text-[9px] text-muted-foreground font-semibold uppercase tracking-wider mb-1">Relations</div>
+            {Object.entries(RELATION_COLORS).map(([type, color]) => (
+              <div key={type} className="flex items-center gap-1.5">
+                <span
+                  className="inline-block w-3 h-0.5"
+                  style={{ backgroundColor: color }}
+                />
+                <span className="text-muted-foreground">{type}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Controls hint */}
+        <div className="absolute bottom-4 left-4 text-[10px] text-muted-foreground/50 pointer-events-none">
+          Orbit: drag | Zoom: scroll | Pan: right-drag | Click node: focus
+        </div>
+
+        {/* Selected node detail panel */}
+        {selectedNode && (
+          <div className="absolute bottom-4 right-4 bg-background/90 backdrop-blur border border-border rounded-lg px-4 py-3 text-xs shadow-lg w-72">
+            <div className="flex items-center justify-between mb-2">
+              <div className="flex items-center gap-2">
+                <span
+                  className="inline-block w-3 h-3 rounded-full"
+                  style={{ backgroundColor: TYPE_COLORS[selectedNode.type] || "#6b7280" }}
+                />
+                <span className="font-semibold text-foreground text-sm">{selectedNode.name}</span>
+              </div>
+              <button
+                onClick={() => setSelectedNode(null)}
+                className="text-muted-foreground hover:text-foreground text-lg leading-none"
+              >
+                x
+              </button>
+            </div>
+            <div className="text-muted-foreground space-y-1 mb-2">
+              <p>Type: {selectedNode.type}</p>
+              <p>Access count: {selectedNode.accessCount}</p>
+              <p>Last seen: {selectedNode.lastSeen?.split("T")[0] || "unknown"}</p>
+            </div>
+            {connectedInfo.length > 0 && (
+              <div className="border-t border-border pt-2">
+                <p className="text-[10px] text-muted-foreground font-semibold uppercase tracking-wider mb-1">
+                  Relations ({connectedInfo.length})
+                </p>
+                <div className="space-y-0.5 max-h-32 overflow-y-auto">
+                  {connectedInfo.map((c, i) => (
+                    <div key={i} className="flex items-center gap-1 text-muted-foreground">
+                      <span className="text-[10px]">{c.direction === "out" ? "→" : "←"}</span>
+                      <span
+                        className="inline-block w-1.5 h-1.5 rounded-full"
+                        style={{ backgroundColor: RELATION_COLORS[c.relationType] || "#9ca3af" }}
+                      />
+                      <span>{c.relationType}</span>
+                      <span className="text-foreground font-medium">{c.name}</span>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/mission-control/src/app/layout.tsx

@@ -0,0 +1,35 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+import { ResizableLayout } from "@/components/layout/resizable-layout";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "Mission Control",
+  description: "Daedalus operational dashboard",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en" className="dark">
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+      >
+        <ResizableLayout>{children}</ResizableLayout>
+      </body>
+    </html>
+  );
+}

package/mission-control/src/app/live/page.tsx

@@ -0,0 +1,232 @@
+"use client";
+
+import { useState, useRef, useEffect, useCallback } from "react";
+import { MessageCircle, ChevronDown } from "lucide-react";
+import { ChatBubble } from "@/components/live/chat-bubble";
+import { AudioSpectrum } from "@/components/live/audio-spectrum";
+import { ChatInput } from "@/components/live/chat-input";
+import { useSpeechPipeline } from "@/lib/speech/use-speech-pipeline";
+
+interface ChatMessage {
+  id: string;
+  role: "user" | "agent";
+  content: string;
+  timestamp: Date;
+}
+
+type TtsProvider = "google" | "edge";
+
+const PROVIDER_LABELS: Record<TtsProvider, string> = {
+  google: "Gemini",
+  edge: "Edge",
+};
+
+export default function LivePage() {
+  const [messages, setMessages] = useState<ChatMessage[]>([
+    {
+      id: "welcome",
+      role: "agent",
+      content:
+        "Live Chat ready. TTS is active — agent responses will be spoken aloud. Type a message to test.",
+      timestamp: new Date(),
+    },
+  ]);
+  const [provider, setProvider] = useState<TtsProvider>("edge");
+  const [ttsEnabled, setTtsEnabled] = useState(true);
+  const [providerOpen, setProviderOpen] = useState(false);
+  const [agentTyping, setAgentTyping] = useState(false);
+  const [tone, setTone] = useState("");
+
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  const { speak, stop, isSpeaking, isLoading, analyser } = useSpeechPipeline({
+    provider,
+    tone: tone || undefined,
+    enabled: ttsEnabled,
+  });
+
+  // Auto-scroll to bottom on new messages
+  useEffect(() => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    }
+  }, [messages, agentTyping]);
+
+  const addMessage = useCallback(
+    (role: "user" | "agent", content: string): ChatMessage => {
+      const msg: ChatMessage = {
+        id: `${Date.now()}-${Math.random().toString(36).slice(2, 6)}`,
+        role,
+        content,
+        timestamp: new Date(),
+      };
+      setMessages((prev) => [...prev, msg]);
+      return msg;
+    },
+    []
+  );
+
+  const handleSend = useCallback(
+    async (text: string) => {
+      addMessage("user", text);
+
+      // Simulate agent response (placeholder — replace with real agent API later)
+      setAgentTyping(true);
+
+      // Mock delay
+      await new Promise((r) => setTimeout(r, 800 + Math.random() * 1200));
+
+      const agentResponse = generateMockResponse(text);
+      addMessage("agent", agentResponse);
+      setAgentTyping(false);
+
+      // Speak the response if TTS is enabled
+      if (ttsEnabled) {
+        speak(agentResponse);
+      }
+    },
+    [addMessage, ttsEnabled, speak]
+  );
+
+  const handleToggleTts = useCallback(() => {
+    if (ttsEnabled) {
+      stop();
+    }
+    setTtsEnabled((prev) => !prev);
+  }, [ttsEnabled, stop]);
+
+  return (
+    <div className="h-full flex flex-col">
+      {/* Header */}
+      <div className="flex items-center justify-between px-6 py-4 border-b border-border">
+        <div className="flex items-center gap-2">
+          <MessageCircle className="w-5 h-5 text-primary" />
+          <h1 className="text-lg font-semibold text-foreground">Live Chat</h1>
+          {(isSpeaking || isLoading) && (
+            <span className="ml-2 text-xs text-primary animate-pulse">
+              {isLoading ? "synthesizing..." : "speaking..."}
+            </span>
+          )}
+        </div>
+
+        <div className="flex items-center gap-2">
+        {/* Tone directive (Gemini only) */}
+        {provider === "google" && (
+          <input
+            type="text"
+            value={tone}
+            onChange={(e) => setTone(e.target.value)}
+            placeholder="Tone: e.g. asmr whisper deep"
+            className="px-2.5 py-1.5 text-xs rounded-md border border-border bg-card text-foreground placeholder:text-muted-foreground/50 w-48 focus:outline-none focus:ring-1 focus:ring-primary"
+          />
+        )}
+
+        {/* Provider selector */}
+        <div className="relative">
+          <button
+            onClick={() => setProviderOpen((p) => !p)}
+            className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-md border border-border bg-card text-muted-foreground hover:text-foreground hover:bg-accent transition-colors"
+          >
+            TTS: {PROVIDER_LABELS[provider]}
+            <ChevronDown className="w-3 h-3" />
+          </button>
+          {providerOpen && (
+            <>
+              <div
+                className="fixed inset-0 z-10"
+                onClick={() => setProviderOpen(false)}
+              />
+              <div className="absolute right-0 top-full mt-1 z-20 bg-card border border-border rounded-md shadow-lg py-1 min-w-[120px]">
+                {(["google", "edge"] as TtsProvider[]).map((p) => (
+                  <button
+                    key={p}
+                    onClick={() => {
+                      setProvider(p);
+                      setProviderOpen(false);
+                    }}
+                    className={`w-full text-left px-3 py-1.5 text-xs hover:bg-accent transition-colors ${
+                      p === provider
+                        ? "text-primary font-medium"
+                        : "text-muted-foreground"
+                    }`}
+                  >
+                    {PROVIDER_LABELS[p]}
+                    {p === "google" && (
+                      <span className="ml-1 text-muted-foreground/50">
+                        (Flash)
+                      </span>
+                    )}
+                    {p === "edge" && (
+                      <span className="ml-1 text-muted-foreground/50">
+                        (free)
+                      </span>
+                    )}
+                  </button>
+                ))}
+              </div>
+            </>
+          )}
+        </div>
+        </div>
+      </div>
+
+      {/* Audio spectrum */}
+      <div className="border-b border-border bg-background/50">
+        <AudioSpectrum
+          analyser={analyser}
+          isSpeaking={isSpeaking}
+          height={48}
+          barCount={32}
+        />
+      </div>
+
+      {/* Messages area */}
+      <div ref={scrollRef} className="flex-1 overflow-y-auto px-6 py-4">
+        {messages.map((msg) => (
+          <ChatBubble
+            key={msg.id}
+            role={msg.role}
+            content={msg.content}
+            timestamp={msg.timestamp}
+          />
+        ))}
+        {agentTyping && (
+          <ChatBubble
+            role="agent"
+            content=""
+            timestamp={new Date()}
+            streaming
+          />
+        )}
+      </div>
+
+      {/* Input */}
+      <ChatInput
+        onSend={handleSend}
+        ttsEnabled={ttsEnabled}
+        onToggleTts={handleToggleTts}
+        disabled={agentTyping}
+      />
+    </div>
+  );
+}
+
+// Placeholder mock responses — replace with real agent integration
+function generateMockResponse(input: string): string {
+  const lower = input.toLowerCase();
+
+  if (lower.includes("status") || lower.includes("how are")) {
+    return "All systems nominal. Mission Control is running, pipeline tasks are queued for Month 1 kickoff on March 2nd. No blockers detected.";
+  }
+  if (lower.includes("task") || lower.includes("what")) {
+    return "Current active pipeline: Arcane Rapture — 478 tasks across 12 months. Phase 0 (Foundation & Infrastructure) starts March 2nd with smart contracts, Unity scaffold, and lore bible.";
+  }
+  if (lower.includes("hello") || lower.includes("hey") || lower.includes("hi")) {
+    return "Hey. What do you need?";
+  }
+  if (lower.includes("test")) {
+    return "TTS test successful. You should be hearing this through your selected provider. If not, check the browser console for errors.";
+  }
+
+  return `Received: "${input}". This is a placeholder response — real agent integration will pipe through the OpenClaw API. For now, the TTS pipeline is what we're testing.`;
+}