@polpo-ai/dashboard 0.1.0

package/components/dashboard/skills-install-wizard.tsx

@@ -0,0 +1,273 @@
+"use client";
+
+import { useState } from "react";
+import { useParams } from "next/navigation";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+  ArrowLeft,
+  BookMarked,
+  Check,
+  Download,
+  FilePlus2,
+  Link2,
+  Loader2,
+  Search,
+} from "lucide-react";
+import { usePolpoClient } from "#/lib/polpo-client";
+import { usePolpoSkillsAdapter } from "@lumea-labs/skills-polpo";
+import { SkillsProvider, SkillCreateForm } from "@lumea-labs/skills";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "#/components/ui/dialog";
+
+/**
+ * SkillsInstallWizard — replaces the old read-only "how to install" dialog
+ * with a real, guided stepper that ACTUALLY installs skills, dogfooding the
+ * public SDK end to end:
+ *   - registry browse  → the Mastra `skills-api` / skills.sh registry (the
+ *     browse surface Polpo itself doesn't expose) → client.installSkills(url)
+ *   - from a URL        → client.installSkills(githubUrl)
+ *   - paste / create    → @lumea-labs/skills <SkillCreateForm> over the
+ *     Polpo-wired adapter (adapter.createSkill)
+ *
+ * The wizard lives inside <SkillsProvider adapter={polpoAdapter}> so the
+ * lumea-agents skills UI (SkillCreateForm here, more later) is wired to Polpo.
+ */
+
+const SKILLS_API = "https://skills.sh/api/skills";
+
+type Source = "registry" | "url" | "paste";
+
+interface RegistrySkill {
+  id?: string;
+  name: string;
+  description?: string;
+  owner?: string;
+  repo?: string;
+  repository?: string;
+  repositoryUrl?: string;
+  installs?: number;
+}
+
+/** Best-effort GitHub source for a skills.sh registry record. */
+function sourceFor(s: RegistrySkill): string {
+  if (s.repositoryUrl) return s.repositoryUrl;
+  if (s.repository?.startsWith("http")) return s.repository;
+  if (s.owner && s.repo) return `https://github.com/${s.owner}/${s.repo}`;
+  return s.repository ?? s.name;
+}
+
+export function SkillsInstallWizard() {
+  const { adapter } = usePolpoSkillsAdapter();
+  return (
+    <SkillsProvider adapter={adapter}>
+      <WizardDialog />
+    </SkillsProvider>
+  );
+}
+
+function WizardDialog() {
+  const { id } = useParams<{ id: string }>();
+  const client = usePolpoClient(id);
+  const qc = useQueryClient();
+
+  const [open, setOpen] = useState(false);
+  const [source, setSource] = useState<Source | null>(null);
+  const [search, setSearch] = useState("");
+  const [url, setUrl] = useState("");
+  const [done, setDone] = useState<string | null>(null);
+
+  const reset = () => {
+    setSource(null);
+    setSearch("");
+    setUrl("");
+    setDone(null);
+    install.reset();
+  };
+
+  const { data: registry = [], isFetching, error: regError } = useQuery({
+    queryKey: ["skills-registry", search],
+    queryFn: async (): Promise<RegistrySkill[]> => {
+      const u = new URL(SKILLS_API);
+      u.searchParams.set("sortBy", "installs");
+      u.searchParams.set("pageSize", "30");
+      if (search.trim()) u.searchParams.set("query", search.trim());
+      const res = await fetch(u.toString());
+      if (!res.ok) throw new Error(`registry ${res.status}`);
+      const json = await res.json();
+      return (json.skills ?? json.data ?? json.results ?? json) as RegistrySkill[];
+    },
+    enabled: open && source === "registry",
+    staleTime: 60_000,
+  });
+
+  const install = useMutation({
+    mutationFn: (src: string) => client.installSkills(src),
+    onSuccess: (_res, src) => {
+      qc.invalidateQueries({ queryKey: ["skills", id] });
+      setDone(src);
+    },
+  });
+
+  const afterCreate = () => {
+    qc.invalidateQueries({ queryKey: ["skills", id] });
+    setDone("created");
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={(o) => { setOpen(o); if (!o) reset(); }}>
+      <DialogTrigger className="inline-flex 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">
+        <Download className="h-3.5 w-3.5" strokeWidth={2} />
+        Install skills
+      </DialogTrigger>
+      <DialogContent className="max-h-[85vh] overflow-y-auto sm:max-w-lg">
+        <DialogHeader>
+          <DialogTitle>Install skills</DialogTitle>
+          <DialogDescription>
+            Skills inject domain knowledge into your agents&apos; prompts — no code
+            changes. Pick a source, install, then assign to agents.
+          </DialogDescription>
+        </DialogHeader>
+
+        {/* ── Result ─────────────────────────────────────────── */}
+        {done ? (
+          <div className="flex flex-col items-center gap-3 py-8 text-center">
+            <div className="grid h-10 w-10 place-items-center rounded-full bg-emerald-500/15 text-emerald-500">
+              <Check className="h-5 w-5" />
+            </div>
+            <p className="text-sm font-medium">Skill installed</p>
+            <p className="max-w-sm font-mono text-[11px] text-muted-foreground break-all">{done}</p>
+            <div className="mt-2 flex gap-2">
+              <button onClick={reset} className="border border-border px-3 py-1.5 text-xs hover:border-foreground/30">
+                Install another
+              </button>
+              <button onClick={() => setOpen(false)} className="border border-foreground bg-foreground px-3 py-1.5 text-xs text-background hover:bg-foreground/90">
+                Done
+              </button>
+            </div>
+          </div>
+        ) : !source ? (
+          /* ── Step 1: choose a source ──────────────────────── */
+          <div className="grid gap-2 pt-1">
+            <SourceCard
+              icon={<BookMarked className="h-4 w-4" />}
+              title="Browse the registry"
+              desc="34k+ skills from skills.sh — search and install."
+              onClick={() => setSource("registry")}
+            />
+            <SourceCard
+              icon={<Link2 className="h-4 w-4" />}
+              title="From a URL"
+              desc="Any public GitHub repo with a skill pack."
+              onClick={() => setSource("url")}
+            />
+            <SourceCard
+              icon={<FilePlus2 className="h-4 w-4" />}
+              title="Paste / create"
+              desc="Author a skill inline from its contents."
+              onClick={() => setSource("paste")}
+            />
+          </div>
+        ) : (
+          <div className="flex flex-col gap-3 pt-1">
+            <button onClick={() => { setSource(null); install.reset(); }} className="inline-flex w-fit items-center gap-1 text-[11px] text-muted-foreground hover:text-foreground">
+              <ArrowLeft className="h-3 w-3" /> Back
+            </button>
+
+            {/* ── Registry ──────────────────────────────────── */}
+            {source === "registry" && (
+              <>
+                <div className="flex items-center gap-2 border border-border px-2.5">
+                  <Search className="h-3.5 w-3.5 text-muted-foreground" />
+                  <input
+                    value={search}
+                    onChange={(e) => setSearch(e.target.value)}
+                    placeholder="Search skills…"
+                    className="w-full bg-transparent py-2 text-sm outline-none"
+                  />
+                </div>
+                {isFetching ? (
+                  <div className="flex items-center gap-2 py-6 text-xs text-muted-foreground"><Loader2 className="h-3.5 w-3.5 animate-spin" /> loading registry…</div>
+                ) : regError ? (
+                  <p className="py-6 text-center text-xs text-muted-foreground">Registry unavailable. Try the URL option.</p>
+                ) : (
+                  <ul className="flex max-h-[40vh] flex-col gap-1 overflow-y-auto">
+                    {registry.map((s) => (
+                      <li key={s.id ?? `${s.owner}/${s.repo}/${s.name}`} className="flex items-center justify-between gap-3 border border-border px-3 py-2">
+                        <div className="min-w-0">
+                          <div className="truncate text-sm font-medium">{s.name}</div>
+                          {s.description && <div className="truncate text-[11px] text-muted-foreground">{s.description}</div>}
+                        </div>
+                        <button
+                          disabled={install.isPending}
+                          onClick={() => install.mutate(sourceFor(s))}
+                          className="shrink-0 border border-foreground bg-foreground px-2.5 py-1 text-[11px] text-background hover:bg-foreground/90 disabled:opacity-50"
+                        >
+                          {install.isPending ? <Loader2 className="h-3 w-3 animate-spin" /> : "Install"}
+                        </button>
+                      </li>
+                    ))}
+                  </ul>
+                )}
+              </>
+            )}
+
+            {/* ── URL ────────────────────────────────────────── */}
+            {source === "url" && (
+              <form
+                onSubmit={(e) => { e.preventDefault(); if (url.trim()) install.mutate(url.trim()); }}
+                className="flex flex-col gap-2"
+              >
+                <input
+                  value={url}
+                  autoFocus
+                  onChange={(e) => setUrl(e.target.value)}
+                  placeholder="https://github.com/you/your-skills"
+                  className="border border-border px-3 py-2 text-sm outline-none focus:border-foreground/30"
+                />
+                <button
+                  type="submit"
+                  disabled={!url.trim() || install.isPending}
+                  className="inline-flex items-center justify-center gap-1.5 border border-foreground bg-foreground px-3 py-2 text-xs text-background hover:bg-foreground/90 disabled:opacity-50"
+                >
+                  {install.isPending ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <Download className="h-3.5 w-3.5" />}
+                  Install
+                </button>
+                {install.isError && <p className="text-xs text-destructive">{(install.error as Error).message}</p>}
+              </form>
+            )}
+
+            {/* ── Paste / create (dogfood lumea-agents UI) ──── */}
+            {source === "paste" && (
+              <SkillCreateForm onCreated={afterCreate} onCancel={() => setSource(null)} />
+            )}
+
+            {install.isError && source === "registry" && (
+              <p className="text-xs text-destructive">{(install.error as Error).message}</p>
+            )}
+          </div>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function SourceCard({ icon, title, desc, onClick }: { icon: React.ReactNode; title: string; desc: string; onClick: () => void }) {
+  return (
+    <button
+      onClick={onClick}
+      className="flex items-start gap-3 border border-border px-4 py-3 text-left transition-colors hover:border-foreground/30 hover:bg-secondary/30"
+    >
+      <span className="mt-0.5 text-muted-foreground">{icon}</span>
+      <span className="min-w-0">
+        <span className="block text-sm font-medium">{title}</span>
+        <span className="block text-[11px] text-muted-foreground">{desc}</span>
+      </span>
+    </button>
+  );
+}

package/components/dashboard/swarm-runs.tsx

@@ -0,0 +1,316 @@
+"use client";
+
+/**
+ * Custom Swarm run row + list — replaces `@lumea-labs/orchestrator`'s
+ * SwarmRunRow / SwarmRunList for the project dashboard so the design
+ * matches Polpo's neo-brutalist palette (sharp edges, mono labels,
+ * theme tokens, no rounded corners except the status pulse dot).
+ *
+ * Scope is intentionally narrow:
+ *   - Accepts a thin `RunRow` shape, not the full SwarmRun (no
+ *     toolCalls / artifacts / events here). The dashboard surface is
+ *     a scannable list, not a drill-down.
+ *   - No cancel / retry handlers yet — those land in this file when
+ *     we wire the SDK to abort + re-queue tasks.
+ *   - Skeleton variant lives next to the real component so layout
+ *     drift is impossible.
+ *
+ * Columns left → right:
+ *   1. Status dot (pulses on running)
+ *   2. Status label (mono uppercase, e.g. RUNNING)
+ *   3. Agent monogram tile + name (mono uppercase)
+ *   4. Task title (truncated)
+ *   5. Last log (right-aligned, muted, hidden < md)
+ *   6. Elapsed / relative time (right-aligned mono)
+ */
+
+import { useEffect, useState } from "react";
+import Link from "next/link";
+
+export type RunStatus =
+  | "scheduled"
+  | "pending"
+  | "running"
+  | "review"
+  | "done"
+  | "failed"
+  | "cancelled";
+
+export interface RunRow {
+  id: string;
+  status: RunStatus;
+  agentName: string;
+  agentColor?: string;
+  title: string;
+  lastLog?: string;
+  /** ISO timestamp. Used to compute elapsed (running) or duration (done). */
+  startedAt?: string;
+  /** ISO timestamp. Set when status is `done`, `failed`, or `cancelled`. */
+  finishedAt?: string;
+  /** Optional href — when provided, the whole row becomes a Link. */
+  href?: string;
+}
+
+/** Tailwind bg + fg color tokens per status. Mapped to our theme so
+ *  the palette flips correctly between light + dark mode. */
+const STATUS_STYLE: Record<RunStatus, { dot: string; text: string }> = {
+  scheduled: { dot: "bg-violet-500", text: "text-violet-500" },
+  pending: { dot: "bg-muted-foreground/60", text: "text-muted-foreground" },
+  running: { dot: "bg-brand", text: "text-brand" },
+  review: { dot: "bg-amber-500", text: "text-amber-500" },
+  done: { dot: "bg-emerald-500", text: "text-emerald-500" },
+  failed: { dot: "bg-destructive", text: "text-destructive" },
+  cancelled: { dot: "bg-muted-foreground/30", text: "text-muted-foreground/60" },
+};
+
+const STATUS_LABEL: Record<RunStatus, string> = {
+  scheduled: "scheduled",
+  pending: "pending",
+  running: "running",
+  review: "review",
+  done: "done",
+  failed: "failed",
+  cancelled: "cancelled",
+};
+
+/** Counts for every run status. Mirrors @lumea-labs/orchestrator's
+ *  SwarmCounts but is the source of truth for our own status bar so we
+ *  can render ALL states (the package bar only shows running/done/failed). */
+export interface RunCounts {
+  scheduled: number;
+  pending: number;
+  running: number;
+  review: number;
+  done: number;
+  failed: number;
+  cancelled: number;
+  total: number;
+}
+
+/** The order states appear in the bar, left → right (lifecycle order). */
+const BAR_ORDER: RunStatus[] = [
+  "running",
+  "pending",
+  "scheduled",
+  "review",
+  "done",
+  "failed",
+  "cancelled",
+];
+
+/**
+ * Horizontal status bar — one stat per run status. Always rendered (shows
+ * 0 across the board when a project has no tasks yet). Replaces
+ * @lumea-labs/orchestrator's SwarmStatusBar, which is hardcoded to three
+ * buckets. Running pulses when > 0; all states use the shared
+ * STATUS_STYLE tokens so the dot colours match the run rows exactly.
+ */
+export function SwarmStatusBar({ counts }: { counts: RunCounts }) {
+  return (
+    <div className="flex flex-wrap items-center gap-x-5 gap-y-2 border border-border bg-card px-4 py-2.5">
+      {BAR_ORDER.map((status, i) => {
+        const value = counts[status];
+        const style = STATUS_STYLE[status];
+        const dim = value === 0;
+        return (
+          <span key={status} className="flex items-center gap-3">
+            {i > 0 && <span className="h-4 w-px bg-border" aria-hidden />}
+            <span className="inline-flex items-center gap-1.5">
+              <span className="relative inline-flex size-2 shrink-0">
+                {status === "running" && value > 0 && (
+                  <span className={`absolute inset-0 rounded-full opacity-60 animate-ping ${style.dot}`} aria-hidden />
+                )}
+                <span
+                  className={`relative inline-block size-2 rounded-full ${style.dot} ${dim ? "opacity-30" : ""}`}
+                  aria-hidden
+                />
+              </span>
+              <span className={`font-mono text-sm font-bold tabular-nums ${dim ? "text-muted-foreground/40" : style.text}`}>
+                {value}
+              </span>
+              <span className={`font-mono text-[10px] font-medium uppercase tracking-[0.12em] ${dim ? "text-muted-foreground/40" : "text-muted-foreground"}`}>
+                {STATUS_LABEL[status]}
+              </span>
+            </span>
+          </span>
+        );
+      })}
+    </div>
+  );
+}
+
+function formatElapsed(seconds: number): string {
+  if (seconds < 60) return `${Math.max(0, Math.round(seconds))}s`;
+  if (seconds < 3600) return `${Math.floor(seconds / 60)}m`;
+  if (seconds < 86400) return `${Math.floor(seconds / 3600)}h`;
+  return `${Math.floor(seconds / 86400)}d`;
+}
+
+/**
+ * Returns the elapsed seconds between startedAt and finishedAt (or
+ * `now` when still running). Recomputed every second via the parent
+ * `now` prop so running rows tick live without forcing each row to
+ * own a timer.
+ */
+function elapsedSeconds(
+  startedAt: string | undefined,
+  finishedAt: string | undefined,
+  now: number,
+): number {
+  if (!startedAt) return 0;
+  const start = new Date(startedAt).getTime();
+  const end = finishedAt ? new Date(finishedAt).getTime() : now;
+  return Math.max(0, (end - start) / 1000);
+}
+
+function AgentBadge({
+  name,
+  color,
+}: {
+  name: string;
+  color?: string;
+}) {
+  const initial = (name || "?").charAt(0).toUpperCase();
+  return (
+    <span
+      aria-hidden
+      className="grid size-4 shrink-0 place-items-center text-[9px] font-bold leading-none text-white"
+      style={{ background: color ?? "hsl(220 8% 50%)" }}
+    >
+      {initial}
+    </span>
+  );
+}
+
+export function SwarmRunRowItem({
+  run,
+  now,
+}: {
+  run: RunRow;
+  now: number;
+}) {
+  const isLive = run.status === "running" || run.status === "pending";
+  const elapsed = elapsedSeconds(run.startedAt, run.finishedAt, now);
+  const elapsedLabel = run.startedAt ? formatElapsed(elapsed) : "—";
+  const style = STATUS_STYLE[run.status];
+  const label = STATUS_LABEL[run.status];
+
+  const inner = (
+    <div className="group flex items-center gap-3 border-b border-border px-3 py-2 transition-colors last:border-0 hover:bg-foreground/5">
+      {/* Status dot — pulses on running */}
+      <span className="relative inline-flex size-2 shrink-0">
+        {run.status === "running" && (
+          <span
+            aria-hidden
+            className={`absolute inset-0 rounded-full opacity-60 animate-ping ${style.dot}`}
+          />
+        )}
+        <span
+          aria-hidden
+          className={`relative inline-block size-2 rounded-full ${style.dot}`}
+        />
+      </span>
+
+      {/* Status label — mono uppercase */}
+      <span
+        className={`w-[68px] shrink-0 truncate font-mono text-[10px] font-bold uppercase tracking-[0.14em] ${style.text}`}
+      >
+        {label}
+      </span>
+
+      {/* Agent — monogram tile + name */}
+      <span className="flex shrink-0 items-center gap-1.5">
+        <AgentBadge name={run.agentName} color={run.agentColor} />
+        <span className="w-[88px] truncate font-mono text-[10.5px] font-medium uppercase tracking-[0.1em] text-muted-foreground">
+          {run.agentName || "—"}
+        </span>
+      </span>
+
+      {/* Title — flex-1, truncates */}
+      <span className="min-w-0 flex-1 truncate text-[12.5px] leading-tight text-foreground">
+        {run.title}
+      </span>
+
+      {/* Last log — hidden below md */}
+      {run.lastLog ? (
+        <span className="hidden min-w-0 max-w-[28%] truncate font-mono text-[10px] text-muted-foreground/70 md:inline">
+          {run.lastLog}
+        </span>
+      ) : null}
+
+      {/* Elapsed / duration */}
+      <span className="w-12 shrink-0 text-right font-mono text-[10.5px] tabular-nums text-muted-foreground">
+        {isLive && run.startedAt ? `${elapsedLabel} ago` : elapsedLabel}
+      </span>
+    </div>
+  );
+
+  if (run.href) {
+    return (
+      <Link
+        href={run.href}
+        className="block"
+        data-testid={`swarm-run-row-${run.id}`}
+      >
+        {inner}
+      </Link>
+    );
+  }
+  return <div data-testid={`swarm-run-row-${run.id}`}>{inner}</div>;
+}
+
+export function SwarmRunList({
+  runs,
+  emptyLabel = "No runs yet.",
+}: {
+  runs: RunRow[];
+  emptyLabel?: string;
+}) {
+  // Tick every second so running rows show live elapsed time without
+  // each row owning its own setInterval. Pauses when nothing is live.
+  const hasLive = runs.some(
+    (r) => r.status === "running" || r.status === "pending",
+  );
+  const [now, setNow] = useState(() => Date.now());
+  useEffect(() => {
+    if (!hasLive) return;
+    const id = setInterval(() => setNow(Date.now()), 1000);
+    return () => clearInterval(id);
+  }, [hasLive]);
+
+  if (runs.length === 0) {
+    return (
+      <div className="px-3 py-8 text-center text-xs text-muted-foreground">
+        {emptyLabel}
+      </div>
+    );
+  }
+
+  return (
+    <div data-testid="swarm-run-list">
+      {runs.map((run) => (
+        <SwarmRunRowItem key={run.id} run={run} now={now} />
+      ))}
+    </div>
+  );
+}
+
+/**
+ * Skeleton row — matches the real row's column layout exactly so the
+ * transition from skeleton → real content has zero layout shift.
+ */
+export function SwarmRunRowSkeleton() {
+  return (
+    <div className="flex items-center gap-3 border-b border-border px-3 py-2 last:border-0">
+      <span className="size-2 shrink-0 rounded-full bg-muted-foreground/20" />
+      <span className="h-3 w-[68px] shrink-0 bg-muted-foreground/15" />
+      <span className="flex shrink-0 items-center gap-1.5">
+        <span className="size-4 shrink-0 bg-muted-foreground/15" />
+        <span className="h-3 w-[88px] bg-muted-foreground/15" />
+      </span>
+      <span className="h-3 min-w-0 flex-1 bg-muted-foreground/10" />
+      <span className="hidden h-3 w-[18%] bg-muted-foreground/10 md:inline-block" />
+      <span className="h-3 w-12 shrink-0 bg-muted-foreground/15" />
+    </div>
+  );
+}

package/components/dashboard/tab-toggle.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+/**
+ * Inline tab toggle — squared pill buttons in a shared border strip.
+ * Used across SdkSnippetPanel, SkillStepDetail, and anywhere we need
+ * a compact tab switcher inside a card or detail panel.
+ */
+export function TabToggle<T extends string>({
+  value,
+  onChange,
+  options,
+}: {
+  value: T;
+  onChange: (v: T) => void;
+  options: Array<{ value: T; label: string }>;
+}) {
+  return (
+    <div className="inline-flex items-center gap-1 border border-border p-0.5 w-fit">
+      {options.map((opt) => (
+        <button
+          key={opt.value}
+          type="button"
+          onClick={() => onChange(opt.value)}
+          className={`px-2.5 py-1 text-xs font-medium transition-colors ${
+            value === opt.value
+              ? "bg-secondary text-foreground"
+              : "text-muted-foreground hover:text-foreground"
+          }`}
+        >
+          {opt.label}
+        </button>
+      ))}
+    </div>
+  );
+}