@polpo-ai/dashboard 0.1.0

package/app/(dashboard)/projects/projects-list.tsx

@@ -0,0 +1,126 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import { LayoutGrid, List } from "lucide-react";
+import type { Project } from "#/lib/api";
+
+function timeAgo(date: string) {
+  const diff = Date.now() - new Date(date).getTime();
+  const days = Math.floor(diff / 86400000);
+  if (days > 0) return `${days}d ago`;
+  const hours = Math.floor(diff / 3600000);
+  if (hours > 0) return `${hours}h ago`;
+  return "just now";
+}
+
+function StatusDot({ status }: { status: string }) {
+  return (
+    <span className={`h-2 w-2 rounded-full shrink-0 ${
+      status === "active" ? "bg-brand" : "bg-muted-foreground/30"
+    }`} />
+  );
+}
+
+function GridView({ projects }: { projects: Project[] }) {
+  return (
+    <div data-testid="projects-grid" className="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+      {projects.map((project) => (
+        <Link
+          key={project.id}
+          href={`/projects/${project.id}`}
+          data-testid={`project-card-${project.slug}`}
+          className="group border border-border bg-card p-5 transition-colors hover:border-foreground/20"
+        >
+          <div className="flex items-center justify-between">
+            <h3 className="text-sm font-semibold">{project.name}</h3>
+            <StatusDot status={project.status} />
+          </div>
+          <p className="mt-1 font-mono text-xs text-muted-foreground">
+            {project.slug}
+          </p>
+          <div className="mt-4 flex items-center justify-between text-[11px] text-muted-foreground">
+            <span>Updated {timeAgo(project.updatedAt)}</span>
+            <span className="font-mono">{project.status}</span>
+          </div>
+        </Link>
+      ))}
+    </div>
+  );
+}
+
+function TableView({ projects }: { projects: Project[] }) {
+  return (
+    <div data-testid="projects-table" className="mt-8 border border-border overflow-hidden overflow-x-auto">
+      <table className="w-full text-sm min-w-[500px]">
+        <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">Name</th>
+            <th className="px-4 py-2.5 text-left text-xs font-medium text-muted-foreground">Slug</th>
+            <th className="px-4 py-2.5 text-left text-xs font-medium text-muted-foreground">Status</th>
+            <th className="px-4 py-2.5 text-left text-xs font-medium text-muted-foreground">Updated</th>
+          </tr>
+        </thead>
+        <tbody>
+          {projects.map((project) => (
+            <tr key={project.id} className="border-b border-border last:border-0">
+              <td className="px-4 py-3">
+                <Link href={`/projects/${project.id}`} className="font-medium hover:text-brand transition-colors">
+                  {project.name}
+                </Link>
+              </td>
+              <td className="px-4 py-3 font-mono text-xs text-muted-foreground">{project.slug}</td>
+              <td className="px-4 py-3">
+                <div className="flex items-center gap-2">
+                  <StatusDot status={project.status} />
+                  <span className="text-xs text-muted-foreground">{project.status}</span>
+                </div>
+              </td>
+              <td className="px-4 py-3 text-xs text-muted-foreground">{timeAgo(project.updatedAt)}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+export function ProjectsList({ projects }: { projects: Project[] }) {
+  const [view, setView] = useState<"grid" | "table">("grid");
+
+  if (projects.length === 0) {
+    return (
+      <div data-testid="projects-empty" className="mt-8 border border-border p-12 text-center">
+        <p className="text-sm text-muted-foreground">No projects yet.</p>
+        <p className="mt-1 text-xs text-muted-foreground">Create your first project to get started.</p>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <div className="mt-6 flex items-center justify-between">
+        <p className="text-xs text-muted-foreground font-mono uppercase tracking-wider">
+          {projects.length} project{projects.length !== 1 ? "s" : ""}
+        </p>
+        <div className="flex items-center border border-border">
+          <button
+            onClick={() => setView("grid")}
+            className={`p-1.5 transition-colors ${view === "grid" ? "bg-secondary text-foreground" : "text-muted-foreground/40 hover:text-muted-foreground"}`}
+            aria-label="Grid view"
+          >
+            <LayoutGrid className="h-3.5 w-3.5" />
+          </button>
+          <button
+            onClick={() => setView("table")}
+            className={`p-1.5 transition-colors ${view === "table" ? "bg-secondary text-foreground" : "text-muted-foreground/40 hover:text-muted-foreground"}`}
+            aria-label="Table view"
+          >
+            <List className="h-3.5 w-3.5" />
+          </button>
+        </div>
+      </div>
+      {view === "grid" ? <GridView projects={projects} /> : <TableView projects={projects} />}
+    </div>
+  );
+}

package/app/(playground)/error.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+/** Error boundary for the playground group — see app/(dashboard)/error.tsx. */
+export default function PlaygroundError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  return (
+    <div className="flex min-h-[60vh] items-center justify-center p-6">
+      <div className="w-full max-w-md border border-border bg-card p-8 text-center">
+        <h2 className="text-base font-semibold text-foreground">Something went wrong</h2>
+        <p className="mt-2 text-sm text-muted-foreground">
+          We couldn&apos;t reach the control plane. This is usually temporary —
+          give it a moment and retry.
+        </p>
+        {error?.digest ? (
+          <p className="mt-3 font-mono text-[11px] text-muted-foreground/50">
+            ref: {error.digest}
+          </p>
+        ) : null}
+        <div className="mt-6 flex items-center justify-center gap-3">
+          <button
+            type="button"
+            onClick={() => reset()}
+            className="border border-foreground bg-foreground px-4 py-2 text-sm font-medium text-background transition-colors hover:bg-foreground/90"
+          >
+            Try again
+          </button>
+          <a
+            href="/login"
+            className="border border-border px-4 py-2 text-sm font-medium text-foreground transition-colors hover:border-foreground/40"
+          >
+            Sign in
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+}

package/app/(playground)/layout.tsx

@@ -0,0 +1,27 @@
+import { redirect } from "next/navigation";
+import { Providers } from "#/components/providers";
+import { getOrgs } from "#/lib/api";
+
+/**
+ * Isolated layout for the Playground tab. No project sidebar — this is a
+ * standalone surface (opened in a new browser tab) so end-users / builders
+ * can clearly see they're chatting with an agent, not poking around the
+ * dashboard. The PlaygroundFrame inside the page renders its own top bar
+ * with a "Back to dashboard" link.
+ */
+export default async function PlaygroundLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const orgs = await getOrgs();
+  if (orgs.length === 0) redirect("/onboarding");
+
+  return (
+    <Providers>
+      <div className="flex h-screen flex-col overflow-hidden bg-background">
+        {children}
+      </div>
+    </Providers>
+  );
+}

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

@@ -0,0 +1,57 @@
+import { Suspense } from "react";
+import { api, dataApi } from "#/lib/api";
+import type { Project } from "#/lib/api";
+import type { AgentConfig } from "@polpo-ai/core";
+import PlaygroundView from "./view";
+import { PlaygroundSkeleton } from "../playground-legacy/skeleton";
+
+const API_URL = process.env.NEXT_PUBLIC_API_URL ?? "http://localhost:4000";
+
+async function PlaygroundData({
+  id,
+  initialAgent,
+}: {
+  id: string;
+  initialAgent?: string;
+}) {
+  let project: Project | null = null;
+  let agents: AgentConfig[] = [];
+
+  try {
+    const [projectRes, agentsRes] = await Promise.all([
+      api<Project>(`/v1/projects/${id}`).catch(() => null),
+      dataApi<{ ok: boolean; data: AgentConfig[] }>(id, "/v1/agents").catch(
+        () => ({ ok: false, data: [] as AgentConfig[] }),
+      ),
+    ]);
+    project = projectRes;
+    agents = agentsRes.data ?? [];
+  } catch {}
+
+  return (
+    <PlaygroundView
+      projectId={id}
+      apiUrl={API_URL}
+      projectName={project?.name ?? "Your project"}
+      initialAgents={agents}
+      initialAgent={initialAgent}
+    />
+  );
+}
+
+export default async function PlaygroundPage({
+  params,
+  searchParams,
+}: {
+  params: Promise<{ id: string }>;
+  searchParams: Promise<{ agent?: string }>;
+}) {
+  const { id } = await params;
+  const { agent } = await searchParams;
+
+  return (
+    <Suspense fallback={<PlaygroundSkeleton />}>
+      <PlaygroundData id={id} initialAgent={agent} />
+    </Suspense>
+  );
+}

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

@@ -0,0 +1,167 @@
+"use client";
+
+/**
+ * Playground — chat surface backed by `@lumea-labs/chat` +
+ * `@lumea-labs/chat-polpo`. The chat composition itself lives in the
+ * shared `<PolpoChat>` (components/dashboard/polpo-chat.tsx) so the
+ * Playground and the Agent Builder are guaranteed identical.
+ *
+ * This view owns only the surrounding chrome: the top bar (agent
+ * selector + Files button) and the no-agents empty state.
+ */
+
+import { useState } from "react";
+import Link from "next/link";
+import Image from "next/image";
+import type { AgentConfig } from "@polpo-ai/core";
+import { ArrowLeft, FolderOpen, Plus } from "lucide-react";
+import { AgentModelSelector } from "#/components/dashboard/agent-model-selector";
+import { PolpoChat } from "#/components/dashboard/polpo-chat";
+
+interface Props {
+  projectId: string;
+  apiUrl: string;
+  projectName: string;
+  initialAgents: AgentConfig[];
+  /** Agent to preselect (from ?agent=). Falls back to the first agent. */
+  initialAgent?: string;
+}
+
+export default function PlaygroundView({
+  projectId,
+  apiUrl,
+  projectName,
+  initialAgents,
+  initialAgent,
+}: Props) {
+  const baseUrl = `${apiUrl}/v1/projects/${projectId}/data`;
+
+  const [selectedAgent, setSelectedAgent] = useState<string | undefined>(
+    (initialAgent && initialAgents.some((a) => a.name === initialAgent)
+      ? initialAgent
+      : undefined) ?? initialAgents[0]?.name,
+  );
+  const [filesOpen, setFilesOpen] = useState(false);
+
+  return (
+    <>
+      <TopBar
+        projectId={projectId}
+        projectName={projectName}
+        agents={initialAgents}
+        selectedAgent={selectedAgent}
+        onSelectAgent={setSelectedAgent}
+        onOpenFiles={() => setFilesOpen(true)}
+      />
+
+      <main className="flex flex-1 flex-col overflow-hidden">
+        {initialAgents.length === 0 ? (
+          <div className="flex flex-1 items-center justify-center px-4 py-8">
+            <EmptyState projectId={projectId} />
+          </div>
+        ) : (
+          <PolpoChat
+            baseUrl={baseUrl}
+            agent={selectedAgent}
+            filesOpen={filesOpen}
+            onFilesOpenChange={setFilesOpen}
+          />
+        )}
+      </main>
+    </>
+  );
+}
+
+function TopBar({
+  projectId,
+  projectName,
+  agents,
+  selectedAgent,
+  onSelectAgent,
+  onOpenFiles,
+}: {
+  projectId: string;
+  projectName: string;
+  agents: AgentConfig[];
+  selectedAgent: string | undefined;
+  onSelectAgent: (name: string) => void;
+  onOpenFiles: () => void;
+}) {
+  return (
+    <header className="flex h-14 shrink-0 items-center justify-between gap-4 border-b border-border bg-card px-4">
+      <div className="flex items-center gap-3 min-w-0">
+        <Link
+          href={`/projects/${projectId}`}
+          className="inline-flex items-center gap-1.5 rounded border border-border px-2.5 py-1.5 text-xs font-medium text-muted-foreground transition-colors hover:border-foreground/30 hover:text-foreground"
+        >
+          <ArrowLeft className="h-3.5 w-3.5" />
+          Back to dashboard
+        </Link>
+
+        <div className="hidden md:block h-5 w-px bg-border" />
+
+        <div className="hidden md:flex items-center gap-2 min-w-0">
+          <Image
+            src="/polpo-logo.svg"
+            alt="Polpo"
+            width={72}
+            height={16}
+            priority
+            className="h-4 w-auto opacity-70"
+          />
+          <span className="text-xs uppercase tracking-wide text-muted-foreground">
+            Playground
+          </span>
+          <span className="text-muted-foreground/50">·</span>
+          <span className="truncate text-sm font-medium text-foreground/80 font-mono">
+            {projectName}
+          </span>
+        </div>
+      </div>
+
+      <div className="flex items-center gap-2">
+        <button
+          type="button"
+          onClick={onOpenFiles}
+          className="inline-flex h-8 items-center gap-1.5 rounded border border-border bg-card px-2.5 text-xs font-medium text-muted-foreground transition-colors hover:border-foreground/30 hover:text-foreground"
+          aria-label="Open files"
+          title="Open files"
+        >
+          <FolderOpen className="h-3.5 w-3.5" />
+          <span className="hidden sm:inline">Files</span>
+        </button>
+
+        {agents.length > 0 && (
+          <AgentModelSelector
+            agents={agents}
+            selected={selectedAgent}
+            onSelect={onSelectAgent}
+          />
+        )}
+      </div>
+    </header>
+  );
+}
+
+function EmptyState({ projectId }: { projectId: string }) {
+  return (
+    <div className="flex flex-col items-center justify-center gap-4 border border-dashed border-border p-12 text-center max-w-md">
+      <div className="flex h-10 w-10 items-center justify-center border border-border">
+        <Plus className="h-5 w-5 text-muted-foreground" />
+      </div>
+      <div>
+        <p className="text-sm font-medium">No agents yet</p>
+        <p className="mt-1 text-xs text-muted-foreground">
+          Create an agent from the dashboard, or deploy one from your CLI with{" "}
+          <span className="font-mono">polpo deploy</span>.
+        </p>
+      </div>
+      <Link
+        href={`/projects/${projectId}/agents`}
+        className="mt-2 bg-foreground text-background px-3 py-1.5 text-xs font-medium transition-all hover:bg-brand hover:text-brand-foreground"
+      >
+        Go to Agents
+      </Link>
+    </div>
+  );
+}

package/app/(playground)/projects/[id]/playground-legacy/page.tsx

@@ -0,0 +1,47 @@
+import { Suspense } from "react";
+import { api, dataApi } from "#/lib/api";
+import type { Project } from "#/lib/api";
+import type { AgentConfig } from "@polpo-ai/core";
+import PlaygroundView from "./view";
+import { PlaygroundSkeleton } from "./skeleton";
+
+const API_URL = process.env.NEXT_PUBLIC_API_URL ?? "http://localhost:4000";
+
+async function PlaygroundData({ id }: { id: string }) {
+  let project: Project | null = null;
+  let agents: AgentConfig[] = [];
+
+  try {
+    const [projectRes, agentsRes] = await Promise.all([
+      api<Project>(`/v1/projects/${id}`).catch(() => null),
+      dataApi<{ ok: boolean; data: AgentConfig[] }>(id, "/v1/agents").catch(
+        () => ({ ok: false, data: [] as AgentConfig[] }),
+      ),
+    ]);
+    project = projectRes;
+    agents = agentsRes.data ?? [];
+  } catch {}
+
+  return (
+    <PlaygroundView
+      projectId={id}
+      apiUrl={API_URL}
+      projectName={project?.name ?? "Your project"}
+      initialAgents={agents}
+    />
+  );
+}
+
+export default async function PlaygroundPage({
+  params,
+}: {
+  params: Promise<{ id: string }>;
+}) {
+  const { id } = await params;
+
+  return (
+    <Suspense fallback={<PlaygroundSkeleton />}>
+      <PlaygroundData id={id} />
+    </Suspense>
+  );
+}

package/app/(playground)/projects/[id]/playground-legacy/skeleton.tsx

@@ -0,0 +1,63 @@
+import { Skeleton } from "#/components/ui/skeleton";
+
+export function PlaygroundSkeleton() {
+  return (
+    <>
+      {/* Top bar — mirrors view.tsx: back button + brand row + selector */}
+      <div className="flex h-14 shrink-0 items-center justify-between gap-4 border-b border-border bg-card px-4">
+        <div className="flex items-center gap-3">
+          <Skeleton className="h-7 w-32" />
+          <div className="hidden md:block h-5 w-px bg-border" />
+          <div className="hidden md:flex items-center gap-2">
+            <Skeleton className="h-4 w-16 opacity-60" />
+            <Skeleton className="h-3 w-20 opacity-60" />
+          </div>
+        </div>
+        <div className="flex items-center gap-3 border border-border bg-card px-3 py-2">
+          <Skeleton className="size-6" />
+          <div className="space-y-1.5">
+            <Skeleton className="h-3.5 w-20" />
+            <Skeleton className="h-2.5 w-28 opacity-60" />
+          </div>
+          <Skeleton className="ml-2 size-3.5" />
+        </div>
+      </div>
+
+      {/* Chat pane fills the rest of the viewport. */}
+      <main className="flex flex-1 flex-col overflow-hidden">
+        <div className="flex-1 space-y-6 px-6 py-8">
+          <MessageSkeleton role="user" />
+          <MessageSkeleton role="assistant" />
+          <MessageSkeleton role="user" short />
+          <MessageSkeleton role="assistant" />
+        </div>
+
+        <div className="px-6 pb-4 pt-3">
+          <Skeleton className="h-11 w-full rounded-2xl" />
+        </div>
+      </main>
+    </>
+  );
+}
+
+function MessageSkeleton({
+  role,
+  short,
+}: {
+  role: "user" | "assistant";
+  short?: boolean;
+}) {
+  const isUser = role === "user";
+  return (
+    <div className={`flex ${isUser ? "justify-end" : "justify-start"}`}>
+      <div className={`max-w-[70%] space-y-2 ${isUser ? "text-right" : ""}`}>
+        <Skeleton
+          className={`h-3 ${isUser ? "ml-auto w-16" : "w-20"} opacity-60`}
+        />
+        <Skeleton className={`h-4 ${short ? "w-32" : "w-full min-w-[280px]"}`} />
+        {!short && <Skeleton className="h-4 w-4/5" />}
+        {!short && !isUser && <Skeleton className="h-4 w-3/5" />}
+      </div>
+    </div>
+  );
+}