cli-jaw 2.0.10 → 2.0.16

package/public/manager/src/App.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { fetchInstances, fetchInstanceStatus, runLifecycleAction } from './api';
 import { pollUntilSettled } from './lifecycle-poll';
 import { InstanceDetailPanel } from './components/InstanceDetailPanel';
@@ -35,7 +35,11 @@ import { formatUptime, instanceLabel } from './instance-label';
 import { useJawCeoDashboardBridge } from './jaw-ceo/useJawCeoDashboardBridge';
 import { actionForShortcutEvent, isManagerShortcutEditableTarget } from './manager-shortcuts';
 import { reconcileActiveProfileFilter } from './profile-filter';
-import type { DashboardDetailTab, DashboardInstance, DashboardInstanceStatus, DashboardLifecycleAction, DashboardNotesAuthoringMode, DashboardNotesViewMode, DashboardProfile, DashboardScanResult, DashboardShortcutAction, DashboardSidebarMode } from './types';
+import type { DashboardDetailTab, DashboardInstance, DashboardInstanceStatus, DashboardLifecycleAction, DashboardNotesAuthoringMode, DashboardNotesGraphSettings, DashboardNotesViewMode, DashboardProfile, DashboardScanResult, DashboardShortcutAction, DashboardSidebarMode } from './types';
+import { panelShortcutBus } from './panels/panel-shortcut-bus';
+import { getDesktop } from './panels/desktop-bridge';
+import type { PanelLayoutState } from './panels/PanelLayoutProvider';
+import { panelLayoutInitialStateFromUi, panelLayoutUiFromState } from './panels/panel-layout-registry-state';
 export function App() {
     const [data, setData] = useState<DashboardScanResult | null>(null);
     const [loading, setLoading] = useState(true);
@@ -45,6 +49,7 @@ export function App() {
     const [customHome, setCustomHome] = useState('');
     const [showHidden, setShowHidden] = useState(false);
     const [hydrated, setHydrated] = useState(false);
+    const [panelInitialState, setPanelInitialState] = useState<Partial<PanelLayoutState> | undefined>(undefined);
     const [lifecycleBusyPort, setLifecycleBusyPort] = useState<number | null>(null);
     const [lifecycleMessage, setLifecycleMessage] = useState<string | null>(null);
     const [transitioningPort, setTransitioningPort] = useState<number | null>(null);
@@ -88,7 +93,6 @@ export function App() {
     const instances = data?.instances || [];
     const messageActivity = useInstanceMessageEvents(instances);
     const labelEditor = useInstanceLabelEditor(registry.save, setData);
-
     const profiles = useMemo(() => data?.manager.profiles || [], [data]);
     const effectiveProfileIds = useMemo(() => {
         const known = new Set(profiles.map(profile => profile.profileId));
@@ -115,17 +119,12 @@ export function App() {
             ].some(value => String(value || '').toLowerCase().includes(needle));
         });
     }, [effectiveProfileIds, instances, query, status]);
-    const selectedInstance = useMemo(() => {
-        if (view.selectedPort == null) return filtered.find(instance => instance.ok) || null;
-        return instances.find(instance => instance.port === view.selectedPort) || null;
-    }, [filtered, instances, view.selectedPort]);
+    const selectedInstance = useMemo(() => view.selectedPort == null ? filtered.find(instance => instance.ok) || null : instances.find(instance => instance.port === view.selectedPort) || null, [filtered, instances, view.selectedPort]);
     const activeJawCeoPort = selectedInstance?.port ?? view.selectedPort ?? null;
     const jawCeoBridge = useJawCeoDashboardBridge({ selectedPort: activeJawCeoPort, managerEvents: managerEvents.events, messageEvents: messageActivity.events, onOpenWorker: handleOpenJawCeoWorker });
     usePreviewSttLifecycle(jawCeoBridge.voice);
     usePreviewShortcutMessages({ enabled: view.dashboardShortcutsEnabled, keymap: view.dashboardShortcutKeymap, onAction: runManagerShortcut });
-    const activePreviewPort = view.activeDetailTab === 'preview' && view.sidebarMode === 'instances'
-        ? (selectedInstance?.port ?? null)
-        : null;
+    const activePreviewPort = view.activeDetailTab === 'preview' && view.sidebarMode === 'instances' ? (selectedInstance?.port ?? null) : null;
     const activityEvents = useMemo(() => {
         return [...managerEvents.events, ...messageActivity.events];
     }, [managerEvents.events, messageActivity.events]);
@@ -146,7 +145,6 @@ export function App() {
         window.open(selectedInstance.url, '_blank', 'noopener,noreferrer');
     }
     useEffect(() => { document.documentElement.lang = view.locale; }, [view.locale]);
-
     useEffect(() => {
         function onKeyDown(event: KeyboardEvent): void {
             if (event.key !== '?' || event.metaKey || event.ctrlKey || event.altKey) return;
@@ -165,56 +163,38 @@ export function App() {
             const nextProfileIds = reconcileActiveProfileFilter(activeProfileIds, result.manager.profiles || []);
             if (nextProfileIds !== activeProfileIds) { setActiveProfileIds(nextProfileIds); void registry.save({ activeProfileFilter: nextProfileIds }); }
             setData(result);
-        } catch (err) {
-            setError((err as Error).message);
-        } finally {
-            setLoading(false);
-        }
+        } catch (err) { setError((err as Error).message); }
+        finally { setLoading(false); }
     }
-
     async function refreshInstance(port: number): Promise<void> {
         const instance = await fetchInstanceStatus(port);
         if (!instance) return;
-        setData((current) => current ? {
-            ...current,
-            instances: current.instances.map(row => row.port === port ? instance : row),
-        } : current);
+        setData((current) => current ? { ...current, instances: current.instances.map(row => row.port === port ? instance : row) } : current);
     }
-
     useInvalidationSubscription('instances', () => void load(), 'app');
-
     useEffect(() => {
         async function initialize(): Promise<void> {
             try {
                 const loaded = await registry.refresh();
                 const ui = loaded.registry.ui;
-                view.setSelectedPort(ui.selectedPort);
-                view.setActiveDetailTab(ui.selectedTab);
-                view.setSidebarCollapsed(ui.sidebarCollapsed);
-                view.setActivityDockCollapsed(ui.activityDockCollapsed);
-                view.setActivityDockHeight(ui.activityDockHeight);
+                view.setSelectedPort(ui.selectedPort); view.setActiveDetailTab(ui.selectedTab); view.setSidebarCollapsed(ui.sidebarCollapsed);
+                view.setActivityDockCollapsed(ui.activityDockCollapsed); view.setActivityDockHeight(ui.activityDockHeight);
                 const sidebarMode = normalizeSidebarModeForBuild(readInitialSidebarMode(window.location.search) ?? ui.sidebarMode);
                 view.setSidebarMode(sidebarMode);
                 if (sidebarMode !== ui.sidebarMode) void saveUi({ sidebarMode });
-                view.setNotesSelectedPath(ui.notesSelectedPath);
-                view.setNotesViewMode(ui.notesViewMode);
-                view.setNotesAuthoringMode(ui.notesAuthoringMode ?? 'plain');
-                view.setNotesWordWrap(ui.notesWordWrap);
-                view.setNotesTreeWidth(ui.notesTreeWidth);
-                view.setShowLatestActivityTitles(ui.showLatestActivityTitles);
-                view.setShowInlineLabelEditor(ui.showInlineLabelEditor);
-                view.setShowSidebarRuntimeLine(ui.showSidebarRuntimeLine);
-                view.setShowSelectedRowActions(ui.showSelectedRowActions);
-                view.setDashboardShortcutsEnabled(ui.dashboardShortcutsEnabled);
-                view.setDashboardShortcutKeymap(ui.dashboardShortcutKeymap);
+                view.setNotesSelectedPath(ui.notesSelectedPath); view.setNotesViewMode(ui.notesViewMode); view.setNotesAuthoringMode(ui.notesAuthoringMode ?? 'plain');
+                view.setNotesWordWrap(ui.notesWordWrap); view.setNotesVimMode(ui.notesVimMode); view.setNotesTreeWidth(ui.notesTreeWidth);
+                view.setNotesGraphSettings(ui.notesGraphSettings);
+                view.setShowLatestActivityTitles(ui.showLatestActivityTitles); view.setShowInlineLabelEditor(ui.showInlineLabelEditor); view.setShowSidebarRuntimeLine(ui.showSidebarRuntimeLine);
+                view.setShowSelectedRowActions(ui.showSelectedRowActions); view.setDashboardShortcutsEnabled(ui.dashboardShortcutsEnabled); view.setDashboardShortcutKeymap(ui.dashboardShortcutKeymap);
+                view.setDiffRootPolicy(ui.diffRootPolicy); view.setDiffPinnedRootByPort(ui.diffPinnedRootByPort); view.setDiffDefaultMode(ui.diffDefaultMode);
+                view.setDiffBaseRef(ui.diffBaseRef); view.setDiffIncludeUntracked(ui.diffIncludeUntracked);
                 view.setLocale(ui.locale);
                 activityUnread.hydrateSeenAt(ui.activitySeenAt ?? null, ui.activitySeenByPort || {});
                 setActiveProfileIds(loaded.registry.activeProfileFilter || []);
                 theme.syncFromRegistry(ui.uiTheme);
-            } finally {
-                setHydrated(true);
-                await load();
-            }
+                setPanelInitialState(panelLayoutInitialStateFromUi(ui));
+            } finally { setHydrated(true); await load(); }
         }
         void initialize();
     }, []);
@@ -223,7 +203,9 @@ export function App() {
         if (!hydrated || ui === undefined) return;
         await registry.save({ ui });
     }
-
+    function handlePanelStateChange(ps: PanelLayoutState): void {
+        void saveUi(panelLayoutUiFromState(ps));
+    }
     const profileCounts = useMemo(() => {
         return instances.reduce((acc, instance) => {
             if (instance.profileId) acc[instance.profileId] = (acc[instance.profileId] || 0) + 1;
@@ -239,13 +221,10 @@ export function App() {
     }, [instances]);
 
     function toggleProfile(profileId: string): void {
-        const next = activeProfileIds.includes(profileId)
-            ? activeProfileIds.filter(id => id !== profileId)
-            : [...activeProfileIds, profileId];
+        const next = activeProfileIds.includes(profileId) ? activeProfileIds.filter(id => id !== profileId) : [...activeProfileIds, profileId];
         setActiveProfileIds(next);
         void registry.save({ activeProfileFilter: next });
     }
-
     function canLeaveDirtySettings(): boolean {
         if (view.activeDetailTab !== 'settings' || !settingsDirty) return true;
         return window.confirm('Discard unsaved Settings changes?');
@@ -253,23 +232,14 @@ export function App() {
 
     function handlePreview(instance: DashboardInstance): void {
         if (!canLeaveDirtySettings()) return;
-        setSettingsDirty(false);
-        activityUnread.markPortSeen(instance.port);
-        view.setSelectedPort(instance.port);
-        view.setActiveDetailTab('preview');
-        view.setActivityDockCollapsed(true);
-        view.setDrawerOpen(false);
+        setSettingsDirty(false); activityUnread.markPortSeen(instance.port); view.setSelectedPort(instance.port);
+        view.setActiveDetailTab('preview'); view.setActivityDockCollapsed(true); view.setDrawerOpen(false);
         void saveUi({ selectedPort: instance.port, selectedTab: 'preview', activityDockCollapsed: true });
     }
-
     function handleOpenJawCeoWorker(port: number): void { const instance = instances.find(row => row.port === port); if (instance) handlePreview(instance); }
-
     function handleSelectInstance(instance: DashboardInstance): void {
         if (!canLeaveDirtySettings()) return;
-        setSettingsDirty(false);
-        activityUnread.markPortSeen(instance.port);
-        view.setSelectedPort(instance.port);
-        view.setDrawerOpen(false);
+        setSettingsDirty(false); activityUnread.markPortSeen(instance.port); view.setSelectedPort(instance.port); view.setDrawerOpen(false);
         void saveUi({ selectedPort: instance.port });
     }
 
@@ -320,12 +290,35 @@ export function App() {
     }
 
     function handleNotesSelectedPathChange(path: string | null): void { view.setNotesSelectedPath(path); void saveUi({ notesSelectedPath: path }); }
+    const [notesHighlightedPath, setNotesHighlightedPath] = useState<string | null>(null);
+    const notesHighlightTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+    function flashNotesPath(path: string): void {
+        setNotesHighlightedPath(path);
+        if (notesHighlightTimerRef.current) clearTimeout(notesHighlightTimerRef.current);
+        notesHighlightTimerRef.current = setTimeout(() => setNotesHighlightedPath(null), 2500);
+    }
+
+    function openNotesFromPreview(path: string): void {
+        const relPath = path.trim();
+        if (!relPath) return;
+        if (view.sidebarMode !== 'notes') {
+            handleSidebarModeChange('notes');
+        }
+        handleNotesSelectedPathChange(relPath);
+        flashNotesPath(relPath);
+    }
+
+    useEffect(() => () => {
+        if (notesHighlightTimerRef.current) clearTimeout(notesHighlightTimerRef.current);
+    }, []);
     function openNotesSidebarSearch(): void { setNotesSidebarMode('search'); setNotesSearchFocusToken(token => token + 1); }
     function handleNotesViewModeChange(mode: DashboardNotesViewMode): void { view.setNotesViewMode(mode); void saveUi({ notesViewMode: mode }); }
     function handleNotesAuthoringModeChange(mode: DashboardNotesAuthoringMode): void { view.setNotesAuthoringMode(mode); void saveUi({ notesAuthoringMode: mode }); }
     function handleNotesWordWrapChange(value: boolean): void { view.setNotesWordWrap(value); void saveUi({ notesWordWrap: value }); }
+    function handleNotesVimModeChange(value: boolean): void { view.setNotesVimMode(value); void saveUi({ notesVimMode: value }); }
     function handleNotesTreeWidthChange(value: number): void { view.setNotesTreeWidth(value); void saveUi({ notesTreeWidth: value }); }
-
+    function handleNotesGraphSettingsChange(value: DashboardNotesGraphSettings): void { view.setNotesGraphSettings(value); void saveUi({ notesGraphSettings: value }); }
     const notesModel = useNotesModel({
         active: view.sidebarMode === 'notes',
         selectedPath: view.notesSelectedPath,
@@ -335,7 +328,6 @@ export function App() {
     const notesSelectedNote = view.notesSelectedPath
         ? notesModel.index?.notes.find(n => n.path === view.notesSelectedPath) ?? null
         : null;
-
     function handleDashboardSettingsPatch(ui: NonNullable<Parameters<typeof saveUi>[0]>): void {
         if (ui.showLatestActivityTitles !== undefined) view.setShowLatestActivityTitles(ui.showLatestActivityTitles);
         if (ui.showInlineLabelEditor !== undefined) view.setShowInlineLabelEditor(ui.showInlineLabelEditor);
@@ -343,6 +335,8 @@ export function App() {
         if (ui.showSelectedRowActions !== undefined) view.setShowSelectedRowActions(ui.showSelectedRowActions);
         if (ui.dashboardShortcutsEnabled !== undefined) view.setDashboardShortcutsEnabled(ui.dashboardShortcutsEnabled);
         if (ui.dashboardShortcutKeymap !== undefined) view.setDashboardShortcutKeymap(ui.dashboardShortcutKeymap);
+        if (ui.diffRootPolicy !== undefined) view.setDiffRootPolicy(ui.diffRootPolicy); if (ui.diffPinnedRootByPort !== undefined) view.setDiffPinnedRootByPort(ui.diffPinnedRootByPort); if (ui.diffDefaultMode !== undefined) view.setDiffDefaultMode(ui.diffDefaultMode);
+        if (ui.diffBaseRef !== undefined) view.setDiffBaseRef(ui.diffBaseRef); if (ui.diffIncludeUntracked !== undefined) view.setDiffIncludeUntracked(ui.diffIncludeUntracked);
         if (ui.locale !== undefined) view.setLocale(ui.locale);
         void saveUi(ui);
     }
@@ -361,6 +355,7 @@ export function App() {
     }
 
     function runManagerShortcut(action: DashboardShortcutAction): void {
+        if (panelShortcutBus.dispatch(action)) return;
         if (action === 'focusInstances') {
             handleSidebarModeChange('instances');
             view.setDrawerOpen(false);
@@ -387,6 +382,13 @@ export function App() {
             selectRelativeInstance(1);
         }
     }
+    useEffect(() => {
+        if (!view.dashboardShortcutsEnabled) return undefined;
+        const unsubscribe = getDesktop()?.shortcuts?.onAction?.((action) => {
+            runManagerShortcut(action);
+        });
+        return unsubscribe;
+    }, [filtered, selectedInstance, view.dashboardShortcutsEnabled, view.sidebarMode, view.activeDetailTab, settingsDirty]);
 
     useEffect(() => {
         function onKeyDown(event: KeyboardEvent): void {
@@ -468,7 +470,6 @@ export function App() {
             onMarkActivitySeen={activityUnread.markPortSeen} onInstanceLabelSave={labelEditor.saveInstanceLabel}
             onLifecycle={(action, instance) => void handleLifecycle(action, instance)} />
     );
-
     const workbenchHeader = <WorkbenchHeader instance={selectedInstance} previewEnabled={previewEnabled} onPreviewEnabledChange={setPreviewEnabled} onPreviewRefresh={() => setPreviewRefreshKey(key => key + 1)} onOpenHelpTopic={openHelpTopic} />;
     const dashboardSettingsUi = dashboardSettingsUiFromView(view, theme.theme), titleSupport = summarizeActivityTitleSupport(messageActivity.titleSupportByPort);
     const profileChipStrip = (chipProfiles: DashboardProfile[]) => chipProfiles.length > 0 ? <div className="profile-chip-strip drawer-chip-strip" aria-label="Profile filters">{chipProfiles.map(profile => <ProfileChip key={profile.profileId} profile={profile} active={activeProfileIds.includes(profile.profileId)} count={profileCounts[profile.profileId] || 0} onToggle={toggleProfile} />)}</div> : null;
@@ -484,5 +485,5 @@ export function App() {
         />
     );
 
-    return <AppChrome view={view} palette={palette} theme={theme} query={query} loading={loading} showHidden={showHidden} instances={instances} selectedInstance={selectedInstance} data={data} summary={summary} scheduleGroup={scheduleGroup} boardView={boardView} notesModel={notesModel} notesSelectedNote={notesSelectedNote} notesDirtyPath={notesDirtyPath} notesSidebarMode={notesSidebarMode} notesSearchFocusToken={notesSearchFocusToken} settingsSection={dashboardSettingsSection} dashboardSettingsUi={dashboardSettingsUi} titleSupport={titleSupport} activityEvents={activityEvents} busyPorts={messageActivity.busyPorts} titlesByPort={messageActivity.titlesByPort} lifecycleMessage={lifecycleMessage} error={error} registryMessage={registry.error || labelEditor.error || managerEvents.error} workbenchHeader={workbenchHeader} detailContent={detailContent} instanceListContent={instanceListContent} drawerProfileFilters={profileChipStrip(profiles)} jawCeoWorkbenchButton={jawCeoBridge.workbenchButton} jawCeoVoiceOverlay={jawCeoBridge.voiceOverlay} jawCeoConsoleContent={jawCeoBridge.consoleContent} previewEnabled={previewEnabled} previewRefreshKey={previewRefreshKey} autoUnloadNotice={autoUnloadNotice} helpOpen={helpOpen} helpTopic={helpTopic} setQuery={setQuery} setShowHidden={setShowHidden} setPreviewEnabled={setPreviewEnabled} setAutoUnloadNotice={setAutoUnloadNotice} setHelpOpen={setHelpOpen} setHelpTopic={setHelpTopic} onOpenHelpTopic={openHelpTopic} setNotesSidebarMode={setNotesSidebarMode} setBoardView={setBoardView} setScheduleGroup={setScheduleGroup} setDashboardSettingsSection={setDashboardSettingsSection} load={load} cycleTheme={cycleTheme} openSelectedInBrowser={openSelectedInBrowser} handleSelectInstance={handleSelectInstance} handleSidebarModeChange={handleSidebarModeChange} handleSidebarToggle={handleSidebarToggle} handleNotesSelectedPathChange={handleNotesSelectedPathChange} handleNotesViewModeChange={handleNotesViewModeChange} handleNotesAuthoringModeChange={handleNotesAuthoringModeChange} handleNotesWordWrapChange={handleNotesWordWrapChange} handleNotesTreeWidthChange={handleNotesTreeWidthChange} openNotesSidebarSearch={openNotesSidebarSearch} setNotesDirtyPath={setNotesDirtyPath} handleTabChange={handleTabChange} handleActivityToggle={handleActivityToggle} handleActivityHeight={handleActivityHeight} onDismissLifecycleMessage={() => setLifecycleMessage(null)} handleDashboardSettingsPatch={handleDashboardSettingsPatch} activityUnreadOpenAndMarkSeen={activityUnread.openAndMarkSeen} />;
+    return <AppChrome view={view} palette={palette} theme={theme} query={query} loading={loading} showHidden={showHidden} instances={instances} selectedInstance={selectedInstance} data={data} summary={summary} scheduleGroup={scheduleGroup} boardView={boardView} notesModel={notesModel} notesSelectedNote={notesSelectedNote} notesDirtyPath={notesDirtyPath} notesHighlightedPath={notesHighlightedPath} notesSidebarMode={notesSidebarMode} notesSearchFocusToken={notesSearchFocusToken} settingsSection={dashboardSettingsSection} dashboardSettingsUi={dashboardSettingsUi} titleSupport={titleSupport} activityEvents={activityEvents} busyPorts={messageActivity.busyPorts} titlesByPort={messageActivity.titlesByPort} lifecycleMessage={lifecycleMessage} error={error} registryMessage={registry.error || labelEditor.error || managerEvents.error} workbenchHeader={workbenchHeader} detailContent={detailContent} instanceListContent={instanceListContent} drawerProfileFilters={profileChipStrip(profiles)} jawCeoWorkbenchButton={jawCeoBridge.workbenchButton} jawCeoVoiceOverlay={jawCeoBridge.voiceOverlay} jawCeoConsoleContent={jawCeoBridge.consoleContent} previewEnabled={previewEnabled} previewRefreshKey={previewRefreshKey} autoUnloadNotice={autoUnloadNotice} helpOpen={helpOpen} helpTopic={helpTopic} setQuery={setQuery} setShowHidden={setShowHidden} setPreviewEnabled={setPreviewEnabled} setAutoUnloadNotice={setAutoUnloadNotice} setHelpOpen={setHelpOpen} setHelpTopic={setHelpTopic} onOpenHelpTopic={openHelpTopic} setNotesSidebarMode={setNotesSidebarMode} setBoardView={setBoardView} setScheduleGroup={setScheduleGroup} setDashboardSettingsSection={setDashboardSettingsSection} load={load} cycleTheme={cycleTheme} openSelectedInBrowser={openSelectedInBrowser} handleSelectInstance={handleSelectInstance} handleSidebarModeChange={handleSidebarModeChange} handleSidebarToggle={handleSidebarToggle} handleNotesSelectedPathChange={handleNotesSelectedPathChange} openNotesFromPreview={openNotesFromPreview} handleNotesViewModeChange={handleNotesViewModeChange} handleNotesAuthoringModeChange={handleNotesAuthoringModeChange} handleNotesWordWrapChange={handleNotesWordWrapChange} handleNotesVimModeChange={handleNotesVimModeChange} handleNotesTreeWidthChange={handleNotesTreeWidthChange} handleNotesGraphSettingsChange={handleNotesGraphSettingsChange} openNotesSidebarSearch={openNotesSidebarSearch} setNotesDirtyPath={setNotesDirtyPath} handleTabChange={handleTabChange} handleActivityToggle={handleActivityToggle} handleActivityHeight={handleActivityHeight} onDismissLifecycleMessage={() => setLifecycleMessage(null)} handleDashboardSettingsPatch={handleDashboardSettingsPatch} activityUnreadOpenAndMarkSeen={activityUnread.openAndMarkSeen} panelInitialState={panelInitialState} onPanelStateChange={handlePanelStateChange} />;
 }

package/public/manager/src/AppChrome.tsx

@@ -5,6 +5,7 @@ import { ManagerShell } from './components/ManagerShell';
 import { HelpDrawer } from './help/HelpDrawer';
 import { type HelpTopicId } from './help/helpContent';
 import { SidebarRailRouter } from './SidebarRailRouter';
+import { PanelLayoutProvider, type PanelLayoutState } from './panels/PanelLayoutProvider';
 import { ElectronMetricsPanel } from './electron-metrics';
 import { IframeBridge } from './sync/IframeBridge';
 import { VisibilityBridge } from './sync/VisibilityBridge';
@@ -17,7 +18,7 @@ import type { NotesSidebarMode } from './notes/NotesSidebar';
 import type { CommandPaletteApi } from './hooks/useCommandPalette';
 import type { ThemeApi } from './hooks/useTheme';
 import type { useDashboardView } from './hooks/useDashboardView';
-import type { DashboardDetailTab, DashboardInstance, DashboardNotesAuthoringMode, DashboardNotesViewMode, DashboardScanResult, ManagerEvent, NoteMetadata } from './types';
+import type { DashboardDetailTab, DashboardInstance, DashboardNotesAuthoringMode, DashboardNotesGraphSettings, DashboardNotesViewMode, DashboardScanResult, ManagerEvent, NoteMetadata } from './types';
 
 type AppChromeProps = {
     view: ReturnType<typeof useDashboardView>;
@@ -35,6 +36,7 @@ type AppChromeProps = {
     notesModel: NotesModelState;
     notesSelectedNote: NoteMetadata | null;
     notesDirtyPath: string | null;
+    notesHighlightedPath: string | null;
     notesSidebarMode: NotesSidebarMode;
     notesSearchFocusToken: number;
     settingsSection: Parameters<typeof SidebarRailRouter>[0]['settingsSection'];
@@ -76,10 +78,13 @@ type AppChromeProps = {
     handleSidebarModeChange: Parameters<typeof SidebarRailRouter>[0]['onSidebarModeChange'];
     handleSidebarToggle: () => void;
     handleNotesSelectedPathChange: (path: string | null) => void;
+    openNotesFromPreview: (path: string) => void;
     handleNotesViewModeChange: (mode: DashboardNotesViewMode) => void;
     handleNotesAuthoringModeChange: (mode: DashboardNotesAuthoringMode) => void;
     handleNotesWordWrapChange: (value: boolean) => void;
+    handleNotesVimModeChange: (value: boolean) => void;
     handleNotesTreeWidthChange: (value: number) => void;
+    handleNotesGraphSettingsChange: (settings: DashboardNotesGraphSettings) => void;
     openNotesSidebarSearch: () => void;
     setNotesDirtyPath: Dispatch<SetStateAction<string | null>>;
     handleTabChange: (tab: DashboardDetailTab) => void;
@@ -88,6 +93,8 @@ type AppChromeProps = {
     onDismissLifecycleMessage: () => void;
     handleDashboardSettingsPatch: Parameters<typeof SidebarRailRouter>[0]['onDashboardSettingsPatch'];
     activityUnreadOpenAndMarkSeen: () => void;
+    panelInitialState?: Partial<PanelLayoutState> | undefined;
+    onPanelStateChange?: ((state: PanelLayoutState) => void) | undefined;
 };
 
 export function AppChrome(props: AppChromeProps) {
@@ -95,6 +102,7 @@ export function AppChrome(props: AppChromeProps) {
         <>
             <IframeBridge />
             <VisibilityBridge />
+            <PanelLayoutProvider initialPanelState={props.panelInitialState} onStateChange={props.onPanelStateChange}>
             <ManagerShell
                 sidebarCollapsed={props.view.sidebarCollapsed}
                 commandBar={<CommandBar query={props.query} loading={props.loading} onQueryChange={props.setQuery} onRefresh={() => void props.load()} onOpenDrawer={() => props.view.setDrawerOpen(true)} theme={props.theme.theme} onThemeChange={props.theme.setTheme} onOpenPalette={props.palette.toggle} />}
@@ -107,17 +115,17 @@ export function AppChrome(props: AppChromeProps) {
                         onOpenHelpTopic={props.onOpenHelpTopic}
                         settingsSection={props.settingsSection} locale={props.view.locale} onSettingsSectionChange={props.setDashboardSettingsSection}
                         notesModel={props.notesModel} notesSelectedPath={props.view.notesSelectedPath} notesSelectedNote={props.notesSelectedNote}
-                        notesDirtyPath={props.notesDirtyPath} notesTreeWidth={props.view.notesTreeWidth} notesSidebarMode={props.notesSidebarMode}
+                        notesDirtyPath={props.notesDirtyPath} notesHighlightedPath={props.notesHighlightedPath} notesTreeWidth={props.view.notesTreeWidth} notesGraphSettings={props.view.notesGraphSettings} notesSidebarMode={props.notesSidebarMode}
                         notesSearchFocusToken={props.notesSearchFocusToken} notesViewMode={props.view.notesViewMode} notesAuthoringMode={props.view.notesAuthoringMode}
-                        notesWordWrap={props.view.notesWordWrap} onNotesSidebarModeChange={props.setNotesSidebarMode} onOpenNotesSearch={props.openNotesSidebarSearch}
+                        notesWordWrap={props.view.notesWordWrap} notesVimMode={props.view.notesVimMode} onNotesSidebarModeChange={props.setNotesSidebarMode} onOpenNotesSearch={props.openNotesSidebarSearch}
                         onNotesSelectedPathChange={props.handleNotesSelectedPathChange} onNotesDirtyPathChange={props.setNotesDirtyPath}
                         onNotesViewModeChange={props.handleNotesViewModeChange} onNotesAuthoringModeChange={props.handleNotesAuthoringModeChange}
-                        onNotesWordWrapChange={props.handleNotesWordWrapChange} onNotesTreeWidthChange={props.handleNotesTreeWidthChange}
+                        onNotesWordWrapChange={props.handleNotesWordWrapChange} onNotesVimModeChange={props.handleNotesVimModeChange} onNotesTreeWidthChange={props.handleNotesTreeWidthChange} onNotesGraphSettingsChange={props.handleNotesGraphSettingsChange}
                         boardView={props.boardView} onBoardViewChange={props.setBoardView} scheduleGroup={props.scheduleGroup} onScheduleGroupChange={props.setScheduleGroup}
                         instances={props.instances} selectedInstance={props.selectedInstance} data={props.data} titlesByPort={props.titlesByPort}
                         busyPorts={props.busyPorts} activeDetailTab={props.view.activeDetailTab} onDetailTabChange={props.handleTabChange}
                         workbenchHeader={props.workbenchHeader} detailContent={props.detailContent} previewEnabled={props.previewEnabled}
-                        previewRefreshKey={props.previewRefreshKey} previewTheme={props.theme.resolved} lifecycleMessage={props.lifecycleMessage}
+                        previewRefreshKey={props.previewRefreshKey} previewTheme={props.theme.resolved} onOpenNotesFromPreview={props.openNotesFromPreview} lifecycleMessage={props.lifecycleMessage}
                         onDismissLifecycleMessage={props.onDismissLifecycleMessage} instanceListContent={props.instanceListContent} loading={props.loading}
                         jawCeoWorkbenchButton={props.jawCeoWorkbenchButton} jawCeoVoiceOverlay={props.jawCeoVoiceOverlay} jawCeoConsoleContent={props.jawCeoConsoleContent}
                         error={props.error} registryMessage={props.registryMessage} managerEvents={props.activityEvents}
@@ -127,6 +135,7 @@ export function AppChrome(props: AppChromeProps) {
                 )}
                 activityHeight={props.view.activityDockCollapsed ? 48 : props.view.activityDockHeight}
             />
+            </PanelLayoutProvider>
             <CommandPalette open={props.palette.open} onClose={props.palette.close} instances={props.instances} getLabel={instanceLabel}
                 onSelectInstance={props.handleSelectInstance} theme={props.theme.theme} onCycleTheme={props.cycleTheme} onRefresh={() => void props.load()}
                 onToggleHidden={() => { const next = !props.showHidden; props.setShowHidden(next); void props.load(next); }}

package/public/manager/src/InstancePreview.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useRef } from 'react';
+import { sendInstanceMessage } from './api';
 import { buildPreviewState } from './preview';
 import type { PreviewTheme } from './preview';
 import type { DashboardInstance, DashboardScanResult } from './types';
@@ -10,8 +11,67 @@ type InstancePreviewProps = {
     active: boolean;
     refreshKey: number;
     theme: PreviewTheme;
+    onOpenNotesFromPreview?: (path: string) => void;
 };
 
+type PreviewOpenNotesMessage = {
+    type?: unknown;
+    path?: unknown;
+};
+
+type PreviewSendMessage = {
+    type?: unknown;
+    requestId?: unknown;
+    prompt?: unknown;
+};
+
+function normalizeLoopbackHostname(hostname: string): string {
+    return hostname.replace(/^\[|\]$/g, '').toLowerCase();
+}
+
+function isLoopbackHostname(hostname: string): boolean {
+    const normalized = normalizeLoopbackHostname(hostname);
+    return normalized === '127.0.0.1'
+        || normalized === 'localhost'
+        || normalized === '::1';
+}
+
+function loopbackOriginsEquivalent(a: string, b: string): boolean {
+    if (a === b) return true;
+    try {
+        const left = new URL(a);
+        const right = new URL(b);
+        if (left.protocol !== right.protocol || left.port !== right.port) return false;
+        return isLoopbackHostname(left.hostname) && isLoopbackHostname(right.hostname);
+    } catch {
+        return false;
+    }
+}
+
+function previewFrameOriginMatches(origin: string, src: string, frame: HTMLIFrameElement | null): boolean {
+    if (!origin || origin === 'null') return false;
+    const targetOrigin = previewTargetOrigin(src, frame);
+    return Boolean(targetOrigin && loopbackOriginsEquivalent(targetOrigin, origin));
+}
+
+function postPreviewSendResult(
+    source: MessageEventSource | null,
+    origin: string,
+    requestId: string,
+    result: { ok: boolean; status: number; data?: unknown; error?: string },
+): void {
+    if (!source || !origin || origin === 'null') return;
+    try {
+        (source as Window).postMessage({
+            type: 'jaw-preview-send-result',
+            requestId,
+            ...result,
+        }, origin);
+    } catch (error) {
+        console.warn('[manager-preview] send relay result skipped', error);
+    }
+}
+
 function previewTargetOrigin(src: string, frame: HTMLIFrameElement | null): string | null {
     if (typeof window === 'undefined') return 'http://localhost';
     try {
@@ -92,6 +152,58 @@ export function InstancePreview(props: InstancePreviewProps) {
         syncTheme();
     }, [syncTheme]);
 
+    useEffect(() => {
+        if (!props.enabled || !state.canPreview || !state.src || !props.instance?.ok) return undefined;
+        function onPreviewSend(event: MessageEvent): void {
+            if (event.source !== iframeRef.current?.contentWindow) return;
+            if (!state.src || !previewFrameOriginMatches(event.origin, state.src, iframeRef.current)) return;
+            const data = event.data as PreviewSendMessage | null;
+            if (!data || data.type !== 'jaw-preview-send-message') return;
+            const requestId = typeof data.requestId === 'string' ? data.requestId : '';
+            const prompt = typeof data.prompt === 'string' ? data.prompt.trim() : '';
+            if (!requestId) return;
+            if (!prompt) {
+                postPreviewSendResult(event.source, event.origin, requestId, {
+                    ok: false,
+                    status: 400,
+                    error: 'prompt must be a non-empty string',
+                });
+                return;
+            }
+            void sendInstanceMessage(props.instance!.port, prompt)
+                .then(result => {
+                    postPreviewSendResult(event.source, event.origin, requestId, {
+                        ok: result.ok,
+                        status: result.status,
+                        data: result.data,
+                        ...(result.data.error ? { error: result.data.error } : {}),
+                    });
+                })
+                .catch(error => {
+                    postPreviewSendResult(event.source, event.origin, requestId, {
+                        ok: false,
+                        status: 502,
+                        error: (error as Error).message,
+                    });
+                });
+        }
+        window.addEventListener('message', onPreviewSend);
+        function onPreviewOpenNotes(event: MessageEvent): void {
+            if (event.source !== iframeRef.current?.contentWindow) return;
+            if (!state.src || !previewFrameOriginMatches(event.origin, state.src, iframeRef.current)) return;
+            const data = event.data as PreviewOpenNotesMessage | null;
+            if (!data || data.type !== 'jaw-preview-open-notes') return;
+            const path = typeof data.path === 'string' ? data.path.trim() : '';
+            if (!path) return;
+            props.onOpenNotesFromPreview?.(path);
+        }
+        window.addEventListener('message', onPreviewOpenNotes);
+        return () => {
+            window.removeEventListener('message', onPreviewSend);
+            window.removeEventListener('message', onPreviewOpenNotes);
+        };
+    }, [props.enabled, props.instance, props.onOpenNotesFromPreview, state.canPreview, state.src]);
+
     useEffect(() => {
         if (!props.active || !props.enabled || !state.canPreview || !state.src) return undefined;
         function onKeyDown(event: KeyboardEvent): void {
@@ -133,7 +245,7 @@ export function InstancePreview(props: InstancePreviewProps) {
                     ref={iframeRef}
                     className="preview-frame"
                     src={state.src}
-                    sandbox="allow-forms allow-modals allow-popups allow-same-origin allow-scripts allow-downloads"
+                    sandbox="allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"
                     allow="clipboard-read; clipboard-write; microphone"
                     onLoad={() => {
                         loadedSrcRef.current = state.src;
@@ -141,7 +253,6 @@ export function InstancePreview(props: InstancePreviewProps) {
                     }}
                 />
             )}
-
         </aside>
     );
 }