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.
2026-02-12 15:25:17 +09:00 · 2026-02-12 15:25:17 +09:00 · b200561ac1
commit b200561ac1
parent 656c9b155f
6 changed files with 136 additions and 92 deletions
--- a/src/main/services/infrastructure/ServiceContext.ts
+++ b/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,
--- a/src/main/services/infrastructure/ServiceContextRegistry.ts
+++ b/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,
--- a/src/renderer/components/common/WorkspaceIndicator.tsx
+++ b/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.
- * Dropdown lists all available contexts with click-to-switch functionality.
+ * Shows active workspace (Local or SSH host) with connection status badge.
+ * 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') {
-      return 'Local';
-    }
-    // Strip 'ssh-' prefix for display (e.g., 'ssh-192.168.1.10' -> '192.168.1.10')
+    if (contextId === 'local') return 'Local';
    return contextId.startsWith('ssh-') ? contextId.slice(4) : contextId;
  };

  const activeLabel = getContextLabel(activeContextId);

  return (
-    <div ref={dropdownRef} className="relative">
-      {/* Trigger button */}
+    <div ref={dropdownRef} className="fixed bottom-4 right-4 z-30">
+      {/* 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' : ''}`}
-        style={{ WebkitAppRegion: 'no-drag' } as React.CSSProperties}
+        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={{
+          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',
--- a/src/renderer/components/layout/SidebarHeader.tsx
+++ b/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)}
--- a/src/renderer/components/layout/TabbedLayout.tsx
+++ b/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>
  );
 };
--- a/src/renderer/components/settings/sections/WorkspaceSection.tsx
+++ b/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>
-        <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>
+      <AuthMethodSelect value={formAuthMethod} onChange={setFormAuthMethod} />

      {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()}