@polpo-ai/dashboard 0.1.2 → 0.1.4

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

@@ -1,21 +1,17 @@
 "use client";
 
-import { useState } from "react";
+import { useMemo, 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 { useMutation, useQueryClient } from "@tanstack/react-query";
+import { ArrowLeft, Check, Download, FilePlus2, Link2, Loader2 } from "lucide-react";
 import { usePolpoClient } from "../../lib/polpo-client";
-import { usePolpoSkillsAdapter } from "@lumea-labs/skills-polpo";
-import { SkillsProvider, SkillCreateForm } from "@lumea-labs/skills";
+import {
+  SkillsProvider,
+  SkillCreateForm,
+  type SkillsAdapter,
+  type SkillCreateInput,
+  type Skill,
+} from "@lumea-labs/skills";
 import {
   Dialog,
   DialogContent,
@@ -26,49 +22,20 @@ import {
 } 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)
+ * SkillsInstallWizard — guided stepper that actually installs skills, dogfooding
+ * the SDK end to end:
+ *   - From a URL    → client.installSkills(githubUrl)
+ *   - Paste/create  → @lumea-labs/skills <SkillCreateForm> over a minimal
+ *     SkillsAdapter built on the PolpoClient (adapter.createSkill).
  *
- * The wizard lives inside <SkillsProvider adapter={polpoAdapter}> so the
- * lumea-agents skills UI (SkillCreateForm here, more later) is wired to Polpo.
+ * (Registry browse via Mastra's @mastra/skills-api is a future addition — it's a
+ * Node lib with bundled data, so it needs a server action, not a browser fetch.)
  */
 
-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;
-}
+type Source = "url" | "paste";
 
 export function SkillsInstallWizard() {
-  const { adapter } = usePolpoSkillsAdapter();
-  return (
-    <SkillsProvider adapter={adapter}>
-      <WizardDialog />
-    </SkillsProvider>
-  );
+  return <WizardDialog />;
 }
 
 function WizardDialog() {
@@ -78,33 +45,25 @@ function WizardDialog() {
 
   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,
-  });
+  // Minimal SkillsAdapter on the PolpoClient (same de-dup seam usePolpoClient
+  // resolves: OSS direct, cloud session-proxy). Only createSkill is needed.
+  const adapter = useMemo<SkillsAdapter>(
+    () => ({
+      createSkill: async (input: SkillCreateInput): Promise<Skill> => {
+        const res = await client.createSkill({
+          name: input.name,
+          description: input.description,
+          content: input.body,
+          allowedTools: (input.frontmatter as { allowedTools?: string[] })?.allowedTools,
+        });
+        return { id: res.name, name: res.name, description: input.description, installed: true } as Skill;
+      },
+    }),
+    [client],
+  );
 
   const install = useMutation({
     mutationFn: (src: string) => client.installSkills(src),
@@ -114,6 +73,13 @@ function WizardDialog() {
     },
   });
 
+  const reset = () => {
+    setSource(null);
+    setUrl("");
+    setDone(null);
+    install.reset();
+  };
+
   const afterCreate = () => {
     qc.invalidateQueries({ queryKey: ["skills", id] });
     setDone("created");
@@ -134,7 +100,6 @@ function WizardDialog() {
           </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">
@@ -152,14 +117,7 @@ function WizardDialog() {
             </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"
@@ -175,49 +133,13 @@ function WizardDialog() {
           </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">
+            <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()); }}
@@ -242,13 +164,10 @@ function WizardDialog() {
               </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>
+              <SkillsProvider adapter={adapter}>
+                <SkillCreateForm onCreated={afterCreate} onCancel={() => setSource(null)} />
+              </SkillsProvider>
             )}
           </div>
         )}

package/index.ts

@@ -12,3 +12,6 @@ export type { PolpoClientFactory } from "./lib/polpo-client";
 
 export { default as AgentsView } from "./app/(dashboard)/projects/[id]/agents/view";
 export type { Team } from "./app/(dashboard)/projects/[id]/agents/view";
+
+export { default as SkillsView } from "./app/(dashboard)/projects/[id]/skills/view";
+export type { SkillInfo } from "./app/(dashboard)/projects/[id]/skills/view";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@polpo-ai/dashboard",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "publishConfig": {
     "access": "public"
   },