@polpo-ai/dashboard 0.1.0

package/app/(dashboard)/projects/[id]/agents/view.tsx

@@ -0,0 +1,283 @@
+"use client";
+
+import { useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { useParams, useRouter } from "next/navigation";
+import Link from "next/link";
+// SDK-bundled types — consistent with what `polpo.X()` returns.
+import type { AgentConfig } from "@polpo-ai/sdk";
+import { RefreshCw, ChevronRight, Users, User, Search, Plus, Loader2 } from "lucide-react";
+import { usePolpoClient } from "#/lib/polpo-client";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "#/components/ui/dialog";
+
+export interface Team {
+  name: string;
+  description?: string;
+  createdAt?: string;
+}
+
+export default function AgentsView({
+  initialAgents,
+  initialTeams,
+}: {
+  initialAgents: AgentConfig[];
+  initialTeams: Team[];
+}) {
+  const { id } = useParams<{ id: string }>();
+  const router = useRouter();
+  const [tab, setTab] = useState<"agents" | "teams">("agents");
+  const [search, setSearch] = useState("");
+
+  const polpo = usePolpoClient(id);
+  const { data: agents = [], isFetching: fa, refetch: ra } = useQuery({
+    queryKey: ["agents", id],
+    queryFn: () => polpo.getAgents(),
+    initialData: initialAgents,
+  });
+
+  const { data: teams = [] } = useQuery({
+    queryKey: ["teams", id],
+    queryFn: () => polpo.getTeams() as unknown as Promise<Team[]>,
+    initialData: initialTeams,
+  });
+
+  return (
+    <div>
+      {/* Header */}
+      <div className="flex items-start justify-between gap-4">
+        <div>
+          <h2 className="text-lg font-semibold tracking-tight">Agents</h2>
+          <p className="mt-1 text-xs text-muted-foreground">
+            {agents.length} agents across {teams.length} teams.
+          </p>
+        </div>
+        <NewAgentButton projectId={id} />
+      </div>
+
+      {/* Search + Tabs + Refresh */}
+      <div className="mt-3 flex items-center gap-2 flex-wrap">
+        <div className="relative">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" />
+          <input
+            type="text"
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            placeholder="Search..."
+            className="w-48 border border-border bg-transparent pl-9 pr-3 py-1.5 text-xs placeholder:text-muted-foreground/40 focus:border-foreground/30 focus:outline-none transition-colors"
+          />
+        </div>
+
+        <div className="flex items-center gap-1 rounded-lg bg-muted/50 p-1">
+          <button
+            onClick={() => setTab("agents")}
+            className={`inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium transition-colors ${
+              tab === "agents" ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
+            }`}
+          >
+            <User className="h-3.5 w-3.5" />
+            Agents ({agents.length})
+          </button>
+          <button
+            onClick={() => setTab("teams")}
+            className={`inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium transition-colors ${
+              tab === "teams" ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
+            }`}
+          >
+            <Users className="h-3.5 w-3.5" />
+            Teams ({teams.length})
+          </button>
+        </div>
+
+        <button
+          onClick={() => ra()}
+          disabled={fa}
+          className="ml-auto inline-flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors disabled:opacity-50"
+        >
+          <RefreshCw className={`h-3 w-3 ${fa ? "animate-spin" : ""}`} />
+          Refresh
+        </button>
+      </div>
+
+      {tab === "agents" ? (() => {
+        const q = search.toLowerCase();
+        const filteredAgents = q
+          ? agents.filter((a) => a.name.toLowerCase().includes(q) || (a.role ?? "").toLowerCase().includes(q) || (a as any).teamName?.toLowerCase().includes(q))
+          : agents;
+        return filteredAgents.length > 0 ? (
+          <div className="mt-4 border border-border overflow-hidden overflow-x-auto">
+            <table className="w-full text-sm min-w-[600px]">
+              <thead>
+                <tr className="border-b border-border bg-secondary/50">
+                  <th className="px-4 py-2.5 text-left text-xs font-medium text-muted-foreground">Agent</th>
+                  <th className="px-4 py-2.5 text-left text-xs font-medium text-muted-foreground">Team</th>
+                  <th className="px-4 py-2.5 text-left text-xs font-medium text-muted-foreground">Model</th>
+                  <th className="px-4 py-2.5 text-left text-xs font-medium text-muted-foreground">Tools</th>
+                  <th className="w-8" />
+                </tr>
+              </thead>
+              <tbody>
+                {filteredAgents.map(agent => {
+                  const href = `/projects/${id}/agents/${encodeURIComponent(agent.name)}`;
+                  return (
+                  <tr
+                    key={agent.name}
+                    onClick={() => router.push(href)}
+                    className="border-b border-border last:border-0 hover:bg-secondary/30 transition-colors group cursor-pointer"
+                  >
+                    <td className="px-4 py-3">
+                      <Link
+                        href={href}
+                        onClick={(e) => e.stopPropagation()}
+                        className="font-mono text-xs font-semibold hover:underline"
+                      >
+                        {agent.name}
+                      </Link>
+                      {agent.role && (
+                        <span className="block mt-0.5 text-[11px] text-muted-foreground/60 truncate max-w-[200px]">{agent.role}</span>
+                      )}
+                    </td>
+                    <td className="px-4 py-3">
+                      {(agent as any).teamName ? (
+                        <span className="rounded bg-secondary px-1.5 py-0.5 text-[10px] font-mono text-muted-foreground">
+                          {(agent as any).teamName}
+                        </span>
+                      ) : (
+                        <span className="text-[10px] text-muted-foreground/30">&mdash;</span>
+                      )}
+                    </td>
+                    <td className="px-4 py-3 font-mono text-xs text-muted-foreground">{agent.model ?? "\u2014"}</td>
+                    <td className="px-4 py-3 text-xs text-muted-foreground">
+                      {agent.allowedTools?.length ?? 0}
+                    </td>
+                    <td className="px-2 py-3">
+                      <ChevronRight className="h-3.5 w-3.5 text-muted-foreground/30 group-hover:text-muted-foreground transition-colors" />
+                    </td>
+                  </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          </div>
+        ) : (
+          <div className="mt-4 border border-border p-8 text-center text-sm text-muted-foreground">
+            {search ? "No agents matching your search." : "No agents deployed. Use polpo deploy to deploy agents."}
+          </div>
+        );
+      })() : (
+        teams.length > 0 ? (
+          <div className="mt-4 border border-border overflow-hidden">
+            <table className="w-full text-sm">
+              <thead>
+                <tr className="border-b border-border bg-secondary/50">
+                  <th className="px-4 py-2.5 text-left text-xs font-medium text-muted-foreground">Team</th>
+                  <th className="px-4 py-2.5 text-left text-xs font-medium text-muted-foreground">Description</th>
+                  <th className="px-4 py-2.5 text-left text-xs font-medium text-muted-foreground w-20">Agents</th>
+                  <th className="px-4 py-2.5 text-left text-xs font-medium text-muted-foreground w-28">Created</th>
+                </tr>
+              </thead>
+              <tbody>
+                {teams.map(team => {
+                  const teamAgents = agents.filter(a => (a as any).teamName === team.name);
+                  return (
+                    <tr key={team.name} className="border-b border-border last:border-0">
+                      <td className="px-4 py-3 font-mono text-xs font-semibold">{team.name}</td>
+                      <td className="px-4 py-3 text-xs text-muted-foreground">{team.description ?? "\u2014"}</td>
+                      <td className="px-4 py-3 text-xs text-muted-foreground">{teamAgents.length}</td>
+                      <td className="px-4 py-3 text-xs text-muted-foreground">
+                        {team.createdAt
+                          ? new Date(team.createdAt).toLocaleDateString("en-US", { month: "short", day: "numeric" })
+                          : "\u2014"
+                        }
+                      </td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          </div>
+        ) : (
+          <div className="mt-4 border border-border p-8 text-center text-sm text-muted-foreground">
+            No teams configured.
+          </div>
+        )
+      )}
+    </div>
+  );
+}
+
+/**
+ * New agent — asks for a name, creates the agent via the SDK (dogfood),
+ * then drops the user straight into the Agent Builder to configure it.
+ */
+function NewAgentButton({ projectId }: { projectId: string }) {
+  const polpo = usePolpoClient(projectId);
+  const router = useRouter();
+  const [open, setOpen] = useState(false);
+  const [name, setName] = useState("");
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  async function create() {
+    const trimmed = name.trim();
+    if (!trimmed) return;
+    setSaving(true);
+    setError(null);
+    try {
+      await polpo.addAgent({ name: trimmed });
+      // Hand off to the agent detail (Studio) to configure the fresh agent.
+      router.push(
+        `/projects/${projectId}/agents/${encodeURIComponent(trimmed)}`,
+      );
+    } catch (err) {
+      setError((err as Error).message ?? "Failed to create agent");
+      setSaving(false);
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger className="inline-flex shrink-0 items-center gap-1.5 border border-foreground bg-foreground px-3 py-1.5 text-xs font-medium text-background transition-colors hover:bg-foreground/90">
+        <Plus className="h-3.5 w-3.5" strokeWidth={2} />
+        New agent
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>New agent</DialogTitle>
+          <DialogDescription>
+            Give it a name — you&apos;ll configure the rest in the builder.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="flex flex-col gap-3 pt-1">
+          <input
+            autoFocus
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") void create();
+            }}
+            placeholder="agent-name"
+            className="border border-border bg-background px-3 py-2 font-mono text-sm text-foreground outline-none focus:border-foreground/40"
+          />
+          {error && <p className="text-xs text-destructive">{error}</p>}
+          <button
+            type="button"
+            onClick={() => void create()}
+            disabled={saving || !name.trim()}
+            className="inline-flex items-center justify-center gap-1.5 border border-foreground bg-foreground px-3 py-2 text-sm font-medium text-background transition-colors hover:bg-foreground/90 disabled:opacity-50"
+          >
+            {saving && <Loader2 className="h-3.5 w-3.5 animate-spin" />}
+            Create &amp; edit
+          </button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/app/(dashboard)/projects/[id]/layout.tsx

@@ -0,0 +1,11 @@
+export default function ProjectLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <div data-testid="project-detail" className="px-4 py-6 md:px-8 md:py-8">
+      {children}
+    </div>
+  );
+}

package/app/(dashboard)/projects/[id]/logs/page.tsx

@@ -0,0 +1,27 @@
+import { dehydrate, HydrationBoundary } from "@tanstack/react-query";
+import getQueryClient from "#/lib/get-query-client";
+import { dataApi } from "#/lib/api";
+import LogsView from "./view";
+
+export default async function LogsPage({
+  params,
+}: {
+  params: Promise<{ id: string }>;
+}) {
+  const { id } = await params;
+  const queryClient = getQueryClient();
+
+  await queryClient.prefetchQuery({
+    queryKey: ["log-sessions", id],
+    queryFn: () =>
+      dataApi<{ ok: boolean; data: unknown[] }>(id, "/v1/logs").then(
+        (r) => r.data ?? []
+      ),
+  });
+
+  return (
+    <HydrationBoundary state={dehydrate(queryClient)}>
+      <LogsView />
+    </HydrationBoundary>
+  );
+}

package/app/(dashboard)/projects/[id]/logs/view.tsx

@@ -0,0 +1,184 @@
+"use client";
+
+import { useQuery } from "@tanstack/react-query";
+import { useParams } from "next/navigation";
+import { useState } from "react";
+import { usePolpoClient } from "#/lib/polpo-client";
+import { LogsViewSkeleton, LogsEntriesSkeleton } from "#/components/dashboard/skeletons";
+import { ManualRefreshButton } from "#/components/dashboard/manual-refresh-button";
+
+interface SessionInfo {
+  sessionId: string;
+  startedAt: string;
+  entries: number;
+}
+
+interface LogEntry {
+  ts: string;
+  event: string;
+  data: unknown;
+}
+
+const eventColor: Record<string, string> = {
+  "task:created": "text-blue-500",
+  "task:transition": "text-foreground",
+  "task:updated": "text-muted-foreground",
+  "agent:spawned": "text-green-500",
+  "agent:finished": "text-green-600",
+  "agent:activity": "text-muted-foreground",
+  "assessment:started": "text-yellow-500",
+  "assessment:complete": "text-yellow-600",
+  "mission:started": "text-blue-500",
+  "mission:completed": "text-green-500",
+  "mission:failed": "text-destructive",
+  "log": "text-muted-foreground",
+};
+
+function timeAgo(date: string) {
+  const diff = Date.now() - new Date(date).getTime();
+  const min = Math.floor(diff / 60000);
+  if (min < 60) return `${min}m ago`;
+  const hours = Math.floor(min / 60);
+  if (hours < 24) return `${hours}h ago`;
+  return `${Math.floor(hours / 24)}d ago`;
+}
+
+function formatTime(ts: string) {
+  return new Date(ts).toLocaleTimeString("en-US", {
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+    hour12: false,
+  });
+}
+
+function summarizeData(data: unknown): string {
+  if (!data || typeof data !== "object") return "";
+  const d = data as Record<string, unknown>;
+  const parts: string[] = [];
+  if (d.id) parts.push(`id:${String(d.id).slice(0, 8)}`);
+  if (d.title) parts.push(String(d.title));
+  if (d.name) parts.push(String(d.name));
+  if (d.from && d.to) parts.push(`${d.from} → ${d.to}`);
+  if (d.status) parts.push(String(d.status));
+  if (d.agent) parts.push(String(d.agent));
+  return parts.join(" · ");
+}
+
+export default function LogsView() {
+  const { id } = useParams<{ id: string }>();
+  const [selectedSession, setSelectedSession] = useState<string | null>(null);
+
+  const polpo = usePolpoClient(id);
+  const { data: sessions = [], isLoading, isFetching: sessionsFetching, refetch: refetchSessions } = useQuery({
+    queryKey: ["log-sessions", id],
+    queryFn: () => polpo.getLogs() as unknown as Promise<SessionInfo[]>,
+  });
+
+  const { data: entries = [], isLoading: loadingEntries, isFetching: entriesFetching, refetch: refetchEntries } = useQuery({
+    queryKey: ["log-entries", id, selectedSession],
+    queryFn: () => polpo.getLogEntries(selectedSession!) as unknown as Promise<LogEntry[]>,
+    enabled: !!selectedSession,
+  });
+
+  if (isLoading) {
+    return <div data-testid="logs-loading"><LogsViewSkeleton /></div>;
+  }
+
+  return (
+    <div>
+      <div className="flex items-start justify-between gap-4">
+        <div>
+          <h2 className="text-lg font-semibold tracking-tight">Logs</h2>
+          <p className="mt-1 text-xs text-muted-foreground">
+            Orchestrator session logs. Each session captures events from a single
+            orchestrator run.
+          </p>
+        </div>
+        <ManualRefreshButton
+          onRefresh={() => Promise.all([refetchSessions(), selectedSession ? refetchEntries() : Promise.resolve()])}
+          isRefreshing={sessionsFetching || entriesFetching}
+          className="mt-1 shrink-0"
+        />
+      </div>
+
+      <div className="mt-6 flex gap-6">
+        {/* Session list */}
+        <div data-testid="logs-sessions" className="w-64 shrink-0">
+          <p className="text-xs font-medium text-muted-foreground mb-3">
+            {sessions.length} sessions
+          </p>
+          {sessions.length > 0 ? (
+            <div className="border border-border overflow-hidden">
+              {sessions.map((s) => (
+                <button
+                  key={s.sessionId}
+                  onClick={() => setSelectedSession(s.sessionId)}
+                  className={`w-full text-left px-3 py-2.5 border-b border-border last:border-0 transition-colors ${
+                    selectedSession === s.sessionId
+                      ? "bg-secondary"
+                      : "hover:bg-secondary/30"
+                  }`}
+                >
+                  <p className="font-mono text-xs font-medium truncate">
+                    {s.sessionId.slice(0, 12)}...
+                  </p>
+                  <div className="mt-1 flex items-center justify-between text-[11px] text-muted-foreground">
+                    <span>{timeAgo(s.startedAt)}</span>
+                    <span>{s.entries} events</span>
+                  </div>
+                </button>
+              ))}
+            </div>
+          ) : (
+            <div data-testid="logs-sessions-empty" className="border border-border p-6 text-center text-xs text-muted-foreground">
+              No sessions yet.
+            </div>
+          )}
+        </div>
+
+        {/* Log entries */}
+        <div className="flex-1 min-w-0">
+          {selectedSession ? (
+            loadingEntries ? (
+              <div data-testid="logs-entries-loading">
+                <LogsEntriesSkeleton />
+              </div>
+            ) : entries.length > 0 ? (
+              <div data-testid="logs-entries" className="border border-border overflow-hidden">
+                {entries.map((entry, i) => (
+                  <div
+                    key={i}
+                    className="flex items-start gap-3 border-b border-border last:border-0 px-3 py-2 font-mono text-xs"
+                  >
+                    <span className="text-muted-foreground/40 w-16 shrink-0 pt-0.5">
+                      {formatTime(entry.ts)}
+                    </span>
+                    <span
+                      className={`shrink-0 pt-0.5 w-40 truncate font-medium ${
+                        eventColor[entry.event] ?? "text-muted-foreground"
+                      }`}
+                    >
+                      {entry.event}
+                    </span>
+                    <span className="text-muted-foreground truncate">
+                      {summarizeData(entry.data)}
+                    </span>
+                  </div>
+                ))}
+              </div>
+            ) : (
+              <div data-testid="logs-entries-empty" className="border border-border p-8 text-center text-sm text-muted-foreground">
+                No entries in this session.
+              </div>
+            )
+          ) : (
+            <div className="border border-border p-8 text-center text-sm text-muted-foreground">
+              Select a session to view logs.
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/app/(dashboard)/projects/[id]/memory/page.tsx

@@ -0,0 +1,40 @@
+import { Suspense } from "react";
+import { dataApi } from "#/lib/api";
+import { ProjectMemorySkeleton } from "#/components/dashboard/skeletons";
+import MemoryView from "./view";
+
+async function MemoryData({ id }: { id: string }) {
+  let memoryContent = "";
+  try {
+    const res = await dataApi<{ ok: boolean; data: { content: string } }>(
+      id,
+      "/v1/memory",
+    );
+    memoryContent = res.data?.content ?? "";
+  } catch {}
+
+  return <MemoryView memoryContent={memoryContent} />;
+}
+
+export default async function MemoryPage({
+  params,
+}: {
+  params: Promise<{ id: string }>;
+}) {
+  const { id } = await params;
+
+  return (
+    <div>
+      <h2 className="text-lg font-semibold tracking-tight">Project memory</h2>
+      <p className="mt-1 text-xs text-muted-foreground leading-relaxed max-w-xl">
+        Memory is built and maintained automatically as agents work. Project memory is
+        shared across all agents — every agent in this project inherits this context
+        at the start of each session.
+      </p>
+
+      <Suspense fallback={<ProjectMemorySkeleton />}>
+        <MemoryData id={id} />
+      </Suspense>
+    </div>
+  );
+}

package/app/(dashboard)/projects/[id]/memory/view.tsx

@@ -0,0 +1,17 @@
+import { Markdown } from "#/components/dashboard/markdown";
+
+export default function MemoryView({ memoryContent }: { memoryContent: string }) {
+  if (memoryContent) {
+    return (
+      <div data-testid="project-memory-content" className="mt-6 border border-border bg-card p-6">
+        <Markdown content={memoryContent} />
+      </div>
+    );
+  }
+
+  return (
+    <div className="mt-6 border border-border p-8 text-center text-sm text-muted-foreground">
+      No project memory yet. Memory is created automatically when agents work.
+    </div>
+  );
+}

package/app/(dashboard)/projects/[id]/missions/[missionId]/page.tsx

@@ -0,0 +1,88 @@
+import { Suspense } from "react";
+import Link from "next/link";
+import { ArrowLeft } from "lucide-react";
+import { dataApi } from "#/lib/api";
+import type { Mission, Task } from "@polpo-ai/core";
+import { MissionGraphSkeleton, MissionHeaderSkeleton } from "#/components/dashboard/skeletons";
+import { MissionHeader, MissionTasksPanel } from "./view";
+
+async function MissionHeaderData({
+  id,
+  missionId,
+}: {
+  id: string;
+  missionId: string;
+}) {
+  let mission: Mission | null = null;
+  try {
+    const res = await dataApi<{ ok: boolean; data: Mission }>(
+      id,
+      `/v1/missions/${missionId}`,
+    );
+    mission = res.data ?? null;
+  } catch {}
+
+  return (
+    <MissionHeader projectId={id} missionId={missionId} initialMission={mission} />
+  );
+}
+
+async function MissionTasksData({
+  id,
+  missionId,
+}: {
+  id: string;
+  missionId: string;
+}) {
+  // Fetch both the spawned tasks (live) and the mission record (for the
+  // draft-mode preview that parses `mission.data` into the same shape).
+  let tasks: Task[] = [];
+  let mission: Mission | null = null;
+  try {
+    const [tasksRes, missionRes] = await Promise.all([
+      dataApi<{ ok: boolean; data: Task[] }>(id, "/v1/tasks"),
+      dataApi<{ ok: boolean; data: Mission }>(id, `/v1/missions/${missionId}`),
+    ]);
+    tasks = (tasksRes.data ?? []).filter((t) => t.missionId === missionId);
+    mission = missionRes.data ?? null;
+  } catch {}
+
+  return (
+    <MissionTasksPanel
+      projectId={id}
+      missionId={missionId}
+      initialTasks={tasks}
+      initialMission={mission}
+    />
+  );
+}
+
+export default async function MissionDetailPage({
+  params,
+}: {
+  params: Promise<{ id: string; missionId: string }>;
+}) {
+  const { id, missionId } = await params;
+
+  return (
+    <div>
+      {/* Back — static, renders immediately */}
+      <Link
+        href={`/projects/${id}/missions`}
+        className="inline-flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors"
+      >
+        <ArrowLeft className="h-3 w-3" />
+        Missions
+      </Link>
+
+      {/* Two parallel Suspense boundaries — mission metadata and tasks stream independently */}
+      <Suspense fallback={<MissionHeaderSkeleton />}>
+        <MissionHeaderData id={id} missionId={missionId} />
+      </Suspense>
+
+      <Suspense fallback={<MissionGraphSkeleton />}>
+        <MissionTasksData id={id} missionId={missionId} />
+      </Suspense>
+    </div>
+  );
+}