🤖 Fix Ctrl+J/K workspace navigation to use sorted order (#209)

Workspace navigation (Ctrl+J/K) now follows the visual order displayed
in the sidebar.

## Problem

PR #205 added recency-based sorting to the workspace display, but
Ctrl+J/K navigation still used the unsorted config order. This caused
confusion where pressing "next workspace" wouldn't select the next
visible workspace in the sidebar.

## Solution

Moved the sorting logic from ProjectSidebar to App.tsx so both
navigation and display use the same recency-sorted workspace list. This
ensures Ctrl+J/K navigation matches the visual order users see.

## Changes

- Added `sortedWorkspacesByProject` memo in App.tsx that sorts
workspaces by recency
- Updated `handleNavigateWorkspace` to use the sorted list instead of
raw config order
- Pass sorted list through LeftSidebar → ProjectSidebar props chain
- Removed duplicate sorting logic from ProjectSidebar (now uses parent's
sorted list)

## Testing

- ✅ All 379 unit tests pass
- ✅ Type checking passes
- Manual verification: Ctrl+J/K now navigates in the same order as
displayed in sidebar

_Generated with `cmux`_

Author: ammar-agent

src/App.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback, useRef } from "react";
+import { useState, useEffect, useCallback, useRef, useMemo } from "react";
 import styled from "@emotion/styled";
 import { Global, css } from "@emotion/react";
 import { GlobalColors } from "./styles/colors";
@@ -287,28 +287,51 @@ function AppInner() {
     []
   );
 
+  // Sort workspaces by recency (most recent first)
+  // This ensures navigation follows the visual order displayed in the sidebar
+  const sortedWorkspacesByProject = useMemo(() => {
+    const result = new Map<string, ProjectConfig["workspaces"]>();
+    for (const [projectPath, config] of projects) {
+      result.set(
+        projectPath,
+        config.workspaces.slice().sort((a, b) => {
+          const aMeta = workspaceMetadata.get(a.path);
+          const bMeta = workspaceMetadata.get(b.path);
+          if (!aMeta || !bMeta) return 0;
+
+          // Get timestamp of most recent user message (0 if never used)
+          const aTimestamp = workspaceRecency[aMeta.id] ?? 0;
+          const bTimestamp = workspaceRecency[bMeta.id] ?? 0;
+          return bTimestamp - aTimestamp;
+        })
+      );
+    }
+    return result;
+  }, [projects, workspaceMetadata, workspaceRecency]);
+
   const handleNavigateWorkspace = useCallback(
     (direction: "next" | "prev") => {
       if (!selectedWorkspace) return;
 
-      const projectConfig = projects.get(selectedWorkspace.projectPath);
-      if (!projectConfig || projectConfig.workspaces.length <= 1) return;
+      // Use sorted workspaces to match visual order in sidebar
+      const sortedWorkspaces = sortedWorkspacesByProject.get(selectedWorkspace.projectPath);
+      if (!sortedWorkspaces || sortedWorkspaces.length <= 1) return;
 
-      // Find current workspace index
-      const currentIndex = projectConfig.workspaces.findIndex(
+      // Find current workspace index in sorted list
+      const currentIndex = sortedWorkspaces.findIndex(
         (ws) => ws.path === selectedWorkspace.workspacePath
       );
       if (currentIndex === -1) return;
 
       // Calculate next/prev index with wrapping
       let targetIndex: number;
       if (direction === "next") {
-        targetIndex = (currentIndex + 1) % projectConfig.workspaces.length;
+        targetIndex = (currentIndex + 1) % sortedWorkspaces.length;
       } else {
-        targetIndex = currentIndex === 0 ? projectConfig.workspaces.length - 1 : currentIndex - 1;
+        targetIndex = currentIndex === 0 ? sortedWorkspaces.length - 1 : currentIndex - 1;
       }
 
-      const targetWorkspace = projectConfig.workspaces[targetIndex];
+      const targetWorkspace = sortedWorkspaces[targetIndex];
       if (!targetWorkspace) return;
 
       const metadata = workspaceMetadata.get(targetWorkspace.path);
@@ -321,7 +344,7 @@ function AppInner() {
         workspaceId: metadata.id,
       });
     },
-    [selectedWorkspace, projects, workspaceMetadata, setSelectedWorkspace]
+    [selectedWorkspace, sortedWorkspacesByProject, workspaceMetadata, setSelectedWorkspace]
   );
 
   // Register command sources with registry
@@ -554,7 +577,7 @@ function AppInner() {
             onToggleCollapsed={() => setSidebarCollapsed((prev) => !prev)}
             onGetSecrets={handleGetSecrets}
             onUpdateSecrets={handleUpdateSecrets}
-            workspaceRecency={workspaceRecency}
+            sortedWorkspacesByProject={sortedWorkspacesByProject}
           />
           <MainContent>
             <ContentArea>

src/components/LeftSidebar.tsx

@@ -43,7 +43,7 @@ interface LeftSidebarProps {
   onToggleCollapsed: () => void;
   onGetSecrets: (projectPath: string) => Promise<Secret[]>;
   onUpdateSecrets: (projectPath: string, secrets: Secret[]) => Promise<void>;
-  workspaceRecency: Record<string, number>;
+  sortedWorkspacesByProject: Map<string, ProjectConfig["workspaces"]>;
 }
 
 export function LeftSidebar(props: LeftSidebarProps) {

src/components/ProjectSidebar.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback, useRef, useMemo } from "react";
+import React, { useState, useEffect, useCallback, useRef } from "react";
 import { createPortal } from "react-dom";
 import styled from "@emotion/styled";
 import { css } from "@emotion/react";
@@ -585,7 +585,7 @@ interface ProjectSidebarProps {
   onToggleCollapsed: () => void;
   onGetSecrets: (projectPath: string) => Promise<Secret[]>;
   onUpdateSecrets: (projectPath: string, secrets: Secret[]) => Promise<void>;
-  workspaceRecency: Record<string, number>;
+  sortedWorkspacesByProject: Map<string, Workspace[]>;
 }
 
 const ProjectSidebar: React.FC<ProjectSidebarProps> = ({
@@ -605,33 +605,11 @@ const ProjectSidebar: React.FC<ProjectSidebarProps> = ({
   onToggleCollapsed,
   onGetSecrets,
   onUpdateSecrets,
-  workspaceRecency,
+  sortedWorkspacesByProject,
 }) => {
   // Subscribe to git status updates (causes this component to re-render every 10s)
   const gitStatus = useGitStatus();
 
-  // Sort workspaces by last user message (most recent first)
-  // workspaceRecency only updates when timestamps actually change (stable reference optimization)
-  const sortedWorkspacesByProject = useMemo(() => {
-    const result = new Map<string, Workspace[]>();
-    for (const [projectPath, config] of projects) {
-      result.set(
-        projectPath,
-        config.workspaces.slice().sort((a, b) => {
-          const aMeta = workspaceMetadata.get(a.path);
-          const bMeta = workspaceMetadata.get(b.path);
-          if (!aMeta || !bMeta) return 0;
-
-          // Get timestamp of most recent user message (0 if never used)
-          const aTimestamp = workspaceRecency[aMeta.id] ?? 0;
-          const bTimestamp = workspaceRecency[bMeta.id] ?? 0;
-          return bTimestamp - aTimestamp;
-        })
-      );
-    }
-    return result;
-  }, [projects, workspaceMetadata, workspaceRecency]);
-
   // Store as array in localStorage, convert to Set for usage
   const [expandedProjectsArray, setExpandedProjectsArray] = usePersistedState<string[]>(
     "expandedProjects",