@polpo-ai/dashboard 0.1.0

package/components/dashboard/agent-picker-card.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "#/components/ui/select";
+
+/**
+ * Agent picker styled as a card: pill label + select dropdown.
+ * Shared across ConnectDialog SDK tab and OnboardingChecklist chat step.
+ */
+export function AgentPickerCard({
+  agents,
+  agent,
+  onChange,
+  show,
+}: {
+  agents: string[] | null;
+  agent: string;
+  onChange: (v: string) => void;
+  show: boolean;
+}) {
+  if (!show) return null;
+  return (
+    <div className="flex flex-col gap-2 border border-border bg-background p-3">
+      <span className="inline-flex h-5 w-fit items-center rounded bg-secondary px-2 text-[11px] font-medium text-muted-foreground">
+        agent
+      </span>
+      {agents && agents.length > 1 ? (
+        <Select value={agent} onValueChange={(v) => { if (v) onChange(v); }}>
+          <SelectTrigger className="w-full font-mono text-sm">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {agents.map((name) => (
+              <SelectItem key={name} value={name}>
+                {name}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      ) : (
+        <p className="font-mono text-sm leading-6 text-foreground">
+          {agents === null ? "Loading…" : agent}
+        </p>
+      )}
+    </div>
+  );
+}

package/components/dashboard/agent-studio.tsx

@@ -0,0 +1,242 @@
+"use client";
+
+/**
+ * Agent Studio — the agent detail surface, rendered as a chat canvas:
+ * left = the full agent editor (Models / Prompt / Tools / Skills /
+ * Memory / Vault, client-switched tabs), right = the Meta Agent builder
+ * chat that opens/closes (collapses by width → stays mounted, no reset).
+ *
+ * This IS the agent detail page (`/projects/[id]/agents/[name]`). Builder
+ * closed = plain detail; "Edit" reveals the chat alongside.
+ */
+
+import { useEffect, useState } from "react";
+import Link from "next/link";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import {
+  Bot,
+  Cpu,
+  BookMarked,
+  Wrench,
+  FileText,
+  Brain,
+  Lock,
+  Users,
+  MessageSquare,
+  MessagesSquare,
+  ExternalLink,
+  type LucideIcon,
+} from "lucide-react";
+import type { AgentConfig } from "@polpo-ai/core";
+import { BuilderChat } from "#/components/dashboard/builder-chat";
+import { AgentIdentityHeader } from "#/components/dashboard/agent-identity-header";
+import { Breadcrumb } from "#/components/dashboard/breadcrumb";
+import { useCopilot } from "#/components/dashboard/project-copilot";
+import AgentModelsView from "#/app/(dashboard)/projects/[id]/agents/[name]/models-view";
+import AgentSkillsView from "#/app/(dashboard)/projects/[id]/agents/[name]/skills/view";
+import AgentToolsView from "#/app/(dashboard)/projects/[id]/agents/[name]/tools/view";
+import AgentPromptView from "#/app/(dashboard)/projects/[id]/agents/[name]/prompt/view";
+import AgentMemoryView from "#/app/(dashboard)/projects/[id]/agents/[name]/memory/view";
+import AgentVaultView from "#/app/(dashboard)/projects/[id]/agents/[name]/vault/view";
+
+export interface VaultEntry {
+  service: string;
+  type: string;
+  label: string | null;
+}
+
+type StudioTab = "models" | "prompt" | "tools" | "skills" | "memory" | "vault";
+
+const TABS: { key: StudioTab; label: string; icon: LucideIcon }[] = [
+  { key: "models", label: "Models", icon: Cpu },
+  { key: "prompt", label: "Instructions", icon: FileText },
+  { key: "tools", label: "Tools", icon: Wrench },
+  { key: "skills", label: "Skills", icon: BookMarked },
+  { key: "memory", label: "Memory", icon: Brain },
+  { key: "vault", label: "Vault", icon: Lock },
+];
+
+export function AgentStudio({
+  projectId,
+  apiUrl,
+  agent,
+  memoryContent,
+  vaultEntries,
+}: {
+  projectId: string;
+  apiUrl: string;
+  agent: AgentConfig | null;
+  memoryContent: string;
+  vaultEntries: VaultEntry[];
+}) {
+  const router = useRouter();
+  const copilot = useCopilot();
+  // Soft-disabled: the in-Studio docked builder stays in the tree but never
+  // opens — "Edit" now opens the global lateral Copilot (Ask Polpo) instead.
+  const chatOpen = false;
+
+  if (!agent) {
+    return (
+      <div className="border border-border p-10 text-center">
+        <Bot className="mx-auto h-5 w-5 text-muted-foreground/40" strokeWidth={1.5} />
+        <p className="mt-2 text-sm text-muted-foreground">Agent not found.</p>
+        <Link
+          href={`/projects/${projectId}/agents`}
+          className="mt-3 inline-block text-xs text-muted-foreground underline underline-offset-2 hover:text-foreground"
+        >
+          Back to agents
+        </Link>
+      </div>
+    );
+  }
+
+  return (
+    // Fills the viewport (no page scroll); only inner panes scroll.
+    <div className="flex h-[calc(100vh-7rem)] min-h-[520px] flex-col overflow-hidden">
+      {/* Top bar — breadcrumb + actions. Fixed (does not scroll). */}
+      <div className="flex shrink-0 items-center gap-2 pb-3">
+        <Breadcrumb
+          items={[
+            { label: "Agents", href: `/projects/${projectId}/agents`, icon: Users },
+            { label: agent.name },
+          ]}
+        />
+
+        <div className="ml-auto flex items-center gap-2">
+          {/* Test = chat with the live agent in the playground (new tab). */}
+          <Link
+            href={`/projects/${projectId}/playground?agent=${encodeURIComponent(agent.name)}`}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="inline-flex items-center gap-1.5 border border-border bg-card px-2.5 py-1.5 text-xs font-medium text-muted-foreground transition-colors hover:border-foreground/30 hover:text-foreground"
+          >
+            <MessageSquare className="h-3.5 w-3.5" />
+            Test
+            <ExternalLink className="h-3 w-3 text-muted-foreground/60" />
+          </Link>
+          {/* Edit = open the global lateral Copilot (Polpo AI), scoped to
+              this agent via the route context. Hidden once it's open. */}
+          {!copilot?.open && (
+            <button
+              type="button"
+              onClick={() => copilot?.setOpen(true)}
+              className="inline-flex items-center gap-1.5 border border-border bg-card px-2.5 py-1.5 text-xs font-medium text-muted-foreground transition-colors hover:border-foreground/30 hover:text-foreground"
+            >
+              <MessagesSquare className="h-3.5 w-3.5" strokeWidth={1.5} />
+              Edit
+            </button>
+          )}
+        </div>
+      </div>
+
+      {/* Split — content LEFT, builder chat RIGHT. The chat collapses by
+          WIDTH (stays mounted → no reset). A full-height vertical
+          separator divides the panes when the builder is open. */}
+      <div className="flex min-h-0 flex-1 overflow-hidden">
+        <div className="min-w-0 flex-1 overflow-hidden">
+          <FullAgentEditor
+            agent={agent}
+            projectId={projectId}
+            memoryContent={memoryContent}
+            vaultEntries={vaultEntries}
+          />
+        </div>
+        <div
+          className={`shrink-0 overflow-hidden transition-[width] duration-200 ease-out ${
+            chatOpen ? "w-[36%] border-l border-border" : "w-0"
+          }`}
+        >
+          <div className="flex h-full w-full min-w-[320px] flex-col overflow-hidden">
+            <BuilderChat
+              projectId={projectId}
+              apiUrl={apiUrl}
+              agentName={agent.name}
+              onMutation={() => router.refresh()}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function FullAgentEditor({
+  agent,
+  projectId,
+  memoryContent,
+  vaultEntries,
+}: {
+  agent: AgentConfig;
+  projectId: string;
+  memoryContent: string;
+  vaultEntries: VaultEntry[];
+}) {
+  // Tab is URL-driven (?tab=) so the Meta Agent's `navigate` tool can point
+  // straight at a component, and the tab is deep-linkable.
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const urlTab = searchParams.get("tab") as StudioTab | null;
+  const validUrlTab = urlTab && TABS.some((t) => t.key === urlTab) ? urlTab : null;
+  const [tab, setTab] = useState<StudioTab>(validUrlTab ?? "models");
+
+  // React to external URL changes (e.g. the copilot navigating here).
+  useEffect(() => {
+    if (validUrlTab && validUrlTab !== tab) setTab(validUrlTab);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [validUrlTab]);
+
+  function selectTab(key: StudioTab) {
+    setTab(key);
+    const params = new URLSearchParams(searchParams.toString());
+    params.set("tab", key);
+    router.replace(`${pathname}?${params.toString()}`, { scroll: false });
+  }
+
+  return (
+    <div className="flex h-full flex-col">
+      {/* Sticky: identity + tab nav (don't scroll) */}
+      <div className="shrink-0 pt-1 pr-4">
+        <AgentIdentityHeader name={agent.name} role={agent.role} />
+        <div className="mt-4 flex flex-wrap gap-1 border-b border-border">
+          {TABS.map((t) => {
+            const Icon = t.icon;
+            const active = t.key === tab;
+            return (
+              <button
+                key={t.key}
+                type="button"
+                onClick={() => selectTab(t.key)}
+                className={`relative flex items-center gap-1.5 px-3 py-2 text-sm transition-colors ${
+                  active
+                    ? "font-medium text-foreground"
+                    : "text-muted-foreground hover:text-foreground"
+                }`}
+              >
+                <Icon className="h-3.5 w-3.5" strokeWidth={1.5} />
+                {t.label}
+                {active && (
+                  <span className="absolute bottom-0 left-0 right-0 h-[2px] bg-foreground" />
+                )}
+              </button>
+            );
+          })}
+        </div>
+      </div>
+
+      {/* Only the tab content scrolls */}
+      <div className="min-h-0 flex-1 overflow-auto py-4 pr-4">
+        {tab === "models" && (
+          <AgentModelsView agent={agent} projectId={projectId} agentName={agent.name} />
+        )}
+        {tab === "skills" && <AgentSkillsView agent={agent} projectId={projectId} />}
+        {tab === "tools" && <AgentToolsView agent={agent} projectId={projectId} />}
+        {tab === "prompt" && (
+          <AgentPromptView agent={agent} projectId={projectId} agentName={agent.name} />
+        )}
+        {tab === "memory" && <AgentMemoryView id={projectId} content={memoryContent} />}
+        {tab === "vault" && <AgentVaultView entries={vaultEntries} />}
+      </div>
+    </div>
+  );
+}

package/components/dashboard/agents-table.tsx

@@ -0,0 +1,48 @@
+import Link from "next/link";
+import { ChevronRight } from "lucide-react";
+import type { AgentConfig } from "@polpo-ai/core";
+
+const headerClass = "py-2.5 text-left text-xs font-medium text-muted-foreground";
+
+export function AgentsTable({ agents, projectId }: { agents: AgentConfig[]; projectId: string }) {
+  return (
+    <div data-testid="agents-table" className="mt-4 rounded-lg border border-border overflow-hidden overflow-x-auto min-w-[600px]">
+      {/* Header — same flex widths as rows */}
+      <div className="flex items-center border-b border-border bg-secondary/50">
+        <span className={`px-4 flex-1 min-w-[120px] ${headerClass}`}>Agent</span>
+        <span className={`px-4 flex-1 ${headerClass}`}>Role</span>
+        <span className={`px-4 flex-1 ${headerClass}`}>Model</span>
+        <span className={`px-4 w-20 ${headerClass}`}>Tools</span>
+        <span className={`px-4 w-24 ${headerClass}`}>Reasoning</span>
+        <span className="w-8" />
+      </div>
+      {/* Rows */}
+      {agents.map((agent) => (
+        <Link
+          key={agent.name}
+          href={`/projects/${projectId}/agents/${agent.name}`}
+          data-testid={`agent-row-${agent.name}`}
+          className="flex items-center border-b border-border last:border-0 hover:bg-secondary/30 transition-colors group"
+        >
+          <span className="px-4 py-3 flex-1 min-w-[120px]">
+            <span className="font-mono text-xs font-medium">{agent.name}</span>
+            {agent.identity?.title && (
+              <span className="block mt-0.5 text-[11px] text-muted-foreground/50">{agent.identity.title}</span>
+            )}
+          </span>
+          <span className="px-4 py-3 flex-1 text-sm text-muted-foreground">{agent.role ?? "—"}</span>
+          <span className="px-4 py-3 flex-1 font-mono text-xs text-muted-foreground">{agent.model ?? "—"}</span>
+          <span className="px-4 py-3 w-20 text-xs text-muted-foreground">
+            {agent.allowedTools ? agent.allowedTools.length : 0} tools
+          </span>
+          <span className="px-4 py-3 w-24 text-xs text-muted-foreground">
+            {agent.reasoning ?? "off"}
+          </span>
+          <span className="px-2 py-3 w-8">
+            <ChevronRight className="h-3.5 w-3.5 text-muted-foreground/30 group-hover:text-muted-foreground transition-colors" />
+          </span>
+        </Link>
+      ))}
+    </div>
+  );
+}

package/components/dashboard/breadcrumb.tsx

@@ -0,0 +1,70 @@
+import { Fragment } from "react";
+import Link from "next/link";
+import { ChevronRight, type LucideIcon } from "lucide-react";
+
+export interface Crumb {
+  label: string;
+  href?: string;
+  icon?: LucideIcon;
+}
+
+/**
+ * Shared breadcrumb — chevron-separated trail that reads unmistakably as a
+ * breadcrumb. Intermediate crumbs are muted links with a hover chip; the
+ * last crumb is the current location (foreground, mono), still linkable if
+ * it has an href. One component, used across the agent surfaces (DRY).
+ */
+export function Breadcrumb({ items }: { items: Crumb[] }) {
+  return (
+    <nav
+      aria-label="Breadcrumb"
+      className="flex items-center gap-0.5 text-xs"
+    >
+      {items.map((item, i) => {
+        const isLast = i === items.length - 1;
+        const Icon = item.icon;
+        const inner = (
+          <span className="inline-flex items-center gap-1.5">
+            {Icon && <Icon className="h-3.5 w-3.5 shrink-0" strokeWidth={1.5} />}
+            <span className={isLast ? "font-mono font-medium" : ""}>
+              {item.label}
+            </span>
+          </span>
+        );
+        return (
+          <Fragment key={`${item.label}-${i}`}>
+            {i > 0 && (
+              <ChevronRight
+                className="h-3.5 w-3.5 shrink-0 text-muted-foreground/40"
+                strokeWidth={2}
+                aria-hidden
+              />
+            )}
+            {item.href ? (
+              <Link
+                href={item.href}
+                aria-current={isLast ? "page" : undefined}
+                className={`inline-flex items-center rounded-sm px-1.5 py-1 transition-colors hover:bg-secondary ${
+                  isLast
+                    ? "text-foreground hover:text-foreground"
+                    : "text-muted-foreground hover:text-foreground"
+                }`}
+              >
+                {inner}
+              </Link>
+            ) : (
+              <span
+                aria-current={isLast ? "page" : undefined}
+                className={`inline-flex items-center px-1.5 py-1 ${
+                  isLast ? "text-foreground" : "text-muted-foreground"
+                }`}
+              >
+                {inner}
+              </span>
+            )}
+          </Fragment>
+        );
+      })}
+    </nav>
+  );
+}