@polpo-ai/dashboard 0.1.0

package/components/ui/sheet.tsx

@@ -0,0 +1,135 @@
+"use client"
+
+import * as React from "react"
+import { Dialog as SheetPrimitive } from "@base-ui/react/dialog"
+
+import { cn } from "#/lib/utils"
+import { Button } from "#/components/ui/button"
+import { XIcon } from "lucide-react"
+
+function Sheet({ ...props }: SheetPrimitive.Root.Props) {
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />
+}
+
+function SheetTrigger({ ...props }: SheetPrimitive.Trigger.Props) {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
+}
+
+function SheetClose({ ...props }: SheetPrimitive.Close.Props) {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
+}
+
+function SheetPortal({ ...props }: SheetPrimitive.Portal.Props) {
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
+}
+
+function SheetOverlay({ className, ...props }: SheetPrimitive.Backdrop.Props) {
+  return (
+    <SheetPrimitive.Backdrop
+      data-slot="sheet-overlay"
+      className={cn(
+        "fixed inset-0 z-50 bg-black/10 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SheetContent({
+  className,
+  children,
+  side = "right",
+  showCloseButton = true,
+  ...props
+}: SheetPrimitive.Popup.Props & {
+  side?: "top" | "right" | "bottom" | "left"
+  showCloseButton?: boolean
+}) {
+  return (
+    <SheetPortal>
+      <SheetOverlay />
+      <SheetPrimitive.Popup
+        data-slot="sheet-content"
+        data-side={side}
+        className={cn(
+          "fixed z-50 flex flex-col gap-4 bg-background bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-ending-style:opacity-0 data-starting-style:opacity-0 data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=bottom]:data-ending-style:translate-y-[2.5rem] data-[side=bottom]:data-starting-style:translate-y-[2.5rem] data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:data-ending-style:translate-x-[-2.5rem] data-[side=left]:data-starting-style:translate-x-[-2.5rem] data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:data-ending-style:translate-x-[2.5rem] data-[side=right]:data-starting-style:translate-x-[2.5rem] data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=top]:data-ending-style:translate-y-[-2.5rem] data-[side=top]:data-starting-style:translate-y-[-2.5rem] data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <SheetPrimitive.Close
+            data-slot="sheet-close"
+            render={
+              <Button
+                variant="ghost"
+                className="absolute top-3 right-3"
+                size="icon-sm"
+              />
+            }
+          >
+            <XIcon
+            />
+            <span className="sr-only">Close</span>
+          </SheetPrimitive.Close>
+        )}
+      </SheetPrimitive.Popup>
+    </SheetPortal>
+  )
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-header"
+      className={cn("flex flex-col gap-0.5 p-4", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-footer"
+      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetTitle({ className, ...props }: SheetPrimitive.Title.Props) {
+  return (
+    <SheetPrimitive.Title
+      data-slot="sheet-title"
+      className={cn("text-base font-medium text-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetDescription({
+  className,
+  ...props
+}: SheetPrimitive.Description.Props) {
+  return (
+    <SheetPrimitive.Description
+      data-slot="sheet-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}

package/components/ui/skeleton.tsx

@@ -0,0 +1,13 @@
+import { cn } from "#/lib/utils"
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("animate-pulse rounded-md bg-muted", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

package/components/ui/tabs.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
+
+import { cn } from "#/lib/utils";
+
+const Tabs = TabsPrimitive.Root;
+
+function TabsList({ className, ...props }: TabsPrimitive.List.Props) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      className={cn(
+        "relative flex w-full items-center gap-1 overflow-x-auto border-b border-border scrollbar-none",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
+  return (
+    <TabsPrimitive.Tab
+      data-slot="tabs-trigger"
+      className={cn(
+        // base
+        "relative inline-flex items-center gap-2 whitespace-nowrap px-3 py-2 text-sm text-muted-foreground transition-colors outline-none cursor-pointer",
+        // hover
+        "hover:text-foreground",
+        // active
+        "data-[selected]:text-foreground data-[selected]:font-medium",
+        // focus
+        "focus-visible:text-foreground",
+        // disabled
+        "disabled:pointer-events-none disabled:opacity-50",
+        // active underline (matches NavTabs — foreground, no layout shift)
+        "after:absolute after:-bottom-px after:left-0 after:right-0 after:h-[2px] after:bg-foreground after:opacity-0 data-[selected]:after:opacity-100 after:transition-opacity",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TabsPanel({ className, ...props }: TabsPrimitive.Panel.Props) {
+  return (
+    <TabsPrimitive.Panel
+      data-slot="tabs-panel"
+      className={cn("mt-4 outline-none", className)}
+      {...props}
+    />
+  );
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsPanel };

package/components/ui/textarea.tsx

@@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { cn } from "#/lib/utils"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }

package/components/ui/tooltip.tsx

@@ -0,0 +1,66 @@
+"use client"
+
+import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip"
+
+import { cn } from "#/lib/utils"
+
+function TooltipProvider({
+  delay = 0,
+  ...props
+}: TooltipPrimitive.Provider.Props) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delay={delay}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({ ...props }: TooltipPrimitive.Root.Props) {
+  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+}
+
+function TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  side = "top",
+  sideOffset = 4,
+  align = "center",
+  alignOffset = 0,
+  children,
+  ...props
+}: TooltipPrimitive.Popup.Props &
+  Pick<
+    TooltipPrimitive.Positioner.Props,
+    "align" | "alignOffset" | "side" | "sideOffset"
+  >) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Positioner
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
+        sideOffset={sideOffset}
+        className="isolate z-50"
+      >
+        <TooltipPrimitive.Popup
+          data-slot="tooltip-content"
+          className={cn(
+            "z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            className
+          )}
+          {...props}
+        >
+          {children}
+          <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" />
+        </TooltipPrimitive.Popup>
+      </TooltipPrimitive.Positioner>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

package/hooks/use-desktop-sidebar.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import { createContext, use, useState, useCallback, useEffect } from "react";
+
+interface DesktopSidebarCtx {
+  open: boolean;
+  setOpen: (v: boolean) => void;
+  toggle: () => void;
+}
+
+const DesktopSidebarContext = createContext<DesktopSidebarCtx>({
+  open: true,
+  setOpen: () => {},
+  toggle: () => {},
+});
+
+const STORAGE_KEY = "polpo:sidebar-open";
+
+export function DesktopSidebarProvider({ children }: { children: React.ReactNode }) {
+  const [open, setOpenState] = useState(true);
+
+  // Hydrate from localStorage after mount (avoid SSR mismatch)
+  useEffect(() => {
+    const stored = localStorage.getItem(STORAGE_KEY);
+    if (stored !== null) setOpenState(stored === "1");
+  }, []);
+
+  const setOpen = useCallback((v: boolean) => {
+    setOpenState(v);
+    localStorage.setItem(STORAGE_KEY, v ? "1" : "0");
+  }, []);
+
+  const toggle = useCallback(() => {
+    setOpenState((v) => {
+      const next = !v;
+      localStorage.setItem(STORAGE_KEY, next ? "1" : "0");
+      return next;
+    });
+  }, []);
+
+  return (
+    <DesktopSidebarContext.Provider value={{ open, setOpen, toggle }}>
+      {children}
+    </DesktopSidebarContext.Provider>
+  );
+}
+
+export function useDesktopSidebar() {
+  return use(DesktopSidebarContext);
+}

package/hooks/use-mobile-sidebar.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import { createContext, use, useState, useCallback, useEffect } from "react";
+import { usePathname } from "next/navigation";
+
+interface MobileSidebarCtx {
+  open: boolean;
+  setOpen: (v: boolean) => void;
+  toggle: () => void;
+}
+
+const MobileSidebarContext = createContext<MobileSidebarCtx>({
+  open: false,
+  setOpen: () => {},
+  toggle: () => {},
+});
+
+export function MobileSidebarProvider({ children }: { children: React.ReactNode }) {
+  const [open, setOpen] = useState(false);
+  const pathname = usePathname();
+  const toggle = useCallback(() => setOpen((v) => !v), []);
+
+  // Close sidebar on navigation
+  useEffect(() => {
+    setOpen(false);
+  }, [pathname]);
+
+  return (
+    <MobileSidebarContext.Provider value={{ open, setOpen, toggle }}>
+      {children}
+    </MobileSidebarContext.Provider>
+  );
+}
+
+export function useMobileSidebar() {
+  return use(MobileSidebarContext);
+}

package/index.ts

@@ -0,0 +1,14 @@
+/**
+ * Public surface of @polpo-ai/dashboard — the per-project views plus the
+ * data-client seam, for a host app (e.g. the cloud dashboard) to render inside
+ * its own shell with its own transport injected via <DataClientProvider>.
+ *
+ * Phase-2 pilot: the agents view. The remaining views follow the same shape
+ * (default-exported `<XView>` + a server `page.tsx` that fetches initial data).
+ */
+
+export { DataClientProvider, createPolpoClient } from "./lib/polpo-client";
+export type { PolpoClientFactory } from "./lib/polpo-client";
+
+export { default as AgentsView } from "./app/(dashboard)/projects/[id]/agents/view";
+export type { Team } from "./app/(dashboard)/projects/[id]/agents/view";

package/lib/api.ts

@@ -0,0 +1,194 @@
+/**
+ * Server-side API client for the Control Plane.
+ * Used by Server Components to fetch data directly — no BFF, no API routes proxy.
+ *
+ * Data plane types (AgentConfig, Task, Mission, Team, etc.) come from @polpo-ai/core.
+ * Control plane types (Org, Project, ApiKey, ByokEntry) are defined here.
+ */
+
+import { cache } from "react";
+import { cookies } from "next/headers";
+import { redirect } from "next/navigation";
+import type { AgentConfig } from "@polpo-ai/core";
+
+const API_URL = process.env.POLPO_API_URL ?? process.env.NEXT_PUBLIC_API_URL ?? "http://localhost:4000";
+const API_PREFIX = process.env.NEXT_PUBLIC_POLPO_API_PREFIX ?? "/api/v1";
+const API_KEY = process.env.POLPO_API_KEY ?? process.env.NEXT_PUBLIC_POLPO_API_KEY;
+
+/** Control-plane API error carrying the HTTP status, so callers can tell an
+ *  auth failure (401) apart from a transient backend error (5xx/network). */
+export class ApiError extends Error {
+  constructor(
+    public readonly status: number,
+    message: string,
+  ) {
+    super(message);
+    this.name = "ApiError";
+  }
+}
+
+/**
+ * Authenticated server-side fetch to the control plane.
+ * Forwards session cookies from the incoming request.
+ */
+export async function api<T>(path: string, opts?: RequestInit): Promise<T> {
+  const cookieStore = await cookies();
+  const cookieHeader = cookieStore.toString();
+
+  const res = await fetch(`${API_URL}${path}`, {
+    ...opts,
+    headers: {
+      "Content-Type": "application/json",
+      cookie: cookieHeader,
+      ...opts?.headers,
+    },
+    cache: "no-store",
+  });
+
+  if (!res.ok) {
+    throw new ApiError(res.status, `API error ${res.status}: ${await res.text()}`);
+  }
+
+  return res.json();
+}
+
+/**
+ * Authenticated fetch to the data plane via session proxy.
+ * Routes through /v1/projects/:projectId/data/* which uses session auth.
+ * No API key needed — the server resolves the project internally.
+ */
+export async function dataApi<T>(_projectId: string, path: string, opts?: RequestInit): Promise<T> {
+  // Single-tenant self-host: straight at the OSS server (`/api/v1/...`) with a
+  // Bearer key. projectId is ignored. Callers pass `/v1/...`, so strip the
+  // leading `/v1` and let API_PREFIX carry the root. Cloud overrides with its
+  // session-proxy variant.
+  const res = await fetch(`${API_URL}${API_PREFIX}${path.replace(/^\/v1(?=\/|$)/, "")}`, {
+    ...opts,
+    headers: {
+      "Content-Type": "application/json",
+      ...(API_KEY ? { Authorization: `Bearer ${API_KEY}` } : {}),
+      ...opts?.headers,
+    },
+    cache: "no-store",
+  });
+
+  if (!res.ok) {
+    throw new Error(`Data API error ${res.status}: ${await res.text()}`);
+  }
+
+  return res.json();
+}
+
+/**
+ * Cached fetch of the user's orgs — deduplicated per request via React.cache().
+ * Multiple server components in the same render can call this without duplicate HTTP requests.
+ */
+export const getOrgs = cache(async (): Promise<OrgWithRole[]> => {
+  try {
+    return await api<OrgWithRole[]>("/v1/orgs");
+  } catch (err) {
+    // A missing/expired session is NOT "no orgs" — sending the user to
+    // onboarding here was the bug that dumped people with a stale `.polpo.sh`
+    // cookie onto /onboarding. Re-authenticate instead.
+    if (err instanceof ApiError && err.status === 401) redirect("/login");
+    // Transient backend failure (5xx / network / DB down): surface it as a
+    // real error (error boundary) rather than masquerading as "no orgs".
+    throw err;
+  }
+});
+
+/**
+ * Non-throwing org fetch — returns `[]` on ANY failure (auth or transient).
+ * For contexts where a redirect/throw is wrong, e.g. API route handlers
+ * (billing identify) that must always return a response.
+ */
+export const getOrgsSafe = cache(() =>
+  api<OrgWithRole[]>("/v1/orgs").catch(() => [] as OrgWithRole[])
+);
+
+/**
+ * Cached fetch of a single agent config — deduplicated per request via
+ * React.cache(). The agent detail layout and every tab page (capabilities,
+ * identity, tools, skills, prompt) call this with the same args, so within
+ * one server render the agent is fetched once instead of N times.
+ * Returns null on any error (renders the "Agent not found" empty state).
+ */
+export const getAgent = cache((projectId: string, name: string) =>
+  dataApi<{ ok: boolean; data: AgentConfig }>(
+    projectId,
+    `/v1/agents/${encodeURIComponent(name)}`,
+  )
+    .then((r) => r.data ?? null)
+    .catch(() => null),
+);
+
+// ── Control plane types (cloud-only, match packages/server/src/db/schema.ts) ──
+
+export interface Org {
+  id: string;
+  name: string;
+  slug: string;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface OrgWithRole extends Org {
+  role: "owner" | "admin" | "member";
+}
+
+export interface ProjectGatewaySettings {
+  url?: string;
+  headers?: Record<string, string>;
+}
+
+export interface ProjectSettings {
+  gateway?: ProjectGatewaySettings;
+  [key: string]: unknown;
+}
+
+export interface OnboardingChecklist {
+  firstCompletion?: string;
+  firstSkill?: string;
+  firstTool?: string;
+  firstTask?: string;
+  firstDeploy?: string;
+}
+
+export interface Project {
+  id: string;
+  orgId: string;
+  name: string;
+  slug: string;
+  settings?: ProjectSettings | null;
+  status: "active" | "suspended" | "deleted";
+  onboardingChecklist?: OnboardingChecklist;
+  neonProjectId?: string | null;
+  neonConnectionString?: string | null;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface ApiKey {
+  id: string;
+  projectId: string;
+  name: string;
+  keyPrefix: string;
+  keyHash?: string;
+  environment: "live" | "test";
+  lastUsedAt: string | null;
+  expiresAt: string | null;
+  createdAt: string;
+  revokedAt: string | null;
+}
+
+export interface ApiKeyCreated extends Omit<ApiKey, "keyHash"> {
+  rawKey: string;
+}
+
+export interface ByokEntry {
+  provider: string;
+  label: string | null;
+  maskedKey: string;
+  createdAt: string;
+  updatedAt: string;
+}

package/lib/builder-context.ts

@@ -0,0 +1,60 @@
+"use client";
+
+/**
+ * Derives the Builder/Copilot "context" from the current route, so the
+ * global side panel knows what the user is looking at and the Meta Agent
+ * can act accordingly (e.g. on an agent page → operate on that agent; on a
+ * skill page → that skill; elsewhere → the project section).
+ *
+ * Returns a STABLE object (memoised by value) so consumers can use it as a
+ * hook dependency without churning.
+ */
+import { useMemo } from "react";
+import { useParams, usePathname } from "next/navigation";
+
+export interface BuilderContext {
+  type: "agent" | "skill" | "section" | "project";
+  /** Human label shown in the panel's context strip, e.g. "Agent · sales-bot". */
+  label: string;
+  agentName?: string;
+  skill?: string;
+  section?: string;
+}
+
+/** Where the Meta Agent's `navigate` tool wants to send the user. */
+export interface NavigateTarget {
+  section: "agents" | "skills" | "tasks" | "missions" | "memory" | "playground" | "overview";
+  name?: string | null;
+  /** Agent Studio tab to focus (models/prompt/tools/skills/memory/vault). */
+  tab?: string | null;
+}
+
+export function useBuilderContext(): {
+  projectId: string | null;
+  context: BuilderContext;
+} {
+  const params = useParams<{ id?: string; name?: string }>();
+  const pathname = usePathname() ?? "";
+
+  const projectId = params?.id ?? null;
+  const name = params?.name ? decodeURIComponent(params.name) : undefined;
+
+  // First path segment after /projects/:id/ — "agents", "skills", "tasks", …
+  const rest = pathname.match(/\/projects\/[^/]+\/([^?#]*)/)?.[1] ?? "";
+  const section = rest.split("/").filter(Boolean)[0];
+
+  return useMemo(() => {
+    let context: BuilderContext;
+    if (section === "agents" && name) {
+      context = { type: "agent", agentName: name, label: `Agent · ${name}` };
+    } else if (section === "skills" && name) {
+      context = { type: "skill", skill: name, label: `Skill · ${name}` };
+    } else if (section) {
+      const label = section.charAt(0).toUpperCase() + section.slice(1);
+      context = { type: "section", section, label };
+    } else {
+      context = { type: "project", label: "Project" };
+    }
+    return { projectId, context };
+  }, [projectId, section, name]);
+}