Merge sidebar workspaces across all connected hosts (#1538)

* Merge workspaces across all hosts in the sidebar

Replace per-host sidebar sections with a single merged project list.
Projects that exist on multiple hosts (matched by projectKey) are
collapsed into one row. Host identity is surfaced via:

- A status-only footer pill showing online/offline host counts
- Hover cards with a mandatory host row on every workspace entry
- Subtitles showing the host name when a project spans >1 host
- A host filter in the grouping dropdown (not a sidebar switcher)

Order and group-mode stores migrated from per-server to global keys
with zustand persist migrations. New-workspace screen now shows a
merged project list with a host selector combobox.

Key files:
- workspace-structure.ts: merge algorithm by projectKey
- sidebar-view-store.ts / sidebar-order-store.ts: global state
- sidebar-workspace-list.tsx: context-based subtitle injection
- new-workspace-screen.tsx: host selector in footer row

* Add host filtering to the merged sidebar

The sidebar now merges workspaces from every connected host, so a single
global "active host" no longer fits. Host selection becomes explicit per
action via a host chooser, and agent history pages across all hosts at
once. Removes the active-host / active-server-id model and the
all-agents-list hook that fed it.

* Fix rebase fallout: translate archive host error, update stale workspace-key test

archiveWorkspacesOptimistically used a raw "Host is not connected" string
that the i18n completeness test forbids; route it through i18n.t with the
existing hostDisconnected key. The selectors memoization test asserted
un-prefixed workspace keys, but merged-sidebar keys are serverId-prefixed.

* Fix sidebar review fallout

* Address sidebar review followups

* Fix sidebar workspace identity migration

* Address sidebar review followups

* Handle partial host history failures

* Fix merged sidebar project removal and E2E drift

* Restore history routes and project removal shape

* Remove sidebar host context plumbing

* Tighten sidebar status and host filter state

* Keep new workspace project selection host-compatible

* Migrate sidebar view storage

* Streamline host selection flows

* Update all-host history on archive

* Fix empty project sidebar action

Code regression: the main merge dropped the empty-project New workspace child row while keeping the empty project persistence contract. Restore the row using the project host target so the sidebar stays aligned with the no-host-selection model.

* Fix Japanese shortcut translation key

Stale-base integration: main added the Japanese locale after this branch added cycleAgentMode to the English shortcut help map. Merging main exposed the missing ja key in CI typecheck and resources.test.

* Fix Playwright speech teardown race

packages/app/src/components/sidebar/sidebar-display-preferences-menu.tsx

@@ -5,14 +5,16 @@ import { Settings2 } from "lucide-react-native";
 import type { Theme } from "@/styles/theme";
 import {
   DropdownMenu,
-  DropdownMenuTrigger,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuSeparator,
+  DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { useSidebarViewStore, type SidebarGroupMode } from "@/stores/sidebar-view-store";
 import { isWeb as platformIsWeb } from "@/constants/platform";
 import { useAppSettings, type WorkspaceTitleSource } from "@/hooks/use-settings";
+import { useHosts, useHostRuntimeSnapshot } from "@/runtime/host-runtime";
+import { useSidebarViewStore, type SidebarGroupMode } from "@/stores/sidebar-view-store";
+import { formatConnectionStatus } from "@/utils/daemons";
 
 const ThemedSettings2 = withUnistyles(Settings2);
 const filterColorMapping = (theme: Theme) => ({ color: theme.colors.foregroundMuted });
@@ -32,22 +34,29 @@ interface DisplayPreferenceOption<Value extends string> {
   label: string;
 }
 
-export function SidebarDisplayPreferencesMenu({ serverId }: { serverId: string | null }) {
-  const groupMode = useSidebarViewStore((state) =>
-    serverId ? state.getGroupMode(serverId) : "project",
-  );
+export function SidebarDisplayPreferencesMenu() {
+  const groupMode = useSidebarViewStore((state) => state.groupMode);
+  const hostFilter = useSidebarViewStore((state) => state.hostFilter);
   const setGroupMode = useSidebarViewStore((state) => state.setGroupMode);
+  const setHostFilter = useSidebarViewStore((state) => state.setHostFilter);
+  const hosts = useHosts();
   const {
     settings: { workspaceTitleSource },
     updateSettings,
   } = useAppSettings();
 
-  const handleSelect = useCallback(
+  const handleSelectMode = useCallback(
     (mode: SidebarGroupMode) => {
-      if (!serverId) return;
-      setGroupMode(serverId, mode);
+      setGroupMode(mode);
     },
-    [serverId, setGroupMode],
+    [setGroupMode],
+  );
+
+  const handleSelectHost = useCallback(
+    (serverId: string | null) => {
+      setHostFilter(serverId);
+    },
+    [setHostFilter],
   );
 
   const handleWorkspaceTitleSourceSelect = useCallback(
@@ -65,6 +74,8 @@ export function SidebarDisplayPreferencesMenu({ serverId }: { serverId: string |
     [],
   );
 
+  const showHostFilter = hosts.length > 1;
+
   return (
     <DropdownMenu>
       <DropdownMenuTrigger
@@ -75,7 +86,7 @@ export function SidebarDisplayPreferencesMenu({ serverId }: { serverId: string |
       >
         <ThemedSettings2 size={14} uniProps={filterColorMapping} />
       </DropdownMenuTrigger>
-      <DropdownMenuContent align="end" width={180} testID="sidebar-display-preferences-content">
+      <DropdownMenuContent align="end" width={220} testID="sidebar-display-preferences-content">
         <View style={styles.menuHeader}>
           <Text style={styles.menuHeaderLabel}>Group by</Text>
         </View>
@@ -85,9 +96,33 @@ export function SidebarDisplayPreferencesMenu({ serverId }: { serverId: string |
             item={item}
             isSelected={groupMode === item.value}
             testIDPrefix="sidebar-grouping"
-            onSelect={handleSelect}
+            onSelect={handleSelectMode}
           />
         ))}
+        {showHostFilter ? (
+          <>
+            <DropdownMenuSeparator />
+            <View style={styles.menuHeader}>
+              <Text style={styles.menuHeaderLabel}>Filter</Text>
+            </View>
+            <HostFilterItem
+              label="All hosts"
+              value={null}
+              hostFilter={hostFilter}
+              onSelect={handleSelectHost}
+            />
+            {hosts.map((host) => (
+              <HostFilterItem
+                key={host.serverId}
+                label={host.label?.trim() || host.serverId}
+                serverId={host.serverId}
+                value={host.serverId}
+                hostFilter={hostFilter}
+                onSelect={handleSelectHost}
+              />
+            ))}
+          </>
+        ) : null}
         <DropdownMenuSeparator />
         <View style={styles.menuHeader}>
           <Text style={styles.menuHeaderLabel}>Workspace title</Text>
@@ -129,6 +164,33 @@ function DisplayPreferenceMenuItem<Value extends string>({
   );
 }
 
+function HostFilterItem({
+  label,
+  serverId,
+  value,
+  hostFilter,
+  onSelect,
+}: {
+  label: string;
+  serverId?: string;
+  value: string | null;
+  hostFilter: string | null;
+  onSelect: (serverId: string | null) => void;
+}) {
+  const isSelected = hostFilter === value;
+  const handleSelect = useCallback(() => onSelect(value), [value, onSelect]);
+  const status = useHostRuntimeSnapshot(serverId ?? "");
+  const subtitle = serverId
+    ? formatConnectionStatus(status?.connectionStatus ?? "idle")
+    : undefined;
+
+  return (
+    <DropdownMenuItem selected={isSelected} description={subtitle} onSelect={handleSelect}>
+      {label}
+    </DropdownMenuItem>
+  );
+}
+
 const styles = StyleSheet.create((theme) => ({
   trigger: {
     width: 28,