add linter and packed output

frontend/src/App.jsx

@@ -17,6 +17,7 @@ import { embedWorkflow, extractWorkflow } from './pngMetadata';
 import { captureViewportBlob as captureWorkflowViewportBlob } from './workflowCapture';
 import tonoIconUrl from '../../resources/icon_1024.png';
 import { hydrateWorkflowState } from './workflowHydration';
+import { packWorkflow, unpackWorkflow } from './workflowPacking';
 import { serializeWorkflowState } from './workflowSerialization';
 import { sortNodesForParentOrder } from './nodeHierarchy.js';
 import {
@@ -2008,8 +2009,8 @@ function Flow() {
     setStatus({ text: 'Graph cleared.', level: 'info' });
   }, [setNodes, setEdges]);
 
-  const applyWorkflowData = useCallback((data) => {
-    const hydrated = hydrateWorkflowState(data, nodeDefsRef.current);
+  const applyWorkflowData = useCallback((data, { preservedPaths } = {}) => {
+    const hydrated = hydrateWorkflowState(data, nodeDefsRef.current, { preservedPaths });
     setNodes(sortNodesForParentOrder(hydrated.nodes));
     setEdges(hydrated.edges);
     nextIdRef.current = hydrated.nextNodeId;
@@ -2029,6 +2030,16 @@ function Flow() {
     initializeDynamicNodes(hydrated.nodes);
   }, [initializeDynamicNodes, setNodes, setEdges]);
 
+  const applyMaybePackedWorkflow = useCallback(async (data) => {
+    if (data.packed && data.packedFiles) {
+      setStatus({ text: 'Unpacking files…', level: 'info' });
+      const { workflow, restoredPaths } = await unpackWorkflow(data);
+      applyWorkflowData(workflow, { preservedPaths: restoredPaths });
+    } else {
+      applyWorkflowData(data);
+    }
+  }, [applyWorkflowData]);
+
   const loadDefaultWorkflow = useCallback(async () => {
     if (defaultWorkflowLoadAttemptedRef.current) return;
     defaultWorkflowLoadAttemptedRef.current = true;
@@ -2045,7 +2056,7 @@ function Flow() {
       const loaded = await loadDefaultWorkflowAsset();
       if (!loaded || graphHasContent()) return;
 
-      applyWorkflowData(loaded.workflow);
+      await applyMaybePackedWorkflow(loaded.workflow);
       setStatus({ text: `Loaded default workflow from ${loaded.source}.`, level: 'info' });
       requestAnimationFrame(() => {
         requestAnimationFrame(() => scheduleAutoRun());
@@ -2053,7 +2064,7 @@ function Flow() {
     } catch (err) {
       setStatus({ text: 'Default workflow failed to load: ' + err.message, level: 'error' });
     }
-  }, [applyWorkflowData, reactFlow, scheduleAutoRun]);
+  }, [applyMaybePackedWorkflow, reactFlow, scheduleAutoRun]);
 
   // ── Load node definitions ───────────────────────────────────────────
 
@@ -2224,6 +2235,90 @@ function Flow() {
     }
   }, [getWorkflowBlob]);
 
+  const savePackedWorkflow = useCallback(async () => {
+    setStatus({ text: 'Packing files…', level: 'info' });
+    try {
+      const viewportEl = document.querySelector('.react-flow__viewport');
+      if (!viewportEl) throw new Error('Flow element not found');
+
+      const allNodes = reactFlow.getNodes();
+      if (allNodes.length === 0) throw new Error('No nodes to capture');
+
+      const bounds = getRenderedNodeBounds(allNodes);
+      if (!bounds) throw new Error('Could not determine rendered node bounds');
+      const pad = 0.1;
+      const imageWidth = Math.ceil(bounds.width * (1 + pad * 2));
+      const imageHeight = Math.ceil(bounds.height * (1 + pad * 2));
+      const vp = getViewportForBounds(bounds, imageWidth, imageHeight, 0.5, 1, pad);
+
+      const blob = await captureWorkflowViewportBlob(viewportEl, {
+        backgroundColor: CANVAS_COLORS.bgDeep,
+        width: imageWidth,
+        height: imageHeight,
+        style: {
+          width: `${imageWidth}px`,
+          height: `${imageHeight}px`,
+          transform: `translate(${vp.x}px, ${vp.y}px) scale(${vp.zoom})`,
+        },
+      });
+      if (!blob) throw new Error('Capture returned empty');
+
+      const stampedBlob = await stampLogoOnBlob(blob);
+      let workflow = serializeWorkflowState(allNodes, reactFlow.getEdges());
+      if (journalContentRef.current) workflow.journalContent = journalContentRef.current;
+
+      workflow = await packWorkflow(workflow, nodeDefsRef.current, (packed, total) => {
+        setStatus({ text: `Packing files… (${packed}/${total})`, level: 'info' });
+      });
+
+      const finalBlob = await embedWorkflow(stampedBlob, workflow);
+      const defaultName = 'workflow-packed.png';
+
+      if (window.pywebview?.api?.choose_save_workflow_png_path) {
+        const requestedPath = await window.pywebview.api.choose_save_workflow_png_path(defaultName);
+        if (!requestedPath) { setStatus({ text: 'Save cancelled.', level: 'info' }); return; }
+        const resp = await fetch(`/save-workflow-png?path=${encodeURIComponent(requestedPath)}`, {
+          method: 'POST', headers: { 'Content-Type': 'image/png' }, body: finalBlob,
+        });
+        if (!resp.ok) throw new Error(await resp.text() || `Save failed (${resp.status})`);
+        const { path: savedPath } = await resp.json();
+        if (!savedPath) { setStatus({ text: 'Save cancelled.', level: 'info' }); return; }
+        setStatus({ text: `Packed workflow saved to ${savedPath}.`, level: 'info' });
+        return;
+      }
+
+      if ('showSaveFilePicker' in window) {
+        try {
+          const handle = await window.showSaveFilePicker({
+            suggestedName: defaultName,
+            types: [{ description: 'PNG image', accept: { 'image/png': ['.png'] } }],
+          });
+          const writable = await handle.createWritable();
+          await writable.write(finalBlob);
+          await writable.close();
+          setStatus({ text: 'Packed workflow saved.', level: 'info' });
+          return;
+        } catch (err) {
+          if (err?.name === 'AbortError') { setStatus({ text: 'Save cancelled.', level: 'info' }); return; }
+          throw err;
+        }
+      }
+
+      const resp = await fetch('/download?filename=' + defaultName, { method: 'POST', body: finalBlob });
+      const dlBlob = await resp.blob();
+      const a = document.createElement('a');
+      a.href = URL.createObjectURL(dlBlob);
+      a.download = defaultName;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      setTimeout(() => URL.revokeObjectURL(a.href), 1000);
+      setStatus({ text: `Packed workflow downloaded as ${defaultName}.`, level: 'info' });
+    } catch (err) {
+      setStatus({ text: 'Pack failed: ' + err.message, level: 'error' });
+    }
+  }, [reactFlow]);
+
   const copySnapshot = useCallback(() => {
     setStatus({ text: 'Copying snapshot…', level: 'info' });
     // Pass a Promise<Blob> to ClipboardItem so the clipboard.write() call
@@ -2258,14 +2353,14 @@ function Flow() {
         } else {
           data = JSON.parse(await file.text());
         }
-        applyWorkflowData(data);
+        await applyMaybePackedWorkflow(data);
         setStatus({ text: 'Workflow loaded.', level: 'info' });
       } catch {
         setStatus({ text: 'Invalid workflow file.', level: 'error' });
       }
     };
     input.click();
-  }, [applyWorkflowData]);
+  }, [applyMaybePackedWorkflow]);
 
   const uploadPlugin = useCallback(() => {
     const input = document.createElement('input');
@@ -2302,12 +2397,12 @@ function Flow() {
         setStatus({ text: 'No workflow data in this image.', level: 'error' });
         return;
       }
-      applyWorkflowData(data);
+      await applyMaybePackedWorkflow(data);
       setStatus({ text: 'Workflow loaded from image.', level: 'info' });
     } catch (err) {
       setStatus({ text: 'Failed to load: ' + err.message, level: 'error' });
     }
-  }, [applyWorkflowData]);
+  }, [applyMaybePackedWorkflow]);
 
   const onDragOver = useCallback((event) => {
     if (event.dataTransfer?.types?.includes('Files')) {
@@ -2969,6 +3064,9 @@ function Flow() {
             <button className="btn" onClick={saveWorkflow} title="Save workflow as PNG">
               ⤓ Save
             </button>
+            <button className="btn" onClick={savePackedWorkflow} title="Save packed workflow (with files)">
+              ⊞ Pack
+            </button>
             <button className="btn" onClick={loadWorkflow} title="Load workflow (JSON or PNG)">
               ⤒ Load
             </button>

frontend/src/api.js

@@ -116,6 +116,15 @@ export async function getChannels(filepath) {
   return r.json();
 }
 
+export async function getFileContent(path) {
+  const r = await sessionFetch(`/file-content?path=${encodeURIComponent(path)}`);
+  if (!r.ok) {
+    const text = await r.text();
+    throw new Error(`Failed to read file (${r.status}): ${text}`);
+  }
+  return r.arrayBuffer();
+}
+
 export async function getFolderFiles(folderpath) {
   const r = await sessionFetch(`/folder-files?folder=${encodeURIComponent(folderpath)}`);
   if (!r.ok) return [];

frontend/src/workflowHydration.js

@@ -20,12 +20,13 @@ function getInputEntries(definition) {
   ];
 }
 
-function sanitizeWidgetValues(widgetValues, definition) {
+function sanitizeWidgetValues(widgetValues, definition, preservedPaths) {
   const nextValues = { ...(widgetValues || {}) };
 
   getInputEntries(definition).forEach(([inputName, inputDef]) => {
     const type = getSocketType(inputDef);
     if (type === 'FILE_PICKER' || type === 'FOLDER_PICKER') {
+      if (preservedPaths && preservedPaths.has(nextValues[inputName])) return;
       nextValues[inputName] = '';
     }
   });
@@ -33,7 +34,7 @@ function sanitizeWidgetValues(widgetValues, definition) {
   return nextValues;
 }
 
-export function hydrateWorkflowState(data, defs = {}) {
+export function hydrateWorkflowState(data, defs = {}, { preservedPaths } = {}) {
   const loadedNodes = Array.isArray(data?.nodes) ? data.nodes : [];
   const loadedEdges = Array.isArray(data?.edges) ? data.edges : [];
 
@@ -52,7 +53,7 @@ export function hydrateWorkflowState(data, defs = {}) {
       data: {
         ...node.data,
         label: node.data?.label || node.data?.className || 'Node',
-        widgetValues: sanitizeWidgetValues(node.data?.widgetValues, definition),
+        widgetValues: sanitizeWidgetValues(node.data?.widgetValues, definition, preservedPaths),
         runtimeValues: sanitizeRuntimeValuesForPersistence(
           node.data?.className,
           node.data?.runtimeValues,

frontend/src/workflowPacking.js

@@ -0,0 +1,187 @@
+/**
+ * workflowPacking.js — Pack/unpack file assets into workflow JSON.
+ *
+ * Packed workflows embed base64-encoded file contents so they are
+ * portable across machines and sessions.
+ */
+
+import * as api from './api';
+
+const MAX_PACKED_BYTES = 100 * 1024 * 1024; // 100 MB
+
+// ── Helpers ──────────────────────────────────────────────────────────
+
+function arrayBufferToBase64(buffer) {
+  const bytes = new Uint8Array(buffer);
+  let binary = '';
+  for (let i = 0; i < bytes.length; i++) {
+    binary += String.fromCharCode(bytes[i]);
+  }
+  return btoa(binary);
+}
+
+function base64ToUint8Array(b64) {
+  const binary = atob(b64);
+  const bytes = new Uint8Array(binary.length);
+  for (let i = 0; i < binary.length; i++) {
+    bytes[i] = binary.charCodeAt(i);
+  }
+  return bytes;
+}
+
+function getInputType(spec) {
+  if (!spec) return null;
+  const type = Array.isArray(spec) ? spec[0] : spec;
+  return Array.isArray(type) ? type[0] : type;
+}
+
+function filenameFromPath(path) {
+  return String(path).split('/').pop();
+}
+
+/**
+ * Extract the relative path portion from a session:// URI.
+ * e.g. "session://uploads/myfolder/scan.ibw" → "myfolder/scan.ibw"
+ */
+function sessionRelativePath(path) {
+  const prefix = 'session://uploads/';
+  if (path.startsWith(prefix)) return path.slice(prefix.length);
+  return filenameFromPath(path);
+}
+
+// ── Pack ─────────────────────────────────────────────────────────────
+
+/**
+ * Embed referenced files into workflowData.
+ *
+ * @param {object} workflowData - Serialized workflow (from serializeWorkflowState)
+ * @param {object} nodeDefs     - Node definition registry (nodeDefsRef.current)
+ * @param {function} [onProgress] - Optional (packed, total) callback
+ * @returns {object} workflowData with packedFiles added
+ */
+export async function packWorkflow(workflowData, nodeDefs, onProgress) {
+  // 1. Collect FILE_PICKER paths only (skip FOLDER_PICKER)
+  const filePaths = new Set();
+
+  for (const node of workflowData.nodes) {
+    const className = node.data?.className;
+    const def = className ? nodeDefs[className] : null;
+    if (!def) continue;
+
+    const allInputs = { ...(def.input?.required || {}), ...(def.input?.optional || {}) };
+    const widgetValues = node.data?.widgetValues || {};
+
+    for (const [name, spec] of Object.entries(allInputs)) {
+      const type = getInputType(spec);
+      const value = String(widgetValues[name] || '').trim();
+      if (!value) continue;
+
+      if (type === 'FILE_PICKER') {
+        filePaths.add(value);
+      }
+    }
+  }
+
+  if (filePaths.size === 0) {
+    return workflowData;
+  }
+
+  // 3. Fetch each file and encode
+  const packedFiles = {};
+  let totalBytes = 0;
+  let packed = 0;
+  const total = filePaths.size;
+
+  for (const path of filePaths) {
+    try {
+      const buffer = await api.getFileContent(path);
+      totalBytes += buffer.byteLength;
+      if (totalBytes > MAX_PACKED_BYTES) {
+        throw new Error(
+          `Packed workflow exceeds ${Math.round(MAX_PACKED_BYTES / 1024 / 1024)} MB limit ` +
+          `(${Math.round(totalBytes / 1024 / 1024)} MB so far). ` +
+          `Reduce the number or size of referenced files.`
+        );
+      }
+      packedFiles[path] = {
+        filename: filenameFromPath(path),
+        data: arrayBufferToBase64(buffer),
+      };
+    } catch (err) {
+      if (err.message.includes('limit')) throw err;
+      // File may not exist (e.g. cleared path) — skip
+    }
+    packed++;
+    if (onProgress) onProgress(packed, total);
+  }
+
+  if (Object.keys(packedFiles).length === 0) {
+    return workflowData;
+  }
+
+  return {
+    ...workflowData,
+    packed: true,
+    packedFiles,
+  };
+}
+
+// ── Unpack ───────────────────────────────────────────────────────────
+
+/**
+ * Extract packed files from workflowData and upload them to the current session.
+ *
+ * @param {object} workflowData - Workflow data potentially containing packedFiles
+ * @returns {{ workflow: object, restoredPaths: Set<string> }}
+ */
+export async function unpackWorkflow(workflowData) {
+  const packedFiles = workflowData.packedFiles;
+  if (!packedFiles || Object.keys(packedFiles).length === 0) {
+    return { workflow: workflowData, restoredPaths: new Set() };
+  }
+
+  const pathMap = {};       // oldPath → newSessionPath
+  const restoredPaths = new Set();
+
+  // 1. Upload each packed file
+  for (const [origPath, entry] of Object.entries(packedFiles)) {
+    const bytes = base64ToUint8Array(entry.data);
+    const file = new File([bytes], entry.filename);
+    const relativePath = sessionRelativePath(origPath);
+
+    try {
+      const result = await api.uploadFile(file, { relativePath });
+      const newPath = result.path;
+      pathMap[origPath] = newPath;
+      restoredPaths.add(newPath);
+    } catch {
+      // Upload failed — skip this file
+    }
+  }
+
+  // 2. Remap widget values in nodes
+  const updatedNodes = workflowData.nodes.map((node) => {
+    const wv = node.data?.widgetValues;
+    if (!wv) return node;
+
+    let changed = false;
+    const nextWv = { ...wv };
+    for (const [key, val] of Object.entries(nextWv)) {
+      if (typeof val === 'string' && pathMap[val]) {
+        nextWv[key] = pathMap[val];
+        changed = true;
+      }
+    }
+
+    if (!changed) return node;
+    return { ...node, data: { ...node.data, widgetValues: nextWv } };
+  });
+
+  // Strip packed data from the workflow to avoid storing it again on re-save
+  const { packedFiles: _, packed: __, ...cleanWorkflow } = workflowData;
+
+  return {
+    workflow: { ...cleanWorkflow, nodes: updatedNodes },
+    restoredPaths,
+  };
+}