cli-jaw 2.0.10 → 2.0.16

package/public/manager/src/panels/PanelLayoutProvider.tsx

@@ -0,0 +1,288 @@
+import { createContext, useContext, useReducer, useCallback, useMemo, useEffect, useRef } from 'react';
+import type { ReactNode } from 'react';
+import { panelShortcutBus } from './panel-shortcut-bus';
+import type { RightPanelMode, BottomPanelTab } from './types';
+import {
+    RIGHT_PANEL_DEFAULT_WIDTH, RIGHT_PANEL_MIN_WIDTH, RIGHT_PANEL_MAX_WIDTH,
+    RIGHT_SPLIT_MIN_RATIO, RIGHT_SPLIT_MAX_RATIO,
+    BOTTOM_PANEL_DEFAULT_HEIGHT, BOTTOM_PANEL_MIN_HEIGHT, BOTTOM_PANEL_MAX_HEIGHT,
+    RIGHT_PANEL_MODES, BOTTOM_PANEL_TABS,
+} from './types';
+
+export type PanelLayoutState = {
+    rightPanel: {
+        open: boolean;
+        width: number;
+        topMode: RightPanelMode | null;
+        bottomMode: RightPanelMode | null;
+        splitRatio: number;
+    };
+    bottomPanel: {
+        open: boolean;
+        height: number;
+        tabs: BottomPanelTab[];
+        activeTab: BottomPanelTab | null;
+    };
+};
+
+type Action =
+    | { type: 'SET_RIGHT_OPEN'; open: boolean }
+    | { type: 'SET_RIGHT_WIDTH'; width: number }
+    | { type: 'SET_RIGHT_TOP_MODE'; mode: RightPanelMode | null }
+    | { type: 'SET_RIGHT_BOTTOM_MODE'; mode: RightPanelMode | null }
+    | { type: 'SET_RIGHT_SPLIT_RATIO'; ratio: number }
+    | { type: 'OPEN_RIGHT_PANEL'; mode: RightPanelMode; slot?: 'top' | 'bottom' | undefined }
+    | { type: 'CLOSE_RIGHT_SUB'; slot: 'top' | 'bottom' }
+    | { type: 'SOLO_RIGHT_SUB'; slot: 'top' | 'bottom' }
+    | { type: 'SET_BOTTOM_OPEN'; open: boolean }
+    | { type: 'SET_BOTTOM_HEIGHT'; height: number }
+    | { type: 'OPEN_BOTTOM_TAB'; tab: BottomPanelTab }
+    | { type: 'CLOSE_BOTTOM_TAB'; tab: BottomPanelTab }
+    | { type: 'SET_BOTTOM_ACTIVE_TAB'; tab: BottomPanelTab }
+    | { type: 'HYDRATE'; state: Partial<PanelLayoutState> };
+
+function clampWidth(w: number): number {
+    if (typeof w !== 'number' || !Number.isFinite(w)) return RIGHT_PANEL_DEFAULT_WIDTH;
+    return Math.min(RIGHT_PANEL_MAX_WIDTH, Math.max(RIGHT_PANEL_MIN_WIDTH, Math.round(w)));
+}
+
+function clampHeight(h: number): number {
+    if (typeof h !== 'number' || !Number.isFinite(h)) return BOTTOM_PANEL_DEFAULT_HEIGHT;
+    return Math.min(BOTTOM_PANEL_MAX_HEIGHT, Math.max(BOTTOM_PANEL_MIN_HEIGHT, Math.round(h)));
+}
+
+function clampRatio(r: number): number {
+    if (typeof r !== 'number' || !Number.isFinite(r)) return 0.5;
+    return Math.min(RIGHT_SPLIT_MAX_RATIO, Math.max(RIGHT_SPLIT_MIN_RATIO, r));
+}
+
+function normalizeRightPanel(panel: PanelLayoutState['rightPanel']): PanelLayoutState['rightPanel'] {
+    const next = { ...panel };
+    next.width = clampWidth(next.width);
+    next.splitRatio = clampRatio(next.splitRatio);
+    if (next.topMode !== null && !RIGHT_PANEL_MODES.includes(next.topMode)) next.topMode = null;
+    if (next.bottomMode !== null && !RIGHT_PANEL_MODES.includes(next.bottomMode)) next.bottomMode = null;
+    if (next.topMode === null && next.bottomMode !== null) {
+        next.topMode = next.bottomMode;
+        next.bottomMode = null;
+    }
+    if (next.topMode !== null && next.topMode === next.bottomMode) next.bottomMode = null;
+    if (next.topMode === null && next.bottomMode === null) next.open = false;
+    return next;
+}
+
+function reducer(state: PanelLayoutState, action: Action): PanelLayoutState {
+    switch (action.type) {
+        case 'SET_RIGHT_OPEN':
+            return { ...state, rightPanel: { ...state.rightPanel, open: action.open } };
+        case 'SET_RIGHT_WIDTH':
+            return { ...state, rightPanel: { ...state.rightPanel, width: clampWidth(action.width) } };
+        case 'SET_RIGHT_TOP_MODE':
+            return { ...state, rightPanel: { ...state.rightPanel, topMode: action.mode } };
+        case 'SET_RIGHT_BOTTOM_MODE':
+            return { ...state, rightPanel: { ...state.rightPanel, bottomMode: action.mode } };
+        case 'SET_RIGHT_SPLIT_RATIO':
+            return { ...state, rightPanel: { ...state.rightPanel, splitRatio: clampRatio(action.ratio) } };
+        case 'OPEN_RIGHT_PANEL': {
+            const rp = state.rightPanel;
+            const slot = action.slot ?? (rp.topMode === null ? 'top' : 'bottom');
+            return {
+                ...state,
+                rightPanel: normalizeRightPanel({
+                    ...rp,
+                    open: true,
+                    [slot === 'top' ? 'topMode' : 'bottomMode']: action.mode,
+                }),
+            };
+        }
+        case 'CLOSE_RIGHT_SUB': {
+            const rp = state.rightPanel;
+            const next = {
+                ...rp,
+                [action.slot === 'top' ? 'topMode' : 'bottomMode']: null,
+            };
+            if (next.topMode === null && next.bottomMode !== null) {
+                next.topMode = next.bottomMode;
+                next.bottomMode = null;
+            }
+            if (next.topMode === null && next.bottomMode === null) next.open = false;
+            return { ...state, rightPanel: next };
+        }
+        case 'SOLO_RIGHT_SUB': {
+            const rp = state.rightPanel;
+            const mode = action.slot === 'top' ? rp.topMode : rp.bottomMode;
+            if (mode === null) return state;
+            return {
+                ...state,
+                rightPanel: {
+                    ...rp,
+                    open: true,
+                    topMode: mode,
+                    bottomMode: null,
+                    splitRatio: 0.5,
+                },
+            };
+        }
+        case 'SET_BOTTOM_OPEN':
+            return { ...state, bottomPanel: { ...state.bottomPanel, open: action.open } };
+        case 'SET_BOTTOM_HEIGHT':
+            return { ...state, bottomPanel: { ...state.bottomPanel, height: clampHeight(action.height) } };
+        case 'OPEN_BOTTOM_TAB': {
+            const bp = state.bottomPanel;
+            const tabs = bp.tabs.includes(action.tab) ? bp.tabs : [...bp.tabs, action.tab];
+            return { ...state, bottomPanel: { ...bp, open: true, tabs, activeTab: action.tab } };
+        }
+        case 'CLOSE_BOTTOM_TAB': {
+            const bp = state.bottomPanel;
+            const tabs = bp.tabs.filter(t => t !== action.tab);
+            const activeTab = bp.activeTab === action.tab ? (tabs[0] ?? null) : bp.activeTab;
+            const open = tabs.length > 0;
+            return { ...state, bottomPanel: { ...bp, tabs, activeTab, open } };
+        }
+        case 'SET_BOTTOM_ACTIVE_TAB':
+            return { ...state, bottomPanel: { ...state.bottomPanel, activeTab: action.tab } };
+        case 'HYDRATE': {
+            const h = action.state;
+            const rp = normalizeRightPanel({ ...state.rightPanel, ...h.rightPanel });
+            const bp = { ...state.bottomPanel, ...h.bottomPanel };
+            bp.height = clampHeight(bp.height);
+            bp.tabs = (bp.tabs ?? []).filter(t => BOTTOM_PANEL_TABS.includes(t));
+            if (bp.activeTab !== null && !bp.tabs.includes(bp.activeTab)) bp.activeTab = bp.tabs[0] ?? null;
+            return { rightPanel: rp, bottomPanel: bp };
+        }
+        default:
+            return state;
+    }
+}
+
+const initialState: PanelLayoutState = {
+    rightPanel: {
+        open: false,
+        width: RIGHT_PANEL_DEFAULT_WIDTH,
+        topMode: null,
+        bottomMode: null,
+        splitRatio: 0.5,
+    },
+    bottomPanel: {
+        open: false,
+        height: BOTTOM_PANEL_DEFAULT_HEIGHT,
+        tabs: [],
+        activeTab: null,
+    },
+};
+
+type PanelLayoutContextValue = {
+    state: PanelLayoutState;
+    dispatch: React.Dispatch<Action>;
+    effectiveRightOpen: boolean;
+    rightPanelSplit: boolean;
+};
+
+const PanelLayoutContext = createContext<PanelLayoutContextValue | null>(null);
+
+export function PanelLayoutProvider(props: {
+    children: ReactNode;
+    initialPanelState?: Partial<PanelLayoutState> | undefined;
+    onStateChange?: ((state: PanelLayoutState) => void) | undefined;
+}) {
+    const [state, dispatch] = useReducer(reducer, initialState);
+
+    const hydratedRef = useRef(false);
+    useEffect(() => {
+        if (!props.initialPanelState || hydratedRef.current) return;
+        hydratedRef.current = true;
+        dispatch({ type: 'HYDRATE', state: props.initialPanelState });
+    }, [props.initialPanelState]);
+
+    const onChangeRef = useRef(props.onStateChange);
+    onChangeRef.current = props.onStateChange;
+    useEffect(() => {
+        if (!onChangeRef.current) return;
+        const timer = setTimeout(() => onChangeRef.current?.(state), 300);
+        return () => clearTimeout(timer);
+    }, [state]);
+
+    const effectiveRightOpen = state.rightPanel.open
+        && (state.rightPanel.topMode !== null || state.rightPanel.bottomMode !== null);
+    const rightPanelSplit = state.rightPanel.topMode !== null && state.rightPanel.bottomMode !== null;
+
+    useEffect(() => {
+        return panelShortcutBus.register((action) => {
+            switch (action) {
+                case 'toggleBottomPanel':
+                    if (state.bottomPanel.open) dispatch({ type: 'SET_BOTTOM_OPEN', open: false });
+                    else dispatch({ type: 'OPEN_BOTTOM_TAB', tab: 'terminal' });
+                    return true;
+                case 'toggleRightPanel':
+                    if (state.rightPanel.open && (state.rightPanel.topMode !== null || state.rightPanel.bottomMode !== null)) {
+                        dispatch({ type: 'SET_RIGHT_OPEN', open: false });
+                    } else {
+                        dispatch({ type: 'OPEN_RIGHT_PANEL', mode: 'folder', slot: 'top' });
+                    }
+                    return true;
+                case 'focusTerminal':
+                    dispatch({ type: 'OPEN_BOTTOM_TAB', tab: 'terminal' });
+                    return true;
+                case 'openDiff':
+                    dispatch({ type: 'OPEN_RIGHT_PANEL', mode: 'diff' });
+                    return true;
+                case 'openFolderTree':
+                    dispatch({ type: 'OPEN_RIGHT_PANEL', mode: 'folder' });
+                    return true;
+                default:
+                    return false;
+            }
+        });
+    }, [state.bottomPanel.open, state.rightPanel.open]);
+
+    const value = useMemo(() => ({
+        state, dispatch, effectiveRightOpen, rightPanelSplit,
+    }), [state, effectiveRightOpen, rightPanelSplit]);
+
+    return (
+        <PanelLayoutContext.Provider value={value}>
+            {props.children}
+        </PanelLayoutContext.Provider>
+    );
+}
+
+export function usePanelLayout(): PanelLayoutContextValue {
+    const ctx = useContext(PanelLayoutContext);
+    if (!ctx) throw new Error('usePanelLayout must be used within PanelLayoutProvider');
+    return ctx;
+}
+
+export function usePanelActions() {
+    const { dispatch, state } = usePanelLayout();
+
+    return useMemo(() => ({
+        openRightPanel: (mode: RightPanelMode, slot?: 'top' | 'bottom') =>
+            dispatch({ type: 'OPEN_RIGHT_PANEL', mode, slot }),
+        closeRightSub: (slot: 'top' | 'bottom') =>
+            dispatch({ type: 'CLOSE_RIGHT_SUB', slot }),
+        soloRightSub: (slot: 'top' | 'bottom') =>
+            dispatch({ type: 'SOLO_RIGHT_SUB', slot }),
+        setRightWidth: (width: number) =>
+            dispatch({ type: 'SET_RIGHT_WIDTH', width }),
+        setRightSplitRatio: (ratio: number) =>
+            dispatch({ type: 'SET_RIGHT_SPLIT_RATIO', ratio }),
+        toggleRightPanel: () =>
+            state.rightPanel.open && (state.rightPanel.topMode !== null || state.rightPanel.bottomMode !== null)
+                ? dispatch({ type: 'SET_RIGHT_OPEN', open: false })
+                : dispatch({ type: 'OPEN_RIGHT_PANEL', mode: 'folder', slot: 'top' }),
+        openBottomTab: (tab: BottomPanelTab) =>
+            dispatch({ type: 'OPEN_BOTTOM_TAB', tab }),
+        closeBottomTab: (tab: BottomPanelTab) =>
+            dispatch({ type: 'CLOSE_BOTTOM_TAB', tab }),
+        setBottomActiveTab: (tab: BottomPanelTab) =>
+            dispatch({ type: 'SET_BOTTOM_ACTIVE_TAB', tab }),
+        setBottomHeight: (height: number) =>
+            dispatch({ type: 'SET_BOTTOM_HEIGHT', height }),
+        toggleBottomPanel: () =>
+            state.bottomPanel.open
+                ? dispatch({ type: 'SET_BOTTOM_OPEN', open: false })
+                : dispatch({ type: 'OPEN_BOTTOM_TAB', tab: 'terminal' }),
+        hydrate: (s: Partial<PanelLayoutState>) =>
+            dispatch({ type: 'HYDRATE', state: s }),
+    }), [dispatch, state.rightPanel.open, state.bottomPanel.open]);
+}

package/public/manager/src/panels/PanelResizer.tsx

@@ -0,0 +1,71 @@
+import { useCallback, useEffect, useRef } from 'react';
+import type { PointerEvent as ReactPointerEvent } from 'react';
+
+type PanelResizerProps = {
+    direction: 'horizontal' | 'vertical';
+    onDelta: (delta: number) => void;
+    onEnd?: (() => void) | undefined;
+    className?: string | undefined;
+};
+
+export function PanelResizer(props: PanelResizerProps) {
+    const dragging = useRef(false);
+    const lastPos = useRef(0);
+    const { direction, onDelta, onEnd } = props;
+
+    const handlePointerMove = useCallback((e: PointerEvent) => {
+        if (!dragging.current) return;
+        const pos = direction === 'horizontal' ? e.clientX : e.clientY;
+        const delta = pos - lastPos.current;
+        lastPos.current = pos;
+        if (delta !== 0) onDelta(delta);
+    }, [direction, onDelta]);
+
+    const handlePointerUp = useCallback(() => {
+        if (!dragging.current) return;
+        dragging.current = false;
+        document.body.classList.remove('is-resizing-horizontal', 'is-resizing-vertical');
+        onEnd?.();
+    }, [onEnd]);
+
+    useEffect(() => {
+        document.addEventListener('pointermove', handlePointerMove);
+        document.addEventListener('pointerup', handlePointerUp);
+        document.addEventListener('pointercancel', handlePointerUp);
+        return () => {
+            document.removeEventListener('pointermove', handlePointerMove);
+            document.removeEventListener('pointerup', handlePointerUp);
+            document.removeEventListener('pointercancel', handlePointerUp);
+            document.body.classList.remove('is-resizing-horizontal', 'is-resizing-vertical');
+        };
+    }, [handlePointerMove, handlePointerUp]);
+
+    function handlePointerDown(e: ReactPointerEvent<HTMLButtonElement>) {
+        e.preventDefault();
+        (e.target as HTMLElement).setPointerCapture(e.pointerId);
+        dragging.current = true;
+        lastPos.current = direction === 'horizontal' ? e.clientX : e.clientY;
+        document.body.classList.add(direction === 'horizontal' ? 'is-resizing-horizontal' : 'is-resizing-vertical');
+    }
+
+    function handleKeyDown(e: React.KeyboardEvent<HTMLButtonElement>) {
+        const step = 10;
+        if (direction === 'horizontal') {
+            if (e.key === 'ArrowLeft') { e.preventDefault(); onDelta(-step); }
+            else if (e.key === 'ArrowRight') { e.preventDefault(); onDelta(step); }
+        } else {
+            if (e.key === 'ArrowUp') { e.preventDefault(); onDelta(-step); }
+            else if (e.key === 'ArrowDown') { e.preventDefault(); onDelta(step); }
+        }
+    }
+
+    return (
+        <button
+            type="button"
+            className={`panel-resizer panel-resizer-${direction} ${props.className ?? ''}`}
+            aria-label={`Resize ${direction === 'horizontal' ? 'width' : 'height'}`}
+            onPointerDown={handlePointerDown}
+            onKeyDown={handleKeyDown}
+        />
+    );
+}

package/public/manager/src/panels/RightSidebar.tsx

@@ -0,0 +1,192 @@
+import { useCallback, useRef, type ReactNode } from 'react';
+import { PanelResizer } from './PanelResizer';
+import { usePanelLayout } from './PanelLayoutProvider';
+import type { RightPanelMode } from './types';
+
+type RightSidebarProps = {
+    renderPanel: (mode: RightPanelMode) => ReactNode;
+};
+
+const MODE_LABELS: Record<RightPanelMode, string> = {
+    folder: 'Folders',
+    doc: 'Document preview',
+    diff: 'Diff',
+    browser: 'Browser',
+};
+
+function FolderIcon() {
+    return (
+        <svg viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" focusable="false">
+            <path d="M3 6.5h5l1.5 2H17v6.5a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 3 15V6.5Z" />
+            <path d="M3 6.5V5a1.5 1.5 0 0 1 1.5-1.5h3L9 5.5h6.5A1.5 1.5 0 0 1 17 7v1.5" />
+        </svg>
+    );
+}
+
+function DocIcon() {
+    return (
+        <svg viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" focusable="false">
+            <path d="M5 3.5h6l4 4V16a1.5 1.5 0 0 1-1.5 1.5h-7A1.5 1.5 0 0 1 5 16v-12.5Z" />
+            <path d="M11 3.5v4h4M7.5 11h5M7.5 14h4" />
+        </svg>
+    );
+}
+
+function DiffIcon() {
+    return (
+        <svg viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" focusable="false">
+            <path d="M6 4v12M14 4v12M4 7h4M4 13h4M12 10h4M14 8v4" />
+        </svg>
+    );
+}
+
+function BrowserIcon() {
+    return (
+        <svg viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" focusable="false">
+            <rect x="3" y="4" width="14" height="12" rx="2" />
+            <path d="M3 7.5h14M6 6h.01M8.5 6h.01" />
+        </svg>
+    );
+}
+
+const MODE_ICONS: Record<RightPanelMode, ReactNode> = {
+    folder: <FolderIcon />,
+    doc: <DocIcon />,
+    diff: <DiffIcon />,
+    browser: <BrowserIcon />,
+};
+
+const RIGHT_PANEL_TOOLBAR_MODES: RightPanelMode[] = ['folder', 'doc', 'diff', 'browser'];
+const CONTENT_OWNED_RIGHT_CHROME: RightPanelMode[] = ['browser'];
+const RIGHT_SPLIT_SLOT_MIN_HEIGHT = 180;
+
+export function RightSidebar(props: RightSidebarProps) {
+    const { state, dispatch, effectiveRightOpen, rightPanelSplit } = usePanelLayout();
+    const rp = state.rightPanel;
+    const bodyRef = useRef<HTMLDivElement>(null);
+
+    const handleWidthDelta = useCallback((delta: number) => {
+        dispatch({ type: 'SET_RIGHT_WIDTH', width: rp.width - delta });
+    }, [dispatch, rp.width]);
+
+    const handleWidthEnd = useCallback(() => {
+        // save trigger handled by parent persistence layer (L7)
+    }, []);
+
+    const handleSplitDelta = useCallback((delta: number) => {
+        const el = bodyRef.current;
+        if (!el) return;
+        const totalHeight = el.clientHeight;
+        if (totalHeight === 0) return;
+        dispatch({ type: 'SET_RIGHT_SPLIT_RATIO', ratio: rp.splitRatio + delta / totalHeight });
+    }, [dispatch, rp.splitRatio]);
+
+    const handleToolbarModeClick = useCallback((mode: RightPanelMode) => {
+        dispatch({ type: 'SET_RIGHT_BOTTOM_MODE', mode: null });
+        dispatch({ type: 'OPEN_RIGHT_PANEL', mode, slot: 'top' });
+    }, [dispatch]);
+
+    const handleSoloSlot = useCallback((slot: 'top' | 'bottom') => {
+        dispatch({ type: 'SOLO_RIGHT_SUB', slot });
+    }, [dispatch]);
+
+    if (!effectiveRightOpen) return null;
+
+    const isSplit = rightPanelSplit;
+    const topFr = isSplit ? rp.splitRatio : 1;
+    const bottomFr = isSplit ? 1 - rp.splitRatio : 0;
+    const activeMode = rp.topMode ?? rp.bottomMode;
+    const splitRows = isSplit
+        ? `minmax(${RIGHT_SPLIT_SLOT_MIN_HEIGHT}px, ${topFr}fr) auto minmax(${RIGHT_SPLIT_SLOT_MIN_HEIGHT}px, ${bottomFr}fr)`
+        : undefined;
+
+    function renderPanelSlot(slot: 'top' | 'bottom', mode: RightPanelMode): ReactNode {
+        const label = MODE_LABELS[mode];
+        const slotOwnsChrome = !isSplit && CONTENT_OWNED_RIGHT_CHROME.includes(mode);
+        return (
+            <div
+                key={`${slot}-${mode}`}
+                className={`right-sub-panel${slotOwnsChrome ? ' has-content-owned-chrome' : ''}`}
+                aria-label={label}
+            >
+                {!slotOwnsChrome && (
+                    <div className="right-sub-header">
+                        <span className="right-sub-title">{label}</span>
+                        <div className="right-sub-actions">
+                            {isSplit ? (
+                                <button
+                                    type="button"
+                                    className="right-sub-action"
+                                    aria-label={`Show only ${label}`}
+                                    title={`Show only ${label}`}
+                                    onClick={() => handleSoloSlot(slot)}
+                                >
+                                    Only
+                                </button>
+                            ) : null}
+                            <button
+                                type="button"
+                                className="right-sub-action right-sub-close"
+                                aria-label={`Close ${label}`}
+                                title={`Close ${label}`}
+                                onClick={() => dispatch({ type: 'CLOSE_RIGHT_SUB', slot })}
+                            >
+                                ×
+                            </button>
+                        </div>
+                    </div>
+                )}
+                <div className="right-sub-content">
+                    {props.renderPanel(mode)}
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <aside className="right-panel" aria-label="Right sidebar">
+            <PanelResizer direction="horizontal" onDelta={handleWidthDelta} onEnd={handleWidthEnd} />
+            <div className="right-panel-shell">
+                <div className="right-panel-toolbar" aria-label="Right sidebar panels">
+                    {RIGHT_PANEL_TOOLBAR_MODES.map(mode => (
+                        <button
+                            key={mode}
+                            type="button"
+                            className={`right-panel-mode-button${activeMode === mode ? ' is-active' : ''}`}
+                            aria-label={MODE_LABELS[mode]}
+                            aria-pressed={activeMode === mode}
+                            title={MODE_LABELS[mode]}
+                            onClick={() => handleToolbarModeClick(mode)}
+                        >
+                            {MODE_ICONS[mode]}
+                        </button>
+                    ))}
+                    <button
+                        type="button"
+                        className="right-panel-close"
+                        aria-label="Close right sidebar"
+                        title="Close"
+                        onClick={() => dispatch({ type: 'SET_RIGHT_OPEN', open: false })}
+                    >
+                        ×
+                    </button>
+                </div>
+                <div
+                    ref={bodyRef}
+                    className={`right-panel-body ${isSplit ? 'is-split-panel' : 'is-single-panel'}`}
+                    style={isSplit ? { gridTemplateRows: splitRows } : undefined}
+                >
+                    {rp.topMode && (
+                        renderPanelSlot('top', rp.topMode)
+                    )}
+                    {isSplit && (
+                        <PanelResizer direction="vertical" onDelta={handleSplitDelta} className="right-split-resizer" />
+                    )}
+                    {rp.bottomMode && (
+                        renderPanelSlot('bottom', rp.bottomMode)
+                    )}
+                </div>
+            </div>
+        </aside>
+    );
+}

package/public/manager/src/panels/desktop-bridge.ts

@@ -0,0 +1,112 @@
+import type { DashboardShortcutAction } from '../types';
+
+export type TerminalBridgeApi = {
+    create: (opts?: { cwd?: string; cols?: number; rows?: number }) => Promise<{ ok: boolean; id?: string; shell?: string; cwd?: string; error?: string }>;
+    write: (id: string, data: string) => Promise<void>;
+    resize: (id: string, cols: number, rows: number) => Promise<void>;
+    kill: (id: string) => Promise<void>;
+    onData: (cb: (id: string, data: string) => void) => () => void;
+    onExit: (cb: (id: string, code: number | null) => void) => () => void;
+};
+
+export type DiffMode = 'unstaged' | 'staged' | 'head' | 'base';
+
+export type DiffOptions = {
+    mode: DiffMode;
+    ref?: string;
+    includeUntracked?: boolean;
+};
+
+export type DiffRootCandidate = {
+    path: string;
+    label: string;
+    source: 'project' | 'working-dir' | 'pinned' | 'home';
+};
+
+export type DiffResolvedRoot = DiffRootCandidate & {
+    root: string;
+    branch: string | null;
+    head: string | null;
+    dirty: boolean;
+};
+
+export type DiffBridgeApi = {
+    getRepoRoot: (cwd: string) => Promise<{ ok: boolean; root?: string; error?: string }>;
+    getRepoCandidates: (candidates: DiffRootCandidate[]) => Promise<{ ok: boolean; candidates?: DiffResolvedRoot[]; error?: string }>;
+    getDiffSummary: (repoRoot: string, options: DiffOptions) => Promise<{ ok: boolean; files?: Array<{ path: string; status: string; insertions: number; deletions: number }>; error?: string }>;
+    getFileDiff: (repoRoot: string, filePath: string, options: DiffOptions) => Promise<{ ok: boolean; diff?: string; error?: string }>;
+};
+
+export type FolderBridgeApi = {
+    getDefaultRoot: () => Promise<{ ok: boolean; path?: string; error?: string }>;
+    pickFolder: () => Promise<{ ok: boolean; path?: string; error?: string }>;
+    listDir: (dirPath: string, depth?: number) => Promise<{ ok: boolean; entries?: Array<{ name: string; path: string; kind: 'file' | 'directory'; size: number }>; error?: string }>;
+    readFile: (filePath: string) => Promise<{ ok: boolean; content?: string; truncated?: boolean; binary?: boolean; error?: string }>;
+    watchDir: (dirPath: string) => Promise<void>;
+    unwatchDir: (dirPath: string) => Promise<void>;
+    onDirChange: (cb: (dirPath: string) => void) => () => void;
+};
+
+export type ShortcutBridgeApi = {
+    onAction: (cb: (action: DashboardShortcutAction) => void) => () => void;
+};
+
+export type BrowserBridgeApi = {
+    onOpenUrl: (cb: (payload: { url: string; disposition: 'current-tab' | 'new-tab' }) => void) => () => void;
+};
+
+export type ClipboardBridgeApi = {
+    writeText: (text: string) => Promise<{ ok: boolean; error?: string }>;
+};
+
+export type PermissionDenial = {
+    at: string;
+    surface: 'manager-window' | 'preview-frame' | 'embedded-browser-webview';
+    permission: string;
+    requestingUrl: string;
+    reason: string;
+};
+
+export type PermissionDiagnosticsBridgeApi = {
+    getLastDenials: () => Promise<{ ok: boolean; denials?: PermissionDenial[]; error?: string }>;
+};
+
+export type DesktopShellCapability = 'terminal' | 'diff' | 'folder' | 'shortcuts' | 'browser' | 'clipboard' | 'permissions';
+
+/**
+ * Electron shell-only bridge.
+ *
+ * Jawsidian notes and graph data must continue to flow through the dashboard
+ * HTTP APIs so the web dashboard and Electron render the same vault index.
+ * These capabilities are host integrations, not graph connectivity sources.
+ */
+export type CliJawDesktopApi = {
+    identify: () => { name: string; electron: boolean; header: string };
+    getMetrics: () => unknown;
+    getHomePath?: (() => string) | undefined;
+    terminal?: TerminalBridgeApi | undefined;
+    diff?: DiffBridgeApi | undefined;
+    folder?: FolderBridgeApi | undefined;
+    clipboard?: ClipboardBridgeApi | undefined;
+    permissions?: PermissionDiagnosticsBridgeApi | undefined;
+    shortcuts?: ShortcutBridgeApi | undefined;
+    browser?: BrowserBridgeApi | undefined;
+};
+
+export function getDesktop(): CliJawDesktopApi | null {
+    return (window as unknown as { cliJawDesktop?: CliJawDesktopApi }).cliJawDesktop ?? null;
+}
+
+function hasDesktopDocumentMarker(): boolean {
+    if (typeof document === 'undefined') return false;
+    return document.documentElement.dataset['cliJawDesktop'] === 'true';
+}
+
+function hasDesktopUserAgent(): boolean {
+    if (typeof navigator === 'undefined') return false;
+    return /\bcli-jaw-desktop(?:\/|\b)/.test(navigator.userAgent);
+}
+
+export function isElectron(): boolean {
+    return getDesktop()?.identify?.()?.electron === true || hasDesktopDocumentMarker() || hasDesktopUserAgent();
+}