@polpo-ai/dashboard 0.1.0

package/components/dashboard/builder-chat.tsx

@@ -0,0 +1,418 @@
+"use client";
+
+/**
+ * Builder chat — the Meta Agent surface. Implements the `@lumea-labs/chat`
+ * `ChatAdapter` against the control-plane `POST /v1/builder/chat` SSE
+ * endpoint (gateway loop + data-plane tools), and renders it with the same
+ * `<Chat>` UI the playground uses. When the Meta Agent mutates an agent
+ * (create/update/delete/assign_skill), `onMutation` fires so the right pane
+ * can refresh.
+ *
+ * SSE protocol (see packages/server/src/routes/builder.ts):
+ *   event: text         data: { delta }
+ *   event: tool-call    data: { toolCallId, toolName, args }
+ *   event: tool-result  data: { toolCallId, toolName, result }
+ *   event: ask-user     data: { questions }   ← human-in-the-loop pause
+ *   event: error        data: { message }
+ *   event: done         data: {}
+ */
+
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  ChatAskUser,
+  ChatInput,
+  useChatContext,
+  type AskUserQuestion,
+  type ChatMessageData,
+  type ChatStatus,
+  type ContentPart,
+  type PendingToolCall,
+} from "@lumea-labs/chat";
+import type { ToolCallEvent } from "@lumea-labs/tool-calls";
+import { ChatShell } from "#/components/dashboard/chat-shell";
+import type { BuilderContext, NavigateTarget } from "#/lib/builder-context";
+
+/**
+ * A tool-call mutated project data → trigger a refresh. The builder's data
+ * tools are the MCP tools (`polpo_<resource>_<action>`); anything that isn't
+ * a pure read (`_list`/`_get`/`_read`) changes state. Local tools
+ * (search_web/http_fetch/navigate/ask_user_question) are never mutating.
+ */
+function isMutatingTool(name: string): boolean {
+  return name.startsWith("polpo_") && !/_(list|get|read)$/.test(name);
+}
+
+function uid(): string {
+  try {
+    return crypto.randomUUID();
+  } catch {
+    return `id-${Math.round(performance.now() * 1000)}`;
+  }
+}
+
+function contentToText(content: string | ContentPart[]): string {
+  if (typeof content === "string") return content;
+  return content
+    .map((p) => (p.type === "text" ? p.text : ""))
+    .join("")
+    .trim();
+}
+
+function useBuilderChatAdapter({
+  projectId,
+  apiUrl,
+  agentName,
+  context,
+  onMutation,
+  onNavigate,
+  persistKey,
+}: {
+  projectId: string;
+  apiUrl: string;
+  /** localStorage key — when set, the conversation persists across reloads
+   *  (scoped by whatever the caller keys it on, e.g. project). */
+  persistKey?: string;
+  /** Agent currently open in the builder — sent so the server injects it
+   *  into the Meta Agent's system context. */
+  agentName?: string;
+  /** Route-derived page context (global copilot) — sent so the server
+   *  scopes the Meta Agent to what the user is looking at. */
+  context?: BuilderContext;
+  onMutation?: (tool: string) => void;
+  /** Client-side navigation requested by the Meta Agent (navigate tool). */
+  onNavigate?: (target: NavigateTarget) => void;
+}) {
+  const [messages, setMessages] = useState<ChatMessageData[]>([]);
+  const [status, setStatus] = useState<ChatStatus>("idle");
+  const [error, setError] = useState<Error | null>(null);
+  const [pendingToolCall, setPendingToolCall] = useState<PendingToolCall | null>(null);
+  const abortRef = useRef<AbortController | null>(null);
+  const didPersist = useRef(false);
+
+  // Hydrate the conversation from localStorage once on mount.
+  useEffect(() => {
+    if (!persistKey || typeof window === "undefined") return;
+    try {
+      const raw = window.localStorage.getItem(persistKey);
+      if (raw) {
+        const parsed = JSON.parse(raw);
+        if (Array.isArray(parsed) && parsed.length) setMessages(parsed as ChatMessageData[]);
+      }
+    } catch {
+      /* ignore corrupt storage */
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [persistKey]);
+
+  // Persist on change. Skip the mount commit so we don't clobber stored
+  // history with the empty initial state before hydration runs.
+  useEffect(() => {
+    if (!persistKey || typeof window === "undefined") return;
+    if (!didPersist.current) {
+      didPersist.current = true;
+      return;
+    }
+    try {
+      window.localStorage.setItem(persistKey, JSON.stringify(messages));
+    } catch {
+      /* quota / serialization — best effort */
+    }
+  }, [persistKey, messages]);
+
+  /** Patch the in-flight assistant message by id. */
+  const patch = useCallback(
+    (id: string, fn: (m: ChatMessageData) => ChatMessageData) => {
+      setMessages((prev) => prev.map((m) => (m.id === id ? fn(m) : m)));
+    },
+    [],
+  );
+
+  const sendMessage = useCallback(
+    async (content: string | ContentPart[]) => {
+      const text = contentToText(content);
+      if (!text) return;
+
+      const userMsg: ChatMessageData = {
+        id: uid(),
+        role: "user",
+        content: text,
+        ts: new Date().toISOString(),
+      };
+      const assistantId = uid();
+      const assistantMsg: ChatMessageData = {
+        id: assistantId,
+        role: "assistant",
+        content: "",
+        ts: new Date().toISOString(),
+        segments: [],
+      };
+
+      // History sent to the server (role + text). Stateless re-run.
+      // Drop empty-text messages: an assistant turn that only emitted tool
+      // calls (update_agent, navigate, ask_user_question, …) has no text,
+      // and Anthropic 400s on empty text content blocks. We replay text-only
+      // history anyway, so those carry nothing.
+      const history = [...messages, userMsg]
+        .map((m) => ({ role: m.role, content: contentToText(m.content) }))
+        .filter((m) => m.content.trim().length > 0);
+
+      setMessages((prev) => [...prev, userMsg, assistantMsg]);
+      setStatus("streaming");
+      setError(null);
+      setPendingToolCall(null);
+
+      const controller = new AbortController();
+      abortRef.current = controller;
+
+      // Stream in the background and resolve sendMessage immediately, so the
+      // composer clears the input on submit instead of waiting for the whole
+      // stream to finish (it awaits this promise before clearing).
+      void (async () => {
+       try {
+        const res = await fetch(`${apiUrl}/v1/builder/chat`, {
+          method: "POST",
+          credentials: "include",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ projectId, agentName, context, messages: history }),
+          signal: controller.signal,
+        });
+        if (!res.ok || !res.body) {
+          throw new Error(`Builder chat failed (${res.status})`);
+        }
+
+        const reader = res.body.getReader();
+        const decoder = new TextDecoder();
+        let buffer = "";
+
+        // Parse SSE frames: blocks separated by \n\n, lines `event:`/`data:`.
+        const handleFrame = (frame: string) => {
+          let event = "message";
+          const dataLines: string[] = [];
+          for (const line of frame.split("\n")) {
+            if (line.startsWith("event:")) event = line.slice(6).trim();
+            else if (line.startsWith("data:")) dataLines.push(line.slice(5).trim());
+          }
+          if (dataLines.length === 0) return;
+          let payload: Record<string, unknown> = {};
+          try {
+            payload = JSON.parse(dataLines.join("\n"));
+          } catch {
+            return;
+          }
+
+          if (event === "text") {
+            const delta = String(payload.delta ?? "");
+            if (!delta) return;
+            patch(assistantId, (m) => {
+              const segments = [...(m.segments ?? [])];
+              const last = segments[segments.length - 1];
+              if (last && last.type === "text") {
+                segments[segments.length - 1] = {
+                  type: "text",
+                  content: last.content + delta,
+                };
+              } else {
+                segments.push({ type: "text", content: delta });
+              }
+              return {
+                ...m,
+                content: contentToText(m.content) + delta,
+                segments,
+              };
+            });
+          } else if (event === "tool-call") {
+            const ev: ToolCallEvent = {
+              id: String(payload.toolCallId ?? uid()),
+              name: String(payload.toolName ?? "tool"),
+              arguments: (payload.args as Record<string, unknown>) ?? {},
+              state: "calling",
+            };
+            patch(assistantId, (m) => ({
+              ...m,
+              toolCalls: [...(m.toolCalls ?? []), ev],
+              segments: [...(m.segments ?? []), { type: "tool_call", toolCall: ev }],
+            }));
+          } else if (event === "tool-result") {
+            const tcId = String(payload.toolCallId ?? "");
+            const toolName = String(payload.toolName ?? "");
+            const result =
+              typeof payload.result === "string"
+                ? payload.result
+                : JSON.stringify(payload.result ?? null);
+            patch(assistantId, (m) => ({
+              ...m,
+              toolCalls: (m.toolCalls ?? []).map((t) =>
+                t.id === tcId ? { ...t, state: "completed", result } : t,
+              ),
+              segments: (m.segments ?? []).map((s) =>
+                s.type === "tool_call" && s.toolCall.id === tcId
+                  ? { ...s, toolCall: { ...s.toolCall, state: "completed", result } }
+                  : s,
+              ),
+            }));
+            if (isMutatingTool(toolName)) onMutation?.(toolName);
+          } else if (event === "navigate") {
+            const section = payload.section as NavigateTarget["section"];
+            const name = (payload.name as string | null) ?? null;
+            const tab = (payload.tab as string | null) ?? null;
+            // Render it as a completed tool-call chip so the user sees the
+            // agent navigated, then perform the navigation.
+            const where = [section, name].filter(Boolean).join("/") + (tab ? ` · ${tab}` : "");
+            const ev: ToolCallEvent = {
+              id: String(payload.toolCallId ?? uid()),
+              name: "navigate",
+              arguments: { section, name, tab },
+              result: `Opened ${where}`,
+              state: "completed",
+            };
+            patch(assistantId, (m) => ({
+              ...m,
+              toolCalls: [...(m.toolCalls ?? []), ev],
+              segments: [...(m.segments ?? []), { type: "tool_call", toolCall: ev }],
+            }));
+            onNavigate?.({ section, name, tab });
+          } else if (event === "ask-user") {
+            // Human-in-the-loop: the loop paused. Surface the questions via
+            // pendingToolCall so the composer swaps to the ask-user panel.
+            // Drop the in-flight assistant bubble if it never produced text.
+            setMessages((prev) =>
+              prev.filter(
+                (m) =>
+                  m.id !== assistantId ||
+                  contentToText(m.content).length > 0 ||
+                  (m.segments?.length ?? 0) > 0,
+              ),
+            );
+            setPendingToolCall({
+              toolCallId: uid(),
+              toolName: "ask_user_question",
+              arguments: { questions: (payload.questions as unknown[]) ?? [] },
+            });
+          } else if (event === "error") {
+            throw new Error(String(payload.message ?? "stream error"));
+          }
+        };
+
+        // Stream loop.
+        for (;;) {
+          const { done, value } = await reader.read();
+          if (done) break;
+          buffer += decoder.decode(value, { stream: true });
+          let idx: number;
+          while ((idx = buffer.indexOf("\n\n")) !== -1) {
+            const frame = buffer.slice(0, idx);
+            buffer = buffer.slice(idx + 2);
+            if (frame.trim()) handleFrame(frame);
+          }
+        }
+        setStatus("idle");
+      } catch (err) {
+        if ((err as Error).name === "AbortError") {
+          setStatus("idle");
+          return;
+        }
+        setError(err as Error);
+        setStatus("error");
+       } finally {
+        abortRef.current = null;
+       }
+      })();
+    },
+    [apiUrl, projectId, agentName, context, messages, patch, onMutation, onNavigate],
+  );
+
+  const abort = useCallback(() => {
+    abortRef.current?.abort();
+    abortRef.current = null;
+    setStatus("idle");
+  }, []);
+
+  const newSession = useCallback(() => {
+    abortRef.current?.abort();
+    abortRef.current = null;
+    setMessages([]);
+    setStatus("idle");
+    setError(null);
+    setPendingToolCall(null);
+    if (persistKey && typeof window !== "undefined") {
+      try {
+        window.localStorage.removeItem(persistKey);
+      } catch {
+        /* ignore */
+      }
+    }
+  }, [persistKey]);
+
+  return useMemo(
+    () => ({
+      messages,
+      status,
+      isStreaming: status === "streaming",
+      error,
+      sessionId: null,
+      pendingToolCall,
+      sendMessage,
+      sendToolResult: async () => {},
+      setSessionId: async () => {},
+      newSession,
+      abort,
+    }),
+    [messages, status, error, pendingToolCall, sendMessage, newSession, abort],
+  );
+}
+
+/**
+ * Builder composer — swaps between the normal input and the ask-user
+ * panel when the meta-agent calls ask_user_question (same UX as the
+ * playground). Answers go back as a `{ answers }` message, which the
+ * server feeds to the next turn.
+ */
+function BuilderComposer() {
+  const { pendingToolCall, sendMessage } = useChatContext();
+
+  if (pendingToolCall?.toolName === "ask_user_question") {
+    const questions = (pendingToolCall.arguments?.questions ?? []) as AskUserQuestion[];
+    return (
+      <ChatAskUser
+        variant="command"
+        questions={questions}
+        onSubmit={(answers) => void sendMessage(JSON.stringify({ answers }))}
+      />
+    );
+  }
+
+  return <ChatInput placeholder="Tell the builder what to change…" />;
+}
+
+export function BuilderChat({
+  projectId,
+  apiUrl,
+  agentName,
+  context,
+  onMutation,
+  onNavigate,
+  persistKey,
+}: {
+  projectId: string;
+  apiUrl: string;
+  agentName?: string;
+  context?: BuilderContext;
+  onMutation?: (tool: string) => void;
+  onNavigate?: (target: NavigateTarget) => void;
+  persistKey?: string;
+}) {
+  const adapter = useBuilderChatAdapter({
+    projectId,
+    apiUrl,
+    agentName,
+    context,
+    onMutation,
+    onNavigate,
+    persistKey,
+  });
+  return (
+    <ChatShell adapter={adapter}>
+      <BuilderComposer />
+    </ChatShell>
+  );
+}

package/components/dashboard/chat-shell.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+/**
+ * Shared chat shell — the single place that wires an adapter into the
+ * `@lumea-labs/chat` UI with the `variant="task"` tool-call renderer.
+ *
+ * Both the playground/agent-test chat (`PolpoChat`, Polpo SDK adapter)
+ * and the Meta Agent builder chat (`BuilderChat`, custom SSE adapter)
+ * render through here, so the tool-call variant (and the provider stack)
+ * is defined exactly once — change it here, both surfaces follow.
+ *
+ * `children` overrides the default `<Chat>` input (e.g. the playground's
+ * custom InputBar with the skills menu); omit for the default composer.
+ */
+
+import type { ReactNode } from "react";
+import {
+  Chat,
+  ChatProvider,
+  ToolCallVariantProvider,
+  type ChatAdapter,
+} from "@lumea-labs/chat";
+
+export function ChatShell({
+  adapter,
+  children,
+}: {
+  adapter: ChatAdapter;
+  children?: ReactNode;
+}) {
+  return (
+    <ChatProvider adapter={adapter}>
+      {/* variant="task" → tool calls render as task cards (matches
+          lumea-agents). Defined ONCE here for every chat surface. */}
+      <ToolCallVariantProvider variant="task">
+        <Chat className="flex-1">{children}</Chat>
+      </ToolCallVariantProvider>
+    </ChatProvider>
+  );
+}

package/components/dashboard/client-picker.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+import { MultiSelect } from "#/components/ui/multi-select";
+import {
+  ClaudeCodeIcon,
+  ClineIcon,
+  CodexIcon,
+  CopilotIcon,
+  CursorIcon,
+  OpenCodeIcon,
+  QoderIcon,
+  RooIcon,
+  TraeIcon,
+  WindsurfIcon,
+} from "#/components/icons/coding-agents";
+
+/**
+ * Coding agent client definitions — shared across ConnectDialog and
+ * WelcomeBanner. Each entry maps to a `-a <id>` flag in `polpo install`.
+ */
+export const CODING_CLIENTS: Array<{
+  id: string;
+  label: string;
+  Icon: (props: { className?: string }) => React.ReactElement;
+}> = [
+  { id: "claude-code", label: "Claude Code", Icon: ClaudeCodeIcon },
+  { id: "cursor", label: "Cursor", Icon: CursorIcon },
+  { id: "codex", label: "Codex", Icon: CodexIcon },
+  { id: "copilot", label: "Copilot", Icon: CopilotIcon },
+  { id: "windsurf", label: "Windsurf", Icon: WindsurfIcon },
+  { id: "cline", label: "Cline", Icon: ClineIcon },
+  { id: "trae", label: "Trae", Icon: TraeIcon },
+  { id: "roo-code", label: "Roo Code", Icon: RooIcon },
+  { id: "qoder", label: "Qoder", Icon: QoderIcon },
+  { id: "opencode", label: "OpenCode", Icon: OpenCodeIcon },
+];
+
+/**
+ * MultiSelect picker for coding agents with brand icons.
+ * Used in ConnectDialog "Coding Agent" tab and WelcomeBanner step 2.
+ */
+export function ClientPicker({ value, onChange }: { value: string[]; onChange: (v: string[]) => void }) {
+  return (
+    <MultiSelect
+      options={CODING_CLIENTS.map((c) => ({
+        value: c.id,
+        label: c.label,
+        icon: <c.Icon className="h-4 w-4" />,
+      }))}
+      value={value}
+      onChange={onChange}
+      placeholder="Select coding agents…"
+      minSelected={1}
+      className="w-64 rounded-md px-3 py-2 text-sm font-medium text-foreground"
+    />
+  );
+}
+
+/** Build the install command string from selected client IDs */
+export function buildInstallCommand(clients: string[]): string {
+  const clientFlag = clients.length > 0 ? ` --client ${clients.join(",")}` : "";
+  return `npx @polpo-ai/cli install${clientFlag}`;
+}

package/components/dashboard/command-snippet.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import { useState } from "react";
+import { Check, Copy } from "lucide-react";
+
+/**
+ * A single terminal-style command line with copy-to-clipboard. Sharp,
+ * mono, neo-brutalist — adapted from lumea-agents' skill.sh install
+ * snippet. Informational: it copies the command, it does not run it.
+ */
+export function CommandSnippet({ command }: { command: string }) {
+  const [copied, setCopied] = useState(false);
+
+  const onCopy = () => {
+    void copyToClipboard(command).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1400);
+    });
+  };
+
+  return (
+    <div className="flex items-center gap-2 overflow-hidden border border-border bg-background px-3 py-2">
+      <span aria-hidden className="select-none font-mono text-xs text-muted-foreground/60">
+        $
+      </span>
+      <code className="min-w-0 flex-1 overflow-x-auto whitespace-nowrap font-mono text-xs text-foreground scrollbar-none">
+        {command}
+      </code>
+      <button
+        type="button"
+        onClick={onCopy}
+        title="Copy"
+        className={`inline-flex h-6 shrink-0 cursor-pointer items-center gap-1 border px-1.5 font-mono text-[10px] font-bold uppercase tracking-[0.12em] transition-colors ${
+          copied
+            ? "border-emerald-500/40 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400"
+            : "border-border bg-secondary text-muted-foreground hover:border-foreground/40 hover:text-foreground"
+        }`}
+      >
+        {copied ? (
+          <>
+            <Check className="h-2.5 w-2.5" aria-hidden />
+            copied
+          </>
+        ) : (
+          <>
+            <Copy className="h-2.5 w-2.5" aria-hidden />
+            copy
+          </>
+        )}
+      </button>
+    </div>
+  );
+}
+
+async function copyToClipboard(text: string): Promise<void> {
+  if (typeof navigator !== "undefined" && navigator.clipboard?.writeText) {
+    try {
+      await navigator.clipboard.writeText(text);
+      return;
+    } catch {
+      /* fall through */
+    }
+  }
+  if (typeof document === "undefined") return;
+  const ta = document.createElement("textarea");
+  ta.value = text;
+  ta.style.position = "fixed";
+  ta.style.opacity = "0";
+  document.body.appendChild(ta);
+  ta.select();
+  try {
+    document.execCommand("copy");
+  } catch {
+    /* swallow */
+  }
+  document.body.removeChild(ta);
+}