feat(flowchart): discoverable connect form + per-node color + save-to-file export; v4.12.0

User feedback on v4.11.0: the Add Connection form was buried below the
node/edge lists and they couldn't find it; they also asked for per-node
color and Save to File export. v4.12.0 reorganises the #fc-nodelist panel
to put the connect form right after the Add Node buttons, adds a native
<input type="color"> per node row that drives a new store.setNodeColor
mutator (with serialize/deserialize round-trip), and wires a Save to File
button that pops a system save dialog via a new 'save-text-file' IPC
channel.

- src/flowchart-generator.html — panel order is now Add Node /
  Add Connection / Nodes / Edges / Export (Insert · Save · Reset).
  Removed the legacy top toolbar; status moved into the panel.
  Added .fc-help, per-node color-picker CSS, .fc-toolbar-row.
- src/flowchart/flowchart-shapes.js — shapeSvg() accepts an optional
  6th 'color' arg; emits fill=... on rects and polygons. Falls back to
  #ffffff for empty/null/undefined so old callers keep working.
- src/flowchart/flowchart-store.js — setNodeColor(id, color) mutator
  with snapshot/emit, normalizeColor() helper (hex validation),
  addNode accepts color, deserialize normalises missing color.
- src/renderer/flowchart-bundle.js — mirrors all of the above inline
  (the bundle is loaded as a single <script>), wires fc-btn-save to
  api.saveFile, passes node.color to shapeSvg in the canvas render,
  and renders <input type='color'> per node row.
- src/main.js — new ipcMain.handle('save-text-file', ...) using a
  system Save dialog (mirrors the ascii:save handler shape).
- src/preload.js — added 'save-text-file' to ALLOWED_SEND_CHANNELS
  and a saveFile(content, defaultName) helper on the flowchart bridge.

Tests: 92/92 suites, 1165/1165 tests pass on this run
- +9 store tests (color defaults, setNodeColor, undo, hex validation,
  round-trip, deserialize normalisation)
- +7 shapes tests (fill color on all 5 kinds, fallback to #ffffff)
- +6 controller tests (color picker wires setNodeColor, canvas rect
  reflects color, Save to File calls api.saveFile with the fenced
  Mermaid source and 'flowchart.mmd', cancel + error paths surface in
  status)

Verification:
- npm run lint          clean
- npm run format:check  clean
- npm test              92/92 suites, 1165/1165 tests pass

Amit Haridas

tests/flowchart-controller.test.js

@@ -551,3 +551,136 @@ describe('flowchart-bundle: button-driven node-list panel (v4.11.0)', () => {
     expect(edgelistUl.querySelectorAll('li')).toHaveLength(0);
   });
 });
+
+// v4.12.0 — per-node fill color picker. The user asked for the ability to
+// color individual nodes. The bundle renders a native <input type="color">
+// per node row, and `input` events call store.setNodeColor. The default
+// (newly-added) value is #ffffff.
+describe('flowchart-bundle: per-node color picker (v4.12.0)', () => {
+  const BUNDLE_PATH = path.join(__dirname, '..', 'src', 'renderer', 'flowchart-bundle.js');
+  const HTML_PATH_BUNDLE = path.join(__dirname, '..', 'src', 'flowchart-generator.html');
+
+  async function loadBundle(apiOverrides = {}) {
+    const html = fs.readFileSync(HTML_PATH_BUNDLE, 'utf-8');
+    const bodyMatch = html.match(/<body[^>]*>([\s\S]*)<\/body>/i);
+    document.body.innerHTML = bodyMatch ? bodyMatch[1] : html;
+    const apiMock = {
+      getUserDataPath: jest.fn(async () => '/userdata'),
+      readFile: jest.fn(async () => null),
+      writeFile: jest.fn(async () => undefined),
+      insertAtCursor: jest.fn(),
+      saveFile: jest.fn(async () => ({ canceled: false, path: '/tmp/out.mmd' })),
+      ...apiOverrides,
+    };
+    window.electronAPI = { flowchart: apiMock };
+    const bundleSrc = fs.readFileSync(BUNDLE_PATH, 'utf-8');
+    // eslint-disable-next-line no-new-func
+    new Function('window', 'document', bundleSrc)(window, document);
+    for (let i = 0; i < 5; i += 1) {
+      await Promise.resolve();
+    }
+    return { store: window.FlowchartController.store, apiMock };
+  }
+
+  test('each node row exposes a color <input type="color">', async () => {
+    const { store } = await loadBundle();
+    store.addNode({ kind: 'process', x: 0, y: 0, label: 'A' });
+    const li = document.getElementById('fc-nodelist-ul').querySelector('li');
+    const colorInput = li.querySelector('input[type="color"]');
+    expect(colorInput).not.toBeNull();
+    expect(colorInput.value).toBe('#ffffff');
+  });
+
+  test('changing the color <input> calls store.setNodeColor', async () => {
+    const { store } = await loadBundle();
+    store.addNode({ kind: 'process', x: 0, y: 0, label: 'A' });
+    const li = document.getElementById('fc-nodelist-ul').querySelector('li');
+    const colorInput = li.querySelector('input[type="color"]');
+    colorInput.value = '#336699';
+    colorInput.dispatchEvent(new window.Event('input', { bubbles: true }));
+    expect(store.getGraph().nodes[0].color).toBe('#336699');
+  });
+
+  test('the canvas SVG <rect> reflects the chosen color after a setNodeColor mutation', async () => {
+    const { store } = await loadBundle();
+    store.addNode({ kind: 'process', x: 0, y: 0, label: 'A' });
+    store.setNodeColor(store.getGraph().nodes[0].id, '#abcdef');
+    await Promise.resolve();
+    const nodeG = document.querySelector('svg.flowchart-canvas g[data-node-id]');
+    const rect = nodeG && nodeG.querySelector('rect');
+    expect(rect).not.toBeNull();
+    expect(rect.getAttribute('fill')).toBe('#abcdef');
+  });
+});
+
+// v4.12.0 — Save to File. The bundle wires #fc-btn-save to api.saveFile
+// with the Mermaid-fenced source and a default filename of 'flowchart.mmd'.
+// Cancel / error paths surface in the status text.
+describe('flowchart-bundle: Save to File button (v4.12.0)', () => {
+  const BUNDLE_PATH = path.join(__dirname, '..', 'src', 'renderer', 'flowchart-bundle.js');
+  const HTML_PATH_BUNDLE = path.join(__dirname, '..', 'src', 'flowchart-generator.html');
+
+  async function loadBundle(apiOverrides = {}) {
+    const html = fs.readFileSync(HTML_PATH_BUNDLE, 'utf-8');
+    const bodyMatch = html.match(/<body[^>]*>([\s\S]*)<\/body>/i);
+    document.body.innerHTML = bodyMatch ? bodyMatch[1] : html;
+    const apiMock = {
+      getUserDataPath: jest.fn(async () => '/userdata'),
+      readFile: jest.fn(async () => null),
+      writeFile: jest.fn(async () => undefined),
+      insertAtCursor: jest.fn(),
+      saveFile: jest.fn(async () => ({ canceled: false, path: '/tmp/out.mmd' })),
+      ...apiOverrides,
+    };
+    window.electronAPI = { flowchart: apiMock };
+    const bundleSrc = fs.readFileSync(BUNDLE_PATH, 'utf-8');
+    // eslint-disable-next-line no-new-func
+    new Function('window', 'document', bundleSrc)(window, document);
+    for (let i = 0; i < 5; i += 1) {
+      await Promise.resolve();
+    }
+    return { store: window.FlowchartController.store, apiMock };
+  }
+
+  test('Save to File calls api.saveFile with the Mermaid-fenced source', async () => {
+    const { store, apiMock } = await loadBundle();
+    store.addNode({ kind: 'process', x: 0, y: 0, label: 'Save' });
+    const btn = document.getElementById('fc-btn-save');
+    expect(btn).not.toBeNull();
+    btn.click();
+    await Promise.resolve();
+    await Promise.resolve();
+    expect(apiMock.saveFile).toHaveBeenCalledTimes(1);
+    const [content, defaultName] = apiMock.saveFile.mock.calls[0];
+    expect(typeof content).toBe('string');
+    expect(content.startsWith('```mermaid\n')).toBe(true);
+    expect(content.endsWith('\n```')).toBe(true);
+    expect(content).toContain('flowchart TD');
+    expect(content).toContain('A[Save]');
+    expect(defaultName).toBe('flowchart.mmd');
+  });
+
+  test('Save to File surfaces "cancel" status when the user dismisses the dialog', async () => {
+    const { apiMock } = await loadBundle({
+      saveFile: jest.fn(async () => ({ canceled: true })),
+    });
+    document.getElementById('fc-btn-save').click();
+    await Promise.resolve();
+    await Promise.resolve();
+    expect(apiMock.saveFile).toHaveBeenCalledTimes(1);
+    expect(document.getElementById('fc-status').textContent).toBe('Save cancelled');
+  });
+
+  test('Save to File surfaces the error when the IPC handler throws', async () => {
+    const { apiMock } = await loadBundle({
+      saveFile: jest.fn(async () => {
+        throw new Error('disk full');
+      }),
+    });
+    document.getElementById('fc-btn-save').click();
+    await Promise.resolve();
+    await Promise.resolve();
+    expect(apiMock.saveFile).toHaveBeenCalledTimes(1);
+    expect(document.getElementById('fc-status').textContent).toBe('Save failed: disk full');
+  });
+});