cli-jaw 2.2.4 → 2.2.5

package/public/manager/src/SidebarRailRouter.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState, type ReactNode, Suspense } from 'react';
+import { useCallback, useEffect, useRef, useState, type ReactNode, Suspense } from 'react';
 import { ActivityDock } from './components/ActivityDock';
 import { InstanceDrawer } from './components/InstanceDrawer';
 import { InstanceNavigator } from './components/InstanceNavigator';
@@ -12,7 +12,7 @@ import { BottomPanel, type BottomPanelRenderControls } from './panels/BottomPane
 import { usePanelLayout } from './panels/PanelLayoutProvider';
 import { currentManagerSurface } from './panels/panel-capabilities';
 import { getDesktop } from './panels/desktop-bridge';
-import type { RightPanelMode, BottomPanelTab } from './panels/types';
+import type { RightSidebarTabKind, RightSidebarOpenTab, BottomPanelTab } from './panels/types';
 import type { FolderPanelSessionState } from './folder-panel/folder-panel-session';
 import type { WorkbenchRepoRootMode } from './workbench/workbench-resource-types';
 
@@ -21,7 +21,9 @@ const DiffPanel = lazy(() => import('./diff-panel/DiffPanel').then(m => ({ defau
 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';
+const DesignPanel = lazy(() => import('./design-panel/DesignPanel').then(m => ({ default: m.DesignPanel })));
+import { FileFolderSplitPanel } from './panels/FileFolderSplitPanel';
+import { InstancePreview, type PreviewInsertTextRequest, type PreviewInsertTextResult } from './InstancePreview';
 import { DashboardSettingsSidebar, type DashboardSettingsSection } from './dashboard-settings/DashboardSettingsSidebar';
 import { DashboardSettingsWorkspace } from './dashboard-settings/DashboardSettingsWorkspace';
 import { NotesSidebar, type NotesSidebarMode } from './notes/NotesSidebar';
@@ -34,6 +36,7 @@ import { DashboardScheduleWorkspace } from './dashboard-schedule/DashboardSchedu
 import { DashboardRemindersSidebar, type RemindersView } from './dashboard-reminders/DashboardRemindersSidebar';
 import { DashboardRemindersWorkspace } from './dashboard-reminders/DashboardRemindersWorkspace';
 import { useRemindersFeed } from './dashboard-reminders/useRemindersFeed';
+import { useEmbeddedBrowserTargetSync } from './browser-panel/use-embedded-target-sync';
 import {
     describeDroppedPathsEvent,
     firstDirectory,
@@ -65,7 +68,6 @@ import type { JawCeoVoiceController } from './jaw-ceo/useJawCeoVoice';
 import { ModeSwitch } from './code/ModeSwitch';
 const CodeCanvas = lazy(() => import('./code/CodeCanvas').then(m => ({ default: m.CodeCanvas })));
 import './code/code.css';
-import { useWorkbenchResourceState } from './workbench/useWorkbenchResourceState';
 
 type WorkspaceSurfaceProps = {
     active: boolean;
@@ -170,107 +172,162 @@ type Props = {
     workingDir: string;
 };
 
+type RightPanelRenderContext = {
+    /** Active module tab id (keep-alive bodies need to know visibility). */
+    activeTabId: string | null;
+    /** Selected instance's primary projectDir (Design OD-2 snapshot source). */
+    primaryProjectDir: string | null;
+    /** Fallback Files root for tabs that have no root of their own yet. */
+    fallbackFolderRootPath: string | null;
+    /** The Files tab whose state feeds the singleton Diff panel (active or first). */
+    diffFilesTab: RightSidebarOpenTab | null;
+    gitRefreshVersion: number;
+    onOpenFileGlobal: (path: string) => void;
+    onTabPreviewFile: (tabId: string, path: string) => void;
+    onTabRootChange: (tabId: string, path: string | null) => void;
+    onTabRepoRootChange: (tabId: string, path: string | null, mode?: WorkbenchRepoRootMode) => void;
+    onFollowInstanceRepoRoot: (tabId: string | null, path: string | null) => void;
+    onBrowserPageState: (tabId: string, state: { url: string; title: string }) => void;
+    onOpenBrowserWindow: (url: string) => void;
+    onInsertCommentIntoPreview: (port: number, text: string) => Promise<PreviewInsertTextResult>;
+    onGitRefresh: () => void;
+    selectedInstance: DashboardInstance | null;
+    dashboardSettingsUi: DashboardRegistryUi;
+    onDashboardSettingsPatch: (patch: Partial<DashboardRegistryUi>) => void;
+    notesModel: NotesModelState;
+    folderSessions: Record<string, FolderPanelSessionState | null>;
+    onFolderSessionChange: (tabId: string, state: FolderPanelSessionState) => void;
+};
+
 function renderRightPanelContent(
-    mode: RightPanelMode,
-    previewFilePath: string | null,
-    folderRootPath: string | null,
-    repoRootPath: string | null,
-    repoRootMode: WorkbenchRepoRootMode,
-    gitRefreshVersion: number,
-    onPreviewFile: (path: string) => void,
-    onFolderRootChange: (path: string | null) => void,
-    onRepoRootChange: (path: string | null, mode?: WorkbenchRepoRootMode) => void,
-    onFollowInstanceRepoRoot: (path: string | null) => void,
-    onGitRefresh: () => void,
-    selectedInstance: DashboardInstance | null,
-    dashboardSettingsUi: DashboardRegistryUi,
-    onDashboardSettingsPatch: (patch: Partial<DashboardRegistryUi>) => void,
-    notesModel: NotesModelState,
-    jawCeoPanel: ReactNode,
-    folderPanelSession: FolderPanelSessionState | null,
-    onFolderPanelSessionChange: (state: FolderPanelSessionState) => void,
+    kind: RightSidebarTabKind,
+    tab: RightSidebarOpenTab,
+    ctx: RightPanelRenderContext,
 ): 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}
-            folderRootPath={folderRootPath}
-            repoRootPath={repoRootPath}
-            repoRootMode={repoRootMode}
-            selectedFilePath={previewFilePath}
-            onRepoRootChange={onRepoRootChange}
-            onFollowInstanceRepoRoot={onFollowInstanceRepoRoot}
-            onPreviewFile={onPreviewFile}
-            onGitRefresh={onGitRefresh}
-            onSettingsPatch={onDashboardSettingsPatch}
+    switch (kind) {
+        case 'diff': {
+            const refTab = ctx.diffFilesTab;
+            const files = refTab?.files ?? {};
+            return <Suspense fallback={fallback}><DiffPanel
+                selectedInstance={ctx.selectedInstance}
+                settings={ctx.dashboardSettingsUi}
+                folderRootPath={files.folderRootPath ?? ctx.fallbackFolderRootPath}
+                repoRootPath={files.repoRootPath ?? null}
+                repoRootMode={files.repoRootMode ?? 'instance'}
+                selectedFilePath={files.activeFilePath ?? null}
+                onRepoRootChange={(path, mode) => { if (refTab) ctx.onTabRepoRootChange(refTab.id, path, mode); }}
+                onFollowInstanceRepoRoot={path => ctx.onFollowInstanceRepoRoot(refTab?.id ?? null, path)}
+                onPreviewFile={ctx.onOpenFileGlobal}
+                onGitRefresh={ctx.onGitRefresh}
+                onSettingsPatch={ctx.onDashboardSettingsPatch}
+            /></Suspense>;
+        }
+        case 'files': {
+            const files = tab.files ?? {};
+            const folderRoot = files.folderRootPath ?? ctx.fallbackFolderRootPath;
+            const repoRootMode = files.repoRootMode ?? 'instance';
+            return <FileFolderSplitPanel
+                filePane={<Suspense fallback={fallback}><DocPanel filePath={files.activeFilePath ?? undefined} onOpenLocalFile={path => ctx.onTabPreviewFile(tab.id, path)} /></Suspense>}
+                folderPane={<Suspense fallback={fallback}><FolderPanel selectedFilePath={files.activeFilePath ?? null} externalRootPath={folderRoot} repoRootPath={repoRootMode === 'instance' ? files.repoRootPath ?? null : null} gitRefreshVersion={ctx.gitRefreshVersion} notesTree={ctx.notesModel.tree} notesRoot={ctx.notesModel.notesRoot} onRootChange={path => ctx.onTabRootChange(tab.id, path)} onRepoRootChange={path => ctx.onTabRepoRootChange(tab.id, path)} onGitRefresh={ctx.onGitRefresh} onPreviewFile={path => ctx.onTabPreviewFile(tab.id, path)} sessionState={ctx.folderSessions[tab.id] ?? null} onSessionStateChange={state => ctx.onFolderSessionChange(tab.id, state)} /></Suspense>}
+            />;
+        }
+        case 'browser': return <Suspense fallback={fallback}><BrowserPanel
+            singlePage
+            initialUrl={tab.browser?.url}
+            isActivePanel={tab.id === ctx.activeTabId}
+            moduleTabId={tab.id}
+            selectedInstancePort={ctx.selectedInstance?.port ?? null}
+            onInsertCommentIntoPreview={ctx.onInsertCommentIntoPreview}
+            onPageStateChange={state => ctx.onBrowserPageState(tab.id, state)}
+            onOpenNewWindow={ctx.onOpenBrowserWindow}
+        /></Suspense>;
+        case 'design': return <Suspense fallback={fallback}><DesignPanel
+            tab={tab}
+            primaryProjectDir={ctx.primaryProjectDir}
+            selectedInstancePort={ctx.selectedInstance?.port ?? null}
+            onOpenInBrowser={ctx.onOpenBrowserWindow}
         /></Suspense>;
-        case 'folder': return <Suspense fallback={fallback}><FolderPanel selectedFilePath={previewFilePath} externalRootPath={folderRootPath} repoRootPath={repoRootMode === 'instance' ? repoRootPath : null} gitRefreshVersion={gitRefreshVersion} notesTree={notesModel.tree} notesRoot={notesModel.notesRoot} onRootChange={onFolderRootChange} onRepoRootChange={onRepoRootChange} onGitRefresh={onGitRefresh} onPreviewFile={onPreviewFile} sessionState={folderPanelSession} onSessionStateChange={onFolderPanelSessionChange} /></Suspense>;
-        case 'doc': return <Suspense fallback={fallback}><DocPanel filePath={previewFilePath ?? undefined} onOpenLocalFile={onPreviewFile} /></Suspense>;
-        case 'browser': return <Suspense fallback={fallback}><BrowserPanel /></Suspense>;
-        case 'ceo': return jawCeoPanel;
         default: return null;
     }
 }
 
-function renderBottomTabContent(tab: BottomPanelTab, controls: BottomPanelRenderControls): ReactNode {
+function renderBottomTabContent(tab: BottomPanelTab, controls: BottomPanelRenderControls, selectedInstancePort: number | null, onInsertCommentIntoPreview: (port: number, text: string) => Promise<PreviewInsertTextResult>): 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>;
+        case 'browser': return <Suspense fallback={fallback}><BrowserPanel onCollapse={controls.onCollapse} selectedInstancePort={selectedInstancePort} onInsertCommentIntoPreview={onInsertCommentIntoPreview} /></Suspense>;
         default: return null;
     }
 }
 
 export function SidebarRailRouter(props: Props) {
     const panelLayout = usePanelLayout();
-    const workbenchResource = useWorkbenchResourceState({ initialFolderRootPath: props.dashboardSettingsUi.rightFolderRootPath });
-    const {
-        activeResourcePath: rightPreviewFilePath,
-        folderRootPath: rightFolderRootPath,
-        repoRootPath,
-        repoRootMode,
-        gitRefreshVersion,
-        setActiveResource,
-        setFolderRootPath,
-        setRepoRootPath,
-        followInstanceRepoRoot,
-        bumpGitRefresh,
-    } = workbenchResource;
-    const [folderPanelSession, setFolderPanelSession] = useState<FolderPanelSessionState | null>(null);
+    // Per-Files-tab resource state lives in the tab metadata (020 §5 Option B).
+    // The registry's rightFolderRootPath remains the fallback root for tabs
+    // that have not picked their own root yet.
+    const fallbackFolderRootPath = props.dashboardSettingsUi.rightFolderRootPath;
+    const openTabs = panelLayout.state.rightPanel.tabs.openTabs;
+    const activeTabId = panelLayout.state.rightPanel.tabs.activeTabId;
+    const activeTab = openTabs.find(t => t.id === activeTabId) ?? null;
+    const targetFilesTab = activeTab?.kind === 'files' ? activeTab : (openTabs.find(t => t.kind === 'files') ?? null);
+    const [gitRefreshVersion, setGitRefreshVersion] = useState(0);
+    const bumpGitRefresh = useCallback(() => setGitRefreshVersion(version => version + 1), []);
+    const [folderSessions, setFolderSessions] = useState<Record<string, FolderPanelSessionState | null>>({});
     const [, setRecentDroppedPaths] = useState<ElectronDroppedPathsEvent | null>(null);
     const [dropNotice, setDropNotice] = useState<string | null>(null);
     const [remindersView, setRemindersView] = useState<RemindersView>('matrix');
     const remindersFeed = useRemindersFeed({ active: props.sidebarMode === 'reminders' });
     const isElectron = currentManagerSurface() === 'electron';
     const desktopPanelsAvailable = isElectron;
+    const [previewInsertTextRequest, setPreviewInsertTextRequest] = useState<PreviewInsertTextRequest | null>(null);
+    const previewInsertSeqRef = useRef(0);
+    const previewInsertResolversRef = useRef(new Map<string, (result: PreviewInsertTextResult) => void>());
+    // 030 v2/v3: keep the server registry in sync, deliver shares to the
+    // selected instance's runtime-context, and relay screenshot commands.
+    useEmbeddedBrowserTargetSync(isElectron, props.selectedInstance?.port ?? null);
     const rightPanelOpen = desktopPanelsAvailable && panelLayout.effectiveRightOpen;
-    const rightPanelCeoActive = panelLayout.state.rightPanel.topMode === 'ceo'
-        || panelLayout.state.rightPanel.bottomMode === 'ceo';
-    const codeWorkingDir = rightFolderRootPath || props.workingDir || '';
+    const codeWorkingDir = targetFilesTab?.files?.folderRootPath || fallbackFolderRootPath || props.workingDir || '';
 
-    useEffect(() => {
-        if (rightPanelCeoActive && props.jawCeoOpen) {
-            props.onJawCeoOpenChange?.(false);
+    const handleInsertCommentIntoPreview = useCallback((port: number, text: string): Promise<PreviewInsertTextResult> => {
+        if (props.selectedInstance?.port !== port) {
+            return Promise.resolve({ ok: false, error: 'selected instance changed before preview insert' });
         }
-    }, [rightPanelCeoActive]);
-
-    useEffect(() => {
-        if (isElectron && props.jawCeoOpen && !rightPanelCeoActive) {
-            panelLayout.dispatch({ type: 'OPEN_RIGHT_PANEL', mode: 'ceo', slot: 'top', direct: true });
-            props.onJawCeoOpenChange?.(false);
+        if (!props.previewEnabled) {
+            return Promise.resolve({ ok: false, error: 'Preview is off. Turn it on before inserting a browser comment.' });
+        }
+        if (props.sidebarMode !== 'instances' || props.viewMode !== 'jaw' || props.activeDetailTab !== 'preview') {
+            return Promise.resolve({ ok: false, error: 'Open the selected instance Preview tab before inserting a browser comment.' });
         }
-    }, [isElectron, props.jawCeoOpen]);
+        const id = `browser-comment-${Date.now()}-${++previewInsertSeqRef.current}`;
+        setPreviewInsertTextRequest({ id, port, text });
+        return new Promise(resolve => {
+            const timer = window.setTimeout(() => {
+                previewInsertResolversRef.current.delete(id);
+                setPreviewInsertTextRequest(current => current?.id === id ? null : current);
+                resolve({ ok: false, error: 'preview insert timed out; reopen the selected instance Preview tab and try again' });
+            }, 1400);
+            previewInsertResolversRef.current.set(id, result => {
+                window.clearTimeout(timer);
+                resolve(result);
+            });
+        });
+    }, [props.activeDetailTab, props.previewEnabled, props.selectedInstance?.port, props.sidebarMode, props.viewMode]);
 
-    const ceoConsoleOpen = rightPanelCeoActive || (!isElectron && props.jawCeoOpen);
+    const handlePreviewInsertTextResult = useCallback((id: string, result: PreviewInsertTextResult): void => {
+        const resolve = previewInsertResolversRef.current.get(id);
+        if (!resolve) return;
+        previewInsertResolversRef.current.delete(id);
+        setPreviewInsertTextRequest(current => current?.id === id ? null : current);
+        resolve(result);
+    }, []);
+
+    // CEO: handled through right sidebar tab system now. CEO is hidden in v1,
+    // but we keep the overlay console for non-Electron surfaces.
+    const ceoConsoleOpen = !isElectron && props.jawCeoOpen;
     const handleCloseCeo = useCallback(() => {
-        if (rightPanelCeoActive) {
-            const slot = panelLayout.state.rightPanel.topMode === 'ceo' ? 'top' : 'bottom';
-            panelLayout.dispatch({ type: 'CLOSE_RIGHT_SUB', slot });
-        } else {
-            props.onJawCeoOpenChange?.(false);
-        }
-    }, [rightPanelCeoActive, panelLayout, props.onJawCeoOpenChange]);
+        props.onJawCeoOpenChange?.(false);
+    }, [props.onJawCeoOpenChange]);
 
     const jawCeoPanel = (ceoConsoleOpen && props.jawCeo && props.jawCeoVoice) ? (
         <JawCeoConsole
@@ -289,35 +346,59 @@ export function SidebarRailRouter(props: Props) {
         && props.notesSelectedNote
         && !props.notesSelectedNote.tags?.includes(props.notesModel.tagFilter),
     );
+    // External file open: focus/create a Files tab and assign the file to it.
     function handleRightPreviewFile(path: string): void {
         const previewPath = expandDesktopHomePath(path.trim());
         if (!previewPath) return;
-        setActiveResource(previewPath, 'doc');
-        panelLayout.dispatch({ type: 'OPEN_RIGHT_PANEL', mode: 'doc', slot: 'bottom' });
+        panelLayout.dispatch({ type: 'OPEN_FILE_IN_FILES_TAB', path: previewPath });
     }
 
-    useEffect(() => {
-        if (rightFolderRootPath !== props.dashboardSettingsUi.rightFolderRootPath) {
-            setFolderRootPath(props.dashboardSettingsUi.rightFolderRootPath);
-            setRepoRootPath(null);
-        }
-        setFolderPanelSession(current => (
-            current?.rootPath === props.dashboardSettingsUi.rightFolderRootPath
-                ? current
-                : null
-        ));
-    }, [props.dashboardSettingsUi.rightFolderRootPath, rightFolderRootPath, setFolderRootPath, setRepoRootPath]);
+    // Per-tab callbacks bound to a specific Files module tab.
+    const handleTabPreviewFile = useCallback((tabId: string, path: string): void => {
+        const previewPath = expandDesktopHomePath(path.trim());
+        if (!previewPath) return;
+        panelLayout.dispatch({ type: 'SET_FILES_TAB_FILE', tabId, path: previewPath });
+    }, [panelLayout]);
 
-    const updateRightFolderRoot = useCallback((path: string | null): void => {
-        if (rightFolderRootPath !== path) setFolderPanelSession(null);
-        setFolderRootPath(path);
-        setRepoRootPath(null);
+    const handleTabRootChange = useCallback((tabId: string, path: string | null): void => {
+        setFolderSessions(current => (current[tabId] ? { ...current, [tabId]: null } : current));
+        panelLayout.dispatch({ type: 'SET_FILES_TAB_ROOT', tabId, path });
         props.onDashboardSettingsPatch({ rightFolderRootPath: path });
-    }, [props.onDashboardSettingsPatch, rightFolderRootPath, setFolderRootPath, setRepoRootPath]);
+    }, [panelLayout, props.onDashboardSettingsPatch]);
+
+    const handleTabRepoRootChange = useCallback((tabId: string, path: string | null, mode: WorkbenchRepoRootMode = 'instance'): void => {
+        panelLayout.dispatch({ type: 'SET_FILES_TAB_REPO_ROOT', tabId, path, mode });
+    }, [panelLayout]);
+
+    const handleFollowInstanceRepoRoot = useCallback((tabId: string | null, path: string | null): void => {
+        if (!tabId) return;
+        // Explicit follow-instance reset clears a manual pin.
+        panelLayout.dispatch({ type: 'SET_FILES_TAB_REPO_ROOT', tabId, path, mode: 'follow-instance' });
+    }, [panelLayout]);
+
+    const handleFolderSessionChange = useCallback((tabId: string, state: FolderPanelSessionState): void => {
+        setFolderSessions(current => ({ ...current, [tabId]: state }));
+    }, []);
 
-    const updateRepoRoot = useCallback((path: string | null, mode: WorkbenchRepoRootMode = 'instance'): void => {
-        setRepoRootPath(path, mode);
-    }, [setRepoRootPath]);
+    // Browser module page state: the module tab owns its page url/title.
+    const handleBrowserPageState = useCallback((tabId: string, state: { url: string; title: string }): void => {
+        panelLayout.dispatch({ type: 'SET_BROWSER_TAB_STATE', tabId, url: state.url, title: state.title });
+    }, [panelLayout]);
+
+    // "Open in new tab" from an embedded page creates a new Browser module tab.
+    const handleOpenBrowserWindow = useCallback((url: string): void => {
+        panelLayout.dispatch({ type: 'OPEN_BROWSER_MODULE_TAB', url });
+    }, [panelLayout]);
+
+    // Code workspace root change: update the target Files tab root (without
+    // forcing the sidebar open) and keep the registry fallback in sync.
+    const targetFilesTabId = targetFilesTab?.id ?? null;
+    const handleCodeWorkingDirChange = useCallback((path: string | null): void => {
+        if (targetFilesTabId) {
+            panelLayout.dispatch({ type: 'SET_FILES_TAB_ROOT', tabId: targetFilesTabId, path });
+        }
+        props.onDashboardSettingsPatch({ rightFolderRootPath: path });
+    }, [panelLayout, props.onDashboardSettingsPatch, targetFilesTabId]);
 
     const handleDroppedPaths = useCallback((event: ElectronDroppedPathsEvent): void => {
         setRecentDroppedPaths(event);
@@ -325,13 +406,13 @@ export function SidebarRailRouter(props: Props) {
         if (event.source === 'preview') return;
         const directory = firstDirectory(event.entries);
         if (directory) {
-            updateRightFolderRoot(directory.path);
-            panelLayout.dispatch({ type: 'OPEN_RIGHT_PANEL', mode: 'folder', slot: 'top' });
+            panelLayout.dispatch({ type: 'OPEN_FOLDER_IN_FILES_TAB', path: directory.path });
+            props.onDashboardSettingsPatch({ rightFolderRootPath: directory.path });
             return;
         }
         const file = firstFile(event.entries);
         if (file) handleRightPreviewFile(file.path);
-    }, [panelLayout, updateRightFolderRoot]);
+    }, [panelLayout, props.onDashboardSettingsPatch]);
 
     const electronDrop = useElectronDroppedPaths({ onDroppedPaths: handleDroppedPaths });
 
@@ -341,26 +422,9 @@ export function SidebarRailRouter(props: Props) {
     const primaryProjectDir = props.selectedInstance?.projectDirs?.[0]?.trim() || null;
     const handleLoadPrimaryProjectDir = useCallback((): void => {
         if (!primaryProjectDir) return;
-        updateRightFolderRoot(primaryProjectDir);
-        const { topMode, bottomMode } = panelLayout.state.rightPanel;
-        if (topMode !== 'folder' && bottomMode !== 'folder') {
-            panelLayout.dispatch({ type: 'OPEN_RIGHT_PANEL', mode: 'folder', slot: 'top' });
-        }
-    }, [panelLayout, primaryProjectDir, updateRightFolderRoot]);
-    const renderRightHeaderAction = useCallback((mode: RightPanelMode): ReactNode => {
-        if (mode !== 'folder') return null;
-        return (
-            <button
-                type="button"
-                className="right-sub-action right-sub-load-folder"
-                disabled={!primaryProjectDir || rightFolderRootPath === primaryProjectDir}
-                title={primaryProjectDir ? `Load ${primaryProjectDir}` : 'No project folder'}
-                onClick={handleLoadPrimaryProjectDir}
-            >
-                불러오기
-            </button>
-        );
-    }, [handleLoadPrimaryProjectDir, primaryProjectDir, rightFolderRootPath]);
+        panelLayout.dispatch({ type: 'OPEN_FOLDER_IN_FILES_TAB', path: primaryProjectDir });
+        props.onDashboardSettingsPatch({ rightFolderRootPath: primaryProjectDir });
+    }, [panelLayout, primaryProjectDir, props.onDashboardSettingsPatch]);
 
     return (
         <NotesCommandProvider>
@@ -374,10 +438,31 @@ export function SidebarRailRouter(props: Props) {
             onCloseDrawer={props.onCloseDrawer}
             rightPanelOpen={rightPanelOpen}
             rightPanelWidth={panelLayout.state.rightPanel.width}
-            rightPanelContent={rightPanelOpen ? <RightSidebar renderPanel={mode => renderRightPanelContent(mode, rightPreviewFilePath, rightFolderRootPath, repoRootPath, repoRootMode, gitRefreshVersion, handleRightPreviewFile, updateRightFolderRoot, updateRepoRoot, followInstanceRepoRoot, bumpGitRefresh, props.selectedInstance, props.dashboardSettingsUi, props.onDashboardSettingsPatch, props.notesModel, jawCeoPanel, folderPanelSession, setFolderPanelSession)} renderHeaderAction={renderRightHeaderAction} /> : undefined}
+            rightPanelContent={rightPanelOpen ? <RightSidebar onLoadProjectFolder={handleLoadPrimaryProjectDir} loadProjectFolderDisabled={!primaryProjectDir || (targetFilesTab?.files?.folderRootPath ?? fallbackFolderRootPath) === primaryProjectDir} renderPanel={(kind, tab) => renderRightPanelContent(kind, tab, {
+                activeTabId,
+                primaryProjectDir,
+                fallbackFolderRootPath,
+                diffFilesTab: targetFilesTab,
+                gitRefreshVersion,
+                onOpenFileGlobal: handleRightPreviewFile,
+                onTabPreviewFile: handleTabPreviewFile,
+                onTabRootChange: handleTabRootChange,
+                onTabRepoRootChange: handleTabRepoRootChange,
+                onFollowInstanceRepoRoot: handleFollowInstanceRepoRoot,
+                onBrowserPageState: handleBrowserPageState,
+                onOpenBrowserWindow: handleOpenBrowserWindow,
+                onInsertCommentIntoPreview: handleInsertCommentIntoPreview,
+                onGitRefresh: bumpGitRefresh,
+                selectedInstance: props.selectedInstance,
+                dashboardSettingsUi: props.dashboardSettingsUi,
+                onDashboardSettingsPatch: props.onDashboardSettingsPatch,
+                notesModel: props.notesModel,
+                folderSessions,
+                onFolderSessionChange: handleFolderSessionChange,
+            })} /> : undefined}
             bottomPanelOpen={bottomPanelOpen}
             bottomPanelHeight={panelLayout.state.bottomPanel.height}
-            bottomPanelContent={panelLayout.state.bottomPanel.tabs.length > 0 ? <BottomPanel renderTab={renderBottomTabContent} /> : undefined}
+            bottomPanelContent={panelLayout.state.bottomPanel.tabs.length > 0 ? <BottomPanel renderTab={(tab, controls) => renderBottomTabContent(tab, controls, props.selectedInstance?.port ?? null, handleInsertCommentIntoPreview)} /> : undefined}
             navigator={(
                 <>
                     <SidebarRail
@@ -433,13 +518,13 @@ export function SidebarRailRouter(props: Props) {
                     <div className="workspace-surface-layer">
                         <WorkspaceSurface active={props.sidebarMode === 'instances' && props.viewMode === 'jaw'}>
                             <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} {...(props.onOpenNotesFromPreview ? { onOpenNotesFromPreview: props.onOpenNotesFromPreview } : {})} onOpenDocFromPreview={handleRightPreviewFile} onPreviewDroppedFiles={handlePreviewDroppedFiles} docPanelCapable={desktopPanelsAvailable} />
+                                <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 } : {})} onOpenDocFromPreview={handleRightPreviewFile} onPreviewDroppedFiles={handlePreviewDroppedFiles} docPanelCapable={desktopPanelsAvailable} previewInsertTextRequest={previewInsertTextRequest} onPreviewInsertTextResult={handlePreviewInsertTextResult} />
                             )} logs={props.detailContent('logs')} settings={props.detailContent('settings')} />
                         </WorkspaceSurface>
                         {props.viewMode === 'code' && props.sidebarMode === 'instances' ? (
                             <WorkspaceSurface active>
                                 <Suspense fallback={<div style={{ padding: '24px', color: 'var(--text-dim)', fontSize: '13px' }}>Loading Code workspace...</div>}>
-                                    <CodeCanvas port={props.port} workingDir={codeWorkingDir} onWorkingDirChange={updateRightFolderRoot} onOpenLocalFile={handleRightPreviewFile} />
+                                    <CodeCanvas port={props.port} workingDir={codeWorkingDir} onWorkingDirChange={handleCodeWorkingDirChange} onOpenLocalFile={handleRightPreviewFile} />
                                 </Suspense>
                             </WorkspaceSurface>
                         ) : null}