Pin the host multi-select bar to the top of the page (#793 )

The bulk-action bar for multi-select (selected count, Select All / Deselect All / Delete / close) was rendered inside the Hosts section, so it scrolled out of view as soon as the user moved past the first row of cards. Hoist the bar out of the scroll container and render it as a sibling right after the top header. It is now always visible below the header while multi-select is active in the Hosts section, and slims down visually: - Single flat row (no inner pill, no secondary border) - Compact button sizing: h-7, px-2, text-xs, icon-12 - Bottom-only border for separation from the scroll area - Count label forced to h-7 + leading-none so it vertically centers against the buttons Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Collapse four terminal toolbar actions behind a More popover (#792 )
2026-04-22 01:46:22 +08:00 · 2026-04-22 01:32:36 +08:00 · 2026-04-22 01:19:33 +08:00 · 2026-04-22 01:16:38 +08:00 · 2026-04-21 23:32:20 +08:00 · 2026-04-21 23:18:01 +08:00
40 changed files with 1625 additions and 492 deletions
--- a/App.tsx
+++ b/App.tsx
@@ -44,6 +44,7 @@ import { Label } from './components/ui/label';
 import { ToastProvider, toast } from './components/ui/toast';
 import { VaultView, VaultSection } from './components/VaultView';
 import { QuickAddSnippetDialog } from './components/QuickAddSnippetDialog';
+import { AddToWorkspaceDialog } from './components/workspace/AddToWorkspaceDialog';
 import { KeyboardInteractiveModal, KeyboardInteractiveRequest } from './components/KeyboardInteractiveModal';
 import { PassphraseModal, PassphraseRequest } from './components/PassphraseModal';
 import { cn } from './lib/utils';
@@ -178,6 +179,15 @@ function App({ settings }: { settings: SettingsState }) {

  const [isQuickSwitcherOpen, setIsQuickSwitcherOpen] = useState(false);
  const [isCreateWorkspaceOpen, setIsCreateWorkspaceOpen] = useState(false);
+  // Combined state for the AddToWorkspaceDialog. null = closed; mode
+  // determines whether picking targets appends them to an existing
+  // workspace (focus sidebar "+") or spins up a brand-new workspace
+  // tab (QuickSwitcher's New Workspace button).
+  const [addToWorkspaceDialog, setAddToWorkspaceDialog] = useState<
+    | { mode: 'append'; workspaceId: string }
+    | { mode: 'create' }
+    | null
+  >(null);
  const [quickSearch, setQuickSearch] = useState('');
  // Protocol selection dialog state for QuickSwitcher
  const [protocolSelectHost, setProtocolSelectHost] = useState<Host | null>(null);
@@ -292,6 +302,9 @@ function App({ settings }: { settings: SettingsState }) {
    createWorkspaceWithHosts,
    createWorkspaceFromSessions,
    addSessionToWorkspace,
+    appendHostToWorkspace,
+    appendLocalTerminalToWorkspace,
+    createWorkspaceFromTargets,
    updateSplitSizes,
    splitSession,
    toggleWorkspaceViewMode,
@@ -1232,6 +1245,12 @@ function App({ settings }: { settings: SettingsState }) {
      case 'commandPalette':
        setIsQuickSwitcherOpen(true);
        break;
+      case 'newWorkspace':
+        // Dedicated shortcut to launch the AddToWorkspaceDialog in
+        // create mode — same entry as QuickSwitcher's "New Workspace"
+        // button, but without having to open QS first.
+        setAddToWorkspaceDialog({ mode: 'create' });
+        break;
      case 'portForwarding':
        // Navigate to vault and open port forwarding section
        setActiveTabId('vault');
@@ -1623,6 +1642,19 @@ function App({ settings }: { settings: SettingsState }) {
    };
  }, [handleOpenSettings, t]);

+  // Delete-from-sidepanel plumbing: ScriptsSidePanel's right-click menu
+  // dispatches `netcatty:snippets:delete` with the snippet id. Handled here
+  // (rather than in QuickAddSnippetDialog) because delete needs no UI.
+  useEffect(() => {
+    const handler = (e: Event) => {
+      const id = (e as CustomEvent<{ id?: string }>).detail?.id;
+      if (!id) return;
+      updateSnippets(snippets.filter((s) => s.id !== id));
+    };
+    window.addEventListener('netcatty:snippets:delete', handler);
+    return () => window.removeEventListener('netcatty:snippets:delete', handler);
+  }, [snippets, updateSnippets]);
+
  const handleEndSessionDrag = useCallback(() => {
    setDraggingSessionId(null);
  }, [setDraggingSessionId]);
@@ -1787,6 +1819,9 @@ function App({ settings }: { settings: SettingsState }) {
          onTerminalDataCapture={handleTerminalDataCapture}
          onCreateWorkspaceFromSessions={createWorkspaceFromSessions}
          onAddSessionToWorkspace={addSessionToWorkspace}
+          onRequestAddToWorkspace={(workspaceId) =>
+            setAddToWorkspaceDialog({ mode: 'append', workspaceId })
+          }
          onUpdateSplitSizes={updateSplitSizes}
          onSetDraggingSessionId={setDraggingSessionId}
          onToggleWorkspaceViewMode={toggleWorkspaceViewMode}
@@ -1827,17 +1862,65 @@ function App({ settings }: { settings: SettingsState }) {
        })}
      </div>

-      {/* Global "quick add snippet" dialog, triggered by the
-          netcatty:snippets:add window event (from ScriptsSidePanel "+"). */}
+      {/* Global "quick add / edit snippet" dialog, triggered by the
+          netcatty:snippets:add and :edit window events (from ScriptsSidePanel
+          "+" button and right-click menu). Delete is handled by a sibling
+          useEffect above — it does not need a dialog. */}
      <QuickAddSnippetDialog
        snippets={snippets}
        packages={snippetPackages}
        onCreateSnippet={(snippet) => updateSnippets([...snippets, snippet])}
+        onUpdateSnippet={(snippet) =>
+          updateSnippets(snippets.map((s) => (s.id === snippet.id ? snippet : s)))
+        }
        onCreatePackage={(pkg) =>
          updateSnippetPackages(Array.from(new Set([...snippetPackages, pkg])))
        }
      />

+      {/* Root-mounted AddToWorkspaceDialog — triggered by the focus-mode
+          "+" button (mode='append') or QuickSwitcher's "New Workspace"
+          button (mode='create'). Single instance so dialog state and
+          styling stay consistent across entry points. */}
+      {addToWorkspaceDialog && (
+        <AddToWorkspaceDialog
+          open
+          onOpenChange={(open) => { if (!open) setAddToWorkspaceDialog(null); }}
+          // Filter serial hosts only in append mode — appendHostToWorkspace
+          // has no serial code path. Create mode goes through
+          // createWorkspaceFromTargets, which builds a SerialConfig-backed
+          // session for serial hosts, so those should remain pickable.
+          hosts={addToWorkspaceDialog.mode === 'append'
+            ? hosts.filter((h) => h.protocol !== 'serial')
+            : hosts}
+          workspaceTitle={
+            addToWorkspaceDialog.mode === 'append'
+              ? workspaces.find((w) => w.id === addToWorkspaceDialog.workspaceId)?.title
+              : 'New Workspace'
+          }
+          onAdd={(targets) => {
+            if (addToWorkspaceDialog.mode === 'append') {
+              // Match the workspace root's current split direction so
+              // the new panes peer the existing siblings instead of
+              // wrapping the whole tree into one side of a fresh split
+              // (which would happen if we always passed the helper's
+              // default 'vertical').
+              const ws = workspaces.find((w) => w.id === addToWorkspaceDialog.workspaceId);
+              const rootDir = ws && ws.root.type === 'split' ? ws.root.direction : 'vertical';
+              for (const target of targets) {
+                if (target.kind === 'local') {
+                  appendLocalTerminalToWorkspace(addToWorkspaceDialog.workspaceId, undefined, rootDir);
+                } else {
+                  appendHostToWorkspace(addToWorkspaceDialog.workspaceId, target.host, rootDir);
+                }
+              }
+            } else {
+              createWorkspaceFromTargets(targets);
+            }
+          }}
+        />
+      )}
+
      {isQuickSwitcherOpen && (
        <Suspense fallback={null}>
          <LazyQuickSwitcher
@@ -1861,7 +1944,8 @@ function App({ settings }: { settings: SettingsState }) {
            }}
            onCreateWorkspace={() => {
              setIsQuickSwitcherOpen(false);
-              setIsCreateWorkspaceOpen(true);
+              setQuickSearch('');
+              setAddToWorkspaceDialog({ mode: 'create' });
            }}
            onClose={() => {
              setIsQuickSwitcherOpen(false);
--- a/application/i18n/locales/en.ts
+++ b/application/i18n/locales/en.ts
@@ -415,6 +415,7 @@ const en: Messages = {
  'settings.shortcuts.resetAll': 'Reset All',
  'settings.shortcuts.recording': 'Press keys...',
  'settings.shortcuts.none': 'None',
+  'settings.shortcuts.setDisabled': 'Set to disabled',
  'settings.shortcuts.category.tabs': 'Tabs',
  'settings.shortcuts.category.terminal': 'Terminal',
  'settings.shortcuts.category.navigation': 'Navigation',
@@ -1192,6 +1193,7 @@ const en: Messages = {
  'terminal.toolbar.openSftp': 'Open SFTP',
  'terminal.toolbar.availableAfterConnect': 'Available after connect',
  'terminal.toolbar.sftp': 'SFTP',
+  'terminal.toolbar.more': 'More actions',
  'terminal.toolbar.scripts': 'Scripts',
  'terminal.toolbar.library': 'Library',
  'terminal.toolbar.noSnippets': 'No snippets available',
@@ -1681,6 +1683,8 @@ const en: Messages = {
  'snippets.breadcrumb.separator': '›',
  'snippets.empty.title': 'Create snippet',
  'snippets.empty.desc': 'Save your most used commands as snippets to reuse them in one click.',
+  'snippets.search.noResults.title': 'No matches',
+  'snippets.search.noResults.desc': 'No snippets or packages match "{query}". Try a different search term or clear the search to browse.',
  'snippets.section.packages': 'Packages',
  'snippets.section.snippets': 'Snippets',
  'snippets.package.count': '{count} snippet(s)',
--- a/application/i18n/locales/zh-CN.ts
+++ b/application/i18n/locales/zh-CN.ts
@@ -799,6 +799,7 @@ const zhCN: Messages = {
  'terminal.toolbar.openSftp': '打开 SFTP',
  'terminal.toolbar.availableAfterConnect': '连接后可用',
  'terminal.toolbar.sftp': 'SFTP',
+  'terminal.toolbar.more': '更多操作',
  'terminal.toolbar.scripts': '脚本',
  'terminal.toolbar.library': '库',
  'terminal.toolbar.noSnippets': '暂无代码片段',
@@ -1487,6 +1488,7 @@ const zhCN: Messages = {
  'settings.shortcuts.resetAll': '全部重置',
  'settings.shortcuts.recording': '请按键...',
  'settings.shortcuts.none': '无',
+  'settings.shortcuts.setDisabled': '设为禁用',
  'settings.shortcuts.category.tabs': '标签页',
  'settings.shortcuts.category.terminal': '终端',
  'settings.shortcuts.category.navigation': '导航',
@@ -1511,6 +1513,7 @@ const zhCN: Messages = {
  'settings.shortcuts.binding.port-forwarding': '打开端口转发',
  'settings.shortcuts.binding.command-palette': '打开命令面板',
  'settings.shortcuts.binding.quick-switch': '快速切换',
+  'settings.shortcuts.binding.new-workspace': '新建工作区',
  'settings.shortcuts.binding.snippets': '打开代码片段',
  'settings.shortcuts.binding.broadcast': '切换广播模式',
  'settings.shortcuts.binding.sftp-copy': '复制文件',
@@ -1689,6 +1692,8 @@ const zhCN: Messages = {
  'snippets.breadcrumb.separator': '›',
  'snippets.empty.title': '创建代码片段',
  'snippets.empty.desc': '将常用命令保存为代码片段，一键复用。',
+  'snippets.search.noResults.title': '无匹配结果',
+  'snippets.search.noResults.desc': '没有代码片段或代码包与"{query}"匹配。换一个关键字，或清除搜索进行浏览。',
  'snippets.section.packages': '代码包',
  'snippets.section.snippets': '代码片段',
  'snippets.package.count': '{count} 个代码片段',
--- a/application/state/useAutoSync.ts
+++ b/application/state/useAutoSync.ts
@@ -51,10 +51,35 @@ const AUTO_SYNC_PROVIDER_ORDER: CloudProvider[] = ['github', 'google', 'onedrive

 // Cross-window restore barrier: stored as an epoch-ms deadline. Any value
 // in the future means a restore is applying in some window and auto-sync
-// must not push concurrently.
+// must not push concurrently. The writer (`withRestoreBarrier`) heartbeats
+// the deadline to keep it alive; a crashed window naturally expires within
+// ~RESTORE_BARRIER_HOLD_MS. We still defend against two degenerate cases:
+// (1) a stale deadline sitting in the past — harmless but pollutes debug
+//     state, so we opportunistically clear it; (2) a deadline absurdly far
+//     in the future (clock skew between windows, pathological holdMs, or a
+//     tampered value) — would otherwise lock auto-sync indefinitely, so we
+//     clear it and treat the barrier as inactive.
+const RESTORE_BARRIER_SANITY_MAX_MS = 10 * 60 * 1000; // 10 minutes
 const isRestoreInProgress = (): boolean => {
  const raw = localStorageAdapter.readNumber(STORAGE_KEY_VAULT_RESTORE_IN_PROGRESS_UNTIL);
-  return typeof raw === 'number' && raw > Date.now();
+  if (typeof raw !== 'number' || raw <= 0) return false;
+  const now = Date.now();
+  if (raw <= now) {
+    // Deadline is in the past — either a clean finish that failed to
+    // overwrite the key, or a crashed heartbeat. Clear so subsequent
+    // reads are cheap and the key doesn't linger forever.
+    localStorageAdapter.writeNumber(STORAGE_KEY_VAULT_RESTORE_IN_PROGRESS_UNTIL, 0);
+    return false;
+  }
+  if (raw - now > RESTORE_BARRIER_SANITY_MAX_MS) {
+    console.warn(
+      '[useAutoSync] Restore barrier deadline is absurdly far in the future; treating as corrupt and clearing.',
+      { deadline: raw, now },
+    );
+    localStorageAdapter.writeNumber(STORAGE_KEY_VAULT_RESTORE_IN_PROGRESS_UNTIL, 0);
+    return false;
+  }
+  return true;
 };

 type SyncTrigger = 'auto' | 'manual';
--- a/application/state/useGlobalHotkeys.ts
+++ b/application/state/useGlobalHotkeys.ts
@@ -13,6 +13,7 @@ interface HotkeyActions {
  openHosts: () => void;
  openSftp: () => void;
  quickSwitch: () => void;
+  newWorkspace: () => void;
  commandPalette: () => void;
  portForwarding: () => void;
  snippets: () => void;
@@ -61,6 +62,7 @@ export const getAppLevelActions = (): Set<string> => {
    'openHosts',
    'openSftp',
    'quickSwitch',
+    'newWorkspace',
    'commandPalette',
    'portForwarding',
    'snippets',
@@ -168,6 +170,9 @@ export const useGlobalHotkeys = ({
      case 'quickSwitch':
        currentActions.quickSwitch?.();
        break;
+      case 'newWorkspace':
+        currentActions.newWorkspace?.();
+        break;
      case 'commandPalette':
        currentActions.commandPalette?.();
        break;
--- a/application/state/useSessionState.ts
+++ b/application/state/useSessionState.ts
@@ -1,6 +1,7 @@
-import { MouseEvent,useCallback,useMemo,useState } from 'react';
+import { MouseEvent,useCallback,useMemo,useRef,useState } from 'react';
 import { ConnectionLog,Host,SerialConfig,Snippet,TerminalSession,Workspace,WorkspaceViewMode } from '../../domain/models';
 import {
+appendPaneToWorkspaceRoot,
 collectSessionIds,
 createWorkspaceFromSessions as createWorkspaceEntity,
 createWorkspaceFromSessionIds,
@@ -24,6 +25,12 @@ export interface LogView {
 export const useSessionState = () => {
  const [sessions, setSessions] = useState<TerminalSession[]>([]);
  const [workspaces, setWorkspaces] = useState<Workspace[]>([]);
+  // Latest workspaces snapshot for synchronous existence checks outside
+  // setWorkspaces updaters — React doesn't guarantee updaters run
+  // synchronously, so relying on a flag flipped inside them to decide
+  // whether to also call setSessions is racy and can leave orphan panes.
+  const workspacesRef = useRef(workspaces);
+  workspacesRef.current = workspaces;
  // activeTabId is now managed by external store - components subscribe directly
  const setActiveTabId = activeTabStore.setActiveTabId;
  const [draggingSessionId, setDraggingSessionId] = useState<string | null>(null);
@@ -383,6 +390,89 @@ export const useSessionState = () => {
    setActiveTabId(workspace.id);
  }, [setActiveTabId]);

+  // Like createWorkspaceWithHosts but supports mixed targets — each
+  // entry is either an SSH host or a local terminal. Used by the
+  // "New Workspace" flow in QuickSwitcher.
+  type WorkspaceTarget =
+    | { kind: 'local'; shellType?: TerminalSession['shellType']; shell?: string; shellArgs?: string[]; shellName?: string; shellIcon?: string }
+    | { kind: 'host'; host: Host };
+
+  const createWorkspaceFromTargets = useCallback((targets: WorkspaceTarget[], name: string = 'Workspace'): string | null => {
+    if (targets.length === 0) return null;
+
+    const newSessions: TerminalSession[] = targets.map((target) => {
+      if (target.kind === 'local') {
+        const sessionId = crypto.randomUUID();
+        return {
+          id: sessionId,
+          hostId: `local-${sessionId}`,
+          hostLabel: target.shellName || 'Local Terminal',
+          hostname: 'localhost',
+          username: 'local',
+          status: 'connecting',
+          protocol: 'local',
+          shellType: target.shellType,
+          localShell: target.shell,
+          localShellArgs: target.shellArgs,
+          localShellName: target.shellName,
+          localShellIcon: target.shellIcon,
+        };
+      }
+      const host = target.host;
+      if (host.protocol === 'serial') {
+        const serialConfig: SerialConfig = host.serialConfig || {
+          path: host.hostname,
+          baudRate: host.port || 115200,
+          dataBits: 8,
+          stopBits: 1,
+          parity: 'none',
+          flowControl: 'none',
+          localEcho: false,
+          lineMode: false,
+        };
+        const portName = serialConfig.path.split('/').pop() || serialConfig.path;
+        return {
+          id: crypto.randomUUID(),
+          hostId: host.id,
+          hostLabel: host.label || `Serial: ${portName}`,
+          hostname: serialConfig.path,
+          username: '',
+          status: 'connecting',
+          protocol: 'serial',
+          serialConfig,
+          charset: host.charset,
+        };
+      }
+      return {
+        id: crypto.randomUUID(),
+        hostId: host.id,
+        hostLabel: host.label,
+        hostname: host.hostname,
+        username: host.username,
+        status: 'connecting',
+        protocol: host.protocol,
+        port: host.port,
+        moshEnabled: host.moshEnabled,
+        charset: host.charset,
+      };
+    });
+
+    const sessionIds = newSessions.map((s) => s.id);
+    // Default to focus-mode (sidebar layout) regardless of target
+    // count — matches the intent behind the QuickSwitcher "New
+    // Workspace" flow, which the user expects to land in focus view.
+    const workspace = createWorkspaceFromSessionIds(sessionIds, {
+      title: name,
+      viewMode: 'focus',
+    });
+    const sessionsWithWorkspace = newSessions.map((s) => ({ ...s, workspaceId: workspace.id }));
+
+    setSessions((prev) => [...prev, ...sessionsWithWorkspace]);
+    setWorkspaces((prev) => [...prev, workspace]);
+    setActiveTabId(workspace.id);
+    return workspace.id;
+  }, [setActiveTabId]);
+
  const createWorkspaceFromSessions = useCallback((
    baseSessionId: string,
    joiningSessionId: string,
@@ -434,6 +524,118 @@ export const useSessionState = () => {
 	    });
 	  }, [setActiveTabId]);

+  // Add a host into an existing workspace by creating a new session for
+  // that host and appending it as the last pane at the workspace root.
+  // Sibling sizes are rebalanced equally by appendPaneToWorkspaceRoot.
+  // Unlike addSessionToWorkspace (which takes a pre-created orphan
+  // session and a SplitHint), this is atomic — the new session is born
+  // already bound to the target workspace and focused.
+  const appendHostToWorkspace = useCallback((
+    workspaceId: string,
+    host: Host,
+    direction: SplitDirection = 'vertical',
+  ): string | null => {
+    // Serial hosts use a different session constructor; they currently
+    // only enter workspaces via createSerialSession + drag, so reject
+    // them here to avoid a partially-constructed session.
+    if (host.protocol === 'serial') return null;
+
+    // Cheap early-exit using the ref when the workspace is clearly
+    // absent. The authoritative check lives inside the setWorkspaces
+    // updater below so we also cover the concurrent-close race.
+    if (!workspacesRef.current.some(w => w.id === workspaceId)) return null;
+
+    const newSessionId = crypto.randomUUID();
+    const newSession: TerminalSession = {
+      id: newSessionId,
+      hostId: host.id,
+      hostLabel: host.label,
+      hostname: host.hostname,
+      username: host.username,
+      status: 'connecting',
+      protocol: host.protocol,
+      port: host.port,
+      moshEnabled: host.moshEnabled,
+      charset: host.charset,
+      workspaceId,
+    };
+
+    // Nest setSessions + setActiveTabId inside the setWorkspaces updater
+    // so we only commit the session when the workspace update actually
+    // matched — otherwise a concurrent closeWorkspace between the ref
+    // check and the updater firing would leave an orphan session with a
+    // workspaceId pointing at nothing, and active tab would jump to a
+    // closed id. The inner setSessions is idempotent (id dedupe) so
+    // StrictMode's dev-time double-invoke does not duplicate the row.
+    setWorkspaces(prev => {
+      const target = prev.find(w => w.id === workspaceId);
+      if (!target) return prev;
+      setSessions(s => s.some(x => x.id === newSessionId) ? s : [...s, newSession]);
+      setActiveTabId(workspaceId);
+      return prev.map(ws => {
+        if (ws.id !== workspaceId) return ws;
+        return {
+          ...ws,
+          root: appendPaneToWorkspaceRoot(ws.root, newSessionId, direction),
+          focusedSessionId: newSessionId,
+        };
+      });
+    });
+    return newSessionId;
+  }, [setActiveTabId]);
+
+  // Atomic "append a local terminal pane" — mirror of appendHostToWorkspace
+  // but constructs a local-protocol session instead of an SSH one.
+  const appendLocalTerminalToWorkspace = useCallback((
+    workspaceId: string,
+    options?: {
+      shellType?: TerminalSession['shellType'];
+      shell?: string;
+      shellArgs?: string[];
+      shellName?: string;
+      shellIcon?: string;
+    },
+    direction: SplitDirection = 'vertical',
+  ): string | null => {
+    // Same pattern as appendHostToWorkspace — ref guard + authoritative
+    // inside-updater match to cover concurrent closeWorkspace.
+    if (!workspacesRef.current.some(w => w.id === workspaceId)) return null;
+
+    const newSessionId = crypto.randomUUID();
+    const localHostId = `local-${newSessionId}`;
+    const newSession: TerminalSession = {
+      id: newSessionId,
+      hostId: localHostId,
+      hostLabel: options?.shellName || 'Local Terminal',
+      hostname: 'localhost',
+      username: 'local',
+      status: 'connecting',
+      protocol: 'local',
+      shellType: options?.shellType,
+      localShell: options?.shell,
+      localShellArgs: options?.shellArgs,
+      localShellName: options?.shellName,
+      localShellIcon: options?.shellIcon,
+      workspaceId,
+    };
+
+    setWorkspaces(prev => {
+      const target = prev.find(w => w.id === workspaceId);
+      if (!target) return prev;
+      setSessions(s => s.some(x => x.id === newSessionId) ? s : [...s, newSession]);
+      setActiveTabId(workspaceId);
+      return prev.map(ws => {
+        if (ws.id !== workspaceId) return ws;
+        return {
+          ...ws,
+          root: appendPaneToWorkspaceRoot(ws.root, newSessionId, direction),
+          focusedSessionId: newSessionId,
+        };
+      });
+    });
+    return newSessionId;
+  }, [setActiveTabId]);
+
  const updateSplitSizes = useCallback((workspaceId: string, splitId: string, sizes: number[]) => {
    setWorkspaces(prev => prev.map(ws => {
      if (ws.id !== workspaceId) return ws;
@@ -838,8 +1040,11 @@ export const useSessionState = () => {
    closeWorkspace,
    updateSessionStatus,
    createWorkspaceWithHosts,
+    createWorkspaceFromTargets,
    createWorkspaceFromSessions,
    addSessionToWorkspace,
+    appendHostToWorkspace,
+    appendLocalTerminalToWorkspace,
    updateSplitSizes,
    splitSession,
    toggleWorkspaceViewMode,
--- a/components/AppLogo.tsx
+++ b/components/AppLogo.tsx
@@ -1,38 +1,58 @@
 import React from 'react';

 interface AppLogoProps {
-    className?: string;
+  className?: string;
 }

-/**
- * App logo component that dynamically uses the accent color (--primary CSS variable).
- * The original logo.svg file remains unchanged; this component renders an inline SVG
- * with colors bound to the current theme's accent color.
- */
 export const AppLogo: React.FC<AppLogoProps> = ({ className }) => (
-    <svg viewBox="0 0 64 64" className={className}>
-        {/* Main background - uses accent color */}
-        <rect x="4" y="4" width="56" height="56" rx="12" fill="hsl(var(--primary))" />
-        {/* Terminal window */}
-        <rect x="14" y="17" width="36" height="24" rx="4" fill="white" />
-        {/* Title bar - light accent tint */}
-        <rect x="14" y="17" width="36" height="5" rx="4" fill="hsl(var(--primary) / 0.15)" />
-        {/* Window buttons */}
-        <circle cx="18" cy="19.5" r="1" fill="hsl(var(--primary))" />
-        <circle cx="22" cy="19.5" r="1" fill="hsl(var(--primary))" opacity="0.7" />
-        <circle cx="26" cy="19.5" r="1" fill="hsl(var(--primary))" opacity="0.5" />
-        {/* Terminal prompt arrow */}
-        <path d="M20 32 L24 30 L20 28" stroke="hsl(var(--primary))" fill="none" strokeWidth="1.6" />
-        {/* Cursor line */}
-        <path d="M28 34 H34" stroke="hsl(var(--primary))" strokeWidth="1.6" />
-        {/* Cat ears */}
-        <path d="M24 17 L26 12 L28 17Z" fill="white" />
-        <path d="M36 17 L38 12 L40 17Z" fill="white" />
-        {/* Cat tail */}
-        <path d="M40 37 C44 40,46 42,46 46 C46 49,44 51,41 51" stroke="white" fill="none" strokeWidth="3.2" />
-        {/* Connector/plug */}
-        <rect x="38" y="48" width="6" height="5" rx="1" fill="white" stroke="hsl(var(--primary))" />
-    </svg>
+  <svg
+    viewBox="0 0 1024 1024"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <rect
+      x="0"
+      y="0"
+      width="1024"
+      height="1024"
+      rx="192"
+      ry="192"
+      fill="hsl(var(--primary))"
+    />
+    <g transform="translate(85.64 85.64) scale(0.68)">
+      <g><path style={{opacity:1}} fill="#f9f9f9" d="M 618.5,240.5 C 647.925,240.677 677.258,242.344 706.5,245.5C 753.323,252.113 798.49,265.113 842,284.5C 870.064,257.538 902.23,236.704 938.5,222C 966.969,211.263 988.469,219.096 1003,245.5C 1011.08,263.079 1016.75,281.412 1020,300.5C 1022.13,320.204 1024.29,339.871 1026.5,359.5C 1026.17,379.674 1026.5,399.674 1027.5,419.5C 1072.74,473.648 1102.74,535.314 1117.5,604.5C 1117.29,607.495 1117.96,610.162 1119.5,612.5C 1126.08,656.83 1126.08,701.163 1119.5,745.5C 1118.23,747.905 1117.57,750.572 1117.5,753.5C 1107.38,802.706 1088.05,847.872 1059.5,889C 1053.04,888.572 1046.71,887.405 1040.5,885.5C 1036.79,883.864 1032.79,883.198 1028.5,883.5C 1011.79,881.938 995.122,882.271 978.5,884.5C 975.572,884.565 972.905,885.232 970.5,886.5C 928.686,895.489 896.519,918.156 874,954.5C 864.791,970.962 859.958,988.628 859.5,1007.5C 793.269,1029.39 725.269,1041.72 655.5,1044.5C 633.833,1044.5 612.167,1044.5 590.5,1044.5C 524.821,1041.8 460.821,1029.63 398.5,1008C 396.254,996.177 393.421,984.344 390,972.5C 387.524,964.881 384.024,957.881 379.5,951.5C 363.815,925.334 341.815,906.667 313.5,895.5C 297.343,888.573 280.343,884.406 262.5,883C 248.055,882.038 233.722,882.538 219.5,884.5C 216.572,884.565 213.905,885.232 211.5,886.5C 211.167,886.5 210.833,886.5 210.5,886.5C 207.848,886.41 205.515,887.076 203.5,888.5C 200.823,889.614 198.156,889.614 195.5,888.5C 149.432,819.968 128.098,744.301 131.5,661.5C 131.502,654.48 131.835,647.48 132.5,640.5C 133.461,638.735 133.795,636.735 133.5,634.5C 135.136,630.79 135.802,626.79 135.5,622.5C 137.764,609.333 140.431,596.333 143.5,583.5C 144.924,581.485 145.59,579.152 145.5,576.5C 156.228,537.714 172.395,501.381 194,467.5C 204.685,451.452 215.852,435.786 227.5,420.5C 228.042,388.62 229.375,356.62 231.5,324.5C 234.549,300.253 240.382,276.586 249,253.5C 253.868,241.906 261.035,232.073 270.5,224C 279.336,218.042 289.002,216.042 299.5,218C 314.655,220.607 328.988,225.607 342.5,233C 368.29,247.23 391.957,264.396 413.5,284.5C 478.68,255.797 547.014,241.13 618.5,240.5 Z"/></g>
+      <g><path style={{opacity:1}} fill="#1f2657" d="M 706.5,245.5 C 677.258,242.344 647.925,240.677 618.5,240.5C 649.662,238.284 680.995,239.784 712.5,245C 710.527,245.495 708.527,245.662 706.5,245.5 Z"/></g>
+      <g><path style={{opacity:1}} fill="#18214c" d="M 231.5,324.5 C 229.375,356.62 228.042,388.62 227.5,420.5C 226.104,392.965 226.604,365.298 229,337.5C 229.17,331.677 230.003,327.344 231.5,324.5 Z"/></g>
+      <g><path style={{opacity:1}} fill="#0c1943" d="M 1026.5,359.5 C 1027.92,371.971 1028.59,384.637 1028.5,397.5C 1028.5,405.008 1028.17,412.341 1027.5,419.5C 1026.5,399.674 1026.17,379.674 1026.5,359.5 Z"/></g>
+      <g><path style={{opacity:1}} fill="#505c83" d="M 817.5,544.5 C 815.162,546.04 812.495,546.706 809.5,546.5C 811.905,545.232 814.572,544.565 817.5,544.5 Z"/></g>
+      <g><path style={{opacity:1}} fill="#919ab0" d="M 445.5,545.5 C 448.152,545.41 450.485,546.076 452.5,547.5C 449.848,547.59 447.515,546.924 445.5,545.5 Z"/></g>
+      <g><path style={{opacity:1}} fill="#022551" d="M 445.5,545.5 C 447.515,546.924 449.848,547.59 452.5,547.5C 479.103,555.885 499.269,572.218 513,596.5C 515.435,607.525 511.268,614.191 500.5,616.5C 497.302,616.378 494.302,615.545 491.5,614C 485.302,604.13 477.969,595.13 469.5,587C 459.207,579.735 447.873,574.902 435.5,572.5C 415.88,568.656 398.213,573.156 382.5,586C 380.905,585.383 379.572,585.716 378.5,587C 378.957,587.414 379.291,587.914 379.5,588.5C 376.839,591.423 374.005,593.423 371,594.5C 369.606,600.126 366.772,603.96 362.5,606C 363.517,607.049 363.684,608.216 363,609.5C 355.276,616.472 347.943,616.139 341,608.5C 339.805,603.4 340.638,598.733 343.5,594.5C 344.086,594.709 344.586,595.043 345,595.5C 344.718,590.888 346.551,587.055 350.5,584C 351.515,582.627 351.515,581.46 350.5,580.5C 375.329,550.884 406.995,539.218 445.5,545.5 Z"/></g>
+      <g><path style={{opacity:1}} fill="#032551" d="M 817.5,544.5 C 862.791,541.392 895.958,559.726 917,599.5C 917.138,612.028 910.971,617.528 898.5,616C 897.167,615.333 895.833,614.667 894.5,614C 884.255,595.245 869.255,582.078 849.5,574.5C 843.812,571.54 837.645,570.207 831,570.5C 822.066,570.919 813.233,572.086 804.5,574C 798.217,577.721 792.05,581.554 786,585.5C 785.667,585.167 785.333,584.833 785,584.5C 782.92,587.065 781.087,589.732 779.5,592.5C 774.384,597.792 770.218,603.792 767,610.5C 759.55,618.016 751.883,618.349 744,611.5C 742.878,609.593 742.045,607.593 741.5,605.5C 741.508,602.455 741.841,599.455 742.5,596.5C 757.037,569.397 779.371,552.73 809.5,546.5C 812.495,546.706 815.162,546.04 817.5,544.5 Z"/></g>
+      <g><path style={{opacity:1}} fill="#0c1a4d" d="M 849.5,574.5 C 822.908,568.314 799.574,574.314 779.5,592.5C 781.087,589.732 782.92,587.065 785,584.5C 785.333,584.833 785.667,585.167 786,585.5C 792.05,581.554 798.217,577.721 804.5,574C 813.233,572.086 822.066,570.919 831,570.5C 837.645,570.207 843.812,571.54 849.5,574.5 Z"/></g>
+      <g><path style={{opacity:1}} fill="#98a2bf" d="M 423.5,572.5 C 419.684,573.482 415.684,574.149 411.5,574.5C 415.183,572.75 419.183,572.083 423.5,572.5 Z"/></g>
+      <g><path style={{opacity:1}} fill="#9ea6be" d="M 145.5,576.5 C 145.59,579.152 144.924,581.485 143.5,583.5C 143.41,580.848 144.076,578.515 145.5,576.5 Z"/></g>
+      <g><path style={{opacity:1}} fill="#132152" d="M 435.5,572.5 C 431.5,572.5 427.5,572.5 423.5,572.5C 419.183,572.083 415.183,572.75 411.5,574.5C 389.242,579.57 372.909,592.403 362.5,613C 356.408,617.241 350.075,617.574 343.5,614C 337.996,608.137 337.163,601.637 341,594.5C 343.929,589.631 347.096,584.965 350.5,580.5C 351.515,581.46 351.515,582.627 350.5,584C 346.551,587.055 344.718,590.888 345,595.5C 344.586,595.043 344.086,594.709 343.5,594.5C 340.638,598.733 339.805,603.4 341,608.5C 347.943,616.139 355.276,616.472 363,609.5C 363.684,608.216 363.517,607.049 362.5,606C 366.772,603.96 369.606,600.126 371,594.5C 374.005,593.423 376.839,591.423 379.5,588.5C 379.291,587.914 378.957,587.414 378.5,587C 379.572,585.716 380.905,585.383 382.5,586C 398.213,573.156 415.88,568.656 435.5,572.5 Z"/></g>
+      <g><path style={{opacity:1}} fill="#6c7794" d="M 742.5,596.5 C 741.841,599.455 741.508,602.455 741.5,605.5C 740.848,604.551 740.514,603.385 740.5,602C 740.393,599.779 741.06,597.946 742.5,596.5 Z"/></g>
+      <g><path style={{opacity:1}} fill="#6f7b97" d="M 1117.5,604.5 C 1118.77,606.905 1119.43,609.572 1119.5,612.5C 1117.96,610.162 1117.29,607.495 1117.5,604.5 Z"/></g>
+      <g><path style={{opacity:1}} fill="#a8aec5" d="M 135.5,622.5 C 135.802,626.79 135.136,630.79 133.5,634.5C 133.717,630.295 134.383,626.295 135.5,622.5 Z"/></g>
+      <g><path style={{opacity:1}} fill="#677393" d="M 653.5,662.5 C 634.473,662.218 615.473,662.551 596.5,663.5C 597.263,662.732 598.263,662.232 599.5,662C 617.671,661.171 635.671,661.338 653.5,662.5 Z"/></g>
+      <g><path style={{opacity:1}} fill="#032551" d="M 653.5,662.5 C 664.536,665.228 669.036,672.228 667,683.5C 665.861,687.112 664.194,690.446 662,693.5C 656.35,700.317 650.184,706.65 643.5,712.5C 643.058,737.755 654.725,754.922 678.5,764C 709.272,768.521 729.105,756.021 738,726.5C 747.413,717.842 755.746,718.842 763,729.5C 759.409,758.463 743.909,778.297 716.5,789C 713.111,789.776 709.778,790.609 706.5,791.5C 697.533,792.383 688.533,792.716 679.5,792.5C 657.328,788.994 639.828,777.994 627,759.5C 607.084,786.202 580.584,797.035 547.5,792C 516.901,784.235 497.901,765.068 490.5,734.5C 493.257,721.955 500.59,718.121 512.5,723C 517.164,727.124 519.998,732.291 521,738.5C 533.515,761.003 552.348,769.17 577.5,763C 599.78,754.048 610.947,737.548 611,713.5C 604.698,706.197 598.032,699.197 591,692.5C 586.824,686.46 585.491,679.794 587,672.5C 589.072,668.26 592.238,665.26 596.5,663.5C 615.473,662.551 634.473,662.218 653.5,662.5 Z"/></g>
+      <g><path style={{opacity:1}} fill="#01103f" d="M 132.5,640.5 C 131.835,647.48 131.502,654.48 131.5,661.5C 130.669,675.994 130.169,690.661 130,705.5C 128.188,682.722 128.854,660.055 132,637.5C 132.483,638.448 132.649,639.448 132.5,640.5 Z"/></g>
+      <g><path style={{opacity:1}} fill="#7c869d" d="M 1119.5,745.5 C 1119.71,748.495 1119.04,751.162 1117.5,753.5C 1117.57,750.572 1118.23,747.905 1119.5,745.5 Z"/></g>
+      <g><path style={{opacity:1}} fill="#7581a0" d="M 706.5,791.5 C 705.737,792.268 704.737,792.768 703.5,793C 695.323,793.823 687.323,793.656 679.5,792.5C 688.533,792.716 697.533,792.383 706.5,791.5 Z"/></g>
+      <g><path style={{opacity:1}} fill="#a7aec3" d="M 1028.5,883.5 C 1032.79,883.198 1036.79,883.864 1040.5,885.5C 1036.29,885.283 1032.29,884.617 1028.5,883.5 Z"/></g>
+      <g><path style={{opacity:1}} fill="#f9f9f9" d="M 233.5,904.5 C 242.833,904.5 252.167,904.5 261.5,904.5C 263.833,904.5 266.167,904.5 268.5,904.5C 304.989,908.827 334.489,925.494 357,954.5C 374.323,977.781 379.323,1003.45 372,1031.5C 365.153,1050.01 351.986,1060.85 332.5,1064C 324.173,1064.5 315.84,1064.67 307.5,1064.5C 307.947,1050.43 307.447,1036.43 306,1022.5C 296.93,1011.58 288.263,1011.91 280,1023.5C 279.833,1038.51 279.333,1053.51 278.5,1068.5C 271.841,1075.83 263.508,1080 253.5,1081C 248.845,1081.5 244.179,1081.67 239.5,1081.5C 237.485,1080.08 235.152,1079.41 232.5,1079.5C 225.481,1077.32 219.315,1073.66 214,1068.5C 213.667,1053.5 213.333,1038.5 213,1023.5C 208.464,1016.16 201.964,1013.66 193.5,1016C 190.333,1017.83 187.833,1020.33 186,1023.5C 185.5,1037.83 185.333,1052.16 185.5,1066.5C 160.376,1072.2 140.21,1064.86 125,1044.5C 120.792,1037.38 118.292,1029.71 117.5,1021.5C 117.482,1013.15 117.815,1004.82 118.5,996.5C 129.171,955.493 154.504,927.826 194.5,913.5C 200.166,912.61 205.5,910.943 210.5,908.5C 211.568,907.566 212.901,907.232 214.5,907.5C 221.111,907.453 227.444,906.453 233.5,904.5 Z"/></g>
+      <g><path style={{opacity:1}} fill="#f8f8f9" d="M 1133.5,985.5 C 1133.41,988.152 1134.08,990.485 1135.5,992.5C 1136.26,1002.48 1136.59,1012.48 1136.5,1022.5C 1133.68,1047.82 1119.68,1062.66 1094.5,1067C 1086.48,1067.61 1078.48,1067.44 1070.5,1066.5C 1070.67,1052.83 1070.5,1039.16 1070,1025.5C 1066.12,1016.96 1059.62,1013.79 1050.5,1016C 1047.33,1017.83 1044.83,1020.33 1043,1023.5C 1042.67,1038.17 1042.33,1052.83 1042,1067.5C 1035.97,1075.1 1028.14,1079.43 1018.5,1080.5C 1013.2,1081.27 1007.87,1081.61 1002.5,1081.5C 991.789,1080.39 982.955,1075.73 976,1067.5C 975.667,1052.83 975.333,1038.17 975,1023.5C 971.569,1017.53 966.402,1014.87 959.5,1015.5C 953.942,1016.72 950.275,1020.06 948.5,1025.5C 947.505,1037.99 947.171,1050.66 947.5,1063.5C 946.209,1063.26 945.209,1063.6 944.5,1064.5C 903.542,1067.19 882.208,1048.02 880.5,1007C 880.658,1002.81 880.991,998.641 881.5,994.5C 883.277,991.495 884.277,988.162 884.5,984.5C 894.73,953.43 914.73,930.93 944.5,917C 978.246,903.385 1012.91,900.718 1048.5,909C 1082.5,918.575 1108.67,938.409 1127,968.5C 1129.86,973.928 1132.03,979.595 1133.5,985.5 Z"/></g>
+      <g><path style={{opacity:1}} fill="#adb2c9" d="M 233.5,904.5 C 227.444,906.453 221.111,907.453 214.5,907.5C 220.536,905.419 226.869,904.419 233.5,904.5 Z"/></g>
+      <g><path style={{opacity:1}} fill="#bec4d7" d="M 210.5,908.5 C 205.5,910.943 200.166,912.61 194.5,913.5C 199.5,911.057 204.834,909.39 210.5,908.5 Z"/></g>
+      <g><path style={{opacity:1}} fill="#9ba0b8" d="M 884.5,984.5 C 884.277,988.162 883.277,991.495 881.5,994.5C 881.723,990.838 882.723,987.505 884.5,984.5 Z"/></g>
+      <g><path style={{opacity:1}} fill="#9aa5bc" d="M 1133.5,985.5 C 1134.92,987.515 1135.59,989.848 1135.5,992.5C 1134.08,990.485 1133.41,988.152 1133.5,985.5 Z"/></g>
+      <g><path style={{opacity:1}} fill="#adb1c6" d="M 118.5,996.5 C 117.815,1004.82 117.482,1013.15 117.5,1021.5C 116.835,1018.69 116.502,1015.69 116.5,1012.5C 116.429,1006.93 117.096,1001.6 118.5,996.5 Z"/></g>
+      <g><path style={{opacity:1}} fill="#c9d0dc" d="M 1135.5,992.5 C 1136.96,998.434 1137.63,1004.6 1137.5,1011C 1137.5,1015.02 1137.17,1018.85 1136.5,1022.5C 1136.59,1012.48 1136.26,1002.48 1135.5,992.5 Z"/></g>
+      <g><path style={{opacity:1}} fill="#b5bfcb" d="M 948.5,1025.5 C 948.5,1038.5 948.5,1051.5 948.5,1064.5C 947.167,1064.5 945.833,1064.5 944.5,1064.5C 945.209,1063.6 946.209,1063.26 947.5,1063.5C 947.171,1050.66 947.505,1037.99 948.5,1025.5 Z"/></g>
+      <g><path style={{opacity:1}} fill="#8193aa" d="M 232.5,1079.5 C 235.152,1079.41 237.485,1080.08 239.5,1081.5C 236.848,1081.59 234.515,1080.92 232.5,1079.5 Z"/></g>
+    </g>
+  </svg>
 );

 export default AppLogo;
--- a/components/KeychainManager.tsx
+++ b/components/KeychainManager.tsx
@@ -520,7 +520,7 @@ echo $3 >> "$FILE"`);
        )}
      >
        {/* Toolbar */}
-        <div className="flex flex-wrap items-center gap-3 bg-secondary/60 border-b border-border/70 px-3 py-1.5 shrink-0">
+        <div className="h-14 px-4 py-2 flex items-center gap-3 bg-secondary/80 backdrop-blur border-b border-border/50 shrink-0">
          {/* Filter Tabs */}
          <div className="flex items-center gap-1">
            {/* KEY button with split interaction: left=switch view, right=dropdown */}
@@ -528,16 +528,15 @@ echo $3 >> "$FILE"`);
              <div
                className={cn(
                  "flex items-center rounded-md transition-colors",
-                  activeFilter === "key" ? "bg-primary/15" : "hover:bg-accent",
+                  activeFilter === "key"
+                    ? "bg-foreground/10 text-foreground hover:bg-foreground/15"
+                    : "bg-foreground/5 text-foreground hover:bg-foreground/10",
                )}
              >
                <Button
                  size="sm"
                  variant="ghost"
-                  className={cn(
-                    "h-8 px-3 gap-2 rounded-r-none hover:bg-transparent",
-                    activeFilter === "key" && "text-primary",
-                  )}
+                  className="h-10 px-3 gap-2 rounded-r-none hover:bg-transparent text-inherit"
                  onClick={() => setActiveFilter("key")}
                >
                  <Key size={14} />
@@ -547,10 +546,7 @@ echo $3 >> "$FILE"`);
                  <Button
                    size="sm"
                    variant="ghost"
-                    className={cn(
-                      "h-8 px-1.5 rounded-l-none hover:bg-transparent",
-                      activeFilter === "key" && "text-primary",
-                    )}
+                    className="h-10 px-1.5 rounded-l-none hover:bg-transparent text-inherit"
                  >
                    <ChevronDown size={12} />
                  </Button>
@@ -589,33 +585,24 @@ echo $3 >> "$FILE"`);
                className={cn(
                  "flex items-center rounded-md transition-colors",
                  activeFilter === "certificate"
-                    ? "bg-primary/15"
-                    : "hover:bg-accent",
+                    ? "bg-foreground/10 text-foreground hover:bg-foreground/15"
+                    : "bg-foreground/5 text-foreground hover:bg-foreground/10",
                )}
              >
                <Button
                  size="sm"
                  variant="ghost"
-                  className={cn(
-                    "h-8 px-3 gap-2 rounded-r-none hover:bg-transparent",
-                    activeFilter === "certificate" && "text-primary",
-                  )}
+                  className="h-10 px-3 gap-2 rounded-r-none hover:bg-transparent text-inherit"
                  onClick={() => setActiveFilter("certificate")}
                >
                  <BadgeCheck size={14} />
                  {t("keychain.filter.certificate")}
-                  <span className="text-[10px] px-1.5 rounded-full bg-muted text-muted-foreground">
-                    {keys.filter((k) => k.certificate).length}
-                  </span>
                </Button>
                <DropdownTrigger asChild>
                  <Button
                    size="sm"
                    variant="ghost"
-                    className={cn(
-                      "h-8 px-1.5 rounded-l-none hover:bg-transparent",
-                      activeFilter === "certificate" && "text-primary",
-                    )}
+                    className="h-10 px-1.5 rounded-l-none hover:bg-transparent text-inherit"
                  >
                    <ChevronDown size={12} />
                  </Button>
@@ -645,7 +632,7 @@ echo $3 >> "$FILE"`);
                  value={search}
                  onChange={(e) => setSearch(e.target.value)}
                  placeholder={t("common.searchPlaceholder")}
-                  className="h-9 pl-8 w-full"
+                  className="h-10 pl-9 w-full bg-secondary border-border/60 text-sm"
                />
              </div>
            )}
@@ -654,7 +641,7 @@ echo $3 >> "$FILE"`);
                <Button
                  variant="ghost"
                  size="icon"
-                  className="h-9 w-9 flex-shrink-0"
+                  className="h-10 w-10 flex-shrink-0"
                >
                  {viewMode === "grid" ? (
                    <LayoutGrid size={16} />
--- a/components/KnownHostsManager.tsx
+++ b/components/KnownHostsManager.tsx
@@ -455,7 +455,7 @@ const KnownHostsManager: React.FC<KnownHostsManagerProps> = ({
  return (
    <div className="h-full flex flex-col">
      {/* Header */}
-      <div className="flex items-center gap-3 px-4 py-3 border-b border-border/50 bg-secondary/50">
+      <div className="h-14 px-4 py-2 flex items-center gap-3 border-b border-border/50 bg-secondary/80 backdrop-blur">
        <div className="flex-1 min-w-0 flex items-center gap-2">
          <div className="relative flex-1 max-w-xs">
            <Search
@@ -464,7 +464,7 @@ const KnownHostsManager: React.FC<KnownHostsManagerProps> = ({
            />
            <Input
              placeholder={t("knownHosts.search.placeholder")}
-              className="pl-9 h-9 bg-background border-border/60 text-sm"
+              className="pl-9 h-10 bg-secondary border-border/60 text-sm"
              value={search}
              onChange={(e) => setSearch(e.target.value)}
            />
@@ -474,7 +474,7 @@ const KnownHostsManager: React.FC<KnownHostsManagerProps> = ({
          {/* View Mode Toggle */}
          <Dropdown>
            <DropdownTrigger asChild>
-              <Button variant="ghost" size="icon" className="h-9 w-9">
+              <Button variant="ghost" size="icon" className="h-10 w-10">
                {viewMode === "grid" ? (
                  <LayoutGrid size={16} />
                ) : (
@@ -505,15 +505,14 @@ const KnownHostsManager: React.FC<KnownHostsManagerProps> = ({
          <SortDropdown
            value={sortMode}
            onChange={setSortMode}
-            className="h-9 w-9"
+            className="h-10 w-10"
          />
        </div>
        <div className="w-px h-5 bg-border/50" />
        <div className="flex items-center gap-2">
          <Button
-            variant="ghost"
-            size="sm"
-            className="h-9 px-3 text-xs"
+            variant="secondary"
+            className="h-10 px-3 bg-foreground/5 text-foreground hover:bg-foreground/10 border-border/40"
            onClick={() => handleScanSystem()}
            disabled={isScanning}
          >
@@ -532,8 +531,7 @@ const KnownHostsManager: React.FC<KnownHostsManagerProps> = ({
          />
          <Button
            variant="secondary"
-            size="sm"
-            className="h-9 px-3 text-xs"
+            className="h-10 px-3 bg-foreground/5 text-foreground hover:bg-foreground/10 border-border/40"
            onClick={openFilePicker}
          >
            <Import size={14} className="mr-2" />
--- a/components/PortForwardingNew.tsx
+++ b/components/PortForwardingNew.tsx
@@ -567,10 +567,13 @@ const PortForwarding: React.FC<PortForwardingProps> = ({
        )}
      >
        {/* Toolbar */}
-        <div className="h-14 px-4 flex items-center gap-3 bg-secondary/60 border-b border-border/60 relative z-20">
+        <div className="h-14 px-4 py-2 flex items-center gap-3 bg-secondary/80 backdrop-blur border-b border-border/50 relative z-20">
          <Dropdown open={showNewMenu} onOpenChange={setShowNewMenu}>
            <DropdownTrigger asChild>
-              <Button variant="secondary" className="h-9 px-3 gap-2">
+              <Button
+                variant="secondary"
+                className="h-10 px-3 gap-2 bg-foreground/5 text-foreground hover:bg-foreground/10 border-border/40"
+              >
                <Zap size={14} />
                {t("pf.action.newForwarding")}
                <ChevronDown
@@ -618,7 +621,7 @@ const PortForwarding: React.FC<PortForwardingProps> = ({
              />
              <Input
                placeholder={t("common.searchPlaceholder")}
-                className="h-9 pl-8 w-44"
+                className="h-10 pl-9 w-44 bg-secondary border-border/60 text-sm"
                value={search}
                onChange={(e) => setSearch(e.target.value)}
              />
@@ -627,7 +630,7 @@ const PortForwarding: React.FC<PortForwardingProps> = ({
            {/* View mode toggle */}
            <Dropdown>
              <DropdownTrigger asChild>
-                <Button variant="ghost" size="icon" className="h-9 w-9">
+                <Button variant="ghost" size="icon" className="h-10 w-10">
                  {viewMode === "grid" ? (
                    <LayoutGrid size={16} />
                  ) : (
@@ -664,7 +667,7 @@ const PortForwarding: React.FC<PortForwardingProps> = ({
            <SortDropdown
              value={sortMode}
              onChange={setSortMode}
-              className="h-9 w-9"
+              className="h-10 w-10"
            />
          </div>
        </div>
--- a/components/QuickAddSnippetDialog.tsx
+++ b/components/QuickAddSnippetDialog.tsx
@@ -30,6 +30,7 @@ export interface QuickAddSnippetDialogProps {
  snippets: Snippet[];
  packages: string[];
  onCreateSnippet: (snippet: Snippet) => void;
+  onUpdateSnippet?: (snippet: Snippet) => void;
  onCreatePackage?: (packagePath: string) => void;
 }

@@ -37,6 +38,7 @@ export const QuickAddSnippetDialog: React.FC<QuickAddSnippetDialogProps> = ({
  snippets,
  packages,
  onCreateSnippet,
+  onUpdateSnippet,
  onCreatePackage,
 }) => {
  const { t } = useI18n();
@@ -44,6 +46,7 @@ export const QuickAddSnippetDialog: React.FC<QuickAddSnippetDialogProps> = ({
  const [label, setLabel] = useState('');
  const [command, setCommand] = useState('');
  const [packagePath, setPackagePath] = useState('');
+  const [editing, setEditing] = useState<Snippet | null>(null);
  const labelInputRef = useRef<HTMLInputElement>(null);

  // Listen for the global "add snippet" request dispatched by the
@@ -51,6 +54,7 @@ export const QuickAddSnippetDialog: React.FC<QuickAddSnippetDialogProps> = ({
  // every open so stale input from a previous cancel does not leak.
  useEffect(() => {
    const handler = () => {
+      setEditing(null);
      setLabel('');
      setCommand('');
      setPackagePath('');
@@ -60,6 +64,23 @@ export const QuickAddSnippetDialog: React.FC<QuickAddSnippetDialogProps> = ({
    return () => window.removeEventListener('netcatty:snippets:add', handler);
  }, []);

+  // Sibling event for editing an existing snippet from the ScriptsSidePanel
+  // context menu. Prefills the form and flips the dialog into update mode.
+  useEffect(() => {
+    const handler = (e: Event) => {
+      const detail = (e as CustomEvent<{ snippet?: Snippet }>).detail;
+      const snippet = detail?.snippet;
+      if (!snippet) return;
+      setEditing(snippet);
+      setLabel(snippet.label ?? '');
+      setCommand(snippet.command ?? '');
+      setPackagePath(snippet.package ?? '');
+      setOpen(true);
+    };
+    window.addEventListener('netcatty:snippets:edit', handler);
+    return () => window.removeEventListener('netcatty:snippets:edit', handler);
+  }, []);
+
  // Auto-focus the label input once the dialog renders, so the user can
  // start typing immediately after clicking the + button.
  useEffect(() => {
@@ -92,16 +113,27 @@ export const QuickAddSnippetDialog: React.FC<QuickAddSnippetDialogProps> = ({
    if (trimmedPackage && !packages.includes(trimmedPackage)) {
      onCreatePackage?.(trimmedPackage);
    }
-    onCreateSnippet({
-      id: crypto.randomUUID(),
-      label: label.trim(),
-      command, // preserve whitespace in multi-line commands
-      tags: [],
-      package: trimmedPackage || '',
-      targets: [],
-    });
+    if (editing && onUpdateSnippet) {
+      // Preserve tags/targets/shortkey/noAutoRun etc. that this lightweight
+      // dialog does not expose — only the three quick-edit fields change.
+      onUpdateSnippet({
+        ...editing,
+        label: label.trim(),
+        command,
+        package: trimmedPackage || '',
+      });
+    } else {
+      onCreateSnippet({
+        id: crypto.randomUUID(),
+        label: label.trim(),
+        command, // preserve whitespace in multi-line commands
+        tags: [],
+        package: trimmedPackage || '',
+        targets: [],
+      });
+    }
    setOpen(false);
-  }, [canSave, packagePath, packages, onCreatePackage, onCreateSnippet, label, command]);
+  }, [canSave, packagePath, packages, onCreatePackage, onCreateSnippet, onUpdateSnippet, editing, label, command]);

  const handleKeyDown = useCallback(
    (e: React.KeyboardEvent) => {
@@ -118,7 +150,9 @@ export const QuickAddSnippetDialog: React.FC<QuickAddSnippetDialogProps> = ({
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogContent className="max-w-md" onKeyDown={handleKeyDown}>
        <DialogHeader>
-          <DialogTitle>{t('snippets.panel.newTitle')}</DialogTitle>
+          <DialogTitle>
+            {t(editing ? 'snippets.panel.editTitle' : 'snippets.panel.newTitle')}
+          </DialogTitle>
          <DialogDescription>
            {t('snippets.empty.desc')}
          </DialogDescription>
--- a/components/QuickSwitcher.tsx
+++ b/components/QuickSwitcher.tsx
@@ -1,8 +1,9 @@
 import {
  Folder,
-  LayoutGrid,
-  Search,
  FolderLock,
+  LayoutGrid,
+  Plus,
+  Search,
  Terminal,
  TerminalSquare,
 } from "lucide-react";
@@ -68,7 +69,7 @@ interface QuickSwitcherProps {
  onSelectTab: (tabId: string) => void;
  onClose: () => void;
  onCreateLocalTerminal?: (shell?: { command: string; args?: string[]; name?: string; icon?: string }) => void;
-  // onCreateWorkspace removed - feature not currently used
+  onCreateWorkspace?: () => void;
  keyBindings?: KeyBinding[];
  showSftpTab: boolean;
 }
@@ -84,6 +85,7 @@ const QuickSwitcherInner: React.FC<QuickSwitcherProps> = ({
  onSelectTab,
  onClose,
  onCreateLocalTerminal,
+  onCreateWorkspace,
  keyBindings,
  showSftpTab,
 }) => {
@@ -280,7 +282,7 @@ const QuickSwitcherInner: React.FC<QuickSwitcherProps> = ({
        <ScrollArea className="flex-1 h-full">
          {/* Categorized view: Hosts/Tabs/Quick connect */}
          <div>
-            {/* Jump To hint */}
+            {/* Jump To hint + New Workspace action */}
            <div className="px-4 py-2 flex items-center gap-2">
              <span className="text-xs text-muted-foreground">{t("qs.jumpTo")}</span>
              {quickSwitchKey && (
@@ -288,6 +290,20 @@ const QuickSwitcherInner: React.FC<QuickSwitcherProps> = ({
                  {quickSwitchKey.replace(/ \+ /g, '+')}
                </kbd>
              )}
+              {onCreateWorkspace && (
+                <button
+                  type="button"
+                  onClick={() => {
+                    onCreateWorkspace();
+                    onClose();
+                  }}
+                  className="ml-auto inline-flex items-center gap-1 text-[11px] text-muted-foreground hover:text-foreground border border-border rounded px-1.5 py-0.5 transition-colors hover:bg-muted/50"
+                  title="New Workspace"
+                >
+                  <Plus size={11} />
+                  <span>New Workspace</span>
+                </button>
+              )}
            </div>

            {/* Hosts section */}
--- a/components/ScriptsSidePanel.tsx
+++ b/components/ScriptsSidePanel.tsx
@@ -5,11 +5,17 @@
 * Clicking a snippet executes it in the focused terminal session.
 */

-import { ChevronRight, Package, Plus, Search, Zap } from 'lucide-react';
+import { ChevronRight, Edit2, Package, Plus, Search, Trash2, Zap } from 'lucide-react';
 import React, { memo, useCallback, useMemo, useState } from 'react';
 import { useI18n } from '../application/i18n/I18nProvider';
 import { cn } from '../lib/utils';
 import { Snippet } from '../types';
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuTrigger,
+} from './ui/context-menu';
 import { Input } from './ui/input';
 import { ScrollArea } from './ui/scroll-area';

@@ -126,6 +132,18 @@ const ScriptsSidePanelInner: React.FC<ScriptsSidePanelProps> = ({
    window.dispatchEvent(new CustomEvent('netcatty:snippets:add'));
  }, []);

+  const handleEditSnippet = useCallback((snippet: Snippet) => {
+    window.dispatchEvent(
+      new CustomEvent('netcatty:snippets:edit', { detail: { snippet } }),
+    );
+  }, []);
+
+  const handleDeleteSnippet = useCallback((id: string) => {
+    window.dispatchEvent(
+      new CustomEvent('netcatty:snippets:delete', { detail: { id } }),
+    );
+  }, []);
+
  if (!isVisible) return null;

  const hasAnyContent = snippets.length > 0 || packages.length > 0;
@@ -213,16 +231,30 @@ const ScriptsSidePanelInner: React.FC<ScriptsSidePanelProps> = ({

          {/* Snippets */}
          {displayedSnippets.map((s) => (
-            <button
-              key={s.id}
-              onClick={() => handleSnippetClick(s.command, s.noAutoRun)}
-              className="w-full text-left px-3 py-2 hover:bg-accent/50 transition-colors flex flex-col gap-0.5"
-            >
-              <span className="text-xs font-medium truncate">{s.label}</span>
-              <span className="text-muted-foreground truncate font-mono text-[10px] max-w-full">
-                {s.command}
-              </span>
-            </button>
+            <ContextMenu key={s.id}>
+              <ContextMenuTrigger asChild>
+                <button
+                  onClick={() => handleSnippetClick(s.command, s.noAutoRun)}
+                  className="w-full text-left px-3 py-2 hover:bg-accent/50 transition-colors flex flex-col gap-0.5"
+                >
+                  <span className="text-xs font-medium truncate">{s.label}</span>
+                  <span className="text-muted-foreground truncate font-mono text-[10px] max-w-full">
+                    {s.command}
+                  </span>
+                </button>
+              </ContextMenuTrigger>
+              <ContextMenuContent>
+                <ContextMenuItem onClick={() => handleEditSnippet(s)}>
+                  <Edit2 className="mr-2 h-4 w-4" /> {t('action.edit')}
+                </ContextMenuItem>
+                <ContextMenuItem
+                  className="text-destructive"
+                  onClick={() => handleDeleteSnippet(s.id)}
+                >
+                  <Trash2 className="mr-2 h-4 w-4" /> {t('action.delete')}
+                </ContextMenuItem>
+              </ContextMenuContent>
+            </ContextMenu>
          ))}

          {hasAnyContent && displayedSnippets.length === 0 && filteredPackages.length === 0 && search.trim() && (
--- a/components/SettingsApplicationTab.tsx
+++ b/components/SettingsApplicationTab.tsx
@@ -152,7 +152,14 @@ export default function SettingsApplicationTab({ updateState, checkNow, openRele
          <div className="flex items-center gap-4">
            <AppLogo className="w-16 h-16" />
            <div>
-              <div className="text-3xl font-semibold leading-none">{appInfo.name}</div>
+              {/* Match the Vault sidebar wordmark so the Netcatty brand
+                  reads consistently across surfaces — same italic heavy
+                  cut, just scaled up for the Settings hero area and
+                  using the branded mixed-case "Netcatty" instead of
+                  the lowercase electron app name. */}
+              <div className="text-3xl font-black italic tracking-tight leading-none text-foreground">
+                Netcatty
+              </div>
              <div className="flex items-center gap-2 mt-1">
                <span className="text-sm text-muted-foreground">
                  {appInfo.version ? appInfo.version : " "}
--- a/components/SnippetsManager.tsx
+++ b/components/SnippetsManager.tsx
@@ -402,9 +402,15 @@ const SnippetsManager: React.FC<SnippetsManagerProps> = ({
  }, [packages, selectedPackage, snippets]);

  const displayedSnippets = useMemo(() => {
-    let result = snippets.filter((s) => (s.package || '') === (selectedPackage || ''));
-    // Apply search filter
-    if (search.trim()) {
+    // Search spans all packages (#777): when the user types in the search
+    // box we drop the current-package scoping so cross-package matches are
+    // reachable without navigating into each one. Otherwise the user is
+    // browsing and we keep the package scope.
+    const hasSearch = search.trim().length > 0;
+    let result = hasSearch
+      ? snippets
+      : snippets.filter((s) => (s.package || '') === (selectedPackage || ''));
+    if (hasSearch) {
      const s = search.toLowerCase();
      result = result.filter(sn =>
        sn.label.toLowerCase().includes(s) ||
@@ -734,16 +740,35 @@ const SnippetsManager: React.FC<SnippetsManagerProps> = ({
          title={editingSnippet.id ? t('snippets.panel.editTitle') : t('snippets.panel.newTitle')}
          layout="inline"
          actions={
-            <Button
-              variant="ghost"
-              size="icon"
-              className="h-8 w-8"
-              onClick={handleSubmit}
-              disabled={!editingSnippet.label || !editingSnippet.command}
-              aria-label={t('common.save')}
-            >
-              <Check size={16} />
-            </Button>
+            <>
+              {editingSnippet.id && (
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="h-8 w-8 text-destructive hover:text-destructive"
+                  onClick={() => {
+                    const id = editingSnippet.id;
+                    if (!id) return;
+                    onDelete(id);
+                    handleClosePanel();
+                  }}
+                  aria-label={t('common.delete')}
+                  title={t('common.delete')}
+                >
+                  <Trash2 size={16} />
+                </Button>
+              )}
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-8 w-8"
+                onClick={handleSubmit}
+                disabled={!editingSnippet.label || !editingSnippet.command}
+                aria-label={t('common.save')}
+              >
+                <Check size={16} />
+              </Button>
+            </>
          }
        >
          <AsidePanelContent>
@@ -959,7 +984,7 @@ const SnippetsManager: React.FC<SnippetsManagerProps> = ({
    <div className="h-full min-h-0 flex relative">
      <div className="flex-1 flex flex-col min-h-0 min-w-0 overflow-hidden">
        <header className="border-b border-border/50 bg-secondary/80 backdrop-blur">
-          <div className="h-14 px-4 py-2 flex items-center gap-2">
+          <div className="h-14 px-4 py-2 flex items-center gap-3">
            {/* Search box */}
            <div className="relative w-64">
              <Search size={14} className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" />
@@ -980,7 +1005,7 @@ const SnippetsManager: React.FC<SnippetsManagerProps> = ({
              }}
              size="sm"
              variant="secondary"
-              className="h-10 gap-2"
+              className="h-10 gap-2 bg-foreground/5 text-foreground hover:bg-foreground/10 border-border/40"
            >
              <FolderPlus size={14} className="mr-1" /> {t('snippets.action.newPackage')}
            </Button>
@@ -1049,7 +1074,10 @@ const SnippetsManager: React.FC<SnippetsManagerProps> = ({
        )}

        <div className="flex-1 space-y-3 overflow-y-auto px-4 pb-4">
-          {displayedPackages.length > 0 && (
+          {/* Hide the sub-package grid while searching (#777) — search spans
+              all packages, so showing the package tiles alongside a flat
+              cross-package snippet list is noisy. */}
+          {displayedPackages.length > 0 && !search.trim() && (
            <>
              <div className="flex items-center justify-between">
                <h3 className="text-sm font-semibold text-muted-foreground">{t('snippets.section.packages')}</h3>
@@ -1196,6 +1224,29 @@ const SnippetsManager: React.FC<SnippetsManagerProps> = ({
              </div>
            </div>
          )}
+
+          {/* Search-with-no-results feedback (#777 codex follow-up). Package
+              tiles are already hidden during search, so the only visible
+              surface is the flat snippet list — if that's empty the content
+              area would be blank without this fallback. The gate intentionally
+              excludes the fully-empty workspace (snippets.length === 0 AND
+              displayedPackages.length === 0), which the global "Create
+              snippet" empty state renders instead — avoids stacking two
+              empty states. Package-only workspaces (no snippets yet) still
+              get this feedback when searching. */}
+          {search.trim() && displayedSnippets.length === 0 && (snippets.length > 0 || displayedPackages.length > 0) && (
+            <div className="flex flex-col items-center justify-center py-16 text-muted-foreground">
+              <div className="h-14 w-14 rounded-2xl bg-secondary/80 flex items-center justify-center mb-3">
+                <Search size={24} className="opacity-60" />
+              </div>
+              <h3 className="text-base font-semibold text-foreground mb-1">
+                {t('snippets.search.noResults.title')}
+              </h3>
+              <p className="text-xs text-center max-w-sm">
+                {t('snippets.search.noResults.desc', { query: search.trim() })}
+              </p>
+            </div>
+          )}
        </div>
      </div>

--- a/components/TerminalLayer.tsx
+++ b/components/TerminalLayer.tsx
@@ -1,4 +1,4 @@
-import { Circle, FolderTree, LayoutGrid, MessageSquare, PanelLeft, PanelRight, Palette, Server, X, Zap } from 'lucide-react';
+import { Circle, Columns2, FolderTree, MessageSquare, PanelLeft, PanelRight, Palette, Plus, Search, Server, X, Zap } from 'lucide-react';
 import React, { createContext, memo, startTransition, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { useActiveTabId } from '../application/state/activeTabStore';
 import {
@@ -29,7 +29,10 @@ import { cn, normalizeLineEndings } from '../lib/utils';
 import { detectLocalOs } from '../lib/localShell';
 import { useStoredString } from '../application/state/useStoredString';
 import { useStoredNumber } from '../application/state/useStoredNumber';
-import { STORAGE_KEY_SIDE_PANEL_WIDTH } from '../infrastructure/config/storageKeys';
+import {
+  STORAGE_KEY_SIDE_PANEL_WIDTH,
+  STORAGE_KEY_WORKSPACE_FOCUS_SIDEBAR_WIDTH,
+} from '../infrastructure/config/storageKeys';
 import { buildCacheKey } from '../application/state/sftp/sharedRemoteHostCache';
 import type { DropEntry } from '../lib/sftpFileUtils';
 import { GroupConfig, Host, Identity, KnownHost, SSHKey, Snippet, TerminalSession, TerminalTheme, Workspace, WorkspaceNode } from '../types';
@@ -46,6 +49,8 @@ import { TerminalComposeBar } from './terminal/TerminalComposeBar';
 import { TERMINAL_THEMES } from '../infrastructure/config/terminalThemes';
 import { useCustomThemes } from '../application/state/customThemeStore';
 import { Button } from './ui/button';
+import { Input } from './ui/input';
+import { RippleButton } from './ui/ripple';
 import { ScrollArea } from './ui/scroll-area';
 import { setupMcpApprovalBridge } from '../infrastructure/ai/shared/approvalGate';

@@ -407,6 +412,7 @@ interface TerminalLayerProps {
  onTerminalDataCapture?: (sessionId: string, data: string) => void;
  onCreateWorkspaceFromSessions: (baseSessionId: string, joiningSessionId: string, hint: Exclude<SplitHint, null>) => void;
  onAddSessionToWorkspace: (workspaceId: string, sessionId: string, hint: Exclude<SplitHint, null>) => void;
+  onRequestAddToWorkspace?: (workspaceId: string) => void;
  onUpdateSplitSizes: (workspaceId: string, splitId: string, sizes: number[]) => void;
  onSetDraggingSessionId: (id: string | null) => void;
  onToggleWorkspaceViewMode?: (workspaceId: string) => void;
@@ -465,6 +471,7 @@ const TerminalLayerInner: React.FC<TerminalLayerProps> = ({
  onTerminalDataCapture,
  onCreateWorkspaceFromSessions,
  onAddSessionToWorkspace,
+  onRequestAddToWorkspace,
  onUpdateSplitSizes,
  onSetDraggingSessionId,
  onToggleWorkspaceViewMode,
@@ -600,6 +607,8 @@ const TerminalLayerInner: React.FC<TerminalLayerProps> = ({
  const workspaceInnerRef = useRef<HTMLDivElement>(null);
  const workspaceOverlayRef = useRef<HTMLDivElement>(null);
  const [dropHint, setDropHint] = useState<SplitHint>(null);
+  // Focus-mode sidebar: client-side filter for the terminal list.
+  const [focusSidebarSearch, setFocusSidebarSearch] = useState('');
  const [themePreview, setThemePreview] = useState<{ targetSessionId: string | null; themeId: string | null }>({
    targetSessionId: null,
    themeId: null,
@@ -654,6 +663,9 @@ const TerminalLayerInner: React.FC<TerminalLayerProps> = ({
  const [sidePanelWidth, setSidePanelWidth, persistSidePanelWidth] = useStoredNumber(
    STORAGE_KEY_SIDE_PANEL_WIDTH, 420, { min: 280, max: 800 },
  );
+  const [focusSidebarWidth, setFocusSidebarWidth, persistFocusSidebarWidth] = useStoredNumber(
+    STORAGE_KEY_WORKSPACE_FOCUS_SIDEBAR_WIDTH, 224, { min: 160, max: 480 },
+  );
  const [sidePanelPosition, setSidePanelPosition] = useStoredString<'left' | 'right'>(
    'netcatty_side_panel_position',
    'left',
@@ -781,6 +793,35 @@ const TerminalLayerInner: React.FC<TerminalLayerProps> = ({
    });
  }, []);

+  // Focus-mode workspace sidebar resize handler. The sidebar is always
+  // anchored to the left of the workspace area, so a rightward drag grows it.
+  const handleFocusSidebarResizeStart = useCallback((e: React.MouseEvent) => {
+    e.preventDefault();
+    const startX = e.clientX;
+    const startWidth = focusSidebarWidth;
+
+    let lastWidth = startWidth;
+    let rafId: number | null = null;
+    const onMouseMove = (ev: MouseEvent) => {
+      const delta = ev.clientX - startX;
+      lastWidth = Math.max(160, Math.min(480, startWidth + delta));
+      if (rafId !== null) return;
+      rafId = requestAnimationFrame(() => {
+        rafId = null;
+        setFocusSidebarWidth(lastWidth);
+      });
+    };
+    const onMouseUp = () => {
+      if (rafId !== null) cancelAnimationFrame(rafId);
+      setFocusSidebarWidth(lastWidth);
+      persistFocusSidebarWidth(lastWidth);
+      window.removeEventListener('mousemove', onMouseMove);
+      window.removeEventListener('mouseup', onMouseUp);
+    };
+    window.addEventListener('mousemove', onMouseMove);
+    window.addEventListener('mouseup', onMouseUp);
+  }, [focusSidebarWidth, setFocusSidebarWidth, persistFocusSidebarWidth]);
+
  // Side panel resize handler
  const handleSidePanelResizeStart = useCallback((e: React.MouseEvent) => {
    e.preventDefault();
@@ -1909,31 +1950,97 @@ const TerminalLayerInner: React.FC<TerminalLayerProps> = ({
  const renderFocusModeSidebar = () => {
    if (!activeWorkspace || !isFocusMode) return null;

+    // Use terminal-theme colors for every surface in here so the sidebar
+    // stays readable when the app theme and terminal theme diverge
+    // (e.g. followAppTerminalTheme=off, light app + dark terminal).
+    // Tailwind's bg-foreground/* / text-foreground classes bind to app
+    // theme vars, so we derive row colors from the terminal theme
+    // directly with color-mix.
+    const termBg = resolvedPreviewTheme.colors.background;
+    const termFg = resolvedPreviewTheme.colors.foreground;
+    const selectedBg = `color-mix(in srgb, ${termFg} 10%, transparent)`;
+    const selectedHoverBg = `color-mix(in srgb, ${termFg} 15%, transparent)`;
+    const unselectedHoverBg = `color-mix(in srgb, ${termFg} 10%, transparent)`;
+    const unselectedFg = `color-mix(in srgb, ${termFg} 75%, ${termBg} 25%)`;
+    const mutedFg = `color-mix(in srgb, ${termFg} 55%, ${termBg} 45%)`;
+    const separator = `color-mix(in srgb, ${termFg} 10%, ${termBg} 90%)`;
+
    return (
      <div
-        className="w-56 flex-shrink-0 bg-secondary/50 border-r border-border/50 flex flex-col"
+        className="flex-shrink-0 flex flex-col relative"
+        style={{
+          width: focusSidebarWidth,
+          // Paint the sidebar with the terminal's theme background so it
+          // reads as one continuous surface with the focused terminal
+          // (instead of a distinct tinted panel sitting next to it).
+          backgroundColor: termBg,
+          color: termFg,
+          borderRight: `1px solid ${separator}`,
+        }}
        data-section="terminal-workspace-sidebar"
      >
-        {/* Header with view toggle */}
-        <div className="h-10 flex items-center justify-between px-3 border-b border-border/50">
-          <span className="text-xs font-medium text-muted-foreground">
-            Terminals · {workspaceSessions.length}
-          </span>
+        {/* Resize handle sitting on the right edge of the sidebar. */}
+        <div
+          className="absolute top-0 right-[-3px] h-full w-2 cursor-ew-resize z-30"
+          onMouseDown={handleFocusSidebarResizeStart}
+        />
+        {/* Header — search box + actions (matches Vault-sidebar search
+            style but skinned to the terminal theme so it blends with the
+            sidebar's bg). */}
+        <div
+          className="h-11 flex items-center gap-1.5 px-2"
+          style={{ borderBottom: `1px solid ${separator}` }}
+        >
+          <div className="relative flex-1 min-w-0">
+            <Search
+              size={12}
+              className="absolute left-1 top-1/2 -translate-y-1/2 pointer-events-none"
+              style={{ color: mutedFg }}
+            />
+            <Input
+              value={focusSidebarSearch}
+              onChange={(e) => setFocusSidebarSearch(e.target.value)}
+              placeholder="Search terminals..."
+              className="h-7 pl-6 pr-0 text-xs bg-transparent border-0 shadow-none focus-visible:ring-0 focus-visible:ring-offset-0"
+              style={{ color: termFg }}
+            />
+          </div>
+          {onRequestAddToWorkspace && (
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-7 w-7 p-0 flex-shrink-0 hover:text-inherit"
+              style={{ color: mutedFg }}
+              onClick={() => onRequestAddToWorkspace(activeWorkspace.id)}
+              title="Add Terminal"
+            >
+              <Plus size={14} />
+            </Button>
+          )}
          <Button
            variant="ghost"
            size="sm"
-            className="h-7 w-7 p-0"
+            className="h-7 w-7 p-0 flex-shrink-0 hover:text-inherit"
+            style={{ color: mutedFg }}
            onClick={() => onToggleWorkspaceViewMode?.(activeWorkspace.id)}
            title="Switch to Split View"
          >
-            <LayoutGrid size={14} />
+            <Columns2 size={14} />
          </Button>
        </div>

        {/* Session list */}
        <ScrollArea className="flex-1">
          <div className="p-2 space-y-1">
-            {workspaceSessions.map(session => {
+            {workspaceSessions.filter((session) => {
+              const term = focusSidebarSearch.trim().toLowerCase();
+              if (!term) return true;
+              return (
+                session.hostLabel?.toLowerCase().includes(term)
+                || session.hostname?.toLowerCase().includes(term)
+                || session.username?.toLowerCase().includes(term)
+              );
+            }).map(session => {
              const host = sessionHostsMap.get(session.id);
              const isSelected = session.id === focusedSessionId;
              const statusColor = session.status === 'connected'
@@ -1942,35 +2049,49 @@ const TerminalLayerInner: React.FC<TerminalLayerProps> = ({
                  ? 'text-amber-500'
                  : 'text-red-500';

+              const restBg = isSelected ? selectedBg : 'transparent';
+              const hoverBg = isSelected ? selectedHoverBg : unselectedHoverBg;
+              const rowFg = isSelected ? termFg : unselectedFg;
+
              return (
-                <div
+                <RippleButton
                  key={session.id}
-                  className={cn(
-                    "flex items-center gap-2 px-2 py-1.5 rounded-md cursor-pointer transition-colors",
-                    isSelected
-                      ? "bg-primary/15 border border-primary/30"
-                      : "hover:bg-secondary/80 border border-transparent"
-                  )}
+                  variant="ghost"
+                  // Row colors are terminal-theme derived (see renderFocusModeSidebar
+                  // top). `hover:text-inherit` pins text against ghost variant's
+                  // hover:text-accent-foreground default; hover bg is swapped
+                  // via inline style so we stay on terminal-theme alpha rather
+                  // than Tailwind's app-theme foreground color.
+                  className="w-full h-auto justify-start gap-2 px-2 py-1.5 font-normal hover:text-inherit"
+                  style={{ backgroundColor: restBg, color: rowFg }}
+                  onMouseEnter={(e) => {
+                    e.currentTarget.style.backgroundColor = hoverBg;
+                  }}
+                  onMouseLeave={(e) => {
+                    e.currentTarget.style.backgroundColor = restBg;
+                  }}
                  onClick={() => onSetWorkspaceFocusedSession?.(activeWorkspace.id, session.id)}
                >
-                  <div className="relative">
+                  <div className="relative flex-shrink-0">
                    {host ? (
                      <DistroAvatar host={host} fallback={session.hostLabel} size="sm" />
                    ) : (
-                      <Server size={16} className="text-muted-foreground" />
+                      <Server size={16} style={{ color: mutedFg }} />
                    )}
                    <Circle
                      size={6}
                      className={cn("absolute -bottom-0.5 -right-0.5 fill-current", statusColor)}
                    />
                  </div>
-                  <div className="flex-1 min-w-0">
-                    <div className="text-xs font-medium truncate">{session.hostLabel}</div>
-                    <div className="text-[10px] text-muted-foreground truncate">
+                  <div className="flex-1 min-w-0 text-left">
+                    <div className={cn("text-xs truncate", isSelected ? "font-semibold" : "font-medium")}>
+                      {session.hostLabel}
+                    </div>
+                    <div className="text-[10px] truncate" style={{ color: mutedFg }}>
                      {session.username}@{session.hostname}
                    </div>
                  </div>
-                </div>
+                </RippleButton>
              );
            })}
          </div>
@@ -1992,14 +2113,18 @@ const TerminalLayerInner: React.FC<TerminalLayerProps> = ({
          zIndex: isTerminalLayerVisible ? 10 : 0,
        }}
      >
-        <div className={cn("flex-1 flex min-h-0 relative", sidePanelPosition === 'right' && "flex-row-reverse")}>
-        {/* Side panel with tab header + content (SFTP / Scripts / Theme) */}
+        <div className="flex-1 flex min-h-0 relative">
+        {/* Side panel with tab header + content (SFTP / Scripts / Theme).
+            Uses `order-last` instead of flex-row-reverse on the parent so the
+            workspace focus-mode sidebar and terminal area below stay in source
+            order (sidebar on the left) regardless of the side panel's side. */}
        {(isSidePanelOpenForCurrentTab || mountedSftpTabIds.length > 0 || mountedAiTabIds.length > 0) && (
          <>
            <div
              style={{ width: isSidePanelOpenForCurrentTab ? sidePanelWidth : 0 }}
              className={cn(
                "flex-shrink-0 h-full relative z-20",
+                sidePanelPosition === 'right' && "order-last",
              )}
            >
              {isSidePanelOpenForCurrentTab && (
@@ -2220,6 +2345,7 @@ const TerminalLayerInner: React.FC<TerminalLayerProps> = ({
        {/* Focus mode sidebar */}
        {isFocusMode && renderFocusModeSidebar()}

+
        <div ref={workspaceInnerRef} className="overflow-hidden relative flex-1">
          {draggingSessionId && !isFocusMode && (
            <div
--- a/components/TopTabs.tsx
+++ b/components/TopTabs.tsx
@@ -555,7 +555,7 @@ const TopTabsInner: React.FC<TopTabsProps> = ({
                onDragLeave={handleTabDragLeave}
                onDrop={(e) => handleTabDrop(e, session.id)}
                className={cn(
-                  "netcatty-tab relative h-7 pl-3 pr-2 min-w-[140px] max-w-[240px] rounded-none text-xs font-semibold cursor-pointer flex items-center justify-between gap-2 app-no-drag flex-shrink-0",
+                  "netcatty-tab relative h-7 pl-3 pr-2 min-w-[140px] max-w-[240px] rounded-t-md overflow-hidden text-xs font-semibold cursor-pointer flex items-center justify-between gap-2 app-no-drag flex-shrink-0",
                  "transition-transform duration-150",
                  isBeingDragged && isDraggingForReorder ? "opacity-40 scale-95" : ""
                )}
@@ -581,13 +581,6 @@ const TopTabsInner: React.FC<TopTabsProps> = ({
                  }
                }}
              >
-                {/* Active tab top accent line */}
-                {activeTabId === session.id && (
-                  <div
-                    className="absolute top-0 left-0 right-0 h-[2px]"
-                    style={{ backgroundColor: 'var(--top-tabs-accent, hsl(var(--accent)))' }}
-                  />
-                )}
                {/* Drop indicator line - before */}
                {showDropIndicatorBefore && isDraggingForReorder && (
                  <div
@@ -657,7 +650,7 @@ const TopTabsInner: React.FC<TopTabsProps> = ({
                onDragLeave={handleTabDragLeave}
                onDrop={(e) => handleTabDrop(e, workspace.id)}
                className={cn(
-                  "netcatty-tab relative h-7 pl-3 pr-2 min-w-[150px] max-w-[260px] rounded-none text-xs font-semibold cursor-pointer flex items-center justify-between gap-2 app-no-drag flex-shrink-0",
+                  "netcatty-tab relative h-7 pl-3 pr-2 min-w-[150px] max-w-[260px] rounded-t-md overflow-hidden text-xs font-semibold cursor-pointer flex items-center justify-between gap-2 app-no-drag flex-shrink-0",
                  "transition-transform duration-150",
                  isBeingDragged && isDraggingForReorder ? "opacity-40 scale-95" : ""
                )}
@@ -683,13 +676,6 @@ const TopTabsInner: React.FC<TopTabsProps> = ({
                  }
                }}
              >
-                {/* Active tab top accent line */}
-                {isActive && (
-                  <div
-                    className="absolute top-0 left-0 right-0 h-[2px]"
-                    style={{ backgroundColor: 'var(--top-tabs-accent, hsl(var(--accent)))' }}
-                  />
-                )}
                {/* Drop indicator line - before */}
                {showDropIndicatorBefore && isDraggingForReorder && (
                  <div
@@ -752,7 +738,7 @@ const TopTabsInner: React.FC<TopTabsProps> = ({
            data-state={isActive ? 'active' : 'inactive'}
            onClick={() => onSelectTab(logView.id)}
            className={cn(
-              "netcatty-tab relative h-7 pl-3 pr-2 min-w-[140px] max-w-[240px] rounded-none text-xs font-semibold cursor-pointer flex items-center justify-between gap-2 app-no-drag flex-shrink-0",
+              "netcatty-tab relative h-7 pl-3 pr-2 min-w-[140px] max-w-[240px] rounded-t-md overflow-hidden text-xs font-semibold cursor-pointer flex items-center justify-between gap-2 app-no-drag flex-shrink-0",
            )}
            style={{
              backgroundColor: isActive
@@ -775,13 +761,6 @@ const TopTabsInner: React.FC<TopTabsProps> = ({
              }
            }}
          >
-            {/* Active tab top accent line */}
-            {isActive && (
-              <div
-                className="absolute top-0 left-0 right-0 h-[2px]"
-                style={{ backgroundColor: 'var(--top-tabs-fg, hsl(var(--foreground)))' }}
-              />
-            )}
            <div className="flex items-center gap-2 min-w-0 flex-1">
              <FileText
                size={14}
@@ -877,7 +856,7 @@ const TopTabsInner: React.FC<TopTabsProps> = ({
              data-state={isSftpActive ? 'active' : 'inactive'}
              onClick={() => onSelectTab('sftp')}
              className={cn(
-                "netcatty-tab relative h-7 px-3 rounded-none text-xs font-semibold cursor-pointer flex items-center gap-2 app-no-drag",
+                "netcatty-tab relative h-7 px-3 rounded-t-md overflow-hidden text-xs font-semibold cursor-pointer flex items-center gap-2 app-no-drag",
              )}
              style={{
                backgroundColor: isSftpActive
@@ -900,12 +879,6 @@ const TopTabsInner: React.FC<TopTabsProps> = ({
                }
              }}
            >
-              {isSftpActive && (
-                <div
-                  className="absolute top-0 left-0 right-0 h-[2px]"
-                  style={{ backgroundColor: 'var(--top-tabs-accent, hsl(var(--accent)))' }}
-                />
-              )}
              <Folder size={14} /> SFTP
            </div>
          )}
--- a/components/VaultView.tsx
+++ b/components/VaultView.tsx
@@ -76,6 +76,7 @@ import SerialHostDetailsPanel from "./SerialHostDetailsPanel";
 import SnippetsManager from "./SnippetsManager";
 import { ImportVaultDialog, ImportOptions } from "./vault/ImportVaultDialog";
 import { Button } from "./ui/button";
+import { RippleButton } from "./ui/ripple";
 import {
  ContextMenu,
  ContextMenuContent,
@@ -867,23 +868,30 @@ const VaultViewInner: React.FC<VaultViewProps> = ({

  const displayedHosts = useMemo(() => {
    let filtered = hosts;
-    if (selectedGroupPath) {
-      // Match hosts whose group equals the selected path
-      // For "General" group, also match hosts with empty/undefined group
-      filtered = filtered.filter((h) => {
-        const hostGroup = h.group || "";
-        if (selectedGroupPath === "General") {
-          return hostGroup === "" || hostGroup === "General";
-        }
-        return hostGroup === selectedGroupPath;
-      });
-    } else if (showOnlyUngroupedHostsInRoot) {
-      filtered = filtered.filter((h) => {
-        const hostGroup = (h.group || "").trim();
-        return hostGroup === "";
-      });
+    // Search spans all groups (#777): when the user types in the search box
+    // we skip group/ungrouped-root scoping, so a matching host in another
+    // group is still reachable without having to navigate into it first.
+    // The tree view already uses this shape — see `treeViewHosts` below.
+    const hasSearch = search.trim().length > 0;
+    if (!hasSearch) {
+      if (selectedGroupPath) {
+        // Match hosts whose group equals the selected path
+        // For "General" group, also match hosts with empty/undefined group
+        filtered = filtered.filter((h) => {
+          const hostGroup = h.group || "";
+          if (selectedGroupPath === "General") {
+            return hostGroup === "" || hostGroup === "General";
+          }
+          return hostGroup === selectedGroupPath;
+        });
+      } else if (showOnlyUngroupedHostsInRoot) {
+        filtered = filtered.filter((h) => {
+          const hostGroup = (h.group || "").trim();
+          return hostGroup === "";
+        });
+      }
    }
-    if (search.trim()) {
+    if (hasSearch) {
      const s = search.toLowerCase();
      filtered = filtered.filter(
        (h) =>
@@ -1590,24 +1598,26 @@ const VaultViewInner: React.FC<VaultViewProps> = ({
      <TooltipProvider delayDuration={100}>
        <div
          className={cn(
-            "bg-secondary/80 border-r border-border/60 flex flex-col transition-all duration-200",
+            "bg-secondary border-r border-border/60 flex flex-col transition-all duration-200",
            sidebarCollapsed ? "w-14" : "w-52"
          )}
          data-section="vault-sidebar"
        >
          <div className={cn(
-            "py-4 flex items-center",
+            "pt-5 pb-6 flex items-center",
            sidebarCollapsed ? "px-2 justify-center" : "px-4"
          )}>
            <Tooltip delayDuration={500}>
              <TooltipTrigger asChild>
                <button
                  onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
-                  className="flex items-center gap-3 hover:opacity-80 transition-opacity"
+                  className="flex items-center gap-2.5 hover:opacity-80 transition-opacity"
                >
-                  <AppLogo className="h-10 w-10 rounded-xl flex-shrink-0" />
+                  <AppLogo className="h-8 w-8 flex-shrink-0" />
                  {!sidebarCollapsed && (
-                    <p className="text-sm font-bold text-foreground">Netcatty</p>
+                    <p className="text-xl font-black italic tracking-tight text-foreground leading-none">
+                      Netcatty
+                    </p>
                  )}
                </button>
              </TooltipTrigger>
@@ -1620,7 +1630,7 @@ const VaultViewInner: React.FC<VaultViewProps> = ({
          <div className={cn("space-y-1", sidebarCollapsed ? "px-1.5" : "px-3")}>
            <Tooltip>
              <TooltipTrigger asChild>
-                <Button
+                <RippleButton
                  variant={currentSection === "hosts" ? "secondary" : "ghost"}
                  className={cn(
                    "w-full h-10",
@@ -1635,13 +1645,13 @@ const VaultViewInner: React.FC<VaultViewProps> = ({
                >
                  <LayoutGrid size={16} className="flex-shrink-0" />
                  {!sidebarCollapsed && t("vault.nav.hosts")}
-                </Button>
+                </RippleButton>
              </TooltipTrigger>
              {sidebarCollapsed && <TooltipContent side="right">{t("vault.nav.hosts")}</TooltipContent>}
            </Tooltip>
            <Tooltip>
              <TooltipTrigger asChild>
-                <Button
+                <RippleButton
                  variant={currentSection === "keys" ? "secondary" : "ghost"}
                  className={cn(
                    "w-full h-10",
@@ -1655,13 +1665,13 @@ const VaultViewInner: React.FC<VaultViewProps> = ({
                >
                  <Key size={16} className="flex-shrink-0" />
                  {!sidebarCollapsed && t("vault.nav.keychain")}
-                </Button>
+                </RippleButton>
              </TooltipTrigger>
              {sidebarCollapsed && <TooltipContent side="right">{t("vault.nav.keychain")}</TooltipContent>}
            </Tooltip>
            <Tooltip>
              <TooltipTrigger asChild>
-                <Button
+                <RippleButton
                  variant={currentSection === "port" ? "secondary" : "ghost"}
                  className={cn(
                    "w-full h-10",
@@ -1673,13 +1683,13 @@ const VaultViewInner: React.FC<VaultViewProps> = ({
                >
                  <Plug size={16} className="flex-shrink-0" />
                  {!sidebarCollapsed && t("vault.nav.portForwarding")}
-                </Button>
+                </RippleButton>
              </TooltipTrigger>
              {sidebarCollapsed && <TooltipContent side="right">{t("vault.nav.portForwarding")}</TooltipContent>}
            </Tooltip>
            <Tooltip>
              <TooltipTrigger asChild>
-                <Button
+                <RippleButton
                  variant={currentSection === "snippets" ? "secondary" : "ghost"}
                  className={cn(
                    "w-full h-10",
@@ -1693,13 +1703,13 @@ const VaultViewInner: React.FC<VaultViewProps> = ({
                >
                  <FileCode size={16} className="flex-shrink-0" />
                  {!sidebarCollapsed && t("vault.nav.snippets")}
-                </Button>
+                </RippleButton>
              </TooltipTrigger>
              {sidebarCollapsed && <TooltipContent side="right">{t("vault.nav.snippets")}</TooltipContent>}
            </Tooltip>
            <Tooltip>
              <TooltipTrigger asChild>
-                <Button
+                <RippleButton
                  variant={currentSection === "knownhosts" ? "secondary" : "ghost"}
                  className={cn(
                    "w-full h-10",
@@ -1711,13 +1721,13 @@ const VaultViewInner: React.FC<VaultViewProps> = ({
                >
                  <BookMarked size={16} className="flex-shrink-0" />
                  {!sidebarCollapsed && t("vault.nav.knownHosts")}
-                </Button>
+                </RippleButton>
              </TooltipTrigger>
              {sidebarCollapsed && <TooltipContent side="right">{t("vault.nav.knownHosts")}</TooltipContent>}
            </Tooltip>
            <Tooltip>
              <TooltipTrigger asChild>
-                <Button
+                <RippleButton
                  variant={currentSection === "logs" ? "secondary" : "ghost"}
                  className={cn(
                    "w-full h-10",
@@ -1729,7 +1739,7 @@ const VaultViewInner: React.FC<VaultViewProps> = ({
                >
                  <Activity size={16} className="flex-shrink-0" />
                  {!sidebarCollapsed && t("vault.nav.logs")}
-                </Button>
+                </RippleButton>
              </TooltipTrigger>
              {sidebarCollapsed && <TooltipContent side="right">{t("vault.nav.logs")}</TooltipContent>}
            </Tooltip>
@@ -1967,6 +1977,52 @@ const VaultViewInner: React.FC<VaultViewProps> = ({
          </div>
        </header>

+        {isMultiSelectMode && isHostsSectionActive && (
+          <div className="px-4 py-1.5 bg-background border-b border-border/40 flex items-center gap-2">
+            <span className="flex items-center h-7 text-xs text-muted-foreground leading-none">
+              {t("vault.hosts.selected", { count: selectedHostIds.size })}
+            </span>
+            <div className="flex-1" />
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-7 px-2 text-xs"
+              onClick={() => {
+                const allIds = new Set(displayedHosts.map(h => h.id));
+                setSelectedHostIds(allIds);
+              }}
+            >
+              {t("vault.hosts.selectAll")}
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-7 px-2 text-xs"
+              onClick={clearHostSelection}
+            >
+              {t("vault.hosts.deselectAll")}
+            </Button>
+            <Button
+              variant="destructive"
+              size="sm"
+              className="h-7 px-2 text-xs"
+              disabled={selectedHostIds.size === 0}
+              onClick={deleteSelectedHosts}
+            >
+              <Trash2 size={12} className="mr-1" />
+              {t("vault.hosts.deleteSelected", { count: selectedHostIds.size })}
+            </Button>
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-7 w-7"
+              onClick={clearHostSelection}
+            >
+              <X size={12} />
+            </Button>
+          </div>
+        )}
+
        {/* Keep hosts mounted so switching sections does not reset scroll or remount the list. */}
        <div
          className={cn(
@@ -2401,49 +2457,6 @@ const VaultViewInner: React.FC<VaultViewProps> = ({
                    </div>
                  </div>

-                  {isMultiSelectMode && (
-                    <div className="flex items-center gap-2 p-2 bg-secondary/60 rounded-lg border border-border/40">
-                      <span className="text-sm text-muted-foreground">
-                        {t("vault.hosts.selected", { count: selectedHostIds.size })}
-                      </span>
-                      <div className="flex-1" />
-                      <Button
-                        variant="ghost"
-                        size="sm"
-                        onClick={() => {
-                          const allIds = new Set(displayedHosts.map(h => h.id));
-                          setSelectedHostIds(allIds);
-                        }}
-                      >
-                        {t("vault.hosts.selectAll")}
-                      </Button>
-                      <Button
-                        variant="ghost"
-                        size="sm"
-                        onClick={clearHostSelection}
-                      >
-                        {t("vault.hosts.deselectAll")}
-                      </Button>
-                      <Button
-                        variant="destructive"
-                        size="sm"
-                        disabled={selectedHostIds.size === 0}
-                        onClick={deleteSelectedHosts}
-                      >
-                        <Trash2 size={14} className="mr-1" />
-                        {t("vault.hosts.deleteSelected", { count: selectedHostIds.size })}
-                      </Button>
-                      <Button
-                        variant="ghost"
-                        size="icon"
-                        className="h-8 w-8"
-                        onClick={clearHostSelection}
-                      >
-                        <X size={14} />
-                      </Button>
-                    </div>
-                  )}
-
                  {viewMode === "tree" ? (
                    <HostTreeView
                      groupTree={treeViewGroupTree}
--- a/components/settings/tabs/SettingsShortcutsTab.tsx
+++ b/components/settings/tabs/SettingsShortcutsTab.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useState } from "react";
-import { RotateCcw } from "lucide-react";
+import { Ban, RotateCcw } from "lucide-react";
 import type { HotkeyScheme, KeyBinding } from "../../../domain/models";
 import { keyEventToString } from "../../../domain/models";
 import { useI18n } from "../../../application/i18n/I18nProvider";
@@ -221,7 +221,18 @@ export default function SettingsShortcutsTab(props: {
                            >
                              {isRecordingThis
                                ? t("settings.shortcuts.recording")
-                                : currentKey || t("settings.shortcuts.scheme.disabled")}
+                                : currentKey === "Disabled"
+                                  ? t("settings.shortcuts.scheme.disabled")
+                                  : currentKey || t("settings.shortcuts.scheme.disabled")}
+                            </button>
+                          )}
+                          {!isSpecialBinding && (
+                            <button
+                              onClick={() => updateKeyBinding?.(binding.id, scheme, "Disabled")}
+                              className="p-1 hover:bg-muted rounded"
+                              title={t("settings.shortcuts.setDisabled")}
+                            >
+                              <Ban size={12} />
                            </button>
                          )}
                          <button
--- a/components/terminal/TerminalComposeBar.tsx
+++ b/components/terminal/TerminalComposeBar.tsx
@@ -1,9 +1,11 @@
 /**
 * Terminal Compose Bar
- * A modern text input bar for composing commands before sending them.
- * Supports pre-reviewing passwords/commands and broadcasting to multiple sessions.
+ * An immersive, borderless prompt bar that blends into the terminal's
+ * background — like the Claude Code compose area. Enter sends, Escape
+ * closes, Shift+Enter inserts a newline. The only visible chrome is a
+ * hair-line top border separating it from the terminal output.
 */
-import { Radio, Send, X } from 'lucide-react';
+import { Radio, X } from 'lucide-react';
 import React, { useCallback, useEffect, useRef } from 'react';
 import { useI18n } from '../../application/i18n/I18nProvider';
 import { cn } from '../../lib/utils';
@@ -73,10 +75,9 @@ export const TerminalComposeBar: React.FC<TerminalComposeBarProps> = ({
        <div
            className="flex-shrink-0"
            style={{
-                background: `linear-gradient(to top, ${resolvedBg}, color-mix(in srgb, ${resolvedFg} 4%, ${resolvedBg} 96%))`,
-                borderTop: `1px solid color-mix(in srgb, ${resolvedFg} 10%, ${resolvedBg} 90%)`,
-                borderRadius: '0 0 8px 8px',
-                padding: '6px 10px',
+                backgroundColor: resolvedBg,
+                borderTop: `1px solid color-mix(in srgb, ${resolvedFg} 8%, ${resolvedBg} 92%)`,
+                padding: '8px 12px',
            }}
        >
            <div className="flex items-center gap-2">
@@ -90,77 +91,48 @@ export const TerminalComposeBar: React.FC<TerminalComposeBarProps> = ({
                    </div>
                )}

-                {/* Input field */}
+                {/* Borderless input — lives flush on the terminal bg so the
+                    bar feels like part of the terminal rather than a panel. */}
                <textarea
                    ref={textareaRef}
                    className={cn(
-                        "flex-1 min-w-0 resize-none rounded-md px-3 py-1.5 text-xs font-mono leading-relaxed",
-                        "outline-none transition-all duration-200",
-                        "placeholder:opacity-40",
+                        "flex-1 min-w-0 resize-none bg-transparent border-none px-0 py-0",
+                        "text-xs font-mono leading-relaxed outline-none",
+                        "placeholder:opacity-70",
                    )}
                    style={{
-                        backgroundColor: `color-mix(in srgb, ${resolvedFg} 6%, ${resolvedBg} 94%)`,
                        color: resolvedFg,
-                        border: `1px solid color-mix(in srgb, ${resolvedFg} 25%, ${resolvedBg} 75%)`,
-                        minHeight: '28px',
+                        minHeight: '20px',
                        maxHeight: '120px',
-                        boxShadow: `inset 0 1px 3px color-mix(in srgb, ${resolvedBg} 80%, transparent)`,
                    }}
                    rows={1}
                    placeholder={t("terminal.composeBar.placeholder")}
                    onInput={handleInput}
                    onKeyDown={handleKeyDown}
-                    onFocus={(e) => {
-                        e.currentTarget.style.borderColor = `color-mix(in srgb, ${resolvedFg} 40%, ${resolvedBg} 60%)`;
-                        e.currentTarget.style.boxShadow = `inset 0 1px 3px color-mix(in srgb, ${resolvedBg} 80%, transparent), 0 0 0 1px color-mix(in srgb, ${resolvedFg} 8%, transparent)`;
-                    }}
-                    onBlur={(e) => {
-                        e.currentTarget.style.borderColor = `color-mix(in srgb, ${resolvedFg} 25%, ${resolvedBg} 75%)`;
-                        e.currentTarget.style.boxShadow = `inset 0 1px 3px color-mix(in srgb, ${resolvedBg} 80%, transparent)`;
-                    }}
                    onCompositionStart={() => { isComposingRef.current = true; }}
                    onCompositionEnd={() => { isComposingRef.current = false; }}
                />

-                {/* Action buttons */}
-                <div className="flex items-center gap-0.5">
-                    <button
-                        className="h-7 w-7 flex items-center justify-center rounded-md transition-colors duration-150"
-                        style={{
-                            color: resolvedFg,
-                            background: `color-mix(in srgb, ${resolvedFg} 20%, ${resolvedBg} 80%)`,
-                        }}
-                        onMouseEnter={(e) => {
-                            e.currentTarget.style.background = `color-mix(in srgb, ${resolvedFg} 30%, ${resolvedBg} 70%)`;
-                        }}
-                        onMouseLeave={(e) => {
-                            e.currentTarget.style.background = `color-mix(in srgb, ${resolvedFg} 20%, ${resolvedBg} 80%)`;
-                        }}
-                        onClick={handleSend}
-                        title={t("terminal.composeBar.send")}
-                    >
-                        <Send size={13} />
-                    </button>
-                    <button
-                        className="h-7 w-7 flex items-center justify-center rounded-md transition-colors duration-150"
-                        style={{
-                            color: `color-mix(in srgb, ${resolvedFg} 60%, ${resolvedBg} 40%)`,
-                            background: `color-mix(in srgb, ${resolvedFg} 12%, ${resolvedBg} 88%)`,
-                        }}
-                        onMouseEnter={(e) => {
-                            e.currentTarget.style.background = `color-mix(in srgb, ${resolvedFg} 22%, ${resolvedBg} 78%)`;
-                            e.currentTarget.style.color = resolvedFg;
-                        }}
-                        onMouseLeave={(e) => {
-                            e.currentTarget.style.background = `color-mix(in srgb, ${resolvedFg} 12%, ${resolvedBg} 88%)`;
-                            e.currentTarget.style.color = `color-mix(in srgb, ${resolvedFg} 60%, ${resolvedBg} 40%)`;
-                        }}
-                        onClick={onClose}
-                        title={t("terminal.composeBar.close")}
-                    >
-                        <X size={13} />
-                    </button>
-                </div>
+                {/* Minimal close button — no filled bg, hover only. */}
+                <button
+                    className="h-6 w-6 flex items-center justify-center rounded-md transition-colors duration-150 flex-shrink-0"
+                    style={{
+                        color: `color-mix(in srgb, ${resolvedFg} 50%, ${resolvedBg} 50%)`,
+                        background: 'transparent',
+                    }}
+                    onMouseEnter={(e) => {
+                        e.currentTarget.style.background = `color-mix(in srgb, ${resolvedFg} 10%, ${resolvedBg} 90%)`;
+                        e.currentTarget.style.color = resolvedFg;
+                    }}
+                    onMouseLeave={(e) => {
+                        e.currentTarget.style.background = 'transparent';
+                        e.currentTarget.style.color = `color-mix(in srgb, ${resolvedFg} 50%, ${resolvedBg} 50%)`;
+                    }}
+                    onClick={onClose}
+                    title={t("terminal.composeBar.close")}
+                >
+                    <X size={12} />
+                </button>
            </div>
        </div>
    );
--- a/components/terminal/TerminalToolbar.tsx
+++ b/components/terminal/TerminalToolbar.tsx
@@ -2,7 +2,7 @@
 * Terminal Toolbar
 * Displays SFTP, Scripts, Theme, Highlight, Search buttons and close button in terminal status bar
 */
-import { Check, FolderInput, Languages, X, Zap, Palette, Search, TextCursorInput } from 'lucide-react';
+import { Check, FolderInput, Languages, MoreVertical, X, Zap, Palette, Search, TextCursorInput } from 'lucide-react';
 import React, { useState } from 'react';
 import { useI18n } from '../../application/i18n/I18nProvider';
 import { Host } from '../../types';
@@ -57,100 +57,10 @@ export const TerminalToolbar: React.FC<TerminalToolbarProps> = ({
    const isSSHSession = !isLocalTerminal && !isSerialTerminal && host?.protocol !== 'telnet' && host?.protocol !== 'mosh' && !host?.moshEnabled && host?.hostname !== 'localhost';
    const hidesSftp = isLocalTerminal || isSerialTerminal;

+    const menuItemClass = "w-full flex items-center gap-2 px-2 py-1.5 text-xs rounded-sm hover:bg-secondary transition-colors";
+
    return (
        <TooltipProvider delayDuration={500} skipDelayDuration={100} disableHoverableContent>
-            {!hidesSftp && (
-                <Tooltip>
-                    <TooltipTrigger asChild>
-                        <Button
-                            variant="secondary"
-                            size="icon"
-                            className={buttonBase}
-                            disabled={status !== 'connected'}
-                            aria-label={t("terminal.toolbar.openSftp")}
-                            onClick={onOpenSFTP}
-                        >
-                            <FolderInput size={12} />
-                        </Button>
-                    </TooltipTrigger>
-                    <TooltipContent>
-                        {status === 'connected' ? t("terminal.toolbar.openSftp") : t("terminal.toolbar.availableAfterConnect")}
-                    </TooltipContent>
-                </Tooltip>
-            )}
-
-            {isSSHSession && onSetTerminalEncoding && (
-                <Popover>
-                    <Tooltip>
-                        <TooltipTrigger asChild>
-                            <PopoverTrigger asChild>
-                                <Button
-                                    variant="secondary"
-                                    size="icon"
-                                    className={buttonBase}
-                                    aria-label={t("terminal.toolbar.encoding")}
-                                >
-                                    <Languages size={12} />
-                                </Button>
-                            </PopoverTrigger>
-                        </TooltipTrigger>
-                        <TooltipContent>{t("terminal.toolbar.encoding")}</TooltipContent>
-                    </Tooltip>
-                    <PopoverContent className="w-36 p-1" align="start">
-                        {(["utf-8", "gb18030"] as const).map((enc) => (
-                            <PopoverClose asChild key={enc}>
-                                <button
-                                    className={cn(
-                                        "w-full flex items-center gap-2 px-2 py-1.5 text-xs rounded-sm hover:bg-secondary transition-colors",
-                                        terminalEncoding === enc && "font-medium"
-                                    )}
-                                    onClick={() => onSetTerminalEncoding(enc)}
-                                >
-                                    <Check
-                                        size={12}
-                                        className={cn(
-                                            "shrink-0",
-                                            terminalEncoding === enc ? "opacity-100" : "opacity-0"
-                                        )}
-                                    />
-                                    {t(`terminal.toolbar.encoding.${enc === "utf-8" ? "utf8" : enc}`)}
-                                </button>
-                            </PopoverClose>
-                        ))}
-                    </PopoverContent>
-                </Popover>
-            )}
-
-            <Tooltip>
-                <TooltipTrigger asChild>
-                    <Button
-                        variant="secondary"
-                        size="icon"
-                        className={buttonBase}
-                        aria-label={t("terminal.toolbar.scripts")}
-                        onClick={onOpenScripts}
-                    >
-                        <Zap size={12} />
-                    </Button>
-                </TooltipTrigger>
-                <TooltipContent>{t("terminal.toolbar.scripts")}</TooltipContent>
-            </Tooltip>
-
-            <Tooltip>
-                <TooltipTrigger asChild>
-                    <Button
-                        variant="secondary"
-                        size="icon"
-                        className={buttonBase}
-                        aria-label={t("terminal.toolbar.terminalSettings")}
-                        onClick={onOpenTheme}
-                    >
-                        <Palette size={12} />
-                    </Button>
-                </TooltipTrigger>
-                <TooltipContent>{t("terminal.toolbar.terminalSettings")}</TooltipContent>
-            </Tooltip>
-
            <HostKeywordHighlightPopover
                host={host}
                onUpdateHost={onUpdateHost}
@@ -191,6 +101,85 @@ export const TerminalToolbar: React.FC<TerminalToolbarProps> = ({
                <TooltipContent>{t("terminal.toolbar.searchTerminal")}</TooltipContent>
            </Tooltip>

+            {/* Overflow menu — collapses the four opener-style actions
+                (SFTP / Encoding / Scripts / Terminal Settings) behind a
+                single ⋮ trigger so the toolbar doesn't feel crowded.
+                Highlight / Compose / Search stay visible because they
+                are toggled mid-session, not just once. */}
+            <Popover>
+                <Tooltip>
+                    <TooltipTrigger asChild>
+                        <PopoverTrigger asChild>
+                            <Button
+                                variant="secondary"
+                                size="icon"
+                                className={buttonBase}
+                                aria-label={t("terminal.toolbar.more")}
+                            >
+                                <MoreVertical size={14} />
+                            </Button>
+                        </PopoverTrigger>
+                    </TooltipTrigger>
+                    <TooltipContent>{t("terminal.toolbar.more")}</TooltipContent>
+                </Tooltip>
+                <PopoverContent className="w-48 p-1" align="end">
+                    {!hidesSftp && (
+                        <PopoverClose asChild>
+                            <button
+                                type="button"
+                                className={cn(menuItemClass, status !== 'connected' && "opacity-50 pointer-events-none")}
+                                onClick={onOpenSFTP}
+                                disabled={status !== 'connected'}
+                            >
+                                <FolderInput size={12} className="shrink-0" />
+                                <span className="flex-1 text-left truncate">
+                                    {status === 'connected' ? t("terminal.toolbar.openSftp") : t("terminal.toolbar.availableAfterConnect")}
+                                </span>
+                            </button>
+                        </PopoverClose>
+                    )}
+                    <PopoverClose asChild>
+                        <button type="button" className={menuItemClass} onClick={onOpenScripts}>
+                            <Zap size={12} className="shrink-0" />
+                            <span className="flex-1 text-left truncate">{t("terminal.toolbar.scripts")}</span>
+                        </button>
+                    </PopoverClose>
+                    <PopoverClose asChild>
+                        <button type="button" className={menuItemClass} onClick={onOpenTheme}>
+                            <Palette size={12} className="shrink-0" />
+                            <span className="flex-1 text-left truncate">{t("terminal.toolbar.terminalSettings")}</span>
+                        </button>
+                    </PopoverClose>
+                    {isSSHSession && onSetTerminalEncoding && (
+                        <>
+                            <div className="h-px bg-border/60 my-1 mx-1" />
+                            <div className="px-2 py-1 text-[10px] font-medium uppercase tracking-wide text-muted-foreground flex items-center gap-1.5">
+                                <Languages size={11} />
+                                {t("terminal.toolbar.encoding")}
+                            </div>
+                            {(["utf-8", "gb18030"] as const).map((enc) => (
+                                <PopoverClose asChild key={enc}>
+                                    <button
+                                        type="button"
+                                        className={cn(menuItemClass, "pl-6", terminalEncoding === enc && "font-medium")}
+                                        onClick={() => onSetTerminalEncoding(enc)}
+                                    >
+                                        <Check
+                                            size={12}
+                                            className={cn(
+                                                "shrink-0",
+                                                terminalEncoding === enc ? "opacity-100" : "opacity-0",
+                                            )}
+                                        />
+                                        {t(`terminal.toolbar.encoding.${enc === "utf-8" ? "utf8" : enc}`)}
+                                    </button>
+                                </PopoverClose>
+                            ))}
+                        </>
+                    )}
+                </PopoverContent>
+            </Popover>
+
            {showClose && onClose && (
                <Tooltip>
                    <TooltipTrigger asChild>
--- a/components/ui/ripple.tsx
+++ b/components/ui/ripple.tsx
@@ -0,0 +1,63 @@
+import * as React from "react";
+import { cn } from "../../lib/utils";
+import { Button, ButtonProps } from "./button";
+
+interface RippleState {
+  id: number;
+  x: number;
+  y: number;
+  size: number;
+}
+
+const RIPPLE_DURATION_MS = 600;
+
+export const RippleButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ children, className, onPointerDown, ...props }, ref) => {
+    const [ripples, setRipples] = React.useState<RippleState[]>([]);
+    const nextId = React.useRef(0);
+
+    const handlePointerDown = React.useCallback(
+      (e: React.PointerEvent<HTMLButtonElement>) => {
+        const rect = e.currentTarget.getBoundingClientRect();
+        const size = Math.max(rect.width, rect.height) * 2;
+        const x = e.clientX - rect.left - size / 2;
+        const y = e.clientY - rect.top - size / 2;
+        const id = nextId.current++;
+        setRipples((rs) => [...rs, { id, x, y, size }]);
+        window.setTimeout(
+          () => setRipples((rs) => rs.filter((r) => r.id !== id)),
+          RIPPLE_DURATION_MS,
+        );
+        onPointerDown?.(e);
+      },
+      [onPointerDown],
+    );
+
+    return (
+      <Button
+        ref={ref}
+        className={cn("relative overflow-hidden", className)}
+        onPointerDown={handlePointerDown}
+        {...props}
+      >
+        {children}
+        <span className="pointer-events-none absolute inset-0">
+          {ripples.map((r) => (
+            <span
+              key={r.id}
+              className="absolute rounded-full bg-current"
+              style={{
+                left: r.x,
+                top: r.y,
+                width: r.size,
+                height: r.size,
+                animation: `ripple ${RIPPLE_DURATION_MS}ms ease-out forwards`,
+              }}
+            />
+          ))}
+        </span>
+      </Button>
+    );
+  },
+);
+RippleButton.displayName = "RippleButton";
--- a/components/workspace/AddToWorkspaceDialog.tsx
+++ b/components/workspace/AddToWorkspaceDialog.tsx
@@ -0,0 +1,276 @@
+/**
+ * AddToWorkspaceDialog — lightweight multi-select picker for appending
+ * new panes into the active workspace. Visually matches QuickSwitcher
+ * (fixed top overlay, same header / row chrome) but with checkmarks on
+ * the right and a thin footer to commit the selection.
+ */
+import { Check, Search, Terminal } from 'lucide-react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { Host } from '../../types';
+import { DistroAvatar } from '../DistroAvatar';
+import { Button } from '../ui/button';
+import { Input } from '../ui/input';
+import { ScrollArea } from '../ui/scroll-area';
+
+export type AddTarget =
+  | { kind: 'local' }
+  | { kind: 'host'; host: Host };
+
+interface AddToWorkspaceDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  hosts: Host[];
+  workspaceTitle?: string;
+  onAdd: (targets: AddTarget[]) => void;
+}
+
+const LOCAL_ITEM_ID = '__local-terminal__';
+
+type Item =
+  | { type: 'local'; id: typeof LOCAL_ITEM_ID }
+  | { type: 'host'; id: string; host: Host };
+
+export const AddToWorkspaceDialog: React.FC<AddToWorkspaceDialogProps> = ({
+  open,
+  onOpenChange,
+  hosts,
+  workspaceTitle,
+  onAdd,
+}) => {
+  const [query, setQuery] = useState('');
+  const [selected, setSelected] = useState<Set<string>>(new Set());
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  // Reset on open + auto-focus the search input.
+  useEffect(() => {
+    if (!open) return;
+    setQuery('');
+    setSelected(new Set());
+    setSelectedIndex(0);
+    const timer = window.setTimeout(() => inputRef.current?.focus(), 40);
+    return () => window.clearTimeout(timer);
+  }, [open]);
+
+  // Close on click outside.
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
+        onOpenChange(false);
+      }
+    };
+    document.addEventListener('mousedown', handler);
+    return () => document.removeEventListener('mousedown', handler);
+  }, [open, onOpenChange]);
+
+  // NOTE: no serial filter here — callers decide which subset of
+  // hosts to pass based on mode. `appendHostToWorkspace` cannot build
+  // a serial session, so append mode passes non-serial hosts only;
+  // `createWorkspaceFromTargets` handles serial explicitly, so create
+  // mode passes everything.
+  const selectableHosts = hosts;
+
+  const localMatches = useMemo(() => {
+    const term = query.trim().toLowerCase();
+    if (!term) return true;
+    return 'local terminal localhost'.includes(term);
+  }, [query]);
+
+  const filteredHosts = useMemo(() => {
+    const term = query.trim().toLowerCase();
+    if (!term) return selectableHosts;
+    return selectableHosts.filter((h) =>
+      (h.label?.toLowerCase().includes(term))
+      || (h.hostname?.toLowerCase().includes(term))
+      || (h.username?.toLowerCase().includes(term))
+      || (h.group?.toLowerCase().includes(term)),
+    );
+  }, [selectableHosts, query]);
+
+  const items = useMemo<Item[]>(() => {
+    const list: Item[] = [];
+    if (localMatches) list.push({ type: 'local', id: LOCAL_ITEM_ID });
+    for (const h of filteredHosts) list.push({ type: 'host', id: h.id, host: h });
+    return list;
+  }, [localMatches, filteredHosts]);
+
+  const toggle = (id: string) => {
+    setSelected((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id); else next.add(id);
+      return next;
+    });
+  };
+
+  const handleCommit = () => {
+    if (selected.size === 0) return;
+    const targets: AddTarget[] = [];
+    if (selected.has(LOCAL_ITEM_ID)) targets.push({ kind: 'local' });
+    for (const host of selectableHosts) {
+      if (selected.has(host.id)) targets.push({ kind: 'host', host });
+    }
+    if (targets.length === 0) return;
+    onAdd(targets);
+    onOpenChange(false);
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Escape') {
+      e.preventDefault();
+      onOpenChange(false);
+      return;
+    }
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      setSelectedIndex((i) => Math.min(i + 1, Math.max(items.length - 1, 0)));
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      setSelectedIndex((i) => Math.max(i - 1, 0));
+    } else if (e.key === ' ' || (e.key === 'Enter' && !(e.metaKey || e.ctrlKey))) {
+      if (items.length === 0) return;
+      e.preventDefault();
+      toggle(items[selectedIndex].id);
+    } else if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
+      e.preventDefault();
+      handleCommit();
+    }
+  };
+
+  if (!open) return null;
+
+  const count = selected.size;
+  const localIndex = items.findIndex((it) => it.type === 'local');
+  const firstHostIndex = items.findIndex((it) => it.type === 'host');
+
+  return (
+    <div
+      className="fixed inset-x-0 top-12 z-50 flex justify-center pt-2"
+      style={{ pointerEvents: 'none' }}
+    >
+      <div
+        ref={containerRef}
+        className="w-full max-w-2xl mx-4 bg-background border border-border rounded-xl shadow-2xl overflow-hidden max-h-[520px] flex flex-col"
+        style={{ pointerEvents: 'auto' }}
+      >
+        {/* Search header — mirrors QuickSwitcher chrome. */}
+        <div className="flex items-center gap-3 px-4 py-3 border-b border-border">
+          <Search size={16} className="text-muted-foreground" />
+          <Input
+            ref={inputRef}
+            value={query}
+            onChange={(e) => {
+              setQuery(e.target.value);
+              setSelectedIndex(0);
+            }}
+            onKeyDown={handleKeyDown}
+            placeholder="Search hosts or local shells..."
+            className="flex-1 h-8 border-0 bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 px-0 text-sm"
+          />
+          {workspaceTitle && (
+            <span className="text-[11px] text-muted-foreground truncate max-w-[180px]">
+              {workspaceTitle}
+            </span>
+          )}
+        </div>
+
+        <ScrollArea className="flex-1 h-full">
+          <div>
+            {/* Jump-to hint */}
+            <div className="px-4 py-2 flex items-center gap-2">
+              <span className="text-xs text-muted-foreground">Pick one or more</span>
+              <kbd className="text-[10px] text-muted-foreground bg-muted px-1 py-0.5 rounded">Space</kbd>
+              <span className="text-[10px] text-muted-foreground">toggle</span>
+              <kbd className="text-[10px] text-muted-foreground bg-muted px-1 py-0.5 rounded">
+                {typeof navigator !== 'undefined' && /Mac|iPhone|iPad/.test(navigator.platform) ? '⌘' : 'Ctrl'}+Enter
+              </kbd>
+              <span className="text-[10px] text-muted-foreground">add</span>
+            </div>
+
+            {/* Local Shells section */}
+            {localIndex !== -1 && (
+              <div>
+                <div className="px-4 py-1.5">
+                  <span className="text-xs font-medium text-muted-foreground">
+                    Local Shells
+                  </span>
+                </div>
+                {(() => {
+                  const idx = localIndex;
+                  const isCursor = idx === selectedIndex;
+                  const isChecked = selected.has(LOCAL_ITEM_ID);
+                  return (
+                    <div
+                      className={`flex items-center gap-3 px-4 py-2.5 cursor-pointer transition-colors ${isCursor ? 'bg-primary/15' : 'hover:bg-muted/50'}`}
+                      onClick={() => toggle(LOCAL_ITEM_ID)}
+                      onMouseEnter={() => setSelectedIndex(idx)}
+                    >
+                      <div className="h-6 w-6 rounded flex items-center justify-center text-muted-foreground">
+                        <Terminal size={16} />
+                      </div>
+                      <span className="text-sm font-medium flex-1 truncate">Local Terminal</span>
+                      {isChecked && <Check size={14} className="text-primary flex-shrink-0" />}
+                    </div>
+                  );
+                })()}
+              </div>
+            )}
+
+            {/* Hosts section */}
+            {filteredHosts.length > 0 && (
+              <div>
+                <div className="px-4 py-1.5">
+                  <span className="text-xs font-medium text-muted-foreground">Hosts</span>
+                </div>
+                {filteredHosts.map((host, i) => {
+                  const idx = firstHostIndex + i;
+                  const isCursor = idx === selectedIndex;
+                  const isChecked = selected.has(host.id);
+                  return (
+                    <div
+                      key={host.id}
+                      className={`flex items-center justify-between px-4 py-2.5 cursor-pointer transition-colors ${isCursor ? 'bg-primary/15' : 'hover:bg-muted/50'}`}
+                      onClick={() => toggle(host.id)}
+                      onMouseEnter={() => setSelectedIndex(idx)}
+                    >
+                      <div className="flex items-center gap-3 min-w-0">
+                        <DistroAvatar host={host} fallback={(host.label || host.hostname).slice(0, 2).toUpperCase()} size="sm" />
+                        <span className="text-sm font-medium truncate">{host.label || host.hostname}</span>
+                      </div>
+                      <div className="flex items-center gap-2">
+                        <div className="text-[11px] text-muted-foreground">
+                          {host.group ? `Personal / ${host.group}` : 'Personal'}
+                        </div>
+                        {isChecked && <Check size={14} className="text-primary flex-shrink-0" />}
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+            )}
+
+            {items.length === 0 && (
+              <div className="px-4 py-8 text-center text-xs text-muted-foreground">
+                No matches
+              </div>
+            )}
+          </div>
+        </ScrollArea>
+
+        {/* Slim footer to commit. Kept minimal so the layout feels like
+            QuickSwitcher's chrome with a single action strip tacked on. */}
+        <div className="flex items-center justify-end gap-2 px-3 py-2 border-t border-border">
+          <Button variant="ghost" size="sm" onClick={() => onOpenChange(false)}>
+            Cancel
+          </Button>
+          <Button size="sm" disabled={count === 0} onClick={handleCommit}>
+            {count === 0 ? 'Add' : `Add ${count}`}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AddToWorkspaceDialog;
--- a/domain/models.ts
+++ b/domain/models.ts
@@ -411,6 +411,7 @@ export const DEFAULT_KEY_BINDINGS: KeyBinding[] = [
  { id: 'port-forwarding', action: 'portForwarding', label: 'Open Port Forwarding', mac: '⌘ + P', pc: 'Ctrl + P', category: 'app' },
  { id: 'command-palette', action: 'commandPalette', label: 'Open Command Palette', mac: '⌘ + K', pc: 'Ctrl + K', category: 'app' },
  { id: 'quick-switch', action: 'quickSwitch', label: 'Quick Switch', mac: '⌘ + J', pc: 'Ctrl + J', category: 'app' },
+  { id: 'new-workspace', action: 'newWorkspace', label: 'New Workspace', mac: '⌘ + Shift + J', pc: 'Ctrl + Shift + J', category: 'app' },
  { id: 'snippets', action: 'snippets', label: 'Open Snippets', mac: '⌘ + Shift + S', pc: 'Ctrl + Shift + S', category: 'app' },
  { id: 'broadcast', action: 'broadcast', label: 'Switch the Broadcast Mode', mac: '⌘ + B', pc: 'Ctrl + B', category: 'app' },

--- a/domain/sync.ts
+++ b/domain/sync.ts
@@ -364,7 +364,16 @@ export type SyncEvent =
  | { type: 'AUTH_REQUIRED'; provider: CloudProvider }
  | { type: 'AUTH_COMPLETED'; provider: CloudProvider; account: ProviderAccount }
  | { type: 'SECURITY_STATE_CHANGED'; state: SecurityState }
-  | { type: 'SYNC_BLOCKED_CLEARED' };
+  | { type: 'SYNC_BLOCKED_CLEARED' }
+  | {
+      type: 'PROVIDERS_DIVERGED';
+      summaries: Array<{
+        provider: CloudProvider;
+        hosts: number;
+        keys: number;
+        snippets: number;
+      }>;
+    };

 // ============================================================================
 // Storage Keys
--- a/domain/syncGuards.test.ts
+++ b/domain/syncGuards.test.ts
@@ -32,11 +32,45 @@ function hosts(n: number): SyncPayload["hosts"] {
  })) as SyncPayload["hosts"];
 }

-test("null base → not suspicious (first sync / null after re-auth)", () => {
+test("null base, no remote fallback → not suspicious (nothing to compare)", () => {
  const result = detectSuspiciousShrink(payload({ hosts: hosts(1) }), null);
  assert.deepEqual(result, { suspicious: false });
 });

+test("null base + empty remote → not suspicious (genuinely empty cloud)", () => {
+  const result = detectSuspiciousShrink(payload({ hosts: hosts(5) }), null, payload());
+  assert.deepEqual(result, { suspicious: false });
+});
+
+test("null base + populated remote + empty outgoing → suspicious via remote (#779 scenario)", () => {
+  // Fresh install with no stored base; remote already holds user's keychain.
+  // Local payload is empty (degraded vault / load race) → must be blocked.
+  const remote = payload({ keys: Array.from({ length: 8 }, (_, i) => ({ id: `k${i}`, label: `k${i}`, privateKey: "x" })) as SyncPayload["keys"] });
+  const out = payload();
+  const result = detectSuspiciousShrink(out, null, remote);
+  assert.equal(result.suspicious, true);
+  if (result.suspicious) {
+    assert.equal(result.entityType, "keys");
+    assert.equal(result.viaRemote, true);
+    assert.equal(result.lost, 8);
+  }
+});
+
+test("null base + larger remote + outgoing growth → not suspicious (lost is negative)", () => {
+  const remote = payload({ hosts: hosts(3) });
+  const out = payload({ hosts: hosts(10) });
+  assert.deepEqual(detectSuspiciousShrink(out, null, remote), { suspicious: false });
+});
+
+test("base present takes precedence over remote fallback", () => {
+  // base=10, outgoing=10 → not suspicious; remote=0 should NOT trigger a
+  // via-remote warning because a real base is available.
+  const base = payload({ hosts: hosts(10) });
+  const remote = payload();
+  const out = payload({ hosts: hosts(10) });
+  assert.deepEqual(detectSuspiciousShrink(out, base, remote), { suspicious: false });
+});
+
 test("no shrink — same counts → not suspicious", () => {
  const base = payload({ hosts: hosts(5) });
  const out = payload({ hosts: hosts(5) });
--- a/domain/syncGuards.ts
+++ b/domain/syncGuards.ts
@@ -18,6 +18,8 @@ export type ShrinkFinding =
      baseCount: number;
      outgoingCount: number;
      lost: number;
+      /** True when the comparison reference was the current remote (base was null). */
+      viaRemote?: boolean;
    };

 // Keep in sync with all array-typed fields of SyncPayload. When a new
@@ -49,11 +51,21 @@ function countOf(p: SyncPayload, key: CheckedEntityType): number {
 export function detectSuspiciousShrink(
  outgoing: SyncPayload,
  base: SyncPayload | null,
+  remote?: SyncPayload | null,
 ): ShrinkFinding {
-  if (!base) return { suspicious: false };
+  // Fall back to the current remote when we have no stored base — a null base
+  // happens on first sync, after unlock key re-derivation, or when the base
+  // blob failed to decrypt. Without this fallback, a degraded/empty local
+  // payload would be admitted unconditionally and could overwrite populated
+  // remote data (#779). We only use `remote` when `base` is unavailable so
+  // legitimate resurrections (device that legitimately grew past an older
+  // remote snapshot) remain unaffected.
+  const reference = base ?? remote ?? null;
+  const viaRemote = !base && !!remote;
+  if (!reference) return { suspicious: false };

  for (const entityType of CHECKED_ENTITIES) {
-    const baseCount = countOf(base, entityType);
+    const baseCount = countOf(reference, entityType);
    const outgoingCount = countOf(outgoing, entityType);
    const lost = baseCount - outgoingCount;
    if (lost <= 0) continue;
@@ -66,6 +78,7 @@ export function detectSuspiciousShrink(
        baseCount,
        outgoingCount,
        lost,
+        ...(viaRemote ? { viaRemote: true } : {}),
      };
    }

@@ -77,6 +90,7 @@ export function detectSuspiciousShrink(
        baseCount,
        outgoingCount,
        lost,
+        ...(viaRemote ? { viaRemote: true } : {}),
      };
    }
  }
--- a/domain/workspace.ts
+++ b/domain/workspace.ts
@@ -16,24 +16,75 @@ export const pruneWorkspaceNode = (node: WorkspaceNode, targetSessionId: string)

  const nextChildren: WorkspaceNode[] = [];
  const nextSizes: number[] = [];
-  const sizeList = node.sizes && node.sizes.length === node.children.length ? node.sizes : node.children.map(() => 1);
+  const sizeList = node.sizes && node.sizes.length === node.children.length
+    ? node.sizes
+    : node.children.map(() => 1 / node.children.length);
+  let removedDirectChild = false;

  node.children.forEach((child, idx) => {
    const pruned = pruneWorkspaceNode(child, targetSessionId);
    if (pruned) {
      nextChildren.push(pruned);
-      nextSizes.push(sizeList[idx] ?? 1);
+      nextSizes.push(sizeList[idx] ?? 1 / node.children.length);
+    } else {
+      removedDirectChild = true;
    }
  });

  if (nextChildren.length === 0) return null;
  if (nextChildren.length === 1) return nextChildren[0];

+  // Only rebalance siblings to equal sizes when this level actually
+  // lost one of its direct children. If the prune happened deeper in
+  // one branch, this split's direct children are unchanged and their
+  // original ratios must be preserved (otherwise e.g. a root 0.8/0.2
+  // split gets rewritten to 0.5/0.5 when a grand-child pane closes).
+  if (removedDirectChild) {
+    const equalSize = 1 / nextChildren.length;
+    return { ...node, children: nextChildren, sizes: nextChildren.map(() => equalSize) };
+  }
+
+  // Preserve existing ratios; normalise defensively in case sibling
+  // subtrees changed shape (e.g. a split collapsed to a single pane).
  const total = nextSizes.reduce((acc, n) => acc + n, 0) || 1;
  const normalized = nextSizes.map(n => n / total);
  return { ...node, children: nextChildren, sizes: normalized };
 };

+/**
+ * Append a new pane containing `sessionId` to the end of the workspace
+ * root's split. If the root already splits in the requested direction,
+ * the new pane becomes its last sibling and all sibling sizes are reset
+ * to equal. Otherwise the root is wrapped in a new split (same behaviour
+ * as the existing `insertPaneIntoWorkspace(root, id, { targetSessionId:
+ * undefined })` path) with two equal children.
+ */
+export const appendPaneToWorkspaceRoot = (
+  root: WorkspaceNode,
+  sessionId: string,
+  direction: SplitDirection = 'vertical',
+): WorkspaceNode => {
+  const newPane: WorkspaceNode = { id: crypto.randomUUID(), type: 'pane', sessionId };
+
+  if (root.type === 'split' && root.direction === direction) {
+    const nextChildren = [...root.children, newPane];
+    const equalSize = 1 / nextChildren.length;
+    return {
+      ...root,
+      children: nextChildren,
+      sizes: nextChildren.map(() => equalSize),
+    };
+  }
+
+  return {
+    id: crypto.randomUUID(),
+    type: 'split',
+    direction,
+    children: [root, newPane],
+    sizes: [0.5, 0.5],
+  };
+};
+
 const createSplitFromPane = (
  existingPane: WorkspaceNode,
  newPane: WorkspaceNode,
--- a/index.css
+++ b/index.css
@@ -102,6 +102,17 @@
  }
 }

+@keyframes ripple {
+  0% {
+    transform: scale(0);
+    opacity: 0.35;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 0;
+  }
+}
+
@keyframes split-panel-enter {
  0% {
    width: 0;
--- a/index.html
+++ b/index.html
@@ -131,7 +131,7 @@
    .splash-logo {
      width: 64px;
      height: 64px;
-      color: hsl(var(--primary));
+      border-radius: 14px;
    }

    .splash-spinner {
@@ -195,15 +195,8 @@
    <!-- Splash screen: shown while React loads, hidden after first paint -->
    <div id="splash" class="splash-screen">
      <div class="splash-content">
-        <svg class="splash-logo" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <rect width="48" height="48" rx="12" fill="currentColor" fill-opacity="0.1" />
-          <path
-            d="M14 16C14 14.8954 14.8954 14 16 14H32C33.1046 14 34 14.8954 34 16V32C34 33.1046 33.1046 34 32 34H16C14.8954 34 14 33.1046 14 32V16Z"
-            stroke="currentColor" stroke-width="2" />
-          <path d="M18 22L22 26L18 30" stroke="currentColor" stroke-width="2" stroke-linecap="round"
-            stroke-linejoin="round" />
-          <path d="M26 30H30" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
-        </svg>
+        <img class="splash-logo" src="/logo.svg" alt="netcatty" draggable="false" />
+
        <div class="splash-spinner"></div>
      </div>
    </div>
--- a/infrastructure/config/storageKeys.ts
+++ b/infrastructure/config/storageKeys.ts
@@ -149,6 +149,7 @@ export const STORAGE_KEY_GROUP_CONFIGS = 'netcatty_group_configs_v1';

 // Side Panel
 export const STORAGE_KEY_SIDE_PANEL_WIDTH = 'netcatty_side_panel_width';
+export const STORAGE_KEY_WORKSPACE_FOCUS_SIDEBAR_WIDTH = 'netcatty_workspace_focus_sidebar_width';

 // Port Forwarding (transient cross-window broadcast key)
 export const STORAGE_KEY_PF_RECONNECT_CANCEL = '__netcatty_pf_cancel_reconnect';
--- a/infrastructure/services/CloudSyncManager.ts
+++ b/infrastructure/services/CloudSyncManager.ts
@@ -1345,7 +1345,7 @@ export class CloudSyncManager {
          // entities we still have in base. The merge itself is correct if local
          // state is trustworthy — but a degraded local (keychain failure,
          // partial load) can make merge produce a smaller-than-expected result.
-          const mergedShrink = detectSuspiciousShrink(mergeResult.payload, base);
+          const mergedShrink = detectSuspiciousShrink(mergeResult.payload, base, remotePayload);
          const shouldBlockMerged = mergedShrink.suspicious && !overrideShrinkRequested;
          const shouldForceMerged = mergedShrink.suspicious && overrideShrinkRequested;
          if (shouldBlockMerged) {
@@ -1440,9 +1440,28 @@ export class CloudSyncManager {
      }

      // Shrink guard (no-conflict path): same rationale as the merge branch —
-      // refuse a payload that drops entities versus the stored base.
+      // refuse a payload that drops entities versus the stored base. When the
+      // stored base is absent (first sync, re-auth, or decrypt failure) fall
+      // back to the current remote payload if one exists — the guard must
+      // have *some* reference to catch a degraded local from wiping the
+      // cloud (#779).
      const directBase = await this.loadSyncBase(provider);
-      const directShrink = detectSuspiciousShrink(payload, directBase);
+      let directRemoteRef: SyncPayload | null = null;
+      if (!directBase && checkResult.remoteFile) {
+        try {
+          directRemoteRef = await EncryptionService.decryptPayload(
+            checkResult.remoteFile,
+            this.masterPassword,
+          );
+        } catch {
+          // Decrypt failure means we can't trust the remote contents as a
+          // reference; leave `null` and let the guard return not-suspicious
+          // rather than block on garbage. The upload itself will likely fail
+          // downstream if the password mismatch is real.
+          directRemoteRef = null;
+        }
+      }
+      const directShrink = detectSuspiciousShrink(payload, directBase, directRemoteRef);
      const shouldBlockDirect = directShrink.suspicious && !overrideShrinkRequested;
      const shouldForceDirect = directShrink.suspicious && overrideShrinkRequested;
      if (shouldBlockDirect) {
@@ -1808,6 +1827,18 @@ export class CloudSyncManager {
            '[CloudSyncManager] syncAll: connected providers hold divergent bases (multi-account setup?). Uploading the conflict-merged payload will replace each provider\'s current remote. See I-7 in PR #720 for context.',
            summaries,
          );
+          // Surface the same finding to the UI so multi-account / intentionally
+          // diverged configurations can be warned visibly instead of silently
+          // having one provider's data merged over another's (#779 follow-up).
+          this.emit({
+            type: 'PROVIDERS_DIVERGED',
+            summaries: summaries.map((s) => ({
+              provider: s.provider as CloudProvider,
+              hosts: s.hosts,
+              keys: s.keys,
+              snippets: s.snippets,
+            })),
+          });
        }
      } catch (diagError) {
        // Non-fatal diagnostic; never let it block the sync.
@@ -1907,7 +1938,26 @@ export class CloudSyncManager {
      .map((r) => r.provider as CloudProvider);
    for (const provider of candidateProviders) {
      const providerBase = await this.loadSyncBase(provider);
-      const finding = detectSuspiciousShrink(payload, providerBase);
+      // When no stored base exists, fall back to the remote payload fetched
+      // during the parallel check above — the shrink guard needs a reference
+      // or it fails open and lets degraded local state overwrite remote
+      // (#779). checkResults carries the per-provider remoteFile already.
+      let providerRemoteRef: SyncPayload | null = null;
+      if (!providerBase) {
+        const entry = checkResults.find((r) => r.provider === provider);
+        const remoteFile = entry?.check?.remoteFile;
+        if (remoteFile) {
+          try {
+            providerRemoteRef = await EncryptionService.decryptPayload(
+              remoteFile,
+              this.masterPassword,
+            );
+          } catch {
+            providerRemoteRef = null;
+          }
+        }
+      }
+      const finding = detectSuspiciousShrink(payload, providerBase, providerRemoteRef);
      if (finding.suspicious) {
        shrinkSuspectByProvider.push({ provider, finding });
      }
--- a/infrastructure/services/adapters/OneDriveAdapter.ts
+++ b/infrastructure/services/adapters/OneDriveAdapter.ts
@@ -309,41 +309,69 @@ export const validateToken = async (accessToken: string): Promise<boolean> => {

 const APP_FOLDER_PATH = '/drive/special/approot';

+// Eventual-consistency retry for OneDrive "not found" lookups. The Graph API
+// can briefly 404 a file that was uploaded seconds ago from another device
+// (most commonly when the other device is syncing through the OneDrive
+// desktop client and the change has not yet reached Graph). Treating every
+// 404 as authoritative "cloud is empty" lets a second device proceed to an
+// empty-cloud upload path and overwrite real data (#779). We retry a small
+// bounded number of times with short backoff to flush through that window.
+const NOT_FOUND_RETRIES = 2;
+const NOT_FOUND_BACKOFF_MS = 1500;
+
+const sleep = (ms: number): Promise<void> =>
+  new Promise((resolve) => setTimeout(resolve, ms));
+
+async function retryOnNotFound<T>(
+  fetchOnce: () => Promise<T | null>,
+): Promise<T | null> {
+  let result = await fetchOnce();
+  for (let attempt = 1; attempt <= NOT_FOUND_RETRIES && result === null; attempt++) {
+    await sleep(NOT_FOUND_BACKOFF_MS * attempt);
+    result = await fetchOnce();
+  }
+  return result;
+}
+
 /**
 * Ensure app folder exists and find sync file
 */
 export const findSyncFile = async (accessToken: string): Promise<string | null> => {
-  const bridge = netcattyBridge.get();
-  if (bridge?.onedriveFindSyncFile) {
-    const result = await bridge.onedriveFindSyncFile({
-      accessToken,
-      fileName: SYNC_CONSTANTS.SYNC_FILE_NAME,
-    });
-    return result.fileId || null;
-  }
-  try {
-    const response = await fetch(
-      `${SYNC_CONSTANTS.ONEDRIVE_GRAPH_API}/me${APP_FOLDER_PATH}:/${SYNC_CONSTANTS.SYNC_FILE_NAME}`,
-      {
-        headers: {
-          'Authorization': `Bearer ${accessToken}`,
-        },
-      }
-    );
+  const fetchOnce = async (): Promise<string | null> => {
+    const bridge = netcattyBridge.get();
+    if (bridge?.onedriveFindSyncFile) {
+      const result = await bridge.onedriveFindSyncFile({
+        accessToken,
+        fileName: SYNC_CONSTANTS.SYNC_FILE_NAME,
+      });
+      return result.fileId || null;
+    }
+    try {
+      const response = await fetch(
+        `${SYNC_CONSTANTS.ONEDRIVE_GRAPH_API}/me${APP_FOLDER_PATH}:/${SYNC_CONSTANTS.SYNC_FILE_NAME}`,
+        {
+          headers: {
+            'Authorization': `Bearer ${accessToken}`,
+          },
+        }
+      );

-    if (response.status === 404) {
+      if (response.status === 404) {
+        return null;
+      }
+
+      if (!response.ok) {
+        throw new Error('Failed to find sync file');
+      }
+
+      const item: DriveItem = await response.json();
+      return item.id;
+    } catch {
      return null;
    }
+  };

-    if (!response.ok) {
-      throw new Error('Failed to find sync file');
-    }
-
-    const item: DriveItem = await response.json();
-    return item.id;
-  } catch {
-    return null;
-  }
+  return retryOnNotFound(fetchOnce);
 };

 /**
@@ -394,39 +422,43 @@ export const downloadSyncFile = async (
  accessToken: string,
  fileId?: string
 ): Promise<SyncedFile | null> => {
-  const bridge = netcattyBridge.get();
-  if (bridge?.onedriveDownloadSyncFile) {
-    const result = await bridge.onedriveDownloadSyncFile({
-      accessToken,
-      fileId,
-      fileName: SYNC_CONSTANTS.SYNC_FILE_NAME,
-    });
-    return (result.syncedFile as SyncedFile | null) || null;
-  }
-  try {
-    // Can use either file ID or path
-    const url = fileId
-      ? `${SYNC_CONSTANTS.ONEDRIVE_GRAPH_API}/me/drive/items/${fileId}/content`
-      : `${SYNC_CONSTANTS.ONEDRIVE_GRAPH_API}/me${APP_FOLDER_PATH}:/${SYNC_CONSTANTS.SYNC_FILE_NAME}:/content`;
+  const fetchOnce = async (): Promise<SyncedFile | null> => {
+    const bridge = netcattyBridge.get();
+    if (bridge?.onedriveDownloadSyncFile) {
+      const result = await bridge.onedriveDownloadSyncFile({
+        accessToken,
+        fileId,
+        fileName: SYNC_CONSTANTS.SYNC_FILE_NAME,
+      });
+      return (result.syncedFile as SyncedFile | null) || null;
+    }
+    try {
+      // Can use either file ID or path
+      const url = fileId
+        ? `${SYNC_CONSTANTS.ONEDRIVE_GRAPH_API}/me/drive/items/${fileId}/content`
+        : `${SYNC_CONSTANTS.ONEDRIVE_GRAPH_API}/me${APP_FOLDER_PATH}:/${SYNC_CONSTANTS.SYNC_FILE_NAME}:/content`;

-    const response = await fetch(url, {
-      headers: {
-        'Authorization': `Bearer ${accessToken}`,
-      },
-    });
+      const response = await fetch(url, {
+        headers: {
+          'Authorization': `Bearer ${accessToken}`,
+        },
+      });

-    if (response.status === 404) {
+      if (response.status === 404) {
+        return null;
+      }
+
+      if (!response.ok) {
+        throw new Error('Failed to download sync file');
+      }
+
+      return response.json();
+    } catch {
      return null;
    }
+  };

-    if (!response.ok) {
-      throw new Error('Failed to download sync file');
-    }
-
-    return response.json();
-  } catch {
-    return null;
-  }
+  return retryOnNotFound(fetchOnce);
 };

 /**
--- a/public/dmg-fix-icon.png
+++ b/public/dmg-fix-icon.png
--- a/public/icon.png
+++ b/public/icon.png
--- a/public/logo.svg
+++ b/public/logo.svg
@@ -1,12 +1,50 @@
-<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56'>
-  <rect x='0' y='0' width='56' height='56' rx='12' fill='#2F7BFF'/>
-  <rect x='10' y='13' width='36' height='24' rx='4' fill='#FFFFFF' stroke='#1D4FCF' stroke-opacity='0.12'/>
-  <rect x='10' y='13' width='36' height='5' rx='4' fill='#E6EEFF'/>
-  <circle cx='14' cy='15.5' r='1' fill='#1E4FD1'/>
-  <circle cx='18' cy='15.5' r='1' fill='#1E4FD1' opacity='0.7'/>
-  <circle cx='22' cy='15.5' r='1' fill='#1E4FD1' opacity='0.5'/>
-  <path d='M16 28 L20 26 L16 24' stroke='#1E4FD1' fill='none' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/>
-  <path d='M24 30 H30' stroke='#1E4FD1' stroke-width='1.6' stroke-linecap='round'/>
-  <path d='M36 33 C40 36,42 38,42 42 C42 45,40 47,37 47' stroke='white' fill='none' stroke-width='3.2' stroke-linecap='round'/>
-  <rect x='34' y='44' width='6' height='5' rx='1' fill='white' stroke='#1E4FD1'/>
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1024" height="1024">
+  <defs>
+    <clipPath id="round">
+      <rect x="100.0" y="100.0" width="824" height="824" rx="185" ry="185" />
+    </clipPath>
+  </defs>
+
+  <g clip-path="url(#round)">
+    <rect x="100.0" y="100.0" width="824" height="824" fill="#002551" />
+    <g transform="translate(161.80 161.80) scale(0.5585)">
+      <g><path style="opacity:1" fill="#f9f9f9" d="M 618.5,240.5 C 647.925,240.677 677.258,242.344 706.5,245.5C 753.323,252.113 798.49,265.113 842,284.5C 870.064,257.538 902.23,236.704 938.5,222C 966.969,211.263 988.469,219.096 1003,245.5C 1011.08,263.079 1016.75,281.412 1020,300.5C 1022.13,320.204 1024.29,339.871 1026.5,359.5C 1026.17,379.674 1026.5,399.674 1027.5,419.5C 1072.74,473.648 1102.74,535.314 1117.5,604.5C 1117.29,607.495 1117.96,610.162 1119.5,612.5C 1126.08,656.83 1126.08,701.163 1119.5,745.5C 1118.23,747.905 1117.57,750.572 1117.5,753.5C 1107.38,802.706 1088.05,847.872 1059.5,889C 1053.04,888.572 1046.71,887.405 1040.5,885.5C 1036.79,883.864 1032.79,883.198 1028.5,883.5C 1011.79,881.938 995.122,882.271 978.5,884.5C 975.572,884.565 972.905,885.232 970.5,886.5C 928.686,895.489 896.519,918.156 874,954.5C 864.791,970.962 859.958,988.628 859.5,1007.5C 793.269,1029.39 725.269,1041.72 655.5,1044.5C 633.833,1044.5 612.167,1044.5 590.5,1044.5C 524.821,1041.8 460.821,1029.63 398.5,1008C 396.254,996.177 393.421,984.344 390,972.5C 387.524,964.881 384.024,957.881 379.5,951.5C 363.815,925.334 341.815,906.667 313.5,895.5C 297.343,888.573 280.343,884.406 262.5,883C 248.055,882.038 233.722,882.538 219.5,884.5C 216.572,884.565 213.905,885.232 211.5,886.5C 211.167,886.5 210.833,886.5 210.5,886.5C 207.848,886.41 205.515,887.076 203.5,888.5C 200.823,889.614 198.156,889.614 195.5,888.5C 149.432,819.968 128.098,744.301 131.5,661.5C 131.502,654.48 131.835,647.48 132.5,640.5C 133.461,638.735 133.795,636.735 133.5,634.5C 135.136,630.79 135.802,626.79 135.5,622.5C 137.764,609.333 140.431,596.333 143.5,583.5C 144.924,581.485 145.59,579.152 145.5,576.5C 156.228,537.714 172.395,501.381 194,467.5C 204.685,451.452 215.852,435.786 227.5,420.5C 228.042,388.62 229.375,356.62 231.5,324.5C 234.549,300.253 240.382,276.586 249,253.5C 253.868,241.906 261.035,232.073 270.5,224C 279.336,218.042 289.002,216.042 299.5,218C 314.655,220.607 328.988,225.607 342.5,233C 368.29,247.23 391.957,264.396 413.5,284.5C 478.68,255.797 547.014,241.13 618.5,240.5 Z"/></g>
+      <g><path style="opacity:1" fill="#1f2657" d="M 706.5,245.5 C 677.258,242.344 647.925,240.677 618.5,240.5C 649.662,238.284 680.995,239.784 712.5,245C 710.527,245.495 708.527,245.662 706.5,245.5 Z"/></g>
+      <g><path style="opacity:1" fill="#18214c" d="M 231.5,324.5 C 229.375,356.62 228.042,388.62 227.5,420.5C 226.104,392.965 226.604,365.298 229,337.5C 229.17,331.677 230.003,327.344 231.5,324.5 Z"/></g>
+      <g><path style="opacity:1" fill="#0c1943" d="M 1026.5,359.5 C 1027.92,371.971 1028.59,384.637 1028.5,397.5C 1028.5,405.008 1028.17,412.341 1027.5,419.5C 1026.5,399.674 1026.17,379.674 1026.5,359.5 Z"/></g>
+      <g><path style="opacity:1" fill="#505c83" d="M 817.5,544.5 C 815.162,546.04 812.495,546.706 809.5,546.5C 811.905,545.232 814.572,544.565 817.5,544.5 Z"/></g>
+      <g><path style="opacity:1" fill="#919ab0" d="M 445.5,545.5 C 448.152,545.41 450.485,546.076 452.5,547.5C 449.848,547.59 447.515,546.924 445.5,545.5 Z"/></g>
+      <g><path style="opacity:1" fill="#022551" d="M 445.5,545.5 C 447.515,546.924 449.848,547.59 452.5,547.5C 479.103,555.885 499.269,572.218 513,596.5C 515.435,607.525 511.268,614.191 500.5,616.5C 497.302,616.378 494.302,615.545 491.5,614C 485.302,604.13 477.969,595.13 469.5,587C 459.207,579.735 447.873,574.902 435.5,572.5C 415.88,568.656 398.213,573.156 382.5,586C 380.905,585.383 379.572,585.716 378.5,587C 378.957,587.414 379.291,587.914 379.5,588.5C 376.839,591.423 374.005,593.423 371,594.5C 369.606,600.126 366.772,603.96 362.5,606C 363.517,607.049 363.684,608.216 363,609.5C 355.276,616.472 347.943,616.139 341,608.5C 339.805,603.4 340.638,598.733 343.5,594.5C 344.086,594.709 344.586,595.043 345,595.5C 344.718,590.888 346.551,587.055 350.5,584C 351.515,582.627 351.515,581.46 350.5,580.5C 375.329,550.884 406.995,539.218 445.5,545.5 Z"/></g>
+      <g><path style="opacity:1" fill="#032551" d="M 817.5,544.5 C 862.791,541.392 895.958,559.726 917,599.5C 917.138,612.028 910.971,617.528 898.5,616C 897.167,615.333 895.833,614.667 894.5,614C 884.255,595.245 869.255,582.078 849.5,574.5C 843.812,571.54 837.645,570.207 831,570.5C 822.066,570.919 813.233,572.086 804.5,574C 798.217,577.721 792.05,581.554 786,585.5C 785.667,585.167 785.333,584.833 785,584.5C 782.92,587.065 781.087,589.732 779.5,592.5C 774.384,597.792 770.218,603.792 767,610.5C 759.55,618.016 751.883,618.349 744,611.5C 742.878,609.593 742.045,607.593 741.5,605.5C 741.508,602.455 741.841,599.455 742.5,596.5C 757.037,569.397 779.371,552.73 809.5,546.5C 812.495,546.706 815.162,546.04 817.5,544.5 Z"/></g>
+      <g><path style="opacity:1" fill="#0c1a4d" d="M 849.5,574.5 C 822.908,568.314 799.574,574.314 779.5,592.5C 781.087,589.732 782.92,587.065 785,584.5C 785.333,584.833 785.667,585.167 786,585.5C 792.05,581.554 798.217,577.721 804.5,574C 813.233,572.086 822.066,570.919 831,570.5C 837.645,570.207 843.812,571.54 849.5,574.5 Z"/></g>
+      <g><path style="opacity:1" fill="#98a2bf" d="M 423.5,572.5 C 419.684,573.482 415.684,574.149 411.5,574.5C 415.183,572.75 419.183,572.083 423.5,572.5 Z"/></g>
+      <g><path style="opacity:1" fill="#9ea6be" d="M 145.5,576.5 C 145.59,579.152 144.924,581.485 143.5,583.5C 143.41,580.848 144.076,578.515 145.5,576.5 Z"/></g>
+      <g><path style="opacity:1" fill="#132152" d="M 435.5,572.5 C 431.5,572.5 427.5,572.5 423.5,572.5C 419.183,572.083 415.183,572.75 411.5,574.5C 389.242,579.57 372.909,592.403 362.5,613C 356.408,617.241 350.075,617.574 343.5,614C 337.996,608.137 337.163,601.637 341,594.5C 343.929,589.631 347.096,584.965 350.5,580.5C 351.515,581.46 351.515,582.627 350.5,584C 346.551,587.055 344.718,590.888 345,595.5C 344.586,595.043 344.086,594.709 343.5,594.5C 340.638,598.733 339.805,603.4 341,608.5C 347.943,616.139 355.276,616.472 363,609.5C 363.684,608.216 363.517,607.049 362.5,606C 366.772,603.96 369.606,600.126 371,594.5C 374.005,593.423 376.839,591.423 379.5,588.5C 379.291,587.914 378.957,587.414 378.5,587C 379.572,585.716 380.905,585.383 382.5,586C 398.213,573.156 415.88,568.656 435.5,572.5 Z"/></g>
+      <g><path style="opacity:1" fill="#6c7794" d="M 742.5,596.5 C 741.841,599.455 741.508,602.455 741.5,605.5C 740.848,604.551 740.514,603.385 740.5,602C 740.393,599.779 741.06,597.946 742.5,596.5 Z"/></g>
+      <g><path style="opacity:1" fill="#6f7b97" d="M 1117.5,604.5 C 1118.77,606.905 1119.43,609.572 1119.5,612.5C 1117.96,610.162 1117.29,607.495 1117.5,604.5 Z"/></g>
+      <g><path style="opacity:1" fill="#a8aec5" d="M 135.5,622.5 C 135.802,626.79 135.136,630.79 133.5,634.5C 133.717,630.295 134.383,626.295 135.5,622.5 Z"/></g>
+      <g><path style="opacity:1" fill="#677393" d="M 653.5,662.5 C 634.473,662.218 615.473,662.551 596.5,663.5C 597.263,662.732 598.263,662.232 599.5,662C 617.671,661.171 635.671,661.338 653.5,662.5 Z"/></g>
+      <g><path style="opacity:1" fill="#032551" d="M 653.5,662.5 C 664.536,665.228 669.036,672.228 667,683.5C 665.861,687.112 664.194,690.446 662,693.5C 656.35,700.317 650.184,706.65 643.5,712.5C 643.058,737.755 654.725,754.922 678.5,764C 709.272,768.521 729.105,756.021 738,726.5C 747.413,717.842 755.746,718.842 763,729.5C 759.409,758.463 743.909,778.297 716.5,789C 713.111,789.776 709.778,790.609 706.5,791.5C 697.533,792.383 688.533,792.716 679.5,792.5C 657.328,788.994 639.828,777.994 627,759.5C 607.084,786.202 580.584,797.035 547.5,792C 516.901,784.235 497.901,765.068 490.5,734.5C 493.257,721.955 500.59,718.121 512.5,723C 517.164,727.124 519.998,732.291 521,738.5C 533.515,761.003 552.348,769.17 577.5,763C 599.78,754.048 610.947,737.548 611,713.5C 604.698,706.197 598.032,699.197 591,692.5C 586.824,686.46 585.491,679.794 587,672.5C 589.072,668.26 592.238,665.26 596.5,663.5C 615.473,662.551 634.473,662.218 653.5,662.5 Z"/></g>
+      <g><path style="opacity:1" fill="#01103f" d="M 132.5,640.5 C 131.835,647.48 131.502,654.48 131.5,661.5C 130.669,675.994 130.169,690.661 130,705.5C 128.188,682.722 128.854,660.055 132,637.5C 132.483,638.448 132.649,639.448 132.5,640.5 Z"/></g>
+      <g><path style="opacity:1" fill="#7c869d" d="M 1119.5,745.5 C 1119.71,748.495 1119.04,751.162 1117.5,753.5C 1117.57,750.572 1118.23,747.905 1119.5,745.5 Z"/></g>
+      <g><path style="opacity:1" fill="#7581a0" d="M 706.5,791.5 C 705.737,792.268 704.737,792.768 703.5,793C 695.323,793.823 687.323,793.656 679.5,792.5C 688.533,792.716 697.533,792.383 706.5,791.5 Z"/></g>
+      <g><path style="opacity:1" fill="#a7aec3" d="M 1028.5,883.5 C 1032.79,883.198 1036.79,883.864 1040.5,885.5C 1036.29,885.283 1032.29,884.617 1028.5,883.5 Z"/></g>
+      <g><path style="opacity:1" fill="#f9f9f9" d="M 233.5,904.5 C 242.833,904.5 252.167,904.5 261.5,904.5C 263.833,904.5 266.167,904.5 268.5,904.5C 304.989,908.827 334.489,925.494 357,954.5C 374.323,977.781 379.323,1003.45 372,1031.5C 365.153,1050.01 351.986,1060.85 332.5,1064C 324.173,1064.5 315.84,1064.67 307.5,1064.5C 307.947,1050.43 307.447,1036.43 306,1022.5C 296.93,1011.58 288.263,1011.91 280,1023.5C 279.833,1038.51 279.333,1053.51 278.5,1068.5C 271.841,1075.83 263.508,1080 253.5,1081C 248.845,1081.5 244.179,1081.67 239.5,1081.5C 237.485,1080.08 235.152,1079.41 232.5,1079.5C 225.481,1077.32 219.315,1073.66 214,1068.5C 213.667,1053.5 213.333,1038.5 213,1023.5C 208.464,1016.16 201.964,1013.66 193.5,1016C 190.333,1017.83 187.833,1020.33 186,1023.5C 185.5,1037.83 185.333,1052.16 185.5,1066.5C 160.376,1072.2 140.21,1064.86 125,1044.5C 120.792,1037.38 118.292,1029.71 117.5,1021.5C 117.482,1013.15 117.815,1004.82 118.5,996.5C 129.171,955.493 154.504,927.826 194.5,913.5C 200.166,912.61 205.5,910.943 210.5,908.5C 211.568,907.566 212.901,907.232 214.5,907.5C 221.111,907.453 227.444,906.453 233.5,904.5 Z"/></g>
+      <g><path style="opacity:1" fill="#f8f8f9" d="M 1133.5,985.5 C 1133.41,988.152 1134.08,990.485 1135.5,992.5C 1136.26,1002.48 1136.59,1012.48 1136.5,1022.5C 1133.68,1047.82 1119.68,1062.66 1094.5,1067C 1086.48,1067.61 1078.48,1067.44 1070.5,1066.5C 1070.67,1052.83 1070.5,1039.16 1070,1025.5C 1066.12,1016.96 1059.62,1013.79 1050.5,1016C 1047.33,1017.83 1044.83,1020.33 1043,1023.5C 1042.67,1038.17 1042.33,1052.83 1042,1067.5C 1035.97,1075.1 1028.14,1079.43 1018.5,1080.5C 1013.2,1081.27 1007.87,1081.61 1002.5,1081.5C 991.789,1080.39 982.955,1075.73 976,1067.5C 975.667,1052.83 975.333,1038.17 975,1023.5C 971.569,1017.53 966.402,1014.87 959.5,1015.5C 953.942,1016.72 950.275,1020.06 948.5,1025.5C 947.505,1037.99 947.171,1050.66 947.5,1063.5C 946.209,1063.26 945.209,1063.6 944.5,1064.5C 903.542,1067.19 882.208,1048.02 880.5,1007C 880.658,1002.81 880.991,998.641 881.5,994.5C 883.277,991.495 884.277,988.162 884.5,984.5C 894.73,953.43 914.73,930.93 944.5,917C 978.246,903.385 1012.91,900.718 1048.5,909C 1082.5,918.575 1108.67,938.409 1127,968.5C 1129.86,973.928 1132.03,979.595 1133.5,985.5 Z"/></g>
+      <g><path style="opacity:1" fill="#adb2c9" d="M 233.5,904.5 C 227.444,906.453 221.111,907.453 214.5,907.5C 220.536,905.419 226.869,904.419 233.5,904.5 Z"/></g>
+      <g><path style="opacity:1" fill="#bec4d7" d="M 210.5,908.5 C 205.5,910.943 200.166,912.61 194.5,913.5C 199.5,911.057 204.834,909.39 210.5,908.5 Z"/></g>
+      <g><path style="opacity:1" fill="#9ba0b8" d="M 884.5,984.5 C 884.277,988.162 883.277,991.495 881.5,994.5C 881.723,990.838 882.723,987.505 884.5,984.5 Z"/></g>
+      <g><path style="opacity:1" fill="#9aa5bc" d="M 1133.5,985.5 C 1134.92,987.515 1135.59,989.848 1135.5,992.5C 1134.08,990.485 1133.41,988.152 1133.5,985.5 Z"/></g>
+      <g><path style="opacity:1" fill="#adb1c6" d="M 118.5,996.5 C 117.815,1004.82 117.482,1013.15 117.5,1021.5C 116.835,1018.69 116.502,1015.69 116.5,1012.5C 116.429,1006.93 117.096,1001.6 118.5,996.5 Z"/></g>
+      <g><path style="opacity:1" fill="#c9d0dc" d="M 1135.5,992.5 C 1136.96,998.434 1137.63,1004.6 1137.5,1011C 1137.5,1015.02 1137.17,1018.85 1136.5,1022.5C 1136.59,1012.48 1136.26,1002.48 1135.5,992.5 Z"/></g>
+      <g><path style="opacity:1" fill="#b5bfcb" d="M 948.5,1025.5 C 948.5,1038.5 948.5,1051.5 948.5,1064.5C 947.167,1064.5 945.833,1064.5 944.5,1064.5C 945.209,1063.6 946.209,1063.26 947.5,1063.5C 947.171,1050.66 947.505,1037.99 948.5,1025.5 Z"/></g>
+      <g><path style="opacity:1" fill="#8193aa" d="M 232.5,1079.5 C 235.152,1079.41 237.485,1080.08 239.5,1081.5C 236.848,1081.59 234.515,1080.92 232.5,1079.5 Z"/></g>
+    </g>
+  </g>
+  <rect x="104.0" y="104.0"
+        width="816" height="816"
+        rx="181.0" ry="181.0"
+        fill="none" stroke="#ffffff" stroke-opacity="0.4"
+        stroke-width="8" />
 </svg>
--- a/public/tray-icon.png
+++ b/public/tray-icon.png
--- a/public/tray-icon@2x.png
+++ b/public/tray-icon@2x.png
--- a/public/tray-iconTemplate.png
+++ b/public/tray-iconTemplate.png
--- a/public/tray-iconTemplate@2x.png
+++ b/public/tray-iconTemplate@2x.png