cli-jaw 2.2.4 → 2.2.5

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

@@ -1,90 +1,151 @@
-import { useCallback, useEffect, useRef, type ReactNode } from 'react';
+import { useCallback, useEffect, useRef, useState, type KeyboardEvent, type ReactNode } from 'react';
 import { PanelResizer } from './PanelResizer';
 import { usePanelLayout } from './PanelLayoutProvider';
-import type { RightPanelMode } from './types';
+import type { RightSidebarOpenTab, RightSidebarTabKind } from './types';
+import { RIGHT_SIDEBAR_TAB_TITLES } from './types';
+import { getRightSidebarTabDisplay, getRightSidebarTabDensity } from './right-sidebar-tab-display';
+import { PanelErrorBoundary } from './PanelErrorBoundary';
+import { getDesktop } from './desktop-bridge';
+
+// ---------------------------------------------------------------------------
+// Props
+// ---------------------------------------------------------------------------
 
 type RightSidebarProps = {
-    renderPanel: (mode: RightPanelMode) => ReactNode;
-    renderHeaderAction?: ((mode: RightPanelMode, slot: 'top' | 'bottom') => ReactNode) | undefined;
+    renderPanel: (kind: RightSidebarTabKind, tab: RightSidebarOpenTab) => ReactNode;
+    /** Files-tab scoped "load project folder" action (불러오기). */
+    onLoadProjectFolder?: (() => void) | undefined;
+    loadProjectFolderDisabled?: boolean | undefined;
 };
 
-const MODE_LABELS: Record<RightPanelMode, string> = {
-    folder: 'Folders',
-    doc: 'Document preview',
-    diff: 'Diff',
-    browser: 'Browser',
-    ceo: 'Jaw CEO',
-};
+// ---------------------------------------------------------------------------
+// Icons (lucide-style strokes; icons derive from tab kind at render time)
+// ---------------------------------------------------------------------------
 
-function FolderIcon() {
+function CloseIcon() {
     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 viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" aria-hidden="true" focusable="false">
+            <path d="M6 6l8 8M14 6l-8 8" />
         </svg>
     );
 }
 
-function DocIcon() {
+function TabCloseIcon() {
     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 viewBox="0 0 16 16" width="11" height="11" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" aria-hidden="true" focusable="false">
+            <path d="M4 4l8 8M12 4l-8 8" />
         </svg>
     );
 }
 
-function DiffIcon() {
+function PlusIcon() {
     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 viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" aria-hidden="true" focusable="false">
+            <path d="M8 3v10M3 8h10" />
         </svg>
     );
 }
 
-function BrowserIcon() {
+function FilesKindIcon() {
     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 viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" focusable="false">
+            <path d="M2 4.5h4.5L8 6h6v6.5a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4.5Z" />
+            <path d="M2 4.5V3.5a1 1 0 0 1 1-1h2.5L7 4h5a1 1 0 0 1 1 1v1" />
         </svg>
     );
 }
 
-function CeoIcon() {
+function DiffKindIcon() {
     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">
-            <circle cx="10" cy="9" r="3.5" />
-            <path d="M4 16.5c0-3.3 2.7-6 6-6s6 2.7 6 6" />
-            <path d="M5 7.5C5 5 7.2 3 10 3s5 2 5 4.5" strokeWidth="1.4" />
+        <svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" focusable="false">
+            <path d="M4 3v10M12 3v10M4 8h8" />
         </svg>
     );
 }
 
-function CloseIcon() {
+function BrowserKindIcon() {
     return (
-        <svg viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" aria-hidden="true" focusable="false">
-            <path d="M6 6l8 8M14 6l-8 8" />
+        <svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" focusable="false">
+            <rect x="2" y="2" width="12" height="12" rx="1.5" />
+            <path d="M2 5.5h12" />
         </svg>
     );
 }
 
-const MODE_ICONS: Record<RightPanelMode, ReactNode> = {
-    folder: <FolderIcon />,
-    doc: <DocIcon />,
-    diff: <DiffIcon />,
-    browser: <BrowserIcon />,
-    ceo: <CeoIcon />,
+function DesignKindIcon() {
+    return (
+        <svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" focusable="false">
+            <path d="M9.5 3.5l3 3L6 13H3v-3Z" />
+            <path d="M8 5l3 3" />
+            <path d="M12.5 6.5l1-1a1.4 1.4 0 0 0 0-2l-1-1a1.4 1.4 0 0 0-2 0l-1 1" />
+        </svg>
+    );
+}
+
+function FolderToggleIcon() {
+    return (
+        <svg viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" focusable="false">
+            <path d="M3 6.5h5l1.4 1.8H17v6.2A1.5 1.5 0 0 1 15.5 16h-11A1.5 1.5 0 0 1 3 14.5v-8Z" />
+            <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.3" />
+        </svg>
+    );
+}
+
+function ChevronSep() {
+    return (
+        <span className="right-breadcrumb-sep" aria-hidden="true">&gt;</span>
+    );
+}
+
+const TAB_KIND_ICONS: Record<RightSidebarTabKind, () => ReactNode> = {
+    files: FilesKindIcon,
+    diff: DiffKindIcon,
+    browser: BrowserKindIcon,
+    design: DesignKindIcon,
 };
 
-const RIGHT_PANEL_TOOLBAR_MODES: RightPanelMode[] = ['folder', 'doc', 'diff', 'browser', 'ceo'];
-const CONTENT_OWNED_RIGHT_CHROME: RightPanelMode[] = ['browser', 'ceo'];
-const RIGHT_SPLIT_SLOT_MIN_HEIGHT = 180;
+// ---------------------------------------------------------------------------
+// Breadcrumb helper
+// ---------------------------------------------------------------------------
 
+function parseBreadcrumb(filePath: string | null | undefined): string[] {
+    if (!filePath) return [];
+    // Normalize path separators and split
+    const normalized = filePath.replace(/\\/g, '/');
+    const segments = normalized.split('/').filter(Boolean);
+    // Try to make the path relative-looking: strip common unix roots
+    if (segments.length > 0 && segments[0] === '') segments.shift();
+    return segments;
+}
+
+// ---------------------------------------------------------------------------
+// Launcher / plus menu kinds. CEO is hidden and never rendered here.
+// ---------------------------------------------------------------------------
+
+const LAUNCHER_KINDS: RightSidebarTabKind[] = ['files', 'diff', 'browser', 'design'];
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+/**
+ * Right sidebar with the 020/021 open-tab chrome:
+ *
+ * - Launcher button row: icon-only Files/Diff/Browser launchers (CEO hidden)
+ *   plus the close-sidebar control. Launchers focus the first open tab of the
+ *   kind or create it (FOCUS_OR_CREATE semantics).
+ * - Open tab strip: equal-width module tabs (kind icon + specific instance
+ *   name, hover/focus-revealed close) and a fixed-width '+' opening a menu.
+ *   The '+' menu CREATES new Files/Browser instances; Diff is omitted from
+ *   the menu while a Diff tab exists.
+ * - Files one-line toolbar (breadcrumb, Open file, folder toggle) when the
+ *   active tab is a Files module. No tab-in-tab, no inner '+'.
+ * - Tab bodies stay mounted (hidden) when switching away so each module tab
+ *   keeps its own component state.
+ */
 export function RightSidebar(props: RightSidebarProps) {
-    const { state, dispatch, effectiveRightOpen, rightPanelSplit } = usePanelLayout();
+    const { state, dispatch, effectiveRightOpen, activeRightTabKind } = usePanelLayout();
     const rp = state.rightPanel;
-    const bodyRef = useRef<HTMLDivElement>(null);
     const widthRef = useRef(rp.width);
 
     useEffect(() => {
@@ -98,99 +159,174 @@ export function RightSidebar(props: RightSidebarProps) {
     }, [dispatch]);
 
     const handleWidthEnd = useCallback(() => {
-        // save trigger handled by parent persistence layer (L7)
+        // save trigger handled by parent persistence layer
     }, []);
 
-    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' });
+    // Plus menu open state
+    const [plusMenuOpen, setPlusMenuOpen] = useState(false);
+    const plusMenuRef = useRef<HTMLDivElement>(null);
+
+    // Close plus menu on outside click
+    useEffect(() => {
+        if (!plusMenuOpen) return;
+        function handleClick(e: MouseEvent) {
+            if (plusMenuRef.current && !plusMenuRef.current.contains(e.target as Node)) {
+                setPlusMenuOpen(false);
+            }
+        }
+        document.addEventListener('click', handleClick, true);
+        return () => document.removeEventListener('click', handleClick, true);
+    }, [plusMenuOpen]);
+
+    // -- Derived --
+    const openTabs = rp.tabs.openTabs;
+    const activeTabId = rp.tabs.activeTabId;
+    const activeTab = openTabs.find(t => t.id === activeTabId) ?? null;
+    const fileFolderLayout = rp.fileFolderLayout;
+    // Breadcrumb follows the ACTIVE Files module tab's own file (per-tab state).
+    const activeFilePath = activeTab?.kind === 'files' ? activeTab.files?.activeFilePath ?? null : null;
+    const density = getRightSidebarTabDensity(openTabs.length);
+
+    // '+' menu entries: Files/Browser always creatable; Diff omitted while open.
+    const diffOpen = openTabs.some(t => t.kind === 'diff');
+    const plusMenuItems = LAUNCHER_KINDS.filter(k => !(k === 'diff' && diffOpen));
+
+    // Folder toggle button state
+    const folderVisible = fileFolderLayout.mode !== 'file-only';
+    const folderToggleTitle = folderVisible ? 'Hide folder pane' : 'Show folder pane';
+
+    const handleFolderToggle = useCallback(() => {
+        if (fileFolderLayout.mode === 'file-only') {
+            dispatch({ type: 'RESTORE_FILE_FOLDER_SPLIT' });
+        } else {
+            dispatch({ type: 'SET_FILE_FOLDER_VIEW_MODE', mode: 'file-only' });
+        }
+    }, [dispatch, fileFolderLayout.mode]);
+
+    const handleOpenFileDialog = useCallback(() => {
+        const folder = getDesktop()?.folder;
+        void (async () => {
+            if (folder?.pickFile) {
+                const result = await folder.pickFile();
+                if (result?.ok && result.path) {
+                    // Assign the picked file to the current Files module tab.
+                    dispatch({ type: 'OPEN_FILE_IN_FILES_TAB', path: result.path });
+                }
+                return;
+            }
+            // Older shell builds without a file picker: fall back to folder pick.
+            if (folder?.pickFolder) await folder.pickFolder();
+        })();
     }, [dispatch]);
 
-    const handleSoloSlot = useCallback((slot: 'top' | 'bottom') => {
-        dispatch({ type: 'SOLO_RIGHT_SUB', slot });
+    const handleLauncherClick = useCallback((kind: RightSidebarTabKind) => {
+        dispatch({ type: 'FOCUS_OR_CREATE_FIRST_RIGHT_SIDEBAR_TAB', kind });
     }, [dispatch]);
 
-    if (!effectiveRightOpen) return null;
-
-    const isSplit = rightPanelSplit;
-    const hideToolbar = rp.ceoDirectOpen && (rp.topMode === 'ceo' || rp.bottomMode === 'ceo');
-    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">
-                            {props.renderHeaderAction?.(mode, slot)}
-                            {isSplit ? (
-                                <button
-                                    type="button"
-                                    className="right-sub-action"
-                                    aria-label={`Show only ${label}`}
-                                    title={`Show only ${label}`}
-                                    onClick={() => handleSoloSlot(slot)}
-                                >
-                                    Only
-                                </button>
-                            ) : null}
+    const handlePlusMenuSelect = useCallback((kind: RightSidebarTabKind) => {
+        // '+' creates a new module instance (Diff stays singleton in the helper).
+        dispatch({ type: 'CREATE_RIGHT_SIDEBAR_TAB', kind });
+        setPlusMenuOpen(false);
+    }, [dispatch]);
+
+    const handleTabKeyDown = useCallback((event: KeyboardEvent<HTMLDivElement>, tabId: string) => {
+        if (event.target !== event.currentTarget) return;
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            dispatch({ type: 'ACTIVATE_RIGHT_SIDEBAR_TAB', tabId });
+        }
+    }, [dispatch]);
+
+    // Breadcrumb segments (leading, flexible portion of the Files toolbar)
+    const breadcrumbSegments = parseBreadcrumb(activeFilePath);
+
+    const plusMenu = plusMenuOpen ? (
+        <div className="right-sidebar-plus-menu" role="menu">
+            {plusMenuItems.map(kind => (
+                <button
+                    key={kind}
+                    type="button"
+                    role="menuitem"
+                    className="right-sidebar-plus-menu-item"
+                    onClick={() => handlePlusMenuSelect(kind)}
+                >
+                    {TAB_KIND_ICONS[kind]()}
+                    <span>{RIGHT_SIDEBAR_TAB_TITLES[kind]}</span>
+                </button>
+            ))}
+        </div>
+    ) : null;
+
+    // -----------------------------------------------------------------------
+    // Empty state: no open tabs
+    // -----------------------------------------------------------------------
+    if (!effectiveRightOpen || openTabs.length === 0) {
+        // When sidebar is open but has no tabs, show empty state
+        if (rp.open && openTabs.length === 0) {
+            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">
                             <button
                                 type="button"
-                                className="right-sub-action right-sub-close"
-                                aria-label={`Close ${label}`}
-                                title={`Close ${label}`}
-                                onClick={() => dispatch({ type: 'CLOSE_RIGHT_SUB', slot })}
+                                className="right-panel-close"
+                                aria-label="Close right sidebar"
+                                title="Close"
+                                onClick={() => dispatch({ type: 'SET_RIGHT_OPEN', open: false })}
                             >
-                                ×
+                                <CloseIcon />
                             </button>
                         </div>
+                        <div className="right-panel-body is-single-panel">
+                            <div className="right-sidebar-empty-state" aria-label="No open tabs">
+                                <div className="right-sidebar-empty-plus-wrap" ref={plusMenuRef}>
+                                    <button
+                                        type="button"
+                                        className="right-sidebar-empty-plus"
+                                        aria-label="Open panel tab"
+                                        aria-haspopup="menu"
+                                        aria-expanded={plusMenuOpen}
+                                        title="Open panel tab"
+                                        onClick={() => setPlusMenuOpen(v => !v)}
+                                    >
+                                        <PlusIcon />
+                                    </button>
+                                    {plusMenu}
+                                </div>
+                            </div>
+                        </div>
                     </div>
-                )}
-                <div className="right-sub-content">
-                    {props.renderPanel(mode)}
-                </div>
-            </div>
-        );
+                </aside>
+            );
+        }
+        return null;
     }
 
+    // -----------------------------------------------------------------------
+    // Normal state: launcher row + open tab strip + body
+    // -----------------------------------------------------------------------
     return (
         <aside className="right-panel" aria-label="Right sidebar">
             <PanelResizer direction="horizontal" onDelta={handleWidthDelta} onEnd={handleWidthEnd} />
             <div className="right-panel-shell">
-                {!hideToolbar && <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>
-                    ))}
+                {/* --- Launcher button row (current-style controls, CEO hidden) --- */}
+                <div className="right-launcher-row" aria-label="Panel launchers">
+                    <div className="right-launcher-group">
+                        {LAUNCHER_KINDS.map(kind => (
+                            <button
+                                key={kind}
+                                type="button"
+                                className={`right-launcher-button${activeRightTabKind === kind ? ' is-active' : ''}`}
+                                aria-label={RIGHT_SIDEBAR_TAB_TITLES[kind]}
+                                aria-pressed={activeRightTabKind === kind}
+                                title={RIGHT_SIDEBAR_TAB_TITLES[kind]}
+                                onClick={() => handleLauncherClick(kind)}
+                            >
+                                {TAB_KIND_ICONS[kind]()}
+                            </button>
+                        ))}
+                    </div>
                     <button
                         type="button"
                         className="right-panel-close"
@@ -200,20 +336,139 @@ export function RightSidebar(props: RightSidebarProps) {
                     >
                         <CloseIcon />
                     </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>
+
+                {/* --- Open tab strip: equal-width module tabs + fixed '+' --- */}
+                <div className="right-sidebar-tab-strip" data-density={density}>
+                    <div className="right-sidebar-tabs" role="tablist" aria-label="Open panel tabs">
+                        {openTabs.map(tab => {
+                            const isActive = tab.id === activeTabId;
+                            const Icon = TAB_KIND_ICONS[tab.kind];
+                            const display = getRightSidebarTabDisplay(tab);
+                            return (
+                                <div
+                                    key={tab.id}
+                                    role="tab"
+                                    tabIndex={0}
+                                    className={`right-sidebar-tab${isActive ? ' is-active' : ''}`}
+                                    aria-selected={isActive}
+                                    aria-label={display.ariaLabel}
+                                    title={display.title}
+                                    onClick={() => dispatch({ type: 'ACTIVATE_RIGHT_SIDEBAR_TAB', tabId: tab.id })}
+                                    onKeyDown={event => handleTabKeyDown(event, tab.id)}
+                                >
+                                    <Icon />
+                                    <span className="right-sidebar-tab-label">{display.visibleLabel}</span>
+                                    <button
+                                        type="button"
+                                        className="right-sidebar-tab-close"
+                                        aria-label={`Close ${display.ariaLabel}`}
+                                        title={`Close ${display.visibleLabel}`}
+                                        onClick={event => {
+                                            event.stopPropagation();
+                                            dispatch({ type: 'CLOSE_RIGHT_SIDEBAR_TAB', tabId: tab.id });
+                                        }}
+                                    >
+                                        <TabCloseIcon />
+                                    </button>
+                                </div>
+                            );
+                        })}
+                    </div>
+                    <div className="right-sidebar-plus-wrap" ref={plusMenuRef}>
+                        <button
+                            type="button"
+                            className="right-sidebar-plus"
+                            aria-label="Open panel tab"
+                            aria-haspopup="menu"
+                            aria-expanded={plusMenuOpen}
+                            title="Open panel tab"
+                            onClick={() => setPlusMenuOpen(v => !v)}
+                        >
+                            <PlusIcon />
+                        </button>
+                        {plusMenu}
+                    </div>
+                </div>
+
+                {/* --- Files tab one-line toolbar (only when a Files tab is active) --- */}
+                {/*
+                    Single horizontal line: flexible breadcrumb on the left, then
+                    the Open file action and the far-right folder toggle. No inner
+                    file-tab row, no inner '+', no tab-in-tab. Open file and the
+                    folder button never wrap or get pushed out; the breadcrumb
+                    truncates (middle segments first, final file name last).
+                */}
+                {activeRightTabKind === 'files' && (
+                    <div className="right-files-chrome" aria-label="Files tab chrome">
+                        <div className="right-files-toolbar">
+                            <nav className="right-breadcrumb" aria-label="File path breadcrumb">
+                                {breadcrumbSegments.map((seg, i) => {
+                                    const isLast = i === breadcrumbSegments.length - 1;
+                                    return (
+                                        <span className="right-breadcrumb-item" key={i}>
+                                            {i > 0 && <ChevronSep />}
+                                            <span
+                                                className={`right-breadcrumb-segment${isLast ? ' is-final' : ''}`}
+                                                title={seg}
+                                            >
+                                                {seg}
+                                            </span>
+                                        </span>
+                                    );
+                                })}
+                            </nav>
+                            {props.onLoadProjectFolder && (
+                                <button
+                                    type="button"
+                                    className="right-files-load-folder"
+                                    title="Load project folder"
+                                    disabled={props.loadProjectFolderDisabled === true}
+                                    onClick={props.onLoadProjectFolder}
+                                >
+                                    불러오기
+                                </button>
+                            )}
+                            <button
+                                type="button"
+                                className="right-files-open-file"
+                                title="Open file"
+                                onClick={handleOpenFileDialog}
+                            >
+                                Open file
+                            </button>
+                            <button
+                                type="button"
+                                className="right-files-folder-toggle"
+                                aria-pressed={folderVisible}
+                                title={folderToggleTitle}
+                                onClick={handleFolderToggle}
+                            >
+                                <FolderToggleIcon />
+                            </button>
+                        </div>
+                    </div>
+                )}
+
+                {/* --- Tab body: only the ACTIVE tab is mounted.
+                     Keep-alive stacking is deliberately avoided: Electron
+                     webviews composite out-of-process, so a hidden mounted
+                     webview can still cover the window and swallow input.
+                     Per-tab state (file path, folder session, page url) lives
+                     in tab metadata and restores on remount. --- */}
+                <div className="right-panel-body is-single-panel">
+                    {activeTab && (
+                        <div
+                            key={activeTab.id}
+                            className="right-sub-panel"
+                            aria-label={getRightSidebarTabDisplay(activeTab).ariaLabel}
+                        >
+                            <div className="right-sub-content">
+                                <PanelErrorBoundary label={RIGHT_SIDEBAR_TAB_TITLES[activeTab.kind]}>
+                                    {props.renderPanel(activeTab.kind, activeTab)}
+                                </PanelErrorBoundary>
+                            </div>
+                        </div>
                     )}
                 </div>
             </div>