@polpo-ai/dashboard 0.1.0

package/components/dashboard/task-studio.tsx

@@ -0,0 +1,224 @@
+"use client";
+
+/**
+ * Task Studio — the task detail surface as a single fast client component.
+ *
+ * Mirrors AgentStudio: a server shell fetches the initial task (and activity)
+ * once, hands it to this ONE client component, which renders client-switched
+ * tabs (Overview / Activity / Output / Assessment) via `useState` + a URL
+ * `?tab=` param (instant, deep-linkable, no per-tab navigation).
+ *
+ * Pure dogfood: task data is fetched through the published SDK via
+ * `usePolpoClient` (getTask + getTaskActivityFull), hydrated from the
+ * server shell's `initialData`. No raw `dataApi`/`api` in the client.
+ */
+
+import { useEffect, useState } from "react";
+import Link from "next/link";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import {
+  ListChecks,
+  FileText,
+  Activity,
+  Terminal,
+  ClipboardCheck,
+  type LucideIcon,
+} from "lucide-react";
+import { useQuery } from "@tanstack/react-query";
+import type { Task } from "@polpo-ai/core";
+import { usePolpoClient } from "#/lib/polpo-client";
+import { Breadcrumb } from "#/components/dashboard/breadcrumb";
+import type { BlueprintContext } from "#/app/(dashboard)/projects/[id]/tasks/[taskId]/blueprint";
+import TaskOverviewView from "#/app/(dashboard)/projects/[id]/tasks/[taskId]/view";
+import TaskOutputView from "#/app/(dashboard)/projects/[id]/tasks/[taskId]/output/view";
+import TaskAssessmentView from "#/app/(dashboard)/projects/[id]/tasks/[taskId]/assessment/view";
+import TaskActivityView, {
+  type TaskActivityPayload,
+} from "#/app/(dashboard)/projects/[id]/tasks/[taskId]/activity/view";
+
+const statusColor: Record<string, string> = {
+  done: "bg-brand",
+  in_progress: "bg-foreground animate-pulse",
+  pending: "bg-muted-foreground/30",
+  failed: "bg-destructive",
+  review: "bg-yellow-500",
+  assigned: "bg-muted-foreground/50",
+  draft: "bg-muted-foreground/20",
+  awaiting_approval: "bg-yellow-500",
+};
+
+const ACTIVE_TASK_STATUSES = new Set([
+  "pending",
+  "assigned",
+  "in_progress",
+  "review",
+  "awaiting_approval",
+]);
+
+type StudioTab = "overview" | "activity" | "output" | "assessment";
+
+const TABS: { key: StudioTab; label: string; icon: LucideIcon }[] = [
+  { key: "overview", label: "Overview", icon: FileText },
+  { key: "activity", label: "Activity", icon: Activity },
+  { key: "output", label: "Output", icon: Terminal },
+  { key: "assessment", label: "Assessment", icon: ClipboardCheck },
+];
+
+export interface TaskStudioInitialData {
+  task: Task | null;
+  activity: TaskActivityPayload;
+  blueprint: BlueprintContext | null;
+}
+
+export function TaskStudio({
+  projectId,
+  taskId,
+  initialData,
+}: {
+  projectId: string;
+  taskId: string;
+  initialData: TaskStudioInitialData;
+}) {
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const polpo = usePolpoClient(projectId);
+
+  // Tab is URL-driven (?tab=) so deep links work and the copilot can point
+  // straight at a tab. Falls back to "overview".
+  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 ?? "overview");
+
+  // React to external URL changes (back/forward, copilot navigation).
+  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());
+    if (key === "overview") params.delete("tab");
+    else params.set("tab", key);
+    const qs = params.toString();
+    router.replace(qs ? `${pathname}?${qs}` : pathname, { scroll: false });
+  }
+
+  // Single source of truth for the task — dogfood via SDK getTask, hydrated
+  // from the server shell. When the task is a blueprint (no real instance yet)
+  // there's nothing to fetch, so we keep the synthetic initialData.
+  const isBlueprint = Boolean(initialData.blueprint) && !initialData.activity.task;
+  const { data: task = initialData.task } = useQuery<Task | null>({
+    queryKey: ["task", projectId, taskId],
+    // SDK getTask returns its own re-exported Task shape; the views consume
+    // the core Task. They're structurally equivalent — cast through unknown
+    // to bridge the SDK/core type-export skew (see missions/view.tsx note).
+    queryFn: () => polpo.getTask(taskId) as unknown as Promise<Task | null>,
+    initialData: initialData.task,
+    enabled: !isBlueprint,
+    refetchInterval: (query) => {
+      const t = query.state.data;
+      return t && ACTIVE_TASK_STATUSES.has(t.status) ? 3000 : false;
+    },
+  });
+
+  const blueprint = initialData.blueprint;
+
+  if (!task) {
+    return (
+      <div className="flex h-[calc(100vh-7rem)] min-h-[520px] flex-col overflow-hidden">
+        <div className="flex shrink-0 items-center gap-2 pb-3">
+          <Breadcrumb
+            items={[
+              { label: "Tasks", href: `/projects/${projectId}/tasks`, icon: ListChecks },
+              { label: taskId },
+            ]}
+          />
+        </div>
+        <div className="border border-border p-10 text-center">
+          <FileText
+            className="mx-auto h-5 w-5 text-muted-foreground/40"
+            strokeWidth={1.5}
+          />
+          <p className="mt-2 text-sm text-muted-foreground">Task not found.</p>
+          <Link
+            href={`/projects/${projectId}/tasks`}
+            className="mt-3 inline-block text-xs text-muted-foreground underline underline-offset-2 hover:text-foreground"
+          >
+            Back to tasks
+          </Link>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    // Fills the viewport (no page scroll); only the inner pane scrolls.
+    <div className="flex h-[calc(100vh-7rem)] min-h-[520px] flex-col overflow-hidden">
+      {/* Top bar — breadcrumb + status. Fixed (does not scroll). */}
+      <div className="flex shrink-0 items-center gap-2 pb-3">
+        <Breadcrumb
+          items={[
+            { label: "Tasks", href: `/projects/${projectId}/tasks`, icon: ListChecks },
+            { label: task.title || taskId },
+          ]}
+        />
+        <div className="ml-auto flex items-center gap-2 text-xs text-muted-foreground">
+          <span
+            className={`h-2 w-2 rounded-full ${statusColor[task.status ?? "pending"]}`}
+          />
+          <span className="font-medium text-foreground">{task.status}</span>
+        </div>
+      </div>
+
+      {/* Sticky tab nav (does not scroll) */}
+      <div className="shrink-0 pr-4">
+        <div className="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 === "overview" && (
+          <TaskOverviewView task={task} blueprint={blueprint ?? undefined} />
+        )}
+        {tab === "activity" && (
+          <TaskActivityView
+            projectId={projectId}
+            taskId={taskId}
+            initialActivity={initialData.activity}
+          />
+        )}
+        {tab === "output" && (
+          <TaskOutputView task={task} blueprint={blueprint} />
+        )}
+        {tab === "assessment" && (
+          <TaskAssessmentView task={task} blueprint={blueprint} />
+        )}
+      </div>
+    </div>
+  );
+}

package/components/dashboard/top-header.tsx

@@ -0,0 +1,203 @@
+"use client";
+
+import Image from "next/image";
+import Link from "next/link";
+import { useState } from "react";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import {
+  ArrowLeft,
+  BookOpen,
+  ChevronDown,
+  Check,
+  Loader2,
+  SquarePen,
+  Settings,
+} from "lucide-react";
+import { ConnectButton } from "#/components/dashboard/connect-dialog";
+import { Popover, PopoverContent, PopoverTrigger } from "#/components/ui/popover";
+
+const API_URL = process.env.NEXT_PUBLIC_API_URL ?? "http://localhost:4000";
+
+/**
+ * Single-tenant top header: brandmark + Connect + Docs. No org breadcrumb,
+ * plan badge, credits or user menu — those are cloud-only surfaces.
+ */
+export function TopHeader() {
+  return (
+    <header className="flex h-12 items-center justify-between border-b border-border bg-card px-4 md:px-5 shrink-0">
+      <div className="flex items-center gap-3 min-w-0">
+        <Link href="/projects/local" data-testid="header-logo" className="flex items-center shrink-0">
+          <Image
+            src="/polpo-brandmark.svg"
+            alt="Polpo"
+            width={24}
+            height={24}
+            priority
+            className="h-[18px] w-[18px]"
+          />
+        </Link>
+      </div>
+
+      <div className="flex items-center gap-2 shrink-0">
+        <ConnectButton />
+        <a
+          href="https://docs.polpo.sh"
+          target="_blank"
+          rel="noopener noreferrer"
+          data-testid="header-docs"
+          className="inline-flex items-center gap-1.5 rounded-md px-2.5 py-1.5 text-xs text-muted-foreground hover:text-foreground hover:bg-secondary/50 transition-colors"
+        >
+          <BookOpen className="h-3.5 w-3.5" strokeWidth={1.5} />
+          <span className="hidden sm:inline">Docs</span>
+        </a>
+      </div>
+    </header>
+  );
+}
+
+/**
+ * Project name → lightweight rename popover. Same data-plane endpoint as
+ * settings-form. `orgId` is accepted (optional, unused) for call-site parity
+ * with the cloud sidebar.
+ */
+type Mode = "menu" | "rename";
+
+export function ProjectSwitcher({
+  projectId,
+  projectName,
+  variant = "header",
+}: {
+  projectId: string;
+  projectName: string;
+  orgId?: string;
+  variant?: "header" | "sidebar";
+}) {
+  const queryClient = useQueryClient();
+  const [open, setOpen] = useState(false);
+  const [mode, setMode] = useState<Mode>("menu");
+  const [name, setName] = useState(projectName);
+  const [saved, setSaved] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const renameMutation = useMutation({
+    mutationFn: async (newName: string) => {
+      const res = await fetch(`${API_URL}/v1/projects/${projectId}`, {
+        method: "PATCH",
+        credentials: "include",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ name: newName }),
+      });
+      if (!res.ok) {
+        const d = await res.json().catch(() => ({}));
+        throw new Error(d?.error ?? `Failed (${res.status})`);
+      }
+      return res.json();
+    },
+    onSuccess: () => {
+      setError(null);
+      setSaved(true);
+      setTimeout(() => {
+        setSaved(false);
+        setOpen(false);
+      }, 1200);
+      queryClient.invalidateQueries({ queryKey: ["project", projectId] });
+    },
+    onError: (err: Error) => setError(err.message),
+  });
+
+  const changed = name.trim() !== projectName && name.trim().length > 0;
+
+  return (
+    <Popover
+      open={open}
+      onOpenChange={(o) => {
+        setOpen(o);
+        if (o) {
+          setMode("menu");
+          setName(projectName);
+          setError(null);
+          setSaved(false);
+        }
+      }}
+    >
+      <PopoverTrigger
+        data-testid={variant === "sidebar" ? "sidebar-project-switcher" : "header-project-switcher"}
+        className={
+          variant === "sidebar"
+            ? "group flex w-full items-center justify-between gap-1.5 border border-border bg-card px-2.5 py-1.5 text-sm font-medium truncate text-foreground hover:border-foreground/30 data-[popup-open]:border-foreground/40 data-[popup-open]:bg-secondary/50 transition-colors"
+            : "group inline-flex items-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium truncate text-foreground hover:border-border hover:bg-secondary/70 data-[popup-open]:border-border data-[popup-open]:bg-secondary transition-colors"
+        }
+      >
+        <span className="truncate">{projectName}</span>
+        <ChevronDown className="h-3 w-3 shrink-0 text-muted-foreground group-hover:text-foreground transition-colors" />
+      </PopoverTrigger>
+      <PopoverContent align="start" sideOffset={6} className="w-72 p-2">
+        {mode === "menu" ? (
+          <div className="flex flex-col">
+            <button
+              type="button"
+              onClick={() => setMode("rename")}
+              className="flex items-center gap-2 rounded-md px-3 py-2 text-sm leading-5 text-muted-foreground hover:bg-secondary/50 hover:text-foreground transition-colors"
+            >
+              <SquarePen className="h-3.5 w-3.5 shrink-0" />
+              Rename project
+            </button>
+            <Link
+              href={`/projects/${projectId}/settings`}
+              onClick={() => setOpen(false)}
+              className="flex items-center gap-2 rounded-md px-3 py-2 text-sm leading-5 text-muted-foreground hover:bg-secondary/50 hover:text-foreground transition-colors"
+            >
+              <Settings className="h-3.5 w-3.5 shrink-0" />
+              Project settings
+            </Link>
+          </div>
+        ) : (
+          <form
+            onSubmit={(e) => {
+              e.preventDefault();
+              if (changed) renameMutation.mutate(name.trim());
+            }}
+            className="flex flex-col gap-2 p-1"
+          >
+            <div className="flex items-center justify-between">
+              <button
+                type="button"
+                onClick={() => setMode("menu")}
+                className="inline-flex items-center gap-1 text-[11px] text-muted-foreground hover:text-foreground transition-colors"
+              >
+                <ArrowLeft className="h-3 w-3" />
+                Back
+              </button>
+              <span className="text-[10px] font-mono uppercase tracking-wider text-muted-foreground">
+                Rename
+              </span>
+            </div>
+            <div className="flex items-stretch gap-2">
+              <input
+                type="text"
+                value={name}
+                autoFocus
+                onChange={(e) => setName(e.target.value)}
+                className="flex-1 min-w-0 border border-border bg-transparent px-2.5 py-1.5 text-sm focus:border-foreground/30 focus:outline-none transition-colors"
+              />
+              <button
+                type="submit"
+                disabled={!changed || renameMutation.isPending}
+                className="rounded border border-border bg-foreground/5 px-3 py-1.5 text-xs font-medium text-foreground hover:bg-foreground hover:text-background transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
+              >
+                {renameMutation.isPending ? (
+                  <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                ) : saved ? (
+                  <Check className="h-3.5 w-3.5" />
+                ) : (
+                  "Save"
+                )}
+              </button>
+            </div>
+            {error && <p className="text-xs text-destructive">{error}</p>}
+          </form>
+        )}
+      </PopoverContent>
+    </Popover>
+  );
+}

package/components/dashboard/webhook-deliveries.tsx

@@ -0,0 +1,234 @@
+"use client";
+
+/**
+ * Webhook delivery inspector.
+ *
+ * Renders a paginated, auto-refreshing table of webhook delivery attempts
+ * for a single webhook. Each row can be expanded to show the request body
+ * and (truncated) response body, and re-fired with the "Redeliver" button.
+ *
+ * Auto-refresh is intentionally chunky (5s). Webhooks are not chat — the
+ * user opens this panel to debug, not to watch a live stream. SSE would be
+ * overkill and 5s polling is cheap on the data plane.
+ */
+
+import { useState } from "react";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { ChevronDown, ChevronRight, Loader2, RefreshCw } from "lucide-react";
+import { fetchDataPlane, mutateDataPlane } from "#/lib/data-client";
+
+interface Webhook {
+  id: string;
+  url: string;
+  events: string[];
+}
+
+interface Delivery {
+  id: string;
+  webhook_id: string;
+  event: string;
+  attempt: number;
+  status: "pending" | "success" | "failed" | "retrying";
+  status_code: number | null;
+  response_body: string | null;
+  error: string | null;
+  duration_ms: number | null;
+  payload: unknown;
+  next_retry_at: string | null;
+  created_at: string;
+  completed_at: string | null;
+}
+
+interface DeliveriesResponse {
+  ok: boolean;
+  data: Delivery[];
+  next_cursor: string | null;
+}
+
+const STATUS_STYLES: Record<Delivery["status"], string> = {
+  success: "bg-emerald-500/10 text-emerald-600 ring-1 ring-emerald-500/20",
+  failed: "bg-red-500/10 text-red-600 ring-1 ring-red-500/20",
+  retrying: "bg-amber-500/10 text-amber-600 ring-1 ring-amber-500/20",
+  pending: "bg-secondary text-muted-foreground ring-1 ring-border",
+};
+
+export function WebhookDeliveries({
+  projectId,
+  webhook,
+}: {
+  projectId: string;
+  webhook: Webhook;
+}) {
+  const queryClient = useQueryClient();
+  const [expanded, setExpanded] = useState<Set<string>>(new Set());
+
+  const { data, isLoading, isFetching, refetch } = useQuery({
+    queryKey: ["webhook-deliveries", projectId, webhook.id],
+    queryFn: () =>
+      fetchDataPlane<DeliveriesResponse>(
+        projectId,
+        `/v1/webhooks/${webhook.id}/deliveries?limit=50`,
+      ),
+    // 5s auto-refresh while the panel is mounted. React Query pauses
+    // polling when the tab loses focus, which is what we want.
+    refetchInterval: 5000,
+  });
+
+  const redeliver = useMutation({
+    mutationFn: (deliveryId: string) =>
+      mutateDataPlane(
+        projectId,
+        `/v1/webhooks/${webhook.id}/deliveries/${deliveryId}/redeliver`,
+        { method: "POST" },
+      ),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["webhook-deliveries", projectId, webhook.id],
+      });
+    },
+  });
+
+  const deliveries = data?.data ?? [];
+
+  function toggle(id: string) {
+    setExpanded((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  }
+
+  return (
+    <div className="space-y-3">
+      <header className="flex items-start justify-between gap-4">
+        <div className="min-w-0">
+          <p className="text-xs uppercase tracking-wide text-muted-foreground">
+            Endpoint
+          </p>
+          <p className="font-mono text-sm break-all">{webhook.url}</p>
+        </div>
+        <button
+          onClick={() => refetch()}
+          className="inline-flex items-center gap-1.5 rounded border border-border px-2.5 py-1 text-xs hover:border-foreground/30 transition-colors"
+          disabled={isFetching}
+          title="Refresh"
+        >
+          <RefreshCw
+            className={`h-3 w-3 ${isFetching ? "animate-spin" : ""}`}
+          />
+          Refresh
+        </button>
+      </header>
+
+      {isLoading ? (
+        <div className="rounded border border-border p-6 text-center text-sm text-muted-foreground">
+          <Loader2 className="mx-auto h-4 w-4 animate-spin" />
+        </div>
+      ) : deliveries.length === 0 ? (
+        <div className="rounded border border-border p-8 text-center text-sm text-muted-foreground">
+          No deliveries yet. Trigger an event to see attempts here.
+        </div>
+      ) : (
+        <div className="rounded border border-border overflow-hidden">
+          <div className="grid grid-cols-[1.5rem_minmax(0,1fr)_auto_auto_auto_auto] items-center gap-3 border-b border-border bg-secondary/40 px-3 py-2 text-[11px] uppercase tracking-wide text-muted-foreground">
+            <span />
+            <span>Event</span>
+            <span>Status</span>
+            <span>Code</span>
+            <span>Latency</span>
+            <span />
+          </div>
+          {deliveries.map((d) => {
+            const isOpen = expanded.has(d.id);
+            return (
+              <div
+                key={d.id}
+                className="border-b border-border last:border-0"
+              >
+                <button
+                  onClick={() => toggle(d.id)}
+                  className="grid w-full grid-cols-[1.5rem_minmax(0,1fr)_auto_auto_auto_auto] items-center gap-3 px-3 py-2 text-left text-sm hover:bg-secondary/30 transition-colors"
+                >
+                  {isOpen ? (
+                    <ChevronDown className="h-3.5 w-3.5 text-muted-foreground" />
+                  ) : (
+                    <ChevronRight className="h-3.5 w-3.5 text-muted-foreground" />
+                  )}
+                  <div className="min-w-0">
+                    <p className="font-mono text-xs truncate">{d.event}</p>
+                    <p className="text-[11px] text-muted-foreground">
+                      {new Date(d.created_at).toLocaleString()} · attempt{" "}
+                      {d.attempt}
+                    </p>
+                  </div>
+                  <span
+                    className={`rounded-full px-2 py-0.5 text-[10px] font-medium ${STATUS_STYLES[d.status]}`}
+                  >
+                    {d.status}
+                  </span>
+                  <span className="font-mono text-xs text-muted-foreground tabular-nums">
+                    {d.status_code ?? "—"}
+                  </span>
+                  <span className="font-mono text-xs text-muted-foreground tabular-nums">
+                    {d.duration_ms != null ? `${d.duration_ms}ms` : "—"}
+                  </span>
+                  <span
+                    role="button"
+                    tabIndex={0}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      redeliver.mutate(d.id);
+                    }}
+                    onKeyDown={(e) => {
+                      if (e.key === "Enter" || e.key === " ") {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        redeliver.mutate(d.id);
+                      }
+                    }}
+                    aria-disabled={redeliver.isPending}
+                    className={`inline-flex items-center gap-1 rounded border border-border px-2 py-0.5 text-[11px] cursor-pointer hover:border-foreground/30 transition-colors ${
+                      redeliver.isPending ? "opacity-50 pointer-events-none" : ""
+                    }`}
+                  >
+                    Redeliver
+                  </span>
+                </button>
+
+                {isOpen && (
+                  <div className="grid gap-3 border-t border-border bg-secondary/20 px-6 py-3 md:grid-cols-2">
+                    <div>
+                      <p className="text-[10px] uppercase tracking-wide text-muted-foreground mb-1">
+                        Request payload
+                      </p>
+                      <pre className="max-h-72 overflow-auto rounded border border-border bg-background p-2 font-mono text-[11px]">
+                        {JSON.stringify(d.payload, null, 2)}
+                      </pre>
+                    </div>
+                    <div>
+                      <p className="text-[10px] uppercase tracking-wide text-muted-foreground mb-1">
+                        Response
+                      </p>
+                      <pre className="max-h-72 overflow-auto rounded border border-border bg-background p-2 font-mono text-[11px] whitespace-pre-wrap break-all">
+                        {d.response_body ??
+                          d.error ??
+                          (d.status === "pending" ? "pending…" : "(empty)")}
+                      </pre>
+                      {d.next_retry_at && (
+                        <p className="mt-1 text-[11px] text-muted-foreground">
+                          Next retry:{" "}
+                          {new Date(d.next_retry_at).toLocaleString()}
+                        </p>
+                      )}
+                    </div>
+                  </div>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}