tabminal 3.0.10 → 3.0.12

package/public/app.js

@@ -90,6 +90,12 @@ const agentSetupCopilotToken = document.getElementById(
 const agentSetupCopilotNote = document.getElementById(
     'agent-setup-copilot-note'
 );
+const confirmModal = document.getElementById('confirm-modal');
+const confirmModalTitle = document.getElementById('confirm-modal-title');
+const confirmModalMessage = document.getElementById('confirm-modal-message');
+const confirmModalNote = document.getElementById('confirm-modal-note');
+const confirmModalCancel = document.getElementById('confirm-modal-cancel');
+const confirmModalConfirm = document.getElementById('confirm-modal-confirm');
 const terminalWrapper = document.getElementById('terminal-wrapper');
 const editorPane = document.getElementById('editor-pane');
 // #endregion
@@ -97,6 +103,7 @@ const editorPane = document.getElementById('editor-pane');
 // #region Configuration
 const HEARTBEAT_INTERVAL_MS = 1000;
 const RECONNECT_RETRY_MS = 5000;
+const FILE_TREE_REFRESH_INTERVAL_MS = 3000;
 const MAIN_SERVER_ID = 'main';
 const RUNTIME_BOOT_ID_STORAGE_KEY = 'tabminal_runtime_boot_id';
 const WORKSPACE_DEVICE_ID_STORAGE_KEY = 'tabminal_workspace_device_id';
@@ -104,6 +111,14 @@ const RECENT_AGENT_USAGE_STORAGE_KEY = 'tabminal_recent_agent_usage';
 const FILE_WORKSPACE_TAB_PREFIX = 'file:';
 const AGENT_WORKSPACE_TAB_PREFIX = 'agent:';
 const TERMINAL_WORKSPACE_TAB_KEY = 'terminal:main';
+const SUPPORTED_IMAGE_EXTENSIONS = new Set([
+    'png',
+    'jpg',
+    'jpeg',
+    'gif',
+    'svg',
+    'webp'
+]);
 const CLOSE_ICON_SVG = '<svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>';
 const AGENT_ICON_SVG = '<svg viewBox="0 0 24 24" width="17" height="17" stroke="currentColor" stroke-width="1.8" fill="none" stroke-linecap="round" stroke-linejoin="round"><rect x="7" y="7" width="10" height="10" rx="2"></rect><path d="M9 7V5"></path><path d="M15 7V5"></path><path d="M12 17v2"></path><path d="M5 12H3"></path><path d="M21 12h-2"></path><path d="M9 11h.01"></path><path d="M15 11h.01"></path><path d="M9.5 14c.7.67 1.53 1 2.5 1s1.8-.33 2.5-1"></path></svg>';
 const TERMINAL_TAB_ICON_SVG = '<svg viewBox="0 0 24 24" width="15" height="15" stroke="currentColor" stroke-width="1.8" fill="none" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"></rect><path d="m8 10 3 2-3 2"></path><path d="M13 15h4"></path></svg>';
@@ -118,6 +133,10 @@ const THOUGHT_SELECT_ICON_SVG = '<svg viewBox="0 0 24 24" width="15" height="15"
 const TERMINAL_TAB_MODE_ICON_SVG = '<svg viewBox="0 0 24 24" width="15" height="15" stroke="currentColor" stroke-width="1.8" fill="none" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="5" width="16" height="14" rx="2"></rect><path d="M4 9h16"></path><path d="m9 15 3-3 3 3"></path></svg>';
 const TERMINAL_AUTO_MODE_ICON_SVG = '<svg viewBox="0 0 24 24" width="15" height="15" stroke="currentColor" stroke-width="1.8" fill="none" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="5" width="16" height="5" rx="1.5"></rect><rect x="4" y="14" width="16" height="5" rx="1.5"></rect></svg>';
 const PLUS_ICON_SVG = '<svg viewBox="0 0 24 24" width="15" height="15" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14"></path><path d="M5 12h14"></path></svg>';
+const RENAME_ICON_SVG = '<svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="1.9" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="m12 20 7-7"></path><path d="M16 6.5a1.8 1.8 0 1 1 2.5 2.5L8 19.5 4 20l.5-4L16 6.5Z"></path></svg>';
+const DELETE_ICON_SVG = '<svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="1.9" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7h16"></path><path d="M10 11v6"></path><path d="M14 11v6"></path><path d="M6 7l1 12h10l1-12"></path><path d="M9 7V4h6v3"></path></svg>';
+const NEW_FOLDER_ICON_SVG = '<svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="1.8" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 7.5A2.5 2.5 0 0 1 6 5h4l2 2h6a2.5 2.5 0 0 1 2.5 2.5V17A2.5 2.5 0 0 1 18 19.5H6A2.5 2.5 0 0 1 3.5 17Z"></path><path d="M12 10.5v5"></path><path d="M9.5 13h5"></path></svg>';
+const NEW_FILE_ICON_SVG = '<svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="1.8" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M7 3.5h7l4 4V20.5H7A2.5 2.5 0 0 1 4.5 18V6A2.5 2.5 0 0 1 7 3.5Z"></path><path d="M14 3.5V8h4"></path><path d="M12 11v6"></path><path d="M9 14h6"></path></svg>';
 const TERMINAL_FONT_FAMILY = '\'Monaspace Neon\', "SF Mono Terminal", '
     + '"SFMono-Regular", "SF Mono", "JetBrains Mono", Menlo, Consolas, '
     + 'monospace';
@@ -170,6 +189,18 @@ function isCompactWorkspaceMode() {
     return !!window.__tabminalCompactWorkspaceMode;
 }
 
+function isSupportedImagePath(filePath) {
+    if (typeof filePath !== 'string') {
+        return false;
+    }
+    const dotIndex = filePath.lastIndexOf('.');
+    if (dotIndex === -1) {
+        return false;
+    }
+    const ext = filePath.slice(dotIndex + 1).toLowerCase();
+    return SUPPORTED_IMAGE_EXTENSIONS.has(ext);
+}
+
 function isCompactTerminalTabsMode() {
     return !!window.__tabminalCompactTerminalTabsMode;
 }
@@ -668,6 +699,7 @@ class EditorManager {
         this.currentSession = null;
         this.iconMap = null;
         this.agentTimestampTimer = null;
+        this.treeRefreshTimer = null;
         
         // DOM Elements
         this.pane = document.getElementById('editor-pane');
@@ -1441,90 +1473,1476 @@ class EditorManager {
         return session ? session.server.modelStore : null;
     }
 
-    getModel(filePath, session = this.currentSession) {
-        const store = this.getModelStore(session);
-        if (!store) return null;
-        return store.get(filePath) || null;
-    }
+    getModel(filePath, session = this.currentSession) {
+        const store = this.getModelStore(session);
+        if (!store) return null;
+        return store.get(filePath) || null;
+    }
+
+    setModel(filePath, value, session = this.currentSession) {
+        const store = this.getModelStore(session);
+        if (!store) return;
+        store.set(filePath, value);
+    }
+
+    remapTreePath(pathValue, oldPath, newPath, isDirectory) {
+        if (typeof pathValue !== 'string' || pathValue.length === 0) {
+            return pathValue;
+        }
+        if (pathValue === oldPath) {
+            return newPath;
+        }
+        if (
+            isDirectory
+            && pathValue.startsWith(`${oldPath}/`)
+        ) {
+            return `${newPath}${pathValue.slice(oldPath.length)}`;
+        }
+        return pathValue;
+    }
+
+    remapWorkspaceTabKey(key, oldPath, newPath, isDirectory) {
+        if (!isFileWorkspaceTabKey(key)) return key;
+        const filePath = workspaceKeyToFilePath(key);
+        const nextPath = this.remapTreePath(
+            filePath,
+            oldPath,
+            newPath,
+            isDirectory
+        );
+        return nextPath ? makeFileWorkspaceTabKey(nextPath) : key;
+    }
+
+    cloneRenamedModelEntry(entry, nextPath) {
+        if (!entry || typeof entry !== 'object') return entry;
+        const nextEntry = {
+            ...entry
+        };
+        if (nextEntry.model) {
+            let nextContent = nextEntry.content;
+            try {
+                if (typeof nextEntry.model.getValue === 'function') {
+                    nextContent = nextEntry.model.getValue();
+                }
+            } catch {
+                // Ignore content extraction failure and keep cached content.
+            }
+            nextEntry.content = nextContent;
+
+            if (
+                this.monacoInstance
+                && typeof nextEntry.model.getLanguageId === 'function'
+            ) {
+                const oldModel = nextEntry.model;
+                const languageId = oldModel.getLanguageId();
+                const uri = this.monacoInstance.Uri.file(nextPath);
+                const existingModel = this.monacoInstance.editor.getModel(uri);
+                if (existingModel && existingModel !== oldModel) {
+                    existingModel.setValue(nextContent ?? '');
+                    nextEntry.model = existingModel;
+                } else {
+                    nextEntry.model = this.monacoInstance.editor.createModel(
+                        nextContent ?? '',
+                        languageId,
+                        uri
+                    );
+                }
+                if (nextEntry.model !== oldModel) {
+                    try {
+                        oldModel.dispose();
+                    } catch {
+                        // Ignore disposal failures for stale models.
+                    }
+                }
+                return nextEntry;
+            }
+        }
+        return nextEntry;
+    }
+
+    remapModelStorePaths(server, oldPath, newPath, isDirectory) {
+        if (!server?.modelStore) return false;
+        const nextEntries = [];
+        let changed = false;
+        for (const [path, entry] of server.modelStore.entries()) {
+            const nextPath = this.remapTreePath(
+                path,
+                oldPath,
+                newPath,
+                isDirectory
+            );
+            if (nextPath !== path) {
+                changed = true;
+                nextEntries.push([
+                    nextPath,
+                    this.cloneRenamedModelEntry(entry, nextPath)
+                ]);
+                server.modelStore.delete(path);
+            }
+        }
+        for (const [nextPath, entry] of nextEntries) {
+            server.modelStore.set(nextPath, entry);
+        }
+        return changed;
+    }
+
+    remapPendingFileWrites(sessionKey, oldPath, newPath, isDirectory) {
+        const pending = pendingChanges.sessions.get(sessionKey);
+        if (!pending?.fileWrites || pending.fileWrites.size === 0) {
+            return false;
+        }
+        const nextEntries = [];
+        let changed = false;
+        for (const [path, content] of pending.fileWrites.entries()) {
+            const nextPath = this.remapTreePath(
+                path,
+                oldPath,
+                newPath,
+                isDirectory
+            );
+            if (nextPath !== path) {
+                changed = true;
+                pending.fileWrites.delete(path);
+                nextEntries.push([nextPath, content]);
+            }
+        }
+        for (const [nextPath, content] of nextEntries) {
+            pending.fileWrites.set(nextPath, content);
+        }
+        return changed;
+    }
+
+    pathMatchesTarget(pathValue, targetPath, isDirectory) {
+        if (typeof pathValue !== 'string' || pathValue.length === 0) {
+            return false;
+        }
+        if (pathValue === targetPath) {
+            return true;
+        }
+        return !!(
+            isDirectory
+            && pathValue.startsWith(`${targetPath}/`)
+        );
+    }
+
+    removeDeletedModelStorePaths(server, targetPath, isDirectory) {
+        if (!server?.modelStore) return false;
+        let changed = false;
+        for (const [path, entry] of [...server.modelStore.entries()]) {
+            if (!this.pathMatchesTarget(path, targetPath, isDirectory)) {
+                continue;
+            }
+            changed = true;
+            try {
+                entry?.model?.dispose?.();
+            } catch {
+                // Ignore stale model disposal failures.
+            }
+            server.modelStore.delete(path);
+        }
+        return changed;
+    }
+
+    removeDeletedPendingFileWrites(sessionKey, targetPath, isDirectory) {
+        const pending = pendingChanges.sessions.get(sessionKey);
+        if (!pending?.fileWrites || pending.fileWrites.size === 0) {
+            return false;
+        }
+        let changed = false;
+        for (const path of [...pending.fileWrites.keys()]) {
+            if (!this.pathMatchesTarget(path, targetPath, isDirectory)) {
+                continue;
+            }
+            changed = true;
+            pending.fileWrites.delete(path);
+        }
+        return changed;
+    }
+
+    applyRenamedPathToSession(session, oldPath, newPath, isDirectory) {
+        let workspaceChanged = false;
+        let visualChanged = false;
+
+        const remapList = (values) => {
+            const nextValues = [];
+            for (const value of values) {
+                const nextValue = this.remapTreePath(
+                    value,
+                    oldPath,
+                    newPath,
+                    isDirectory
+                );
+                if (!nextValues.includes(nextValue)) {
+                    nextValues.push(nextValue);
+                }
+            }
+            return nextValues;
+        };
+
+        const nextOpenFiles = remapList(session.editorState.openFiles);
+        if (
+            JSON.stringify(nextOpenFiles)
+            !== JSON.stringify(session.editorState.openFiles)
+        ) {
+            session.editorState.openFiles = nextOpenFiles;
+            session.sharedWorkspaceState.openFiles = [...nextOpenFiles];
+            workspaceChanged = true;
+            visualChanged = true;
+        }
+
+        const nextExpandedPaths = remapList(
+            session.sharedWorkspaceState.expandedPaths
+        );
+        if (
+            JSON.stringify(nextExpandedPaths)
+            !== JSON.stringify(session.sharedWorkspaceState.expandedPaths)
+        ) {
+            session.sharedWorkspaceState.expandedPaths = nextExpandedPaths;
+            workspaceChanged = true;
+        }
+
+        const nextActiveFilePath = this.remapTreePath(
+            session.editorState.activeFilePath,
+            oldPath,
+            newPath,
+            isDirectory
+        );
+        if (nextActiveFilePath !== session.editorState.activeFilePath) {
+            session.editorState.activeFilePath = nextActiveFilePath || null;
+            visualChanged = true;
+        }
+
+        const nextActiveTabKey = this.remapWorkspaceTabKey(
+            session.workspaceState.activeTabKey,
+            oldPath,
+            newPath,
+            isDirectory
+        );
+        if (nextActiveTabKey !== session.workspaceState.activeTabKey) {
+            session.workspaceState.activeTabKey = nextActiveTabKey;
+            visualChanged = true;
+        }
+
+        const nextLastNonTerminalTabKey = this.remapWorkspaceTabKey(
+            session.workspaceState.lastNonTerminalTabKey,
+            oldPath,
+            newPath,
+            isDirectory
+        );
+        if (
+            nextLastNonTerminalTabKey
+            !== session.workspaceState.lastNonTerminalTabKey
+        ) {
+            session.workspaceState.lastNonTerminalTabKey =
+                nextLastNonTerminalTabKey;
+        }
+
+        if (session.editorState.viewStates.size > 0) {
+            const nextViewStates = new Map();
+            for (const [path, viewState] of session.editorState.viewStates) {
+                nextViewStates.set(
+                    this.remapTreePath(path, oldPath, newPath, isDirectory),
+                    viewState
+                );
+            }
+            session.editorState.viewStates = nextViewStates;
+        }
+
+        const nextSelectedTreePath = this.remapTreePath(
+            session.selectedTreePath,
+            oldPath,
+            newPath,
+            isDirectory
+        );
+        if (nextSelectedTreePath !== session.selectedTreePath) {
+            session.selectedTreePath = nextSelectedTreePath || '';
+            visualChanged = true;
+        }
+
+        const nextEditingTreePath = this.remapTreePath(
+            session.treeEditingPath,
+            oldPath,
+            newPath,
+            isDirectory
+        );
+        if (nextEditingTreePath !== session.treeEditingPath) {
+            session.treeEditingPath = nextEditingTreePath || '';
+        }
+
+        const nextPendingFocusPath = this.remapTreePath(
+            session.pendingTreeFocusPath,
+            oldPath,
+            newPath,
+            isDirectory
+        );
+        if (nextPendingFocusPath !== session.pendingTreeFocusPath) {
+            session.pendingTreeFocusPath = nextPendingFocusPath || '';
+        }
+
+        const nextPendingRenameFocusPath = this.remapTreePath(
+            session.pendingTreeRenameFocusPath,
+            oldPath,
+            newPath,
+            isDirectory
+        );
+        if (
+            nextPendingRenameFocusPath
+            !== session.pendingTreeRenameFocusPath
+        ) {
+            session.pendingTreeRenameFocusPath =
+                nextPendingRenameFocusPath || '';
+        }
+
+        return {
+            workspaceChanged,
+            visualChanged
+        };
+    }
+
+    applyDeletedPathToSession(session, targetPath, isDirectory) {
+        let workspaceChanged = false;
+        let visualChanged = false;
+
+        const filterList = (values) => values.filter(
+            (value) => !this.pathMatchesTarget(value, targetPath, isDirectory)
+        );
+
+        const nextOpenFiles = filterList(session.editorState.openFiles);
+        if (
+            JSON.stringify(nextOpenFiles)
+            !== JSON.stringify(session.editorState.openFiles)
+        ) {
+            session.editorState.openFiles = nextOpenFiles;
+            session.sharedWorkspaceState.openFiles = [...nextOpenFiles];
+            workspaceChanged = true;
+            visualChanged = true;
+        }
+
+        const nextExpandedPaths = filterList(
+            session.sharedWorkspaceState.expandedPaths
+        );
+        if (
+            JSON.stringify(nextExpandedPaths)
+            !== JSON.stringify(session.sharedWorkspaceState.expandedPaths)
+        ) {
+            session.sharedWorkspaceState.expandedPaths = nextExpandedPaths;
+            workspaceChanged = true;
+        }
+
+        if (
+            this.pathMatchesTarget(
+                session.editorState.activeFilePath,
+                targetPath,
+                isDirectory
+            )
+        ) {
+            session.editorState.activeFilePath = nextOpenFiles[0] || null;
+            visualChanged = true;
+        }
+
+        if (session.editorState.viewStates.size > 0) {
+            const nextViewStates = new Map();
+            let changed = false;
+            for (const [path, viewState] of session.editorState.viewStates) {
+                if (this.pathMatchesTarget(path, targetPath, isDirectory)) {
+                    changed = true;
+                    continue;
+                }
+                nextViewStates.set(path, viewState);
+            }
+            if (changed) {
+                session.editorState.viewStates = nextViewStates;
+            }
+        }
+
+        if (
+            this.pathMatchesTarget(
+                session.selectedTreePath,
+                targetPath,
+                isDirectory
+            )
+        ) {
+            session.selectedTreePath = '';
+            visualChanged = true;
+        }
+
+        if (
+            this.pathMatchesTarget(
+                session.treeEditingPath,
+                targetPath,
+                isDirectory
+            )
+        ) {
+            session.treeEditingPath = '';
+        }
+
+        if (
+            this.pathMatchesTarget(
+                session.pendingTreeFocusPath,
+                targetPath,
+                isDirectory
+            )
+        ) {
+            session.pendingTreeFocusPath = '';
+        }
+
+        if (
+            this.pathMatchesTarget(
+                session.pendingTreeRenameFocusPath,
+                targetPath,
+                isDirectory
+            )
+        ) {
+            session.pendingTreeRenameFocusPath = '';
+        }
+
+        const activeTabKey = session.workspaceState.activeTabKey || '';
+        if (
+            isFileWorkspaceTabKey(activeTabKey)
+            && this.pathMatchesTarget(
+                workspaceKeyToFilePath(activeTabKey),
+                targetPath,
+                isDirectory
+            )
+        ) {
+            session.workspaceState.activeTabKey = '';
+            visualChanged = true;
+        }
+
+        const lastNonTerminal = session.workspaceState.lastNonTerminalTabKey || '';
+        if (
+            isFileWorkspaceTabKey(lastNonTerminal)
+            && this.pathMatchesTarget(
+                workspaceKeyToFilePath(lastNonTerminal),
+                targetPath,
+                isDirectory
+            )
+        ) {
+            session.workspaceState.lastNonTerminalTabKey = '';
+        }
+
+        return {
+            workspaceChanged,
+            visualChanged
+        };
+    }
+
+    focusTreePath(session, path) {
+        if (!session?.fileTreeElement || !path) return;
+        requestAnimationFrame(() => {
+            const item = Array.from(
+                session.fileTreeElement.querySelectorAll('li')
+            ).find((candidate) => candidate.dataset.path === path);
+            const row = item?.querySelector('.file-tree-item');
+            if (row) {
+                row.scrollIntoView({ block: 'nearest' });
+                session.fileTreeElement.focus({ preventScroll: true });
+            }
+        });
+    }
+
+    keepTreeFocus(session) {
+        if (!session?.fileTreeElement || session.treeEditingPath) {
+            return;
+        }
+        requestAnimationFrame(() => {
+            if (!session?.fileTreeElement || session.treeEditingPath) {
+                return;
+            }
+            session.fileTreeElement.focus({ preventScroll: true });
+        });
+    }
+
+    handleRenamedPaths(server, oldPath, newPath, isDirectory) {
+        this.remapModelStorePaths(server, oldPath, newPath, isDirectory);
+
+        let currentSessionAffected = false;
+        for (const session of state.sessions.values()) {
+            if (session.serverId !== server.id) continue;
+
+            const { workspaceChanged, visualChanged } =
+                this.applyRenamedPathToSession(
+                    session,
+                    oldPath,
+                    newPath,
+                    isDirectory
+                );
+            const pendingChanged = this.remapPendingFileWrites(
+                session.key,
+                oldPath,
+                newPath,
+                isDirectory
+            );
+
+            if (workspaceChanged || pendingChanged) {
+                session.saveState({ touchWorkspace: true });
+            }
+
+            if (visualChanged && session.key === state.activeSessionKey) {
+                currentSessionAffected = true;
+            }
+
+            if (session.editorState.isVisible) {
+                this.requestSessionTreeRefresh(session);
+            }
+        }
+
+        if (!currentSessionAffected || !this.currentSession) {
+            return;
+        }
+
+        this.renderEditorTabs();
+        this.updateEditorPaneVisibility();
+        const activeKey = this.getActiveWorkspaceTabKey(this.currentSession);
+        if (isFileWorkspaceTabKey(activeKey)) {
+            this.activateFileTab(
+                workspaceKeyToFilePath(activeKey),
+                true,
+                { focusEditor: false }
+            );
+            return;
+        }
+        if (isAgentWorkspaceTabKey(activeKey)) {
+            this.activateAgentTab(activeKey, true);
+            return;
+        }
+        if (isTerminalWorkspaceTabKey(activeKey)) {
+            this.activateTerminalTab(true);
+        }
+    }
+
+    handleDeletedPaths(server, targetPath, isDirectory) {
+        this.removeDeletedModelStorePaths(server, targetPath, isDirectory);
+
+        let currentSessionAffected = false;
+        for (const session of state.sessions.values()) {
+            if (session.serverId !== server.id) continue;
+
+            const { workspaceChanged, visualChanged } =
+                this.applyDeletedPathToSession(
+                    session,
+                    targetPath,
+                    isDirectory
+                );
+            const pendingChanged = this.removeDeletedPendingFileWrites(
+                session.key,
+                targetPath,
+                isDirectory
+            );
+
+            if (workspaceChanged || pendingChanged) {
+                session.saveState({ touchWorkspace: true });
+            }
+
+            if (visualChanged && session.key === state.activeSessionKey) {
+                currentSessionAffected = true;
+            }
+
+            if (session.editorState.isVisible) {
+                this.requestSessionTreeRefresh(session);
+            }
+        }
+
+        if (!currentSessionAffected || !this.currentSession) {
+            return;
+        }
+
+        this.renderEditorTabs();
+        this.updateEditorPaneVisibility();
+        const activeKey = this.getActiveWorkspaceTabKey(this.currentSession);
+        if (isFileWorkspaceTabKey(activeKey)) {
+            this.activateFileTab(
+                workspaceKeyToFilePath(activeKey),
+                true,
+                { focusEditor: false }
+            );
+            return;
+        }
+        if (isAgentWorkspaceTabKey(activeKey)) {
+            this.activateAgentTab(activeKey, true);
+            return;
+        }
+        if (isTerminalWorkspaceTabKey(activeKey)) {
+            this.activateTerminalTab(true);
+            return;
+        }
+        this.showEmptyState();
+    }
+
+    async loadIconMap() {
+        try {
+            const res = await fetch('/icons/map.json');
+            this.iconMap = await res.json();
+        } catch (e) {
+            console.error('Failed to load icon map', e);
+        }
+    }
+
+    getIcon(name, isDirectory, isExpanded) {
+        if (!this.iconMap) return isDirectory ? (isExpanded ? '📂' : '📁') : '📄';
+        
+        if (isDirectory) {
+            const folderIcon = isExpanded ? (this.iconMap.folderOpen || 'folder-src-open') : (this.iconMap.folder || 'folder-src');
+            return `<img src="/icons/${folderIcon}.svg" class="file-icon" alt="folder">`;
+        }
+
+        const lowerName = name.toLowerCase();
+        if (this.iconMap.filenames[lowerName]) {
+            return `<img src="/icons/${this.iconMap.filenames[lowerName]}.svg" class="file-icon" alt="file">`;
+        }
+
+        const parts = name.split('.');
+        if (parts.length > 1) {
+            const ext = parts.pop().toLowerCase();
+            if (this.iconMap.extensions[ext]) {
+                return `<img src="/icons/${this.iconMap.extensions[ext]}.svg" class="file-icon" alt="file">`;
+            }
+        }
+
+        return `<img src="/icons/${this.iconMap.default || 'document'}.svg" class="file-icon" alt="file">`;
+    }
+
+    initResizer() {
+        let startY, startHeight;
+        const onMouseMove = (e) => {
+            const dy = e.clientY - startY;
+            const newHeight = startHeight + dy;
+            const containerHeight = this.pane.parentElement.clientHeight;
+            const resizerHeight = this.resizer.offsetHeight;
+            
+            if (newHeight > 100 && newHeight < containerHeight - resizerHeight - 50) {
+                const flex = `0 0 ${newHeight}px`;
+                this.pane.style.flex = flex;
+                if (this.currentSession) {
+                    this.currentSession.layoutState.editorFlex = flex;
+                }
+                this.layout();
+            }
+        };
+        const onMouseUp = () => {
+            document.removeEventListener('mousemove', onMouseMove);
+            document.removeEventListener('mouseup', onMouseUp);
+            document.body.style.cursor = '';
+            const termWrapper = document.getElementById('terminal-wrapper');
+            if (termWrapper) termWrapper.style.pointerEvents = '';
+        };
+        this.resizer.addEventListener('mousedown', (e) => {
+            startY = e.clientY;
+            startHeight = this.pane.offsetHeight;
+            document.addEventListener('mousemove', onMouseMove);
+            document.addEventListener('mouseup', onMouseUp);
+            document.body.style.cursor = 'row-resize';
+            const termWrapper = document.getElementById('terminal-wrapper');
+            if (termWrapper) termWrapper.style.pointerEvents = 'none';
+        });
+    }
+
+    refreshSessionTree(session) {
+        if (!session || !session.fileTreeElement) return;
+        session.fileTreeRenderToken = (session.fileTreeRenderToken || 0) + 1;
+        const renderToken = session.fileTreeRenderToken;
+        const scrollTop = session.fileTreeElement.scrollTop;
+        void this.renderTree(
+            session.cwd,
+            session.fileTreeElement,
+            session,
+            renderToken
+        ).finally(() => {
+            if (
+                session.fileTreeElement
+                && session.fileTreeRenderToken === renderToken
+            ) {
+                session.fileTreeElement.scrollTop = scrollTop;
+            }
+        });
+        this.updateTreeAutoRefresh();
+    }
+
+    isSessionTreeVisible(session) {
+        return !!session?.fileTreeElement && !!session?.editorState?.isVisible;
+    }
+
+    canRefreshSessionTree(session) {
+        return this.isSessionTreeVisible(session) && !session.treeEditingPath;
+    }
+
+    refreshVisibleSessionTrees() {
+        for (const session of state.sessions.values()) {
+            if (this.canRefreshSessionTree(session)) {
+                this.requestSessionTreeRefresh(session);
+            }
+        }
+    }
+
+    requestSessionTreeRefresh(session, { force = false } = {}) {
+        if (!force && !this.canRefreshSessionTree(session)) {
+            this.updateTreeAutoRefresh();
+            return;
+        }
+        if (session.fileTreeRefreshQueued) return;
+        session.fileTreeRefreshQueued = true;
+        requestAnimationFrame(() => {
+            session.fileTreeRefreshQueued = false;
+            if (force || this.canRefreshSessionTree(session)) {
+                this.refreshSessionTree(session);
+            } else {
+                this.updateTreeAutoRefresh();
+            }
+        });
+    }
+
+    updateTreeAutoRefresh() {
+        const shouldRun = (
+            document.visibilityState === 'visible'
+            && Array.from(state.sessions.values()).some(
+                (session) => this.canRefreshSessionTree(session)
+            )
+        );
+        if (shouldRun && !this.treeRefreshTimer) {
+            this.treeRefreshTimer = window.setInterval(() => {
+                if (document.visibilityState !== 'visible') {
+                    this.updateTreeAutoRefresh();
+                    return;
+                }
+                const hasVisibleTrees = Array.from(
+                    state.sessions.values()
+                ).some((session) => this.canRefreshSessionTree(session));
+                if (!hasVisibleTrees) {
+                    this.updateTreeAutoRefresh();
+                    return;
+                }
+                this.refreshVisibleSessionTrees();
+            }, FILE_TREE_REFRESH_INTERVAL_MS);
+            return;
+        }
+        if (!shouldRun && this.treeRefreshTimer) {
+            window.clearInterval(this.treeRefreshTimer);
+            this.treeRefreshTimer = null;
+        }
+    }
+
+    setSelectedTreePath(session, path, { preserveFocus = false } = {}) {
+        if (!session) return;
+        const nextPath = typeof path === 'string' ? path : '';
+        if (session.selectedTreePath === nextPath) return;
+        session.selectedTreePath = nextPath;
+        if (preserveFocus && nextPath) {
+            session.pendingTreeFocusPath = nextPath;
+        }
+        if (this.isSessionTreeVisible(session)) {
+            this.syncSelectedTreePath(session);
+        }
+    }
+
+    syncSelectedTreePath(session) {
+        if (!session?.fileTreeElement) return;
+        const selectedPath = session.selectedTreePath || '';
+        Array.from(
+            session.fileTreeElement.querySelectorAll('.file-tree-item')
+        ).forEach((row) => {
+            const rowPath = row.parentElement?.dataset.path || '';
+            row.classList.toggle(
+                'selected',
+                selectedPath.length > 0 && rowPath === selectedPath
+            );
+        });
+    }
+
+    getVisibleTreeRows(session) {
+        if (!session?.fileTreeElement) return [];
+        return Array.from(
+            session.fileTreeElement.querySelectorAll('li > .file-tree-item')
+        ).filter((row) => row instanceof HTMLElement);
+    }
+
+    getDomSelectedTreePath(session) {
+        return session?.fileTreeElement?.querySelector(
+            '.file-tree-item.selected'
+        )?.parentElement?.dataset.path || '';
+    }
+
+    moveTreeSelection(session, delta) {
+        if (!session || !delta) return false;
+        const rows = this.getVisibleTreeRows(session);
+        if (rows.length === 0) return false;
+
+        const currentPath = this.getDomSelectedTreePath(session)
+            || session.selectedTreePath
+            || session.editorState.activeFilePath
+            || '';
+        let currentIndex = rows.findIndex(
+            (row) => row.parentElement?.dataset.path === currentPath
+        );
+        if (currentIndex === -1) {
+            currentIndex = delta > 0 ? -1 : rows.length;
+        }
+
+        const nextIndex = Math.max(
+            0,
+            Math.min(rows.length - 1, currentIndex + delta)
+        );
+        const nextRow = rows[nextIndex];
+        const nextPath = nextRow?.parentElement?.dataset.path || '';
+        if (!nextPath) return false;
+
+        this.setSelectedTreePath(session, nextPath, { preserveFocus: true });
+        nextRow.scrollIntoView({ block: 'nearest' });
+        session.fileTreeElement?.focus({ preventScroll: true });
+        return true;
+    }
+
+    beginSelectedTreeRename(session) {
+        if (!session) return false;
+        const selectedPath = this.getDomSelectedTreePath(session)
+            || session.selectedTreePath
+            || '';
+        if (!selectedPath) return false;
+
+        const item = session.fileTreeElement?.querySelector(
+            `li[data-path="${CSS.escape(selectedPath)}"]`
+        );
+        const row = item?.querySelector('.file-tree-item');
+        const nameEl = row?.querySelector('.file-tree-name');
+        if (
+            !item
+            || !row
+            || !nameEl
+            || item.dataset.renameable !== '1'
+        ) {
+            return false;
+        }
+
+        const renameButton = row.querySelector('.file-tree-rename-btn');
+        if (
+            renameButton instanceof HTMLButtonElement
+            && !renameButton.disabled
+        ) {
+            renameButton.click();
+            return true;
+        }
+
+        this.beginTreeRename(session, {
+            path: selectedPath,
+            name: nameEl.textContent || '',
+            isDirectory: item.dataset.isDirectory === '1',
+            renameable: true
+        });
+        return true;
+    }
+
+    async deleteSelectedTreeEntry(session) {
+        if (!session) return false;
+        const selectedPath = this.getDomSelectedTreePath(session)
+            || session.selectedTreePath
+            || '';
+        if (!selectedPath) return false;
+
+        const item = session.fileTreeElement?.querySelector(
+            `li[data-path="${CSS.escape(selectedPath)}"]`
+        );
+        const row = item?.querySelector('.file-tree-item');
+        const nameEl = row?.querySelector('.file-tree-name');
+        if (
+            !item
+            || !row
+            || !nameEl
+            || item.dataset.deleteable !== '1'
+        ) {
+            return false;
+        }
+
+        await this.deleteTreeEntry(session, {
+            path: selectedPath,
+            name: nameEl.textContent || '',
+            isDirectory: item.dataset.isDirectory === '1',
+            deleteable: true
+        });
+        return true;
+    }
+
+    async createTreeEntry(session, parentPath, kind) {
+        if (!session || typeof parentPath !== 'string' || !parentPath) {
+            return;
+        }
+
+        try {
+            const response = await session.server.fetch('/api/fs/create', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    parentPath,
+                    kind
+                })
+            });
+            if (!response.ok) {
+                await throwResponseError(response, 'Failed to create path');
+            }
+
+            const payload = await response.json();
+            if (
+                parentPath !== '.'
+                && !session.sharedWorkspaceState.expandedPaths.includes(parentPath)
+            ) {
+                session.sharedWorkspaceState.expandedPaths =
+                    uniqueStringList([
+                        ...session.sharedWorkspaceState.expandedPaths,
+                        parentPath
+                    ]);
+                session.saveState({ touchWorkspace: true });
+                void session.server.fetch('/api/memory/expand', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        path: parentPath,
+                        expanded: true
+                    })
+                });
+            }
+
+            this.beginTreeRename(session, {
+                path: payload.path,
+                name: payload.name,
+                isDirectory: !!payload.isDirectory,
+                renameable: true
+            });
+        } catch (error) {
+            alert(error.message || 'Failed to create path', {
+                type: 'error',
+                title: 'Files'
+            });
+        }
+    }
+
+    cancelTreeRename(session) {
+        if (!session || !session.treeEditingPath) return;
+        session.treeEditingPath = '';
+        session.treeRenameSubmitting = false;
+        session.pendingTreeRenameFocusPath = '';
+        if (this.isSessionTreeVisible(session)) {
+            this.requestSessionTreeRefresh(session);
+        }
+    }
+
+    beginTreeRename(session, file) {
+        if (!session || !file?.renameable) return;
+        session.selectedTreePath = file.path;
+        session.pendingTreeFocusPath = '';
+        session.treeEditingPath = file.path;
+        session.treeRenameSubmitting = false;
+        session.pendingTreeRenameFocusPath = file.path;
+        this.requestSessionTreeRefresh(session, { force: true });
+    }
+
+    async deleteTreeEntry(session, file) {
+        if (!session || !file?.deleteable) {
+            return;
+        }
+        const confirmed = await showConfirmModal({
+            title: file.isDirectory
+                ? '⚠️ Delete Folder'
+                : '⚠️ Delete File',
+            message: file.isDirectory
+                ? `Delete folder "${file.name}" and all of its contents?`
+                : `Delete file "${file.name}"?`,
+            note: 'ℹ️ Deleted items do not go to the Trash.',
+            confirmLabel: 'Delete',
+            danger: true,
+            returnFocus: session.fileTreeElement
+        });
+        if (!confirmed) {
+            session.fileTreeElement?.focus({ preventScroll: true });
+            return;
+        }
+
+        try {
+            const response = await session.server.fetch('/api/fs/delete', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    path: file.path
+                })
+            });
+            if (!response.ok) {
+                await throwResponseError(response, 'Failed to delete path');
+            }
+            const payload = await response.json();
+            session.selectedTreePath = '';
+            session.pendingTreeFocusPath = '';
+            session.pendingTreeRenameFocusPath = '';
+            session.treeEditingPath = '';
+            this.handleDeletedPaths(
+                session.server,
+                payload.path || file.path,
+                !!payload.isDirectory
+            );
+            this.requestSessionTreeRefresh(session);
+            session.fileTreeElement?.focus({ preventScroll: true });
+        } catch (error) {
+            alert(error.message || 'Failed to delete path', {
+                type: 'error',
+                title: 'Files'
+            });
+        }
+    }
+
+    async commitTreeRename(session, file, nextName) {
+        if (!session || !file || typeof nextName !== 'string') {
+            return;
+        }
+        if (nextName.length === 0) {
+            return;
+        }
+        if (nextName === file.name) {
+            this.cancelTreeRename(session);
+            this.focusTreePath(session, file.path);
+            return;
+        }
+
+        session.treeRenameSubmitting = true;
+        try {
+            const response = await session.server.fetch('/api/fs/rename', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    path: file.path,
+                    newName: nextName
+                })
+            });
+            if (!response.ok) {
+                if (response.status === 409) {
+                    let message = 'A file or folder with that name already exists.';
+                    try {
+                        const payload = await response.json();
+                        if (payload?.error) {
+                            message = payload.error;
+                        }
+                    } catch {
+                        // Ignore invalid JSON error bodies.
+                    }
+                    await showConfirmModal({
+                        title: 'Rename Failed',
+                        message,
+                        confirmLabel: 'OK',
+                        hideCancel: true
+                    });
+                    session.treeRenameSubmitting = false;
+                    requestAnimationFrame(() => {
+                        const renameInput = session.fileTreeElement?.querySelector(
+                            '.file-tree-rename-input'
+                        );
+                        if (renameInput instanceof HTMLInputElement) {
+                            renameInput.focus({ preventScroll: true });
+                            renameInput.setSelectionRange(
+                                0,
+                                renameInput.value.length
+                            );
+                        }
+                    });
+                    return;
+                }
+                await throwResponseError(response, 'Failed to rename path');
+            }
+            const payload = await response.json();
+            session.treeEditingPath = '';
+            session.treeRenameSubmitting = false;
+            session.pendingTreeRenameFocusPath = '';
+            session.selectedTreePath = payload.newPath || file.path;
+            session.pendingTreeFocusPath = payload.newPath || file.path;
+            this.handleRenamedPaths(
+                session.server,
+                file.path,
+                payload.newPath || file.path,
+                !!payload.isDirectory
+            );
+            this.requestSessionTreeRefresh(session);
+            this.focusTreePath(session, session.pendingTreeFocusPath);
+        } catch (error) {
+            session.treeRenameSubmitting = false;
+            this.cancelTreeRename(session);
+            alert(error.message || 'Failed to rename path', {
+                type: 'error',
+                title: 'Files'
+            });
+        }
+    }
+
+    ensureTreeList(container) {
+        const existing = Array.from(container.children).find(
+            (child) => child.tagName === 'UL'
+        );
+        if (existing) return existing;
+        const list = document.createElement('ul');
+        container.appendChild(list);
+        return list;
+    }
+
+    getTreeChildList(item) {
+        return Array.from(item.children).find((child) => child.tagName === 'UL')
+            || null;
+    }
+
+    getTreeItemExpanded(filePath, session) {
+        return session.sharedWorkspaceState.expandedPaths.includes(filePath);
+    }
+
+    updateTreeCreateRow(list, dirPath, creatable, session) {
+        let row = Array.from(list.children).find(
+            (child) => child.classList?.contains('file-tree-create-entry')
+        );
+
+        if (!creatable) {
+            row?.remove();
+            return;
+        }
+
+        if (!row) {
+            row = document.createElement('li');
+            row.className = 'file-tree-create-entry';
+
+            const actions = document.createElement('div');
+            actions.className = 'file-tree-create-actions';
+
+            const newFolderButton = document.createElement('button');
+            newFolderButton.type = 'button';
+            newFolderButton.className = 'file-tree-new-folder-btn';
+            newFolderButton.title = 'New Folder';
+            newFolderButton.innerHTML = NEW_FOLDER_ICON_SVG;
+            actions.appendChild(newFolderButton);
+
+            const newFileButton = document.createElement('button');
+            newFileButton.type = 'button';
+            newFileButton.className = 'file-tree-new-file-btn';
+            newFileButton.title = 'New File';
+            newFileButton.innerHTML = NEW_FILE_ICON_SVG;
+            actions.appendChild(newFileButton);
+
+            row.appendChild(actions);
+        }
+
+        const newFolderButton = row.querySelector('.file-tree-new-folder-btn');
+        const newFileButton = row.querySelector('.file-tree-new-file-btn');
+
+        if (newFolderButton instanceof HTMLButtonElement) {
+            newFolderButton.setAttribute(
+                'aria-label',
+                `New folder in ${dirPath}`
+            );
+            newFolderButton.onmousedown = (event) => {
+                event.preventDefault();
+                event.stopPropagation();
+            };
+            newFolderButton.onclick = (event) => {
+                event.stopPropagation();
+                void this.createTreeEntry(session, dirPath, 'directory');
+            };
+        }
+
+        if (newFileButton instanceof HTMLButtonElement) {
+            newFileButton.setAttribute('aria-label', `New file in ${dirPath}`);
+            newFileButton.onmousedown = (event) => {
+                event.preventDefault();
+                event.stopPropagation();
+            };
+            newFileButton.onclick = (event) => {
+                event.stopPropagation();
+                void this.createTreeEntry(session, dirPath, 'file');
+            };
+        }
+
+        list.appendChild(row);
+    }
+
+    updateTreeItem(li, file, session, renderToken) {
+        li.dataset.path = file.path;
+        li.dataset.isDirectory = file.isDirectory ? '1' : '0';
+        li.dataset.renameable = file.renameable ? '1' : '0';
+        li.dataset.deleteable = file.deleteable ? '1' : '0';
+
+        let row = Array.from(li.children).find(
+            (child) => child.classList?.contains('file-tree-item')
+        );
+        if (!row) {
+            row = document.createElement('div');
+            row.className = 'file-tree-item';
+            li.prepend(row);
+        }
+        row.tabIndex = -1;
+
+        let icon = row.querySelector('.icon');
+        if (!icon) {
+            icon = document.createElement('span');
+            icon.className = 'icon';
+            row.appendChild(icon);
+        }
+
+        let renameButton = row.querySelector('.file-tree-rename-btn');
+        if (!renameButton) {
+            renameButton = document.createElement('button');
+            renameButton.type = 'button';
+            renameButton.className = 'file-tree-rename-btn';
+            renameButton.title = 'Rename';
+            renameButton.setAttribute('aria-label', `Rename ${file.name}`);
+            renameButton.innerHTML = RENAME_ICON_SVG;
+            row.appendChild(renameButton);
+        }
+
+        let deleteButton = row.querySelector('.file-tree-delete-btn');
+        if (!deleteButton) {
+            deleteButton = document.createElement('button');
+            deleteButton.type = 'button';
+            deleteButton.className = 'file-tree-delete-btn';
+            deleteButton.title = 'Delete';
+            deleteButton.setAttribute('aria-label', `Delete ${file.name}`);
+            deleteButton.innerHTML = DELETE_ICON_SVG;
+            row.appendChild(deleteButton);
+        }
+
+        let name = row.querySelector('.file-tree-name');
+        if (!name) {
+            name = document.createElement('span');
+            name.className = 'file-tree-name';
+            row.appendChild(name);
+        }
+
+        let renameInput = row.querySelector('.file-tree-rename-input');
+        const isEditing = session.treeEditingPath === file.path;
+        if (isEditing && !renameInput) {
+            renameInput = document.createElement('input');
+            renameInput.type = 'text';
+            renameInput.className = 'file-tree-rename-input';
+            row.appendChild(renameInput);
+        } else if (!isEditing && renameInput) {
+            renameInput.remove();
+            renameInput = null;
+        }
+
+        row.className = 'file-tree-item';
+        if (file.isDirectory) {
+            row.classList.add('is-dir');
+        }
+        row.classList.toggle(
+            'active',
+            !file.isDirectory
+            && session.editorState.activeFilePath === file.path
+        );
+        row.classList.toggle(
+            'selected',
+            session.selectedTreePath === file.path
+        );
+        row.classList.toggle('editing', isEditing);
+
+        const isExpanded = file.isDirectory
+            && this.getTreeItemExpanded(file.path, session);
+        li.classList.toggle('expanded', isExpanded);
+        icon.innerHTML = this.getIcon(file.name, file.isDirectory, isExpanded);
+        name.textContent = file.name;
+        name.style.display = isEditing ? 'none' : '';
+        renameButton.style.display = isEditing ? 'none' : '';
+        deleteButton.style.display = isEditing ? 'none' : '';
+        renameButton.hidden = !file.renameable;
+        renameButton.disabled = !file.renameable;
+        renameButton.title = `Rename ${file.name}`;
+        renameButton.setAttribute('aria-label', `Rename ${file.name}`);
+        renameButton.onmousedown = (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+        };
+        renameButton.onclick = (event) => {
+            event.stopPropagation();
+            this.beginTreeRename(session, file);
+        };
+
+        deleteButton.hidden = !file.deleteable;
+        deleteButton.disabled = !file.deleteable;
+        deleteButton.title = `Delete ${file.name}`;
+        deleteButton.setAttribute('aria-label', `Delete ${file.name}`);
+        deleteButton.onmousedown = (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+        };
+        deleteButton.onclick = (event) => {
+            event.stopPropagation();
+            void this.deleteTreeEntry(session, file);
+        };
+
+        if (renameInput) {
+            if (document.activeElement !== renameInput) {
+                renameInput.value = file.name;
+            }
+            renameInput.onkeydown = async (event) => {
+                if (event.key === 'Escape') {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    this.cancelTreeRename(session);
+                    this.focusTreePath(session, file.path);
+                    return;
+                }
+                if (event.key === 'Enter') {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    await this.commitTreeRename(
+                        session,
+                        file,
+                        renameInput.value
+                    );
+                }
+            };
+            renameInput.onmousedown = (event) => {
+                event.stopPropagation();
+            };
+            renameInput.onclick = (event) => {
+                event.stopPropagation();
+            };
+            renameInput.onfocus = (event) => {
+                event.stopPropagation();
+            };
+            renameInput.onblur = () => {
+                if (!session.treeRenameSubmitting) {
+                    this.cancelTreeRename(session);
+                }
+            };
+
+            if (session.pendingTreeRenameFocusPath === file.path) {
+                session.pendingTreeRenameFocusPath = '';
+                requestAnimationFrame(() => {
+                    renameInput.focus({ preventScroll: true });
+                    renameInput.setSelectionRange(
+                        0,
+                        renameInput.value.length
+                    );
+                });
+            }
+        }
+
+        row.onclick = async (e) => {
+            e.stopPropagation();
+            if (e.target.closest('.file-tree-rename-btn')) {
+                return;
+            }
+            if (e.target.closest('.file-tree-delete-btn')) {
+                return;
+            }
+            if (e.target.closest('.file-tree-rename-input')) {
+                return;
+            }
+            this.setSelectedTreePath(session, file.path, {
+                preserveFocus: true
+            });
+            session.fileTreeElement?.focus({ preventScroll: true });
+            if (file.isDirectory) {
+                if (li.classList.contains('expanded')) {
+                    li.classList.remove('expanded');
+                    session.sharedWorkspaceState.expandedPaths =
+                        session.sharedWorkspaceState.expandedPaths
+                            .filter((path) => path !== file.path);
+                    session.saveState({ touchWorkspace: true });
+                    void session.server.fetch('/api/memory/expand', {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify({
+                            path: file.path,
+                            expanded: false
+                        })
+                    });
+                    icon.innerHTML = this.getIcon(file.name, true, false);
+                    const childUl = this.getTreeChildList(li);
+                    if (childUl) {
+                        childUl.remove();
+                    }
+                    this.updateTreeAutoRefresh();
+                    return;
+                }
+
+                li.classList.add('expanded');
+                session.sharedWorkspaceState.expandedPaths =
+                    uniqueStringList([
+                        ...session.sharedWorkspaceState.expandedPaths,
+                        file.path
+                    ]);
+                session.saveState({ touchWorkspace: true });
+                void session.server.fetch('/api/memory/expand', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        path: file.path,
+                        expanded: true
+                    })
+                });
 
-    setModel(filePath, value, session = this.currentSession) {
-        const store = this.getModelStore(session);
-        if (!store) return;
-        store.set(filePath, value);
-    }
+                icon.innerHTML = this.getIcon(file.name, true, true);
+                await this.renderTree(file.path, li, session, renderToken);
+                this.updateTreeAutoRefresh();
+                session.fileTreeElement?.focus({ preventScroll: true });
+                return;
+            }
 
-    async loadIconMap() {
-        try {
-            const res = await fetch('/icons/map.json');
-            this.iconMap = await res.json();
-        } catch (e) {
-            console.error('Failed to load icon map', e);
-        }
-    }
+            await this.openFile(file.path, session, {
+                focusEditor: false
+            });
+            this.focusTreePath(session, file.path);
+            session.pendingTreeFocusPath = file.path;
+            this.requestSessionTreeRefresh(session);
+        };
 
-    getIcon(name, isDirectory, isExpanded) {
-        if (!this.iconMap) return isDirectory ? (isExpanded ? '📂' : '📁') : '📄';
-        
-        if (isDirectory) {
-            const folderIcon = isExpanded ? (this.iconMap.folderOpen || 'folder-src-open') : (this.iconMap.folder || 'folder-src');
-            return `<img src="/icons/${folderIcon}.svg" class="file-icon" alt="folder">`;
-        }
+        row.onmousedown = (event) => {
+            if (
+                event.target.closest('.file-tree-rename-btn')
+                || event.target.closest('.file-tree-delete-btn')
+                || event.target.closest('.file-tree-rename-input')
+            ) {
+                return;
+            }
+            event.preventDefault();
+            session.fileTreeElement?.focus({ preventScroll: true });
+        };
 
-        const lowerName = name.toLowerCase();
-        if (this.iconMap.filenames[lowerName]) {
-            return `<img src="/icons/${this.iconMap.filenames[lowerName]}.svg" class="file-icon" alt="file">`;
-        }
+        row.onkeydown = null;
 
-        const parts = name.split('.');
-        if (parts.length > 1) {
-            const ext = parts.pop().toLowerCase();
-            if (this.iconMap.extensions[ext]) {
-                return `<img src="/icons/${this.iconMap.extensions[ext]}.svg" class="file-icon" alt="file">`;
+        if (!isExpanded) {
+            const childUl = this.getTreeChildList(li);
+            if (childUl) {
+                childUl.remove();
             }
         }
 
-        return `<img src="/icons/${this.iconMap.default || 'document'}.svg" class="file-icon" alt="file">`;
+        if (session.pendingTreeFocusPath === file.path) {
+            session.pendingTreeFocusPath = '';
+            requestAnimationFrame(() => {
+                row.scrollIntoView({ block: 'nearest' });
+                session.fileTreeElement?.focus({ preventScroll: true });
+            });
+        }
     }
 
-    initResizer() {
-        let startY, startHeight;
-        const onMouseMove = (e) => {
-            const dy = e.clientY - startY;
-            const newHeight = startHeight + dy;
-            const containerHeight = this.pane.parentElement.clientHeight;
-            const resizerHeight = this.resizer.offsetHeight;
-            
-            if (newHeight > 100 && newHeight < containerHeight - resizerHeight - 50) {
-                const flex = `0 0 ${newHeight}px`;
-                this.pane.style.flex = flex;
-                if (this.currentSession) {
-                    this.currentSession.layoutState.editorFlex = flex;
-                }
-                this.layout();
+    reconcileTreeList(list, dirPath, files, creatable, session, renderToken) {
+        const existingItems = new Map();
+        Array.from(list.children).forEach((child) => {
+            if (child.tagName === 'LI' && child.dataset.path) {
+                existingItems.set(child.dataset.path, child);
             }
-        };
-        const onMouseUp = () => {
-            document.removeEventListener('mousemove', onMouseMove);
-            document.removeEventListener('mouseup', onMouseUp);
-            document.body.style.cursor = '';
-            const termWrapper = document.getElementById('terminal-wrapper');
-            if (termWrapper) termWrapper.style.pointerEvents = '';
-        };
-        this.resizer.addEventListener('mousedown', (e) => {
-            startY = e.clientY;
-            startHeight = this.pane.offsetHeight;
-            document.addEventListener('mousemove', onMouseMove);
-            document.addEventListener('mouseup', onMouseUp);
-            document.body.style.cursor = 'row-resize';
-            const termWrapper = document.getElementById('terminal-wrapper');
-            if (termWrapper) termWrapper.style.pointerEvents = 'none';
         });
-    }
 
-    refreshSessionTree(session) {
-        if (!session || !session.fileTreeElement) return;
-        session.fileTreeElement.innerHTML = '';
-        this.renderTree(session.cwd, session.fileTreeElement, session);
+        const orderedItems = [];
+        for (const file of files) {
+            let li = existingItems.get(file.path) || null;
+            if (!li) {
+                li = document.createElement('li');
+            } else {
+                existingItems.delete(file.path);
+            }
+            this.updateTreeItem(li, file, session, renderToken);
+            orderedItems.push(li);
+        }
+
+        for (const li of existingItems.values()) {
+            li.remove();
+        }
+
+        for (const li of orderedItems) {
+            list.appendChild(li);
+        }
+
+        this.updateTreeCreateRow(list, dirPath, creatable, session);
     }
 
     initMonaco() {
@@ -1656,6 +3074,7 @@ class EditorManager {
             this.updateEditorPaneVisibility();
         }
 
+        this.updateTreeAutoRefresh();
         session.updateTabUI();
         session.saveState({ touchWorkspace: true });
     }
@@ -1694,6 +3113,7 @@ class EditorManager {
         
         this.updateEditorPaneVisibility();
         this.updateTerminalLayoutButton();
+        this.updateTreeAutoRefresh();
         
         // Restore layout
         if (session.layoutState) {
@@ -1719,102 +3139,62 @@ class EditorManager {
         }
     }
 
-    async renderTree(dirPath, container, session) {
+    async renderTree(
+        dirPath,
+        container,
+        session,
+        renderToken = session?.fileTreeRenderToken || 0
+    ) {
         try {
-            const res = await session.server.fetch(`/api/fs/list?path=${encodeURIComponent(dirPath)}`);
+            const res = await session.server.fetch(
+                `/api/fs/list?path=${encodeURIComponent(dirPath)}`
+            );
             if (!res.ok) return;
-            const files = await res.json();
+            const payload = await res.json();
+            const files = Array.isArray(payload)
+                ? payload
+                : Array.isArray(payload?.items)
+                    ? payload.items
+                    : [];
+            const creatable = Array.isArray(payload)
+                ? false
+                : !!payload?.creatable;
+            if ((session.fileTreeRenderToken || 0) !== renderToken) return;
+
+            const list = this.ensureTreeList(container);
+            this.reconcileTreeList(
+                list,
+                dirPath,
+                files,
+                creatable,
+                session,
+                renderToken
+            );
+            if ((session.fileTreeRenderToken || 0) !== renderToken) return;
 
-            const ul = document.createElement('ul');
-            
             for (const file of files) {
-                const li = document.createElement('li');
-                const div = document.createElement('div');
-                div.className = 'file-tree-item';
-                if (file.isDirectory) div.classList.add('is-dir');
-                
-                let isExpanded = false;
                 if (
                     file.isDirectory
-                    && session.sharedWorkspaceState.expandedPaths.includes(
-                        file.path
-                    )
+                    && this.getTreeItemExpanded(file.path, session)
                 ) {
-                    isExpanded = true;
-                    li.classList.add('expanded');
-                }
-
-                const icon = document.createElement('span');
-                icon.className = 'icon';
-                icon.innerHTML = this.getIcon(file.name, file.isDirectory, isExpanded);
-                
-                const name = document.createElement('span');
-                name.textContent = file.name;
-                
-                div.appendChild(icon);
-                div.appendChild(name);
-                
-                div.addEventListener('click', async (e) => {
-                    e.stopPropagation();
-                    if (file.isDirectory) {
-                        if (li.classList.contains('expanded')) {
-                            li.classList.remove('expanded');
-                            session.sharedWorkspaceState.expandedPaths =
-                                session.sharedWorkspaceState.expandedPaths
-                                    .filter((path) => path !== file.path);
-                            session.saveState({ touchWorkspace: true });
-                            void session.server.fetch('/api/memory/expand', {
-                                method: 'POST',
-                                headers: { 'Content-Type': 'application/json' },
-                                body: JSON.stringify({
-                                    path: file.path,
-                                    expanded: false
-                                })
-                            });
-                            
-                            icon.innerHTML = this.getIcon(file.name, true, false);
-                            const childUl = li.querySelector('ul');
-                            if (childUl) childUl.remove();
-                        } else {
-                            li.classList.add('expanded');
-                            session.sharedWorkspaceState.expandedPaths =
-                                uniqueStringList([
-                                    ...session.sharedWorkspaceState.expandedPaths,
-                                    file.path
-                                ]);
-                            session.saveState({ touchWorkspace: true });
-                            void session.server.fetch('/api/memory/expand', {
-                                method: 'POST',
-                                headers: { 'Content-Type': 'application/json' },
-                                body: JSON.stringify({
-                                    path: file.path,
-                                    expanded: true
-                                })
-                            });
-                            
-                            icon.innerHTML = this.getIcon(file.name, true, true);
-                            await this.renderTree(file.path, li, session);
-                        }
-                    } else {
-                        await this.openFile(file.path, session);
+                    const item = Array.from(list.children).find(
+                        (child) => child.dataset.path === file.path
+                    );
+                    if (item) {
+                        void this.renderTree(file.path, item, session, renderToken);
                     }
-                });
-
-                li.appendChild(div);
-                
-                if (isExpanded) {
-                    this.renderTree(file.path, li, session);
                 }
-
-                ul.appendChild(li);
             }
-            container.appendChild(ul);
         } catch (err) {
             console.error('Failed to render tree:', err);
         }
     }
 
-    async openFile(filePath, sessionOrRestore = this.currentSession) {
+    async openFile(
+        filePath,
+        sessionOrRestore = this.currentSession,
+        options = {}
+    ) {
         const session = typeof sessionOrRestore === 'boolean'
             ? this.currentSession
             : sessionOrRestore;
@@ -1827,20 +3207,10 @@ class EditorManager {
             : session;
         if (!targetSession) return;
         const state = targetSession.editorState;
-
-        let touchedWorkspace = false;
-        if (!state.openFiles.includes(filePath)) {
-            state.openFiles.push(filePath);
-            this.renderEditorTabs();
-            touchedWorkspace = true;
-        }
-        
-        this.updateEditorPaneVisibility();
+        const wasOpen = state.openFiles.includes(filePath);
+        const isImage = isSupportedImagePath(filePath);
 
         if (!this.getModel(filePath)) {
-            const ext = filePath.split('.').pop().toLowerCase();
-            const isImage = ['png', 'jpg', 'jpeg', 'gif', 'svg', 'webp'].includes(ext);
-            
             let model = null;
             let content = null;
             let readonly = false;
@@ -1850,7 +3220,20 @@ class EditorManager {
                     const res = await targetSession.server.fetch(
                         `/api/fs/read?path=${encodeURIComponent(filePath)}`
                     );
-                    if (!res.ok) throw new Error('Failed to read file');
+                    if (res.status === 415) {
+                        await showConfirmModal({
+                            title: 'Unsupported File Type',
+                            message: 'This file type is not supported yet.',
+                            note: 'Only text files and supported images can be opened right now.',
+                            confirmLabel: 'OK',
+                            hideCancel: true,
+                            returnFocus: document.activeElement
+                        });
+                        return;
+                    }
+                    if (!res.ok) {
+                        throw new Error('Failed to read file');
+                    }
                     const data = await res.json();
                     content = data.content;
                     readonly = data.readonly;
@@ -1880,7 +3263,16 @@ class EditorManager {
             });
         }
 
-        this.activateFileTab(filePath);
+        let touchedWorkspace = false;
+        if (!wasOpen) {
+            state.openFiles.push(filePath);
+            this.renderEditorTabs();
+            touchedWorkspace = true;
+        }
+        
+        this.updateEditorPaneVisibility();
+
+        this.activateFileTab(filePath, false, options);
         if (touchedWorkspace) {
             targetSession.saveState({ touchWorkspace: true });
         }
@@ -2087,9 +3479,10 @@ class EditorManager {
         });
     }
 
-    activateFileTab(filePath, isRestore = false) {
+    activateFileTab(filePath, isRestore = false, options = {}) {
         if (!this.currentSession) return;
         if (!filePath) return;
+        const focusEditor = options.focusEditor !== false;
         const state = this.currentSession.editorState;
 
         if (!isRestore && state.activeFilePath && state.activeFilePath !== filePath) {
@@ -2111,7 +3504,7 @@ class EditorManager {
         this.syncTerminalWorkspacePlacement();
 
         if (!file) {
-            this.openFile(filePath, true);
+            this.openFile(filePath, true, options);
             return;
         }
 
@@ -2146,7 +3539,9 @@ class EditorManager {
                 if (savedViewState) {
                     this.editor.restoreViewState(savedViewState);
                 }
-                this.editor.focus();
+                if (focusEditor) {
+                    this.editor.focus();
+                }
                 // Force layout to ensure content is visible
                 requestAnimationFrame(() => this.editor.layout());
             }
@@ -4640,6 +6035,11 @@ class Session {
         this.layoutState = {
             editorFlex: '2 1 0%'
         };
+        this.selectedTreePath = '';
+        this.treeEditingPath = '';
+        this.treeRenameSubmitting = false;
+        this.pendingTreeFocusPath = '';
+        this.pendingTreeRenameFocusPath = '';
         this.previewRelayoutScheduled = false;
         this.lastTerminalControlClaimAt = 0;
         this.boundTerminalClaimRoot = null;
@@ -4884,11 +6284,12 @@ class Session {
             if (workspaceChanged) {
                 if (this.fileTreeElement) {
                     if (this.editorState.isVisible) {
-                        editorManager.refreshSessionTree(this);
+                        editorManager.requestSessionTreeRefresh(this);
                     } else {
                         this.fileTreeElement.innerHTML = '';
                     }
                 }
+                editorManager.updateTreeAutoRefresh();
             }
             if (workspaceChanged && state.activeSessionKey === this.key) {
                 refreshWorkspaceIfSessionActive(this);
@@ -5146,6 +6547,9 @@ class Session {
             this.runningCommand = '';
             this.needsAttention = false;
             this.updateTabUI();
+            if (this.editorState.isVisible) {
+                editorManager.requestSessionTreeRefresh(this);
+            }
             if (state.activeSessionKey === this.key) {
                 editorManager.renderEditorTabs();
             }
@@ -5205,6 +6609,10 @@ class Session {
             this.needsAttention = false;
         }
 
+        if (this.editorState.isVisible) {
+            editorManager.requestSessionTreeRefresh(this);
+        }
+
         this.updateTabUI();
         if (state.activeSessionKey === this.key) {
             editorManager.renderEditorTabs();
@@ -10873,10 +12281,69 @@ function createTabElement(session) {
     
     const fileTree = document.createElement('div');
     fileTree.className = 'tab-file-tree';
+    fileTree.tabIndex = 0;
     session.fileTreeElement = fileTree;
+    fileTree.addEventListener('mousedown', (event) => {
+        if (
+            event.target.closest('.file-tree-rename-input')
+            || event.target.closest('.file-tree-rename-btn')
+        ) {
+            return;
+        }
+        if (event.target.closest('.file-tree-item')) {
+            event.preventDefault();
+            fileTree.focus({ preventScroll: true });
+        }
+    });
+    fileTree.addEventListener('keydown', (event) => {
+        if (event.key === 'Escape' && session.treeEditingPath) {
+            event.preventDefault();
+            event.stopPropagation();
+            editorManager.cancelTreeRename(session);
+            editorManager.focusTreePath(session, session.selectedTreePath);
+            return;
+        }
+        if (
+            !session.treeEditingPath
+            && !event.metaKey
+            && !event.ctrlKey
+            && !event.altKey
+            && (
+                event.key === 'Delete'
+                || event.key === 'Backspace'
+            )
+        ) {
+            event.preventDefault();
+            event.stopPropagation();
+            void editorManager.deleteSelectedTreeEntry(session);
+            return;
+        }
+        if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            event.stopPropagation();
+            editorManager.moveTreeSelection(session, 1);
+            editorManager.keepTreeFocus(session);
+            return;
+        }
+        if (event.key === 'ArrowUp') {
+            event.preventDefault();
+            event.stopPropagation();
+            editorManager.moveTreeSelection(session, -1);
+            editorManager.keepTreeFocus(session);
+            return;
+        }
+        if (event.key !== 'Enter' || session.treeEditingPath) {
+            return;
+        }
+        if (!editorManager.beginSelectedTreeRename(session)) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+    });
     
     if (session.editorState && session.editorState.isVisible) {
-        editorManager.renderTree(session.cwd, fileTree, session);
+        editorManager.refreshSessionTree(session);
     }
     tab.appendChild(fileTree);
     
@@ -11090,6 +12557,127 @@ function openServerModal(mode, server = null) {
     return true;
 }
 
+const confirmModalState = {
+    resolve: null,
+    returnFocus: null,
+    preferredFocus: 'confirm',
+    hideCancel: false
+};
+
+function isConfirmModalOpen() {
+    return !!confirmModal && confirmModal.style.display !== 'none';
+}
+
+function getVisibleConfirmModalButtons() {
+    const buttons = [];
+    if (confirmModalCancel && !confirmModalState.hideCancel) {
+        buttons.push(confirmModalCancel);
+    }
+    if (confirmModalConfirm) {
+        buttons.push(confirmModalConfirm);
+    }
+    return buttons;
+}
+
+function getConfirmModalPreferredButton() {
+    if (!confirmModalConfirm) {
+        return null;
+    }
+    if (confirmModalState.hideCancel || !confirmModalCancel) {
+        return confirmModalConfirm;
+    }
+    return confirmModalState.preferredFocus === 'cancel'
+        ? confirmModalCancel
+        : confirmModalConfirm;
+}
+
+function settleConfirmModal(result) {
+    if (!confirmModal) return;
+    confirmModal.style.display = 'none';
+    const resolve = confirmModalState.resolve;
+    const returnFocus = confirmModalState.returnFocus;
+    confirmModalState.resolve = null;
+    confirmModalState.returnFocus = null;
+    confirmModalState.preferredFocus = 'confirm';
+    confirmModalState.hideCancel = false;
+    if (returnFocus instanceof HTMLElement) {
+        requestAnimationFrame(() => {
+            try {
+                returnFocus.focus({ preventScroll: true });
+            } catch {
+                // Ignore focus restoration failures.
+            }
+        });
+    }
+    resolve?.(result);
+}
+
+function showConfirmModal({
+    title = 'Confirm',
+    message = '',
+    note = '',
+    confirmLabel = 'Confirm',
+    danger = false,
+    hideCancel = false,
+    returnFocus = null
+} = {}) {
+    if (
+        !confirmModal
+        || !confirmModalTitle
+        || !confirmModalMessage
+        || !confirmModalNote
+        || !confirmModalConfirm
+        || !confirmModalCancel
+    ) {
+        return Promise.resolve(false);
+    }
+    if (confirmModalState.resolve) {
+        settleConfirmModal(false);
+    }
+    confirmModalTitle.textContent = title;
+    confirmModalMessage.textContent = message;
+    confirmModalNote.textContent = note;
+    confirmModalNote.style.display = note ? '' : 'none';
+    confirmModalCancel.style.display = hideCancel ? 'none' : '';
+    confirmModalConfirm.textContent = confirmLabel;
+    confirmModalConfirm.classList.toggle('danger-button', danger);
+    confirmModal.style.display = 'flex';
+    confirmModalState.returnFocus = returnFocus;
+    confirmModalState.hideCancel = hideCancel;
+    confirmModalState.preferredFocus = 'confirm';
+    requestAnimationFrame(() => {
+        getConfirmModalPreferredButton()?.focus({ preventScroll: true });
+    });
+    return new Promise((resolve) => {
+        confirmModalState.resolve = resolve;
+    });
+}
+
+function moveConfirmModalFocus(delta) {
+    const buttons = getVisibleConfirmModalButtons();
+    if (!buttons.length || !delta) {
+        return;
+    }
+    if (buttons.length === 1) {
+        buttons[0].focus({ preventScroll: true });
+        return;
+    }
+    const currentIndex = buttons.findIndex(
+        (button) => button === document.activeElement
+    );
+    const baseIndex = currentIndex === -1
+        ? buttons.length - 1
+        : currentIndex;
+    const nextIndex = Math.max(0, Math.min(
+        buttons.length - 1,
+        baseIndex + delta
+    ));
+    confirmModalState.preferredFocus = nextIndex === 0
+        ? 'cancel'
+        : 'confirm';
+    buttons[nextIndex].focus({ preventScroll: true });
+}
+
 function renderServerControls() {
     if (!serverControlsEl) return;
     serverControlsEl.innerHTML = '';
@@ -11244,10 +12832,14 @@ document.addEventListener('keydown', noteAppInteraction, {
 window.addEventListener('focus', () => {
     noteAppInteraction();
     enterAppNotificationQuietPeriod();
+    editorManager.refreshVisibleSessionTrees();
+    editorManager.updateTreeAutoRefresh();
 });
 window.addEventListener('pageshow', () => {
     noteAppInteraction();
     enterAppNotificationQuietPeriod();
+    editorManager.refreshVisibleSessionTrees();
+    editorManager.updateTreeAutoRefresh();
 });
 
 document.addEventListener('click', () => {
@@ -11258,7 +12850,9 @@ document.addEventListener('visibilitychange', () => {
         noteAppInteraction();
         enterAppNotificationQuietPeriod();
         clearVisibleAttentionState();
+        editorManager.refreshVisibleSessionTrees();
     }
+    editorManager.updateTreeAutoRefresh();
 });
 // #endregion
 
@@ -11654,6 +13248,84 @@ if (
     });
 }
 
+if (
+    confirmModal
+    && confirmModalCancel
+    && confirmModalConfirm
+) {
+    const focusPreferredConfirmButton = () => {
+        requestAnimationFrame(() => {
+            if (!isConfirmModalOpen()) return;
+            const activeElement = document.activeElement;
+            if (activeElement && confirmModal.contains(activeElement)) {
+                return;
+            }
+            getConfirmModalPreferredButton()?.focus({ preventScroll: true });
+        });
+    };
+
+    confirmModalCancel.addEventListener('focus', () => {
+        confirmModalState.preferredFocus = 'cancel';
+    });
+
+    confirmModalConfirm.addEventListener('focus', () => {
+        confirmModalState.preferredFocus = 'confirm';
+    });
+
+    confirmModalCancel.addEventListener('click', () => {
+        settleConfirmModal(false);
+    });
+
+    confirmModalConfirm.addEventListener('click', () => {
+        settleConfirmModal(true);
+    });
+
+    confirmModal.addEventListener('click', (event) => {
+        if (event.target === confirmModal) {
+            settleConfirmModal(false);
+        }
+    });
+
+    confirmModal.addEventListener('focusout', () => {
+        focusPreferredConfirmButton();
+    });
+
+    confirmModal.addEventListener('keydown', (event) => {
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            settleConfirmModal(false);
+            return;
+        }
+        if (event.key === 'ArrowLeft') {
+            event.preventDefault();
+            event.stopPropagation();
+            moveConfirmModalFocus(-1);
+            return;
+        }
+        if (event.key === 'ArrowRight') {
+            event.preventDefault();
+            event.stopPropagation();
+            moveConfirmModalFocus(1);
+            return;
+        }
+        if (event.key === 'Tab') {
+            event.preventDefault();
+            event.stopPropagation();
+            moveConfirmModalFocus(event.shiftKey ? -1 : 1);
+            return;
+        }
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            event.stopPropagation();
+            if (document.activeElement === confirmModalCancel) {
+                settleConfirmModal(false);
+                return;
+            }
+            settleConfirmModal(true);
+        }
+    });
+}
+
 if (loginForm && passwordInput) {
     loginForm.addEventListener('submit', async (e) => {
         e.preventDefault();