@webgrow/skillhub 0.1.0

package/dashboard/src/App.jsx

@@ -0,0 +1,1743 @@
+import {
+  Activity,
+  AlertTriangle,
+  BookOpen,
+  Bot,
+  CheckCircle2,
+  Clock3,
+  Database,
+  FileText,
+  GitBranch,
+  Layers,
+  ListChecks,
+  Loader2,
+  Pencil,
+  Play,
+  Plus,
+  Radio,
+  Rocket,
+  Save,
+  TerminalSquare,
+  Trash2,
+  XCircle,
+} from "lucide-react";
+import { useMutation, useQuery } from "convex/react";
+import { useEffect, useMemo, useState } from "react";
+import { refs } from "./convexRefs.js";
+
+const emptyLoopForm = {
+  name: "",
+  description: "",
+  tags: "",
+  objective: "",
+  trigger: "manual",
+  primarySkill: "",
+  steps: [],
+};
+
+const emptySkillForm = {
+  name: "",
+  summary: "",
+  tags: "",
+  instructions: "",
+  inputSpec: "",
+  outputSpec: "",
+  testPrompt: "",
+};
+
+const statusTone = {
+  running: "good",
+  waiting: "warn",
+  paused: "neutral",
+  completed: "good",
+  failed: "bad",
+  canceled: "bad",
+  pending: "warn",
+  claimed: "info",
+  applying: "info",
+  skipped: "neutral",
+  expired: "bad",
+  draft: "warn",
+  published: "good",
+  archived: "neutral",
+  connected: "good",
+  disconnected: "neutral",
+};
+
+const statusIcons = {
+  running: Activity,
+  waiting: Clock3,
+  paused: Radio,
+  completed: CheckCircle2,
+  failed: XCircle,
+  canceled: XCircle,
+  pending: Clock3,
+  claimed: Bot,
+  applying: Loader2,
+  skipped: AlertTriangle,
+  expired: XCircle,
+};
+
+export function App() {
+  const activeRuns = useQuery(refs.runs.listActive, { limit: 80 });
+  const loopRows = useQuery(refs.loops.list, { limit: 100 });
+  const skillRows = useQuery(refs.skills.list, { limit: 100 });
+  const workerState = useQuery(refs.bridge.listWorkerState, { sessionLimit: 12 });
+  const createRun = useMutation(refs.runs.createRun);
+  const enqueueHostAction = useMutation(refs.bridge.enqueueHostAction);
+  const createLoopDraft = useMutation(refs.loops.createDraft);
+  const saveLoopDraftMutation = useMutation(refs.loops.saveDraft);
+  const publishLoopDraft = useMutation(refs.loops.publishDraft);
+  const runLoop = useMutation(refs.loops.run);
+  const createSkillDraft = useMutation(refs.skills.createDraft);
+  const saveSkillDraft = useMutation(refs.skills.saveDraft);
+  const publishSkillDraft = useMutation(refs.skills.publishDraft);
+  const runSkillTest = useMutation(refs.skills.runTest);
+  const [activeView, setActiveView] = useState("onboarding");
+  const [selectedRunId, setSelectedRunId] = useState(null);
+  const [selectedLoopId, setSelectedLoopId] = useState(null);
+  const [selectedSkillId, setSelectedSkillId] = useState(null);
+  const [loopForm, setLoopForm] = useState(emptyLoopForm);
+  const [skillForm, setSkillForm] = useState(emptySkillForm);
+  const [isLoopDirty, setIsLoopDirty] = useState(false);
+  const [isSkillDirty, setIsSkillDirty] = useState(false);
+  const [busyAction, setBusyAction] = useState("");
+  const [error, setError] = useState("");
+  const [notice, setNotice] = useState("");
+
+  useEffect(() => {
+    if (!selectedRunId && activeRuns?.length) {
+      setSelectedRunId(activeRuns[0]._id);
+    }
+  }, [activeRuns, selectedRunId]);
+
+  useEffect(() => {
+    if (!selectedLoopId && loopRows?.length) {
+      setSelectedLoopId(loopRows[0].loop._id);
+    }
+  }, [loopRows, selectedLoopId]);
+
+  useEffect(() => {
+    if (!selectedSkillId && skillRows?.length) {
+      setSelectedSkillId(skillRows[0].skill._id);
+    }
+  }, [selectedSkillId, skillRows]);
+
+  const selectedPacket = useQuery(
+    refs.runs.getRun,
+    selectedRunId
+      ? { runId: selectedRunId, eventLimit: 180, logLimit: 180 }
+      : "skip",
+  );
+
+  const selectedLoopPacket = useQuery(
+    refs.loops.get,
+    selectedLoopId ? { loopId: selectedLoopId } : "skip",
+  );
+
+  const selectedSkillPacket = useQuery(
+    refs.skills.get,
+    selectedSkillId ? { skillId: selectedSkillId } : "skip",
+  );
+
+  useEffect(() => {
+    if (!selectedLoopPacket) {
+      setLoopForm(emptyLoopForm);
+      return;
+    }
+
+    const { loop, draftVersion, latestVersion } = selectedLoopPacket;
+    const editableVersion = draftVersion ?? latestVersion;
+    const manifest = editableVersion?.manifest ?? {};
+    setLoopForm({
+      name: loop.name ?? "",
+      description: loop.description ?? "",
+      tags: (loop.tags ?? []).join(", "),
+      objective: manifest.objective ?? "",
+      trigger: manifest.trigger ?? "manual",
+      primarySkill: loop.primarySkill ?? "",
+      steps: normalizeUiSteps(manifest.steps ?? []),
+    });
+    setIsLoopDirty(false);
+  }, [selectedLoopPacket?.loop?._id]);
+
+  useEffect(() => {
+    if (!selectedSkillPacket) {
+      setSkillForm(emptySkillForm);
+      return;
+    }
+
+    const { skill, draftVersion, latestVersion } = selectedSkillPacket;
+    const editableVersion = draftVersion ?? latestVersion;
+    setSkillForm({
+      name: skill.name ?? "",
+      summary: skill.summary ?? "",
+      tags: (skill.tags ?? []).join(", "),
+      instructions: editableVersion?.instructions ?? "",
+      inputSpec: editableVersion?.inputSpec ?? "",
+      outputSpec: editableVersion?.outputSpec ?? "",
+      testPrompt: editableVersion?.testPrompt ?? "",
+    });
+    setIsSkillDirty(false);
+  }, [selectedSkillPacket?.skill?._id]);
+
+  const selectedRun = selectedPacket?.run ?? null;
+  const hostActions = selectedPacket?.hostActions ?? [];
+  const events = selectedPacket?.events ?? [];
+  const logs = selectedPacket?.logs ?? [];
+  const loopItems = loopRows ?? [];
+  const skillItems = skillRows ?? [];
+  const selectedLoop = selectedLoopPacket?.loop ?? null;
+  const selectedLoopDraft = selectedLoopPacket?.draftVersion ?? null;
+  const selectedLoopLatest = selectedLoopPacket?.latestVersion ?? null;
+  const loopVersions = selectedLoopPacket?.versions ?? [];
+  const selectedSkill = selectedSkillPacket?.skill ?? null;
+  const draftVersion = selectedSkillPacket?.draftVersion ?? null;
+  const latestVersion = selectedSkillPacket?.latestVersion ?? null;
+  const versions = selectedSkillPacket?.versions ?? [];
+
+  const runMetrics = useMemo(() => {
+    const actionCounts = hostActions.reduce((counts, action) => {
+      counts[action.status] = (counts[action.status] ?? 0) + 1;
+      return counts;
+    }, {});
+
+    return {
+      activeRuns: activeRuns?.length ?? 0,
+      pendingActions: actionCounts.pending ?? 0,
+      liveLogs: logs.length,
+    };
+  }, [activeRuns, hostActions, logs]);
+
+  const loopMetrics = useMemo(() => {
+    const published = loopItems.filter((row) => row.latestVersion).length;
+    const drafts = loopItems.filter((row) => row.draftVersion).length;
+
+    return {
+      loops: loopItems.length,
+      published,
+      drafts,
+    };
+  }, [loopItems]);
+
+  const skillMetrics = useMemo(() => {
+    const published = skillItems.filter((row) => row.latestVersion).length;
+    const drafts = skillItems.filter((row) => row.draftVersion).length;
+
+    return {
+      skills: skillItems.length,
+      published,
+      drafts,
+    };
+  }, [skillItems]);
+
+  const onboardingMetrics = useMemo(
+    () => ({
+      connectedWorkers:
+        workerState?.workers?.filter((worker) => worker.connected).length ?? 0,
+      pendingActions: workerState?.pendingCount ?? 0,
+      activeActions: workerState?.activeCount ?? 0,
+    }),
+    [workerState],
+  );
+
+  async function startDemoRun() {
+    setBusyAction("demo");
+    clearMessages();
+
+    try {
+      const runId = await createRun({
+        loopSlug: "codex-bridge-demo",
+        prompt: "Verify the SkillHub bridge connection to Codex.",
+        graph: {
+          entryNodeId: "codex.adapter",
+          nodes: [{ id: "codex.adapter", type: "hostAction" }],
+        },
+        controls: {
+          source: "dashboard",
+          mode: "demo",
+        },
+      });
+
+      await enqueueHostAction({
+        runId,
+        nodeId: "codex.adapter",
+        actionType: "codex.cli",
+        title: "Run Codex bridge smoke task",
+        idempotencyKey: `dashboard-demo:${runId}`,
+        payload: {
+          prompt:
+            "Acknowledge the SkillHub bridge smoke task and report the next safe implementation step.",
+          expectedMode: "dry-run",
+        },
+        codexTool: {
+          adapter: "codex-cli",
+          safeDefault: "dry-run",
+        },
+      });
+
+      setSelectedRunId(runId);
+      setActiveView("runs");
+    } catch (cause) {
+      setError(errorMessage(cause));
+    } finally {
+      setBusyAction("");
+    }
+  }
+
+  async function createNewLoop() {
+    setBusyAction("create-loop");
+    clearMessages();
+
+    try {
+      const loopId = await createLoopDraft({
+        name: `Untitled loop ${loopItems.length + 1}`,
+        description: "Draft loop",
+        objective: "Describe the repeatable outcome this loop should achieve.",
+        trigger: "manual",
+        tags: ["draft"],
+      });
+      setSelectedLoopId(loopId);
+      setActiveView("loops");
+      setNotice("Loop draft created.");
+    } catch (cause) {
+      setError(errorMessage(cause));
+    } finally {
+      setBusyAction("");
+    }
+  }
+
+  async function saveLoopDraft({ quiet = false } = {}) {
+    if (!selectedLoopId) {
+      throw new Error("Select or create a loop first.");
+    }
+
+    await saveLoopDraftMutation({
+      loopId: selectedLoopId,
+      name: loopForm.name,
+      description: optionalValue(loopForm.description),
+      objective: loopForm.objective,
+      trigger: optionalValue(loopForm.trigger),
+      primarySkill: optionalValue(loopForm.primarySkill),
+      tags: parseTags(loopForm.tags),
+      steps: loopForm.steps,
+    });
+    setIsLoopDirty(false);
+
+    if (!quiet) {
+      setNotice("Loop draft saved.");
+    }
+  }
+
+  async function handleSaveLoopDraft() {
+    setBusyAction("save-loop");
+    clearMessages();
+
+    try {
+      await saveLoopDraft();
+    } catch (cause) {
+      setError(errorMessage(cause));
+    } finally {
+      setBusyAction("");
+    }
+  }
+
+  async function handlePublishLoop() {
+    setBusyAction("publish-loop");
+    clearMessages();
+
+    try {
+      await saveLoopDraft({ quiet: true });
+      await publishLoopDraft({ loopId: selectedLoopId });
+      setIsLoopDirty(false);
+      setNotice("Loop published.");
+    } catch (cause) {
+      setError(errorMessage(cause));
+    } finally {
+      setBusyAction("");
+    }
+  }
+
+  async function handleRunLoop() {
+    setBusyAction("run-loop");
+    clearMessages();
+
+    try {
+      if (isLoopDirty) {
+        await saveLoopDraft({ quiet: true });
+      }
+      const result = await runLoop({
+        loopId: selectedLoopId,
+        promptOverride: optionalValue(loopForm.objective),
+      });
+      setSelectedRunId(result.runId);
+      setActiveView("runs");
+      setNotice("Loop run queued.");
+    } catch (cause) {
+      setError(errorMessage(cause));
+    } finally {
+      setBusyAction("");
+    }
+  }
+
+  function updateLoopField(field, value) {
+    setIsLoopDirty(true);
+    setLoopForm((current) => ({ ...current, [field]: value }));
+  }
+
+  function updateLoopStep(index, field, value) {
+    setIsLoopDirty(true);
+    setLoopForm((current) => ({
+      ...current,
+      steps: current.steps.map((step, stepIndex) =>
+        stepIndex === index ? { ...step, [field]: value } : step,
+      ),
+    }));
+  }
+
+  function addLoopStep() {
+    setIsLoopDirty(true);
+    setLoopForm((current) => {
+      const nextIndex = current.steps.length + 1;
+      return {
+        ...current,
+        steps: [
+          ...current.steps,
+          {
+            id: `step-${nextIndex}`,
+            label: `Step ${nextIndex}`,
+            actionType: "codex.cli",
+            skillSlug: "",
+            instructions: `Complete step ${nextIndex}.`,
+          },
+        ],
+      };
+    });
+  }
+
+  function removeLoopStep(index) {
+    setIsLoopDirty(true);
+    setLoopForm((current) => ({
+      ...current,
+      steps: current.steps.filter((_, stepIndex) => stepIndex !== index),
+    }));
+  }
+
+  async function createNewSkill() {
+    setBusyAction("create-skill");
+    clearMessages();
+
+    try {
+      const skillId = await createSkillDraft({
+        name: `Untitled skill ${skillItems.length + 1}`,
+        summary: "Draft skill",
+        instructions:
+          "Describe the role, constraints, process, and final answer format for this skill.",
+        testPrompt: "Run this skill against a small realistic example.",
+        tags: ["draft"],
+      });
+      setSelectedSkillId(skillId);
+      setActiveView("skills");
+      setNotice("Draft created.");
+    } catch (cause) {
+      setError(errorMessage(cause));
+    } finally {
+      setBusyAction("");
+    }
+  }
+
+  async function saveDraft({ quiet = false } = {}) {
+    if (!selectedSkillId) {
+      throw new Error("Select or create a skill first.");
+    }
+
+    await saveSkillDraft({
+      skillId: selectedSkillId,
+      name: skillForm.name,
+      summary: optionalValue(skillForm.summary),
+      instructions: skillForm.instructions,
+      inputSpec: optionalValue(skillForm.inputSpec),
+      outputSpec: optionalValue(skillForm.outputSpec),
+      testPrompt: optionalValue(skillForm.testPrompt),
+      tags: parseTags(skillForm.tags),
+    });
+    setIsSkillDirty(false);
+
+    if (!quiet) {
+      setNotice("Draft saved.");
+    }
+  }
+
+  async function handleSaveDraft() {
+    setBusyAction("save-skill");
+    clearMessages();
+
+    try {
+      await saveDraft();
+    } catch (cause) {
+      setError(errorMessage(cause));
+    } finally {
+      setBusyAction("");
+    }
+  }
+
+  async function handlePublishSkill() {
+    setBusyAction("publish-skill");
+    clearMessages();
+
+    try {
+      await saveDraft({ quiet: true });
+      await publishSkillDraft({ skillId: selectedSkillId });
+      setIsSkillDirty(false);
+      setNotice("Skill published.");
+    } catch (cause) {
+      setError(errorMessage(cause));
+    } finally {
+      setBusyAction("");
+    }
+  }
+
+  async function handleRunSkillTest() {
+    setBusyAction("run-skill");
+    clearMessages();
+
+    try {
+      if (isSkillDirty || draftVersion) {
+        await saveDraft({ quiet: true });
+      }
+      const result = await runSkillTest({
+        skillId: selectedSkillId,
+        promptOverride: optionalValue(skillForm.testPrompt),
+      });
+      setSelectedRunId(result.runId);
+      setActiveView("runs");
+      setNotice("Skill test queued.");
+    } catch (cause) {
+      setError(errorMessage(cause));
+    } finally {
+      setBusyAction("");
+    }
+  }
+
+  function clearMessages() {
+    setError("");
+    setNotice("");
+  }
+
+  return (
+    <main className="app-shell">
+      <aside className="sidebar" aria-label="SkillHub navigation">
+        <div className="brand-row">
+          <div className="brand-mark">
+            <Database size={18} aria-hidden="true" />
+          </div>
+          <div>
+            <div className="brand-title">SkillHub</div>
+            <div className="brand-subtitle">Control plane</div>
+          </div>
+        </div>
+
+        <div className="view-tabs" role="tablist" aria-label="Workspace">
+          <button
+            className={activeView === "onboarding" ? "selected" : ""}
+            type="button"
+            role="tab"
+            aria-selected={activeView === "onboarding"}
+            onClick={() => setActiveView("onboarding")}
+          >
+            <Rocket size={16} aria-hidden="true" />
+            <span>Connect</span>
+            <strong>{onboardingMetrics.connectedWorkers}</strong>
+          </button>
+          <button
+            className={activeView === "loops" ? "selected" : ""}
+            type="button"
+            role="tab"
+            aria-selected={activeView === "loops"}
+            onClick={() => setActiveView("loops")}
+          >
+            <GitBranch size={16} aria-hidden="true" />
+            <span>Loops</span>
+            <strong>{loopMetrics.loops}</strong>
+          </button>
+          <button
+            className={activeView === "skills" ? "selected" : ""}
+            type="button"
+            role="tab"
+            aria-selected={activeView === "skills"}
+            onClick={() => setActiveView("skills")}
+          >
+            <BookOpen size={16} aria-hidden="true" />
+            <span>Skills</span>
+            <strong>{skillMetrics.skills}</strong>
+          </button>
+          <button
+            className={activeView === "runs" ? "selected" : ""}
+            type="button"
+            role="tab"
+            aria-selected={activeView === "runs"}
+            onClick={() => setActiveView("runs")}
+          >
+            <Activity size={16} aria-hidden="true" />
+            <span>Runs</span>
+            <strong>{runMetrics.activeRuns}</strong>
+          </button>
+        </div>
+
+        {activeView === "loops" ? (
+          <LoopSidebar
+            loading={loopRows === undefined}
+            rows={loopItems}
+            selectedLoopId={selectedLoopId}
+            onSelect={setSelectedLoopId}
+          />
+        ) : null}
+        {activeView === "skills" ? (
+          <SkillSidebar
+            loading={skillRows === undefined}
+            rows={skillItems}
+            selectedSkillId={selectedSkillId}
+            onSelect={setSelectedSkillId}
+          />
+        ) : null}
+        {activeView === "runs" ? (
+          <RunSidebar
+            loading={activeRuns === undefined}
+            runs={activeRuns ?? []}
+            selectedRunId={selectedRunId}
+            onSelect={setSelectedRunId}
+          />
+        ) : null}
+        {activeView === "onboarding" ? (
+          <OnboardingSidebar workerState={workerState} />
+        ) : null}
+      </aside>
+
+      <section className="workspace">
+        {activeView === "onboarding" ? (
+          <OnboardingWorkspace
+            metrics={onboardingMetrics}
+            workerState={workerState}
+          />
+        ) : null}
+        {activeView === "loops" ? (
+          <LoopsWorkspace
+            busyAction={busyAction}
+            draftVersion={selectedLoopDraft}
+            form={loopForm}
+            latestVersion={selectedLoopLatest}
+            onAddStep={addLoopStep}
+            onCreate={createNewLoop}
+            onFieldChange={updateLoopField}
+            onPublish={handlePublishLoop}
+            onRemoveStep={removeLoopStep}
+            onRun={handleRunLoop}
+            onSave={handleSaveLoopDraft}
+            onStepChange={updateLoopStep}
+            selectedLoop={selectedLoop}
+            skillRows={skillItems}
+            versions={loopVersions}
+          />
+        ) : null}
+        {activeView === "skills" ? (
+          <SkillsWorkspace
+            busyAction={busyAction}
+            draftVersion={draftVersion}
+            form={skillForm}
+            latestVersion={latestVersion}
+            onCreate={createNewSkill}
+            onFieldChange={(field, value) => {
+              setIsSkillDirty(true);
+              setSkillForm((current) => ({ ...current, [field]: value }));
+            }}
+            onPublish={handlePublishSkill}
+            onRunTest={handleRunSkillTest}
+            onSave={handleSaveDraft}
+            selectedSkill={selectedSkill}
+            versions={versions}
+          />
+        ) : null}
+        {activeView === "runs" ? (
+          <RunsWorkspace
+            busyAction={busyAction}
+            events={events}
+            hostActions={hostActions}
+            logs={logs}
+            metrics={runMetrics}
+            onStartDemo={startDemoRun}
+            selectedRun={selectedRun}
+          />
+        ) : null}
+
+        {error ? <div className="error-banner" role="alert">{error}</div> : null}
+        {notice ? <div className="notice-banner" role="status">{notice}</div> : null}
+      </section>
+    </main>
+  );
+}
+
+function LoopSidebar({ rows, selectedLoopId, loading, onSelect }) {
+  return (
+    <>
+      <div className="sidebar-header">
+        <span>Loops</span>
+        <span className="count-pill">{rows.length}</span>
+      </div>
+      <div className="run-list">
+        {loading ? (
+          <LoadingRow label="Loading loops" />
+        ) : rows.length ? (
+          rows.map(({ loop, latestVersion, draftVersion }) => (
+            <LoopListItem
+              key={loop._id}
+              draftVersion={draftVersion}
+              latestVersion={latestVersion}
+              loop={loop}
+              selected={loop._id === selectedLoopId}
+              onSelect={() => onSelect(loop._id)}
+            />
+          ))
+        ) : (
+          <div className="empty-state">No loops</div>
+        )}
+      </div>
+    </>
+  );
+}
+
+function SkillSidebar({ rows, selectedSkillId, loading, onSelect }) {
+  return (
+    <>
+      <div className="sidebar-header">
+        <span>Skills</span>
+        <span className="count-pill">{rows.length}</span>
+      </div>
+      <div className="run-list">
+        {loading ? (
+          <LoadingRow label="Loading skills" />
+        ) : rows.length ? (
+          rows.map(({ skill, latestVersion, draftVersion }) => (
+            <SkillListItem
+              key={skill._id}
+              draftVersion={draftVersion}
+              latestVersion={latestVersion}
+              selected={skill._id === selectedSkillId}
+              skill={skill}
+              onSelect={() => onSelect(skill._id)}
+            />
+          ))
+        ) : (
+          <div className="empty-state">No skills</div>
+        )}
+      </div>
+    </>
+  );
+}
+
+function RunSidebar({ runs, selectedRunId, loading, onSelect }) {
+  return (
+    <>
+      <div className="sidebar-header">
+        <span>Runs</span>
+        <span className="count-pill">{runs.length}</span>
+      </div>
+      <div className="run-list">
+        {loading ? (
+          <LoadingRow label="Loading runs" />
+        ) : runs.length ? (
+          runs.map((run) => (
+            <RunListItem
+              key={run._id}
+              run={run}
+              selected={run._id === selectedRunId}
+              onSelect={() => onSelect(run._id)}
+            />
+          ))
+        ) : (
+          <div className="empty-state">No active runs</div>
+        )}
+      </div>
+    </>
+  );
+}
+
+function OnboardingSidebar({ workerState }) {
+  const workers = workerState?.workers ?? [];
+  const connected = workers.filter((worker) => worker.connected).length;
+  const label = connected ? "Connected" : "Disconnected";
+
+  return (
+    <>
+      <div className="sidebar-header">
+        <span>Codex</span>
+        <span className="count-pill">{connected}</span>
+      </div>
+      <div className="connect-summary">
+        <StatusBadge status={connected ? "connected" : "disconnected"} />
+        <span>{label}</span>
+      </div>
+      <div className="sidebar-header">
+        <span>Worker</span>
+        <span className="count-pill">{workers.length}</span>
+      </div>
+      <div className="run-list">
+        {workerState === undefined ? (
+          <LoadingRow label="Loading worker state" />
+        ) : workers.length ? (
+          workers.map((worker) => (
+            <WorkerListItem key={worker.session._id} worker={worker} />
+          ))
+        ) : (
+          <div className="empty-state">No bridge worker</div>
+        )}
+      </div>
+    </>
+  );
+}
+
+function WorkerListItem({ worker }) {
+  return (
+    <div className="worker-item">
+      <span className={`status-dot ${worker.connected ? "good" : "neutral"}`}>
+        <Bot size={14} aria-hidden="true" />
+      </span>
+      <span className="run-item-main">
+        <span className="run-name">{worker.session.name}</span>
+        <span className="run-meta">
+          {worker.connected ? "connected" : "disconnected"} -{" "}
+          {formatTime(worker.session.lastSeenAt)}
+        </span>
+      </span>
+    </div>
+  );
+}
+
+function OnboardingWorkspace({ metrics, workerState }) {
+  const workers = workerState?.workers ?? [];
+
+  return (
+    <>
+      <header className="topbar">
+        <div>
+          <p className="eyebrow">Codex onboarding</p>
+          <h1>Connect SkillHub</h1>
+        </div>
+      </header>
+
+      <div className="metric-grid" aria-label="Connection metrics">
+        <Metric label="Workers connected" value={metrics.connectedWorkers} icon={Bot} />
+        <Metric label="Queued actions" value={metrics.pendingActions} icon={Clock3} />
+        <Metric label="Active actions" value={metrics.activeActions} icon={Activity} />
+      </div>
+
+      <div className="onboarding-grid">
+        <section className="panel onboarding-panel" aria-label="Setup checklist">
+          <PanelTitle icon={Rocket} title="Setup" />
+          <div className="checklist">
+            <ChecklistItem done label="Install SkillHub" detail="Run npx skillhub connect once." />
+            <ChecklistItem
+              done={metrics.connectedWorkers > 0}
+              label="Connect Codex"
+              detail="The SkillHub MCP tools are registered in Codex."
+            />
+            <ChecklistItem
+              done={(workerState?.pendingCount ?? 0) >= 0}
+              label="Run a smoke test"
+              detail='Ask Codex: "Show my SkillHub options."'
+            />
+            <ChecklistItem
+              done={metrics.activeActions > 0 || metrics.pendingActions > 0}
+              label="Run an option"
+              detail='Ask Codex: "Run option 1."'
+            />
+          </div>
+          <details className="advanced-disclosure">
+            <summary>
+              <TerminalSquare size={15} aria-hidden="true" />
+              <span>Advanced</span>
+            </summary>
+            <pre className="prompt-preview">skillhub connect{"\n"}skillhub bridge start{"\n"}skillhub status</pre>
+          </details>
+        </section>
+
+        <section className="panel onboarding-panel" aria-label="Bridge worker state">
+          <PanelTitle icon={Radio} title="Bridge Worker" />
+          {workerState === undefined ? (
+            <LoadingRow label="Loading worker state" />
+          ) : workers.length ? (
+            <div className="worker-table">
+              {workers.map((worker) => (
+                <WorkerStateRow key={worker.session._id} worker={worker} />
+              ))}
+            </div>
+          ) : (
+            <EmptyPanel label="No worker connected" />
+          )}
+        </section>
+      </div>
+    </>
+  );
+}
+
+function ChecklistItem({ detail, done, label }) {
+  return (
+    <div className="checklist-item">
+      <span className={`status-dot ${done ? "good" : "neutral"}`}>
+        {done ? (
+          <CheckCircle2 size={15} aria-hidden="true" />
+        ) : (
+          <Clock3 size={15} aria-hidden="true" />
+        )}
+      </span>
+      <span>
+        <strong>{label}</strong>
+        <small>{detail}</small>
+      </span>
+    </div>
+  );
+}
+
+function WorkerStateRow({ worker }) {
+  return (
+    <article className="worker-row">
+      <div>
+        <strong>{worker.session.name}</strong>
+        <span>{worker.session.kind}</span>
+      </div>
+      <StatusBadge status={worker.connected ? "connected" : "disconnected"} />
+      <WorkerDetail label="Last seen" value={formatDateTime(worker.session.lastSeenAt)} />
+      <WorkerDetail
+        label="Current action"
+        value={worker.currentAction?.title ?? "none"}
+      />
+      {worker.lastError ? (
+        <WorkerDetail label="Last error" value={worker.lastError} />
+      ) : null}
+    </article>
+  );
+}
+
+function WorkerDetail({ label, value }) {
+  return (
+    <div className="worker-detail">
+      <span>{label}</span>
+      <strong>{value}</strong>
+    </div>
+  );
+}
+
+function LoopsWorkspace({
+  busyAction,
+  draftVersion,
+  form,
+  latestVersion,
+  onAddStep,
+  onCreate,
+  onFieldChange,
+  onPublish,
+  onRemoveStep,
+  onRun,
+  onSave,
+  onStepChange,
+  selectedLoop,
+  skillRows,
+  versions,
+}) {
+  const isBusy = Boolean(busyAction);
+  const hasLoop = Boolean(selectedLoop);
+  const status = draftVersion ? "draft" : latestVersion ? "published" : "draft";
+
+  return (
+    <>
+      <header className="topbar">
+        <div>
+          <p className="eyebrow">Loop builder</p>
+          <h1>{selectedLoop?.name ?? "Create a loop"}</h1>
+        </div>
+        <button
+          className="primary-button"
+          type="button"
+          onClick={onCreate}
+          disabled={busyAction === "create-loop"}
+        >
+          {busyAction === "create-loop" ? (
+            <Loader2 size={17} className="spin" aria-hidden="true" />
+          ) : (
+            <Plus size={17} aria-hidden="true" />
+          )}
+          <span>New loop</span>
+        </button>
+      </header>
+
+      <div className="loops-grid">
+        <section className="panel editor-panel" aria-label="Loop editor">
+          <PanelTitle icon={GitBranch} title="Loop" />
+          {hasLoop ? (
+            <div className="form-stack">
+              <div className="form-two">
+                <Field label="Name" htmlFor="loop-name">
+                  <input
+                    id="loop-name"
+                    value={form.name}
+                    onChange={(event) => onFieldChange("name", event.target.value)}
+                  />
+                </Field>
+                <Field label="Trigger" htmlFor="loop-trigger">
+                  <input
+                    id="loop-trigger"
+                    value={form.trigger}
+                    onChange={(event) => onFieldChange("trigger", event.target.value)}
+                  />
+                </Field>
+              </div>
+              <Field label="Description" htmlFor="loop-description">
+                <input
+                  id="loop-description"
+                  value={form.description}
+                  onChange={(event) => onFieldChange("description", event.target.value)}
+                />
+              </Field>
+              <div className="form-two">
+                <Field label="Tags" htmlFor="loop-tags">
+                  <input
+                    id="loop-tags"
+                    value={form.tags}
+                    onChange={(event) => onFieldChange("tags", event.target.value)}
+                  />
+                </Field>
+                <Field label="Primary skill" htmlFor="loop-primary-skill">
+                  <select
+                    id="loop-primary-skill"
+                    className="select-control"
+                    value={form.primarySkill}
+                    onChange={(event) =>
+                      onFieldChange("primarySkill", event.target.value)
+                    }
+                  >
+                    <option value="">None</option>
+                    {skillRows.map(({ skill }) => (
+                      <option key={skill._id} value={skill.slug}>
+                        {skill.name}
+                      </option>
+                    ))}
+                  </select>
+                </Field>
+              </div>
+              <Field label="Objective" htmlFor="loop-objective">
+                <textarea
+                  id="loop-objective"
+                  value={form.objective}
+                  onChange={(event) => onFieldChange("objective", event.target.value)}
+                />
+              </Field>
+
+              <div className="step-toolbar">
+                <PanelTitle icon={Layers} title="Steps" />
+                <button
+                  className="secondary-button"
+                  type="button"
+                  onClick={onAddStep}
+                  disabled={isBusy}
+                >
+                  <Plus size={16} aria-hidden="true" />
+                  <span>Add step</span>
+                </button>
+              </div>
+
+              <div className="step-list">
+                {form.steps.map((step, index) => (
+                  <StepEditor
+                    key={`${step.id}-${index}`}
+                    index={index}
+                    onChange={onStepChange}
+                    onRemove={onRemoveStep}
+                    skillRows={skillRows}
+                    step={step}
+                    totalSteps={form.steps.length}
+                  />
+                ))}
+              </div>
+
+              <div className="form-actions">
+                <button
+                  className="secondary-button"
+                  type="button"
+                  onClick={onSave}
+                  disabled={isBusy}
+                >
+                  {busyAction === "save-loop" ? (
+                    <Loader2 size={16} className="spin" aria-hidden="true" />
+                  ) : (
+                    <Save size={16} aria-hidden="true" />
+                  )}
+                  <span>Save draft</span>
+                </button>
+                <button
+                  className="secondary-button"
+                  type="button"
+                  onClick={onRun}
+                  disabled={isBusy}
+                >
+                  {busyAction === "run-loop" ? (
+                    <Loader2 size={16} className="spin" aria-hidden="true" />
+                  ) : (
+                    <Play size={16} aria-hidden="true" />
+                  )}
+                  <span>Run loop</span>
+                </button>
+                <button
+                  className="primary-button"
+                  type="button"
+                  onClick={onPublish}
+                  disabled={isBusy}
+                >
+                  {busyAction === "publish-loop" ? (
+                    <Loader2 size={16} className="spin" aria-hidden="true" />
+                  ) : (
+                    <Rocket size={16} aria-hidden="true" />
+                  )}
+                  <span>Publish</span>
+                </button>
+              </div>
+            </div>
+          ) : (
+            <EmptyPanel label="Create a loop" />
+          )}
+        </section>
+
+        <section className="panel preview-panel" aria-label="Loop preview">
+          <PanelTitle icon={FileText} title="Preview" />
+          {hasLoop ? (
+            <div className="preview-stack">
+              <div className="preview-meta">
+                <StatusBadge status={status} />
+                <span>{selectedLoop.slug}</span>
+              </div>
+              <pre className="prompt-preview">{renderLoopPreview(form)}</pre>
+              <VersionHistory versions={versions} />
+            </div>
+          ) : (
+            <EmptyPanel label="No loop selected" />
+          )}
+        </section>
+      </div>
+    </>
+  );
+}
+
+function StepEditor({ index, onChange, onRemove, skillRows, step, totalSteps }) {
+  const prefix = `loop-step-${index}`;
+
+  return (
+    <section className="step-card" aria-label={`Loop step ${index + 1}`}>
+      <div className="step-header">
+        <span className="step-index">{index + 1}</span>
+        <strong>{step.label || `Step ${index + 1}`}</strong>
+        <button
+          className="icon-button"
+          type="button"
+          onClick={() => onRemove(index)}
+          disabled={totalSteps <= 1}
+          aria-label={`Remove step ${index + 1}`}
+          title="Remove step"
+        >
+          <Trash2 size={16} aria-hidden="true" />
+        </button>
+      </div>
+      <div className="step-fields">
+        <Field label="Step id" htmlFor={`${prefix}-id`}>
+          <input
+            id={`${prefix}-id`}
+            value={step.id}
+            onChange={(event) => onChange(index, "id", event.target.value)}
+          />
+        </Field>
+        <Field label="Label" htmlFor={`${prefix}-label`}>
+          <input
+            id={`${prefix}-label`}
+            value={step.label}
+            onChange={(event) => onChange(index, "label", event.target.value)}
+          />
+        </Field>
+        <Field label="Capability" htmlFor={`${prefix}-action-type`}>
+          <select
+            id={`${prefix}-action-type`}
+            className="select-control"
+            value={step.actionType}
+            onChange={(event) => onChange(index, "actionType", event.target.value)}
+          >
+            <option value="codex.cli">Codex CLI</option>
+          </select>
+        </Field>
+        <Field label="Skill" htmlFor={`${prefix}-skill`}>
+          <select
+            id={`${prefix}-skill`}
+            className="select-control"
+            value={step.skillSlug ?? ""}
+            onChange={(event) => onChange(index, "skillSlug", event.target.value)}
+          >
+            <option value="">None</option>
+            {skillRows.map(({ skill }) => (
+              <option key={skill._id} value={skill.slug}>
+                {skill.name}
+              </option>
+            ))}
+          </select>
+        </Field>
+      </div>
+      <Field label="Instructions" htmlFor={`${prefix}-instructions`}>
+        <textarea
+          id={`${prefix}-instructions`}
+          value={step.instructions}
+          onChange={(event) => onChange(index, "instructions", event.target.value)}
+        />
+      </Field>
+    </section>
+  );
+}
+
+function SkillsWorkspace({
+  busyAction,
+  draftVersion,
+  form,
+  latestVersion,
+  onCreate,
+  onFieldChange,
+  onPublish,
+  onRunTest,
+  onSave,
+  selectedSkill,
+  versions,
+}) {
+  const isBusy = Boolean(busyAction);
+  const hasSkill = Boolean(selectedSkill);
+  const status = draftVersion ? "draft" : latestVersion ? "published" : "draft";
+
+  return (
+    <>
+      <header className="topbar">
+        <div>
+          <p className="eyebrow">Skill authoring</p>
+          <h1>{selectedSkill?.name ?? "Create a skill"}</h1>
+        </div>
+        <button
+          className="primary-button"
+          type="button"
+          onClick={onCreate}
+          disabled={busyAction === "create-skill"}
+        >
+          {busyAction === "create-skill" ? (
+            <Loader2 size={17} className="spin" aria-hidden="true" />
+          ) : (
+            <Plus size={17} aria-hidden="true" />
+          )}
+          <span>New skill</span>
+        </button>
+      </header>
+
+      <div className="skills-grid">
+        <section className="panel editor-panel" aria-label="Skill editor">
+          <PanelTitle icon={Pencil} title="Editor" />
+          {hasSkill ? (
+            <div className="form-stack">
+              <Field label="Name" htmlFor="skill-name">
+                <input
+                  id="skill-name"
+                  value={form.name}
+                  onChange={(event) => onFieldChange("name", event.target.value)}
+                />
+              </Field>
+              <Field label="Summary" htmlFor="skill-summary">
+                <input
+                  id="skill-summary"
+                  value={form.summary}
+                  onChange={(event) => onFieldChange("summary", event.target.value)}
+                />
+              </Field>
+              <Field label="Tags" htmlFor="skill-tags">
+                <input
+                  id="skill-tags"
+                  value={form.tags}
+                  onChange={(event) => onFieldChange("tags", event.target.value)}
+                />
+              </Field>
+              <Field label="Instructions" htmlFor="skill-instructions">
+                <textarea
+                  id="skill-instructions"
+                  className="textarea-large"
+                  value={form.instructions}
+                  onChange={(event) =>
+                    onFieldChange("instructions", event.target.value)
+                  }
+                />
+              </Field>
+              <div className="form-two">
+                <Field label="Inputs" htmlFor="skill-inputs">
+                  <textarea
+                    id="skill-inputs"
+                    value={form.inputSpec}
+                    onChange={(event) =>
+                      onFieldChange("inputSpec", event.target.value)
+                    }
+                  />
+                </Field>
+                <Field label="Expected output" htmlFor="skill-output">
+                  <textarea
+                    id="skill-output"
+                    value={form.outputSpec}
+                    onChange={(event) =>
+                      onFieldChange("outputSpec", event.target.value)
+                    }
+                  />
+                </Field>
+              </div>
+              <Field label="Test prompt" htmlFor="skill-test-prompt">
+                <textarea
+                  id="skill-test-prompt"
+                  value={form.testPrompt}
+                  onChange={(event) => onFieldChange("testPrompt", event.target.value)}
+                />
+              </Field>
+              <div className="form-actions">
+                <button
+                  className="secondary-button"
+                  type="button"
+                  onClick={onSave}
+                  disabled={isBusy}
+                >
+                  {busyAction === "save-skill" ? (
+                    <Loader2 size={16} className="spin" aria-hidden="true" />
+                  ) : (
+                    <Save size={16} aria-hidden="true" />
+                  )}
+                  <span>Save draft</span>
+                </button>
+                <button
+                  className="secondary-button"
+                  type="button"
+                  onClick={onRunTest}
+                  disabled={isBusy}
+                >
+                  {busyAction === "run-skill" ? (
+                    <Loader2 size={16} className="spin" aria-hidden="true" />
+                  ) : (
+                    <Play size={16} aria-hidden="true" />
+                  )}
+                  <span>Run test</span>
+                </button>
+                <button
+                  className="primary-button"
+                  type="button"
+                  onClick={onPublish}
+                  disabled={isBusy}
+                >
+                  {busyAction === "publish-skill" ? (
+                    <Loader2 size={16} className="spin" aria-hidden="true" />
+                  ) : (
+                    <Rocket size={16} aria-hidden="true" />
+                  )}
+                  <span>Publish</span>
+                </button>
+              </div>
+            </div>
+          ) : (
+            <EmptyPanel label="Create a skill" />
+          )}
+        </section>
+
+        <section className="panel preview-panel" aria-label="Skill preview">
+          <PanelTitle icon={FileText} title="Preview" />
+          {hasSkill ? (
+            <div className="preview-stack">
+              <div className="preview-meta">
+                <StatusBadge status={status} />
+                <span>{selectedSkill.slug}</span>
+              </div>
+              <pre className="prompt-preview">{renderSkillPreview(form)}</pre>
+              <VersionHistory versions={versions} />
+            </div>
+          ) : (
+            <EmptyPanel label="No skill selected" />
+          )}
+        </section>
+      </div>
+    </>
+  );
+}
+
+function RunsWorkspace({
+  busyAction,
+  events,
+  hostActions,
+  logs,
+  metrics,
+  onStartDemo,
+  selectedRun,
+}) {
+  return (
+    <>
+      <header className="topbar">
+        <div>
+          <p className="eyebrow">Realtime bridge</p>
+          <h1>{selectedRun?.loopSlug ?? "No run selected"}</h1>
+        </div>
+        <button
+          className="primary-button"
+          type="button"
+          onClick={onStartDemo}
+          disabled={busyAction === "demo"}
+        >
+          {busyAction === "demo" ? (
+            <Loader2 size={17} className="spin" aria-hidden="true" />
+          ) : (
+            <Play size={17} aria-hidden="true" />
+          )}
+          <span>Demo run</span>
+        </button>
+      </header>
+
+      <div className="metric-grid" aria-label="Run metrics">
+        <Metric label="Active runs" value={metrics.activeRuns} icon={Activity} />
+        <Metric label="Pending actions" value={metrics.pendingActions} icon={Clock3} />
+        <Metric label="Live logs" value={metrics.liveLogs} icon={TerminalSquare} />
+      </div>
+
+      <div className="content-grid">
+        <section className="panel run-panel">
+          <PanelTitle icon={Radio} title="Run State" />
+          {selectedRun ? <RunState run={selectedRun} /> : <EmptyPanel label="Select a run" />}
+        </section>
+
+        <section className="panel actions-panel">
+          <PanelTitle icon={Bot} title="Host Actions" />
+          {hostActions.length ? (
+            <div className="action-list">
+              {hostActions.map((action) => (
+                <ActionItem key={action._id} action={action} />
+              ))}
+            </div>
+          ) : (
+            <EmptyPanel label="No host actions" />
+          )}
+        </section>
+
+        <section className="panel stream-panel">
+          <PanelTitle icon={TerminalSquare} title="Events And Logs" />
+          <Stream events={events} logs={logs} />
+        </section>
+      </div>
+    </>
+  );
+}
+
+function LoopListItem({ loop, latestVersion, draftVersion, selected, onSelect }) {
+  const status = draftVersion ? "draft" : latestVersion ? "published" : "draft";
+
+  return (
+    <button
+      className={`loop-item ${selected ? "selected" : ""}`}
+      type="button"
+      onClick={onSelect}
+    >
+      <span className={`status-dot ${statusTone[status] ?? "neutral"}`}>
+        <GitBranch size={14} aria-hidden="true" />
+      </span>
+      <span className="run-item-main">
+        <span className="run-name">{loop.name}</span>
+        <span className="run-meta">
+          {status} - {formatTime(loop.updatedAt)}
+        </span>
+      </span>
+    </button>
+  );
+}
+
+function SkillListItem({ skill, latestVersion, draftVersion, selected, onSelect }) {
+  const status = draftVersion ? "draft" : latestVersion ? "published" : "draft";
+
+  return (
+    <button
+      className={`skill-item ${selected ? "selected" : ""}`}
+      type="button"
+      onClick={onSelect}
+    >
+      <span className={`status-dot ${statusTone[status] ?? "neutral"}`}>
+        <BookOpen size={14} aria-hidden="true" />
+      </span>
+      <span className="run-item-main">
+        <span className="run-name">{skill.name}</span>
+        <span className="run-meta">
+          {status} - {formatTime(skill.updatedAt)}
+        </span>
+      </span>
+    </button>
+  );
+}
+
+function RunListItem({ run, selected, onSelect }) {
+  const Icon = statusIcons[run.status] ?? Activity;
+
+  return (
+    <button
+      className={`run-item ${selected ? "selected" : ""}`}
+      type="button"
+      onClick={onSelect}
+    >
+      <span className={`status-dot ${statusTone[run.status] ?? "neutral"}`}>
+        <Icon size={14} aria-hidden="true" />
+      </span>
+      <span className="run-item-main">
+        <span className="run-name">{run.loopSlug}</span>
+        <span className="run-meta">{formatTime(run.updatedAt)}</span>
+      </span>
+    </button>
+  );
+}
+
+function RunState({ run }) {
+  return (
+    <dl className="state-grid">
+      <StateItem label="Status" value={<StatusBadge status={run.status} />} />
+      <StateItem label="Active node" value={run.activeNodeId ?? "none"} />
+      <StateItem label="Transitions" value={run.transitionCount} />
+      <StateItem label="Started" value={formatDateTime(run.startedAt)} />
+      <StateItem label="Updated" value={formatDateTime(run.updatedAt)} />
+      <StateItem label="Prompt" value={run.prompt ?? "none"} wide />
+    </dl>
+  );
+}
+
+function StateItem({ label, value, wide = false }) {
+  return (
+    <div className={`state-item ${wide ? "wide" : ""}`}>
+      <dt>{label}</dt>
+      <dd>{value}</dd>
+    </div>
+  );
+}
+
+function ActionItem({ action }) {
+  return (
+    <article className="action-item">
+      <div className="action-main">
+        <h3>{action.title}</h3>
+        <p>{action.actionType}</p>
+      </div>
+      <StatusBadge status={action.status} />
+    </article>
+  );
+}
+
+function Stream({ events, logs }) {
+  const rows = [
+    ...events.map((event) => ({
+      id: `event:${event._id}`,
+      level: event.level,
+      message: event.message ?? event.eventType,
+      timestamp: event.createdAt,
+      detail: event.eventType,
+    })),
+    ...logs.map((log) => ({
+      id: `log:${log._id}`,
+      level: log.level,
+      message: log.message,
+      timestamp: log.createdAt,
+      detail: log.source,
+    })),
+  ].sort((a, b) => a.timestamp - b.timestamp);
+
+  if (!rows.length) {
+    return <EmptyPanel label="No stream entries" />;
+  }
+
+  return (
+    <div className="stream-list">
+      {rows.map((row) => (
+        <div className="stream-row" key={row.id}>
+          <span className={`stream-level ${row.level}`}>{row.level}</span>
+          <div className="stream-copy">
+            <span>{row.message}</span>
+            <small>
+              {row.detail} - {formatTime(row.timestamp)}
+            </small>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function Field({ children, htmlFor, label }) {
+  return (
+    <label className="field" htmlFor={htmlFor}>
+      <span>{label}</span>
+      {children}
+    </label>
+  );
+}
+
+function Metric({ label, value, icon: Icon }) {
+  return (
+    <section className="metric">
+      <Icon size={18} aria-hidden="true" />
+      <span>{label}</span>
+      <strong>{value}</strong>
+    </section>
+  );
+}
+
+function PanelTitle({ icon: Icon, title }) {
+  return (
+    <div className="panel-title">
+      <Icon size={17} aria-hidden="true" />
+      <h2>{title}</h2>
+    </div>
+  );
+}
+
+function VersionHistory({ versions }) {
+  return (
+    <details className="version-disclosure">
+      <summary>
+        <ListChecks size={15} aria-hidden="true" />
+        <span>Version history</span>
+      </summary>
+      <VersionList versions={versions} />
+    </details>
+  );
+}
+
+function VersionList({ versions }) {
+  return (
+    <div className="version-list">
+      {versions.length ? (
+        versions.map((version) => (
+          <div className="version-row" key={version._id}>
+            <div>
+              <strong>{version.version}</strong>
+              <span>{formatDateTime(version.updatedAt)}</span>
+            </div>
+            <StatusBadge status={version.status} />
+          </div>
+        ))
+      ) : (
+        <EmptyPanel label="No versions" />
+      )}
+    </div>
+  );
+}
+
+function StatusBadge({ status }) {
+  return <span className={`status-badge ${statusTone[status] ?? "neutral"}`}>{status}</span>;
+}
+
+function EmptyPanel({ label }) {
+  return <div className="empty-panel">{label}</div>;
+}
+
+function LoadingRow({ label }) {
+  return (
+    <div className="loading-row">
+      <Loader2 size={15} className="spin" aria-hidden="true" />
+      <span>{label}</span>
+    </div>
+  );
+}
+
+function renderLoopPreview(form) {
+  return [
+    form.name ? `Loop: ${form.name}` : "Loop: Untitled",
+    form.description ? `Description: ${form.description}` : null,
+    form.tags ? `Tags: ${form.tags}` : null,
+    form.primarySkill ? `Primary skill: ${form.primarySkill}` : null,
+    "",
+    "Objective:",
+    form.objective || "No objective yet.",
+    "",
+    "Steps:",
+    ...form.steps.map((step, index) =>
+      [
+        `${index + 1}. ${step.label || `Step ${index + 1}`}`,
+        `   Capability: ${step.actionType || "codex.cli"}`,
+        step.skillSlug ? `   Skill: ${step.skillSlug}` : null,
+        `   ${step.instructions || "No instructions yet."}`,
+      ]
+        .filter(Boolean)
+        .join("\n"),
+    ),
+  ]
+    .filter(Boolean)
+    .join("\n");
+}
+
+function renderSkillPreview(form) {
+  return [
+    form.name ? `Skill: ${form.name}` : "Skill: Untitled",
+    form.summary ? `Summary: ${form.summary}` : null,
+    form.tags ? `Tags: ${form.tags}` : null,
+    "",
+    "Instructions:",
+    form.instructions || "No instructions yet.",
+    "",
+    form.inputSpec ? `Inputs:\n${form.inputSpec}` : null,
+    form.outputSpec ? `Expected output:\n${form.outputSpec}` : null,
+    form.testPrompt ? `Test prompt:\n${form.testPrompt}` : null,
+  ]
+    .filter(Boolean)
+    .join("\n");
+}
+
+function normalizeUiSteps(steps) {
+  if (!steps.length) {
+    return [
+      {
+        id: "step-1",
+        label: "Plan the work",
+        actionType: "codex.cli",
+        skillSlug: "",
+        instructions: "Read the objective, identify risks, and produce a short plan.",
+      },
+    ];
+  }
+  return steps.map((step, index) => ({
+    id: step.id ?? `step-${index + 1}`,
+    label: step.label ?? `Step ${index + 1}`,
+    actionType: step.actionType ?? "codex.cli",
+    skillSlug: step.skillSlug ?? "",
+    instructions: step.instructions ?? "",
+  }));
+}
+
+function parseTags(value) {
+  return value
+    .split(",")
+    .map((tag) => tag.trim())
+    .filter(Boolean);
+}
+
+function optionalValue(value) {
+  const cleaned = value.trim();
+  return cleaned ? cleaned : undefined;
+}
+
+function errorMessage(cause) {
+  return cause instanceof Error ? cause.message : String(cause);
+}
+
+function formatTime(value) {
+  if (!value) return "unknown";
+  return new Intl.DateTimeFormat(undefined, {
+    hour: "2-digit",
+    minute: "2-digit",
+  }).format(new Date(value));
+}
+
+function formatDateTime(value) {
+  if (!value) return "unknown";
+  return new Intl.DateTimeFormat(undefined, {
+    month: "short",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit",
+  }).format(new Date(value));
+}