@powerhousedao/knowledge-note 1.0.0

package/dist/editors/knowledge-vault/components/DriveExplorer.js

@@ -0,0 +1,202 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect, useRef, useMemo } from "react";
+import { setSelectedNode, useFileNodesInSelectedDrive, useDocumentsInSelectedDrive, } from "@powerhousedao/reactor-browser";
+import { VaultSidebar } from "./VaultSidebar.js";
+import { CreateDocumentDialog } from "./CreateDocumentDialog.js";
+import { GraphView } from "./GraphView.js";
+import { NoteList } from "./NoteList.js";
+import { SourceList } from "./SourceList.js";
+import { HealthDashboard } from "./HealthDashboard.js";
+import { GettingStartedButton } from "./GettingStarted.js";
+import { useKnowledgeNotes } from "../hooks/use-knowledge-notes.js";
+import { useKnowledgeGraph, buildSyncPayload, } from "../hooks/use-knowledge-graph.js";
+import { useAutoHealth } from "../hooks/use-auto-health.js";
+import { useKnowledgeGraphDocumentById } from "@powerhousedao/knowledge-note/document-models/knowledge-graph";
+import { actions as graphActions } from "@powerhousedao/knowledge-note/document-models/knowledge-graph";
+import { ThemeToggle } from "../../shared/theme-context.js";
+export function DriveExplorer({ children }) {
+    const [viewMode, setViewMode] = useState("notes");
+    const { notes } = useKnowledgeNotes();
+    const { graphDoc, graphState, hasGraphDoc } = useKnowledgeGraph(notes);
+    const fileNodes = useFileNodesInSelectedDrive();
+    const allDocuments = useDocumentsInSelectedDrive();
+    const showDocumentEditor = !!children;
+    // Read MOC documents for the graph view
+    const mocs = useMemo(() => {
+        return (allDocuments ?? [])
+            .filter((d) => d.header.documentType === "bai/moc")
+            .map((d) => {
+            const state = d.state.global;
+            return {
+                id: d.header.id,
+                title: state.title ?? d.header.name,
+                tier: state.tier ?? null,
+                coreIdeas: (state.coreIdeas ?? []).map((ci) => ({
+                    noteRef: ci.noteRef,
+                    contextPhrase: ci.contextPhrase,
+                })),
+            };
+        });
+    }, [allDocuments]);
+    // Read tension documents for the graph view
+    const tensions = useMemo(() => {
+        return (allDocuments ?? [])
+            .filter((d) => d.header.documentType === "bai/tension")
+            .map((d) => {
+            const state = d.state.global;
+            return {
+                id: d.header.id,
+                title: state.title ?? d.header.name,
+                status: state.status ?? null,
+                involvedRefs: state.involvedRefs ?? [],
+            };
+        });
+    }, [allDocuments]);
+    // Auto-generate health metrics
+    useAutoHealth(notes, graphState);
+    // Auto-sync graph — triggers on any note data change (not just count)
+    const graphDocId = graphDoc?.header.id ?? null;
+    const [graphDocument, graphDispatch] = useKnowledgeGraphDocumentById(graphDocId);
+    const lastSyncFingerprint = useRef("");
+    // Build a fingerprint from note data that changes when links/titles/statuses change
+    const notesFingerprint = useMemo(() => {
+        return notes
+            .map((n) => `${n.id}:${n.title}:${n.status}:${n.links.length}:${n.links.map((l) => l.targetDocumentId).join(",")}`)
+            .join("|");
+    }, [notes]);
+    useEffect(() => {
+        if (!graphDocument || !graphDispatch || notes.length === 0)
+            return;
+        if (lastSyncFingerprint.current === notesFingerprint)
+            return;
+        lastSyncFingerprint.current = notesFingerprint;
+        const { nodes: gNodes, edges } = buildSyncPayload(notes);
+        graphDispatch(graphActions.syncGraph({
+            nodes: gNodes,
+            edges,
+            syncedAt: new Date().toISOString(),
+        }));
+    }, [graphDocument, graphDispatch, notes, notesFingerprint]);
+    // Count doc types
+    const allFiles = fileNodes ?? [];
+    const sourceCount = allFiles.filter((n) => n.documentType === "bai/source").length;
+    const pipelineExists = allFiles.some((n) => n.documentType === "bai/pipeline-queue");
+    // Find singleton doc IDs for direct navigation
+    const pipelineDocId = allFiles.find((n) => n.documentType === "bai/pipeline-queue")?.id;
+    const healthReportDocId = allFiles.find((n) => n.documentType === "bai/health-report")?.id;
+    const vaultConfigDocId = allFiles.find((n) => n.documentType === "bai/vault-config")?.id;
+    const graphDocId2 = allFiles.find((n) => n.documentType === "bai/knowledge-graph")?.id;
+    function handleSwitchView(mode) {
+        // For singleton tabs, navigate directly to the document (opens its editor)
+        if (mode === "pipeline" && pipelineDocId) {
+            setSelectedNode(pipelineDocId);
+            return;
+        }
+        if (mode === "health" && healthReportDocId) {
+            setSelectedNode(healthReportDocId);
+            return;
+        }
+        if (mode === "config" && vaultConfigDocId) {
+            setSelectedNode(vaultConfigDocId);
+            return;
+        }
+        // For list/custom views, deselect any open doc
+        if (showDocumentEditor)
+            setSelectedNode(undefined);
+        setViewMode(mode);
+    }
+    const TABS = [
+        {
+            key: "notes",
+            label: "Notes",
+            badge: notes.length,
+            icon: (_jsx("svg", { className: "h-4 w-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" }) })),
+        },
+        {
+            key: "graph",
+            label: "Graph",
+            icon: (_jsxs("svg", { className: "h-4 w-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("circle", { cx: "6", cy: "6", r: "3" }), _jsx("circle", { cx: "18", cy: "18", r: "3" }), _jsx("circle", { cx: "18", cy: "6", r: "3" }), _jsx("path", { d: "M8.5 7.5l7 7M8.5 6h7" })] })),
+        },
+        {
+            key: "sources",
+            label: "Sources",
+            badge: sourceCount > 0 ? sourceCount : undefined,
+            icon: (_jsxs("svg", { className: "h-4 w-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("path", { d: "M4 19.5A2.5 2.5 0 016.5 17H20" }), _jsx("path", { d: "M6.5 2H20v20H6.5A2.5 2.5 0 014 19.5v-15A2.5 2.5 0 016.5 2z" })] })),
+        },
+        {
+            key: "pipeline",
+            label: "Pipeline",
+            icon: (_jsx("svg", { className: "h-4 w-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M22 12h-4l-3 9L9 3l-3 9H2" }) })),
+        },
+        {
+            key: "health",
+            label: "Health",
+            icon: (_jsx("svg", { className: "h-4 w-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M22 12h-6l-2 3-4-6-2 3H2" }) })),
+        },
+        {
+            key: "config",
+            label: "Config",
+            icon: (_jsxs("svg", { className: "h-4 w-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("path", { d: "M12.22 2h-.44a2 2 0 00-2 2v.18a2 2 0 01-1 1.73l-.43.25a2 2 0 01-2 0l-.15-.08a2 2 0 00-2.73.73l-.22.38a2 2 0 00.73 2.73l.15.1a2 2 0 011 1.72v.51a2 2 0 01-1 1.74l-.15.09a2 2 0 00-.73 2.73l.22.38a2 2 0 002.73.73l.15-.08a2 2 0 012 0l.43.25a2 2 0 011 1.73V20a2 2 0 002 2h.44a2 2 0 002-2v-.18a2 2 0 011-1.73l.43-.25a2 2 0 012 0l.15.08a2 2 0 002.73-.73l.22-.39a2 2 0 00-.73-2.73l-.15-.08a2 2 0 01-1-1.74v-.5a2 2 0 011-1.74l.15-.09a2 2 0 00.73-2.73l-.22-.38a2 2 0 00-2.73-.73l-.15.08a2 2 0 01-2 0l-.43-.25a2 2 0 01-1-1.73V4a2 2 0 00-2-2z" }), _jsx("circle", { cx: "12", cy: "12", r: "3" })] })),
+        },
+    ];
+    return (_jsxs("div", { className: "flex h-full", children: [_jsx(VaultSidebar, { notes: notes }), _jsxs("div", { className: "flex flex-1 flex-col overflow-hidden", children: [_jsxs("div", { className: "flex items-center justify-between px-4 py-2", style: {
+                            borderBottom: "1px solid var(--bai-border)",
+                            backgroundColor: "var(--bai-surface)",
+                        }, children: [_jsxs("div", { className: "flex gap-1", children: [TABS.map((tab) => (_jsxs("button", { type: "button", onClick: () => handleSwitchView(tab.key), className: "flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium transition-colors", style: {
+                                            backgroundColor: viewMode === tab.key && !showDocumentEditor
+                                                ? "var(--bai-hover)"
+                                                : "transparent",
+                                            color: viewMode === tab.key && !showDocumentEditor
+                                                ? "var(--bai-accent)"
+                                                : "var(--bai-text-tertiary)",
+                                        }, children: [tab.icon, tab.label, tab.badge !== undefined && (_jsx("span", { className: "rounded-full px-1.5 py-0.5 text-[10px]", style: {
+                                                    backgroundColor: "var(--bai-hover)",
+                                                    color: "var(--bai-text-muted)",
+                                                }, children: tab.badge }))] }, tab.key))), showDocumentEditor && (_jsxs("span", { className: "flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium", style: {
+                                            backgroundColor: "var(--bai-hover)",
+                                            color: "var(--bai-accent)",
+                                        }, children: [_jsxs("svg", { className: "h-4 w-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("path", { d: "M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7" }), _jsx("path", { d: "M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z" })] }), "Editing"] }))] }), _jsxs("div", { className: "flex items-center gap-3", children: [hasGraphDoc && graphState && (_jsxs("span", { className: "text-[10px]", style: { color: "var(--bai-text-faint)" }, children: [graphState.nodes.length, "n / ", graphState.edges.length, "e"] })), _jsx(ThemeToggle, {}), _jsx(GettingStartedButton, {}), _jsx(CreateMenu, {})] })] }), _jsx("div", { className: "flex-1 overflow-auto", children: showDocumentEditor ? (_jsx("div", { className: "h-full", children: children })) : viewMode === "graph" ? (_jsx(GraphView, { notes: notes, graphState: graphState, mocs: mocs, tensions: tensions })) : viewMode === "sources" ? (_jsx(SourceList, {})) : viewMode === "health" ? (_jsx(HealthDashboard, {})) : (_jsx(NoteList, { notes: notes })) })] })] }));
+}
+const CREATE_ITEMS = [
+    {
+        label: "Add Source",
+        type: "bai/source",
+        primary: true,
+        hint: "Paste content for AI processing",
+    },
+    {
+        label: "Knowledge Note",
+        type: "bai/knowledge-note",
+        primary: false,
+        hint: "Direct atomic claim",
+    },
+    {
+        label: "Map of Content",
+        type: "bai/moc",
+        primary: false,
+        hint: "Organize notes by topic",
+    },
+];
+function CreateMenu() {
+    const [menuOpen, setMenuOpen] = useState(false);
+    const [dialogItem, setDialogItem] = useState(null);
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "relative", children: [_jsxs("button", { type: "button", onClick: () => setMenuOpen(!menuOpen), className: "flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium transition-colors", style: {
+                            backgroundColor: "var(--bai-accent)",
+                            color: "var(--bai-accent-text)",
+                        }, children: [_jsx("svg", { className: "h-3.5 w-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: _jsx("path", { d: "M12 5v14M5 12h14" }) }), "New"] }), menuOpen && (_jsx("div", { className: "absolute right-0 z-20 mt-1 w-56 rounded-lg py-1 shadow-xl", style: {
+                            border: "1px solid var(--bai-border)",
+                            backgroundColor: "var(--bai-surface)",
+                        }, children: CREATE_ITEMS.map((item) => (_jsxs("button", { type: "button", onClick: () => {
+                                setDialogItem(item);
+                                setMenuOpen(false);
+                            }, className: "flex w-full flex-col px-3 py-2 text-left", style: {
+                                borderBottom: item.primary
+                                    ? "1px solid var(--bai-border)"
+                                    : undefined,
+                            }, children: [_jsx("span", { className: "text-xs", style: {
+                                        color: item.primary
+                                            ? "var(--bai-accent)"
+                                            : "var(--bai-text-secondary)",
+                                        fontWeight: item.primary ? 600 : 400,
+                                    }, children: item.label }), item.hint && (_jsx("span", { className: "text-[10px]", style: { color: "var(--bai-text-faint)" }, children: item.hint }))] }, item.type))) }))] }), _jsx(CreateDocumentDialog, { open: !!dialogItem, documentType: dialogItem?.type ?? "", documentTypeLabel: dialogItem?.label ?? "", onClose: () => setDialogItem(null) })] }));
+}

package/dist/editors/knowledge-vault/components/EmptyState.d.ts

@@ -0,0 +1,3 @@
+/** Shows a message when the selected drive or folder is empty */
+export declare function EmptyState(): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=EmptyState.d.ts.map

package/dist/editors/knowledge-vault/components/EmptyState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState.d.ts","sourceRoot":"","sources":["../../../../editors/knowledge-vault/components/EmptyState.tsx"],"names":[],"mappings":"AAEA,iEAAiE;AACjE,wBAAgB,UAAU,mDAczB"}

package/dist/editors/knowledge-vault/components/EmptyState.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useNodesInSelectedDriveOrFolder } from "@powerhousedao/reactor-browser";
+/** Shows a message when the selected drive or folder is empty */
+export function EmptyState() {
+    const nodes = useNodesInSelectedDriveOrFolder();
+    const hasNodes = nodes.length > 0;
+    if (hasNodes)
+        return null;
+    return (_jsxs("div", { className: "py-12 text-center", style: { color: "var(--bai-text-muted)" }, children: [_jsx("p", { className: "text-lg", children: "This folder is empty" }), _jsx("p", { className: "mt-2 text-sm", children: "Create your first document or folder below" })] }));
+}

package/dist/editors/knowledge-vault/components/Files.d.ts

@@ -0,0 +1,3 @@
+/** Shows the files in the selected drive or folder */
+export declare function Files(): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=Files.d.ts.map

package/dist/editors/knowledge-vault/components/Files.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Files.d.ts","sourceRoot":"","sources":["../../../../editors/knowledge-vault/components/Files.tsx"],"names":[],"mappings":"AAMA,sDAAsD;AACtD,wBAAgB,KAAK,mDAiBpB"}

package/dist/editors/knowledge-vault/components/Files.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FileItem } from "@powerhousedao/design-system/connect";
+import { useNodesInSelectedDriveOrFolder, isFileNodeKind, } from "@powerhousedao/reactor-browser";
+/** Shows the files in the selected drive or folder */
+export function Files() {
+    const nodes = useNodesInSelectedDriveOrFolder();
+    const fileNodes = nodes.filter((n) => isFileNodeKind(n));
+    const hasFiles = fileNodes.length > 0;
+    if (!hasFiles)
+        return null;
+    return (_jsxs("div", { children: [_jsx("h3", { className: "mb-2 text-sm font-semibold text-gray-600", children: "Documents" }), _jsx("div", { className: "flex flex-wrap gap-4", children: fileNodes.map((fileNode) => (_jsx(FileItem, { fileNode: fileNode }, fileNode.id))) })] }));
+}

package/dist/editors/knowledge-vault/components/FolderTree.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Hierarchical folder tree navigation component using Sidebar from document-engineering.
+ * Displays folders and files in a tree structure with expand/collapse functionality, search, and resize support.
+ */
+export declare function FolderTree(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=FolderTree.d.ts.map

package/dist/editors/knowledge-vault/components/FolderTree.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FolderTree.d.ts","sourceRoot":"","sources":["../../../../editors/knowledge-vault/components/FolderTree.tsx"],"names":[],"mappings":"AAyDA;;;GAGG;AACH,wBAAgB,UAAU,4CA0CzB"}

package/dist/editors/knowledge-vault/components/FolderTree.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Sidebar, SidebarProvider, } from "@powerhousedao/document-engineering";
+import { setSelectedNode, useNodesInSelectedDrive, useSelectedDrive, useSelectedNode, } from "@powerhousedao/reactor-browser";
+import { useMemo } from "react";
+function buildSidebarNodes(nodes, parentId) {
+    return nodes
+        .filter((n) => {
+        if (parentId == null) {
+            return n.parentFolder == null;
+        }
+        return n.parentFolder === parentId;
+    })
+        .map((node) => {
+        if (node.kind === "folder") {
+            return {
+                id: node.id,
+                title: node.name,
+                icon: "FolderClose",
+                expandedIcon: "FolderOpen",
+                children: buildSidebarNodes(nodes, node.id),
+            };
+        }
+        return {
+            id: node.id,
+            title: node.name,
+            icon: "File",
+        };
+    });
+}
+function transformNodesToSidebarNodes(nodes, driveName) {
+    return [
+        {
+            id: "root",
+            title: driveName,
+            icon: "Drive",
+            children: buildSidebarNodes(nodes, null),
+        },
+    ];
+}
+/**
+ * Hierarchical folder tree navigation component using Sidebar from document-engineering.
+ * Displays folders and files in a tree structure with expand/collapse functionality, search, and resize support.
+ */
+export function FolderTree() {
+    const [selectedDrive] = useSelectedDrive();
+    const nodes = useNodesInSelectedDrive();
+    const selectedNode = useSelectedNode();
+    const driveName = selectedDrive.header.name;
+    // Transform Node[] to hierarchical SidebarNode structure
+    const sidebarNodes = useMemo(() => transformNodesToSidebarNodes(nodes || [], driveName), [nodes, driveName]);
+    const handleActiveNodeChange = (node) => {
+        // If root node is selected, pass undefined to match existing behavior
+        if (node.id === "root") {
+            setSelectedNode(undefined);
+        }
+        else {
+            setSelectedNode(node.id);
+        }
+    };
+    // Map selectedNodeId to activeNodeId (use "root" when undefined)
+    const activeNodeId = !selectedNode || selectedNode.id === selectedDrive.header.id
+        ? "root"
+        : selectedNode.id;
+    return (_jsx(SidebarProvider, { nodes: sidebarNodes, children: _jsx(Sidebar, { className: "pt-1", nodes: sidebarNodes, activeNodeId: activeNodeId, onActiveNodeChange: handleActiveNodeChange, sidebarTitle: "Drive Explorer", showSearchBar: true, resizable: true, allowPinning: false, showStatusFilter: false, initialWidth: 256, defaultLevel: 0 }) }));
+}

package/dist/editors/knowledge-vault/components/Folders.d.ts

@@ -0,0 +1,3 @@
+/** Shows the folders in the selected drive or folder */
+export declare function Folders(): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=Folders.d.ts.map

package/dist/editors/knowledge-vault/components/Folders.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Folders.d.ts","sourceRoot":"","sources":["../../../../editors/knowledge-vault/components/Folders.tsx"],"names":[],"mappings":"AAMA,wDAAwD;AACxD,wBAAgB,OAAO,mDAgBtB"}

package/dist/editors/knowledge-vault/components/Folders.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FolderItem } from "@powerhousedao/design-system/connect";
+import { useNodesInSelectedDriveOrFolder, isFolderNodeKind, } from "@powerhousedao/reactor-browser";
+/** Shows the folders in the selected drive or folder */
+export function Folders() {
+    const nodes = useNodesInSelectedDriveOrFolder();
+    const folderNodes = nodes.filter((n) => isFolderNodeKind(n));
+    const hasFolders = folderNodes.length > 0;
+    if (!hasFolders)
+        return null;
+    return (_jsxs("div", { children: [_jsx("h3", { className: "mb-2 text-sm font-bold text-gray-600", children: "Folders" }), _jsx("div", { className: "flex flex-wrap gap-4", children: folderNodes.map((folderNode) => (_jsx(FolderItem, { folderNode: folderNode }, folderNode.id))) })] }));
+}

package/dist/editors/knowledge-vault/components/GettingStarted.d.ts

@@ -0,0 +1,2 @@
+export declare function GettingStartedButton(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=GettingStarted.d.ts.map

package/dist/editors/knowledge-vault/components/GettingStarted.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GettingStarted.d.ts","sourceRoot":"","sources":["../../../../editors/knowledge-vault/components/GettingStarted.tsx"],"names":[],"mappings":"AAEA,wBAAgB,oBAAoB,4CA2BnC"}

package/dist/editors/knowledge-vault/components/GettingStarted.js

@@ -0,0 +1,172 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+export function GettingStartedButton() {
+    const [open, setOpen] = useState(false);
+    return (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", onClick: () => setOpen(true), className: "rounded-md px-2 py-1.5 text-xs transition-colors", style: { color: "var(--bai-text-muted)" }, title: "Getting started guide", children: _jsxs("svg", { className: "h-4 w-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("circle", { cx: "12", cy: "12", r: "10" }), _jsx("path", { d: "M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3" }), _jsx("path", { d: "M12 17h.01" })] }) }), open && _jsx(GettingStartedModal, { onClose: () => setOpen(false) })] }));
+}
+function GettingStartedModal({ onClose }) {
+    const [activeSection, setActiveSection] = useState("overview");
+    const sections = [
+        { id: "overview", label: "Overview" },
+        { id: "sources", label: "Adding Sources" },
+        { id: "notes", label: "Notes & Claims" },
+        { id: "pipeline", label: "Processing Pipeline" },
+        { id: "graph", label: "Graph & Links" },
+        { id: "plugin", label: "AI Agent" },
+    ];
+    return (_jsxs("div", { className: "fixed inset-0 z-50 flex items-center justify-center", children: [_jsx("div", { className: "absolute inset-0 bg-black/60", onClick: onClose }), _jsxs("div", { className: "relative z-10 flex h-[80vh] w-[720px] max-w-[90vw] flex-col rounded-2xl shadow-2xl", style: { backgroundColor: "var(--bai-surface)", border: "1px solid var(--bai-border)" }, children: [_jsxs("div", { className: "flex items-center justify-between px-6 py-4", style: { borderBottom: "1px solid var(--bai-border)" }, children: [_jsxs("div", { children: [_jsx("h2", { className: "text-lg font-bold", style: { color: "var(--bai-text)" }, children: "Getting Started" }), _jsx("p", { className: "text-xs", style: { color: "var(--bai-text-muted)" }, children: "Learn how to use the Knowledge Vault" })] }), _jsx("button", { type: "button", onClick: onClose, className: "rounded-lg p-2 transition-colors", style: { color: "var(--bai-text-muted)" }, children: _jsx("svg", { className: "h-5 w-5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M18 6L6 18M6 6l12 12" }) }) })] }), _jsxs("div", { className: "flex flex-1 overflow-hidden", children: [_jsx("div", { className: "w-44 shrink-0 py-3", style: { borderRight: "1px solid var(--bai-border)" }, children: sections.map((s) => (_jsx("button", { type: "button", onClick: () => setActiveSection(s.id), className: "flex w-full px-4 py-2 text-left text-xs transition-colors", style: {
+                                        backgroundColor: activeSection === s.id ? "var(--bai-accent-soft)" : "transparent",
+                                        color: activeSection === s.id ? "var(--bai-accent)" : "var(--bai-text-tertiary)",
+                                        fontWeight: activeSection === s.id ? 500 : 400,
+                                    }, children: s.label }, s.id))) }), _jsxs("div", { className: "flex-1 overflow-y-auto px-6 py-5", children: [activeSection === "overview" && _jsx(OverviewSection, {}), activeSection === "sources" && _jsx(SourcesSection, {}), activeSection === "notes" && _jsx(NotesSection, {}), activeSection === "pipeline" && _jsx(PipelineSection, {}), activeSection === "graph" && _jsx(GraphSection, {}), activeSection === "plugin" && _jsx(PluginSection, {})] })] })] })] }));
+}
+const H = ({ children }) => (_jsx("h3", { className: "mb-3 text-sm font-semibold", style: { color: "var(--bai-text)" }, children: children }));
+const P = ({ children }) => (_jsx("p", { className: "mb-4 text-xs leading-relaxed", style: { color: "var(--bai-text-tertiary)" }, children: children }));
+const Step = ({ n, title, children, }) => (_jsxs("div", { className: "mb-4 flex gap-3", children: [_jsx("span", { className: "flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-[10px] font-bold", style: { backgroundColor: "var(--bai-accent-soft)", color: "var(--bai-accent)" }, children: n }), _jsxs("div", { children: [_jsx("p", { className: "text-xs font-medium", style: { color: "var(--bai-text)" }, children: title }), _jsx("p", { className: "mt-0.5 text-xs", style: { color: "var(--bai-text-muted)" }, children: children })] })] }));
+const Tip = ({ children }) => (_jsx("div", { className: "mb-4 rounded-lg px-4 py-3", style: { border: "1px solid var(--bai-accent-soft)", backgroundColor: "var(--bai-accent-soft)" }, children: _jsx("p", { className: "text-xs", style: { color: "var(--bai-accent)", opacity: 0.8 }, children: children }) }));
+function OverviewSection() {
+    return (_jsxs("div", { children: [_jsx(H, { children: "What is the Knowledge Vault?" }), _jsx(P, { children: "A structured knowledge management system where raw content (articles, notes, transcripts) is processed into atomic claims, connected into a knowledge graph, and maintained over time." }), _jsx(H, { children: "The Navigation Tabs" }), _jsx("div", { className: "space-y-2 mb-4", children: [
+                    {
+                        tab: "Notes",
+                        desc: "All your extracted knowledge claims. Each note makes one point with a declarative title.",
+                    },
+                    {
+                        tab: "Graph",
+                        desc: "Visual map of how notes connect. Nodes are notes, edges are typed links.",
+                    },
+                    {
+                        tab: "Sources",
+                        desc: "Raw input material (articles, papers, transcripts) waiting to be processed.",
+                    },
+                    {
+                        tab: "Pipeline",
+                        desc: "Processing queue tracking tasks through extract, connect, reweave, and verify phases.",
+                    },
+                    {
+                        tab: "Health",
+                        desc: "Live vault diagnostics: orphan detection, link density, schema compliance.",
+                    },
+                    {
+                        tab: "Config",
+                        desc: "Vault settings: name, dimensions, vocabulary, pipeline configuration.",
+                    },
+                ].map((item) => (_jsxs("div", { className: "flex gap-2 rounded-lg px-3 py-2", style: { backgroundColor: "var(--bai-bg)" }, children: [_jsx("span", { className: "shrink-0 text-xs font-semibold w-16", style: { color: "var(--bai-accent)" }, children: item.tab }), _jsx("span", { className: "text-xs", style: { color: "var(--bai-text-tertiary)" }, children: item.desc })] }, item.tab))) }), _jsx(H, { children: "Quick Start Flow" }), _jsx(Step, { n: 1, title: "Add a source", children: "Click \"+ Add Source\" in the sidebar or \"New > Add Source\" in the top bar. Paste your raw content." }), _jsx(Step, { n: 2, title: "Queue for processing", children: "In the source editor, click \"Queue for Processing\". This adds a task to the pipeline." }), _jsx(Step, { n: 3, title: "Run the AI agent", children: "In Claude Code with the powerhouse-knowledge plugin, run /pipeline to extract claims, connect them, and verify quality." }), _jsx(Step, { n: 4, title: "Explore your knowledge", children: "Check the Notes tab for extracted claims, Graph tab for connections, and Health tab for quality metrics." })] }));
+}
+function SourcesSection() {
+    return (_jsxs("div", { children: [_jsx(H, { children: "Adding Source Material" }), _jsx(P, { children: "Sources are the raw input for your knowledge vault. Everything enters as a source first, then gets processed into atomic claims." }), _jsx(H, { children: "How to add a source" }), _jsx(Step, { n: 1, title: "Click '+ Add Source'", children: "In the sidebar header or use New > Add Source in the top bar." }), _jsx(Step, { n: 2, title: "Fill in the details", children: "Give it a title, select the type (Article, Paper, Transcript, etc.), paste the full content." }), _jsx(Step, { n: 3, title: "Save", children: "Click \"Ingest Source\". The source is now in /sources/ with status INBOX." }), _jsx(H, { children: "Source Types" }), _jsx("div", { className: "mb-4 grid grid-cols-2 gap-1", children: [
+                    "ARTICLE",
+                    "PAPER",
+                    "TRANSCRIPT",
+                    "DOCUMENTATION",
+                    "CONVERSATION",
+                    "WEB_PAGE",
+                    "BOOK_CHAPTER",
+                    "MANUAL_ENTRY",
+                ].map((t) => (_jsx("span", { className: "rounded px-2 py-1 text-[10px]", style: { backgroundColor: "var(--bai-bg)", color: "var(--bai-text-tertiary)" }, children: t }, t))) }), _jsx(H, { children: "Source Lifecycle" }), _jsx(P, { children: "INBOX (new) \u2192 EXTRACTING (queued for AI) \u2192 EXTRACTED (claims created) \u2192 ARCHIVED (done)" }), _jsx(Tip, { children: "You can edit a source after creating it. Click \"Edit\" in the source viewer. Saving resets the status to INBOX so it can be re-processed with the updated content." }), _jsx(H, { children: "Deleting Sources" }), _jsx(P, { children: "In the Sources tab, hover over a source and click the trash icon. A confirmation dialog will appear before deletion." })] }));
+}
+function NotesSection() {
+    return (_jsxs("div", { children: [_jsx(H, { children: "Knowledge Notes" }), _jsx(P, { children: "Each note is an atomic claim \u2014 one idea, one point. Notes have declarative titles that read as complete sentences." }), _jsx(H, { children: "Note Structure" }), _jsx("div", { className: "space-y-1 mb-4", children: [
+                    {
+                        field: "Title",
+                        desc: 'A clear, declarative statement (e.g., "local-first architecture executes operations immediately")',
+                    },
+                    {
+                        field: "Description",
+                        desc: "~150 character summary for progressive disclosure",
+                    },
+                    {
+                        field: "Content",
+                        desc: "Full markdown body with arguments and evidence",
+                    },
+                    {
+                        field: "Type",
+                        desc: "concept, pattern, architecture, decision, observation, procedure, etc.",
+                    },
+                    {
+                        field: "Status",
+                        desc: "DRAFT \u2192 IN_REVIEW \u2192 CANONICAL \u2192 ARCHIVED",
+                    },
+                    {
+                        field: "Links",
+                        desc: "Typed connections to other notes (RELATES_TO, BUILDS_ON, CONTRADICTS, etc.)",
+                    },
+                    { field: "Topics", desc: "Tags for navigation and MOC grouping" },
+                ].map((item) => (_jsxs("div", { className: "flex gap-2 rounded px-3 py-1.5", style: { backgroundColor: "var(--bai-bg)" }, children: [_jsx("span", { className: "shrink-0 text-[10px] font-semibold w-20", style: { color: "var(--bai-text-secondary)" }, children: item.field }), _jsx("span", { className: "text-[10px]", style: { color: "var(--bai-text-muted)" }, children: item.desc })] }, item.field))) }), _jsx(Tip, { children: "Most notes are created by the AI agent during source extraction. You can also create notes directly via New > Knowledge Note for claims you already have in mind." }), _jsx(H, { children: "Creating a Note Manually" }), _jsx(Step, { n: 1, title: "New > Knowledge Note", children: "Use the top bar menu. Give it a declarative title." }), _jsx(Step, { n: 2, title: "Fill in the editor", children: "Add description, content, type, and topics in the note editor." }), _jsx(Step, { n: 3, title: "Add links", children: "Use the Links section to connect it to related notes." })] }));
+}
+function PipelineSection() {
+    return (_jsxs("div", { children: [_jsx(H, { children: "Processing Pipeline" }), _jsx(P, { children: "The pipeline tracks how sources get transformed into connected knowledge. Each task moves through 4 phases." }), _jsx(H, { children: "The 4 Phases" }), _jsx("div", { className: "space-y-2 mb-4", children: [
+                    {
+                        phase: "Create",
+                        color: "bg-amber-400",
+                        desc: "Extract atomic claims from the source into individual knowledge notes",
+                    },
+                    {
+                        phase: "Reflect",
+                        color: "bg-blue-400",
+                        desc: "Find connections between the new notes and existing knowledge",
+                    },
+                    {
+                        phase: "Reweave",
+                        color: "bg-purple-400",
+                        desc: "Update older notes with new context from the fresh extraction",
+                    },
+                    {
+                        phase: "Verify",
+                        color: "bg-emerald-400",
+                        desc: "Quality check: schema compliance, link density, description quality",
+                    },
+                ].map((item) => (_jsxs("div", { className: "flex items-center gap-3 rounded-lg px-3 py-2", style: { backgroundColor: "var(--bai-bg)" }, children: [_jsx("span", { className: `h-2.5 w-8 rounded-full ${item.color}` }), _jsx("span", { className: "text-xs font-medium w-16", style: { color: "var(--bai-text)" }, children: item.phase }), _jsx("span", { className: "text-[10px]", style: { color: "var(--bai-text-muted)" }, children: item.desc })] }, item.phase))) }), _jsx(H, { children: "How It Works" }), _jsx(Step, { n: 1, title: "Source gets queued", children: "Click \"Queue for Processing\" in the source editor, or the AI agent queues it automatically." }), _jsx(Step, { n: 2, title: "Agent processes each phase", children: "The AI agent picks up PENDING tasks and works through the phases, recording handoff notes at each step." }), _jsx(Step, { n: 3, title: "Track progress", children: "Open the Pipeline tab to see task status, completed phases, and handoff details." }), _jsx(Tip, { children: "Click on a task name in the Pipeline view to jump directly to the source document." })] }));
+}
+function GraphSection() {
+    return (_jsxs("div", { children: [_jsx(H, { children: "Knowledge Graph" }), _jsx(P, { children: "The Graph tab shows how your notes are connected. Each node is a note, each edge is a typed link." }), _jsx(H, { children: "Link Types" }), _jsx("div", { className: "space-y-1 mb-4", children: [
+                    {
+                        type: "RELATES_TO",
+                        desc: "General connection between related concepts",
+                    },
+                    {
+                        type: "BUILDS_ON",
+                        desc: "This note extends or deepens the target",
+                    },
+                    { type: "CONTRADICTS", desc: "This note conflicts with the target" },
+                    { type: "SUPERSEDES", desc: "This note replaces an outdated claim" },
+                    {
+                        type: "DERIVED_FROM",
+                        desc: "This note was extracted from the target source",
+                    },
+                ].map((item) => (_jsxs("div", { className: "flex gap-2 rounded px-3 py-1.5", style: { backgroundColor: "var(--bai-bg)" }, children: [_jsx("span", { className: "shrink-0 text-[10px] font-mono font-medium w-28", style: { color: "var(--bai-accent)" }, children: item.type }), _jsx("span", { className: "text-[10px]", style: { color: "var(--bai-text-muted)" }, children: item.desc })] }, item.type))) }), _jsx(H, { children: "Graph Health Metrics" }), _jsx(P, { children: "The Health tab shows quality metrics computed from the graph:" }), _jsx("div", { className: "space-y-1 mb-4", children: [
+                    {
+                        metric: "Orphans",
+                        desc: "Notes with zero incoming links \u2014 disconnected from the graph",
+                    },
+                    {
+                        metric: "Density",
+                        desc: "How interconnected the graph is (edges / possible edges)",
+                    },
+                    {
+                        metric: "Avg Links",
+                        desc: "Average connections per note \u2014 target is 2+",
+                    },
+                    {
+                        metric: "Bridges",
+                        desc: "Critical nodes whose removal would disconnect the graph",
+                    },
+                ].map((item) => (_jsxs("div", { className: "flex gap-2 rounded px-3 py-1.5", style: { backgroundColor: "var(--bai-bg)" }, children: [_jsx("span", { className: "shrink-0 text-[10px] font-medium w-20", style: { color: "var(--bai-text-secondary)" }, children: item.metric }), _jsx("span", { className: "text-[10px]", style: { color: "var(--bai-text-muted)" }, children: item.desc })] }, item.metric))) }), _jsx(Tip, { children: "The graph auto-syncs when notes change. If you add a link in the note editor, the graph view updates on the next tab switch." })] }));
+}
+function PluginSection() {
+    return (_jsxs("div", { children: [_jsx(H, { children: "AI Agent (Claude Plugin)" }), _jsx(P, { children: "The powerhouse-knowledge plugin connects Claude Code to your vault. The AI agent can extract claims, find connections, verify quality, and analyze the graph." }), _jsx(H, { children: "Setup \u2014 Local" }), _jsx(Step, { n: 1, title: "Start the reactor locally", children: "Run ph vetra --watch in your project directory. MCP is served at http://localhost:4001/mcp" }), _jsx(Step, { n: 2, title: "Open Claude Code with the plugin", children: "claude --plugin-dir ~/path/to/powerhouse-knowledge" }), _jsx(Step, { n: 3, title: "Run /setup", children: "This imports the Ars Contexta methodology (249 research claims) if not already present." }), _jsx(H, { children: "Setup \u2014 Remote Vault" }), _jsx(P, { children: "You can also connect to any remote Switchboard instance instead of running locally. Edit .mcp.json in the plugin directory to point to the remote reactor:" }), _jsxs("div", { className: "mb-4 rounded-lg px-4 py-3 font-mono text-[11px]", style: { backgroundColor: "var(--bai-bg)", color: "var(--bai-text-secondary)" }, children: [_jsx("span", { style: { color: "var(--bai-text-muted)" }, children: `{` }), _jsx("br", {}), _jsx("span", { style: { color: "var(--bai-text-muted)" }, children: `  "mcpServers": { "reactor-mcp": {` }), _jsx("br", {}), _jsx("span", { style: { color: "var(--bai-text-muted)" }, children: `    "url": "` }), _jsx("span", { className: "text-emerald-400", children: "https://your-switchboard.example.com/mcp" }), _jsx("span", { style: { color: "var(--bai-text-muted)" }, children: `"` }), _jsx("br", {}), _jsx("span", { style: { color: "var(--bai-text-muted)" }, children: `  }}` }), _jsx("br", {}), _jsx("span", { style: { color: "var(--bai-text-muted)" }, children: `}` })] }), _jsx(Tip, { children: "No local reactor needed when connecting remotely. The plugin talks to the remote Switchboard via MCP over HTTPS. All skills work the same way \u2014 the only difference is the endpoint URL." }), _jsx(H, { children: "Key Commands" }), _jsx("div", { className: "space-y-1 mb-4", children: [
+                    { cmd: "/seed", desc: "Ingest source material for processing" },
+                    { cmd: "/extract", desc: "Extract atomic claims from a source" },
+                    { cmd: "/connect", desc: "Find and create links between notes" },
+                    { cmd: "/verify", desc: "Run quality checks on notes" },
+                    {
+                        cmd: "/pipeline",
+                        desc: "Run the full extract \u2192 connect \u2192 reweave \u2192 verify flow",
+                    },
+                    { cmd: "/health", desc: "Get vault health diagnostics" },
+                    {
+                        cmd: "/graph",
+                        desc: "Structural analysis (triangles, bridges, clusters)",
+                    },
+                    { cmd: "/search", desc: "Find notes by content, title, or topic" },
+                ].map((item) => (_jsxs("div", { className: "flex gap-2 rounded px-3 py-1.5", style: { backgroundColor: "var(--bai-bg)" }, children: [_jsx("span", { className: "shrink-0 text-[10px] font-mono font-medium text-emerald-400 w-20", children: item.cmd }), _jsx("span", { className: "text-[10px]", style: { color: "var(--bai-text-muted)" }, children: item.desc })] }, item.cmd))) }), _jsx(H, { children: "Typical Workflow" }), _jsx(P, { children: "1. Add a source in the app (paste article/transcript) \u2192 2. Click \"Queue for Processing\" \u2192 3. In Claude Code, run /pipeline \u2192 4. Agent extracts claims, connects them, verifies quality \u2192 5. See results in the app (Notes, Graph, Health tabs)" }), _jsx(Tip, { children: "The AI agent references the 249 Ars Contexta methodology claims in /research/ when making design decisions. These explain WHY the vault works the way it does." })] }));
+}

package/dist/editors/knowledge-vault/components/GraphView.d.ts

@@ -0,0 +1,41 @@
+import type { KnowledgeNoteInfo } from "../hooks/use-knowledge-notes.js";
+type PersistedGraphState = {
+    nodes: {
+        id: string;
+        documentId: string;
+        title?: string | null;
+        noteType?: string | null;
+        status?: string | null;
+    }[];
+    edges: {
+        id: string;
+        sourceDocumentId: string;
+        targetDocumentId: string;
+        linkType?: string | null;
+    }[];
+    lastSyncedAt?: string | null;
+} | null;
+type MocInfo = {
+    id: string;
+    title: string;
+    tier: string | null;
+    coreIdeas: {
+        noteRef: string;
+        contextPhrase: string;
+    }[];
+};
+type TensionInfo = {
+    id: string;
+    title: string;
+    status: string | null;
+    involvedRefs: string[];
+};
+type GraphViewProps = {
+    notes: KnowledgeNoteInfo[];
+    graphState?: PersistedGraphState;
+    mocs?: MocInfo[];
+    tensions?: TensionInfo[];
+};
+export declare function GraphView({ notes, graphState, mocs, tensions }: GraphViewProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=GraphView.d.ts.map

package/dist/editors/knowledge-vault/components/GraphView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GraphView.d.ts","sourceRoot":"","sources":["../../../../editors/knowledge-vault/components/GraphView.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AAUzE,KAAK,mBAAmB,GAAG;IACzB,KAAK,EAAE;QACL,EAAE,EAAE,MAAM,CAAC;QACX,UAAU,EAAE,MAAM,CAAC;QACnB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;QACtB,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;QACzB,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;KACxB,EAAE,CAAC;IACJ,KAAK,EAAE;QACL,EAAE,EAAE,MAAM,CAAC;QACX,gBAAgB,EAAE,MAAM,CAAC;QACzB,gBAAgB,EAAE,MAAM,CAAC;QACzB,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;KAC1B,EAAE,CAAC;IACJ,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC9B,GAAG,IAAI,CAAC;AAET,KAAK,OAAO,GAAG;IACb,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,SAAS,EAAE;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,aAAa,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;CACzD,CAAC;AAEF,KAAK,WAAW,GAAG;IACjB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,YAAY,EAAE,MAAM,EAAE,CAAC;CACxB,CAAC;AAEF,KAAK,cAAc,GAAG;IACpB,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B,UAAU,CAAC,EAAE,mBAAmB,CAAC;IACjC,IAAI,CAAC,EAAE,OAAO,EAAE,CAAC;IACjB,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAC;CAC1B,CAAC;AAwXF,wBAAgB,SAAS,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,cAAc,2CAupB9E"}