work on journal

2026-03-31 00:47:43 -07:00
parent 978d45fea8
commit 15e14c0dcc
5 changed files with 316 additions and 72 deletions
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -9,6 +9,7 @@ import {
 import '@xyflow/react/dist/style.css';

 import CustomNode, { NodeContext } from './CustomNode';
+import HelpPanelManager from './HelpPanelManager';
 import * as api from './api';
 import { pickNativeDirectorySelection, pickNativeFileSelection } from './nativePicker';
 import { toBlob } from 'html-to-image';
@@ -854,6 +855,8 @@ function Flow() {
  const [contextMenu, setContextMenu] = useState(null);
  const [isCanvasRightZooming, setIsCanvasRightZooming] = useState(false);
  const [executingNodeId, setExecutingNodeId] = useState(null);
+  const [helpTabs, setHelpTabs] = useState([]);
+  const [activeHelpTab, setActiveHelpTab] = useState(null);

  const flowContainerRef = useRef(null);
  const panTimerRef = useRef(null);
@@ -1647,6 +1650,11 @@ function Flow() {

  const addNode = useCallback((className, def) => {
    if (!contextMenu) return;
+    if (className === 'TextNote') {
+      openJournalTab();
+      setContextMenu(null);
+      return;
+    }
    const position = reactFlow.screenToFlowPosition({
      x: contextMenu.x,
      y: contextMenu.y,
@@ -1745,7 +1753,7 @@ function Flow() {

    setContextMenu(null);
    scheduleAutoRun();
-  }, [contextMenu, reactFlow, refreshFolderNodeOutputs, refreshLoadNodeOutputs, setNodes, setEdges]); // scheduleAutoRun is stable (no deps)
+  }, [contextMenu, reactFlow, refreshFolderNodeOutputs, refreshLoadNodeOutputs, setNodes, setEdges]); // scheduleAutoRun stable; openJournalTab stable ([] deps)

  // ── Toolbar actions ─────────────────────────────────────────────────

@@ -1921,6 +1929,45 @@ function Flow() {
    }));
  }, [setNodes]);

+  const openHelp = useCallback(async (label) => {
+    setHelpTabs((prev) => {
+      if (prev.find((t) => t.label === label)) return prev;
+      return [...prev, { label, content: null }];
+    });
+    setActiveHelpTab(label);
+    const text = await api.getNodeDoc(label);
+    setHelpTabs((prev) =>
+      prev.map((t) =>
+        t.label === label
+          ? { ...t, content: text || '*No documentation available for this node.*' }
+          : t,
+      ),
+    );
+  }, []);
+
+  const closeHelpTab = useCallback((label) => {
+    setHelpTabs((prev) => {
+      const next = prev.filter((t) => t.label !== label);
+      setActiveHelpTab((cur) => {
+        if (cur !== label) return cur;
+        return next.length > 0 ? next[next.length - 1].label : null;
+      });
+      return next;
+    });
+  }, []);
+
+  const openJournalTab = useCallback(() => {
+    setHelpTabs((prev) => {
+      if (prev.find((t) => t.label === 'Journal')) return prev;
+      return [...prev, { label: 'Journal', type: 'journal', content: '' }];
+    });
+    setActiveHelpTab('Journal');
+  }, []);
+
+  const updateTabContent = useCallback((label, content) => {
+    setHelpTabs((prev) => prev.map((t) => t.label === label ? { ...t, content } : t));
+  }, []);
+
  const contextValue = useMemo(() => ({
    onWidgetChange,
    onRuntimeValuesChange,
@@ -1931,7 +1978,8 @@ function Flow() {
    onRenameGroup: renameGroup,
    onUngroup: ungroupGroup,
    executingNodeId,
-  }), [onRuntimeValuesChange, onWidgetChange, openFileBrowser, onManualTrigger, renameGroup, resizeGroup, toggleGroupCollapse, ungroupGroup, executingNodeId]);
+    openHelp,
+  }), [onRuntimeValuesChange, onWidgetChange, openFileBrowser, onManualTrigger, renameGroup, resizeGroup, toggleGroupCollapse, ungroupGroup, executingNodeId, openHelp]);

  const clearGraph = useCallback(() => {
    setNodes([]);
@@ -2949,6 +2997,13 @@ function Flow() {
        </div>

      </div>
+      <HelpPanelManager
+        tabs={helpTabs}
+        activeTab={activeHelpTab}
+        onTabSelect={setActiveHelpTab}
+        onTabClose={closeHelpTab}
+        onTabContentChange={updateTabContent}
+      />
    </NodeContext.Provider>
  );
 }
--- a/frontend/src/CustomNode.jsx
+++ b/frontend/src/CustomNode.jsx
@@ -1,8 +1,6 @@
 import React, { useContext, useRef, useCallback, useState, useEffect, memo, lazy, Suspense } from 'react';
-import ReactDOM from 'react-dom';
 import { Handle, NodeResizeControl, Position, useStore } from '@xyflow/react';
 import { marked } from 'marked';
-import { getNodeDoc } from './api';
 import LinePlotOverlay from './LinePlotOverlay';

 marked.use({ breaks: true, gfm: true });
@@ -978,47 +976,10 @@ function NodeTable({ rows }) {
  );
 }

-// ── Node help panel (portal) ──────────────────────────────────────────
-
-function NodeHelpPanel({ title, content, onClose }) {
-  useEffect(() => {
-    const handler = (e) => { if (e.key === 'Escape') onClose(); };
-    document.addEventListener('keydown', handler);
-    return () => document.removeEventListener('keydown', handler);
-  }, [onClose]);
-
-  return ReactDOM.createPortal(
-    <div className="node-help-panel">
-      <div className="node-help-panel-header">
-        <span className="node-help-panel-title">{title}</span>
-        <button className="node-help-panel-close" onClick={onClose} title="Close">×</button>
-      </div>
-      <div
-        className="node-help-panel-body nowheel"
-        // eslint-disable-next-line react/no-danger
-        dangerouslySetInnerHTML={{ __html: marked.parse(content || '') }}
-      />
-    </div>,
-    document.body,
-  );
-}
-
 // ── CustomNode component ──────────────────────────────────────────────

 function CustomNode({ id, data }) {
  const ctx = useContext(NodeContext);
-  const [helpOpen, setHelpOpen] = useState(false);
-  const [helpContent, setHelpContent] = useState(null);
-
-  const onHelpClick = useCallback(async (e) => {
-    e.stopPropagation();
-    if (helpOpen) { setHelpOpen(false); return; }
-    setHelpOpen(true);
-    if (helpContent === null) {
-      const text = await getNodeDoc(data.label);
-      setHelpContent(text || '*No documentation available for this node.*');
-    }
-  }, [helpOpen, helpContent, data.label]);

  if (data.className === 'Group') {
    return <GroupNode id={id} data={data} />;
@@ -1225,7 +1186,7 @@ function CustomNode({ id, data }) {
      <div className="node-title drag-handle" style={{ background: catColor }}>
        <div className="node-title-left">
          <span className="node-title-main">{data.label}</span>
-          <button className="node-help-btn nodrag nopan" title="Documentation" onClick={onHelpClick}>?</button>
+          <button className="node-help-btn nodrag nopan" title="Documentation" onClick={(e) => { e.stopPropagation(); ctx?.openHelp(data.label); }}>?</button>
        </div>
        {headerMeta && <span className="node-title-meta" title={headerMeta}>{headerMeta}</span>}
      </div>
@@ -1574,13 +1535,6 @@ function CustomNode({ id, data }) {
        )}
      </div>
    </div>
-    {helpOpen && (
-      <NodeHelpPanel
-        title={data.label}
-        content={helpContent ?? '*Loading…*'}
-        onClose={() => setHelpOpen(false)}
-      />
-    )}
    </>
  );
 }
--- a/frontend/src/HelpPanelManager.jsx
+++ b/frontend/src/HelpPanelManager.jsx
@@ -0,0 +1,117 @@
+import React, { useEffect, useState } from 'react';
+import ReactDOM from 'react-dom';
+import { marked } from 'marked';
+
+function JournalTab({ content, onChange }) {
+  const [isEditing, setIsEditing] = useState(false);
+  const renderedHtml = content?.trim() ? marked.parse(content) : '';
+
+  return (
+    <div className="node-help-journal">
+      <div className="node-help-journal-toolbar">
+        <button
+          className="node-help-journal-toggle"
+          onClick={() => setIsEditing((e) => !e)}
+        >
+          {isEditing ? 'Preview' : 'Edit'}
+        </button>
+        {isEditing && (
+          <span className="node-help-journal-hint">Ctrl+Enter to preview</span>
+        )}
+      </div>
+      {isEditing ? (
+        <textarea
+          className="node-help-journal-textarea nowheel"
+          value={content || ''}
+          onChange={(e) => onChange(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
+              e.preventDefault();
+              setIsEditing(false);
+            }
+          }}
+          placeholder="Write your notes here (Markdown supported)…"
+          // eslint-disable-next-line jsx-a11y/no-autofocus
+          autoFocus
+        />
+      ) : (
+        <div
+          className="node-help-panel-body node-help-journal-preview nowheel"
+          onDoubleClick={() => setIsEditing(true)}
+          // eslint-disable-next-line react/no-danger
+          dangerouslySetInnerHTML={renderedHtml ? { __html: renderedHtml } : undefined}
+        >
+          {!renderedHtml && (
+            <span className="node-help-journal-placeholder">Double-click to write…</span>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function HelpPanelManager({ tabs, activeTab, onTabSelect, onTabClose, onTabContentChange }) {
+  const [collapsed, setCollapsed] = useState(false);
+
+  useEffect(() => {
+    const handler = (e) => {
+      if (e.key === 'Escape' && activeTab) onTabClose(activeTab);
+    };
+    document.addEventListener('keydown', handler);
+    return () => document.removeEventListener('keydown', handler);
+  }, [activeTab, onTabClose]);
+
+  if (tabs.length === 0) return null;
+
+  const active = tabs.find((t) => t.label === activeTab) || tabs[0];
+
+  return ReactDOM.createPortal(
+    <div className="node-help-panel">
+      {/* Tab bar */}
+      <div className="node-help-tabs">
+        <button
+          className="node-help-fold-btn"
+          onClick={() => setCollapsed((c) => !c)}
+          title={collapsed ? 'Expand' : 'Collapse'}
+        >
+          {collapsed ? '▶' : '▼'}
+        </button>
+        {tabs.map((t) => (
+          <div
+            key={t.label}
+            className={`node-help-tab${t.label === active.label ? ' active' : ''}`}
+            onClick={() => onTabSelect(t.label)}
+          >
+            <span className="node-help-tab-label">{t.label}</span>
+            <button
+              className="node-help-tab-close"
+              title="Close"
+              onClick={(e) => { e.stopPropagation(); onTabClose(t.label); }}
+            >
+              ×
+            </button>
+          </div>
+        ))}
+      </div>
+
+      {/* Content */}
+      {!collapsed && (
+        active.type === 'journal' ? (
+          <JournalTab
+            content={active.content}
+            onChange={(val) => onTabContentChange(active.label, val)}
+          />
+        ) : (
+          <div
+            className="node-help-panel-body nowheel"
+            // eslint-disable-next-line react/no-danger
+            dangerouslySetInnerHTML={{ __html: marked.parse(active.content || '*Loading…*') }}
+          />
+        )
+      )}
+    </div>,
+    document.body,
+  );
+}
+
+export default HelpPanelManager;
--- a/frontend/src/TextNoteNode.jsx
+++ b/frontend/src/TextNoteNode.jsx
@@ -17,6 +17,7 @@ const NOTE_COLORS = {
 function TextNoteNode({ id, data }) {
  const ctx = useContext(NodeContext);
  const [isEditing, setIsEditing] = useState(false);
+  const [collapsed, setCollapsed] = useState(false);
  const textareaRef = useRef(null);

  const selected = useStore(
@@ -95,6 +96,13 @@ function TextNoteNode({ id, data }) {
      >
        {/* Colour picker row */}
        <div className="text-note-toolbar nodrag nopan">
+          <button
+            className="text-note-fold-btn nodrag nopan"
+            onClick={(e) => { e.stopPropagation(); setCollapsed((c) => !c); }}
+            title={collapsed ? 'Expand' : 'Collapse'}
+          >
+            {collapsed ? '▶' : '▼'}
+          </button>
          {Object.entries(NOTE_COLORS).map(([key, p]) => (
            <button
              key={key}
@@ -110,7 +118,7 @@ function TextNoteNode({ id, data }) {
        </div>

        {/* Content area */}
-        {isEditing ? (
+        {!collapsed && (isEditing ? (
          <textarea
            ref={textareaRef}
            className="text-note-textarea nodrag nopan nowheel"
@@ -135,7 +143,7 @@ function TextNoteNode({ id, data }) {
              <span className="text-note-placeholder">Double-click to write…</span>
            )}
          </div>
-        )}
+        ))}
      </div>
    </>
  );
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -474,6 +474,75 @@ html, body, #root {

 /* ── Node help panel ─────────────────────────────────────── */

+.node-help-tabs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 2px;
+  padding: 6px 8px 0;
+  background: #0a0f1a;
+  border-bottom: 1px solid #1e293b;
+  flex-shrink: 0;
+}
+
+.node-help-fold-btn {
+  background: none;
+  border: none;
+  color: #64748b;
+  font-size: 9px;
+  padding: 0 4px;
+  cursor: pointer;
+  line-height: 1;
+  flex-shrink: 0;
+  align-self: center;
+  transition: color 0.12s;
+}
+.node-help-fold-btn:hover { color: #f1f5f9; }
+
+.node-help-tab {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 8px;
+  border-radius: 5px 5px 0 0;
+  background: #0f172a;
+  border: 1px solid #1e293b;
+  border-bottom: none;
+  cursor: pointer;
+  font-size: 11px;
+  color: #64748b;
+  transition: color 0.12s, background 0.12s;
+  user-select: none;
+  max-width: 160px;
+}
+
+.node-help-tab:hover { color: #94a3b8; background: #162032; }
+
+.node-help-tab.active {
+  color: #f1f5f9;
+  background: #1e293b;
+  border-color: #334155;
+}
+
+.node-help-tab-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.node-help-tab-close {
+  background: none;
+  border: none;
+  color: inherit;
+  font-size: 13px;
+  line-height: 1;
+  padding: 0;
+  cursor: pointer;
+  opacity: 0.6;
+  flex-shrink: 0;
+  transition: opacity 0.12s;
+}
+.node-help-tab-close:hover { opacity: 1; }
+
 .node-help-panel {
  position: fixed;
  top: 60px;
@@ -490,35 +559,63 @@ html, body, #root {
  overflow: hidden;
 }

-.node-help-panel-header {
+
+.node-help-journal {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+}
+
+.node-help-journal-toolbar {
  display: flex;
  align-items: center;
-  justify-content: space-between;
-  padding: 9px 12px;
-  border-bottom: 1px solid #334155;
-  background: #0f172a;
+  gap: 8px;
+  padding: 5px 10px;
+  border-bottom: 1px solid #1e293b;
  flex-shrink: 0;
 }

-.node-help-panel-title {
-  font-weight: 600;
-  font-size: 13px;
-  color: #f1f5f9;
-}
-
-.node-help-panel-close {
-  background: none;
-  border: none;
-  color: #64748b;
-  font-size: 20px;
-  line-height: 1;
-  padding: 0 2px;
+.node-help-journal-toggle {
+  background: #0f172a;
+  border: 1px solid #334155;
+  color: #94a3b8;
+  font-size: 11px;
+  padding: 2px 8px;
+  border-radius: 4px;
  cursor: pointer;
-  transition: color 0.12s;
+  transition: color 0.12s, border-color 0.12s;
+}
+.node-help-journal-toggle:hover { color: #f1f5f9; border-color: #475569; }
+
+.node-help-journal-hint {
+  font-size: 10px;
+  color: #475569;
 }

-.node-help-panel-close:hover {
-  color: #f1f5f9;
+.node-help-journal-textarea {
+  flex: 1;
+  background: #0d1624;
+  border: none;
+  outline: none;
+  color: #e2e8f0;
+  font-family: monospace;
+  font-size: 12px;
+  line-height: 1.6;
+  padding: 12px 16px;
+  resize: none;
+  min-height: 0;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.node-help-journal-preview {
+  cursor: text;
+}
+
+.node-help-journal-placeholder {
+  color: #475569;
+  font-style: italic;
 }

 .node-help-panel-body {
@@ -1652,6 +1749,19 @@ html, body, #root {
 .text-note-color-btn.active {
  border-color: rgba(255,255,255,0.7);
 }
+.text-note-fold-btn {
+  background: none;
+  border: none;
+  color: var(--text-faint);
+  font-size: 9px;
+  padding: 0 3px;
+  cursor: pointer;
+  line-height: 1;
+  flex-shrink: 0;
+  opacity: 0.7;
+  transition: opacity 0.12s;
+}
+.text-note-fold-btn:hover { opacity: 1; }
 .text-note-hint {
  margin-left: auto;
  font-size: 10px;