🤖 Eliminate prop drilling with AppContext

Replace 11-prop interface (AppInnerProps) with React Context pattern:
- Created AppContext to provide app-level state (projects, workspaces, selection)
- Updated AppLoader to wrap App with AppProvider
- Refactored App.tsx to use useApp() hook instead of props
- Updated LeftSidebar to consume context directly

Benefits:
- Decoupling: Components access data directly without parent involvement
- Scalability: Adding state touches 2 files instead of 3+
- Consistency: Matches existing patterns (ModeContext, ThinkingContext)
- Readability: No verbose prop interfaces, clear separation of concerns

Net: +96 insertions, -74 deletions

Author: ammar-agent

src/App.tsx

@@ -1,13 +1,6 @@
-import {
-  useState,
-  useEffect,
-  useCallback,
-  useRef,
-  type Dispatch,
-  type SetStateAction,
-} from "react";
+import { useState, useEffect, useCallback, useRef } from "react";
 import "./styles/globals.css";
-import type { ProjectConfig } from "./config";
+import { useApp } from "./contexts/AppContext";
 import type { WorkspaceSelection } from "./components/ProjectSidebar";
 import type { FrontendWorkspaceMetadata } from "./types/workspace";
 import { LeftSidebar } from "./components/LeftSidebar";
@@ -37,48 +30,20 @@ import { useTelemetry } from "./hooks/useTelemetry";
 
 const THINKING_LEVELS: ThinkingLevel[] = ["off", "low", "medium", "high"];
 
-interface AppInnerProps {
-  projects: Map<string, ProjectConfig>;
-  setProjects: Dispatch<SetStateAction<Map<string, ProjectConfig>>>;
-  addProject: () => Promise<void>;
-  removeProject: (path: string) => Promise<void>;
-  workspaceMetadata: Map<string, FrontendWorkspaceMetadata>;
-  setWorkspaceMetadata: Dispatch<SetStateAction<Map<string, FrontendWorkspaceMetadata>>>;
-  createWorkspace: (
-    projectPath: string,
-    branchName: string,
-    trunkBranch: string
-  ) => Promise<{
-    projectPath: string;
-    projectName: string;
-    namedWorkspacePath: string;
-    workspaceId: string;
-  }>;
-  removeWorkspace: (
-    workspaceId: string,
-    options?: { force?: boolean }
-  ) => Promise<{ success: boolean; error?: string }>;
-  renameWorkspace: (
-    workspaceId: string,
-    newName: string
-  ) => Promise<{ success: boolean; error?: string }>;
-  selectedWorkspace: WorkspaceSelection | null;
-  setSelectedWorkspace: (workspace: WorkspaceSelection | null) => void;
-}
-
-function AppInner({
-  projects,
-  setProjects: _setProjects,
-  addProject,
-  removeProject,
-  workspaceMetadata,
-  setWorkspaceMetadata,
-  createWorkspace,
-  removeWorkspace,
-  renameWorkspace,
-  selectedWorkspace,
-  setSelectedWorkspace,
-}: AppInnerProps) {
+function AppInner() {
+  // Get app-level state from context
+  const {
+    projects,
+    addProject,
+    removeProject,
+    workspaceMetadata,
+    setWorkspaceMetadata,
+    createWorkspace,
+    removeWorkspace,
+    renameWorkspace,
+    selectedWorkspace,
+    setSelectedWorkspace,
+  } = useApp();
   const [workspaceModalOpen, setWorkspaceModalOpen] = useState(false);
   const [workspaceModalProject, setWorkspaceModalProject] = useState<string | null>(null);
   const [workspaceModalProjectName, setWorkspaceModalProjectName] = useState<string>("");
@@ -642,15 +607,10 @@ function AppInner({
     <>
       <div className="bg-bg-dark flex h-screen overflow-hidden [@media(max-width:768px)]:flex-col">
         <LeftSidebar
-          projects={projects}
-          workspaceMetadata={workspaceMetadata}
-          selectedWorkspace={selectedWorkspace}
           onSelectWorkspace={handleWorkspaceSwitch}
           onAddProject={handleAddProjectCallback}
           onAddWorkspace={handleAddWorkspaceCallback}
           onRemoveProject={handleRemoveProjectCallback}
-          onRemoveWorkspace={removeWorkspace}
-          onRenameWorkspace={renameWorkspace}
           lastReadTimestamps={lastReadTimestamps}
           onToggleUnread={onToggleUnread}
           collapsed={sidebarCollapsed}
@@ -724,10 +684,10 @@ function AppInner({
   );
 }
 
-function App(props: AppInnerProps) {
+function App() {
   return (
     <CommandRegistryProvider>
-      <AppInner {...props} />
+      <AppInner />
     </CommandRegistryProvider>
   );
 }

src/components/AppLoader.tsx

@@ -7,6 +7,7 @@ import { useWorkspaceStoreRaw } from "../stores/WorkspaceStore";
 import { useGitStatusStoreRaw } from "../stores/GitStatusStore";
 import { usePersistedState } from "../hooks/usePersistedState";
 import type { WorkspaceSelection } from "./ProjectSidebar";
+import { AppProvider } from "../contexts/AppContext";
 
 /**
  * AppLoader handles all initialization before rendering the main App:
@@ -100,9 +101,9 @@ export function AppLoader() {
     return <LoadingScreen />;
   }
 
-  // Render App with all initialized data
+  // Render App with all initialized data via context
   return (
-    <App
+    <AppProvider
       projects={projectManagement.projects}
       setProjects={projectManagement.setProjects}
       addProject={projectManagement.addProject}
@@ -114,6 +115,8 @@ export function AppLoader() {
       renameWorkspace={workspaceManagement.renameWorkspace}
       selectedWorkspace={selectedWorkspace}
       setSelectedWorkspace={setSelectedWorkspace}
-    />
+    >
+      <App />
+    </AppProvider>
   );
 }

src/components/LeftSidebar.tsx

@@ -1,28 +1,17 @@
 import React from "react";
 import { cn } from "@/lib/utils";
-import type { ProjectConfig } from "@/config";
 import type { FrontendWorkspaceMetadata } from "@/types/workspace";
-import type { WorkspaceSelection } from "./ProjectSidebar";
 import type { Secret } from "@/types/secrets";
 import ProjectSidebar from "./ProjectSidebar";
 import { TitleBar } from "./TitleBar";
+import { useApp } from "@/contexts/AppContext";
+import type { WorkspaceSelection } from "./ProjectSidebar";
 
 interface LeftSidebarProps {
-  projects: Map<string, ProjectConfig>;
-  workspaceMetadata: Map<string, FrontendWorkspaceMetadata>;
-  selectedWorkspace: WorkspaceSelection | null;
   onSelectWorkspace: (selection: WorkspaceSelection) => void;
   onAddProject: () => void;
   onAddWorkspace: (projectPath: string) => void;
   onRemoveProject: (path: string) => void;
-  onRemoveWorkspace: (
-    workspaceId: string,
-    options?: { force?: boolean }
-  ) => Promise<{ success: boolean; error?: string }>;
-  onRenameWorkspace: (
-    workspaceId: string,
-    newName: string
-  ) => Promise<{ success: boolean; error?: string }>;
   lastReadTimestamps: Record<string, number>;
   onToggleUnread: (workspaceId: string) => void;
   collapsed: boolean;
@@ -36,6 +25,10 @@ interface LeftSidebarProps {
 export function LeftSidebar(props: LeftSidebarProps) {
   const { collapsed, onToggleCollapsed, ...projectSidebarProps } = props;
 
+  // Get app-level state from context
+  const { projects, workspaceMetadata, selectedWorkspace, removeWorkspace, renameWorkspace } =
+    useApp();
+
   return (
     <>
       {/* Hamburger menu button - only visible on mobile */}
@@ -82,6 +75,11 @@ export function LeftSidebar(props: LeftSidebarProps) {
         {!collapsed && <TitleBar />}
         <ProjectSidebar
           {...projectSidebarProps}
+          projects={projects}
+          workspaceMetadata={workspaceMetadata}
+          selectedWorkspace={selectedWorkspace}
+          onRemoveWorkspace={removeWorkspace}
+          onRenameWorkspace={renameWorkspace}
           collapsed={collapsed}
           onToggleCollapsed={onToggleCollapsed}
         />

src/contexts/AppContext.tsx

@@ -0,0 +1,61 @@
+import type { ReactNode, Dispatch, SetStateAction } from "react";
+import { createContext, useContext } from "react";
+import type { ProjectConfig } from "@/config";
+import type { FrontendWorkspaceMetadata } from "@/types/workspace";
+import type { WorkspaceSelection } from "@/components/ProjectSidebar";
+
+/**
+ * App-level state and operations shared across the component tree.
+ * Eliminates prop drilling for common data like projects, workspaces, and selection.
+ */
+interface AppContextType {
+  // Projects
+  projects: Map<string, ProjectConfig>;
+  setProjects: Dispatch<SetStateAction<Map<string, ProjectConfig>>>;
+  addProject: () => Promise<void>;
+  removeProject: (path: string) => Promise<void>;
+
+  // Workspaces
+  workspaceMetadata: Map<string, FrontendWorkspaceMetadata>;
+  setWorkspaceMetadata: Dispatch<SetStateAction<Map<string, FrontendWorkspaceMetadata>>>;
+  createWorkspace: (
+    projectPath: string,
+    branchName: string,
+    trunkBranch: string
+  ) => Promise<{
+    projectPath: string;
+    projectName: string;
+    namedWorkspacePath: string;
+    workspaceId: string;
+  }>;
+  removeWorkspace: (
+    workspaceId: string,
+    options?: { force?: boolean }
+  ) => Promise<{ success: boolean; error?: string }>;
+  renameWorkspace: (
+    workspaceId: string,
+    newName: string
+  ) => Promise<{ success: boolean; error?: string }>;
+
+  // Selection
+  selectedWorkspace: WorkspaceSelection | null;
+  setSelectedWorkspace: (workspace: WorkspaceSelection | null) => void;
+}
+
+const AppContext = createContext<AppContextType | undefined>(undefined);
+
+interface AppProviderProps extends AppContextType {
+  children: ReactNode;
+}
+
+export const AppProvider: React.FC<AppProviderProps> = ({ children, ...value }) => {
+  return <AppContext.Provider value={value}>{children}</AppContext.Provider>;
+};
+
+export const useApp = (): AppContextType => {
+  const context = useContext(AppContext);
+  if (!context) {
+    throw new Error("useApp must be used within AppProvider");
+  }
+  return context;
+};