@@ -82,7 +105,7 @@ export default function SyncPanel() {
)}
{status &&
{status}
}
- {err &&
{err}
}
+ {err &&
{err}
}
);
}
diff --git a/brainsnn-r3f-app/src/components/TextAdventurePanel.jsx b/brainsnn-r3f-app/src/components/TextAdventurePanel.jsx
index 0717a14..47b7053 100644
--- a/brainsnn-r3f-app/src/components/TextAdventurePanel.jsx
+++ b/brainsnn-r3f-app/src/components/TextAdventurePanel.jsx
@@ -69,8 +69,8 @@ export default function TextAdventurePanel() {
style={{
padding: '12px 14px',
borderRadius: 8,
- borderLeft: '3px solid #dd6974',
- background: 'rgba(221,105,116,0.06)',
+ borderLeft: '3px solid var(--danger)',
+ background: 'color-mix(in srgb, var(--danger) 6%, transparent)',
}}
>
from {node.from}
diff --git a/brainsnn-r3f-app/src/components/TimeSeriesPanel.jsx b/brainsnn-r3f-app/src/components/TimeSeriesPanel.jsx
index ba92f1c..08411e9 100644
--- a/brainsnn-r3f-app/src/components/TimeSeriesPanel.jsx
+++ b/brainsnn-r3f-app/src/components/TimeSeriesPanel.jsx
@@ -116,15 +116,15 @@ export default function TimeSeriesPanel() {
key={e.idx}
style={{
padding: '8px 12px',
- borderLeft: '3px solid #dd6974',
- background: 'rgba(221,105,116,0.06)',
+ borderLeft: '3px solid var(--danger)',
+ background: 'color-mix(in srgb, var(--danger) 6%, transparent)',
borderRadius: 6,
marginTop: 6,
}}
>
{e.point.date}
-
+
+{Math.round(e.delta * 100)} pts spike
@@ -158,7 +158,7 @@ function Sparkline({ points }) {
cx={xs[i]}
cy={ys[i]}
r={p.pressure > 0.55 ? 3.2 : 2}
- fill={p.pressure > 0.55 ? '#dd6974' : '#5ad4ff'}
+ fill={p.pressure > 0.55 ? 'var(--danger)' : '#5ad4ff'}
/>
))}
diff --git a/brainsnn-r3f-app/src/components/ToastContainer.jsx b/brainsnn-r3f-app/src/components/ToastContainer.jsx
index f148074..d31c5b1 100644
--- a/brainsnn-r3f-app/src/components/ToastContainer.jsx
+++ b/brainsnn-r3f-app/src/components/ToastContainer.jsx
@@ -7,9 +7,17 @@ function Toast({ toast, onDismiss }) {
return () => clearTimeout(timer);
}, [toast, onDismiss]);
+ // Errors + warnings interrupt assistive-tech reading. Info /
+ // success are polite — they announce when the reader is idle.
+ const live = toast.type === 'error' || toast.type === 'warning' ? 'assertive' : 'polite';
return (
-
onDismiss(toast.id)}>
-
+ onDismiss(toast.id)}
+ >
+
{toast.type === 'success' ? '✓' : toast.type === 'error' ? '✕' : toast.type === 'warning' ? '⚠' : 'ℹ'}
{toast.message}
@@ -33,7 +41,7 @@ export default function ToastContainer() {
if (toasts.length === 0) return null;
return (
-
+
{toasts.map((t) => (
))}
diff --git a/brainsnn-r3f-app/src/components/ToneShifterPanel.jsx b/brainsnn-r3f-app/src/components/ToneShifterPanel.jsx
index e3c88ba..8e8d5d7 100644
--- a/brainsnn-r3f-app/src/components/ToneShifterPanel.jsx
+++ b/brainsnn-r3f-app/src/components/ToneShifterPanel.jsx
@@ -55,13 +55,13 @@ export default function ToneShifterPanel() {
style={{
padding: '10px 14px',
borderRadius: 8,
- borderLeft: '3px solid #dd6974',
- background: 'rgba(221,105,116,0.08)',
+ borderLeft: '3px solid var(--danger)',
+ background: 'color-mix(in srgb, var(--danger) 8%, transparent)',
}}
>
{result.style.label} drift
-
+
{Math.round(result.beforePressure * 100)}% → {Math.round(result.afterPressure * 100)}% · +{Math.round(result.increase * 100)} pts
@@ -80,7 +80,7 @@ export default function ToneShifterPanel() {
)}
- {result?.error &&
{result.error}
}
+ {result?.error &&
{result.error}
}
);
}
diff --git a/brainsnn-r3f-app/src/components/WeeklyRecapPanel.jsx b/brainsnn-r3f-app/src/components/WeeklyRecapPanel.jsx
index f089c8e..9b23d5e 100644
--- a/brainsnn-r3f-app/src/components/WeeklyRecapPanel.jsx
+++ b/brainsnn-r3f-app/src/components/WeeklyRecapPanel.jsx
@@ -48,7 +48,7 @@ export default function WeeklyRecapPanel() {
if (!recap) return null;
- const deltaColor = recap.immunityDelta > 0 ? '#5ee69a' : recap.immunityDelta < 0 ? '#dd6974' : '#fdab43';
+ const deltaColor = recap.immunityDelta > 0 ? 'var(--severity-ok)' : recap.immunityDelta < 0 ? 'var(--danger)' : 'var(--severity-mid)';
return (
diff --git a/brainsnn-r3f-app/src/components/brain/NeuralFlowGrid.jsx b/brainsnn-r3f-app/src/components/brain/NeuralFlowGrid.jsx
index 4c429fe..878c602 100644
--- a/brainsnn-r3f-app/src/components/brain/NeuralFlowGrid.jsx
+++ b/brainsnn-r3f-app/src/components/brain/NeuralFlowGrid.jsx
@@ -4,12 +4,14 @@ import { LINKS, POSITIONS, REGION_INFO } from '../../data/network';
import { findCrossLinks, getEdgeActivity, getCrossLinkActivity } from './flowGridUtils';
import FlowTube from './FlowTube';
import PulseWave from './PulseWave';
+import { useThreeTokens } from '../../utils/threeTokens';
const PULSE_THRESHOLD = 0.6;
const MAX_PULSES = 3;
export default function NeuralFlowGrid({ regions, weights, quality }) {
const [pulses, setPulses] = useState([]);
+ const tokens = useThreeTokens();
const prevRegionsRef = useRef({});
const pulseIdRef = useRef(0);
@@ -74,7 +76,7 @@ export default function NeuralFlowGrid({ regions, weights, quality }) {
const key = `${fromId}\u2192${toId}`;
const edgeActivity = getEdgeActivity(fromId, toId, regions, weights);
const w = weights[key] ?? 0.2;
- const color = REGION_INFO[fromId]?.color || '#4fa8b3';
+ const color = REGION_INFO[fromId]?.color || tokens.accent;
const colorArr = hexToRgbNorm(color);
const isPulsing = pulsingRegions.has(fromId);
diff --git a/brainsnn-r3f-app/src/components/brain/PulseWave.jsx b/brainsnn-r3f-app/src/components/brain/PulseWave.jsx
index c3a2bb6..75b4e92 100644
--- a/brainsnn-r3f-app/src/components/brain/PulseWave.jsx
+++ b/brainsnn-r3f-app/src/components/brain/PulseWave.jsx
@@ -2,12 +2,14 @@ import React, { useRef } from 'react';
import { useFrame } from '@react-three/fiber';
import * as THREE from 'three';
import { POSITIONS, REGION_INFO } from '../../data/network';
+import { useThreeTokens } from '../../utils/threeTokens';
export default function PulseWave({ regionId, onComplete }) {
const meshRef = useRef();
const progressRef = useRef(0);
+ const tokens = useThreeTokens();
const position = POSITIONS[regionId];
- const color = REGION_INFO[regionId]?.color || '#4fa8b3';
+ const color = REGION_INFO[regionId]?.color || tokens.accent;
useFrame((_, delta) => {
if (!meshRef.current) return;
diff --git a/brainsnn-r3f-app/src/main.jsx b/brainsnn-r3f-app/src/main.jsx
index e341f67..6f7a02f 100644
--- a/brainsnn-r3f-app/src/main.jsx
+++ b/brainsnn-r3f-app/src/main.jsx
@@ -1,10 +1,27 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
-import App from './App';
+import NewApp from './shell/NewApp';
+import './styles/tokens.css';
import './styles/global.css';
+import './styles/shell.css';
+
+// Legacy shell retired. The Claude-design AppShell (src/shell/NewApp.jsx)
+// is now the only renderer. `?shell=old` is honored as a one-release
+// notice that the legacy code is gone — toasts the user with a hint
+// and then continues into the new shell.
+if (typeof window !== 'undefined') {
+ try {
+ const url = new URLSearchParams(window.location.search);
+ if (url.get('shell') === 'old' || localStorage.getItem('brainsnn_shell_pref') === 'old') {
+ console.info('[brainsnn] legacy shell has been removed; rendering the new AppShell.');
+ // Clear the stale preference so subsequent loads don't keep nagging.
+ try { localStorage.removeItem('brainsnn_shell_pref'); } catch { /* noop */ }
+ }
+ } catch { /* noop */ }
+}
ReactDOM.createRoot(document.getElementById('root')).render(
-
);
diff --git a/brainsnn-r3f-app/src/shell/AppShell.jsx b/brainsnn-r3f-app/src/shell/AppShell.jsx
new file mode 100644
index 0000000..8d42bb0
--- /dev/null
+++ b/brainsnn-r3f-app/src/shell/AppShell.jsx
@@ -0,0 +1,218 @@
+import React, { useEffect, useRef, useState } from 'react';
+import Topbar from './Topbar';
+import WorkspaceTabs, { WORKSPACES } from './WorkspaceTabs';
+import BrainViewport from './BrainViewport';
+import Sidebar from './Sidebar';
+import Composer from './Composer';
+import HomeWorkspace from './workspaces/HomeWorkspace';
+import AnalyzeWorkspace from './workspaces/AnalyzeWorkspace';
+import DefendWorkspace from './workspaces/DefendWorkspace';
+import BrainWorkspace from './workspaces/BrainWorkspace';
+import KnowledgeWorkspace from './workspaces/KnowledgeWorkspace';
+import TrainingWorkspace from './workspaces/TrainingWorkspace';
+import ConnectWorkspace from './workspaces/ConnectWorkspace';
+import { bus } from './bus';
+
+const WORKSPACE_COMPONENT = {
+ home: HomeWorkspace,
+ analyze: AnalyzeWorkspace,
+ defend: DefendWorkspace,
+ brain: BrainWorkspace,
+ knowledge: KnowledgeWorkspace,
+ training: TrainingWorkspace,
+ connect: ConnectWorkspace
+};
+
+const VALID = new Set(Object.keys(WORKSPACE_COMPONENT));
+const STORAGE_KEY = 'brainsnn_shell_workspace';
+
+// Deep-link → workspace. Each URL param is consumed by a panel that
+// lives in exactly one workspace; if the user lands on a different
+// workspace, only one workspace component mounts at a time and the
+// target panel never runs its rehydration logic.
+const PARAM_WORKSPACE = {
+ scan: 'defend', // CognitiveFirewallPanel
+ 'scan-url': 'defend',
+ r: 'defend', // reaction share
+ i: 'defend', // ImmunityPanel
+ a: 'defend', // AutopsyPanel
+ q: 'training', // QuizPanel
+ d: 'training', // DailyChallengePanel
+ x: 'training', // ComposerPanel / counter-draft
+ t: 'analyze', // TimeSeriesPanel
+ n: 'connect', // InboxPanel
+ v: 'connect', // DiffPanel
+ room: 'connect' // SessionRoomsPanel
+ // #state= applies brain state globally; doesn't dictate a workspace.
+};
+
+function initialWorkspace() {
+ if (typeof window === 'undefined') return 'home';
+ try {
+ const params = new URLSearchParams(window.location.search);
+ // Explicit ?w= wins (lets the user override deep-link routing).
+ const explicit = params.get('w');
+ if (explicit && VALID.has(explicit)) return explicit;
+ // Otherwise resolve the first matching deep-link param.
+ for (const [param, ws] of Object.entries(PARAM_WORKSPACE)) {
+ if (params.has(param)) return ws;
+ }
+ const stored = localStorage.getItem(STORAGE_KEY);
+ if (stored && VALID.has(stored)) return stored;
+ } catch { /* noop */ }
+ return 'home';
+}
+
+/**
+ * AppShell — Claude-design workspace shell.
+ *
+ * Layout:
+ * full-width
+ *
+ *
+ *
+ *
+ *
+ *
+ * The brain viewport is mounted once and never unmounted; tab navigation
+ * only swaps the workspace body below it.
+ */
+export default function AppShell({ session, modeLabel }) {
+ const [workspace, setWorkspace] = useState(initialWorkspace);
+
+ // Persist + URL-sync on workspace change.
+ useEffect(() => {
+ try { localStorage.setItem(STORAGE_KEY, workspace); } catch { /* noop */ }
+ try {
+ const url = new URL(window.location.href);
+ url.searchParams.set('w', workspace);
+ window.history.replaceState(null, '', url.toString());
+ } catch { /* noop */ }
+ }, [workspace]);
+
+ // Listen for cross-component workspace navigation (palette, hotkeys,
+ // onboarding, flashLayer).
+ useEffect(() => bus.on('shell:goto', ({ workspace: w }) => {
+ if (w && VALID.has(w)) setWorkspace(w);
+ }), []);
+
+ // g+letter chord listener (gh ga gd gb gk gt gc).
+ useEffect(() => {
+ let pending = false;
+ let timer = null;
+ const onKey = (e) => {
+ if (e.target?.matches?.('input, textarea, [contenteditable]')) return;
+ if (e.metaKey || e.ctrlKey || e.altKey) return;
+ if (e.key === 'g') {
+ pending = true;
+ clearTimeout(timer);
+ timer = setTimeout(() => { pending = false; }, 900);
+ return;
+ }
+ if (pending) {
+ pending = false;
+ clearTimeout(timer);
+ const match = WORKSPACES.find((w) => w.chord[1] === e.key.toLowerCase());
+ if (match) {
+ e.preventDefault();
+ setWorkspace(match.id);
+ }
+ }
+ };
+ window.addEventListener('keydown', onKey);
+ return () => window.removeEventListener('keydown', onKey);
+ }, []);
+
+ const activeMeta = WORKSPACES.find((w) => w.id === workspace) || WORKSPACES[0];
+ const promoted = workspace === 'brain';
+ const workspaceHostRef = useRef(null);
+
+ // Keep-alive: once a workspace is visited, keep it mounted so its
+ // panels retain their internal state (textareas, selected tabs,
+ // scroll, embeddings warmup, etc). Tab switch toggles visibility
+ // via CSS. Trades a small memory footprint (~50 KB per workspace)
+ // for the user expectation that tabs preserve work-in-progress.
+ // Lazy-loading is unaffected — each workspace's React.lazy chunk
+ // only fetches on first activation.
+ const [visited, setVisited] = useState(() => new Set([workspace]));
+ useEffect(() => {
+ setVisited((prev) => prev.has(workspace) ? prev : new Set([...prev, workspace]));
+ }, [workspace]);
+
+ // Move focus to the active workspace heading on every change.
+ // Skips initial mount.
+ const didMount = useRef(false);
+ useEffect(() => {
+ if (!didMount.current) { didMount.current = true; return; }
+ const host = workspaceHostRef.current;
+ if (!host) return;
+ // Scope the heading lookup to the currently-visible workspace
+ // (others are display:none but still in the DOM).
+ const heading = host.querySelector(`[data-workspace="${workspace}"] .shell-workspace-header h1`);
+ if (heading) {
+ heading.setAttribute('tabindex', '-1');
+ heading.focus({ preventScroll: false });
+ }
+ }, [workspace]);
+
+ return (
+
+
Skip to workspace content
+
+
+
+
+
+
+
+
+
+ {Array.from(visited).map((ws) => {
+ const Workspace = WORKSPACE_COMPONENT[ws] || HomeWorkspace;
+ const isActive = ws === workspace;
+ return (
+
+
+ );
+ })}
+
+
+
+
+ Tick {state.tick}
+ Mean {stats.mean.toFixed(3)}
+ Plasticity {stats.plasticity.toFixed(3)}
+ {state.selected}
+ Q · {quality}
+ {modeLabel}
+ {promoted && state.selected && REGION_INFO[state.selected] && (
+ {REGION_INFO[state.selected].name}
+ )}
+
+
+
+
+
+ );
+}
diff --git a/brainsnn-r3f-app/src/shell/Composer.jsx b/brainsnn-r3f-app/src/shell/Composer.jsx
new file mode 100644
index 0000000..b97bcc3
--- /dev/null
+++ b/brainsnn-r3f-app/src/shell/Composer.jsx
@@ -0,0 +1,68 @@
+import React, { useState } from 'react';
+import { bus } from './bus';
+
+/**
+ * Composer — persistent top input. Paste text or drop a file; the active
+ * workspace decides how to consume the payload. Emits `shell:compose`
+ * with { text, mode } when the user submits; workspaces subscribe.
+ *
+ * Designed as a single-line ambient input — for the heavy stuff users
+ * still go into the relevant panel's own textarea.
+ *
+ * Takes no props so re-renders are entirely state-internal — memoize
+ * the export so AppShell's simulation-tick re-renders skip past it.
+ */
+function ComposerImpl() {
+ const [text, setText] = useState('');
+ const [mode, setMode] = useState('scan');
+
+ // Each mode routes to the workspace that knows how to handle it.
+ const MODE_WORKSPACE = {
+ scan: 'defend',
+ autopsy: 'defend',
+ diff: 'connect',
+ rag: 'knowledge'
+ };
+
+ const submit = () => {
+ const trimmed = text.trim();
+ if (!trimmed) return;
+ const ws = MODE_WORKSPACE[mode];
+ if (ws) bus.emit('shell:goto', { workspace: ws });
+ // requestAnimationFrame so the target workspace mounts before
+ // the compose event arrives at its subscribers.
+ requestAnimationFrame(() => bus.emit('shell:compose', { text: trimmed, mode }));
+ // Don't clear — let the user iterate.
+ };
+
+ const onKey = (e) => {
+ if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
+ e.preventDefault();
+ submit();
+ }
+ };
+
+ return (
+
+ setMode(e.target.value)} aria-label="Composer mode">
+ Scan
+ Autopsy
+ Diff
+ Ask
+
+
+ Send
+
+
+ );
+}
+
+export default React.memo(ComposerImpl);
diff --git a/brainsnn-r3f-app/src/shell/NewApp.jsx b/brainsnn-r3f-app/src/shell/NewApp.jsx
new file mode 100644
index 0000000..8e6bcf8
--- /dev/null
+++ b/brainsnn-r3f-app/src/shell/NewApp.jsx
@@ -0,0 +1,569 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import AppShell from './AppShell';
+import ToastContainer from '../components/ToastContainer';
+import KeyboardHelp from '../components/KeyboardHelp';
+import OnboardingWalkthrough from '../components/OnboardingWalkthrough';
+import CommandPalette from '../components/CommandPalette';
+import ErrorBoundary from '../components/ErrorBoundary';
+import UpdateBanner from './UpdateBanner';
+
+import { decodeStateFromHash } from '../components/SharePanel';
+import { decodeReaction } from '../utils/reactionCard';
+import {
+ mapTRIBEToRegions,
+ setActiveRules,
+ resetActiveRules,
+ deserializeRules
+} from '../utils/cognitiveFirewall';
+import { registerBridgeContext, logToolCall } from '../utils/mcpBridge';
+import { recordEvent as recordImmunity, IMMUNITY_EVENTS } from '../utils/immunityScore';
+import {
+ applyScenario,
+ createInitialState,
+ resetState,
+ simulateStep
+} from '../utils/sim';
+import {
+ applyMockEEG,
+ connectMuseEEG,
+ connectSerialEEG,
+ mapEEGToRegions,
+ parseMusePacket
+} from '../utils/eeg';
+import { startCanvasRecording } from '../utils/recording';
+import { listSnapshots, loadSnapshot, saveSnapshot } from '../utils/snapshots';
+import {
+ registerDreamProviders,
+ startDreamMonitor,
+ stopDreamMonitor,
+ markActivity
+} from '../utils/dreamMode';
+import { mapRagToRegions } from '../utils/neuroRag';
+import { mapMultimodalToRegions } from '../utils/multimodalRag';
+import { mapFusedToRegions } from '../utils/vectorGraphFusion';
+import { applyAffectsToBrainState } from '../utils/affectiveDecoder';
+import { applyNTBath } from '../utils/neurochemistry';
+import { registerShortcuts } from '../utils/shortcuts';
+import { trendDirection } from '../utils/analytics';
+import { toastSuccess, toastInfo, toastWarning } from '../utils/toastStore';
+import { registerServiceWorker } from '../utils/pwa';
+import { registerTheme } from '../utils/theme';
+
+/**
+ * NewApp — Claude-design AppShell wrapper.
+ *
+ * Mirrors all state, refs, effects, and onApply* callbacks from
+ * legacy App.jsx so the new shell shares identical behavior. Both
+ * shells must NEVER mount simultaneously (main.jsx picks one via
+ * ?shell=new) — they'd double-register MCP bridge + dream monitor.
+ */
+export default function NewApp() {
+ const [state, setState] = useState(() => {
+ const shared = decodeStateFromHash();
+ if (shared) {
+ const initial = createInitialState();
+ return {
+ ...initial,
+ regions: { ...initial.regions, ...shared.regions },
+ weights: { ...initial.weights, ...(shared.weights || {}) },
+ scenario: shared.scenario || initial.scenario,
+ selected: shared.selected || initial.selected,
+ tick: shared.tick || 0
+ };
+ }
+ return createInitialState();
+ });
+
+ const [mode, setMode] = useState('simulation');
+ const [eegStatus, setEegStatus] = useState({ connected: false, label: 'No device connected' });
+ const [timelineIndex, setTimelineIndex] = useState(0);
+ const [isRecording, setIsRecording] = useState(false);
+ const [exportStatus, setExportStatus] = useState('idle');
+ const [exportProgress, setExportProgress] = useState(0);
+ const [quality, setQuality] = useState('high');
+ const [gifOptions, setGifOptions] = useState({ trimStart: 0, trimDuration: 2.5, fps: 12, width: 720 });
+ const [showKbHelp, setShowKbHelp] = useState(false);
+ const [firewallResult, setFirewallResult] = useState(null);
+ const [knowledgeMode, setKnowledgeMode] = useState(false);
+ const [affectOverride, setAffectOverride] = useState(null);
+ const [lastAffectDecode, setLastAffectDecode] = useState(null);
+
+ const [incomingImmunity] = useState(() => {
+ try { return new URLSearchParams(window.location.search).get('i') || null; } catch { return null; }
+ });
+ const [incomingAutopsy] = useState(() => {
+ try { return new URLSearchParams(window.location.search).get('a') || null; } catch { return null; }
+ });
+ const [incomingDaily] = useState(() => {
+ try { return new URLSearchParams(window.location.search).get('d') || null; } catch { return null; }
+ });
+ const [initialFirewallScan] = useState(() => {
+ try {
+ const hash = new URLSearchParams(window.location.search).get('r');
+ if (!hash) return null;
+ const reaction = decodeReaction(hash);
+ if (!reaction || !reaction.text) return null;
+ return {
+ text: reaction.text,
+ result: {
+ emotionalActivation: reaction.emotionalActivation,
+ cognitiveSuppression: reaction.cognitiveSuppression,
+ manipulationPressure: reaction.manipulationPressure,
+ trustErosion: reaction.trustErosion,
+ evidence: [],
+ confidence: 'shared',
+ recommendedAction: 'Rehydrated from shared reaction link.',
+ source: 'shared-link'
+ },
+ autoApply: true
+ };
+ } catch { return null; }
+ });
+
+ const recorderRef = useRef(null);
+ const historyRef = useRef([]);
+ const stateRef = useRef(state);
+ stateRef.current = state;
+
+ // History tracking for analytics trends.
+ useEffect(() => {
+ historyRef.current.push({ regions: { ...state.regions } });
+ if (historyRef.current.length > 60) historyRef.current.shift();
+ }, [state.tick]);
+
+ // PWA + theme on mount.
+ useEffect(() => { registerServiceWorker(); registerTheme(); }, []);
+
+ // MCP bridge context.
+ useEffect(() => {
+ registerBridgeContext({
+ getState: () => stateRef.current,
+ setState,
+ getHistory: () => historyRef.current,
+ applyScenarioKey: (key) => setState((s) => applyScenario(s, key)),
+ triggerBurst: () => setState((s) => ({ ...s, burst: 20, scenario: 'MCP Sensory Burst' })),
+ resetBrain: () => setState(resetState()),
+ onToolCall: (entry) => logToolCall(entry)
+ });
+ }, []);
+
+ // Dream mode.
+ useEffect(() => {
+ registerDreamProviders({
+ getSnapshots: () => listSnapshots().slice(0, 10).map((s) => loadSnapshot(s.id)).filter(Boolean),
+ setState,
+ narrate: (text) => toastInfo(text)
+ });
+ startDreamMonitor();
+ return () => stopDreamMonitor();
+ }, []);
+
+ const trends = useMemo(() => {
+ const t = {};
+ for (const key of Object.keys(state.regions)) {
+ const values = historyRef.current.map((h) => h.regions?.[key] ?? 0);
+ t[key] = trendDirection(values);
+ }
+ return t;
+ }, [state.tick, state.regions]);
+
+ // Simulation tick.
+ useEffect(() => {
+ if (mode !== 'simulation') return;
+ const id = setInterval(() => setState((prev) => simulateStep(prev)), 180);
+ return () => clearInterval(id);
+ }, [mode]);
+
+ useEffect(() => {
+ setTimelineIndex(Math.max(0, state.history.length - 1));
+ }, [state.history.length]);
+
+ const timelineFrame = state.history[timelineIndex] ?? state.history[state.history.length - 1];
+
+ // Keyboard shortcuts.
+ useEffect(() => {
+ const QUALITY_CYCLE = ['low', 'high', 'ultra'];
+ return registerShortcuts({
+ toggleRun: () => setState((s) => ({ ...s, running: !s.running })),
+ burst: () => { setState((s) => ({ ...s, burst: 20, scenario: 'Sensory Burst' })); toastInfo('Sensory burst triggered'); },
+ reset: () => { setState(resetState()); setMode('simulation'); toastInfo('Brain state reset'); },
+ modeSimulation: () => { setMode('simulation'); toastInfo('Switched to Simulation mode'); },
+ modeTribe: () => { setMode('tribe'); toastInfo('Switched to TRIBE v2 mode'); },
+ modeEeg: () => { setMode('eeg'); toastInfo('Switched to EEG mode'); },
+ snapshot: () => { saveSnapshot(state); toastSuccess('Snapshot saved'); },
+ record: () => {
+ const canvas = document.querySelector('canvas');
+ if (!canvas) return;
+ if (!isRecording) {
+ try {
+ recorderRef.current = startCanvasRecording(canvas, { onStatus: setExportStatus, onProgress: setExportProgress });
+ setIsRecording(true);
+ toastInfo('Recording started');
+ } catch (err) { setExportStatus(err.message); }
+ } else if (recorderRef.current) {
+ recorderRef.current.stop();
+ recorderRef.current = null;
+ setIsRecording(false);
+ setExportStatus('WebM ready');
+ setExportProgress(100);
+ toastSuccess('Recording saved');
+ }
+ },
+ cycleQuality: () => {
+ setQuality((prev) => {
+ const idx = QUALITY_CYCLE.indexOf(prev);
+ const next = QUALITY_CYCLE[(idx + 1) % QUALITY_CYCLE.length];
+ toastInfo(`Quality: ${next}`);
+ return next;
+ });
+ },
+ showHelp: () => setShowKbHelp(true)
+ });
+ }, [state, isRecording]);
+
+ // ---------- handlers ----------
+ const applyTribeFrame = useCallback((frame) => {
+ if (!frame?.regions) return;
+ setState((prev) => {
+ const regions = { ...prev.regions, ...frame.regions };
+ const mean = Object.values(regions).reduce((a, v) => a + v, 0) / Object.keys(regions).length;
+ const plasticity = Object.values(prev.weights).reduce((a, v) => a + v, 0) / Object.keys(prev.weights).length;
+ return {
+ ...prev,
+ regions,
+ tick: prev.tick + 1,
+ scenario: frame.scenario || 'TRIBE v2',
+ history: [...prev.history.slice(-39), { mean, plasticity }],
+ mean,
+ plasticity
+ };
+ });
+ }, []);
+
+ const onSelectRegion = useCallback((id) => {
+ setState((s) => ({ ...s, selected: id || s.selected }));
+ }, []);
+
+ const onApplyFirewall = useCallback((result) => {
+ setFirewallResult(result);
+ setState((s) => mapTRIBEToRegions(s, result));
+ recordImmunity(IMMUNITY_EVENTS.FIREWALL_SCAN, {
+ pressure: result.manipulationPressure,
+ confidence: result.confidence
+ });
+ toastWarning(`Firewall: ${result.recommendedAction.slice(0, 60)}...`);
+ }, []);
+
+ const onApplyGemma = useCallback((result) => {
+ setFirewallResult(result);
+ setState((s) => mapTRIBEToRegions(s, result));
+ recordImmunity(IMMUNITY_EVENTS.GEMMA_SCAN, { pressure: result.manipulationPressure });
+ toastInfo('Gemma 4 analysis applied to brain');
+ }, []);
+
+ const onApplyGemini = useCallback((result) => {
+ setFirewallResult(result);
+ setState((s) => mapTRIBEToRegions(s, result));
+ recordImmunity(IMMUNITY_EVENTS.GEMMA_SCAN, { pressure: result.manipulationPressure });
+ toastInfo('Gemini analysis applied to brain');
+ }, []);
+
+ const onRestoreSnapshot = useCallback((snap) => {
+ setState((prev) => ({
+ ...prev,
+ regions: { ...prev.regions, ...snap.regions },
+ weights: { ...prev.weights, ...snap.weights },
+ selected: snap.selected || prev.selected,
+ scenario: `Restored: ${snap.name}`,
+ tick: prev.tick + 1
+ }));
+ recordImmunity(IMMUNITY_EVENTS.SNAPSHOT_SAVED, { name: snap.name });
+ toastSuccess(`Restored: ${snap.name}`);
+ }, []);
+
+ const onApplyKnowledge = useCallback((kbState) => {
+ setState((prev) => ({
+ ...prev,
+ regions: { ...prev.regions, ...kbState.regions },
+ weights: { ...prev.weights, ...kbState.weights },
+ scenario: kbState.scenario || 'Knowledge Brain',
+ tick: prev.tick + 1
+ }));
+ setKnowledgeMode(true);
+ recordImmunity(IMMUNITY_EVENTS.KNOWLEDGE_SCANNED, {});
+ toastSuccess('Knowledge map applied — 3D brain now shows knowledge domains');
+ }, []);
+
+ const onApplyCodeBrain = useCallback((payload) => {
+ setState((prev) => ({
+ ...prev,
+ regions: { ...prev.regions, ...payload.regions },
+ scenario: payload.scenario,
+ tick: prev.tick + 1
+ }));
+ recordImmunity(IMMUNITY_EVENTS.CODE_ANALYZED, {});
+ toastSuccess('Code communities mapped onto brain');
+ }, []);
+
+ const onApplyConversation = useCallback((payload) => {
+ setState((prev) => ({
+ ...prev,
+ regions: { ...prev.regions, ...payload.regions },
+ scenario: payload.scenario,
+ tick: prev.tick + 1
+ }));
+ recordImmunity(IMMUNITY_EVENTS.CONVERSATION_ANALYZED, {
+ pressureAvg: payload.pressureAvg,
+ turns: payload.turns
+ });
+ toastSuccess('Conversation final state applied to brain');
+ }, []);
+
+ const onApplyRag = useCallback((ragResult) => {
+ markActivity();
+ setState((prev) => mapRagToRegions(prev, ragResult));
+ recordImmunity(IMMUNITY_EVENTS.KNOWLEDGE_SCANNED, {
+ name: `RAG: ${ragResult.results.length} hits · ${ragResult.mode}`
+ });
+ toastSuccess(`Retrieved ${ragResult.results.length} chunks · ${ragResult.mode}`);
+ }, []);
+
+ const onApplyMultimodalRag = useCallback((mmResult) => {
+ markActivity();
+ setState((prev) => mapMultimodalToRegions(prev, mmResult));
+ const histLabel = Object.entries(mmResult.byModality || {}).map(([k, v]) => `${k}:${v}`).join(' ');
+ recordImmunity(IMMUNITY_EVENTS.KNOWLEDGE_SCANNED, {
+ name: `Multimodal RAG: ${mmResult.results.length} hits · ${histLabel}`
+ });
+ toastSuccess(`Retrieved ${mmResult.results.length} items · ${mmResult.mode}`);
+ }, []);
+
+ const onApplyFusedRag = useCallback((fusedResult) => {
+ markActivity();
+ setState((prev) => mapFusedToRegions(prev, fusedResult));
+ const stats = fusedResult.fusionStats || {};
+ recordImmunity(IMMUNITY_EVENTS.KNOWLEDGE_SCANNED, {
+ name: `Fused RAG: ${fusedResult.results.length} hits · ${stats.siblingPulls || 0} siblings`
+ });
+ toastSuccess(`Fused ${fusedResult.results.length} items · ${fusedResult.mode}`);
+ }, []);
+
+ const onApplyAffect = useCallback((map) => {
+ markActivity();
+ setAffectOverride(map);
+ if (map) toastSuccess(`Affect colors applied to ${Object.keys(map).length} regions`);
+ else toastInfo('Affect colors cleared');
+ }, []);
+
+ const onApplyAffectActivation = useCallback((decoded) => {
+ markActivity();
+ setLastAffectDecode(decoded);
+ setState((prev) => applyAffectsToBrainState(prev, decoded));
+ recordImmunity(IMMUNITY_EVENTS.AFFECT_DECODED, {
+ name: `Affects: ${decoded.dominant.map((d) => d.label).join(', ') || 'neutral'}`
+ });
+ toastInfo('Affect activation nudged into brain state');
+ }, []);
+
+ const onApplyNT = useCallback((levels, opts) => {
+ markActivity();
+ setState((prev) => applyNTBath(prev, levels, opts));
+ toastSuccess(`Applied ${opts?.label ?? 'NT bath'} to brain`);
+ }, []);
+
+ const onPromoteEvolve = useCallback((node) => {
+ markActivity();
+ if (!node?.ruleSet) {
+ resetActiveRules();
+ toastInfo('Firewall reset to default rules');
+ return;
+ }
+ const rules = deserializeRules(node.ruleSet);
+ setActiveRules(rules);
+ const f1 = node.results?.summary?.thresholds?.[0.3]?.f1 ?? 0;
+ recordImmunity(IMMUNITY_EVENTS.KNOWLEDGE_SCANNED, { name: `Evolve promoted: F1 ${f1.toFixed(3)}` });
+ toastSuccess(`Evolved firewall promoted (F1 ${f1.toFixed(3)})`);
+ }, []);
+
+ const onPromoteAttack = useCallback((node, category) => {
+ markActivity();
+ if (!node) {
+ toastInfo('Red team corpus reset to defaults');
+ return;
+ }
+ const evasion = ((1 - (node.detection || 0)) * 100).toFixed(0);
+ recordImmunity(IMMUNITY_EVENTS.KNOWLEDGE_SCANNED, { name: `Attack promoted (${category}): ${evasion}% evasion` });
+ toastSuccess(`Evolved attack added to "${category}" — ${evasion}% evasion`);
+ }, []);
+
+ const onApplyPluginResults = useCallback((combined) => {
+ const mapped = {
+ emotionalActivation: combined.negativity ?? combined.emotionalActivation ?? 0,
+ cognitiveSuppression: combined.complexity ?? combined.cognitiveSuppression ?? 0,
+ manipulationPressure: 1 - (combined.credibility ?? 0.5),
+ trustErosion: combined.negativity ?? combined.trustErosion ?? 0
+ };
+ setState((s) => mapTRIBEToRegions(s, mapped));
+ toastInfo('Plugin analysis applied to brain');
+ }, []);
+
+ const onRemoteState = useCallback((remote) => {
+ if (remote?.regions) {
+ setState((prev) => ({
+ ...prev,
+ regions: { ...prev.regions, ...remote.regions },
+ scenario: remote.scenario || 'Remote Sync',
+ tick: prev.tick + 1
+ }));
+ }
+ }, []);
+
+ // Controls bar callbacks bundle.
+ const controls = useMemo(() => ({
+ onSetMode: setMode,
+ onSetQuality: setQuality,
+ onToggleRun: () => { markActivity(); setState((s) => ({ ...s, running: !s.running })); },
+ onBurst: () => { markActivity(); setState((s) => ({ ...s, burst: 20, scenario: 'Sensory Burst' })); },
+ onReset: () => { markActivity(); setState(resetState()); setMode('simulation'); },
+ onScenario: (key) => { markActivity(); setState((s) => applyScenario(s, key)); setMode('simulation'); },
+ onToggleRecording: () => {
+ const canvas = document.querySelector('canvas');
+ if (!canvas) return;
+ if (!isRecording) {
+ try {
+ recorderRef.current = startCanvasRecording(canvas, { onStatus: setExportStatus, onProgress: setExportProgress });
+ setIsRecording(true);
+ } catch (err) { setExportStatus(err.message); }
+ } else if (recorderRef.current) {
+ recorderRef.current.stop();
+ recorderRef.current = null;
+ setIsRecording(false);
+ setExportStatus('WebM ready');
+ setExportProgress(100);
+ }
+ },
+ onExportGif: async () => {
+ const canvas = document.querySelector('canvas');
+ if (!canvas) return;
+ try {
+ if (!recorderRef.current) {
+ recorderRef.current = startCanvasRecording(canvas, { onStatus: setExportStatus, onProgress: setExportProgress });
+ setIsRecording(true);
+ setTimeout(async () => {
+ if (recorderRef.current) {
+ await recorderRef.current.convertToGif(gifOptions);
+ recorderRef.current = null;
+ setIsRecording(false);
+ }
+ }, Math.max(1200, gifOptions.trimDuration * 1000));
+ } else {
+ await recorderRef.current.convertToGif(gifOptions);
+ recorderRef.current = null;
+ setIsRecording(false);
+ }
+ } catch (err) { setExportStatus(err.message); }
+ }
+ }), [isRecording, gifOptions]);
+
+ // Demo tiles play-through.
+ const onDemo = useCallback(({ text, result }) => {
+ setFirewallResult(result);
+ setState((s) => mapTRIBEToRegions(s, result));
+ recordImmunity(IMMUNITY_EVENTS.FIREWALL_SCAN, {
+ pressure: result.manipulationPressure,
+ confidence: result.confidence
+ });
+ toastInfo('Demo scan applied — watch the brain react');
+ }, []);
+
+ // EEG handlers.
+ const onConnectMuse = useCallback(async () => {
+ try {
+ const result = await connectMuseEEG();
+ setEegStatus({ connected: true, label: `Connected via Bluetooth: ${result.deviceName}` });
+ setMode('eeg');
+ const mockPacket = new DataView(new Uint8Array([1, 20, 0, 120, 0, 90, 0, 60]).buffer);
+ const parsed = parseMusePacket(mockPacket);
+ setState((s) => mapEEGToRegions(s, parsed));
+ toastSuccess('Muse EEG connected');
+ } catch (err) {
+ setEegStatus({ connected: false, label: err.message });
+ toastWarning('EEG connection failed');
+ }
+ }, []);
+
+ const onConnectSerial = useCallback(async () => {
+ try {
+ await connectSerialEEG();
+ setEegStatus({ connected: true, label: 'Serial EEG bridge connected' });
+ setMode('eeg');
+ toastSuccess('Serial EEG connected');
+ } catch (err) {
+ setEegStatus({ connected: false, label: err.message });
+ }
+ }, []);
+
+ const onInjectMockEeg = useCallback(() => {
+ setState((s) => applyMockEEG(s));
+ setEegStatus({ connected: true, label: 'Mock EEG injected into THL/PFC/HPC' });
+ setMode('eeg');
+ toastInfo('Mock EEG data injected');
+ }, []);
+
+ const onGifChange = useCallback((key, value) => {
+ setGifOptions((prev) => ({ ...prev, [key]: value }));
+ }, []);
+
+ const onReplayBurst = useCallback(() => {
+ setState((s) => ({ ...s, burst: 20, tick: 0, scenario: 'Replay Burst' }));
+ }, []);
+
+ // Stable identity so React.memo'd Topbar can short-circuit re-renders
+ // on every simulation tick.
+ const onShowHelp = useCallback(() => setShowKbHelp(true), []);
+
+ const modeLabel = mode === 'tribe' ? 'TRIBE v2' : mode === 'eeg' ? 'Live EEG' : 'Simulation';
+
+ const session = {
+ // state
+ state, mode, quality, knowledgeMode, affectOverride, lastAffectDecode,
+ firewallResult, trends, timelineFrame, timelineIndex,
+ isRecording, exportStatus, exportProgress, gifOptions, eegStatus,
+ // url rehydration
+ initialFirewallScan, incomingImmunity, incomingAutopsy, incomingDaily,
+ // setters used directly
+ onScrubTimeline: setTimelineIndex,
+ onSelectRegion,
+ onShowHelp,
+ onGifChange,
+ onReplayBurst,
+ // bundles
+ onControls: controls,
+ onDemo,
+ // brain mutations
+ onApplyFirewall, onApplyGemma, onApplyGemini,
+ onApplyKnowledge, onApplyCodeBrain, onApplyConversation,
+ onApplyRag, onApplyMultimodalRag, onApplyFusedRag,
+ onApplyAffect, onApplyAffectActivation, onDecodeAffect: setLastAffectDecode,
+ onApplyNT, onApplyTribeFrame: applyTribeFrame, onApplyPluginResults,
+ onPromoteEvolve, onPromoteAttack,
+ onRestoreSnapshot, onRemoteState,
+ // mode wiring
+ onSetMode: setMode,
+ // EEG
+ onConnectMuse, onConnectSerial, onInjectMockEeg
+ };
+
+ return (
+
+
+
+
setShowKbHelp(false)} />
+
+
+ Quick tours
+ Loading…
+ Layer atlas
+ Loading… }>
+
+
+
+
+ );
+}
diff --git a/brainsnn-r3f-app/src/shell/Topbar.jsx b/brainsnn-r3f-app/src/shell/Topbar.jsx
new file mode 100644
index 0000000..82eb267
--- /dev/null
+++ b/brainsnn-r3f-app/src/shell/Topbar.jsx
@@ -0,0 +1,78 @@
+import React, { useEffect, useState } from 'react';
+import { bus } from './bus';
+import { getTheme, setTheme } from '../utils/theme';
+
+const THEME_CYCLE = ['auto', 'dark', 'light'];
+
+/**
+ * Topbar — Claude.ai-style minimal header.
+ * Left: wordmark + active workspace breadcrumb.
+ * Right: theme toggle, ⌘K hint, keyboard help.
+ */
+function TopbarImpl({ workspace, firewallResult, immunity, onShowHelp }) {
+ // Mirror the canonical theme state (theme.js owns persistence under
+ // brainsnn_theme_v1 + applies CSS vars + broadcasts cross-tab).
+ // Subscribing to BroadcastChannel via theme.js's registerTheme()
+ // handler isn't necessary here — we just re-read on mount and on
+ // every cycle. Cross-tab updates land via dataset mutations which
+ // we observe via getTheme() lazily.
+ const [theme, setLocalTheme] = useState(() => getTheme().theme);
+
+ // Re-read in case another tab flipped the theme since mount.
+ useEffect(() => {
+ const handler = () => setLocalTheme(getTheme().theme);
+ window.addEventListener('focus', handler);
+ return () => window.removeEventListener('focus', handler);
+ }, []);
+
+ const cycleTheme = () => {
+ const next = THEME_CYCLE[(THEME_CYCLE.indexOf(theme) + 1) % THEME_CYCLE.length];
+ const current = getTheme();
+ setTheme({ ...current, theme: next }); // applies CSS + broadcasts cross-tab
+ setLocalTheme(next);
+ };
+
+ const openPalette = () => bus.emit('shell:palette-open');
+
+ // Optional ambient indicator — last firewall pressure pill.
+ const pressure = firewallResult?.manipulationPressure;
+ const pressureLabel = typeof pressure === 'number'
+ ? `${Math.round(pressure * 100)}%`
+ : null;
+
+ return (
+
+ );
+}
+
+// Topbar's props change only when the user runs a scan (firewallResult),
+// switches workspace (label), or earns immunity — not every simulation
+// tick. React.memo gates out the cascade. onShowHelp is the only
+// inline lambda; if it gets de-stabilized later, memoize at the caller.
+export default React.memo(TopbarImpl);
diff --git a/brainsnn-r3f-app/src/shell/UpdateBanner.jsx b/brainsnn-r3f-app/src/shell/UpdateBanner.jsx
new file mode 100644
index 0000000..1ede2ca
--- /dev/null
+++ b/brainsnn-r3f-app/src/shell/UpdateBanner.jsx
@@ -0,0 +1,41 @@
+import React, { useEffect, useState } from 'react';
+import { startSwUpdateWatch, subscribeSwUpdate, activateNewSw } from '../utils/swUpdate';
+
+/**
+ * UpdateBanner — small chip in the bottom-right that appears when a
+ * new service worker is waiting. Click "Reload" to skipWaiting + boot
+ * against the new chunks. Dismissible until the next update.
+ */
+export default function UpdateBanner() {
+ const [waiting, setWaiting] = useState(false);
+ const [dismissed, setDismissed] = useState(false);
+
+ useEffect(() => {
+ startSwUpdateWatch();
+ return subscribeSwUpdate((state) => {
+ if (state.status === 'waiting') {
+ setWaiting(true);
+ setDismissed(false); // re-show after each new update
+ }
+ });
+ }, []);
+
+ if (!waiting || dismissed) return null;
+
+ return (
+
+ A new version is ready.
+ activateNewSw()}
+ >
+ Reload
+
+ setDismissed(true)}
+ aria-label="Dismiss"
+ >×
+
+ );
+}
diff --git a/brainsnn-r3f-app/src/shell/WorkspaceTabs.jsx b/brainsnn-r3f-app/src/shell/WorkspaceTabs.jsx
new file mode 100644
index 0000000..c55f2cd
--- /dev/null
+++ b/brainsnn-r3f-app/src/shell/WorkspaceTabs.jsx
@@ -0,0 +1,69 @@
+import React, { useRef } from 'react';
+
+export const WORKSPACES = [
+ { id: 'home', label: 'Home', chord: 'gh', glyph: '◉' },
+ { id: 'analyze', label: 'Analyze', chord: 'ga', glyph: '◯' },
+ { id: 'defend', label: 'Defend', chord: 'gd', glyph: '◇' },
+ { id: 'brain', label: 'Brain', chord: 'gb', glyph: '◐' },
+ { id: 'knowledge', label: 'Knowledge', chord: 'gk', glyph: '◑' },
+ { id: 'training', label: 'Training', chord: 'gt', glyph: '◒' },
+ { id: 'connect', label: 'Connect', chord: 'gc', glyph: '◓' }
+];
+
+function WorkspaceTabsImpl({ active, onChange }) {
+ const ref = useRef(null);
+ const activeIdx = WORKSPACES.findIndex((w) => w.id === active);
+
+ function onKeyDown(e) {
+ const idx = WORKSPACES.findIndex((w) => w.id === active);
+ if (idx < 0) return;
+ let next = idx;
+ if (e.key === 'ArrowDown' || e.key === 'ArrowRight') next = (idx + 1) % WORKSPACES.length;
+ else if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') next = (idx - 1 + WORKSPACES.length) % WORKSPACES.length;
+ else if (e.key === 'Home') next = 0;
+ else if (e.key === 'End') next = WORKSPACES.length - 1;
+ else return;
+ e.preventDefault();
+ onChange(WORKSPACES[next].id);
+ // Move focus to the newly active tab so the user can keep arrowing.
+ requestAnimationFrame(() => {
+ const btns = ref.current?.querySelectorAll('[role="tab"]');
+ btns?.[next]?.focus();
+ });
+ }
+
+ return (
+
+ {WORKSPACES.map((w, i) => (
+ onChange(w.id)}
+ title={`${w.label} (${w.chord})`}
+ >
+ {w.glyph}
+ {w.label}
+ {w.chord}
+
+ ))}
+
+ );
+}
+
+// Tabs depend only on { active, onChange }. AppShell re-renders every
+// 180ms (simulation tick) but neither of these change with it.
+export default React.memo(WorkspaceTabsImpl);
diff --git a/brainsnn-r3f-app/src/shell/bus.js b/brainsnn-r3f-app/src/shell/bus.js
new file mode 100644
index 0000000..445c0de
--- /dev/null
+++ b/brainsnn-r3f-app/src/shell/bus.js
@@ -0,0 +1,85 @@
+/**
+ * bus — tiny global event bus for the AppShell.
+ *
+ * Used by Workspace navigation (`shell:goto`), command palette / hotkeys
+ * (`shell:flash`), onboarding (`shell:goto` before highlighting), and
+ * any panel that needs to communicate cross-workspace without prop
+ * drilling.
+ *
+ * Intentionally ~50 LOC and dependency-free. Replaces the scattered
+ * window.dispatchEvent / addEventListener patterns the legacy code uses.
+ */
+
+const _listeners = new Map();
+
+// Sticky-event buffer. The composer emits `shell:compose` before the
+// destination workspace's lazy chunk has finished loading; without
+// this, the event is fired into the void and the panel never sees
+// it (silent drop). Sticky events are stored with a timestamp and
+// replayed to late subscribers if still inside the TTL window.
+const _sticky = new Map();
+const STICKY_EVENTS = {
+ 'shell:compose': 2500 // ms — covers a cold lazy-chunk fetch
+};
+
+export const bus = {
+ on(event, handler) {
+ if (!_listeners.has(event)) _listeners.set(event, new Set());
+ _listeners.get(event).add(handler);
+
+ // Late-subscriber replay for sticky events.
+ const ttl = STICKY_EVENTS[event];
+ if (ttl != null) {
+ const buffered = _sticky.get(event);
+ if (buffered && Date.now() - buffered.ts <= ttl) {
+ // Defer one microtask so the subscriber's component has
+ // finished mounting before its handler runs.
+ Promise.resolve().then(() => {
+ try { handler(buffered.payload); } catch (err) {
+ console.error(`[bus] sticky replay for "${event}" threw:`, err);
+ }
+ });
+ }
+ }
+
+ return () => bus.off(event, handler);
+ },
+
+ off(event, handler) {
+ const set = _listeners.get(event);
+ if (!set) return;
+ set.delete(handler);
+ if (set.size === 0) _listeners.delete(event);
+ },
+
+ emit(event, payload) {
+ // Stash sticky events so late subscribers (lazy workspaces) can
+ // pick them up after the cold chunk fetch resolves.
+ if (event in STICKY_EVENTS) {
+ _sticky.set(event, { payload, ts: Date.now() });
+ }
+ const set = _listeners.get(event);
+ if (!set) return;
+ // Snapshot so handlers can off() themselves without breaking iteration.
+ for (const fn of Array.from(set)) {
+ try { fn(payload); } catch (err) {
+ console.error(`[bus] handler for "${event}" threw:`, err);
+ }
+ }
+ },
+
+ /**
+ * Clear a sticky event so a stale value doesn't replay to a
+ * subscriber that mounts much later. Used by the composer after
+ * its event has been seen (or after a workspace switch).
+ */
+ clearSticky(event) {
+ _sticky.delete(event);
+ }
+};
+
+// React hook helper — auto-cleanup on unmount.
+import { useEffect } from 'react';
+export function useBusEvent(event, handler) {
+ useEffect(() => bus.on(event, handler), [event, handler]);
+}
diff --git a/brainsnn-r3f-app/src/shell/workspaces/AnalyzeWorkspace.jsx b/brainsnn-r3f-app/src/shell/workspaces/AnalyzeWorkspace.jsx
new file mode 100644
index 0000000..8f28d9f
--- /dev/null
+++ b/brainsnn-r3f-app/src/shell/workspaces/AnalyzeWorkspace.jsx
@@ -0,0 +1,36 @@
+import React, { Suspense, lazy } from 'react';
+import ErrorBoundary from '../../components/ErrorBoundary';
+import AnalyticsDashboard from '../../components/AnalyticsDashboard';
+import NarrativePanel from '../../components/NarrativePanel';
+import ActivityCharts from '../../components/ActivityCharts';
+
+const TimeSeriesPanel = lazy(() => import('../../components/TimeSeriesPanel'));
+const CalendarHeatmapPanel = lazy(() => import('../../components/CalendarHeatmapPanel'));
+const HeatmapTimeline = lazy(() => import('../../components/HeatmapTimeline'));
+const ComparatorPanel = lazy(() => import('../../components/ComparatorPanel'));
+const DrillDownPanel = lazy(() => import('../../components/DrillDownPanel'));
+
+export default function AnalyzeWorkspace({ session }) {
+ const { state, trends, firewallResult } = session;
+ return (
+
+
+ Analyze
+ Read the brain.
+ Live signals, trends, anomalies, and how today's activity stacks up.
+
+
+
+
+
+
+
Loading… }>
+
+
+
+
+
+
+
+ );
+}
diff --git a/brainsnn-r3f-app/src/shell/workspaces/BrainWorkspace.jsx b/brainsnn-r3f-app/src/shell/workspaces/BrainWorkspace.jsx
new file mode 100644
index 0000000..bbdedc6
--- /dev/null
+++ b/brainsnn-r3f-app/src/shell/workspaces/BrainWorkspace.jsx
@@ -0,0 +1,79 @@
+import React, { Suspense, lazy } from 'react';
+import ErrorBoundary from '../../components/ErrorBoundary';
+
+const SplitBrainView = lazy(() => import('../../components/SplitBrainView'));
+const AffectiveDecoderPanel = lazy(() => import('../../components/AffectiveDecoderPanel'));
+const DreamModePanel = lazy(() => import('../../components/DreamModePanel'));
+const OscillationsPanel = lazy(() => import('../../components/OscillationsPanel'));
+const ConversationBrainPanel = lazy(() => import('../../components/ConversationBrainPanel'));
+const NeurochemistryPanel = lazy(() => import('../../components/NeurochemistryPanel'));
+const ToneShifterPanel = lazy(() => import('../../components/ToneShifterPanel'));
+const MCPBridgePanel = lazy(() => import('../../components/MCPBridgePanel'));
+const BrainStewardPanel = lazy(() => import('../../components/BrainStewardPanel'));
+const TribePanel = lazy(() => import('../../components/TribePanel'));
+const EEGPanel = lazy(() => import('../../components/EEGPanel'));
+const SnapshotPanel = lazy(() => import('../../components/SnapshotPanel'));
+
+export default function BrainWorkspace({ session }) {
+ const {
+ state, quality, lastAffectDecode,
+ onApplyAffect, onApplyAffectActivation, onDecodeAffect,
+ onApplyNT, onApplyTribeFrame, onSetMode, mode,
+ onConnectMuse, onConnectSerial, onInjectMockEeg, eegStatus,
+ onRestoreSnapshot
+ } = session;
+
+ return (
+