@polpo-ai/dashboard 0.1.3 → 0.15.8

package/components/dashboard/project-copilot.tsx

@@ -1,253 +0,0 @@
-"use client";
-
-/**
- * CopilotLayout — wraps the dashboard main content and docks a global,
- * context-aware Builder panel BESIDE it (push, not overlay): when open the
- * content shrinks and the panel takes its place on the right.
- *
- * The Meta Agent is the same one the Agent Studio uses; here it picks up the
- * page CONTEXT (current agent / skill / section) from the route so it acts
- * on what you're looking at.
- *
- * The panel is ALWAYS mounted (it collapses by WIDTH, never unmounts), so
- * the conversation survives open/close and navigation between project pages.
- * It's keyed by projectId so switching projects starts a fresh session.
- *
- * Phase 1: additive. It coexists with the Studio's docked builder;
- * convergence (one surface) is a later decision.
- */
-
-import {
-  createContext,
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-  type ReactNode,
-} from "react";
-import { useRouter } from "next/navigation";
-import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { SquarePen, X } from "lucide-react";
-import { BuilderChat } from "../../components/dashboard/builder-chat";
-import { useBuilderContext, type NavigateTarget } from "../../lib/builder-context";
-import { fetchControlPlane } from "../../lib/data-client";
-
-const API_URL = process.env.NEXT_PUBLIC_API_URL ?? "http://localhost:4000";
-
-/** localStorage key for persisted copilot UI preferences. */
-const COPILOT_PREFS_KEY = "polpo.copilot.prefs";
-
-interface CopilotContextValue {
-  open: boolean;
-  setOpen: (open: boolean) => void;
-  toggle: () => void;
-}
-
-const CopilotContext = createContext<CopilotContextValue | null>(null);
-
-/** Open/close the global Copilot panel from anywhere under the dashboard
- *  layout (e.g. the Agent Studio "Edit" button). Returns null outside it. */
-export function useCopilot(): CopilotContextValue | null {
-  return useContext(CopilotContext);
-}
-
-/** The Polpo mark — two offset squares (no wordmark). Inherits color. */
-function PolpoMark({ className = "" }: { className?: string }) {
-  return (
-    <span className={`relative inline-block ${className}`} aria-hidden>
-      <span className="absolute left-0 top-0 h-[45%] w-[45%] bg-current" />
-      <span className="absolute bottom-0 right-0 h-[45%] w-[45%] bg-current" />
-    </span>
-  );
-}
-
-export function CopilotLayout({ children }: { children: ReactNode }) {
-  const router = useRouter();
-  const queryClient = useQueryClient();
-  const [open, setOpen] = useState(false);
-  // Bumping this remounts <BuilderChat>, resetting its in-memory state.
-  const [sessionNonce, setSessionNonce] = useState(0);
-  const { projectId, context } = useBuilderContext();
-
-  // Persist UI preferences (currently: was the panel open) across reloads.
-  const prefsHydrated = useRef(false);
-  useEffect(() => {
-    if (typeof window === "undefined") return;
-    try {
-      const raw = window.localStorage.getItem(COPILOT_PREFS_KEY);
-      if (raw) {
-        const prefs = JSON.parse(raw);
-        if (typeof prefs?.open === "boolean") setOpen(prefs.open);
-      }
-    } catch {
-      /* ignore */
-    }
-  }, []);
-  useEffect(() => {
-    if (typeof window === "undefined") return;
-    if (!prefsHydrated.current) {
-      prefsHydrated.current = true;
-      return;
-    }
-    try {
-      window.localStorage.setItem(COPILOT_PREFS_KEY, JSON.stringify({ open }));
-    } catch {
-      /* ignore */
-    }
-  }, [open]);
-
-  const copilotCtx = useMemo<CopilotContextValue>(
-    () => ({ open, setOpen, toggle: () => setOpen((v) => !v) }),
-    [open],
-  );
-
-  // Clear the locally-persisted conversation and start fresh.
-  const clearConversation = useCallback(() => {
-    if (projectId && typeof window !== "undefined") {
-      try {
-        window.localStorage.removeItem(`polpo.builder.${projectId}`);
-      } catch {
-        /* ignore */
-      }
-    }
-    setSessionNonce((n) => n + 1);
-  }, [projectId]);
-
-  // When the Meta Agent mutates something, refresh only the relevant data:
-  // router.refresh() re-fetches server components (e.g. the Studio agent
-  // detail), and we invalidate the matching client queries so lists update
-  // live too. Keyed by which tool ran.
-  const handleMutation = useCallback(
-    (tool: string) => {
-      router.refresh();
-      const inv = (key: unknown[]) => queryClient.invalidateQueries({ queryKey: key });
-      // Tool name is `polpo_<resource>_<action>` — invalidate that resource's
-      // queries, plus the cross-referenced ones (team ↔ agent membership).
-      const resource = tool.split("_")[1] ?? "";
-      inv([resource, projectId]);
-      if (resource === "agents") inv(["teams", projectId]);
-      if (resource === "skills" || resource === "teams") inv(["agents", projectId]);
-    },
-    [router, queryClient, projectId],
-  );
-
-  // Client-side navigation requested by the Meta Agent (navigate tool):
-  // build the URL and push it. The panel is global, so it stays open and
-  // its context auto-updates to the new page.
-  const handleNavigate = useCallback(
-    (t: NavigateTarget) => {
-      if (!projectId) return;
-      let url = `/projects/${projectId}`;
-      if (t.section && t.section !== "overview") url += `/${t.section}`;
-      if (t.name) url += `/${encodeURIComponent(t.name)}`;
-      if (t.tab) url += `?tab=${encodeURIComponent(t.tab)}`;
-      router.push(url);
-    },
-    [router, projectId],
-  );
-
-  // Only meaningful inside a project (the Meta Agent operates on one).
-  const show = !!projectId;
-
-  // Project name for the context line — shares the ["project", id] query
-  // with sidebar/top-header (cache hit, no extra fetch).
-  const { data: project } = useQuery({
-    queryKey: ["project", projectId],
-    queryFn: () =>
-      fetchControlPlane<{ name: string; orgId: string }>(`/v1/projects/${projectId}`),
-    enabled: show,
-    staleTime: 60_000,
-  });
-
-  // Dynamic, human explanation of what the Meta Agent is scoped to —
-  // always names the specific thing (which agent / skill / project).
-  const projectName = project?.name ?? "this project";
-  const contextDetail =
-    context.type === "agent"
-      ? `Agent ${context.agentName}`
-      : context.type === "skill"
-        ? `Skill ${context.skill}`
-        : context.type === "section"
-          ? context.label
-          : "Overview";
-  const contextExplain = `${contextDetail} · ${projectName}`;
-
-  return (
-    <CopilotContext.Provider value={copilotCtx}>
-    <div className="flex min-h-0 flex-1 overflow-hidden">
-      <main className="min-w-0 flex-1 overflow-y-auto">{children}</main>
-
-      {show && (
-        <>
-          {/* Launcher — Intercom-style, bottom-right; only visible when closed. */}
-          {!open && (
-            <button
-              type="button"
-              onClick={() => setOpen(true)}
-              className="group fixed bottom-5 right-5 z-40 inline-flex items-center gap-2.5 border border-border bg-card px-3 py-2.5 shadow-lg transition-colors hover:border-foreground/40 hover:bg-card"
-            >
-              <PolpoMark className="h-3.5 w-3.5 text-foreground" />
-              <span className="text-xs font-semibold text-foreground">Polpo AI</span>
-            </button>
-          )}
-
-          {/* Panel — docked beside content; collapses by width, stays mounted. */}
-          <aside
-            className={`shrink-0 overflow-hidden border-l border-border transition-[width] duration-200 ease-out ${
-              open ? "w-[500px]" : "w-0"
-            }`}
-          >
-            <div className="flex h-full w-[500px] flex-col overflow-hidden">
-              {/* Header — title + dynamic context on one row. The context
-                  names the specific thing the agent acts on. */}
-              <div className="flex shrink-0 items-center gap-2 border-b border-border px-4 py-3">
-                <PolpoMark className="h-3.5 w-3.5 shrink-0 text-foreground" />
-                <span className="shrink-0 text-sm font-semibold text-foreground">Polpo AI</span>
-                <span className="ml-1 flex min-w-0 items-center gap-1.5 border-l border-border pl-2">
-                  <span className="shrink-0 font-mono text-[10px] font-bold uppercase tracking-[0.14em] text-muted-foreground/55">
-                    Context
-                  </span>
-                  <span className="min-w-0 truncate text-xs text-foreground" title={contextExplain}>
-                    {contextExplain}
-                  </span>
-                </span>
-                <button
-                  type="button"
-                  onClick={clearConversation}
-                  aria-label="New conversation"
-                  title="New conversation"
-                  className="ml-auto shrink-0 text-muted-foreground transition-colors hover:text-foreground"
-                >
-                  <SquarePen className="h-4 w-4" strokeWidth={1.5} />
-                </button>
-                <button
-                  type="button"
-                  onClick={() => setOpen(false)}
-                  aria-label="Close"
-                  className="shrink-0 text-muted-foreground transition-colors hover:text-foreground"
-                >
-                  <X className="h-4 w-4" strokeWidth={1.5} />
-                </button>
-              </div>
-
-              <div className="copilot-chat-dense flex min-h-0 flex-1 flex-col overflow-hidden">
-                <BuilderChat
-                  key={`${projectId ?? "none"}:${sessionNonce}`}
-                  projectId={projectId as string}
-                  apiUrl={API_URL}
-                  context={context}
-                  onMutation={handleMutation}
-                  onNavigate={handleNavigate}
-                  persistKey={`polpo.builder.${projectId}`}
-                />
-              </div>
-            </div>
-          </aside>
-        </>
-      )}
-    </div>
-    </CopilotContext.Provider>
-  );
-}

package/components/dashboard/sdk-snippet-panel.tsx

@@ -1,194 +0,0 @@
-"use client";
-
-import { useCallback, useMemo, useState } from "react";
-import { CopyCard } from "../../components/dashboard/copy-card";
-import { AgentPickerCard } from "../../components/dashboard/agent-picker-card";
-import { TabToggle } from "../../components/dashboard/tab-toggle";
-import { AgentModelSelector } from "../../components/dashboard/agent-model-selector";
-import { PolpoProvider } from "@polpo-ai/react";
-import { Chat } from "@polpo-ai/chat";
-import type { AgentConfig } from "@polpo-ai/core";
-
-type SnippetTab = "curl" | "ts" | "playground";
-
-/**
- * SDK snippet panel — agent picker + language toggle (curl / TS /
- * Playground) + copy-able code snippet. Shared between ConnectDialog
- * SDK tab and OnboardingChecklist "Chat with your agent" step.
- *
- * When `projectId` and `apiUrl` are provided, a third "Playground"
- * tab appears that renders the same <Chat> UI against the session-
- * authenticated proxy — the user can fire a real chat completion
- * without leaving the panel.
- */
-export function SdkSnippetPanel({
-  baseUrl,
-  agents,
-  agentConfigs,
-  defaultAgent,
-  sdkKey = "$POLPO_API_KEY",
-  compact = false,
-  projectId,
-  apiUrl,
-}: {
-  baseUrl: string;
-  agents: string[] | null;
-  /** Full agent configs — enables the Playground tab to show model info
-   *  next to the agent name. When omitted, Playground shows name only. */
-  agentConfigs?: AgentConfig[];
-  defaultAgent: string;
-  sdkKey?: string;
-  compact?: boolean;
-  projectId?: string;
-  apiUrl?: string;
-}) {
-  const [agent, setAgent] = useState(defaultAgent);
-  const canUsePlayground = !!projectId && !!apiUrl;
-  const [lang, setLang] = useState<SnippetTab>(
-    canUsePlayground ? "playground" : "curl",
-  );
-
-  // If `sdkKey` looks like a real key (starts with sk_), inline it in the
-  // snippet so a freshly-generated key is immediately copy-pasteable.
-  // Otherwise fall back to the $POLPO_API_KEY env-var placeholder.
-  const isRealKey = sdkKey.startsWith("sk_");
-  const tsKeyExpr = isRealKey ? `"${sdkKey}"` : "process.env.POLPO_API_KEY!";
-  const curlAuthKey = isRealKey ? sdkKey : "$POLPO_API_KEY";
-
-  const tsSnippet = `import { PolpoClient } from "@polpo-ai/sdk";
-
-const polpo = new PolpoClient({
-  apiKey: ${tsKeyExpr},
-  baseUrl: "${baseUrl}",
-});
-
-const res = await polpo.chatCompletions({
-  model: "polpo",
-  agent: "${agent}",
-  stream: true,
-  messages: [{ role: "user", content: "Hello" }],
-});`;
-
-  const curlPreamble = isRealKey
-    ? ""
-    : `# Load your API key from .env.local (created by polpo link)
-export POLPO_API_KEY=$(grep POLPO_API_KEY .env.local | cut -d= -f2)
-
-`;
-
-  const curlSnippet = `${curlPreamble}curl ${baseUrl}/v1/chat/completions \\
-  -H "Authorization: Bearer ${curlAuthKey}" \\
-  -H "Content-Type: application/json" \\
-  -d '{
-    "model": "polpo",
-    "agent": "${agent}",
-    "stream": true,
-    "messages": [{"role":"user","content":"Hello"}]
-  }'`;
-
-  const options: { value: SnippetTab; label: string }[] = [
-    ...(canUsePlayground
-      ? [{ value: "playground" as const, label: "Playground" }]
-      : []),
-    { value: "curl", label: "curl" },
-    { value: "ts", label: "TypeScript" },
-  ];
-
-  return (
-    <div className="flex flex-col gap-3">
-      <TabToggle value={lang} onChange={setLang} options={options} />
-
-      {!compact && lang !== "playground" && (
-        <AgentPickerCard
-          agents={agents}
-          agent={agent}
-          onChange={setAgent}
-          show={agents !== null && agents.length > 0}
-        />
-      )}
-
-      {lang === "playground" && canUsePlayground && (
-        <InlinePlayground
-          projectId={projectId!}
-          apiUrl={apiUrl!}
-          agent={agent}
-          onAgentChange={setAgent}
-          agentConfigs={agentConfigs}
-        />
-      )}
-
-      {lang !== "playground" && (
-        <CopyCard
-          label={lang === "ts" ? "@polpo-ai/sdk" : "curl"}
-          value={lang === "ts" ? tsSnippet : curlSnippet}
-          lang={lang}
-        />
-      )}
-    </div>
-  );
-}
-
-/* ------------------------------------------------------------------ */
-/*  Inline playground — same wiring as the /playground page, but       */
-/*  constrained to a small panel for use inside onboarding / dialogs.  */
-/* ------------------------------------------------------------------ */
-
-function InlinePlayground({
-  projectId,
-  apiUrl,
-  agent,
-  onAgentChange,
-  agentConfigs,
-}: {
-  projectId: string;
-  apiUrl: string;
-  agent: string;
-  onAgentChange: (name: string) => void;
-  agentConfigs?: AgentConfig[];
-}) {
-  const baseUrl = `${apiUrl}/v1/projects/${projectId}/data`;
-  const [sessionState, setSessionState] = useState<{ agent: string; id: string } | null>(null);
-  const sessionId = sessionState?.agent === agent ? sessionState.id : undefined;
-  const setCurrentSessionId = useCallback((id: string) => setSessionState({ agent, id }), [agent]);
-
-  const cookieFetch = useMemo<typeof globalThis.fetch>(
-    () =>
-      (async (input, init) => {
-        const res = await globalThis.fetch(input, {
-          ...init,
-          credentials: "include",
-        });
-        const id = res.headers.get("x-session-id");
-        if (id) setCurrentSessionId(id);
-        return res;
-      }) as typeof globalThis.fetch,
-    [setCurrentSessionId],
-  );
-
-  return (
-    <div className="flex flex-col gap-2">
-      {agentConfigs && agentConfigs.length > 0 && (
-        <div className="flex items-center justify-between">
-          <span className="text-[10px] font-mono uppercase tracking-[0.18em] text-muted-foreground/60">
-            Chatting with
-          </span>
-          <AgentModelSelector
-            agents={agentConfigs}
-            selected={agent}
-            onSelect={onAgentChange}
-          />
-        </div>
-      )}
-      <div className="flex h-[420px] flex-col border border-border bg-card">
-        <PolpoProvider
-          baseUrl={baseUrl}
-          apiPrefix="/v1"
-          fetch={cookieFetch}
-          autoConnect={false}
-        >
-          <Chat key={agent} sessionId={sessionId} agent={agent} onSessionCreated={setCurrentSessionId} className="flex-1" />
-        </PolpoProvider>
-      </div>
-    </div>
-  );
-}

package/components/dashboard/section-header.tsx

@@ -1,37 +0,0 @@
-import type { ReactNode } from "react";
-
-/**
- * Shared section header for the agent tab pages (Capabilities, Tools,
- * Skills, …) so every internal section reads the same: a title with an
- * optional count, and a one-line muted description. Keeps the tabs
- * visually coherent.
- */
-export function SectionHeader({
-  title,
-  count,
-  description,
-}: {
-  /** Optional — omit when a tab already labels the section (avoids a
-   *  redundant heading). Description-only is rendered then. */
-  title?: string;
-  count?: number;
-  description?: ReactNode;
-}) {
-  return (
-    <div>
-      {title && (
-        <h3 className="text-sm font-semibold">
-          {title}
-          {count !== undefined && (
-            <span className="ml-1 font-mono text-muted-foreground/60">({count})</span>
-          )}
-        </h3>
-      )}
-      {description && (
-        <p className={`text-xs text-muted-foreground ${title ? "mt-1" : ""}`}>
-          {description}
-        </p>
-      )}
-    </div>
-  );
-}