From a110b6d79461ecf0b808228b836dbf679f6a9da7 Mon Sep 17 00:00:00 2001
From: Jinjing <6427696+AmethystLiang@users.noreply.github.com>
Date: Mon, 27 Apr 2026 22:31:11 -0700
Subject: [PATCH] feat(ui): unify SSH workspace icon to Server across all
 surfaces (#1198)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

SSH workspaces previously rendered as Globe in some places and Wifi in
others. Globe implies web/internet and Wifi implies wireless network
strength — neither reads as "remote machine". Use Server/ServerOff
across every SSH context for a consistent mental model. Globe remains
in true browser/web surfaces (browser pane, address bar, tabs, clone
from URL, Browser settings pane).

Co-authored-by: Orca <help@stably.ai>
---
 src/renderer/src/components/WorktreeJumpPalette.tsx       | 6 +++---
 src/renderer/src/components/repo/RepoCombobox.tsx         | 6 +++---
 src/renderer/src/components/settings/SettingsSidebar.tsx  | 4 ++--
 src/renderer/src/components/settings/SshTargetCard.tsx    | 6 +++---
 .../src/components/sidebar/SshDisconnectedDialog.tsx      | 6 +++---
 src/renderer/src/components/sidebar/WorktreeCard.tsx      | 6 +++---
 .../src/components/status-bar/SshStatusSegment.tsx        | 8 ++++----
 src/renderer/src/components/status-bar/StatusBar.tsx      | 6 +++---
 src/renderer/src/components/ui/repo-multi-combobox.tsx    | 4 ++--
 9 files changed, 26 insertions(+), 26 deletions(-)

diff --git a/src/renderer/src/components/WorktreeJumpPalette.tsx b/src/renderer/src/components/WorktreeJumpPalette.tsx
index cba2264ab2e..5809059bd0e 100644
--- a/src/renderer/src/components/WorktreeJumpPalette.tsx
+++ b/src/renderer/src/components/WorktreeJumpPalette.tsx
@@ -1,7 +1,7 @@
 /* oxlint-disable max-lines */
 import React, { useCallback, useDeferredValue, useEffect, useMemo, useRef, useState } from 'react'
 import { toast } from 'sonner'
-import { Globe, Plus, WifiOff } from 'lucide-react'
+import { Globe, Plus, Server, ServerOff } from 'lucide-react'
 import { useAppStore } from '@/store'
 import { getRepoMapFromState, useAllWorktrees } from '@/store/selectors'
 import {
@@ -775,9 +775,9 @@ export default function WorktreeJumpPalette(): React.JSX.Element | null {
                                 className="shrink-0 inline-flex items-center"
                               >
                                 {isSshDisconnected ? (
-                                  <WifiOff className="size-3.5 text-red-400" aria-hidden="true" />
+                                  <ServerOff className="size-3.5 text-red-400" aria-hidden="true" />
                                 ) : (
-                                  <Globe
+                                  <Server
                                     className="size-3.5 text-muted-foreground"
                                     aria-hidden="true"
                                   />
diff --git a/src/renderer/src/components/repo/RepoCombobox.tsx b/src/renderer/src/components/repo/RepoCombobox.tsx
index b581ca38ccb..b614b9c878b 100644
--- a/src/renderer/src/components/repo/RepoCombobox.tsx
+++ b/src/renderer/src/components/repo/RepoCombobox.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useMemo, useState } from 'react'
-import { Check, ChevronsUpDown, FolderPlus, Globe } from 'lucide-react'
+import { Check, ChevronsUpDown, FolderPlus, Server } from 'lucide-react'
 import { Button } from '@/components/ui/button'
 import {
   Command,
@@ -181,7 +181,7 @@ export default function RepoCombobox({
                 />
                 {selectedRepo.connectionId && (
                   <span className="shrink-0 inline-flex items-center gap-0.5 rounded bg-muted px-1 py-0.5 text-[9px] font-medium leading-none text-muted-foreground">
-                    <Globe className="size-2.5" />
+                    <Server className="size-2.5" />
                     SSH
                   </span>
                 )}
@@ -228,7 +228,7 @@ export default function RepoCombobox({
                       />
                       {repo.connectionId && (
                         <span className="shrink-0 inline-flex items-center gap-0.5 rounded bg-muted px-1 py-0.5 text-[9px] font-medium leading-none text-muted-foreground">
-                          <Globe className="size-2.5" />
+                          <Server className="size-2.5" />
                           SSH
                         </span>
                       )}
diff --git a/src/renderer/src/components/settings/SettingsSidebar.tsx b/src/renderer/src/components/settings/SettingsSidebar.tsx
index f9d4fc5df34..b23d2c6553c 100644
--- a/src/renderer/src/components/settings/SettingsSidebar.tsx
+++ b/src/renderer/src/components/settings/SettingsSidebar.tsx
@@ -1,4 +1,4 @@
-import { ArrowLeft, Globe, Search, type LucideIcon, type LucideProps } from 'lucide-react'
+import { ArrowLeft, Search, Server, type LucideIcon, type LucideProps } from 'lucide-react'
 import { Button } from '../ui/button'
 import { Input } from '../ui/input'
 
@@ -134,7 +134,7 @@ export function SettingsSidebar({
                       <span className="truncate">{section.title}</span>
                       {section.isRemote && (
                         <span className="ml-auto inline-flex shrink-0 items-center gap-1 text-[10px] text-muted-foreground">
-                          <Globe className="size-3" />
+                          <Server className="size-3" />
                           SSH
                         </span>
                       )}
diff --git a/src/renderer/src/components/settings/SshTargetCard.tsx b/src/renderer/src/components/settings/SshTargetCard.tsx
index 85c83c84e5c..0edcbd34801 100644
--- a/src/renderer/src/components/settings/SshTargetCard.tsx
+++ b/src/renderer/src/components/settings/SshTargetCard.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { Loader2, MonitorSmartphone, Pencil, Server, Trash2, Wifi, WifiOff } from 'lucide-react'
+import { Loader2, MonitorSmartphone, Pencil, Server, ServerOff, Trash2 } from 'lucide-react'
 import type {
   SshTarget,
   SshConnectionState,
@@ -111,7 +111,7 @@ export function SshTargetCard({
             className="gap-1.5"
             disabled={actionInFlight !== null}
           >
-            <WifiOff className="size-3" />
+            <ServerOff className="size-3" />
             Disconnect
           </Button>
         ) : isConnecting(status) ? (
@@ -131,7 +131,7 @@ export function SshTargetCard({
               {actionInFlight === 'connect' ? (
                 <Loader2 className="size-3 animate-spin" />
               ) : (
-                <Wifi className="size-3" />
+                <Server className="size-3" />
               )}
               Connect
             </Button>
diff --git a/src/renderer/src/components/sidebar/SshDisconnectedDialog.tsx b/src/renderer/src/components/sidebar/SshDisconnectedDialog.tsx
index 9b62c402060..4c9fe7db9a8 100644
--- a/src/renderer/src/components/sidebar/SshDisconnectedDialog.tsx
+++ b/src/renderer/src/components/sidebar/SshDisconnectedDialog.tsx
@@ -1,6 +1,6 @@
 import { useCallback, useState } from 'react'
 import { toast } from 'sonner'
-import { Globe, Loader2, WifiOff } from 'lucide-react'
+import { Loader2, Server, ServerOff } from 'lucide-react'
 import {
   Dialog,
   DialogContent,
@@ -72,7 +72,7 @@ export function SshDisconnectedDialog({
             {isConnecting ? (
               <Loader2 className="size-4 text-yellow-500 animate-spin" />
             ) : (
-              <WifiOff className="size-4 text-muted-foreground" />
+              <ServerOff className="size-4 text-muted-foreground" />
             )}
             {isConnecting ? 'Reconnecting...' : 'SSH Disconnected'}
           </DialogTitle>
@@ -80,7 +80,7 @@ export function SshDisconnectedDialog({
         </DialogHeader>
 
         <div className="flex items-center gap-2.5 rounded-md border border-border/50 bg-card/40 px-3 py-2">
-          <Globe className="size-3.5 shrink-0 text-muted-foreground" />
+          <Server className="size-3.5 shrink-0 text-muted-foreground" />
           <div className="min-w-0 flex-1">
             <span className="text-xs font-medium">{targetLabel}</span>
           </div>
diff --git a/src/renderer/src/components/sidebar/WorktreeCard.tsx b/src/renderer/src/components/sidebar/WorktreeCard.tsx
index f34517c0f24..9189763ae19 100644
--- a/src/renderer/src/components/sidebar/WorktreeCard.tsx
+++ b/src/renderer/src/components/sidebar/WorktreeCard.tsx
@@ -4,7 +4,7 @@ import { useShallow } from 'zustand/react/shallow'
 import { useAppStore } from '@/store'
 import { Badge } from '@/components/ui/badge'
 import { Tooltip, TooltipTrigger, TooltipContent } from '@/components/ui/tooltip'
-import { Bell, GitMerge, LoaderCircle, CircleCheck, CircleX, Globe, WifiOff } from 'lucide-react'
+import { Bell, GitMerge, LoaderCircle, CircleCheck, CircleX, Server, ServerOff } from 'lucide-react'
 import StatusIndicator from './StatusIndicator'
 import CacheTimer from './CacheTimer'
 import WorktreeContextMenu from './WorktreeContextMenu'
@@ -488,9 +488,9 @@ const WorktreeCard = React.memo(function WorktreeCard({
                     <TooltipTrigger asChild>
                       <span className="shrink-0 inline-flex items-center">
                         {isSshDisconnected ? (
-                          <WifiOff className="size-3 text-red-400" />
+                          <ServerOff className="size-3 text-red-400" />
                         ) : (
-                          <Globe className="size-3 text-muted-foreground" />
+                          <Server className="size-3 text-muted-foreground" />
                         )}
                       </span>
                     </TooltipTrigger>
diff --git a/src/renderer/src/components/status-bar/SshStatusSegment.tsx b/src/renderer/src/components/status-bar/SshStatusSegment.tsx
index c05b421e23f..8796375b8fb 100644
--- a/src/renderer/src/components/status-bar/SshStatusSegment.tsx
+++ b/src/renderer/src/components/status-bar/SshStatusSegment.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useState } from 'react'
-import { Loader2, MonitorSmartphone, Wifi, WifiOff } from 'lucide-react'
+import { Loader2, MonitorSmartphone, Server, ServerOff } from 'lucide-react'
 import { toast } from 'sonner'
 import {
   DropdownMenu,
@@ -174,11 +174,11 @@ export function SshStatusSegment({
               {anyConnecting ? (
                 <Loader2 className="size-3 animate-spin text-yellow-500" />
               ) : overall === 'connected' ? (
-                <Wifi className="size-3 text-emerald-500" />
+                <Server className="size-3 text-emerald-500" />
               ) : overall === 'partial' ? (
-                <Wifi className="size-3 text-muted-foreground" />
+                <Server className="size-3 text-muted-foreground" />
               ) : (
-                <WifiOff className="size-3 text-muted-foreground" />
+                <ServerOff className="size-3 text-muted-foreground" />
               )}
               {!compact && (
                 <span className="text-[11px]">
diff --git a/src/renderer/src/components/status-bar/StatusBar.tsx b/src/renderer/src/components/status-bar/StatusBar.tsx
index ae89cb22629..4d652f12e68 100644
--- a/src/renderer/src/components/status-bar/StatusBar.tsx
+++ b/src/renderer/src/components/status-bar/StatusBar.tsx
@@ -7,8 +7,8 @@ import {
   ChevronRight,
   MemoryStick as MemoryStickIcon,
   RefreshCw,
-  Terminal,
-  Wifi
+  Server,
+  Terminal
 } from 'lucide-react'
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
@@ -705,7 +705,7 @@ function StatusBarInner(): React.JSX.Element | null {
             checked={statusBarItems.includes('ssh')}
             onCheckedChange={() => toggleStatusBarItem('ssh')}
           >
-            <Wifi className="size-3.5" />
+            <Server className="size-3.5" />
             SSH Status
           </DropdownMenuCheckboxItem>
           <DropdownMenuCheckboxItem
diff --git a/src/renderer/src/components/ui/repo-multi-combobox.tsx b/src/renderer/src/components/ui/repo-multi-combobox.tsx
index 3fbac9ea43b..8d682352788 100644
--- a/src/renderer/src/components/ui/repo-multi-combobox.tsx
+++ b/src/renderer/src/components/ui/repo-multi-combobox.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useMemo, useState } from 'react'
-import { Check, ChevronsUpDown, Globe } from 'lucide-react'
+import { Check, ChevronsUpDown, Server } from 'lucide-react'
 import { Button } from '@/components/ui/button'
 import {
   Command,
@@ -181,7 +181,7 @@ export default function RepoMultiCombobox({
                       />
                       {repo.connectionId && (
                         <span className="shrink-0 inline-flex items-center gap-0.5 rounded bg-muted px-1 py-0.5 text-[9px] font-medium leading-none text-muted-foreground">
-                          <Globe className="size-2.5" />
+                          <Server className="size-2.5" />
                           SSH
                         </span>
                       )}