feat(sidebar): show host name on every row in multi-host setups (#1775)

The host name previously appeared only in project grouping mode, and only
for projects shared across hosts. It now shows on every workspace row in
both project and status grouping modes whenever the sidebar spans more than
one host, so you can always tell which machine a workspace lives on. Status
rows read "Project · Host". Single-host setups are unchanged.

packages/app/src/components/sidebar-workspace-list.tsx

@@ -64,6 +64,7 @@ import {
   parseHostWorkspaceRouteFromPathname,
 } from "@/utils/host-routes";
 import {
+  shouldShowSidebarHostLabels,
   useSidebarWorkspaceEntry,
   type SidebarProjectEntry,
   type SidebarStatusWorkspacePlacement,
@@ -1879,6 +1880,7 @@ function ProjectBlock({
   creatingWorkspaceIds,
   activeWorkspaceSelection,
   hostLabelByServerId,
+  showHostLabels,
 }: {
   project: SidebarProjectEntry;
   collapsed: boolean;
@@ -1899,6 +1901,7 @@ function ProjectBlock({
   creatingWorkspaceIds: ReadonlySet<string>;
   activeWorkspaceSelection: ActiveWorkspaceSelection | null;
   hostLabelByServerId: ReadonlyMap<string, string>;
+  showHostLabels: boolean;
 }) {
   const rowModel = useMemo(
     () =>
@@ -1928,9 +1931,7 @@ function ProjectBlock({
         <MemoWorkspaceRowItem
           workspace={item}
           subtitle={
-            project.hosts.length > 1
-              ? (hostLabelByServerId.get(item.serverId) ?? item.serverId)
-              : null
+            showHostLabels ? (hostLabelByServerId.get(item.serverId) ?? item.serverId) : null
           }
           shortcutNumber={shortcutIndexByWorkspaceKey.get(item.workspaceKey) ?? null}
           showShortcutBadge={showShortcutBadges}
@@ -1947,7 +1948,7 @@ function ProjectBlock({
     },
     [
       project.projectKind,
-      project.hosts.length,
+      showHostLabels,
       activeWorkspaceSelection,
       creatingWorkspaceIds,
       hostLabelByServerId,
@@ -2115,6 +2116,7 @@ function areProjectBlockPropsEqual(previous: ProjectBlockProps, next: ProjectBlo
     previous.showShortcutBadges === next.showShortcutBadges &&
     previous.shortcutIndexByWorkspaceKey === next.shortcutIndexByWorkspaceKey &&
     previous.hostLabelByServerId === next.hostLabelByServerId &&
+    previous.showHostLabels === next.showHostLabels &&
     previous.parentGestureRef === next.parentGestureRef &&
     previous.onToggleCollapsed === next.onToggleCollapsed &&
     previous.onWorkspacePress === next.onWorkspacePress &&
@@ -2181,6 +2183,7 @@ export function SidebarWorkspaceList({
     }
     return labels;
   }, [hosts]);
+  const showHostLabels = useMemo(() => shouldShowSidebarHostLabels(projects), [projects]);
 
   const content =
     groupMode === "status" ? (
@@ -2189,6 +2192,8 @@ export function SidebarWorkspaceList({
         projectNamesByKey={projectNamesByKey}
         shortcutIndexByWorkspaceKey={shortcutIndexByWorkspaceKey}
         onWorkspacePress={onWorkspacePress}
+        hostLabelByServerId={hostLabelByServerId}
+        showHostLabels={showHostLabels}
       />
     ) : (
       <ProjectModeList
@@ -2202,6 +2207,7 @@ export function SidebarWorkspaceList({
         parentGestureRef={parentGestureRef}
         pathname={pathname}
         hostLabelByServerId={hostLabelByServerId}
+        showHostLabels={showHostLabels}
       />
     );
 
@@ -2213,11 +2219,15 @@ function SidebarStatusModeWrapper({
   projectNamesByKey,
   shortcutIndexByWorkspaceKey: _projectShortcutIndex,
   onWorkspacePress,
+  hostLabelByServerId,
+  showHostLabels,
 }: {
   statusWorkspacePlacements: SidebarStatusWorkspacePlacement[];
   projectNamesByKey: Map<string, string>;
   shortcutIndexByWorkspaceKey: Map<string, number>;
   onWorkspacePress?: () => void;
+  hostLabelByServerId: ReadonlyMap<string, string>;
+  showHostLabels: boolean;
 }) {
   const showShortcutBadges = useShowShortcutBadges();
 
@@ -2228,6 +2238,8 @@ function SidebarStatusModeWrapper({
       shortcutIndexByWorkspaceKey={_projectShortcutIndex}
       showShortcutBadges={showShortcutBadges}
       onWorkspacePress={onWorkspacePress}
+      hostLabelByServerId={hostLabelByServerId}
+      showHostLabels={showHostLabels}
     />
   );
 }
@@ -2243,12 +2255,14 @@ function ProjectModeList({
   parentGestureRef,
   pathname,
   hostLabelByServerId,
+  showHostLabels,
 }: Omit<
   SidebarWorkspaceListProps,
   "statusWorkspacePlacements" | "projectNamesByKey" | "groupMode" | "isRefreshing" | "onRefresh"
 > & {
   pathname: string;
   hostLabelByServerId: ReadonlyMap<string, string>;
+  showHostLabels: boolean;
 }) {
   const { t } = useTranslation();
   const [creatingWorkspaceIds, setCreatingWorkspaceIds] = useState<Set<string>>(() => new Set());
@@ -2436,6 +2450,7 @@ function ProjectModeList({
           creatingWorkspaceIds={creatingWorkspaceIds}
           activeWorkspaceSelection={activeWorkspaceSelection}
           hostLabelByServerId={hostLabelByServerId}
+          showHostLabels={showHostLabels}
         />
       );
     },
@@ -2445,6 +2460,7 @@ function ProjectModeList({
       handleWorktreeCreated,
       handleWorkspaceReorder,
       hostLabelByServerId,
+      showHostLabels,
       onWorkspacePress,
       onToggleProjectCollapsed,
       parentGestureRef,

packages/app/src/components/sidebar/sidebar-status-list.tsx

@@ -95,6 +95,8 @@ interface StatusWorkspaceListProps {
   shortcutIndexByWorkspaceKey: Map<string, number>;
   showShortcutBadges: boolean;
   onWorkspacePress?: () => void;
+  hostLabelByServerId: ReadonlyMap<string, string>;
+  showHostLabels: boolean;
 }
 
 export function SidebarStatusWorkspaceList({
@@ -103,6 +105,8 @@ export function SidebarStatusWorkspaceList({
   shortcutIndexByWorkspaceKey: _projectShortcutIndex,
   showShortcutBadges,
   onWorkspacePress,
+  hostLabelByServerId,
+  showHostLabels,
 }: StatusWorkspaceListProps) {
   const groups = useMemo(
     () => buildStatusGroups(workspaces, projectNamesByKey),
@@ -138,6 +142,8 @@ export function SidebarStatusWorkspaceList({
             shortcutIndex={statusShortcutIndex}
             showShortcutBadges={showShortcutBadges}
             onWorkspacePress={onWorkspacePress}
+            hostLabelByServerId={hostLabelByServerId}
+            showHostLabels={showHostLabels}
           />
         </NestableScrollContainer>
       ) : (
@@ -154,6 +160,8 @@ export function SidebarStatusWorkspaceList({
             shortcutIndex={statusShortcutIndex}
             showShortcutBadges={showShortcutBadges}
             onWorkspacePress={onWorkspacePress}
+            hostLabelByServerId={hostLabelByServerId}
+            showHostLabels={showHostLabels}
           />
         </ScrollView>
       )}
@@ -168,6 +176,8 @@ function StatusGroupList({
   shortcutIndex,
   showShortcutBadges,
   onWorkspacePress,
+  hostLabelByServerId,
+  showHostLabels,
 }: {
   groups: StatusGroup[];
   collapsedStatusGroupKeys: ReadonlySet<string>;
@@ -175,6 +185,8 @@ function StatusGroupList({
   shortcutIndex: Map<string, number>;
   showShortcutBadges: boolean;
   onWorkspacePress?: () => void;
+  hostLabelByServerId: ReadonlyMap<string, string>;
+  showHostLabels: boolean;
 }) {
   return (
     <>
@@ -190,7 +202,12 @@ function StatusGroupList({
                 <StatusWorkspaceRow
                   key={workspace.workspaceKey}
                   workspace={workspace}
-                  projectName={projectNamesByKey.get(workspace.projectKey) ?? ""}
+                  subtitle={buildStatusRowSubtitle({
+                    projectName: projectNamesByKey.get(workspace.projectKey) ?? "",
+                    hostLabel: showHostLabels
+                      ? (hostLabelByServerId.get(workspace.serverId) ?? workspace.serverId)
+                      : null,
+                  })}
                   shortcutNumber={shortcutIndex.get(workspace.workspaceKey) ?? null}
                   showShortcutBadge={showShortcutBadges}
                   onWorkspacePress={onWorkspacePress}
@@ -204,6 +221,21 @@ function StatusGroupList({
   );
 }
 
+// Status mode breaks the project grouping, so the row needs the project name to stay
+// legible; the host is appended after a middle dot once labels are active.
+function buildStatusRowSubtitle({
+  projectName,
+  hostLabel,
+}: {
+  projectName: string;
+  hostLabel: string | null;
+}): string {
+  if (!hostLabel) {
+    return projectName;
+  }
+  return projectName ? `${projectName} · ${hostLabel}` : hostLabel;
+}
+
 function StatusGroupHeader({ group, collapsed }: { group: StatusGroup; collapsed: boolean }) {
   const [isHovered, setIsHovered] = useState(false);
   const toggleStatusGroupCollapsed = useSidebarCollapsedSectionsStore(
@@ -288,13 +320,13 @@ function StatusGroupIcon({ bucket }: { bucket: StatusGroup["bucket"] }) {
 
 const StatusWorkspaceRow = memo(function StatusWorkspaceRow({
   workspace,
-  projectName,
+  subtitle,
   shortcutNumber,
   showShortcutBadge,
   onWorkspacePress,
 }: {
   workspace: SidebarStatusWorkspacePlacement;
-  projectName: string;
+  subtitle: string;
   shortcutNumber: number | null;
   showShortcutBadge: boolean;
   onWorkspacePress?: () => void;
@@ -316,7 +348,7 @@ const StatusWorkspaceRow = memo(function StatusWorkspaceRow({
   return (
     <StatusWorkspaceRowWithMenu
       workspace={workspaceEntry}
-      projectName={projectName}
+      subtitle={subtitle}
       selected={selected}
       shortcutNumber={shortcutNumber}
       showShortcutBadge={showShortcutBadge}
@@ -327,14 +359,14 @@ const StatusWorkspaceRow = memo(function StatusWorkspaceRow({
 
 function StatusWorkspaceRowWithMenu({
   workspace,
-  projectName,
+  subtitle,
   selected,
   shortcutNumber,
   showShortcutBadge,
   onPress,
 }: {
   workspace: SidebarWorkspaceEntry;
-  projectName: string;
+  subtitle: string;
   selected: boolean;
   shortcutNumber: number | null;
   showShortcutBadge: boolean;
@@ -455,7 +487,7 @@ function StatusWorkspaceRowWithMenu({
     <>
       <StatusWorkspaceRowInner
         workspace={workspace}
-        projectName={projectName}
+        subtitle={subtitle}
         selected={selected}
         shortcutNumber={shortcutNumber}
         showShortcutBadge={showShortcutBadge}
@@ -487,7 +519,7 @@ function StatusWorkspaceRowWithMenu({
 
 function StatusWorkspaceRowInner({
   workspace,
-  projectName,
+  subtitle,
   selected,
   shortcutNumber,
   showShortcutBadge,
@@ -504,7 +536,7 @@ function StatusWorkspaceRowInner({
   archiveShortcutKeys,
 }: {
   workspace: SidebarWorkspaceEntry;
-  projectName: string;
+  subtitle: string;
   selected: boolean;
   shortcutNumber: number | null;
   showShortcutBadge: boolean;
@@ -554,7 +586,7 @@ function StatusWorkspaceRowInner({
             >
               <SidebarWorkspaceRowContent
                 workspace={workspace}
-                subtitle={projectName}
+                subtitle={subtitle}
                 scriptIconKind={scriptIconKind}
                 isHovered={isHovered}
                 isLoading={isArchiving}