Improve command center keyboard navigation and new tab shortcut

packages/app/src/screens/workspace/workspace-desktop-tabs-row.tsx

@@ -10,6 +10,7 @@ import {
   ContextMenuSeparator,
   ContextMenuTrigger,
 } from "@/components/ui/context-menu";
+import { Shortcut } from "@/components/ui/shortcut";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { useWorkspaceTabLayout } from "@/screens/workspace/use-workspace-tab-layout";
 import {
@@ -367,7 +368,10 @@ export function WorkspaceDesktopTabsRow({
             <Plus size={theme.iconSize.sm} color={theme.colors.foregroundMuted} />
           </TooltipTrigger>
           <TooltipContent side="bottom" align="end" offset={8}>
-            <Text style={styles.newTabTooltipText}>New agent tab</Text>
+            <View style={styles.newTabTooltipRow}>
+              <Text style={styles.newTabTooltipText}>New agent tab</Text>
+              <Shortcut keys={["mod", "T"]} style={styles.newTabTooltipShortcut} />
+            </View>
           </TooltipContent>
         </Tooltip>
       </View>
@@ -488,4 +492,13 @@ const styles = StyleSheet.create((theme) => ({
     color: theme.colors.foreground,
     fontSize: theme.fontSize.sm,
   },
+  newTabTooltipRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.spacing[2],
+  },
+  newTabTooltipShortcut: {
+    backgroundColor: theme.colors.surface3,
+    borderColor: theme.colors.borderAccent,
+  },
 }));

packages/app/src/screens/workspace/workspace-screen.tsx

@@ -26,6 +26,7 @@ import { SidebarMenuToggle } from "@/components/headers/menu-header";
 import { HeaderToggleButton } from "@/components/headers/header-toggle-button";
 import { ScreenHeader } from "@/components/headers/screen-header";
 import { Combobox } from "@/components/ui/combobox";
+import { Shortcut } from "@/components/ui/shortcut";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -1157,38 +1158,36 @@ function WorkspaceScreenContent({
       return;
     }
 
-    if (workspaceTabActionRequest.kind === "new") {
+    const request = workspaceTabActionRequest;
+    clearWorkspaceTabActionRequest(request.id);
+
+    if (request.kind === "new") {
       handleCreateDraftTab();
-      clearWorkspaceTabActionRequest(workspaceTabActionRequest.id);
       return;
     }
-    if (workspaceTabActionRequest.kind === "close-current") {
+    if (request.kind === "close-current") {
       if (activeTabId) {
         void handleCloseTabById(activeTabId);
       }
-      clearWorkspaceTabActionRequest(workspaceTabActionRequest.id);
       return;
     }
-    if (workspaceTabActionRequest.kind === "navigate-index") {
-      const next = tabs[workspaceTabActionRequest.index - 1] ?? null;
+    if (request.kind === "navigate-index") {
+      const next = tabs[request.index - 1] ?? null;
       if (next?.tabId) {
         navigateToTabId(next.tabId);
       }
-      clearWorkspaceTabActionRequest(workspaceTabActionRequest.id);
       return;
     }
-    if (workspaceTabActionRequest.kind === "navigate-relative") {
+    if (request.kind === "navigate-relative") {
       if (tabs.length > 0) {
         const currentIndex = tabs.findIndex((tab) => tab.tabId === activeTabId);
         const fromIndex = currentIndex >= 0 ? currentIndex : 0;
-        const nextIndex =
-          (fromIndex + workspaceTabActionRequest.delta + tabs.length) % tabs.length;
+        const nextIndex = (fromIndex + request.delta + tabs.length) % tabs.length;
         const next = tabs[nextIndex] ?? null;
         if (next?.tabId) {
           navigateToTabId(next.tabId);
         }
       }
-      clearWorkspaceTabActionRequest(workspaceTabActionRequest.id);
     }
   }, [
     activeTabId,
@@ -1525,7 +1524,10 @@ function WorkspaceScreenContent({
                     <Plus size={theme.iconSize.sm} color={theme.colors.foregroundMuted} />
                   </TooltipTrigger>
                   <TooltipContent side="bottom" align="end" offset={8}>
-                    <Text style={styles.newTabTooltipText}>New agent tab</Text>
+                    <View style={styles.newTabTooltipRow}>
+                      <Text style={styles.newTabTooltipText}>New agent tab</Text>
+                      <Shortcut keys={["mod", "T"]} style={styles.newTabTooltipShortcut} />
+                    </View>
                   </TooltipContent>
                 </Tooltip>
 
@@ -1728,6 +1730,15 @@ const styles = StyleSheet.create((theme) => ({
     fontSize: theme.fontSize.sm,
     color: theme.colors.popoverForeground,
   },
+  newTabTooltipRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.spacing[2],
+  },
+  newTabTooltipShortcut: {
+    backgroundColor: theme.colors.surface3,
+    borderColor: theme.colors.borderAccent,
+  },
   mobileTabsRow: {
     borderBottomWidth: 1,
     borderBottomColor: theme.colors.border,