pneuma-skills 2.4.1 → 2.4.3

package/README.md

@@ -54,6 +54,7 @@ Download the latest release for your platform:
 |----------|----------|
 | macOS (Apple Silicon + Intel) | [`.dmg`](https://github.com/pandazki/pneuma-skills/releases/latest) |
 | Windows x64 | [`.exe` installer](https://github.com/pandazki/pneuma-skills/releases/latest) |
+| Windows ARM64 | [`.exe` installer](https://github.com/pandazki/pneuma-skills/releases/latest) |
 | Linux x64 | [`.AppImage`](https://github.com/pandazki/pneuma-skills/releases/latest) / [`.deb`](https://github.com/pandazki/pneuma-skills/releases/latest) |
 
 The desktop app bundles Bun — no runtime install needed. Just install [Claude Code CLI](https://docs.anthropic.com/en/docs/claude-code) and you're ready to go.

package/modes/mode-maker/seed/package.json

@@ -2,7 +2,15 @@
   "name": "{{modeName}}",
   "private": true,
   "dependencies": {
-    "react-markdown": "^9.0.0",
-    "remark-gfm": "^4.0.0"
+    "@tailwindcss/vite": "^4.0.0",
+    "@vitejs/plugin-react": "^4.4.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-markdown": "^10.1.0",
+    "remark-gfm": "^4.0.1",
+    "rehype-raw": "^7.0.0",
+    "tailwindcss": "^4.0.0",
+    "vite": "^6.3.0",
+    "zustand": "^5.0.0"
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pneuma-skills",
-  "version": "2.4.1",
+  "version": "2.4.3",
   "type": "module",
   "description": "Co-creation infrastructure for humans and code agents — visual environment, skills, continuous learning, and distribution.",
   "license": "MIT",
@@ -23,6 +23,8 @@
     "modes/",
     "snapshot/",
     "dist/",
+    "src/",
+    "vite.config.ts",
     "index.html",
     "README.md"
   ],
@@ -37,33 +39,20 @@
   },
   "dependencies": {
     "@clack/prompts": "^1.0.1",
-    "@xyflow/react": "^12.10.1",
-    "@zumer/snapdom": "^2.0.2",
-    "chokidar": "^4.0.0",
-    "diff": "^8.0.3",
-    "hono": "^4.7.0"
-  },
-  "devDependencies": {
     "@codemirror/lang-css": "^6.3.1",
     "@codemirror/lang-html": "^6.4.11",
     "@codemirror/lang-javascript": "^6.2.4",
     "@codemirror/lang-json": "^6.0.2",
     "@codemirror/lang-markdown": "^6.5.0",
     "@codemirror/lang-python": "^6.2.1",
-    "@dnd-kit/core": "^6.3.1",
-    "@dnd-kit/sortable": "^10.0.0",
-    "@dnd-kit/utilities": "^3.2.2",
-    "@excalidraw/excalidraw": "^0.18.0",
-    "@tailwindcss/typography": "^0.5.19",
     "@tailwindcss/vite": "^4.0.0",
-    "@types/bun": "^1.2.5",
-    "@types/diff": "^8.0.0",
-    "@types/react": "^19.0.0",
-    "@types/react-dom": "^19.0.0",
     "@uiw/react-codemirror": "^4.25.5",
     "@vitejs/plugin-react": "^4.4.0",
     "@xterm/addon-fit": "^0.11.0",
     "@xterm/xterm": "^6.0.0",
+    "chokidar": "^4.0.0",
+    "diff": "^8.0.3",
+    "hono": "^4.7.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-markdown": "^10.1.0",
@@ -71,10 +60,23 @@
     "rehype-raw": "^7.0.0",
     "remark-gfm": "^4.0.1",
     "tailwindcss": "^4.0.0",
-    "typescript": "^5.9.3",
     "vite": "^6.3.0",
     "zustand": "^5.0.0"
   },
+  "devDependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@excalidraw/excalidraw": "^0.18.0",
+    "@tailwindcss/typography": "^0.5.19",
+    "@types/bun": "^1.2.5",
+    "@types/diff": "^8.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@xyflow/react": "^12.10.1",
+    "@zumer/snapdom": "^2.0.2",
+    "typescript": "^5.9.3"
+  },
   "overrides": {
     "@radix-ui/react-tabs": "^1.1.13",
     "@radix-ui/react-collection": "^1.1.7",

package/src/App.tsx

@@ -0,0 +1,337 @@
+import { useEffect, useState, useMemo, lazy, Suspense } from "react";
+import { Panel, Group, Separator } from "react-resizable-panels";
+import TopBar from "./components/TopBar.js";
+import ChatPanel from "./components/ChatPanel.js";
+import DiffPanel from "./components/DiffPanel.js";
+import ProcessPanel from "./components/ProcessPanel.js";
+import ContextPanel from "./components/ContextPanel.js";
+import SchedulePanel from "./components/SchedulePanel.js";
+
+import { useStore, nextId } from "./store.js";
+import type { SelectionType } from "./types.js";
+import { connect, sendViewerNotification } from "./ws.js";
+import { loadMode, registerExternalMode } from "../core/mode-loader.js";
+import { useSystemPreferences } from "./hooks/useSystemPreferences.js";
+import { selectBestContentSet } from "../core/utils/content-set-matcher.js";
+import type { ViewerPreviewProps } from "../core/types/viewer-contract.js";
+
+const EditorPanel = lazy(() => import("./components/EditorPanel.js"));
+const TerminalPanel = lazy(() => import("./components/TerminalPanel.js"));
+const Launcher = lazy(() => import("./components/Launcher.js"));
+
+function LazyFallback() {
+  return (
+    <div className="flex items-center justify-center h-full text-cc-muted text-sm">
+      Loading...
+    </div>
+  );
+}
+
+function RightPanel() {
+  const activeTab = useStore((s) => s.activeTab);
+  const [terminalMounted, setTerminalMounted] = useState(false);
+
+  useEffect(() => {
+    if (activeTab === "terminal") setTerminalMounted(true);
+  }, [activeTab]);
+
+  return (
+    <div className="flex flex-col h-full">
+      {activeTab === "chat" && <ChatPanel />}
+      {activeTab === "editor" && (
+        <Suspense fallback={<LazyFallback />}>
+          <EditorPanel />
+        </Suspense>
+      )}
+      {activeTab === "diff" && <DiffPanel />}
+      {/* Terminal stays mounted once visited to preserve PTY connection */}
+      {terminalMounted && (
+        <Suspense fallback={activeTab === "terminal" ? <LazyFallback /> : null}>
+          <div className={activeTab === "terminal" ? "flex flex-col h-full" : "hidden"}>
+            <TerminalPanel />
+          </div>
+        </Suspense>
+      )}
+      {activeTab === "processes" && <ProcessPanel />}
+      {activeTab === "context" && <ContextPanel />}
+      {activeTab === "schedules" && <SchedulePanel />}
+    </div>
+  );
+}
+
+/** Build the ViewerPreviewProps from store state. */
+function useViewerProps(): ViewerPreviewProps {
+  const rawFiles = useStore((s) => s.files);
+  const activeContentSet = useStore((s) => s.activeContentSet);
+  const selection = useStore((s) => s.selection);
+  const setSelection = useStore((s) => s.setSelection);
+  const previewMode = useStore((s) => s.previewMode);
+  const imageTick = useStore((s) => s.imageTick);
+  const initParams = useStore((s) => s.initParams);
+  const activeFile = useStore((s) => s.activeFile);
+  const setActiveFile = useStore((s) => s.setActiveFile);
+  const setViewportRange = useStore((s) => s.setViewportRange);
+  const workspaceItems = useStore((s) => s.workspaceItems);
+  const actionRequest = useStore((s) => s.actionRequest);
+  const setActionRequest = useStore((s) => s.setActionRequest);
+  const navigateRequest = useStore((s) => s.navigateRequest);
+  const setNavigateRequest = useStore((s) => s.setNavigateRequest);
+  const contentSets = useStore((s) => s.contentSets);
+
+  // Filter and remap files based on active content set
+  const files = useMemo(() => {
+    if (!activeContentSet) return rawFiles.map((f) => ({ path: f.path, content: f.content }));
+    const pfx = activeContentSet + "/";
+    return rawFiles
+      .filter((f) => f.path.startsWith(pfx))
+      .map((f) => ({ path: f.path.slice(pfx.length), content: f.content }));
+  }, [rawFiles, activeContentSet]);
+
+  return {
+    files,
+    activeFile,
+    selection: selection
+      ? {
+        type: selection.type,
+        content: selection.content,
+        level: selection.level,
+        file: selection.file,
+        tag: selection.tag,
+        classes: selection.classes,
+        selector: selection.selector,
+        thumbnail: selection.thumbnail,
+        label: selection.label,
+        nearbyText: selection.nearbyText,
+        accessibility: selection.accessibility,
+      }
+      : null,
+    onSelect: (sel) => {
+      if (!sel) {
+        setSelection(null);
+        return;
+      }
+      // Use file from the viewer component (e.g. current slide), fallback to first file
+      const file = sel.file || files[0]?.path || "";
+      setSelection({
+        type: sel.type as SelectionType,
+        content: sel.content,
+        level: sel.level,
+        file,
+        tag: sel.tag,
+        classes: sel.classes,
+        selector: sel.selector,
+        thumbnail: sel.thumbnail,
+        label: sel.label,
+        nearbyText: sel.nearbyText,
+        accessibility: sel.accessibility,
+      });
+    },
+    mode: previewMode,
+    imageVersion: imageTick,
+    initParams,
+    onActiveFileChange: setActiveFile,
+    onViewportChange: setViewportRange,
+    workspaceItems,
+    actionRequest,
+    onActionResult: (requestId, result) => {
+      import("./ws.js").then(({ sendViewerActionResponse }) => {
+        sendViewerActionResponse(requestId, result);
+      });
+      setActionRequest(null);
+    },
+    onNotifyAgent: (notification) => {
+      // Queue — will be flushed when CC goes idle (see useFlushViewerNotification)
+      useStore.getState().setPendingViewerNotification(notification);
+    },
+    navigateRequest,
+    onNavigateComplete: () => setNavigateRequest(null),
+  };
+}
+
+function getApiBase(): string {
+  if (import.meta.env.DEV) {
+    return `http://${location.hostname}:${import.meta.env.VITE_API_PORT || "17007"}`;
+  }
+  return "";
+}
+
+export default function App() {
+  // Launcher mode — lightweight marketplace UI
+  const [isLauncher] = useState(() => {
+    const params = new URLSearchParams(location.search);
+    // Launcher if explicitly requested OR no session/mode params (bare URL)
+    return params.has("launcher") || (!params.has("session") && !params.has("mode"));
+  });
+  if (isLauncher) {
+    return (
+      <Suspense fallback={<LazyFallback />}>
+        <Launcher />
+      </Suspense>
+    );
+  }
+
+  const PreviewComponent = useStore((s) => s.modeViewer?.PreviewComponent);
+
+  useEffect(() => {
+    const params = new URLSearchParams(location.search);
+    const explicitSession = params.get("session");
+    const modeName = params.get("mode") || "doc";
+    if (params.get("debug") === "1") {
+      useStore.getState().setDebugMode(true);
+    }
+
+    // Check if this is an external mode — fetch mode info from server first
+    const loadModeAsync = async () => {
+      try {
+        const modeInfoRes = await fetch(`${getApiBase()}/api/mode-info`);
+        const modeInfo = await modeInfoRes.json();
+
+        if (modeInfo.external && modeInfo.name === modeName) {
+          // Register external mode so mode-loader knows where to import from
+          registerExternalMode(modeInfo.name, modeInfo.path);
+          console.log(`[app] Registered external mode "${modeInfo.name}" from ${modeInfo.path}`);
+        }
+      } catch {
+        // Server not available yet or no external mode — continue with builtin
+      }
+
+      const def = await loadMode(modeName);
+      useStore.getState().setModeViewer(def.viewer);
+      useStore.getState().setModeDisplayName(def.manifest.displayName);
+    };
+
+    loadModeAsync().catch((err) => {
+      console.error(`[app] Failed to load mode "${modeName}":`, err);
+    });
+
+    // Connect to session
+    if (explicitSession) {
+      connect(explicitSession);
+    } else {
+      fetch(`${getApiBase()}/api/session`)
+        .then((r) => r.json())
+        .then((d) => {
+          connect(d.sessionId || "default");
+        })
+        .catch(() => connect("default"));
+    }
+
+    // Fetch initial file contents, then restore last viewer state
+    fetch(`${getApiBase()}/api/files`)
+      .then((r) => r.json())
+      .then(async (d) => {
+        if (d.files?.length) useStore.getState().setFiles(d.files);
+        // Restore persisted viewer position (content set + active file)
+        try {
+          const vs = await fetch(`${getApiBase()}/api/viewer-state`).then((r) => r.json());
+          const store = useStore.getState();
+          if (vs.contentSet && store.contentSets.some((cs: { prefix: string }) => cs.prefix === vs.contentSet)) {
+            store.setActiveContentSet(vs.contentSet);
+          }
+          if (vs.file) {
+            // For content-set modes, the file path is relative within the set
+            const items = useStore.getState().workspaceItems;
+            if (items.some((item: { path: string }) => item.path === vs.file)) {
+              useStore.getState().setActiveFile(vs.file);
+            }
+          }
+        } catch { /* no saved state — auto-selection will handle it */ }
+      })
+      .catch(() => { });
+
+    // Fetch mode init params
+    fetch(`${getApiBase()}/api/config`)
+      .then((r) => r.json())
+      .then((d) => {
+        if (d.initParams) useStore.getState().setInitParams(d.initParams);
+      })
+      .catch(() => { });
+
+    // Check git availability
+    fetch(`${getApiBase()}/api/git/available`)
+      .then((r) => r.json())
+      .then((d) => useStore.getState().setGitAvailable(d.available))
+      .catch(() => useStore.getState().setGitAvailable(false));
+  }, []);
+
+  // Flush queued viewer notification when CC goes idle
+  const sessionStatus = useStore((s) => s.sessionStatus);
+  const pendingNotification = useStore((s) => s.pendingViewerNotification);
+  useEffect(() => {
+    if (sessionStatus !== "idle" || !pendingNotification) return;
+    const store = useStore.getState();
+    store.setPendingViewerNotification(null);
+
+    // Send to server
+    sendViewerNotification(pendingNotification);
+
+    // Parse affected files from notification message
+    const fileMatches = [...pendingNotification.message.matchAll(/\(([^)]+\.html)\)/g)];
+    const affectedFiles = fileMatches.map((m) => m[1]);
+
+    // Show as user-side bubble with context card
+    const msg: import("./types.js").ChatMessage = {
+      id: nextId(),
+      role: "user",
+      content: "",
+      timestamp: Date.now(),
+      viewerNotification: {
+        type: pendingNotification.type,
+        summary: pendingNotification.summary || pendingNotification.type,
+        files: affectedFiles.length > 0 ? affectedFiles : undefined,
+      },
+    };
+    if (store.debugMode) {
+      msg.debugPayload = { enrichedContent: pendingNotification.message };
+    }
+    store.appendMessage(msg);
+  }, [sessionStatus, pendingNotification]);
+
+  // Workspace item auto-selection (topBarNavigation modes)
+  const topBarNav = useStore((s) => s.modeViewer?.workspace?.topBarNavigation);
+  const workspaceItemsForAutoSelect = useStore((s) => s.workspaceItems);
+  const activeFileForAutoSelect = useStore((s) => s.activeFile);
+  useEffect(() => {
+    if (topBarNav && workspaceItemsForAutoSelect.length > 0 && !activeFileForAutoSelect) {
+      useStore.getState().setActiveFile(workspaceItemsForAutoSelect[0].path);
+    }
+  }, [topBarNav, workspaceItemsForAutoSelect, activeFileForAutoSelect]);
+
+  // Content set auto-selection based on system preferences
+  const contentSets = useStore((s) => s.contentSets);
+  const activeContentSet = useStore((s) => s.activeContentSet);
+  const systemPrefs = useSystemPreferences();
+  useEffect(() => {
+    if (contentSets.length > 1 && !activeContentSet) {
+      const best = selectBestContentSet(contentSets, systemPrefs);
+      if (best) useStore.getState().setActiveContentSet(best.prefix);
+    }
+  }, [contentSets, systemPrefs]); // activeContentSet intentionally excluded
+
+  const viewerProps = useViewerProps();
+
+  return (
+    <div className="flex flex-col h-screen bg-cc-bg text-cc-fg relative overflow-hidden p-4 sm:p-6 md:p-8">
+      {/* Immersive mesh gradient background element */}
+      <div className="absolute top-[-10%] left-[-10%] w-[60%] h-[50%] bg-cc-primary/10 blur-[120px] rounded-full pointer-events-none animate-[pulse-dot_8s_ease-in-out_infinite]" />
+      <div className="absolute top-[20%] right-[-10%] w-[50%] h-[60%] bg-purple-500/10 blur-[100px] rounded-full pointer-events-none animate-[pulse-dot_10s_ease-in-out_infinite_reverse]" />
+
+      <div className="relative z-10 flex flex-col flex-1 border border-cc-primary/20 rounded-2xl overflow-hidden shadow-[0_0_40px_rgba(249,115,22,0.15)] ring-1 ring-white/5 before:absolute before:inset-0 before:bg-cc-surface/40 before:backdrop-blur-3xl before:-z-10">
+        <TopBar />
+        <Group orientation="horizontal" className="flex-1">
+          <Panel defaultSize={65} minSize={30}>
+            {PreviewComponent ? (
+              <PreviewComponent {...viewerProps} />
+            ) : (
+              <LazyFallback />
+            )}
+          </Panel>
+          <Separator className="w-[1px] bg-cc-border/40 hover:w-1 hover:bg-cc-primary/40 transition-all duration-300 cursor-col-resize z-10" />
+          <Panel defaultSize={35} minSize={20}>
+            <RightPanel />
+          </Panel>
+        </Group>
+      </div>
+    </div>
+  );
+}