Add settings menu for diagram layout and panel visibility

Gear menu next to the theme toggle: choose random seed (default), fixed seed, or explicit node coordinates for the network diagram; toggle the four right-column panels on/off while preserving their order. Settings persist in localStorage.

Co-authored-by: Cursor <cursoragent@cursor.com>

frontend/src/App.js

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import Header from './components/Header';
 import DecidronSimulator from './components/decidron/DecidronSimulator';
+import { loadSettings, saveSettings } from './utils/settings';
 import './styles/variables.css';
 import './styles/layout.css';
 import './styles/components.css';
@@ -13,19 +14,29 @@ export default function App() {
     () => localStorage.getItem(THEME_KEY)
       || (window.matchMedia?.('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
   );
+  const [settings, setSettings] = useState(() => loadSettings());
 
   useEffect(() => {
     document.documentElement.setAttribute('data-theme', theme);
     localStorage.setItem(THEME_KEY, theme);
   }, [theme]);
 
+  useEffect(() => {
+    saveSettings(settings);
+  }, [settings]);
+
   const toggleTheme = () => setTheme((t) => (t === 'dark' ? 'light' : 'dark'));
 
   return (
     <div className="app">
-      <Header theme={theme} onToggleTheme={toggleTheme} />
+      <Header
+        theme={theme}
+        onToggleTheme={toggleTheme}
+        settings={settings}
+        onSettingsChange={setSettings}
+      />
       <main className="app-main">
-        <DecidronSimulator />
+        <DecidronSimulator settings={settings} />
       </main>
     </div>
   );

frontend/src/components/Header.js

@@ -1,12 +1,11 @@
 import React from 'react';
 import { Sun, Moon } from 'lucide-react';
+import SettingsMenu from './SettingsMenu';
 
 /**
- * Slim branded header for the Decidron simulator. The CCAI chat header
- * (participant dropdown, downloads, settings) was removed when the repo
- * was trimmed to a lean scaffold.
+ * Slim branded header for the Decidron simulator.
  */
-export default function Header({ theme, onToggleTheme }) {
+export default function Header({ theme, onToggleTheme, settings, onSettingsChange }) {
   return (
     <header className="app-header">
       <div className="header-left">
@@ -20,9 +19,10 @@ export default function Header({ theme, onToggleTheme }) {
         </h1>
       </div>
       <div className="header-right">
+        <SettingsMenu settings={settings} onChange={onSettingsChange} />
         <button
           type="button"
-          className="btn-sm btn-outline"
+          className="btn-sm btn-outline icon-btn"
           onClick={onToggleTheme}
           title={theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'}
         >

frontend/src/components/SettingsMenu.js

@@ -0,0 +1,88 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { Settings } from 'lucide-react';
+import { LAYOUT_MODES, PANEL_KEYS, PANEL_LABELS } from '../utils/settings';
+
+const LAYOUT_OPTIONS = [
+  { id: LAYOUT_MODES.RANDOM, label: 'Random seed (default)', hint: 'Layout may shift on each run' },
+  { id: LAYOUT_MODES.FIXED_SEED, label: 'Fixed seed', hint: 'Same layout every run unless topology changes' },
+  { id: LAYOUT_MODES.EXPLICIT, label: 'Explicit coordinates', hint: 'Fixed positions; physics off' },
+];
+
+export default function SettingsMenu({ settings, onChange }) {
+  const [open, setOpen] = useState(false);
+  const wrapRef = useRef(null);
+
+  useEffect(() => {
+    if (!open) return undefined;
+    const onDocClick = (e) => {
+      if (wrapRef.current && !wrapRef.current.contains(e.target)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', onDocClick);
+    return () => document.removeEventListener('mousedown', onDocClick);
+  }, [open]);
+
+  const setLayoutMode = (layoutMode) => {
+    onChange({ ...settings, layoutMode });
+  };
+
+  const togglePanel = (key) => {
+    onChange({
+      ...settings,
+      panels: { ...settings.panels, [key]: !settings.panels[key] },
+    });
+  };
+
+  return (
+    <div className="ccai-dropdown-wrap decidron-settings-wrap" ref={wrapRef}>
+      <button
+        type="button"
+        className="btn-sm btn-outline icon-btn decidron-settings-trigger"
+        onClick={() => setOpen((v) => !v)}
+        title="Settings"
+        aria-expanded={open}
+        aria-haspopup="true"
+      >
+        <Settings size={16} />
+      </button>
+      {open && (
+        <div className="ccai-dropdown-panel decidron-settings-panel" role="menu">
+          <div className="ccai-dropdown-section">
+            <div className="ccai-dropdown-section-title">Diagram node placement</div>
+            {LAYOUT_OPTIONS.map((opt) => (
+              <label key={opt.id} className="decidron-settings-radio">
+                <input
+                  type="radio"
+                  name="layoutMode"
+                  checked={settings.layoutMode === opt.id}
+                  onChange={() => setLayoutMode(opt.id)}
+                />
+                <span>
+                  <strong>{opt.label}</strong>
+                  <span className="decidron-settings-hint">{opt.hint}</span>
+                </span>
+              </label>
+            ))}
+          </div>
+          <div className="ccai-dropdown-divider" />
+          <div className="ccai-dropdown-section">
+            <div className="ccai-dropdown-section-title">Right-side panels</div>
+            {PANEL_KEYS.map((key) => (
+              <label key={key} className="ccai-dropdown-item decidron-settings-check">
+                <input
+                  type="checkbox"
+                  checked={!!settings.panels[key]}
+                  onChange={() => togglePanel(key)}
+                />
+                <span className="ccai-dropdown-item-text">
+                  <span className="ccai-dropdown-item-name">{PANEL_LABELS[key]}</span>
+                </span>
+              </label>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

frontend/src/components/decidron/DecidronSimulator.js

@@ -14,7 +14,7 @@ import '../../styles/decidron.css';
 
 const DEFAULT_VALUE = '97';
 
-export default function DecidronSimulator() {
+export default function DecidronSimulator({ settings }) {
   const [network, setNetwork] = useState(null);
   const [commands, setCommands] = useState([]);
   const [stats, setStats] = useState(null);
@@ -129,6 +129,7 @@ export default function DecidronSimulator() {
   const sensors = network.nodes.filter((n) => n.type === 'sensor');
   const shownDiagram = selected ? selected.diagram : network.diagram;
   const shownVersion = selected ? selected.version : network.version;
+  const { panels, layoutMode } = settings;
 
   return (
     <div className="decidron-app">
@@ -147,7 +148,7 @@ export default function DecidronSimulator() {
               Sensors (blue) feed coupled Decidrons (purple) that drive
               actuators (green). Commands can modify this topology.
             </p>
-            <NetworkDiagram data={shownDiagram} />
+            <NetworkDiagram data={shownDiagram} layoutMode={layoutMode} />
           </div>
           <HistoryTimeline
             snapshots={history}
@@ -159,26 +160,30 @@ export default function DecidronSimulator() {
         </div>
 
         <div>
-          <SensorInputForm
-            sensors={sensors}
-            channel={channel}
-            value={value}
-            onChannelChange={setChannel}
-            onValueChange={setValue}
-            pending={pending}
-            onQueue={handleQueue}
-            onRun={handleRun}
-            running={running}
-          />
-          <CommandBuilder
-            commands={commands}
-            sensors={sensors}
-            nodes={network.nodes}
-            onCreate={handleCreate}
-            onDelete={handleDelete}
-          />
-          <ResultsPanel results={results} />
-          <StatsTable stats={stats} />
+          {panels.sensorInput && (
+            <SensorInputForm
+              sensors={sensors}
+              channel={channel}
+              value={value}
+              onChannelChange={setChannel}
+              onValueChange={setValue}
+              pending={pending}
+              onQueue={handleQueue}
+              onRun={handleRun}
+              running={running}
+            />
+          )}
+          {panels.commands && (
+            <CommandBuilder
+              commands={commands}
+              sensors={sensors}
+              nodes={network.nodes}
+              onCreate={handleCreate}
+              onDelete={handleDelete}
+            />
+          )}
+          {panels.results && <ResultsPanel results={results} />}
+          {panels.stats && <StatsTable stats={stats} />}
         </div>
       </div>
     </div>

frontend/src/components/decidron/NetworkDiagram.js

@@ -1,40 +1,83 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useMemo } from 'react';
 import { Network } from 'vis-network/standalone';
+import { LAYOUT_MODES } from '../../utils/settings';
 
-const OPTIONS = {
-  autoResize: true,
-  nodes: {
-    borderWidth: 2,
-    font: { color: '#ffffff', size: 14 },
-  },
-  edges: {
-    arrows: 'to',
-    color: { color: '#9aa3b2', highlight: '#6366F1' },
-    font: { size: 10, color: '#9aa3b2', strokeWidth: 0, align: 'middle' },
-    smooth: { type: 'cubicBezier', roundness: 0.4 },
-  },
-  groups: {
-    sensor: { shape: 'box', color: { background: '#3b82f6', border: '#1d4ed8' } },
-    decidron: { shape: 'hexagon', color: { background: '#8b5cf6', border: '#6d28d9' } },
-    actuator: { shape: 'triangle', color: { background: '#10b981', border: '#047857' } },
-  },
-  physics: {
-    stabilization: { iterations: 150 },
-    barnesHut: { springLength: 150, gravitationalConstant: -6000 },
-  },
-  interaction: { hover: true, tooltipDelay: 120 },
+/** Known node positions for explicit-coordinate mode (vis-network canvas coords). */
+const EXPLICIT_POSITIONS = {
+  temperature: { x: 0, y: -140 },
+  D1: { x: -120, y: 20 },
+  D2: { x: 120, y: 20 },
+  'actuator-1': { x: 0, y: 140 },
+  D3: { x: 220, y: 20 },
 };
 
-export default function NetworkDiagram({ data, height = 380 }) {
+function fallbackPosition(nodeId, index) {
+  const angle = (index * 2 * Math.PI) / 8;
+  return { x: Math.cos(angle) * 180, y: Math.sin(angle) * 120 };
+}
+
+function applyLayout(data, layoutMode) {
+  const base = data || { nodes: [], edges: [] };
+  const nodes = (base.nodes || []).map((node, index) => {
+    if (layoutMode !== LAYOUT_MODES.EXPLICIT) return { ...node };
+    const pos = EXPLICIT_POSITIONS[node.id] ?? fallbackPosition(node.id, index);
+    return { ...node, x: pos.x, y: pos.y, fixed: true };
+  });
+  return { nodes, edges: base.edges || [] };
+}
+
+function buildOptions(layoutMode) {
+  const options = {
+    autoResize: true,
+    nodes: {
+      borderWidth: 2,
+      font: { color: '#ffffff', size: 14 },
+    },
+    edges: {
+      arrows: 'to',
+      color: { color: '#9aa3b2', highlight: '#6366F1' },
+      font: { size: 10, color: '#9aa3b2', strokeWidth: 0, align: 'middle' },
+      smooth: { type: 'cubicBezier', roundness: 0.4 },
+    },
+    groups: {
+      sensor: { shape: 'box', color: { background: '#3b82f6', border: '#1d4ed8' } },
+      decidron: { shape: 'hexagon', color: { background: '#8b5cf6', border: '#6d28d9' } },
+      actuator: { shape: 'triangle', color: { background: '#10b981', border: '#047857' } },
+    },
+    interaction: { hover: true, tooltipDelay: 120 },
+  };
+
+  if (layoutMode === LAYOUT_MODES.EXPLICIT) {
+    options.physics = { enabled: false };
+  } else {
+    options.physics = {
+      stabilization: { iterations: 150 },
+      barnesHut: { springLength: 150, gravitationalConstant: -6000 },
+    };
+    if (layoutMode === LAYOUT_MODES.FIXED_SEED) {
+      options.layout = { randomSeed: 42 };
+    }
+    // RANDOM: no randomSeed — vis-network picks a new seed each build (default).
+  }
+
+  return options;
+}
+
+export default function NetworkDiagram({ data, layoutMode = LAYOUT_MODES.RANDOM, height = 380 }) {
   const containerRef = useRef(null);
   const networkRef = useRef(null);
 
+  const graphData = useMemo(
+    () => applyLayout(data, layoutMode),
+    [data, layoutMode],
+  );
+
   useEffect(() => {
     if (!containerRef.current) return undefined;
     networkRef.current = new Network(
       containerRef.current,
-      data || { nodes: [], edges: [] },
-      OPTIONS,
+      graphData,
+      buildOptions(layoutMode),
     );
     return () => {
       if (networkRef.current) {
@@ -42,7 +85,7 @@ export default function NetworkDiagram({ data, height = 380 }) {
         networkRef.current = null;
       }
     };
-  }, [data]);
+  }, [graphData, layoutMode]);
 
   return (
     <div

frontend/src/styles/decidron.css

@@ -182,3 +182,55 @@
   border-radius: 4px;
   font-size: 0.75rem;
 }
+
+/* Header settings menu */
+.decidron-settings-wrap .decidron-settings-trigger {
+  width: 36px;
+  height: 36px;
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.decidron-settings-panel {
+  width: 300px;
+}
+
+.decidron-settings-radio {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+  padding: 0.45rem 0.5rem;
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 0.82rem;
+  color: var(--text-secondary);
+}
+
+.decidron-settings-radio:hover {
+  background: var(--bg-tertiary);
+}
+
+.decidron-settings-radio input {
+  margin-top: 0.2rem;
+  flex-shrink: 0;
+}
+
+.decidron-settings-radio strong {
+  display: block;
+  color: var(--text-primary);
+  font-weight: 600;
+  font-size: 0.82rem;
+}
+
+.decidron-settings-hint {
+  display: block;
+  font-size: 0.72rem;
+  color: var(--text-tertiary);
+  margin-top: 0.1rem;
+}
+
+.decidron-settings-check {
+  cursor: pointer;
+}

frontend/src/utils/settings.js

@@ -0,0 +1,50 @@
+const SETTINGS_KEY = 'decidron-simulator-settings';
+
+export const LAYOUT_MODES = {
+  RANDOM: 'random',
+  FIXED_SEED: 'fixed-seed',
+  EXPLICIT: 'explicit',
+};
+
+/** Right-column panels in fixed top-to-bottom order. */
+export const PANEL_KEYS = ['sensorInput', 'commands', 'results', 'stats'];
+
+export const PANEL_LABELS = {
+  sensorInput: 'Sensor Input',
+  commands: 'Processing Commands',
+  results: 'Latest Run Results',
+  stats: 'Performance Statistics',
+};
+
+export const DEFAULT_SETTINGS = {
+  layoutMode: LAYOUT_MODES.RANDOM,
+  panels: {
+    sensorInput: true,
+    commands: true,
+    results: true,
+    stats: true,
+  },
+};
+
+export function loadSettings() {
+  try {
+    const raw = localStorage.getItem(SETTINGS_KEY);
+    if (!raw) return { ...DEFAULT_SETTINGS, panels: { ...DEFAULT_SETTINGS.panels } };
+    const parsed = JSON.parse(raw);
+    return {
+      layoutMode: Object.values(LAYOUT_MODES).includes(parsed.layoutMode)
+        ? parsed.layoutMode
+        : DEFAULT_SETTINGS.layoutMode,
+      panels: {
+        ...DEFAULT_SETTINGS.panels,
+        ...(parsed.panels || {}),
+      },
+    };
+  } catch {
+    return { ...DEFAULT_SETTINGS, panels: { ...DEFAULT_SETTINGS.panels } };
+  }
+}
+
+export function saveSettings(settings) {
+  localStorage.setItem(SETTINGS_KEY, JSON.stringify(settings));
+}