cli-jaw 2.0.10 → 2.0.16

package/public/manager/src/SidebarRailRouter.tsx

@@ -1,4 +1,4 @@
-import { useState, type ReactNode } from 'react';
+import { useState, type ReactNode, Suspense } from 'react';
 import { ActivityDock } from './components/ActivityDock';
 import { InstanceDrawer } from './components/InstanceDrawer';
 import { InstanceNavigator } from './components/InstanceNavigator';
@@ -6,6 +6,18 @@ import { MobileNav } from './components/MobileNav';
 import { SidebarRail } from './components/SidebarRail';
 import { Workbench } from './components/Workbench';
 import { WorkspaceLayout } from './components/WorkspaceLayout';
+import { lazy } from 'react';
+import { RightSidebar } from './panels/RightSidebar';
+import { BottomPanel, type BottomPanelRenderControls } from './panels/BottomPanel';
+import { usePanelLayout } from './panels/PanelLayoutProvider';
+import { currentManagerSurface } from './panels/panel-capabilities';
+import type { RightPanelMode, BottomPanelTab } from './panels/types';
+
+const TerminalPanel = lazy(() => import('./terminal/TerminalPanel').then(m => ({ default: m.TerminalPanel })));
+const DiffPanel = lazy(() => import('./diff-panel/DiffPanel').then(m => ({ default: m.DiffPanel })));
+const FolderPanel = lazy(() => import('./folder-panel/FolderPanel').then(m => ({ default: m.FolderPanel })));
+const DocPanel = lazy(() => import('./doc-panel/DocPanel').then(m => ({ default: m.DocPanel })));
+const BrowserPanel = lazy(() => import('./browser-panel/BrowserPanel').then(m => ({ default: m.BrowserPanel })));
 import { InstancePreview } from './InstancePreview';
 import { DashboardSettingsSidebar, type DashboardSettingsSection } from './dashboard-settings/DashboardSettingsSidebar';
 import { DashboardSettingsWorkspace } from './dashboard-settings/DashboardSettingsWorkspace';
@@ -27,12 +39,14 @@ import type {
     DashboardDetailTab,
     DashboardInstance,
     DashboardNotesAuthoringMode,
+    DashboardNotesGraphSettings,
     DashboardNotesViewMode,
     DashboardScanResult,
     DashboardSidebarMode,
     NoteMetadata,
     DashboardLocale,
     ManagerEvent,
+    DashboardRegistryUi,
 } from './types';
 
 type WorkspaceSurfaceProps = {
@@ -66,20 +80,26 @@ type Props = {
     notesSelectedPath: string | null;
     notesSelectedNote: NoteMetadata | null;
     notesDirtyPath: string | null;
+    notesHighlightedPath: string | null;
     notesTreeWidth: number;
     notesSidebarMode: NotesSidebarMode;
     notesSearchFocusToken: number;
     notesViewMode: DashboardNotesViewMode;
     notesAuthoringMode: DashboardNotesAuthoringMode;
     notesWordWrap: boolean;
+    notesVimMode: boolean;
     onNotesSidebarModeChange: (mode: NotesSidebarMode) => void;
+    notesGraphSettings?: DashboardNotesGraphSettings | undefined;
     onOpenNotesSearch: () => void;
     onNotesSelectedPathChange: (path: string | null) => void;
     onNotesDirtyPathChange: (path: string | null) => void;
     onNotesViewModeChange: (mode: DashboardNotesViewMode) => void;
     onNotesAuthoringModeChange: (mode: DashboardNotesAuthoringMode) => void;
     onNotesWordWrapChange: (value: boolean) => void;
+    onNotesVimModeChange: (value: boolean) => void;
     onNotesTreeWidthChange: (value: number) => void;
+    onNotesGraphSettingsChange: (settings: DashboardNotesGraphSettings) => void;
+    onOpenNotesFromPreview?: (path: string) => void;
     boardView: BoardView;
     onBoardViewChange: (view: BoardView) => void;
     scheduleGroup: ScheduleGroup;
@@ -117,15 +137,52 @@ type Props = {
     onDashboardSettingsPatch: Parameters<typeof DashboardSettingsWorkspace>[0]['onUiPatch'];
 };
 
+function renderRightPanelContent(
+    mode: RightPanelMode,
+    previewFilePath: string | null,
+    onPreviewFile: (path: string) => void,
+    selectedInstance: DashboardInstance | null,
+    dashboardSettingsUi: DashboardRegistryUi,
+    onDashboardSettingsPatch: (patch: Partial<DashboardRegistryUi>) => void,
+    notesModel: NotesModelState,
+): ReactNode {
+    const fallback = <div style={{ padding: '12px', color: 'var(--text-dim)', fontSize: '12px' }}>Loading...</div>;
+    switch (mode) {
+        case 'diff': return <Suspense fallback={fallback}><DiffPanel selectedInstance={selectedInstance} settings={dashboardSettingsUi} onSettingsPatch={onDashboardSettingsPatch} /></Suspense>;
+        case 'folder': return <Suspense fallback={fallback}><FolderPanel selectedFilePath={previewFilePath} notesTree={notesModel.tree} notesRoot={notesModel.notesRoot} onPreviewFile={onPreviewFile} /></Suspense>;
+        case 'doc': return <Suspense fallback={fallback}><DocPanel filePath={previewFilePath ?? undefined} /></Suspense>;
+        case 'browser': return <Suspense fallback={fallback}><BrowserPanel /></Suspense>;
+        default: return null;
+    }
+}
+
+function renderBottomTabContent(tab: BottomPanelTab, controls: BottomPanelRenderControls): ReactNode {
+    const fallback = <div style={{ padding: '12px', color: 'var(--text-dim)', fontSize: '12px' }}>Loading...</div>;
+    switch (tab) {
+        case 'terminal': return <Suspense fallback={fallback}><TerminalPanel onCollapse={controls.onCollapse} onEmptySessions={controls.onCloseTab} /></Suspense>;
+        case 'browser': return <Suspense fallback={fallback}><BrowserPanel onCollapse={controls.onCollapse} /></Suspense>;
+        default: return null;
+    }
+}
+
 export function SidebarRailRouter(props: Props) {
+    const panelLayout = usePanelLayout();
+    const [rightPreviewFilePath, setRightPreviewFilePath] = useState<string | null>(null);
     const [remindersView, setRemindersView] = useState<RemindersView>('matrix');
     const remindersFeed = useRemindersFeed({ active: props.sidebarMode === 'reminders' });
+    const desktopPanelsAvailable = currentManagerSurface() === 'electron';
+    const rightPanelOpen = desktopPanelsAvailable && panelLayout.effectiveRightOpen;
+    const bottomPanelOpen = desktopPanelsAvailable && panelLayout.state.bottomPanel.open;
     const notesSelectedHiddenByFilter = Boolean(
         props.notesModel.tagFilter
         && props.notesSelectedPath
         && props.notesSelectedNote
         && !props.notesSelectedNote.tags?.includes(props.notesModel.tagFilter),
     );
+    function handleRightPreviewFile(path: string): void {
+        setRightPreviewFilePath(path);
+        panelLayout.dispatch({ type: 'OPEN_RIGHT_PANEL', mode: 'doc', slot: 'bottom' });
+    }
 
     return (
         <NotesCommandProvider>
@@ -136,6 +193,12 @@ export function SidebarRailRouter(props: Props) {
             inspectorHeight={props.activityDockCollapsed ? 48 : props.activityDockHeight}
             drawerOpen={props.drawerOpen}
             onCloseDrawer={props.onCloseDrawer}
+            rightPanelOpen={rightPanelOpen}
+            rightPanelWidth={panelLayout.state.rightPanel.width}
+            rightPanelContent={rightPanelOpen ? <RightSidebar renderPanel={mode => renderRightPanelContent(mode, rightPreviewFilePath, handleRightPreviewFile, props.selectedInstance, props.dashboardSettingsUi, props.onDashboardSettingsPatch, props.notesModel)} /> : undefined}
+            bottomPanelOpen={bottomPanelOpen}
+            bottomPanelHeight={panelLayout.state.bottomPanel.height}
+            bottomPanelContent={bottomPanelOpen && panelLayout.state.bottomPanel.tabs.length > 0 ? <BottomPanel renderTab={renderBottomTabContent} /> : undefined}
             navigator={(
                 <>
                     <SidebarRail
@@ -153,7 +216,7 @@ export function SidebarRailRouter(props: Props) {
                         {props.sidebarMode === 'settings' ? (
                             <DashboardSettingsSidebar activeSection={props.settingsSection} locale={props.locale} onSectionChange={props.onSettingsSectionChange} />
                         ) : props.sidebarMode === 'notes' ? (
-                            <NotesSidebar tree={props.notesModel.filteredTree} loading={props.notesModel.loading} error={props.notesModel.error} notesRoot={props.notesModel.notesRoot} selectedPath={props.notesSelectedPath} dirtyPath={props.notesDirtyPath} treeWidth={props.notesTreeWidth} mode={props.notesSidebarMode} searchFocusToken={props.notesSearchFocusToken} tagFilter={props.notesModel.tagFilter} selectedHiddenByFilter={notesSelectedHiddenByFilter} onModeChange={props.onNotesSidebarModeChange} onOpenSearch={props.onOpenNotesSearch} onSelectedPathChange={props.onNotesSelectedPathChange} onRefreshTree={props.notesModel.refresh} onClearTagFilter={() => props.notesModel.setTagFilter(null)} />
+                            <NotesSidebar tree={props.notesModel.filteredTree} loading={props.notesModel.loading} error={props.notesModel.error} notesRoot={props.notesModel.notesRoot} selectedPath={props.notesSelectedPath} dirtyPath={props.notesDirtyPath} highlightedPath={props.notesHighlightedPath} externalFocusPath={props.notesSelectedPath} treeWidth={props.notesTreeWidth} mode={props.notesSidebarMode} searchFocusToken={props.notesSearchFocusToken} tagFilter={props.notesModel.tagFilter} selectedHiddenByFilter={notesSelectedHiddenByFilter} onModeChange={props.onNotesSidebarModeChange} onOpenSearch={props.onOpenNotesSearch} onSelectedPathChange={props.onNotesSelectedPathChange} onRefreshTree={props.notesModel.refresh} onClearTagFilter={() => props.notesModel.setTagFilter(null)} />
                         ) : props.sidebarMode === 'board' ? (
                             <DashboardBoardSidebar view={props.boardView} onViewChange={props.onBoardViewChange} instances={props.instances} titlesByPort={props.titlesByPort} busyPorts={props.busyPorts} />
                         ) : props.scheduleWorkspaceEnabled && props.sidebarMode === 'schedule' ? (
@@ -180,11 +243,11 @@ export function SidebarRailRouter(props: Props) {
                     <div className="workspace-surface-layer">
                         <WorkspaceSurface active={props.sidebarMode === 'instances'}>
                             <Workbench mode={props.activeDetailTab} onModeChange={props.onDetailTabChange} header={props.workbenchHeader} modeActions={props.jawCeoWorkbenchButton} overview={props.detailContent('overview')} preview={(
-                                <InstancePreview instance={props.selectedInstance} data={props.data} enabled={props.previewEnabled} active={props.sidebarMode === 'instances' && props.activeDetailTab === 'preview'} refreshKey={props.previewRefreshKey} theme={props.previewTheme} />
+                                <InstancePreview instance={props.selectedInstance} data={props.data} enabled={props.previewEnabled} active={props.sidebarMode === 'instances' && props.activeDetailTab === 'preview'} refreshKey={props.previewRefreshKey} theme={props.previewTheme} {...(props.onOpenNotesFromPreview ? { onOpenNotesFromPreview: props.onOpenNotesFromPreview } : {})} />
                             )} logs={props.detailContent('logs')} settings={props.detailContent('settings')} />
                         </WorkspaceSurface>
                         <WorkspaceSurface active={props.sidebarMode === 'notes'}>
-                            <NotesWorkspace active={props.sidebarMode === 'notes'} selectedPath={props.notesSelectedPath} selectedNote={props.notesSelectedNote} vaultIndex={props.notesModel.index} viewMode={props.notesViewMode} authoringMode={props.notesAuthoringMode} wordWrap={props.notesWordWrap} treeWidth={props.notesTreeWidth} tagFilter={props.notesModel.tagFilter} onOpenSidebarSearch={props.onOpenNotesSearch} onSelectedPathChange={props.onNotesSelectedPathChange} onDirtyPathChange={props.onNotesDirtyPathChange} onViewModeChange={props.onNotesViewModeChange} onAuthoringModeChange={props.onNotesAuthoringModeChange} onWordWrapChange={props.onNotesWordWrapChange} onTreeWidthChange={props.onNotesTreeWidthChange} onTagSelect={props.notesModel.setTagFilter} onWikiLinkNavigate={props.onNotesSelectedPathChange} />
+                            <NotesWorkspace active={props.sidebarMode === 'notes'} selectedPath={props.notesSelectedPath} selectedNote={props.notesSelectedNote} vaultIndex={props.notesModel.index} viewMode={props.notesViewMode} authoringMode={props.notesAuthoringMode} wordWrap={props.notesWordWrap} vimMode={props.notesVimMode} treeWidth={props.notesTreeWidth} notesGraphSettings={props.notesGraphSettings} tagFilter={props.notesModel.tagFilter} onOpenSidebarSearch={props.onOpenNotesSearch} onSelectedPathChange={props.onNotesSelectedPathChange} onDirtyPathChange={props.onNotesDirtyPathChange} onViewModeChange={props.onNotesViewModeChange} onAuthoringModeChange={props.onNotesAuthoringModeChange} onWordWrapChange={props.onNotesWordWrapChange} onVimModeChange={props.onNotesVimModeChange} onTreeWidthChange={props.onNotesTreeWidthChange} onNotesGraphSettingsChange={props.onNotesGraphSettingsChange} onTagSelect={props.notesModel.setTagFilter} onWikiLinkNavigate={props.onNotesSelectedPathChange} />
                         </WorkspaceSurface>
                         <WorkspaceSurface active={props.sidebarMode === 'settings'}>
                             <DashboardSettingsWorkspace activeSection={props.settingsSection} ui={props.dashboardSettingsUi} titleSupport={props.titleSupport} onUiPatch={props.onDashboardSettingsPatch} onOpenHelpTopic={props.onOpenHelpTopic} />

package/public/manager/src/api.ts

@@ -1,5 +1,6 @@
 import type {
     DashboardInstance,
+    DashboardInstanceMessageResult,
     DashboardLifecycleAction,
     DashboardLifecycleResult,
     DashboardNoteAssetResponse,
@@ -102,6 +103,19 @@ export async function fetchInstanceStatus(port: number, options: { signal?: Abor
     return body.instance;
 }
 
+export async function sendInstanceMessage(
+    port: number,
+    prompt: string,
+): Promise<{ ok: boolean; status: number; data: DashboardInstanceMessageResult }> {
+    const response = await fetch(`/api/dashboard/instances/${port}/message`, {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ prompt }),
+    });
+    const data = await response.json().catch(() => ({})) as DashboardInstanceMessageResult;
+    return { ok: response.ok, status: response.status, data };
+}
+
 export async function fetchManagerEvents(since: string | null = null): Promise<ManagerEvent[]> {
     const path = since ? `/api/manager/events?since=${encodeURIComponent(since)}` : '/api/manager/events';
     const response = await fetch(path);
@@ -176,6 +190,38 @@ export async function fetchNoteTemplate(name: string): Promise<NoteTemplateConte
     return await parseNotesResponse<NoteTemplateContent>(response, `note template fetch failed: ${response.status}`);
 }
 
+export type NoteSnippetInfo = { name: string; file: string; enabled: boolean };
+export type NoteSnippetsResponse = { snippets: NoteSnippetInfo[]; activeTheme: string | null };
+
+export async function fetchNoteSnippets(): Promise<NoteSnippetsResponse> {
+    const response = await fetch('/api/dashboard/notes/snippets');
+    return await parseNotesResponse<NoteSnippetsResponse>(response, `note snippets fetch failed: ${response.status}`);
+}
+
+export async function fetchNoteSnippetCss(name: string): Promise<string> {
+    const response = await fetch(`/api/dashboard/notes/snippets/file?name=${encodeURIComponent(name)}`);
+    if (!response.ok) throw new DashboardApiError(`snippet fetch failed: ${response.status}`, response.status);
+    return await response.text();
+}
+
+export async function toggleNoteSnippet(name: string, enabled: boolean): Promise<void> {
+    const response = await fetch('/api/dashboard/notes/snippets/toggle', {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ name, enabled }),
+    });
+    if (!response.ok) throw new DashboardApiError(`snippet toggle failed: ${response.status}`, response.status);
+}
+
+export async function setNoteTheme(theme: string | null): Promise<void> {
+    const response = await fetch('/api/dashboard/notes/theme', {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ theme }),
+    });
+    if (!response.ok) throw new DashboardApiError(`theme set failed: ${response.status}`, response.status);
+}
+
 export async function fetchNotesIndex(): Promise<VaultIndexSnapshot> {
     const response = await fetch('/api/dashboard/notes/index');
     return await parseNotesResponse<VaultIndexSnapshot>(response, `notes index fetch failed: ${response.status}`);

package/public/manager/src/browser-panel/BrowserPanel.tsx

@@ -0,0 +1,445 @@
+import { createElement, useCallback, useEffect, useRef, useState } from 'react';
+import { getDesktop, isElectron } from '../panels/desktop-bridge';
+import { DEFAULT_BROWSER_URL, isRestrictedBrowserHost, normalizeBrowserTarget } from './browser-url';
+import './browser-panel.css';
+
+type ElectronWebviewElement = HTMLElement & {
+    src: string;
+    reload: () => void;
+    canGoBack: () => boolean;
+    canGoForward: () => boolean;
+    goBack: () => void;
+    goForward: () => void;
+    getURL?: () => string;
+};
+
+type BrowserOpenPayload = {
+    url: string;
+    disposition: 'current-tab' | 'new-tab';
+};
+
+type ElectronWebviewEvent = Event & {
+    url?: string;
+    title?: string;
+    errorCode?: number;
+    errorDescription?: string;
+    validatedURL?: string;
+    isMainFrame?: boolean;
+    details?: {
+        reason?: string;
+    };
+};
+
+type BrowserTabState = {
+    id: string;
+    url: string;
+    inputUrl: string;
+    title: string;
+    blocked: boolean;
+    loading: boolean;
+    status: string | null;
+    error: string | null;
+    canGoBack: boolean;
+    canGoForward: boolean;
+};
+
+type BrowserPanelProps = {
+    onCollapse?: () => void;
+};
+
+function isUrlAllowed(target: string, desktop: boolean): boolean {
+    try {
+        const parsed = new URL(target);
+        if (parsed.protocol !== 'https:' && parsed.protocol !== 'http:') return false;
+        if (desktop) return true;
+        if (isRestrictedBrowserHost(parsed.hostname)) return false;
+        if (parsed.origin === window.location.origin) return false;
+        return true;
+    } catch {
+        return false;
+    }
+}
+
+function sameBrowserUrl(left: string, right: string): boolean {
+    try {
+        return new URL(left).href === new URL(right).href;
+    } catch {
+        return left === right;
+    }
+}
+
+function titleFromUrl(target: string): string {
+    try {
+        const parsed = new URL(target);
+        return parsed.hostname.replace(/^www\./, '') || 'Browser';
+    } catch {
+        return 'Browser';
+    }
+}
+
+function embeddedBrowserUserAgent(): string {
+    const chromeVersion = navigator.userAgent.match(/\bChrome\/([0-9.]+)/)?.[1] ?? '120.0.0.0';
+    const platform = navigator.platform.toLowerCase();
+    const osToken = platform.includes('mac')
+        ? 'Macintosh; Intel Mac OS X 10_15_7'
+        : platform.includes('win')
+            ? 'Windows NT 10.0; Win64; x64'
+            : 'X11; Linux x86_64';
+    return `Mozilla/5.0 (${osToken}) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/${chromeVersion} Safari/537.36`;
+}
+
+function createBrowserTab(id: string, target = DEFAULT_BROWSER_URL): BrowserTabState {
+    return {
+        id,
+        url: target,
+        inputUrl: target,
+        title: titleFromUrl(target),
+        blocked: false,
+        loading: false,
+        status: null,
+        error: null,
+        canGoBack: false,
+        canGoForward: false,
+    };
+}
+
+export function BrowserPanel(props: BrowserPanelProps = {}) {
+    const desktop = isElectron();
+    const initialTab = useRef<BrowserTabState>(createBrowserTab('browser-tab-1'));
+    const nextTabIndex = useRef(2);
+    const [tabs, setTabs] = useState<BrowserTabState[]>(() => [initialTab.current]);
+    const [activeTabId, setActiveTabId] = useState(initialTab.current.id);
+    const inputRef = useRef<HTMLInputElement | null>(null);
+    const editingTabIdRef = useRef<string | null>(null);
+    const inputDraftRef = useRef<{ tabId: string; value: string } | null>(null);
+    const pendingNavigationRefs = useRef<Map<string, string>>(new Map());
+    const webviewRefs = useRef<Map<string, ElectronWebviewElement>>(new Map());
+    const webviewCleanupRefs = useRef<Map<string, () => void>>(new Map());
+    const webviewUserAgent = useRef(embeddedBrowserUserAgent());
+
+    const activeTab = tabs.find(tab => tab.id === activeTabId) ?? tabs[0] ?? initialTab.current;
+
+    const updateTab = useCallback((id: string, patch: Partial<BrowserTabState>) => {
+        setTabs(current => current.map(tab => tab.id === id ? { ...tab, ...patch } : tab));
+    }, []);
+
+    const refreshNavState = useCallback((tabId: string) => {
+        const webview = webviewRefs.current.get(tabId);
+        if (!webview) return;
+        try {
+            const patch: Partial<BrowserTabState> = {
+                canGoBack: webview.canGoBack(),
+                canGoForward: webview.canGoForward(),
+            };
+            const current = webview.getURL?.();
+            if (current && isUrlAllowed(current, desktop)) {
+                const pendingTarget = pendingNavigationRefs.current.get(tabId);
+                if (pendingTarget && !sameBrowserUrl(current, pendingTarget)) {
+                    updateTab(tabId, patch);
+                    return;
+                }
+                if (pendingTarget) {
+                    pendingNavigationRefs.current.delete(tabId);
+                }
+                patch.url = current;
+                patch.title = titleFromUrl(current);
+                if (editingTabIdRef.current !== tabId) {
+                    patch.inputUrl = current;
+                }
+            }
+            updateTab(tabId, patch);
+        } catch {
+            // webview may not be ready yet
+        }
+    }, [desktop, updateTab]);
+
+    const attachWebviewEvents = useCallback((tabId: string, webview: ElectronWebviewElement) => {
+        if (!desktop) return () => {};
+        const handleStart = () => {
+            updateTab(tabId, { loading: true, error: null });
+        };
+        const handleStop = () => {
+            updateTab(tabId, { loading: false });
+            refreshNavState(tabId);
+        };
+        const handleNavigate = (event: Event) => {
+            const nextUrl = (event as ElectronWebviewEvent).url;
+            if (nextUrl && isUrlAllowed(nextUrl, desktop)) {
+                const pendingTarget = pendingNavigationRefs.current.get(tabId);
+                if (pendingTarget && !sameBrowserUrl(nextUrl, pendingTarget)) {
+                    refreshNavState(tabId);
+                    return;
+                }
+                if (pendingTarget) {
+                    pendingNavigationRefs.current.delete(tabId);
+                }
+                const patch: Partial<BrowserTabState> = {
+                    url: nextUrl,
+                    title: titleFromUrl(nextUrl),
+                };
+                if (editingTabIdRef.current !== tabId) {
+                    patch.inputUrl = nextUrl;
+                }
+                updateTab(tabId, patch);
+            }
+            refreshNavState(tabId);
+        };
+        const handleTitle = (event: Event) => {
+            const nextTitle = (event as ElectronWebviewEvent).title?.trim();
+            if (nextTitle) updateTab(tabId, { title: nextTitle });
+        };
+        const handleFail = (event: Event) => {
+            const failure = event as ElectronWebviewEvent;
+            if (failure.isMainFrame === false) return;
+            const pendingTarget = pendingNavigationRefs.current.get(tabId);
+            const failedUrl = failure.validatedURL ?? failure.url;
+            if (pendingTarget && failedUrl && !sameBrowserUrl(failedUrl, pendingTarget)) return;
+            pendingNavigationRefs.current.delete(tabId);
+            updateTab(tabId, {
+                loading: false,
+                error: failure.errorDescription ?? `Navigation failed (${failure.errorCode ?? 'unknown'})`,
+            });
+            refreshNavState(tabId);
+        };
+        const handleRenderGone = (event: Event) => {
+            const reason = (event as ElectronWebviewEvent).details?.reason ?? 'gone';
+            pendingNavigationRefs.current.delete(tabId);
+            updateTab(tabId, {
+                loading: false,
+                error: `Browser tab process ${reason}. Reload this tab or open a new tab.`,
+            });
+        };
+        const handleDomReady = () => refreshNavState(tabId);
+        webview.addEventListener('did-start-loading', handleStart);
+        webview.addEventListener('did-stop-loading', handleStop);
+        webview.addEventListener('did-navigate', handleNavigate);
+        webview.addEventListener('did-navigate-in-page', handleNavigate);
+        webview.addEventListener('page-title-updated', handleTitle);
+        webview.addEventListener('did-fail-load', handleFail);
+        webview.addEventListener('render-process-gone', handleRenderGone);
+        webview.addEventListener('dom-ready', handleDomReady);
+        return () => {
+            webview.removeEventListener('did-start-loading', handleStart);
+            webview.removeEventListener('did-stop-loading', handleStop);
+            webview.removeEventListener('did-navigate', handleNavigate);
+            webview.removeEventListener('did-navigate-in-page', handleNavigate);
+            webview.removeEventListener('page-title-updated', handleTitle);
+            webview.removeEventListener('did-fail-load', handleFail);
+            webview.removeEventListener('render-process-gone', handleRenderGone);
+            webview.removeEventListener('dom-ready', handleDomReady);
+        };
+    }, [desktop, refreshNavState, updateTab]);
+
+    const setWebviewRef = useCallback((id: string, node: Element | null) => {
+        webviewCleanupRefs.current.get(id)?.();
+        webviewCleanupRefs.current.delete(id);
+        if (!node) {
+            webviewRefs.current.delete(id);
+            return;
+        }
+        const webview = node as ElectronWebviewElement;
+        webviewRefs.current.set(id, webview);
+        webviewCleanupRefs.current.set(id, attachWebviewEvents(id, webview));
+        refreshNavState(id);
+    }, [attachWebviewEvents, refreshNavState]);
+
+    useEffect(() => () => {
+        for (const cleanup of webviewCleanupRefs.current.values()) cleanup();
+        webviewCleanupRefs.current.clear();
+        webviewRefs.current.clear();
+    }, []);
+
+    const blockedUrlMessage = useCallback(() => (
+        desktop ? 'Only http and https URLs are supported.' : 'Local, private, and same-origin URLs are blocked.'
+    ), [desktop]);
+
+    const openUrlInTab = useCallback((tabId: string, rawTarget: string) => {
+        const target = normalizeBrowserTarget(rawTarget);
+        if (!target) return;
+        if (!isUrlAllowed(target, desktop)) {
+            pendingNavigationRefs.current.delete(tabId);
+            updateTab(tabId, {
+                blocked: true,
+                inputUrl: rawTarget,
+                error: blockedUrlMessage(),
+            });
+            return;
+        }
+        pendingNavigationRefs.current.set(tabId, target);
+        updateTab(tabId, {
+            blocked: false,
+            error: null,
+            status: desktop ? null : 'Opened in a new browser tab. Web UI does not embed external pages.',
+            inputUrl: target,
+            url: target,
+            title: titleFromUrl(target),
+        });
+        if (!desktop) {
+            const opened = window.open(target, '_blank', 'noopener,noreferrer');
+            if (!opened) updateTab(tabId, { error: 'Popup blocked. Allow popups or copy the URL from the address field.' });
+        }
+    }, [blockedUrlMessage, desktop, updateTab]);
+
+    const addTab = useCallback((rawTarget = DEFAULT_BROWSER_URL) => {
+        const target = normalizeBrowserTarget(rawTarget) ?? DEFAULT_BROWSER_URL;
+        const allowed = isUrlAllowed(target, desktop);
+        const tab = createBrowserTab(`browser-tab-${nextTabIndex.current++}`, allowed ? target : DEFAULT_BROWSER_URL);
+        if (!allowed) {
+            tab.blocked = true;
+            tab.inputUrl = rawTarget;
+            tab.error = blockedUrlMessage();
+        }
+        setTabs(current => [...current, tab]);
+        setActiveTabId(tab.id);
+    }, [blockedUrlMessage, desktop]);
+
+    const closeTab = useCallback((id: string) => {
+        pendingNavigationRefs.current.delete(id);
+        setTabs(current => {
+            if (current.length <= 1) {
+                const replacement = createBrowserTab(`browser-tab-${nextTabIndex.current++}`);
+                setActiveTabId(replacement.id);
+                return [replacement];
+            }
+            const index = current.findIndex(tab => tab.id === id);
+            const next = current.filter(tab => tab.id !== id);
+            if (id === activeTabId) {
+                const fallback = next[Math.max(0, index - 1)] ?? next[0];
+                setActiveTabId(fallback.id);
+            }
+            return next;
+        });
+    }, [activeTabId]);
+
+    const navigate = useCallback(() => {
+        const rawTarget = inputDraftRef.current?.tabId === activeTab.id
+            ? inputDraftRef.current.value
+            : inputRef.current?.value ?? activeTab.inputUrl;
+        editingTabIdRef.current = null;
+        inputDraftRef.current = null;
+        openUrlInTab(activeTab.id, rawTarget);
+    }, [activeTab.id, activeTab.inputUrl, openUrlInTab]);
+
+    const markUrlEditing = useCallback(() => {
+        editingTabIdRef.current = activeTab.id;
+        inputDraftRef.current = {
+            tabId: activeTab.id,
+            value: inputRef.current?.value ?? activeTab.inputUrl,
+        };
+    }, [activeTab.id, activeTab.inputUrl]);
+
+    const clearUrlEditingSoon = useCallback(() => {
+        window.setTimeout(() => {
+            if (document.activeElement !== inputRef.current && editingTabIdRef.current === activeTab.id) {
+                editingTabIdRef.current = null;
+                refreshNavState(activeTab.id);
+            }
+        }, 150);
+    }, [activeTab.id, refreshNavState]);
+
+    useEffect(() => {
+        return getDesktop()?.browser?.onOpenUrl?.((payload: BrowserOpenPayload) => {
+            if (payload.disposition === 'current-tab') {
+                openUrlInTab(activeTabId, payload.url);
+            } else {
+                addTab(payload.url);
+            }
+        });
+    }, [activeTabId, addTab, openUrlInTab]);
+
+    return (
+        <div className="browser-panel">
+            <div className="browser-tab-strip" aria-label="Browser tabs">
+                {tabs.map(tab => (
+                    <div key={tab.id} className={`browser-tab-item${tab.id === activeTab.id ? ' is-active' : ''}`}>
+                        <button
+                            type="button"
+                            className="browser-tab"
+                            aria-label={`Switch to ${tab.title}`}
+                            aria-pressed={tab.id === activeTab.id}
+                            onClick={() => setActiveTabId(tab.id)}
+                            title={tab.title}
+                        >
+                            <span className="browser-tab-title">{tab.loading ? 'Loading...' : tab.title}</span>
+                        </button>
+                        <button
+                            type="button"
+                            className="browser-tab-close"
+                            aria-label={`Close ${tab.title}`}
+                            title="Close tab"
+                            onClick={() => closeTab(tab.id)}
+                        >
+                            ×
+                        </button>
+                    </div>
+                ))}
+                <button type="button" className="browser-tab-add" aria-label="New browser tab" title="New tab" onClick={() => addTab()}>+</button>
+                {props.onCollapse && (
+                    <button
+                        type="button"
+                        className="browser-collapse-button"
+                        aria-label="Collapse browser panel"
+                        title="Collapse browser panel"
+                        onClick={props.onCollapse}
+                    >
+                        ▼
+                    </button>
+                )}
+            </div>
+            <div className="browser-toolbar">
+                <button type="button" className="browser-nav-btn" aria-label="Back" disabled={!desktop || !activeTab.canGoBack} onClick={() => webviewRefs.current.get(activeTab.id)?.goBack()}>‹</button>
+                <button type="button" className="browser-nav-btn" aria-label="Forward" disabled={!desktop || !activeTab.canGoForward} onClick={() => webviewRefs.current.get(activeTab.id)?.goForward()}>›</button>
+                <button type="button" className="browser-nav-btn" aria-label="Reload" disabled={!desktop} onClick={() => webviewRefs.current.get(activeTab.id)?.reload()}>↻</button>
+                <input
+                    ref={inputRef}
+                    className="browser-url-input"
+                    type="text"
+                    value={activeTab.inputUrl}
+                    onFocus={markUrlEditing}
+                    onBlur={clearUrlEditingSoon}
+                    onChange={event => {
+                        editingTabIdRef.current = activeTab.id;
+                        inputDraftRef.current = {
+                            tabId: activeTab.id,
+                            value: event.target.value,
+                        };
+                        updateTab(activeTab.id, { inputUrl: event.target.value });
+                    }}
+                    onKeyDown={event => { if (event.key === 'Enter') navigate(); }}
+                    aria-label="URL"
+                />
+                <button type="button" className="browser-go-btn" onMouseDown={event => event.preventDefault()} onClick={navigate}>{desktop ? 'Go' : 'Open'}</button>
+            </div>
+            {(activeTab.blocked || activeTab.error || activeTab.loading || activeTab.status) && (
+                <div className={`browser-status${activeTab.error ? ' is-error' : ''}`}>
+                    {activeTab.error ?? (activeTab.loading ? 'Loading...' : activeTab.status ?? 'Blocked')}
+                </div>
+            )}
+            {desktop ? (
+                <div className="browser-webview-stack">
+                    <div key={activeTab.id} className="browser-webview-host is-active">
+                        {createElement('webview', {
+                            ref: (node: Element | null) => setWebviewRef(activeTab.id, node),
+                            className: 'browser-webview',
+                            src: activeTab.url,
+                            partition: 'persist:cli-jaw-browser',
+                            useragent: webviewUserAgent.current,
+                            allowpopups: 'true',
+                            webpreferences: 'contextIsolation=yes,sandbox=yes,nodeIntegration=no',
+                        })}
+                    </div>
+                </div>
+            ) : (
+                <div className="browser-external-surface">
+                    <div className="browser-external-title">Web browser launcher</div>
+                    <div className="browser-external-body">
+                        External URLs open in your browser tab. Local/private targets stay blocked from the Web UI.
+                    </div>
+                    <button type="button" className="browser-external-open" onClick={navigate}>
+                        Open current URL
+                    </button>
+                </div>
+            )}
+        </div>
+    );
+}