@polpo-ai/dashboard 0.1.0

package/components/dashboard/copy-button.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { useState } from "react";
+import { Check, Copy } from "lucide-react";
+
+/**
+ * Icon-only copy-to-clipboard affordance. Swaps to a check for 2s after
+ * copying. Used for quick-copy of instructions, memory, etc.
+ */
+export function CopyButton({
+  value,
+  label = "Copy",
+  className = "",
+}: {
+  value: string;
+  label?: string;
+  className?: string;
+}) {
+  const [copied, setCopied] = useState(false);
+
+  async function handleCopy() {
+    try {
+      await navigator.clipboard.writeText(value);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch {}
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={handleCopy}
+      aria-label={label}
+      title={copied ? "Copied" : label}
+      className={`inline-flex items-center gap-1.5 border border-border bg-card px-2 py-1 text-[11px] font-medium text-muted-foreground transition-colors hover:border-foreground/30 hover:text-foreground ${className}`}
+    >
+      {copied ? (
+        <Check className="h-3.5 w-3.5 text-emerald-500" strokeWidth={1.5} />
+      ) : (
+        <Copy className="h-3.5 w-3.5" strokeWidth={1.5} />
+      )}
+      {copied ? "Copied" : label}
+    </button>
+  );
+}

package/components/dashboard/copy-card.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import { useState } from "react";
+import { Check, Copy } from "lucide-react";
+import { highlight } from "sugar-high";
+
+/**
+ * Card with a small pill label at top-left, copy icon top-right,
+ * monospace value beneath. Shared across ConnectDialog, WelcomeBanner,
+ * and OnboardingChecklist.
+ */
+export function CopyCard({ label, value, lang }: { label: string; value: string; lang?: "ts" | "curl" }) {
+  const [copied, setCopied] = useState(false);
+
+  async function handleCopy() {
+    try {
+      await navigator.clipboard.writeText(value);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch {}
+  }
+
+  return (
+    <div className="flex flex-col gap-2 border border-border bg-background p-3">
+      <div className="flex items-center justify-between">
+        <span className="inline-flex h-5 items-center rounded bg-secondary px-2 text-[11px] font-medium text-muted-foreground">
+          {label}
+        </span>
+        <button
+          type="button"
+          onClick={handleCopy}
+          className="text-muted-foreground hover:text-foreground transition-colors"
+          aria-label={`Copy ${label}`}
+        >
+          {copied ? <Check className="h-4 w-4 text-brand" /> : <Copy className="h-4 w-4" />}
+        </button>
+      </div>
+      {lang ? (
+        <pre
+          className="font-mono text-sm leading-6 whitespace-pre-wrap break-all overflow-x-auto sh-code"
+          dangerouslySetInnerHTML={{ __html: highlight(value) }}
+        />
+      ) : (
+        <pre className="font-mono text-sm leading-6 text-foreground whitespace-pre-wrap break-all overflow-x-auto">{value}</pre>
+      )}
+    </div>
+  );
+}

package/components/dashboard/file-browser.tsx

@@ -0,0 +1,161 @@
+"use client";
+
+import { useState, useCallback } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { usePolpoClient } from "#/lib/polpo-client";
+import {
+  Folder, FileText, File, Image, Music, Video, Archive,
+  ChevronRight, ChevronLeft, Download,
+} from "lucide-react";
+
+interface FileEntry {
+  name: string;
+  type: "file" | "directory";
+  size?: number;
+  mimeType?: string;
+  modifiedAt?: string;
+}
+
+function formatSize(bytes?: number) {
+  if (!bytes) return "—";
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+function fileIcon(entry: FileEntry) {
+  if (entry.type === "directory") return <Folder className="h-4 w-4 text-blue-500" />;
+  const m = entry.mimeType ?? "";
+  if (m.startsWith("image/")) return <Image className="h-4 w-4 text-amber-500" />;
+  if (m.startsWith("audio/")) return <Music className="h-4 w-4 text-purple-500" />;
+  if (m.startsWith("video/")) return <Video className="h-4 w-4 text-red-500" />;
+  if (m === "application/pdf") return <FileText className="h-4 w-4 text-red-500" />;
+  if (m.startsWith("text/") || m === "application/json") return <FileText className="h-4 w-4 text-muted-foreground" />;
+  if (m.includes("zip") || m.includes("tar")) return <Archive className="h-4 w-4 text-muted-foreground" />;
+  return <File className="h-4 w-4 text-muted-foreground" />;
+}
+
+const API_URL = process.env.NEXT_PUBLIC_API_URL ?? "http://localhost:4000";
+
+/**
+ * Reusable file browser component.
+ * Shows a navigable file listing for a given root path.
+ */
+export function FileBrowser({
+  projectId,
+  rootPath,
+  compact = false,
+  onFileSelect,
+  initialEntries,
+}: {
+  projectId: string;
+  rootPath: string;
+  /** Compact mode: smaller text, no modified column */
+  compact?: boolean;
+  /** Called when a file is clicked. If provided, opens in-app instead of downloading. */
+  onFileSelect?: (filePath: string, fileName: string) => void;
+  /** Pre-fetched root-path entries (e.g. SSR'd alongside the page). Seeds
+   *  the initial useQuery cache so the first render doesn't trigger a
+   *  client-side refetch for content the parent already has. Navigating
+   *  into a subdirectory refetches as usual. */
+  initialEntries?: FileEntry[];
+}) {
+  const [currentPath, setCurrentPath] = useState(rootPath);
+  const [pathStack, setPathStack] = useState<string[]>([]);
+
+  const polpo = usePolpoClient(projectId);
+  const { data: listing, isLoading } = useQuery({
+    queryKey: ["files-list", projectId, currentPath],
+    queryFn: () => polpo.listFiles(currentPath) as unknown as Promise<{ path: string; entries: FileEntry[] }>,
+    // Only seed for the root path (where initialEntries was captured);
+    // subdirs fetch normally.
+    initialData:
+      initialEntries && currentPath === rootPath
+        ? { path: rootPath, entries: initialEntries }
+        : undefined,
+    // File listings change when install/remove/upload happens.
+    // 60s window keeps chatter down during navigation without
+    // making the browser feel stale after the user just uploaded.
+    staleTime: 60 * 1000,
+  });
+
+  const entries = listing?.entries ?? [];
+
+  const navigateTo = useCallback((dirName: string) => {
+    const newPath = `${currentPath}/${dirName}`;
+    setPathStack((prev) => [...prev, currentPath]);
+    setCurrentPath(newPath);
+  }, [currentPath]);
+
+  const navigateBack = useCallback(() => {
+    const prev = pathStack[pathStack.length - 1] ?? rootPath;
+    setPathStack((ps) => ps.slice(0, -1));
+    setCurrentPath(prev);
+  }, [pathStack, rootPath]);
+
+  const getDownloadUrl = (filePath: string) =>
+    `${API_URL}/v1/projects/${projectId}/data/v1/files/read?path=${encodeURIComponent(filePath)}&download=1`;
+
+  const handleClick = (entry: FileEntry) => {
+    if (entry.type === "directory") {
+      navigateTo(entry.name);
+    } else {
+      const filePath = `${currentPath}/${entry.name}`;
+      if (onFileSelect) {
+        onFileSelect(filePath, entry.name);
+      } else {
+        window.open(getDownloadUrl(filePath), "_blank");
+      }
+    }
+  };
+
+  const isAtRoot = pathStack.length === 0;
+  const displayPath = currentPath.replace(rootPath, "").replace(/^\//, "") || ".";
+
+  if (isLoading) {
+    return <div className="py-4 text-center text-xs text-muted-foreground">Loading...</div>;
+  }
+
+  if (entries.length === 0) {
+    return <div className="py-4 text-center text-xs text-muted-foreground">Empty directory</div>;
+  }
+
+  const textSize = compact ? "text-xs" : "text-sm";
+
+  return (
+    <div>
+      {/* Breadcrumb */}
+      {!isAtRoot && (
+        <button
+          onClick={navigateBack}
+          className="inline-flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground mb-2 transition-colors"
+        >
+          <ChevronLeft className="h-3 w-3" />
+          {displayPath || "Back"}
+        </button>
+      )}
+
+      {/* File list */}
+      <div className="rounded-lg border border-border overflow-hidden">
+        {entries.map((entry) => (
+          <div
+            key={entry.name}
+            onClick={() => handleClick(entry)}
+            className={`flex items-center gap-2.5 px-3 py-2 border-b border-border last:border-0 hover:bg-muted/30 cursor-pointer transition-colors ${textSize}`}
+          >
+            {fileIcon(entry)}
+            <span className="font-medium flex-1 truncate font-mono">{entry.name}</span>
+            {entry.type === "file" && entry.size != null && (
+              <span className="text-muted-foreground/50 text-[11px] shrink-0">{formatSize(entry.size)}</span>
+            )}
+            {entry.type === "directory" ? (
+              <ChevronRight className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
+            ) : (
+              <Download className="h-3.5 w-3.5 text-muted-foreground/40 shrink-0" />
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/components/dashboard/hint.tsx

@@ -0,0 +1,22 @@
+import type { ReactNode } from "react";
+import { Info } from "lucide-react";
+
+/**
+ * Info banner for tab descriptions — a bordered, padded callout with an
+ * info icon and a left accent rule. Replaces the faint muted one-liners
+ * that were easy to miss, so the context for each tab actually reads.
+ *
+ * Neo-brutalist: sharp corners, solid left accent, no gradient. An optional
+ * `action` (e.g. a Copy / Preview button) sits on the right, aligned to top.
+ */
+export function Hint({ children, action }: { children: ReactNode; action?: ReactNode }) {
+  return (
+    <div className="flex items-start justify-between gap-4 border border-border border-l-2 border-l-muted-foreground/40 bg-secondary/30 px-4 py-3">
+      <div className="flex items-start gap-2.5">
+        <Info className="mt-px h-4 w-4 shrink-0 text-muted-foreground" strokeWidth={1.75} />
+        <p className="text-[13px] leading-relaxed text-foreground">{children}</p>
+      </div>
+      {action && <div className="shrink-0">{action}</div>}
+    </div>
+  );
+}

package/components/dashboard/inference-mode.tsx

@@ -0,0 +1,15 @@
+import type { ReactNode } from "react";
+
+/**
+ * Single-tenant stub. The inference-mode selector (BYOK vs managed gateway
+ * credits) is a cloud-billing concept with no meaning in self-host, where all
+ * inference is BYOK. Kept as a pass-through wrapper so the settings form
+ * compiles; the managed-credits UI ships only in the cloud build.
+ */
+export type InferenceMode = string;
+
+export function InferenceModeRadio({
+  children,
+}: { children?: ReactNode } & Record<string, unknown>) {
+  return <>{children}</>;
+}

package/components/dashboard/manual-refresh-button.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useState, useTransition } from "react";
+import { RefreshCw } from "lucide-react";
+
+interface ManualRefreshButtonProps {
+  onRefresh?: () => void | Promise<unknown>;
+  isRefreshing?: boolean;
+  label?: string;
+  className?: string;
+}
+
+export function ManualRefreshButton({
+  onRefresh,
+  isRefreshing = false,
+  label = "Refresh",
+  className = "",
+}: ManualRefreshButtonProps) {
+  const router = useRouter();
+  const [isPending, startTransition] = useTransition();
+  const [isManualRefreshing, setIsManualRefreshing] = useState(false);
+  const refreshing = isRefreshing || isPending || isManualRefreshing;
+
+  async function handleClick() {
+    if (onRefresh) {
+      setIsManualRefreshing(true);
+      try {
+        await onRefresh();
+      } finally {
+        setIsManualRefreshing(false);
+      }
+      return;
+    }
+
+    startTransition(() => {
+      router.refresh();
+    });
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={handleClick}
+      disabled={refreshing}
+      className={`inline-flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors disabled:opacity-50 ${className}`}
+    >
+      <RefreshCw className={`h-3 w-3 ${refreshing ? "animate-spin" : ""}`} />
+      {label}
+    </button>
+  );
+}

package/components/dashboard/markdown.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import dynamic from "next/dynamic";
+import { Skeleton } from "#/components/ui/skeleton";
+
+const ReactMarkdown = dynamic(() => import("react-markdown"), {
+  loading: () => (
+    <div className="space-y-2">
+      <Skeleton className="h-4 w-3/4" />
+      <Skeleton className="h-3.5 w-full" />
+      <Skeleton className="h-3.5 w-5/6" />
+    </div>
+  ),
+});
+
+export function Markdown({ content }: { content: string }) {
+  return (
+    <div className="prose prose-sm prose-invert max-w-none
+      prose-headings:font-semibold prose-headings:tracking-tight prose-headings:text-foreground
+      prose-h1:text-lg prose-h2:text-sm prose-h3:text-xs
+      prose-p:text-muted-foreground prose-p:leading-relaxed
+      prose-li:text-muted-foreground prose-li:marker:text-muted-foreground/40
+      prose-strong:text-foreground prose-strong:font-medium
+      prose-code:text-xs prose-code:font-mono prose-code:bg-secondary prose-code:px-1 prose-code:py-0.5 prose-code:rounded
+      prose-pre:bg-card prose-pre:border prose-pre:border-border prose-pre:rounded-lg
+      prose-a:text-brand prose-a:no-underline hover:prose-a:underline
+    ">
+      <ReactMarkdown>{content}</ReactMarkdown>
+    </div>
+  );
+}

package/components/dashboard/mcp-install-panel.tsx

@@ -0,0 +1,196 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import { ExternalLink } from "lucide-react";
+import { CopyCard } from "#/components/dashboard/copy-card";
+import {
+  ClaudeCodeIcon,
+  CursorIcon,
+  WindsurfIcon,
+} from "#/components/icons/coding-agents";
+
+/**
+ * MCP install panel — rendered inside the Connect dialog's "Coding Agent"
+ * tab when the user picks the "MCP (remote tools)" sub-option.
+ *
+ * Conceptually distinct from the skills install flow: MCP adds a single
+ * OAuth-authenticated endpoint that a coding client (Cursor, Claude Desktop,
+ * etc.) calls at runtime — no files land in the user's repo, no skills are
+ * scaffolded. Intended for "I want to query my Polpo state from my editor"
+ * use cases, not "I want to develop agents against Polpo locally".
+ *
+ * Each client has its own config surface, so we render a per-client
+ * snippet instead of one generic `polpo install` command. Cursor additionally
+ * gets a 1-click deep link (`cursor://anysphere.cursor-deeplink/mcp/install`);
+ * other clients require pasting JSON into a config file.
+ */
+
+// The MCP server lives on the apex host — it's scoped to the user by
+// Better Auth session, not by subdomain. Using `api.polpo.sh` keeps OAuth
+// discovery on the same origin (avoids cross-origin .well-known quirks that
+// some MCP clients are sensitive to).
+const MCP_URL = "https://api.polpo.sh/v1/mcp";
+
+type ClientId = "cursor" | "claude-desktop" | "claude-code" | "windsurf" | "generic";
+
+interface MCPClient {
+  id: ClientId;
+  label: string;
+  Icon: (props: { className?: string }) => React.ReactElement;
+  /** Short line of context shown under the client name. */
+  hint: string;
+  /** The snippet body the user copies. */
+  snippet: string;
+  /** Label shown on the CopyCard (e.g. "mcp.json", "terminal"). */
+  snippetLabel: string;
+  /** Path-to-edit hint shown above the snippet, if any. */
+  pathHint?: string;
+  /** Optional 1-click deep link (only Cursor at the moment). */
+  deepLink?: { href: string; label: string };
+}
+
+function buildCursorDeepLink(): string {
+  // Cursor's deep-link spec: a base64-encoded JSON config blob.
+  // Ref: https://docs.cursor.com/features/mcp (Share an MCP server)
+  const payload = JSON.stringify({ url: MCP_URL });
+  // btoa is fine here — we're running in the browser.
+  const b64 = typeof window !== "undefined" ? window.btoa(payload) : "";
+  return `cursor://anysphere.cursor-deeplink/mcp/install?name=polpo&config=${b64}`;
+}
+
+function useMcpClients(): MCPClient[] {
+  return useMemo(() => {
+    const jsonConfig = JSON.stringify(
+      { mcpServers: { polpo: { url: MCP_URL } } },
+      null,
+      2,
+    );
+    return [
+      {
+        id: "cursor",
+        label: "Cursor",
+        Icon: CursorIcon,
+        hint: "1-click install or paste into ~/.cursor/mcp.json",
+        snippet: jsonConfig,
+        snippetLabel: "~/.cursor/mcp.json",
+        pathHint: "Global: ~/.cursor/mcp.json · Project: .cursor/mcp.json",
+        deepLink: {
+          href: buildCursorDeepLink(),
+          label: "Install in Cursor",
+        },
+      },
+      {
+        id: "claude-desktop",
+        label: "Claude Desktop",
+        Icon: ClaudeCodeIcon,
+        hint: "Paste into claude_desktop_config.json, then restart.",
+        snippet: jsonConfig,
+        snippetLabel: "claude_desktop_config.json",
+        pathHint:
+          "macOS: ~/Library/Application Support/Claude · Linux: ~/.config/Claude",
+      },
+      {
+        id: "claude-code",
+        label: "Claude Code",
+        Icon: ClaudeCodeIcon,
+        hint: "Run once — registers Polpo as a remote MCP server.",
+        snippet: `claude mcp add --transport http polpo ${MCP_URL}`,
+        snippetLabel: "terminal",
+      },
+      {
+        id: "windsurf",
+        label: "Windsurf",
+        Icon: WindsurfIcon,
+        hint: "Paste into Windsurf's MCP config file.",
+        snippet: JSON.stringify(
+          { mcpServers: { polpo: { serverUrl: MCP_URL } } },
+          null,
+          2,
+        ),
+        snippetLabel: "~/.codeium/windsurf/mcp_config.json",
+      },
+      {
+        id: "generic",
+        label: "Other",
+        // Icon reuse: Claude Code icon as a neutral stand-in.
+        Icon: ClaudeCodeIcon,
+        hint: "Any MCP client that supports Streamable HTTP + OAuth.",
+        snippet: jsonConfig,
+        snippetLabel: "mcp config",
+      },
+    ];
+  }, []);
+}
+
+const VERIFY_PROMPT =
+  "List the Polpo projects in my organization and summarise how many agents each one has.";
+
+export function McpInstallPanel() {
+  const clients = useMcpClients();
+  const [selected, setSelected] = useState<ClientId>("cursor");
+  const client = clients.find((c) => c.id === selected)!;
+
+  return (
+    <div className="flex flex-col gap-5">
+      {/* Client picker — compact pill row. Single-select: each client has
+          a different config shape, so showing one at a time is clearer
+          than a multi-select JSON dump. */}
+      <div className="flex flex-wrap items-center gap-2">
+        {clients.map((c) => {
+          const active = c.id === selected;
+          return (
+            <button
+              key={c.id}
+              type="button"
+              onClick={() => setSelected(c.id)}
+              className={[
+                "inline-flex items-center gap-1.5 border px-2.5 py-1.5 text-xs font-medium transition-colors",
+                active
+                  ? "border-foreground/40 bg-foreground text-background"
+                  : "border-border bg-background text-muted-foreground hover:text-foreground",
+              ].join(" ")}
+              aria-pressed={active}
+            >
+              <c.Icon className="h-3.5 w-3.5" />
+              {c.label}
+            </button>
+          );
+        })}
+      </div>
+
+      {/* Hint + optional 1-click install */}
+      <div className="flex flex-col gap-2">
+        <p className="text-sm leading-6 text-muted-foreground">{client.hint}</p>
+        {client.pathHint && (
+          <p className="text-[11px] leading-5 text-muted-foreground font-mono">
+            {client.pathHint}
+          </p>
+        )}
+        {client.deepLink && (
+          <a
+            href={client.deepLink.href}
+            className="inline-flex w-fit items-center gap-1.5 rounded border border-foreground/20 bg-foreground/5 px-3 py-1.5 text-sm font-medium text-foreground hover:bg-foreground hover:text-background transition-colors"
+          >
+            <client.Icon className="h-4 w-4" />
+            {client.deepLink.label}
+            <ExternalLink className="h-3.5 w-3.5" />
+          </a>
+        )}
+      </div>
+
+      {/* Snippet */}
+      <CopyCard label={client.snippetLabel} value={client.snippet} />
+
+      {/* Verify — shared across clients */}
+      <div className="flex flex-col gap-2 rounded border border-border bg-background/60 p-3">
+        <div className="flex items-baseline justify-between">
+          <p className="text-xs font-medium text-foreground">Verify</p>
+          <p className="text-[11px] text-muted-foreground">
+            First call opens a browser tab for OAuth login
+          </p>
+        </div>
+        <CopyCard label="verify prompt" value={VERIFY_PROMPT} />
+      </div>
+    </div>
+  );
+}