feat(ui): introduce WorkspaceIndicator component for workspace management

- Added a new `WorkspaceIndicator` component to display the active workspace and connection status.
- Integrated the `WorkspaceIndicator` into the `TabbedLayout` for improved workspace switching visibility.
- Removed the previous `ContextSwitcher` from `SidebarHeader` to streamline the UI.
- Updated `ServiceContext` and `ServiceContextRegistry` for better type handling and imports.

This commit enhances the user experience by providing a dedicated workspace indicator, facilitating easier context switching.

src/main/services/infrastructure/ServiceContext.ts

@@ -13,8 +13,8 @@
 
 import { ChunkBuilder } from '@main/services/analysis/ChunkBuilder';
 import { ProjectScanner } from '@main/services/discovery/ProjectScanner';
-import { SessionParser } from '@main/services/parsing/SessionParser';
 import { SubagentResolver } from '@main/services/discovery/SubagentResolver';
+import { SessionParser } from '@main/services/parsing/SessionParser';
 import {
   CACHE_CLEANUP_INTERVAL_MINUTES,
   CACHE_TTL_MINUTES,

src/main/services/infrastructure/ServiceContextRegistry.ts

@@ -18,7 +18,7 @@
 
 import { createLogger } from '@shared/utils/logger';
 
-import { ServiceContext } from './ServiceContext';
+import { type ServiceContext } from './ServiceContext';
 
 const logger = createLogger('Infrastructure:ServiceContextRegistry');
 
@@ -161,7 +161,7 @@ export class ServiceContextRegistry {
    * Lists all registered contexts.
    * @returns Array of context metadata
    */
-  list(): Array<{ id: string; type: 'local' | 'ssh' }> {
+  list(): { id: string; type: 'local' | 'ssh' }[] {
     return Array.from(this.contexts.values()).map((context) => ({
       id: context.id,
       type: context.type,

src/renderer/components/common/WorkspaceIndicator.tsx

@@ -1,8 +1,9 @@
 /**
- * ContextSwitcher - Workspace context dropdown in SidebarHeader.
+ * WorkspaceIndicator - Floating bottom-right pill badge for workspace switching.
  *
- * Displays active context (Local or SSH host) with connection status badge.
+ * Shows active workspace (Local or SSH host) with connection status badge.
- * Dropdown lists all available contexts with click-to-switch functionality.
+ * Clicking opens an upward dropdown to switch between available workspaces.
+ * Only renders when multiple contexts are available (hidden in local-only mode).
  */
 
 import { useEffect, useRef, useState } from 'react';
@@ -13,7 +14,7 @@ import { useShallow } from 'zustand/react/shallow';
 
 import { ConnectionStatusBadge } from './ConnectionStatusBadge';
 
-export const ContextSwitcher = (): React.JSX.Element => {
+export const WorkspaceIndicator = (): React.JSX.Element | null => {
   const { activeContextId, isContextSwitching, availableContexts, switchContext } = useStore(
     useShallow((s) => ({
       activeContextId: s.activeContextId,
@@ -48,25 +49,27 @@ export const ContextSwitcher = (): React.JSX.Element => {
     return () => document.removeEventListener('keydown', handleEscape);
   }, []);
 
-  // Get display label for context
+  // Only show when multiple contexts exist
+  if (availableContexts.length <= 1) return null;
+
   const getContextLabel = (contextId: string): string => {
-    if (contextId === 'local') {
+    if (contextId === 'local') return 'Local';
-      return 'Local';
-    }
-    // Strip 'ssh-' prefix for display (e.g., 'ssh-192.168.1.10' -> '192.168.1.10')
     return contextId.startsWith('ssh-') ? contextId.slice(4) : contextId;
   };
 
   const activeLabel = getContextLabel(activeContextId);
 
   return (
-    <div ref={dropdownRef} className="relative">
+    <div ref={dropdownRef} className="fixed bottom-4 right-4 z-30">
-      {/* Trigger button */}
+      {/* Trigger pill */}
       <button
         onClick={() => !isContextSwitching && setIsOpen(!isOpen)}
         disabled={isContextSwitching}
-        className={`flex items-center gap-1.5 rounded px-2 py-1 text-xs transition-opacity hover:opacity-80 ${isContextSwitching ? 'opacity-50' : ''}`}
+        className={`flex items-center gap-2 rounded-full px-3 py-1.5 text-xs shadow-lg transition-opacity hover:opacity-90 ${isContextSwitching ? 'opacity-50' : ''}`}
-        style={{ WebkitAppRegion: 'no-drag' } as React.CSSProperties}
+        style={{
+          backgroundColor: 'var(--color-surface-raised)',
+          border: '1px solid var(--color-border-emphasis)',
+        }}
       >
         <ConnectionStatusBadge contextId={activeContextId} />
         <span
@@ -81,19 +84,19 @@ export const ContextSwitcher = (): React.JSX.Element => {
         />
       </button>
 
-      {/* Dropdown panel */}
+      {/* Upward dropdown */}
       {isOpen && !isContextSwitching && (
         <>
-          {/* Backdrop overlay */}
+          {/* Backdrop */}
           <div
             role="presentation"
             className="fixed inset-0 z-10"
             onClick={() => setIsOpen(false)}
           />
 
-          {/* Dropdown content */}
+          {/* Dropdown content - opens upward */}
           <div
-            className="absolute inset-x-4 top-full z-20 mt-1 max-h-[250px] overflow-y-auto rounded-lg py-1 shadow-xl"
+            className="absolute bottom-full right-0 z-20 mb-2 max-h-[250px] w-56 overflow-y-auto rounded-lg py-1 shadow-xl"
             style={{
               backgroundColor: 'var(--color-surface-sidebar)',
               borderWidth: '1px',

src/renderer/components/layout/SidebarHeader.tsx

@@ -20,7 +20,6 @@ import { truncateMiddle } from '@renderer/utils/stringUtils';
 import { Check, ChevronDown, GitBranch, PanelLeft } from 'lucide-react';
 import { useShallow } from 'zustand/react/shallow';
 
-import { ContextSwitcher } from '../common/ContextSwitcher';
 import { WorktreeBadge } from '../common/WorktreeBadge';
 
 import type { Worktree, WorktreeSource } from '@renderer/types/data';
@@ -338,15 +337,6 @@ export const SidebarHeader = (): React.JSX.Element => {
           } as React.CSSProperties
         }
       >
-        {/* Context Switcher - workspace indicator */}
-        <ContextSwitcher />
-
-        {/* Visual separator */}
-        <div
-          className="h-4 w-px"
-          style={{ backgroundColor: 'var(--color-border)' }}
-        />
-
         {/* Project name dropdown button */}
         <button
           onClick={() => setIsProjectDropdownOpen(!isProjectDropdownOpen)}

src/renderer/components/layout/TabbedLayout.tsx

@@ -10,57 +10,15 @@ import { isElectronMode } from '@renderer/api';
 import { getTrafficLightPaddingForZoom } from '@renderer/constants/layout';
 import { useKeyboardShortcuts } from '@renderer/hooks/useKeyboardShortcuts';
 import { useZoomFactor } from '@renderer/hooks/useZoomFactor';
-import { useStore } from '@renderer/store';
-import { Loader2, Wifi } from 'lucide-react';
 
 import { UpdateBanner } from '../common/UpdateBanner';
 import { UpdateDialog } from '../common/UpdateDialog';
+import { WorkspaceIndicator } from '../common/WorkspaceIndicator';
 import { CommandPalette } from '../search/CommandPalette';
 
 import { PaneContainer } from './PaneContainer';
 import { Sidebar } from './Sidebar';
 
-/**
- * SshConnectionIndicator - Shows SSH connection status in the layout.
- * Only visible when in SSH mode or connecting.
- */
-const SshConnectionIndicator = (): React.JSX.Element | null => {
-  const connectionState = useStore((s) => s.connectionState);
-  const connectedHost = useStore((s) => s.connectedHost);
-
-  if (connectionState === 'disconnected') return null;
-
-  return (
-    <div
-      className="flex items-center gap-1.5 px-3 py-1 text-xs"
-      style={{
-        backgroundColor: 'var(--color-surface-sidebar)',
-        borderBottom: '1px solid var(--color-border)',
-        color: 'var(--color-text-muted)',
-      }}
-    >
-      {connectionState === 'connecting' && (
-        <>
-          <Loader2 className="size-3 animate-spin text-yellow-400" />
-          <span>Connecting to {connectedHost}...</span>
-        </>
-      )}
-      {connectionState === 'connected' && (
-        <>
-          <Wifi className="size-3 text-green-400" />
-          <span className="text-green-400">SSH: {connectedHost}</span>
-        </>
-      )}
-      {connectionState === 'error' && (
-        <>
-          <div className="size-2 rounded-full bg-red-400" />
-          <span className="text-red-400">SSH Error</span>
-        </>
-      )}
-    </div>
-  );
-};
-
 export const TabbedLayout = (): React.JSX.Element => {
   // Enable keyboard shortcuts
   useKeyboardShortcuts();
@@ -75,7 +33,6 @@ export const TabbedLayout = (): React.JSX.Element => {
       }
     >
       <UpdateBanner />
-      <SshConnectionIndicator />
       <div className="flex flex-1 overflow-hidden">
         {/* Command Palette (Cmd+K) */}
         <CommandPalette />
@@ -87,6 +44,7 @@ export const TabbedLayout = (): React.JSX.Element => {
         <PaneContainer />
       </div>
       <UpdateDialog />
+      <WorkspaceIndicator />
     </div>
   );
 };

src/renderer/components/settings/sections/WorkspaceSection.tsx

@@ -10,10 +10,10 @@
  * Profile changes persist via ConfigManager and trigger context list refresh.
  */
 
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 
 import { useStore } from '@renderer/store';
-import { Edit2, Loader2, Plus, Save, Server, Trash2, X } from 'lucide-react';
+import { ChevronDown, Edit2, Loader2, Plus, Save, Server, Trash2, X } from 'lucide-react';
 
 import { SettingsSectionHeader } from '../components/SettingsSectionHeader';
 
@@ -26,6 +26,13 @@ const inputStyle = {
   color: 'var(--color-text)',
 };
 
+const authMethodOptions: { value: SshAuthMethod; label: string }[] = [
+  { value: 'auto', label: 'Auto (from SSH Config)' },
+  { value: 'agent', label: 'SSH Agent' },
+  { value: 'privateKey', label: 'Private Key' },
+  { value: 'password', label: 'Password' },
+];
+
 const defaultForm = {
   name: '',
   host: '',
@@ -35,6 +42,101 @@ const defaultForm = {
   privateKeyPath: '',
 };
 
+const AuthMethodSelect = ({
+  value,
+  onChange,
+}: {
+  value: SshAuthMethod;
+  onChange: (v: SshAuthMethod) => void;
+}): React.JSX.Element => {
+  const [isOpen, setIsOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleClickOutside = (e: MouseEvent): void => {
+      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+    const handleEscape = (e: KeyboardEvent): void => {
+      if (e.key === 'Escape') setIsOpen(false);
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    document.addEventListener('keydown', handleEscape);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+      document.removeEventListener('keydown', handleEscape);
+    };
+  }, [isOpen]);
+
+  const selectedLabel = authMethodOptions.find((o) => o.value === value)?.label ?? value;
+
+  return (
+    <div>
+      <label className="mb-1 block text-xs" style={{ color: 'var(--color-text-muted)' }}>
+        Authentication
+      </label>
+      <div ref={containerRef} className="relative">
+        <button
+          type="button"
+          onClick={() => setIsOpen(!isOpen)}
+          className={inputClass}
+          style={{
+            ...inputStyle,
+            textAlign: 'left',
+            cursor: 'pointer',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+          }}
+        >
+          <span>{selectedLabel}</span>
+          <ChevronDown
+            className={`size-3.5 transition-transform duration-150 ${isOpen ? 'rotate-180' : ''}`}
+            style={{ color: 'var(--color-text-muted)' }}
+          />
+        </button>
+        {isOpen && (
+          <div
+            className="absolute inset-x-0 top-full z-50 mt-1 overflow-hidden rounded-md border shadow-lg"
+            style={{
+              backgroundColor: 'var(--color-surface-overlay)',
+              borderColor: 'var(--color-border-emphasis)',
+            }}
+          >
+            {authMethodOptions.map((opt) => (
+              <button
+                key={opt.value}
+                type="button"
+                onClick={() => {
+                  onChange(opt.value);
+                  setIsOpen(false);
+                }}
+                className="flex w-full items-center px-3 py-2 text-left text-sm transition-colors"
+                style={{
+                  color: opt.value === value ? 'var(--color-text)' : 'var(--color-text-secondary)',
+                  backgroundColor:
+                    opt.value === value ? 'var(--color-surface-raised)' : 'transparent',
+                }}
+                onMouseEnter={(e) => {
+                  if (opt.value !== value)
+                    e.currentTarget.style.backgroundColor = 'var(--color-surface-raised)';
+                }}
+                onMouseLeave={(e) => {
+                  if (opt.value !== value) e.currentTarget.style.backgroundColor = 'transparent';
+                }}
+              >
+                {opt.label}
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
 export const WorkspaceSection = (): React.JSX.Element => {
   const [profiles, setProfiles] = useState<SshConnectionProfile[]>([]);
   const [loading, setLoading] = useState(true);
@@ -212,22 +314,7 @@ export const WorkspaceSection = (): React.JSX.Element => {
         </div>
       </div>
 
-      <div>
+      <AuthMethodSelect value={formAuthMethod} onChange={setFormAuthMethod} />
-        <label className="mb-1 block text-xs" style={{ color: 'var(--color-text-muted)' }}>
-          Authentication
-        </label>
-        <select
-          value={formAuthMethod}
-          onChange={(e) => setFormAuthMethod(e.target.value as SshAuthMethod)}
-          className="w-full rounded-md border px-3 py-1.5 text-sm"
-          style={inputStyle}
-        >
-          <option value="auto">Auto (from SSH Config)</option>
-          <option value="agent">SSH Agent</option>
-          <option value="privateKey">Private Key</option>
-          <option value="password">Password</option>
-        </select>
-      </div>
 
       {formAuthMethod === 'privateKey' && (
         <div>
@@ -245,6 +332,12 @@ export const WorkspaceSection = (): React.JSX.Element => {
         </div>
       )}
 
+      {formAuthMethod === 'password' && (
+        <p className="text-xs" style={{ color: 'var(--color-text-muted)' }}>
+          You will be prompted for the password when connecting.
+        </p>
+      )}
+
       <div className="flex items-center gap-2 pt-1">
         <button
           onClick={() => void onSave()}