@unoverse-platform/studio 0.1.0

package/screens/PromptBlocksView.tsx

@@ -0,0 +1,137 @@
+/**
+ * Prompt-blocks view — browse the reusable prompt-snippet library
+ * (apps/unoverse/prompts/blocks) served by the Unoverse server's /prompt-blocks
+ * route. Left: a navigator of blocks grouped by category. Right: the selected block's
+ * metadata + full markdown content, with an enable toggle.
+ *
+ * Ported from apps/unoverse/web/studio/src/views/PromptBlocksView.tsx — kept
+ * diffable against the original while both apps exist.
+ *
+ * A block is referenced in a prompt template as `{{prompt.<camelCaseId>}}`. The toggle
+ * (registry kind "prompt", default ON) controls whether the resolver injects it — turning
+ * a block OFF drops it from the workflow template context.
+ */
+import { useEffect, useMemo, useState } from "react";
+import { fetchUnoverse } from "studio-host";
+import { usePersistentState, useRegistryToggles, ToggleSwitch } from "studio-host";
+import { IdentityHeader } from "./IdentityHeader";
+
+interface PromptBlock {
+  id: string;
+  name: string;
+  description?: string;
+  content: string;
+  tags: string[];
+  category?: string;
+  enabled?: boolean;
+}
+
+/** "spatial-search" → "spatialSearch" — the key used in `{{prompt.<key>}}`. */
+function toCamelCase(str: string): string {
+  return str.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+}
+
+export function PromptBlocksView() {
+  const [blocks, setBlocks] = useState<PromptBlock[]>([]);
+  const [selected, setSelected] = usePersistentState<string | null>("wb:prompt-blocks:selected", null);
+  const [error, setError] = useState<string | null>(null);
+  const toggles = useRegistryToggles("prompt");
+
+  // Load the library once.
+  useEffect(() => {
+    fetchUnoverse("/prompt-blocks")
+      .then((r) => (r.ok ? r.json() : Promise.reject(new Error(`HTTP ${r.status}`))))
+      .then((d) => {
+        const list: PromptBlock[] = d.blocks ?? [];
+        setBlocks(list);
+        const restore = list.find((b) => b.id === selected) ?? list[0];
+        if (restore) setSelected(restore.id);
+      })
+      .catch((e) => setError(String(e?.message ?? e)));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const detail = useMemo(() => blocks.find((b) => b.id === selected) ?? null, [blocks, selected]);
+
+  const byCategory = Object.entries(
+    blocks.reduce<Record<string, PromptBlock[]>>((acc, b) => {
+      (acc[b.category ?? "Uncategorized"] ??= []).push(b);
+      return acc;
+    }, {}),
+  ).sort(([a], [b]) => a.localeCompare(b));
+
+  return (
+    <div className="grid min-h-0 flex-1 grid-cols-[220px_1fr] overflow-hidden">
+      {/* NAVIGATOR */}
+      <nav className="flex min-h-0 min-w-0 flex-col overflow-auto border-r border-gray-700 bg-[#2c2c2e] p-2">
+        {blocks.length === 0 && (
+          <div className="p-2 text-xs text-gray-400">
+            {error
+              ? `Couldn't load prompt blocks (${error}).`
+              : "No prompt blocks. Add .md files to apps/unoverse/prompts/blocks/."}
+          </div>
+        )}
+        {byCategory.map(([cat, items]) => (
+          <div key={cat} className="mb-3">
+            <div className="px-2 py-1 text-[10px] font-semibold uppercase tracking-wider text-gray-400">{cat}</div>
+            {items.map((b) => (
+              <button
+                key={b.id}
+                onClick={() => setSelected(b.id)}
+                className={`block w-full rounded px-2 py-1.5 text-left transition ${
+                  selected === b.id ? "bg-emerald-500/15 text-emerald-300" : "text-gray-300 hover:bg-white/5"
+                }`}
+              >
+                <div className="flex items-center gap-1.5 text-sm font-medium">
+                  {toggles.isEnabled(b.id) && <span className="h-1.5 w-1.5 rounded-full bg-emerald-400" title="Enabled" />}
+                  {b.name}
+                </div>
+                <div className="truncate font-mono text-[11px] text-gray-500">{`{{prompt.${toCamelCase(b.id)}}}`}</div>
+              </button>
+            ))}
+          </div>
+        ))}
+      </nav>
+
+      {/* DETAIL */}
+      <div className="min-h-0 min-w-0 overflow-auto bg-white">
+        {!detail ? (
+          <div className="flex h-full items-center justify-center text-sm text-gray-500">Select a prompt block</div>
+        ) : (
+          <div className="mx-auto max-w-3xl p-8">
+            <IdentityHeader
+              name={detail.name}
+              category={detail.category}
+              id={`{{prompt.${toCamelCase(detail.id)}}}`}
+              description={detail.description}
+              right={<ToggleSwitch on={toggles.isEnabled(detail.id)} onClick={() => toggles.toggle(detail.id)} label="Enabled" />}
+            />
+            <p className="mb-3 text-[11px] text-gray-500">
+              Reference in a prompt as{" "}
+              <span className="font-mono text-gray-600">{`{{prompt.${toCamelCase(detail.id)}}}`}</span>. When off, the resolver
+              skips it.
+            </p>
+
+            {detail.tags && detail.tags.length > 0 && (
+              <div className="mb-5 flex flex-wrap gap-1.5">
+                {detail.tags.map((t) => (
+                  <span key={t} className="rounded-full bg-gray-900/5 px-2 py-0.5 text-[11px] text-gray-600">
+                    {t}
+                  </span>
+                ))}
+              </div>
+            )}
+
+            <div className="mb-2 flex items-center gap-2 text-[10px] font-semibold uppercase tracking-wider text-gray-500">
+              <span>Content</span>
+              <span className="font-normal normal-case text-gray-600">{detail.id}.md</span>
+            </div>
+            <pre className="overflow-x-auto whitespace-pre-wrap rounded-lg border border-gray-200 bg-gray-50 p-4 font-mono text-[12.5px] leading-relaxed text-gray-800">
+              {detail.content}
+            </pre>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/screens/SkillsView.tsx

@@ -0,0 +1,167 @@
+/**
+ * Skills view — browse the skill library (apps/unoverse/prompts/skills) served by
+ * the Unoverse server's /skills routes. Left: a navigator of skills grouped by
+ * category. Right: the selected skill's metadata + full SKILL.md instructions.
+ *
+ * Ported from apps/unoverse/web/studio/src/views/SkillsView.tsx — kept diffable
+ * against the original while both apps exist.
+ *
+ * Read-only: skills are instructions/data for agents (ingested into spatial), never
+ * "run". So this is a neutral chrome surface, not a themed render.
+ */
+import { useEffect, useState } from "react";
+import { fetchUnoverse } from "studio-host";
+import { usePersistentState, useRegistryToggles, ToggleSwitch } from "studio-host";
+import { IdentityHeader } from "./IdentityHeader";
+
+interface SkillSummary {
+  name: string;
+  description: string;
+  version?: string;
+  category?: string;
+  filePath: string;
+}
+
+interface SkillDetail extends SkillSummary {
+  // Spatial-discovery selection text — ranked against user intent (same contract
+  // as nodes/templates).
+  whenToUse?: string;
+  triggers?: string[];
+  instructions: string;
+  contentHash: string;
+}
+
+export function SkillsView() {
+  const [skills, setSkills] = useState<SkillSummary[]>([]);
+  const [selected, setSelected] = usePersistentState<string | null>("wb:skills:selected", null);
+  const [detail, setDetail] = useState<SkillDetail | null>(null);
+  const [loadingDetail, setLoadingDetail] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const spatial = useRegistryToggles("skill");
+
+  // Load the library list once.
+  useEffect(() => {
+    fetchUnoverse("/skills")
+      .then((r) => (r.ok ? r.json() : Promise.reject(new Error(`HTTP ${r.status}`))))
+      .then((d) => {
+        const list: SkillSummary[] = d.skills ?? [];
+        setSkills(list);
+        // Restore the persisted selection across reloads; fall back to the first.
+        const restore = list.find((s) => s.name === selected) ?? list[0];
+        if (restore) setSelected(restore.name);
+      })
+      .catch((e) => setError(String(e?.message ?? e)));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // Load the full SKILL.md whenever the selection changes.
+  useEffect(() => {
+    if (!selected) {
+      setDetail(null);
+      return;
+    }
+    let cancelled = false;
+    setLoadingDetail(true);
+    fetchUnoverse(`/skills/${encodeURIComponent(selected)}`)
+      .then((r) => (r.ok ? r.json() : Promise.reject(new Error(`HTTP ${r.status}`))))
+      .then((d) => {
+        if (!cancelled) setDetail(d.skill ?? null);
+      })
+      .catch((e) => {
+        if (!cancelled) setError(String(e?.message ?? e));
+      })
+      .finally(() => {
+        if (!cancelled) setLoadingDetail(false);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [selected]);
+
+  const byCategory = Object.entries(
+    skills.reduce<Record<string, SkillSummary[]>>((acc, s) => {
+      (acc[s.category ?? "Uncategorized"] ??= []).push(s);
+      return acc;
+    }, {}),
+  ).sort(([a], [b]) => a.localeCompare(b));
+
+  return (
+    <div className="grid min-h-0 flex-1 grid-cols-[220px_1fr] overflow-hidden">
+      {/* NAVIGATOR */}
+      <nav className="flex min-h-0 min-w-0 flex-col overflow-auto border-r border-gray-700 bg-[#2c2c2e] p-2">
+        {skills.length === 0 && (
+          <div className="p-2 text-xs text-gray-400">
+            {error
+              ? `Couldn't load skills (${error}).`
+              : "No skills in the library. Add SKILL.md files to apps/unoverse/prompts/skills/."}
+          </div>
+        )}
+        {byCategory.map(([cat, items]) => (
+          <div key={cat} className="mb-3">
+            <div className="px-2 py-1 text-[10px] font-semibold uppercase tracking-wider text-gray-400">{cat}</div>
+            {items.map((s) => (
+              <button
+                key={s.name}
+                onClick={() => setSelected(s.name)}
+                className={`block w-full rounded px-2 py-1.5 text-left transition ${
+                  selected === s.name ? "bg-emerald-500/15 text-emerald-300" : "text-gray-300 hover:bg-white/5"
+                }`}
+              >
+                <div className="flex items-center gap-1.5 text-sm font-medium">
+                  {spatial.isEnabled(s.name) && <span className="h-1.5 w-1.5 rounded-full bg-emerald-400" title="Spatial on" />}
+                  {s.name}
+                </div>
+                <div className="truncate text-[11px] text-gray-500">{s.description}</div>
+              </button>
+            ))}
+          </div>
+        ))}
+      </nav>
+
+      {/* DETAIL */}
+      <div className="min-h-0 min-w-0 overflow-auto bg-white">
+        {!selected ? (
+          <div className="flex h-full items-center justify-center text-sm text-gray-500">Select a skill</div>
+        ) : (
+          <div className="mx-auto max-w-3xl p-8">
+            <IdentityHeader
+              name={detail?.name ?? selected}
+              category={detail?.category}
+              version={detail?.version}
+              description={detail?.description}
+              whenToUse={detail?.whenToUse}
+              right={<ToggleSwitch on={spatial.isEnabled(selected)} onClick={() => spatial.toggle(selected)} label="Spatial" />}
+            />
+            <p className="mb-3 text-[11px] text-gray-500">When Spatial is on, this skill is embedded as-is into the spatial engine on the next train.</p>
+
+            {detail?.triggers && detail.triggers.length > 0 && (
+              <div className="mb-5 flex flex-wrap gap-1.5">
+                {detail.triggers.map((t) => (
+                  <span key={t} className="rounded-full bg-gray-900/5 px-2 py-0.5 text-[11px] text-gray-600">
+                    {t}
+                  </span>
+                ))}
+              </div>
+            )}
+
+            <div className="mb-2 flex items-center gap-2 text-[10px] font-semibold uppercase tracking-wider text-gray-500">
+              <span>Instructions</span>
+              <span className="font-normal normal-case text-gray-600">SKILL.md</span>
+            </div>
+            {loadingDetail && !detail ? (
+              <div className="text-sm text-gray-500">Loading…</div>
+            ) : (
+              <pre className="overflow-x-auto whitespace-pre-wrap rounded-lg border border-gray-200 bg-gray-50 p-4 font-mono text-[12.5px] leading-relaxed text-gray-800">
+                {detail?.instructions ?? ""}
+              </pre>
+            )}
+
+            {detail?.contentHash && (
+              <div className="mt-4 font-mono text-[10px] text-gray-400">hash: {detail.contentHash.slice(0, 16)}…</div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}