feat: balance layout and kbd workspace navigation

src/components/LayoutControls.tsx

@@ -6,6 +6,7 @@ import {
   Sparkles,
   SplitSquareHorizontal,
   SplitSquareVertical,
+  Scale,
 } from "lucide-react";
 import { Button } from "./ui/button";
 import { useGrimoire } from "@/core/state";
@@ -22,7 +23,8 @@ import { toast } from "sonner";
 import type { LayoutConfig } from "@/types/app";
 
 export function LayoutControls() {
-  const { state, applyPresetLayout, updateLayoutConfig } = useGrimoire();
+  const { state, applyPresetLayout, balanceLayout, updateLayoutConfig } =
+    useGrimoire();
   const { workspaces, activeWorkspaceId, layoutConfig } = state;
 
   const activeWorkspace = workspaces[activeWorkspaceId];
@@ -97,6 +99,26 @@ export function LayoutControls() {
     updateLayoutConfig({ splitPercentage: newValue });
   };
 
+  const handleBalance = () => {
+    try {
+      // Enable animations for smooth transition
+      document.body.classList.add("animating-layout");
+
+      balanceLayout();
+
+      // Remove animation class after transition completes
+      setTimeout(() => {
+        document.body.classList.remove("animating-layout");
+      }, 180);
+    } catch (error) {
+      document.body.classList.remove("animating-layout");
+      toast.error(`Failed to balance layout`, {
+        description:
+          error instanceof Error ? error.message : "Unknown error occurred",
+      });
+    }
+  };
+
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
@@ -214,6 +236,26 @@ export function LayoutControls() {
             </Button>
           </div>
         </div>
+
+        <DropdownMenuSeparator />
+
+        {/* Actions Section */}
+        <div className="px-2 py-1.5 text-xs font-semibold text-muted-foreground">
+          Actions
+        </div>
+        <DropdownMenuItem
+          onClick={handleBalance}
+          disabled={windowCount < 2}
+          className="flex items-center gap-2 cursor-pointer"
+        >
+          <Scale className="h-3.5 w-3.5" />
+          <span className="flex-1">Balance Splits</span>
+          {windowCount < 2 && (
+            <span className="text-xs text-muted-foreground">
+              Need 2+ windows
+            </span>
+          )}
+        </DropdownMenuItem>
       </DropdownMenuContent>
     </DropdownMenu>
   );

src/components/TabBar.tsx

@@ -3,6 +3,7 @@ import { Button } from "./ui/button";
 import { useGrimoire } from "@/core/state";
 import { cn } from "@/lib/utils";
 import { LayoutControls } from "./LayoutControls";
+import { useEffect } from "react";
 
 export function TabBar() {
   const { state, setActiveWorkspace, createWorkspace } = useGrimoire();
@@ -12,11 +13,30 @@ export function TabBar() {
     createWorkspace();
   };
 
-  // Sort workspaces by number
+  // Sort workspaces by number (for both rendering and keyboard shortcuts)
   const sortedWorkspaces = Object.values(workspaces).sort(
     (a, b) => a.number - b.number,
   );
 
+  // Keyboard shortcut: Cmd+1-9 to switch workspaces by position
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      // Check for Cmd/Ctrl + number key (1-9)
+      if ((e.metaKey || e.ctrlKey) && e.key >= "1" && e.key <= "9") {
+        const index = Number.parseInt(e.key, 10) - 1; // Convert key to array index
+        const targetWorkspace = sortedWorkspaces[index];
+
+        if (targetWorkspace) {
+          e.preventDefault(); // Prevent browser default (like Cmd+1 = first tab)
+          setActiveWorkspace(targetWorkspace.id);
+        }
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [sortedWorkspaces, setActiveWorkspace]);
+
   return (
     <>
       <div className="h-8 border-t border-border bg-background flex items-center px-2 gap-1 overflow-x-auto">