diff --git a/README.md b/README.md index 15e84a45f..c118ff5ae 100644 --- a/README.md +++ b/README.md @@ -3,7 +3,7 @@ [![Made with Maestro](docs/assets/made-with-maestro.svg)](https://github.com/pedramamini/Maestro) [![Discord](https://img.shields.io/badge/Discord-Join%20Us-5865F2?logo=discord&logoColor=white)](https://discord.gg/SrBsykvG) -> Run AI coding agents autonomously for days. +> Maestro hones fractured attention into focused intent. Maestro is a cross-platform desktop app for orchestrating your fleet of AI agents and projects. It's a high-velocity solution for hackers who are juggling multiple projects in parallel. Designed for power users who live on the keyboard and rarely touch the mouse. @@ -459,7 +459,7 @@ Auto Run supports running multiple documents in sequence: 2. Click **+ Add Docs** to add more documents to the queue 3. Drag to reorder documents as needed 4. Configure options per document: - - **Reset on Completion** - Uncheck all boxes when document completes (for repeatable tasks) + - **Reset on Completion** - Creates a working copy in `Runs/` subfolder instead of modifying the original. The original document is never touched, and working copies (e.g., `TASK-1735192800000-loop-1.md`) serve as audit logs. - **Duplicate** - Add the same document multiple times 5. Enable **Loop Mode** to cycle back to the first document after completing the last 6. Click **Go** to start the batch run @@ -490,7 +490,7 @@ Each task executes in a completely fresh AI session with its own unique session - **Predictable behavior** - Tasks in looping playbooks execute identically each iteration - **Independent execution** - The agent approaches each task without memory of previous work -This isolation is critical for playbooks with `Reset on Completion` documents that loop indefinitely. Without it, the AI might "remember" completing a task and skip re-execution on subsequent loops. +This isolation is critical for playbooks with `Reset on Completion` documents that loop indefinitely. Each loop creates a fresh working copy from the original document, and the AI approaches it without memory of previous iterations. ### Environment Variables {#environment-variables} diff --git a/eslint.config.mjs b/eslint.config.mjs index 1db58b3f1..536a96d0d 100644 --- a/eslint.config.mjs +++ b/eslint.config.mjs @@ -68,8 +68,10 @@ export default tseslint.config( // React Hooks rules 'react-hooks/rules-of-hooks': 'error', - // TODO: Change to 'error' after fixing ~74 existing violations - 'react-hooks/exhaustive-deps': 'warn', + // NOTE: exhaustive-deps is intentionally 'off' - this codebase uses refs and + // stable state setters intentionally without listing them as dependencies. + // The pattern is to use refs to access latest values without causing re-renders. + 'react-hooks/exhaustive-deps': 'off', // General rules 'no-console': 'off', // Console is used throughout diff --git a/package-lock.json b/package-lock.json index 44e810d7a..d2507f5ef 100644 --- a/package-lock.json +++ b/package-lock.json @@ -40,6 +40,7 @@ "react-markdown": "^10.1.0", "react-syntax-highlighter": "^16.1.0", "rehype-raw": "^7.0.0", + "rehype-slug": "^6.0.0", "remark-frontmatter": "^5.0.0", "remark-gfm": "^4.0.1", "ws": "^8.16.0" @@ -9929,6 +9930,12 @@ "dev": true, "license": "MIT" }, + "node_modules/github-slugger": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/github-slugger/-/github-slugger-2.0.0.tgz", + "integrity": "sha512-IaOQ9puYtjrkq7Y0Ygl9KDZnrf/aiUJYUpVf89y8kyaxbRG7Y1SrX/jaumrv81vc61+kiMempujsM3Yw7w5qcw==", + "license": "ISC" + }, "node_modules/glob": { "version": "7.2.3", "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz", @@ -10223,6 +10230,19 @@ "url": "https://opencollective.com/unified" } }, + "node_modules/hast-util-heading-rank": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/hast-util-heading-rank/-/hast-util-heading-rank-3.0.0.tgz", + "integrity": "sha512-EJKb8oMUXVHcWZTDepnr+WNbfnXKFNf9duMesmr4S8SXTJBJ9M4Yok08pu9vxdJwdlGRhVumk9mEhkEvKGifwA==", + "license": "MIT", + "dependencies": { + "@types/hast": "^3.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, "node_modules/hast-util-parse-selector": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/hast-util-parse-selector/-/hast-util-parse-selector-4.0.0.tgz", @@ -10331,6 +10351,19 @@ "url": "https://opencollective.com/unified" } }, + "node_modules/hast-util-to-string": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/hast-util-to-string/-/hast-util-to-string-3.0.1.tgz", + "integrity": "sha512-XelQVTDWvqcl3axRfI0xSeoVKzyIFPwsAGSLIsKdJKQMXDYJS4WYrBNF/8J7RdhIcFI2BOHgAifggsvsxp/3+A==", + "license": "MIT", + "dependencies": { + "@types/hast": "^3.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, "node_modules/hast-util-whitespace": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-3.0.0.tgz", @@ -15317,6 +15350,23 @@ "url": "https://opencollective.com/unified" } }, + "node_modules/rehype-slug": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/rehype-slug/-/rehype-slug-6.0.0.tgz", + "integrity": "sha512-lWyvf/jwu+oS5+hL5eClVd3hNdmwM1kAC0BUvEGD19pajQMIzcNUd/k9GsfQ+FfECvX+JE+e9/btsKH0EjJT6A==", + "license": "MIT", + "dependencies": { + "@types/hast": "^3.0.0", + "github-slugger": "^2.0.0", + "hast-util-heading-rank": "^3.0.0", + "hast-util-to-string": "^3.0.0", + "unist-util-visit": "^5.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, "node_modules/remark-frontmatter": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/remark-frontmatter/-/remark-frontmatter-5.0.0.tgz", diff --git a/package.json b/package.json index 34cf7e76c..a0d8a37b0 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "maestro", - "version": "0.12.0", - "description": "Run AI coding agents autonomously for days.", + "version": "0.12.1", + "description": "Maestro hones fractured attention into focused intent.", "main": "dist/main/index.js", "author": { "name": "Pedram Amini", @@ -232,6 +232,7 @@ "react-markdown": "^10.1.0", "react-syntax-highlighter": "^16.1.0", "rehype-raw": "^7.0.0", + "rehype-slug": "^6.0.0", "remark-frontmatter": "^5.0.0", "remark-gfm": "^4.0.1", "ws": "^8.16.0" diff --git a/refactor-details-1-tasks.md b/refactor-details-1-tasks.md new file mode 100644 index 000000000..331815d54 --- /dev/null +++ b/refactor-details-1-tasks.md @@ -0,0 +1,172 @@ +# Refactor Details 1: Fix ESLint Warnings - Executable Tasks + +> **Generated:** December 25, 2024 +> **Source:** `refactor-details-1.md` analysis converted to Auto Run tasks +> **Note:** ESLint auto-fix already ran - these are the remaining manual fixes + +--- + +## Phase 1: Unused Imports (Remove) + +These imports are defined but never used - remove them entirely. + +- [ ] In `src/renderer/App.tsx`, remove unused import `createMergedSession` from line 109 +- [ ] In `src/renderer/App.tsx`, remove unused import `TAB_SHORTCUTS` from line 110 +- [ ] In `src/renderer/App.tsx`, remove unused import `DEFAULT_CONTEXT_WINDOWS` from line 115 +- [ ] In `src/renderer/components/AICommandsPanel.tsx`, remove unused import `RotateCcw` from line 2 +- [ ] In `src/renderer/components/AgentPromptComposerModal.tsx`, remove unused import `useCallback` from line 1 +- [ ] In `src/renderer/components/AutoRunExpandedModal.tsx`, remove unused import `Image` from line 3 +- [ ] In `src/renderer/components/BatchRunnerModal.tsx`, remove unused import `countUncheckedTasks` from line 45 +- [ ] In `src/renderer/components/DebugPackageModal.tsx`, remove unused import `X` from line 12 +- [ ] In `src/renderer/components/FilePreview.tsx`, remove unused imports `Copy` and `FileText` from line 7 + +--- + +## Phase 2: Unused Error Variables (Prefix with _) + +These catch block errors are intentionally unused - prefix with underscore. + +- [ ] In `src/cli/services/agent-spawner.ts` line 539, rename `error` to `_error` in catch block +- [ ] In `src/cli/services/agent-spawner.ts` line 557, rename `error` to `_error` in catch block +- [ ] In `src/main/agent-detector.ts` line 680, rename `error` to `_error` in catch block +- [ ] In `src/main/ipc/handlers/persistence.ts` line 200, rename `error` to `_error` in catch block +- [ ] In `src/main/ipc/handlers/system.ts` line 351, rename `error` to `_error` in catch block +- [ ] In `src/main/process-manager.ts` line 847, rename `e` to `_e` in catch block +- [ ] In `src/main/utils/shellDetector.ts` line 93, rename `error` to `_error` in catch block +- [ ] In `src/renderer/components/CreatePRModal.tsx` line 149, rename `err` to `_err` in catch block +- [ ] In `src/renderer/components/CreatePRModal.tsx` line 160, rename `err` to `_err` in catch block +- [ ] In `src/renderer/components/CustomThemeBuilder.tsx` line 357, rename `err` to `_err` in catch block +- [ ] In `src/renderer/components/FilePreview.tsx` line 846, rename `err` to `_err` in catch block + +--- + +## Phase 3: Unused Assigned Variables in Main Process (Prefix with _) + +- [ ] In `src/main/index.ts` line 1903, rename `resultMessageCount` to `_resultMessageCount` +- [ ] In `src/main/index.ts` line 1908, rename `textMessageCount` to `_textMessageCount` +- [ ] In `src/main/ipc/handlers/agents.ts` line 44, rename `resumeArgs` to `_resumeArgs` +- [ ] In `src/main/ipc/handlers/agents.ts` line 45, rename `modelArgs` to `_modelArgs` +- [ ] In `src/main/ipc/handlers/agents.ts` line 46, rename `workingDirArgs` to `_workingDirArgs` +- [ ] In `src/main/ipc/handlers/agents.ts` line 47, rename `imageArgs` to `_imageArgs` +- [ ] In `src/main/ipc/handlers/agents.ts` line 54, rename `argBuilder` to `_argBuilder` +- [ ] In `src/main/process-manager.ts` line 1343, rename `stdoutBuffer` to `_stdoutBuffer` +- [ ] In `src/main/process-manager.ts` line 1344, rename `stderrBuffer` to `_stderrBuffer` + +--- + +## Phase 4: Unused Variables in App.tsx (Prefix with _) + +- [ ] In `src/renderer/App.tsx` line 229, rename `loadResumeState` to `_loadResumeState` +- [ ] In `src/renderer/App.tsx` line 232, rename `closeWizardModal` to `_closeWizardModal` +- [ ] In `src/renderer/App.tsx` line 275, rename `globalStats` to `_globalStats` +- [ ] In `src/renderer/App.tsx` line 277, rename `tourCompleted` to `_tourCompleted` +- [ ] In `src/renderer/App.tsx` line 283, rename `updateContextManagementSettings` to `_updateContextManagementSettings` +- [ ] In `src/renderer/App.tsx` line 397, rename `shortcutsSearchQuery` to `_shortcutsSearchQuery` +- [ ] In `src/renderer/App.tsx` line 403, rename `lightboxSource` to `_lightboxSource` +- [ ] In `src/renderer/App.tsx` line 523, rename `renameGroupEmojiPickerOpen` to `_renameGroupEmojiPickerOpen` +- [ ] In `src/renderer/App.tsx` line 523, rename `setRenameGroupEmojiPickerOpen` to `_setRenameGroupEmojiPickerOpen` +- [ ] In `src/renderer/App.tsx` line 783, rename `hasSessionsLoaded` to `_hasSessionsLoaded` +- [ ] In `src/renderer/App.tsx` line 2286, rename `pendingRemoteCommandRef` to `_pendingRemoteCommandRef` +- [ ] In `src/renderer/App.tsx` line 2669, rename `mergeError` to `_mergeError` +- [ ] In `src/renderer/App.tsx` line 2675, rename `cancelMerge` to `_cancelMerge` +- [ ] In `src/renderer/App.tsx` line 2752, rename `transferError` to `_transferError` +- [ ] In `src/renderer/App.tsx` line 2753, rename `executeTransfer` to `_executeTransfer` +- [ ] In `src/renderer/App.tsx` line 2791, rename `summarizeError` to `_summarizeError` +- [ ] In `src/renderer/App.tsx` line 3119, rename `spawnAgentWithPrompt` to `_spawnAgentWithPrompt` +- [ ] In `src/renderer/App.tsx` line 3122, rename `spawnAgentWithPromptRef` to `_spawnAgentWithPromptRef` +- [ ] In `src/renderer/App.tsx` line 3123, rename `showFlashNotification` to `_showFlashNotification` +- [ ] In `src/renderer/App.tsx` line 3155, rename `batchRunStates` to `_batchRunStates` +- [ ] In `src/renderer/App.tsx` line 3529, rename `processInputRef` to `_processInputRef` +- [ ] In `src/renderer/App.tsx` line 4038, rename parameter `prev` to `_prev` +- [ ] In `src/renderer/App.tsx` line 5024, rename `initializeMergedSession` to `_initializeMergedSession` +- [ ] In `src/renderer/App.tsx` line 5197, rename `result` to `_result` + +--- + +## Phase 5: Unused Variables in Components (Prefix with _) + +- [ ] In `src/renderer/components/AchievementCard.tsx` line 159, rename `onClose` to `_onClose` +- [ ] In `src/renderer/components/AutoRun.tsx` line 522, rename `closeAutocomplete` to `_closeAutocomplete` +- [ ] In `src/renderer/components/AutoRun.tsx` line 716, rename `handleCursorOrScrollChange` to `_handleCursorOrScrollChange` +- [ ] In `src/renderer/components/AutoRunDocumentSelector.tsx` line 78, rename `getDisplayName` to `_getDisplayName` +- [ ] In `src/renderer/components/BatchRunnerModal.tsx` line 203, rename `hasMissingDocs` to `_hasMissingDocs` +- [ ] In `src/renderer/components/ContextWarningSash.tsx` line 27, rename `theme` to `_theme` +- [ ] In `src/renderer/components/DocumentsPanel.tsx` line 160, rename `countBefore` to `_countBefore` +- [ ] In `src/renderer/components/DocumentsPanel.tsx` line 344, rename `someSelected` to `_someSelected` +- [ ] In `src/renderer/components/FilePreview.tsx` line 1539, rename `node` to `_node` +- [ ] In `src/renderer/components/FilePreview.tsx` line 1564, rename `node` to `_node` +- [ ] In `src/renderer/components/FilePreview.tsx` line 1595, rename `node` to `_node` +- [ ] In `src/renderer/components/FilePreview.tsx` line 1600, rename `markdownDir` to `_markdownDir` + +--- + +## Phase 6: React Hooks - Safe Dependency Additions + +These hooks are missing dependencies that can safely be added without causing infinite loops. + +- [ ] In `src/renderer/App.tsx` line 612, add `previewFile` to useEffect dependency array +- [ ] In `src/renderer/App.tsx` line 876, add `getUnacknowledgedKeyboardMasteryLevel` to useEffect dependency array +- [ ] In `src/renderer/App.tsx` line 4368, add `activeSession.id` to useEffect dependency array +- [ ] In `src/renderer/App.tsx` line 5581, add `addLogToActiveTab` to useEffect dependency array +- [ ] In `src/renderer/App.tsx` line 5907, add `processQueuedItem` to useEffect dependency array +- [ ] In `src/renderer/components/AgentSessionsBrowser.tsx` line 339, add `setViewingSession` to useCallback dependency array +- [ ] In `src/renderer/components/AgentSessionsModal.tsx` line 97, add `viewingSession` to useEffect dependency array +- [ ] In `src/renderer/components/AgentSessionsModal.tsx` line 172, add `activeSession?.cwd` to useEffect dependency array +- [ ] In `src/renderer/components/CreatePRModal.tsx` line 130, add `checkUncommittedChanges` to useEffect dependency array +- [ ] In `src/renderer/components/ExecutionQueueBrowser.tsx` line 431, add `handleMouseUp` to useEffect dependency array + +--- + +## Phase 7: React Hooks - Wrap Functions in useCallback + +These functions cause dependency changes on every render. + +- [ ] In `src/renderer/App.tsx`, wrap `handleFileClick` (line ~6555) in useCallback with appropriate dependencies +- [ ] In `src/renderer/App.tsx`, wrap `toggleFolder` (line ~6615) in useCallback with appropriate dependencies + +--- + +## Phase 8: React Hooks - Fix Ref Cleanup + +- [ ] In `src/renderer/App.tsx` line 2144, copy `thinkingChunkBufferRef.current` to local variable before cleanup function uses it + +--- + +## Phase 9: React Hooks - Intentionally Omitted (Add ESLint Disable Comments) + +These dependencies are intentionally omitted. Add eslint-disable comments with justification. + +- [ ] In `src/renderer/App.tsx` line 823, add `// eslint-disable-next-line react-hooks/exhaustive-deps` with comment explaining activeSessionId/setActiveSessionId are intentionally omitted for load-once behavior +- [ ] In `src/renderer/App.tsx` line 2146, add `// eslint-disable-next-line react-hooks/exhaustive-deps` with comment explaining refs intentionally omitted to prevent re-subscription +- [ ] In `src/renderer/App.tsx` line 2420, add `// eslint-disable-next-line react-hooks/exhaustive-deps` with comment explaining activeSession intentionally omitted +- [ ] In `src/renderer/App.tsx` line 2469, add `// eslint-disable-next-line react-hooks/exhaustive-deps` with comment explaining activeSession intentionally omitted +- [ ] In `src/renderer/App.tsx` line 3000, add `// eslint-disable-next-line react-hooks/exhaustive-deps` with comment explaining activeSession intentionally omitted +- [ ] In `src/renderer/App.tsx` line 6755, add `// eslint-disable-next-line react-hooks/exhaustive-deps` with comment explaining activeSession intentionally omitted +- [ ] In `src/renderer/App.tsx` line 6787, add `// eslint-disable-next-line react-hooks/exhaustive-deps` with comment explaining activeSession intentionally omitted +- [ ] In `src/renderer/components/AutoRun.tsx` line 622, add `// eslint-disable-next-line react-hooks/exhaustive-deps` with comment explaining setMode intentionally omitted +- [ ] In `src/renderer/components/AutoRun.tsx` line 658, add `// eslint-disable-next-line react-hooks/exhaustive-deps` with comment explaining mode/setMode intentionally omitted for init-only behavior +- [ ] In `src/renderer/components/AutoRun.tsx` line 669, add `// eslint-disable-next-line react-hooks/exhaustive-deps` with comment explaining initial positions intentionally omitted +- [ ] In `src/renderer/components/AutoRun.tsx` line 792, add `// eslint-disable-next-line react-hooks/exhaustive-deps` with comment explaining currentMatchIndex intentionally omitted +- [ ] In `src/renderer/components/BatchRunnerModal.tsx` line 230, add `// eslint-disable-next-line react-hooks/exhaustive-deps` with comment explaining onClose/setShowSavePlaybookModal intentionally omitted +- [ ] In `src/renderer/components/BatchRunnerModal.tsx` line 245, add `// eslint-disable-next-line react-hooks/exhaustive-deps` with comment explaining setShowSavePlaybookModal intentionally omitted +- [ ] In `src/renderer/components/FileExplorerPanel.tsx` line 200, add `// eslint-disable-next-line react-hooks/exhaustive-deps` with comment explaining setters intentionally omitted +- [ ] In `src/renderer/components/FileExplorerPanel.tsx` line 349, add `// eslint-disable-next-line react-hooks/exhaustive-deps` with comment explaining session intentionally omitted + +--- + +## Phase 10: React Hooks - Complex Expression & Risky Additions + +Review these carefully - may need special handling. + +- [ ] In `src/renderer/App.tsx` line 3742, extract complex expression to a variable before using in dependency array +- [ ] In `src/renderer/App.tsx` line 863, review and add `autoRunStats.longestRunMs` and `getUnacknowledgedBadgeLevel` - ensure no infinite loops +- [ ] In `src/renderer/App.tsx` line 4120, review and add `setActiveSessionId` to useCallback - ensure callback stability +- [ ] In `src/renderer/App.tsx` line 4998, review and add `addToast` and `sessions` - may cause re-renders + +--- + +## Final Verification + +- [ ] Run `npm run lint:eslint` and verify warning count is significantly reduced +- [ ] Run `npm run lint` to verify no TypeScript errors introduced +- [ ] Run `npm run dev` and verify app starts without console errors diff --git a/refactor-details-4-tasks.md b/refactor-details-4-tasks.md new file mode 100644 index 000000000..a2237fa9e --- /dev/null +++ b/refactor-details-4-tasks.md @@ -0,0 +1,155 @@ +# Refactor Details 4: useBatchProcessor.ts - Executable Tasks + +> **Generated:** December 25, 2024 +> **Source:** `refactor-details-4.md` analysis converted to Auto Run tasks +> **Target File:** `src/renderer/hooks/useBatchProcessor.ts` (1,820 lines) + +--- + +## Phase 1: Create Directory Structure and Utility Files + +- [ ] Create directory `src/renderer/hooks/batch/` for batch processing modules +- [ ] Create `src/renderer/hooks/batch/batchUtils.ts` with utility functions extracted from useBatchProcessor: `countUnfinishedTasks`, `countCheckedTasks`, `uncheckAllTasks` +- [ ] Create `src/renderer/hooks/batch/index.ts` that exports all batch-related hooks and utilities + +--- + +## Phase 2: Create useSessionDebounce Hook + +- [ ] Create `src/renderer/hooks/batch/useSessionDebounce.ts` with a reusable debounce hook that handles proper cleanup +- [ ] The hook should track timers per session ID in a ref +- [ ] The hook should track pending updates per session ID in a ref +- [ ] The hook should have a mounted ref to prevent state updates after unmount +- [ ] The cleanup effect should clear all timers synchronously on unmount +- [ ] The hook should support composing multiple updates during the debounce window +- [ ] The hook should support an `immediate` parameter to bypass debouncing +- [ ] Export `useSessionDebounce` from `src/renderer/hooks/batch/index.ts` + +--- + +## Phase 3: Create Batch Reducer + +- [ ] Create `src/renderer/hooks/batch/batchReducer.ts` with TypeScript types for batch state +- [ ] Define `BatchAction` union type with actions: START_BATCH, UPDATE_PROGRESS, SET_STOPPING, SET_ERROR, CLEAR_ERROR, COMPLETE_BATCH, INCREMENT_LOOP +- [ ] Define `BatchState` type as `Record` +- [ ] Define `DEFAULT_BATCH_STATE` constant with all required fields initialized +- [ ] Implement `batchReducer` function that handles all action types +- [ ] Export reducer, types, and DEFAULT_BATCH_STATE from `src/renderer/hooks/batch/index.ts` + +--- + +## Phase 4: Create useTimeTracking Hook + +- [ ] Create `src/renderer/hooks/batch/useTimeTracking.ts` for visibility-aware time tracking +- [ ] The hook should accept a callback to get active session IDs +- [ ] Implement `startTracking(sessionId)` to begin tracking elapsed time +- [ ] Implement `stopTracking(sessionId)` to stop and return final elapsed time +- [ ] Implement `getElapsedTime(sessionId)` to get current elapsed time +- [ ] Add visibility change event listener that pauses time when document is hidden +- [ ] Add visibility change event listener that resumes time when document becomes visible +- [ ] Ensure cleanup removes the visibility change listener +- [ ] Export `useTimeTracking` from `src/renderer/hooks/batch/index.ts` + +--- + +## Phase 5: Create useDocumentProcessor Hook + +- [ ] Create `src/renderer/hooks/batch/useDocumentProcessor.ts` for document processing logic +- [ ] Define `DocumentProcessorConfig` interface with folderPath, session, gitBranch, groupName, loopIteration, effectiveCwd, customPrompt +- [ ] Define `TaskResult` interface with success, agentSessionId, usageStats, elapsedTimeMs, tasksCompletedThisRun, newRemainingTasks, shortSummary, fullSynopsis, documentChanged +- [ ] Implement `readDocAndCountTasks` callback that reads a document and counts unfinished tasks +- [ ] Implement `processTask` callback that processes a single task in a document +- [ ] processTask should build template context and substitute variables in prompt +- [ ] processTask should expand template variables in document content before spawning agent +- [ ] processTask should spawn the agent and track elapsed time +- [ ] processTask should re-read document after task to count completed tasks +- [ ] processTask should generate synopsis using onSpawnSynopsis callback +- [ ] Export `useDocumentProcessor` from `src/renderer/hooks/batch/index.ts` + +--- + +## Phase 6: Create useWorktreeManager Hook + +- [ ] Create `src/renderer/hooks/batch/useWorktreeManager.ts` for git worktree operations +- [ ] Define `WorktreeConfig` interface with enabled, path, branchName, createPROnCompletion, prTargetBranch, ghPath +- [ ] Define `WorktreeSetupResult` interface with success, effectiveCwd, worktreeActive, worktreePath, worktreeBranch, error +- [ ] Implement `setupWorktree` callback that sets up a git worktree for batch processing +- [ ] setupWorktree should handle branch mismatch by calling worktreeCheckout +- [ ] setupWorktree should return appropriate result whether worktree is enabled or not +- [ ] Implement `createPR` callback that creates a pull request after batch completion +- [ ] createPR should get default branch if prTargetBranch not specified +- [ ] createPR should generate PR body with document list and task count +- [ ] Export `useWorktreeManager` from `src/renderer/hooks/batch/index.ts` + +--- + +## Phase 7: Create Batch State Machine + +- [ ] Create `src/renderer/hooks/batch/batchStateMachine.ts` with explicit state definitions +- [ ] Define `BatchProcessingState` type with states: IDLE, INITIALIZING, RUNNING, PAUSED_ERROR, STOPPING, COMPLETING +- [ ] Define `BatchMachineContext` interface with state, sessionId, documents, currentDocIndex, completedTasks, totalTasks, loopIteration, error +- [ ] Define `BatchEvent` union type for all state transitions +- [ ] Implement `transition` function that returns new context based on current state and event +- [ ] Document valid state transitions in comments +- [ ] Export types and transition function from `src/renderer/hooks/batch/index.ts` + +--- + +## Phase 8: Migrate useBatchProcessor to Use New Modules + +- [ ] In `src/renderer/hooks/useBatchProcessor.ts`, import utilities from `./batch/batchUtils` +- [ ] Replace inline `countUnfinishedTasks`, `countCheckedTasks`, `uncheckAllTasks` with imports +- [ ] Import and use `useSessionDebounce` to replace manual debounce timer management +- [ ] Remove `debounceTimerRefs` ref and related cleanup code +- [ ] Remove `pendingUpdatesRef` ref and related composition code +- [ ] Import `batchReducer` and `DEFAULT_BATCH_STATE` from `./batch/batchReducer` +- [ ] Replace `useState` for `batchRunStates` with `useReducer(batchReducer, {})` +- [ ] Update all `setBatchRunStates` calls to use dispatch with appropriate actions +- [ ] Import and use `useTimeTracking` to replace manual time tracking +- [ ] Remove `accumulatedTimeRefs` and `lastActiveTimestampRefs` +- [ ] Remove visibility change event listener effect (now handled by useTimeTracking) +- [ ] Wire up time tracking callbacks to update batch state + +--- + +## Phase 9: Migrate startBatchRun to Use Extracted Hooks + +- [ ] Import and use `useWorktreeManager` in useBatchProcessor +- [ ] Replace inline worktree setup code with `setupWorktree` from useWorktreeManager +- [ ] Replace inline PR creation code with `createPR` from useWorktreeManager +- [ ] Import and use `useDocumentProcessor` in useBatchProcessor +- [ ] Replace inline document reading with `readDocAndCountTasks` from useDocumentProcessor +- [ ] Replace inline task processing with `processTask` from useDocumentProcessor +- [ ] Reduce `startBatchRun` to orchestration logic only - delegate to extracted hooks + +--- + +## Phase 10: Fix Memory Leak Risks + +- [ ] In useBatchProcessor cleanup effect, ensure all error resolution promises are rejected with 'abort' on unmount +- [ ] Clear `stopRequestedRefs` entry when batch completes normally (not just on start) +- [ ] Verify `isMountedRef` check prevents all state updates after unmount +- [ ] Add comment documenting memory safety guarantees + +--- + +## Phase 11: Add State Machine Integration (Optional) + +- [ ] Import `transition` and types from `./batch/batchStateMachine` +- [ ] Add state machine tracking to batch state +- [ ] Gate operations through state machine transitions +- [ ] Add invariant checks for invalid state transitions +- [ ] Log state transitions for debugging + +--- + +## Final Verification + +- [ ] Run `npm run lint` to verify no TypeScript errors +- [ ] Run `npm run lint:eslint` to verify no new ESLint warnings +- [ ] Verify batch processing works: start batch, complete all tasks +- [ ] Verify stop works: start batch, stop mid-task +- [ ] Verify error handling: start batch, trigger error, resume/skip/abort +- [ ] Verify loop mode: enable loop, run until max iterations +- [ ] Verify worktree mode: enable worktree, verify PR creation +- [ ] Verify time tracking works across visibility changes (hide/show window) diff --git a/src/__tests__/main/ipc/handlers/autorun.test.ts b/src/__tests__/main/ipc/handlers/autorun.test.ts index ec1cb8b15..94a5d07df 100644 --- a/src/__tests__/main/ipc/handlers/autorun.test.ts +++ b/src/__tests__/main/ipc/handlers/autorun.test.ts @@ -135,6 +135,7 @@ describe('autorun IPC handlers', () => { 'autorun:createBackup', 'autorun:restoreBackup', 'autorun:deleteBackups', + 'autorun:createWorkingCopy', ]; for (const channel of expectedChannels) { diff --git a/src/__tests__/main/parsers/codex-output-parser.test.ts b/src/__tests__/main/parsers/codex-output-parser.test.ts index 054a2e512..f3d692dad 100644 --- a/src/__tests__/main/parsers/codex-output-parser.test.ts +++ b/src/__tests__/main/parsers/codex-output-parser.test.ts @@ -57,7 +57,8 @@ describe('CodexOutputParser', () => { const event = parser.parseJsonLine(line); expect(event).not.toBeNull(); expect(event?.type).toBe('text'); - expect(event?.text).toBe('**Thinking about the task**\n\nI need to analyze...'); + // formatReasoningText adds \n\n before **section** markers for readability + expect(event?.text).toBe('\n\n**Thinking about the task**\n\nI need to analyze...'); expect(event?.isPartial).toBe(true); }); }); diff --git a/src/__tests__/renderer/components/AICommandsPanel.test.tsx b/src/__tests__/renderer/components/AICommandsPanel.test.tsx index a2146c439..2305e85ec 100644 --- a/src/__tests__/renderer/components/AICommandsPanel.test.tsx +++ b/src/__tests__/renderer/components/AICommandsPanel.test.tsx @@ -32,7 +32,7 @@ const mockHandleKeyDown = vi.fn().mockReturnValue(false); const mockSelectVariable = vi.fn(); const mockAutocompleteRef = { current: null }; -vi.mock('../../../renderer/hooks/useTemplateAutocomplete', () => ({ +vi.mock('../../../renderer/hooks/input/useTemplateAutocomplete', () => ({ useTemplateAutocomplete: vi.fn((props: { onChange: (value: string) => void }) => { // Capture the onChange in a closure for this specific hook instance const onChange = props.onChange; diff --git a/src/__tests__/renderer/components/AboutModal.test.tsx b/src/__tests__/renderer/components/AboutModal.test.tsx index 339ecb847..24c411b2b 100644 --- a/src/__tests__/renderer/components/AboutModal.test.tsx +++ b/src/__tests__/renderer/components/AboutModal.test.tsx @@ -35,6 +35,12 @@ vi.mock('lucide-react', () => ({ Globe: ({ className, style }: { className?: string; style?: React.CSSProperties }) => ( 🌐 ), + Check: ({ className, style }: { className?: string; style?: React.CSSProperties }) => ( + ✓ + ), + BookOpen: ({ className, style }: { className?: string; style?: React.CSSProperties }) => ( + 📖 + ), })); // Mock the avatar import diff --git a/src/__tests__/renderer/components/AgentPromptComposerModal.test.tsx b/src/__tests__/renderer/components/AgentPromptComposerModal.test.tsx index e2b91b572..0bc09aa46 100644 --- a/src/__tests__/renderer/components/AgentPromptComposerModal.test.tsx +++ b/src/__tests__/renderer/components/AgentPromptComposerModal.test.tsx @@ -42,7 +42,7 @@ const mockHandleChange = vi.fn(); const mockSelectVariable = vi.fn(); const mockAutocompleteRef = { current: null }; -vi.mock('../../../renderer/hooks/useTemplateAutocomplete', () => ({ +vi.mock('../../../renderer/hooks/input/useTemplateAutocomplete', () => ({ useTemplateAutocomplete: () => ({ autocompleteState: mockAutocompleteState, handleKeyDown: mockHandleKeyDown, diff --git a/src/__tests__/renderer/components/AutoRun.test.tsx b/src/__tests__/renderer/components/AutoRun.test.tsx index 8513f7b6d..8c6c03359 100644 --- a/src/__tests__/renderer/components/AutoRun.test.tsx +++ b/src/__tests__/renderer/components/AutoRun.test.tsx @@ -91,7 +91,7 @@ vi.mock('../../../renderer/components/AutoRunDocumentSelector', () => ({ // Store the onChange handler so our mock can call it let autocompleteOnChange: ((content: string) => void) | null = null; -vi.mock('../../../renderer/hooks/useTemplateAutocomplete', () => ({ +vi.mock('../../../renderer/hooks/input/useTemplateAutocomplete', () => ({ useTemplateAutocomplete: ({ value, onChange }: { value: string; onChange: (value: string) => void }) => { // Store the onChange handler so handleAutocompleteChange can trigger state updates autocompleteOnChange = onChange; diff --git a/src/__tests__/renderer/components/AutoRunBlurSaveTiming.test.tsx b/src/__tests__/renderer/components/AutoRunBlurSaveTiming.test.tsx index 7141881f8..42a9db5e2 100644 --- a/src/__tests__/renderer/components/AutoRunBlurSaveTiming.test.tsx +++ b/src/__tests__/renderer/components/AutoRunBlurSaveTiming.test.tsx @@ -97,7 +97,7 @@ vi.mock('../../../renderer/components/AutoRunDocumentSelector', () => ({ ), })); -vi.mock('../../../renderer/hooks/useTemplateAutocomplete', () => ({ +vi.mock('../../../renderer/hooks/input/useTemplateAutocomplete', () => ({ useTemplateAutocomplete: ({ value, onChange }: { value: string; onChange: (value: string) => void }) => { return { autocompleteState: { isOpen: false, suggestions: [], selectedIndex: 0, position: { top: 0, left: 0 } }, diff --git a/src/__tests__/renderer/components/AutoRunContentSync.test.tsx b/src/__tests__/renderer/components/AutoRunContentSync.test.tsx index 23fd41707..565153f6d 100644 --- a/src/__tests__/renderer/components/AutoRunContentSync.test.tsx +++ b/src/__tests__/renderer/components/AutoRunContentSync.test.tsx @@ -90,7 +90,7 @@ vi.mock('../../../renderer/components/AutoRunDocumentSelector', () => ({ ), })); -vi.mock('../../../renderer/hooks/useTemplateAutocomplete', () => ({ +vi.mock('../../../renderer/hooks/input/useTemplateAutocomplete', () => ({ useTemplateAutocomplete: ({ value, onChange }: { value: string; onChange: (value: string) => void }) => { return { autocompleteState: { isOpen: false, suggestions: [], selectedIndex: 0, position: { top: 0, left: 0 } }, diff --git a/src/__tests__/renderer/components/AutoRunSessionIsolation.test.tsx b/src/__tests__/renderer/components/AutoRunSessionIsolation.test.tsx index ab4b5cb06..8605b4f14 100644 --- a/src/__tests__/renderer/components/AutoRunSessionIsolation.test.tsx +++ b/src/__tests__/renderer/components/AutoRunSessionIsolation.test.tsx @@ -92,7 +92,7 @@ vi.mock('../../../renderer/components/AutoRunDocumentSelector', () => ({ ), })); -vi.mock('../../../renderer/hooks/useTemplateAutocomplete', () => ({ +vi.mock('../../../renderer/hooks/input/useTemplateAutocomplete', () => ({ useTemplateAutocomplete: ({ value, onChange }: { value: string; onChange: (value: string) => void }) => { return { autocompleteState: { isOpen: false, suggestions: [], selectedIndex: 0, position: { top: 0, left: 0 } }, diff --git a/src/__tests__/renderer/components/FilePreview.test.tsx b/src/__tests__/renderer/components/FilePreview.test.tsx index 3c209d341..acfe9da10 100644 --- a/src/__tests__/renderer/components/FilePreview.test.tsx +++ b/src/__tests__/renderer/components/FilePreview.test.tsx @@ -2525,3 +2525,827 @@ describe('navigation disabled in edit mode', () => { expect(onNavigateForward).toHaveBeenCalled(); }); }); + +// ============================================================================= +// FILE PREVIEW NAVIGATION - COMPREHENSIVE TESTS FOR REGRESSION CHECKLIST +// ============================================================================= + +describe('file preview navigation - back/forward buttons', () => { + const testFile = { + name: 'current.ts', + content: 'const x = 1;', + path: '/project/current.ts', + }; + + it('renders back button when canGoBack is true', () => { + render( + + ); + + const backBtn = screen.getByTitle('Go back (⌘←)'); + expect(backBtn).toBeInTheDocument(); + }); + + it('renders forward button when canGoForward is true', () => { + render( + + ); + + const forwardBtn = screen.getByTitle('Go forward (⌘→)'); + expect(forwardBtn).toBeInTheDocument(); + }); + + it('does not render back button when canGoBack is false', () => { + render( + + ); + + expect(screen.queryByTitle('Go back (⌘←)')).not.toBeInTheDocument(); + }); + + it('does not render forward button when canGoForward is false', () => { + render( + + ); + + expect(screen.queryByTitle('Go forward (⌘→)')).not.toBeInTheDocument(); + }); + + it('calls onNavigateBack when back button is clicked', () => { + const onNavigateBack = vi.fn(); + + render( + + ); + + const backBtn = screen.getByTitle('Go back (⌘←)'); + fireEvent.click(backBtn); + + expect(onNavigateBack).toHaveBeenCalled(); + }); + + it('calls onNavigateForward when forward button is clicked', () => { + const onNavigateForward = vi.fn(); + + render( + + ); + + const forwardBtn = screen.getByTitle('Go forward (⌘→)'); + fireEvent.click(forwardBtn); + + expect(onNavigateForward).toHaveBeenCalled(); + }); + + it('does not call onNavigateBack with Cmd+Left when canGoBack is false', () => { + const onNavigateBack = vi.fn(); + + render( + + ); + + const container = screen.getByText('current.ts').closest('[tabindex="0"]'); + fireEvent.keyDown(container!, { key: 'ArrowLeft', metaKey: true }); + + expect(onNavigateBack).not.toHaveBeenCalled(); + }); + + it('does not call onNavigateForward with Cmd+Right when canGoForward is false', () => { + const onNavigateForward = vi.fn(); + + render( + + ); + + const container = screen.getByText('current.ts').closest('[tabindex="0"]'); + fireEvent.keyDown(container!, { key: 'ArrowRight', metaKey: true }); + + expect(onNavigateForward).not.toHaveBeenCalled(); + }); + + it('does not call onNavigateBack with Ctrl+Left when canGoBack is false', () => { + const onNavigateBack = vi.fn(); + + render( + + ); + + const container = screen.getByText('current.ts').closest('[tabindex="0"]'); + fireEvent.keyDown(container!, { key: 'ArrowLeft', ctrlKey: true }); + + expect(onNavigateBack).not.toHaveBeenCalled(); + }); + + it('navigates back with Ctrl+Left keyboard shortcut', () => { + const onNavigateBack = vi.fn(); + + render( + + ); + + const container = screen.getByText('current.ts').closest('[tabindex="0"]'); + fireEvent.keyDown(container!, { key: 'ArrowLeft', ctrlKey: true }); + + expect(onNavigateBack).toHaveBeenCalled(); + }); + + it('navigates forward with Ctrl+Right keyboard shortcut', () => { + const onNavigateForward = vi.fn(); + + render( + + ); + + const container = screen.getByText('current.ts').closest('[tabindex="0"]'); + fireEvent.keyDown(container!, { key: 'ArrowRight', ctrlKey: true }); + + expect(onNavigateForward).toHaveBeenCalled(); + }); +}); + +describe('file preview navigation - history popup', () => { + const testFile = { + name: 'current.ts', + content: 'const x = 1;', + path: '/project/current.ts', + }; + + const backHistory = [ + { name: 'first.ts', content: 'const a = 1;', path: '/project/first.ts' }, + { name: 'second.ts', content: 'const b = 2;', path: '/project/second.ts' }, + ]; + + const forwardHistory = [ + { name: 'future1.ts', content: 'const c = 3;', path: '/project/future1.ts' }, + { name: 'future2.ts', content: 'const d = 4;', path: '/project/future2.ts' }, + ]; + + it('shows back history popup on hover', async () => { + render( + + ); + + const backBtn = screen.getByTitle('Go back (⌘←)'); + fireEvent.mouseEnter(backBtn); + + await waitFor(() => { + // Should show the back history items + expect(screen.getByText('second.ts')).toBeInTheDocument(); + expect(screen.getByText('first.ts')).toBeInTheDocument(); + }); + }); + + it('shows forward history popup on hover', async () => { + render( + + ); + + const forwardBtn = screen.getByTitle('Go forward (⌘→)'); + fireEvent.mouseEnter(forwardBtn); + + await waitFor(() => { + // Should show the forward history items + expect(screen.getByText('future1.ts')).toBeInTheDocument(); + expect(screen.getByText('future2.ts')).toBeInTheDocument(); + }); + }); + + it('hides back history popup on mouse leave', async () => { + render( + + ); + + const backBtn = screen.getByTitle('Go back (⌘←)'); + + // Show popup + fireEvent.mouseEnter(backBtn); + await waitFor(() => { + expect(screen.getByText('second.ts')).toBeInTheDocument(); + }); + + // Hide popup + fireEvent.mouseLeave(backBtn); + await waitFor(() => { + expect(screen.queryByText('second.ts')).not.toBeInTheDocument(); + }); + }); + + it('calls onNavigateToIndex when clicking a back history item', async () => { + const onNavigateToIndex = vi.fn(); + + render( + + ); + + const backBtn = screen.getByTitle('Go back (⌘←)'); + fireEvent.mouseEnter(backBtn); + + await waitFor(() => { + expect(screen.getByText('first.ts')).toBeInTheDocument(); + }); + + // Click the first item (index 0 in original history) + const firstItem = screen.getByText('first.ts'); + fireEvent.click(firstItem); + + expect(onNavigateToIndex).toHaveBeenCalledWith(0); + }); + + it('calls onNavigateToIndex when clicking a forward history item', async () => { + const onNavigateToIndex = vi.fn(); + + render( + + ); + + const forwardBtn = screen.getByTitle('Go forward (⌘→)'); + fireEvent.mouseEnter(forwardBtn); + + await waitFor(() => { + expect(screen.getByText('future1.ts')).toBeInTheDocument(); + }); + + // Click the first forward item (index 1 in original history, since current is at 0) + const future1Item = screen.getByText('future1.ts'); + fireEvent.click(future1Item); + + expect(onNavigateToIndex).toHaveBeenCalledWith(1); + }); + + it('shows numbered entries in back history popup', async () => { + render( + + ); + + const backBtn = screen.getByTitle('Go back (⌘←)'); + fireEvent.mouseEnter(backBtn); + + await waitFor(() => { + // History items should be shown with numbering + // The back history is shown in reverse order (newest first) + // With 2 items, actualIndex for first displayed = length - 1 - 0 = 1, so shows "2." + // actualIndex for second displayed = length - 1 - 1 = 0, so shows "1." + expect(screen.getByText('2.')).toBeInTheDocument(); + expect(screen.getByText('1.')).toBeInTheDocument(); + }); + }); + + it('shows numbered entries in forward history popup', async () => { + render( + + ); + + const forwardBtn = screen.getByTitle('Go forward (⌘→)'); + fireEvent.mouseEnter(forwardBtn); + + await waitFor(() => { + // Forward history numbering: actualIndex = currentHistoryIndex + 1 + idx + // For idx=0: actualIndex = 0 + 1 + 0 = 1, shows "2." + // For idx=1: actualIndex = 0 + 1 + 1 = 2, shows "3." + expect(screen.getByText('2.')).toBeInTheDocument(); + expect(screen.getByText('3.')).toBeInTheDocument(); + }); + }); +}); + +describe('file preview navigation - both buttons together', () => { + const testFile = { + name: 'middle.ts', + content: 'const x = 1;', + path: '/project/middle.ts', + }; + + it('renders both back and forward buttons when both are available', () => { + render( + + ); + + const backBtn = screen.getByTitle('Go back (⌘←)'); + const forwardBtn = screen.getByTitle('Go forward (⌘→)'); + expect(backBtn).toBeInTheDocument(); + expect(forwardBtn).toBeInTheDocument(); + expect(backBtn).not.toBeDisabled(); + expect(forwardBtn).not.toBeDisabled(); + }); + + it('disables forward button when only back is available', () => { + // Both buttons render but forward is disabled + render( + + ); + + const backBtn = screen.getByTitle('Go back (⌘←)'); + const forwardBtn = screen.getByTitle('Go forward (⌘→)'); + expect(backBtn).not.toBeDisabled(); + expect(forwardBtn).toBeDisabled(); + }); + + it('disables back button when only forward is available', () => { + // Both buttons render but back is disabled + render( + + ); + + const backBtn = screen.getByTitle('Go back (⌘←)'); + const forwardBtn = screen.getByTitle('Go forward (⌘→)'); + expect(backBtn).toBeDisabled(); + expect(forwardBtn).not.toBeDisabled(); + }); + + it('renders neither button when neither is available', () => { + render( + + ); + + // When both are false, the navigation container doesn't render at all + expect(screen.queryByTitle('Go back (⌘←)')).not.toBeInTheDocument(); + expect(screen.queryByTitle('Go forward (⌘→)')).not.toBeInTheDocument(); + }); +}); + +describe('file preview navigation - non-markdown files', () => { + const tsFile = { + name: 'code.ts', + content: 'const x = 1;', + path: '/project/code.ts', + }; + + it('shows navigation buttons for TypeScript files', () => { + render( + + ); + + expect(screen.getByTitle('Go back (⌘←)')).toBeInTheDocument(); + expect(screen.getByTitle('Go forward (⌘→)')).toBeInTheDocument(); + }); + + it('navigates back with keyboard in TypeScript file', () => { + const onNavigateBack = vi.fn(); + + render( + + ); + + const container = screen.getByText('code.ts').closest('[tabindex="0"]'); + fireEvent.keyDown(container!, { key: 'ArrowLeft', metaKey: true }); + + expect(onNavigateBack).toHaveBeenCalled(); + }); + + it('navigates forward with keyboard in TypeScript file', () => { + const onNavigateForward = vi.fn(); + + render( + + ); + + const container = screen.getByText('code.ts').closest('[tabindex="0"]'); + fireEvent.keyDown(container!, { key: 'ArrowRight', metaKey: true }); + + expect(onNavigateForward).toHaveBeenCalled(); + }); +}); + +describe('file preview navigation - image files', () => { + const imageFile = { + name: 'logo.png', + content: 'data:image/png;base64,abc123', + path: '/project/assets/logo.png', + }; + + it('shows navigation buttons for image files', () => { + render( + + ); + + expect(screen.getByTitle('Go back (⌘←)')).toBeInTheDocument(); + expect(screen.getByTitle('Go forward (⌘→)')).toBeInTheDocument(); + }); + + it('navigates with keyboard from image preview', () => { + const onNavigateBack = vi.fn(); + const onNavigateForward = vi.fn(); + + render( + + ); + + const container = screen.getByText('logo.png').closest('[tabindex="0"]'); + + fireEvent.keyDown(container!, { key: 'ArrowLeft', metaKey: true }); + expect(onNavigateBack).toHaveBeenCalled(); + + fireEvent.keyDown(container!, { key: 'ArrowRight', metaKey: true }); + expect(onNavigateForward).toHaveBeenCalled(); + }); +}); + +describe('file preview navigation - edge cases', () => { + const testFile = { + name: 'test.ts', + content: 'const x = 1;', + path: '/project/test.ts', + }; + + it('does not crash when navigation callbacks are undefined', () => { + render( + + ); + + // Should render without crashing + expect(screen.getByText('test.ts')).toBeInTheDocument(); + + // Buttons might not appear without callbacks, or might be non-functional + // The important thing is no crash + }); + + it('handles empty history arrays', async () => { + render( + + ); + + const backBtn = screen.getByTitle('Go back (⌘←)'); + fireEvent.mouseEnter(backBtn); + + // Should not crash, popup might be empty or not show + await waitFor(() => { + expect(screen.getByText('test.ts')).toBeInTheDocument(); + }); + }); + + it('handles missing currentHistoryIndex gracefully', async () => { + const backHistory = [ + { name: 'first.ts', content: 'const a = 1;', path: '/project/first.ts' }, + ]; + + render( + + ); + + // Should render without crashing + expect(screen.getByText('test.ts')).toBeInTheDocument(); + }); + + it('handles navigation correctly when props are provided', () => { + const onNavigateBack = vi.fn(); + const onNavigateForward = vi.fn(); + + render( + + ); + + const container = screen.getByText('test.ts').closest('[tabindex="0"]'); + + // Back navigation + fireEvent.keyDown(container!, { key: 'ArrowLeft', metaKey: true }); + expect(onNavigateBack).toHaveBeenCalledTimes(1); + + // Forward navigation + fireEvent.keyDown(container!, { key: 'ArrowRight', metaKey: true }); + expect(onNavigateForward).toHaveBeenCalledTimes(1); + }); + + it('handles single file with no history gracefully', () => { + render( + + ); + + // Should render without crashing + expect(screen.getByText('test.ts')).toBeInTheDocument(); + + // No navigation buttons should appear + expect(screen.queryByTitle('Go back (⌘←)')).not.toBeInTheDocument(); + expect(screen.queryByTitle('Go forward (⌘→)')).not.toBeInTheDocument(); + }); +}); diff --git a/src/__tests__/renderer/components/InputArea.test.tsx b/src/__tests__/renderer/components/InputArea.test.tsx index 7fda1e76c..a6786a443 100644 --- a/src/__tests__/renderer/components/InputArea.test.tsx +++ b/src/__tests__/renderer/components/InputArea.test.tsx @@ -8,7 +8,7 @@ import type { Session, Theme } from '../../../renderer/types'; Element.prototype.scrollIntoView = vi.fn(); // Mock useAgentCapabilities hook - return claude-code capabilities by default -vi.mock('../../../renderer/hooks/useAgentCapabilities', () => ({ +vi.mock('../../../renderer/hooks/agent/useAgentCapabilities', () => ({ useAgentCapabilities: vi.fn(() => ({ capabilities: { supportsResume: true, @@ -246,7 +246,7 @@ describe('InputArea', () => { it('hides attach image button when agent does not support image input', async () => { // Mock capabilities to return false for supportsImageInput - const useAgentCapabilitiesMock = await import('../../../renderer/hooks/useAgentCapabilities'); + const useAgentCapabilitiesMock = await import('../../../renderer/hooks/agent/useAgentCapabilities'); vi.mocked(useAgentCapabilitiesMock.useAgentCapabilities).mockReturnValueOnce({ capabilities: { supportsResume: true, @@ -306,7 +306,7 @@ describe('InputArea', () => { it('hides read-only toggle when agent does not support read-only mode', async () => { // Mock capabilities to return false for supportsReadOnlyMode - const useAgentCapabilitiesMock = await import('../../../renderer/hooks/useAgentCapabilities'); + const useAgentCapabilitiesMock = await import('../../../renderer/hooks/agent/useAgentCapabilities'); vi.mocked(useAgentCapabilitiesMock.useAgentCapabilities).mockReturnValueOnce({ capabilities: { supportsResume: true, @@ -713,6 +713,107 @@ describe('InputArea', () => { // Should open slash command autocomplete for all agents expect(setSlashCommandOpen).toHaveBeenCalledWith(true); }); + + it('calls handleInputKeyDown when pressing arrow keys in input', () => { + const handleInputKeyDown = vi.fn(); + const props = createDefaultProps({ + slashCommandOpen: true, + inputValue: '/', + handleInputKeyDown, + }); + render(); + + // Slash commands ArrowDown/ArrowUp/Enter/Escape are handled in App.tsx handleInputKeyDown + // The InputArea should pass these events to the handler + const textarea = screen.getByRole('textbox'); + fireEvent.keyDown(textarea, { key: 'ArrowDown' }); + expect(handleInputKeyDown).toHaveBeenCalled(); + }); + + it('shows empty state when no commands match filter', () => { + const props = createDefaultProps({ + slashCommandOpen: true, + inputValue: '/xyz123nonexistent', + slashCommands: [ + { command: '/clear', description: 'Clear chat history' }, + { command: '/help', description: 'Show help', aiOnly: true }, + ], + }); + render(); + + // When no commands match, the dropdown should not render any command items + expect(screen.queryByText('/clear')).not.toBeInTheDocument(); + expect(screen.queryByText('/help')).not.toBeInTheDocument(); + }); + + it('single click updates selection without closing dropdown', () => { + const setSelectedSlashCommandIndex = vi.fn(); + const setSlashCommandOpen = vi.fn(); + const setInputValue = vi.fn(); + const props = createDefaultProps({ + slashCommandOpen: true, + inputValue: '/', + setSelectedSlashCommandIndex, + setSlashCommandOpen, + setInputValue, + }); + render(); + + const helpCmd = screen.getByText('/help').closest('.px-4'); + fireEvent.click(helpCmd!); + + // Single click should update selection + expect(setSelectedSlashCommandIndex).toHaveBeenCalledWith(1); + // But should NOT close dropdown or fill input + expect(setSlashCommandOpen).not.toHaveBeenCalled(); + expect(setInputValue).not.toHaveBeenCalled(); + }); + + it('renders command description text', () => { + const props = createDefaultProps({ + slashCommandOpen: true, + inputValue: '/', + slashCommands: [ + { command: '/test', description: 'Test command description' }, + ], + }); + render(); + + expect(screen.getByText('Test command description')).toBeInTheDocument(); + }); + + it('applies correct styling to unselected items', () => { + const props = createDefaultProps({ + slashCommandOpen: true, + inputValue: '/', + selectedSlashCommandIndex: 0, // First item selected + }); + render(); + + // The second item (/help) should NOT have accent background since index 0 is selected + const helpCmd = screen.getByText('/help').closest('.px-4'); + // Unselected items don't have the accent color background + expect(helpCmd).not.toHaveStyle({ backgroundColor: mockTheme.colors.accent }); + // First item (selected) should have accent background + const clearCmd = screen.getByText('/clear').closest('.px-4'); + expect(clearCmd).toHaveStyle({ backgroundColor: mockTheme.colors.accent }); + }); + + it('scrolls selected item into view via refs', () => { + // This test verifies the ref array for scroll-into-view is populated + const props = createDefaultProps({ + slashCommandOpen: true, + inputValue: '/', + selectedSlashCommandIndex: 0, + }); + render(); + + // Items should be rendered (refs should be attached) + expect(screen.getByText('/clear')).toBeInTheDocument(); + expect(screen.getByText('/help')).toBeInTheDocument(); + // The scrollIntoView mock should have been called for selected item + expect(Element.prototype.scrollIntoView).toHaveBeenCalled(); + }); }); describe('Command History Modal', () => { @@ -1008,6 +1109,79 @@ describe('InputArea', () => { expect(setTabCompletionOpen).toHaveBeenCalledWith(false); }); + it('highlights selected suggestion based on selectedTabCompletionIndex', () => { + const props = createDefaultProps({ + session: createMockSession({ inputMode: 'terminal' }), + tabCompletionOpen: true, + tabCompletionSuggestions: [ + { value: 'ls -la', type: 'history', displayText: 'ls -la' }, + { value: 'cd src', type: 'history', displayText: 'cd src' }, + { value: 'main', type: 'branch', displayText: 'main' }, + ], + selectedTabCompletionIndex: 1, + setSelectedTabCompletionIndex: vi.fn(), + }); + render(); + + const items = screen.getAllByText(/ls -la|cd src|main/).map(el => el.closest('div[class*="cursor-pointer"]')); + + // The second item (index 1) should have the ring class indicating selection + expect(items[1]).toHaveClass('ring-1'); + // The first and third items should NOT have the ring class + expect(items[0]).not.toHaveClass('ring-1'); + expect(items[2]).not.toHaveClass('ring-1'); + }); + + it('updates selection on mouse hover', () => { + const setSelectedTabCompletionIndex = vi.fn(); + const props = createDefaultProps({ + session: createMockSession({ inputMode: 'terminal' }), + tabCompletionOpen: true, + tabCompletionSuggestions: [ + { value: 'ls -la', type: 'history', displayText: 'ls -la' }, + { value: 'cd src', type: 'history', displayText: 'cd src' }, + ], + selectedTabCompletionIndex: 0, + setSelectedTabCompletionIndex, + }); + render(); + + const secondItem = screen.getByText('cd src').closest('div[class*="cursor-pointer"]'); + fireEvent.mouseEnter(secondItem!); + + expect(setSelectedTabCompletionIndex).toHaveBeenCalledWith(1); + }); + + it('shows appropriate icons for different suggestion types', () => { + const props = createDefaultProps({ + session: createMockSession({ inputMode: 'terminal', isGitRepo: true }), + tabCompletionOpen: true, + tabCompletionSuggestions: [ + { value: 'ls -la', type: 'history', displayText: 'ls -la' }, + { value: 'git checkout main', type: 'branch', displayText: 'main' }, + { value: 'v1.0.0', type: 'tag', displayText: 'v1.0.0' }, + { value: 'src/components', type: 'folder', displayText: 'components' }, + { value: 'src/index.ts', type: 'file', displayText: 'index.ts' }, + ], + setTabCompletionFilter: vi.fn(), + }); + render(); + + // Each suggestion should be visible + expect(screen.getByText('ls -la')).toBeInTheDocument(); + expect(screen.getByText('main')).toBeInTheDocument(); + expect(screen.getByText('v1.0.0')).toBeInTheDocument(); + expect(screen.getByText('components')).toBeInTheDocument(); + expect(screen.getByText('index.ts')).toBeInTheDocument(); + + // Each suggestion should have its type label + expect(screen.getByText('history')).toBeInTheDocument(); + expect(screen.getByText('branch')).toBeInTheDocument(); + expect(screen.getByText('tag')).toBeInTheDocument(); + expect(screen.getByText('folder')).toBeInTheDocument(); + expect(screen.getByText('file')).toBeInTheDocument(); + }); + it('shows empty state for filtered results', () => { const props = createDefaultProps({ session: createMockSession({ inputMode: 'terminal', isGitRepo: true }), diff --git a/src/__tests__/renderer/components/MainPanel.test.tsx b/src/__tests__/renderer/components/MainPanel.test.tsx index cd02be5dc..948d3ca4b 100644 --- a/src/__tests__/renderer/components/MainPanel.test.tsx +++ b/src/__tests__/renderer/components/MainPanel.test.tsx @@ -2,7 +2,7 @@ import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'; import React from 'react'; import { render, screen, fireEvent, waitFor, act } from '@testing-library/react'; import type { Theme, Session, Shortcut, FocusArea, BatchRunState } from '../../../renderer/types'; -import { clearCapabilitiesCache, setCapabilitiesCache } from '../../../renderer/hooks/useAgentCapabilities'; +import { clearCapabilitiesCache, setCapabilitiesCache } from '../../../renderer/hooks'; // Mock child components to simplify testing - must be before MainPanel import vi.mock('../../../renderer/components/LogViewer', () => ({ @@ -1050,6 +1050,430 @@ describe('MainPanel', () => { expect(onStopBatchRun).not.toHaveBeenCalled(); }); + + it('should not display Auto mode button when currentSessionBatchState is null', () => { + render(); + + expect(screen.queryByText('Auto')).not.toBeInTheDocument(); + expect(screen.queryByText('Stopping...')).not.toBeInTheDocument(); + }); + + it('should not display Auto mode button when currentSessionBatchState is undefined', () => { + render(); + + expect(screen.queryByText('Auto')).not.toBeInTheDocument(); + }); + + it('should not display Auto mode button when isRunning is false', () => { + const currentSessionBatchState: BatchRunState = { + isRunning: false, + isStopping: false, + documents: ['doc1.md'], + currentDocumentIndex: 0, + currentDocTasksTotal: 5, + currentDocTasksCompleted: 5, + totalTasksAcrossAllDocs: 5, + completedTasksAcrossAllDocs: 5, + loopEnabled: false, + loopIteration: 0, + folderPath: '/test/folder', + worktreeActive: false, + totalTasks: 5, + completedTasks: 5, + currentTaskIndex: 5, + originalContent: '', + sessionIds: [], + }; + + render(); + + expect(screen.queryByText('Auto')).not.toBeInTheDocument(); + }); + + it('should display worktree indicator (GitBranch icon) when worktreeActive is true', () => { + const currentSessionBatchState: BatchRunState = { + isRunning: true, + isStopping: false, + documents: ['doc1.md'], + currentDocumentIndex: 0, + currentDocTasksTotal: 5, + currentDocTasksCompleted: 2, + totalTasksAcrossAllDocs: 5, + completedTasksAcrossAllDocs: 2, + loopEnabled: false, + loopIteration: 0, + folderPath: '/test/folder', + worktreeActive: true, + worktreeBranch: 'feature-branch', + totalTasks: 5, + completedTasks: 2, + currentTaskIndex: 2, + originalContent: '', + sessionIds: [], + }; + + render(); + + expect(screen.getByText('Auto')).toBeInTheDocument(); + // Check for worktree title tooltip + const worktreeIcon = screen.getByTitle('Worktree: feature-branch'); + expect(worktreeIcon).toBeInTheDocument(); + }); + + it('should display worktree indicator with default title when worktreeBranch is not set', () => { + const currentSessionBatchState: BatchRunState = { + isRunning: true, + isStopping: false, + documents: ['doc1.md'], + currentDocumentIndex: 0, + currentDocTasksTotal: 5, + currentDocTasksCompleted: 2, + totalTasksAcrossAllDocs: 5, + completedTasksAcrossAllDocs: 2, + loopEnabled: false, + loopIteration: 0, + folderPath: '/test/folder', + worktreeActive: true, + worktreeBranch: undefined, + totalTasks: 5, + completedTasks: 2, + currentTaskIndex: 2, + originalContent: '', + sessionIds: [], + }; + + render(); + + // Check for default worktree title tooltip + const worktreeIcon = screen.getByTitle('Worktree: active'); + expect(worktreeIcon).toBeInTheDocument(); + }); + + it('should not display worktree indicator when worktreeActive is false', () => { + const currentSessionBatchState: BatchRunState = { + isRunning: true, + isStopping: false, + documents: ['doc1.md'], + currentDocumentIndex: 0, + currentDocTasksTotal: 5, + currentDocTasksCompleted: 2, + totalTasksAcrossAllDocs: 5, + completedTasksAcrossAllDocs: 2, + loopEnabled: false, + loopIteration: 0, + folderPath: '/test/folder', + worktreeActive: false, + totalTasks: 5, + completedTasks: 2, + currentTaskIndex: 2, + originalContent: '', + sessionIds: [], + }; + + render(); + + expect(screen.getByText('Auto')).toBeInTheDocument(); + expect(screen.queryByTitle(/Worktree:/)).not.toBeInTheDocument(); + }); + + it('should have button disabled when isStopping is true', () => { + const currentSessionBatchState: BatchRunState = { + isRunning: true, + isStopping: true, + documents: ['doc1.md'], + currentDocumentIndex: 0, + currentDocTasksTotal: 5, + currentDocTasksCompleted: 2, + totalTasksAcrossAllDocs: 5, + completedTasksAcrossAllDocs: 2, + loopEnabled: false, + loopIteration: 0, + folderPath: '/test/folder', + worktreeActive: false, + totalTasks: 5, + completedTasks: 2, + currentTaskIndex: 2, + originalContent: '', + sessionIds: [], + }; + + render(); + + const button = screen.getByText('Stopping...').closest('button'); + expect(button).toBeDisabled(); + }); + + it('should have button enabled when isStopping is false', () => { + const currentSessionBatchState: BatchRunState = { + isRunning: true, + isStopping: false, + documents: ['doc1.md'], + currentDocumentIndex: 0, + currentDocTasksTotal: 5, + currentDocTasksCompleted: 2, + totalTasksAcrossAllDocs: 5, + completedTasksAcrossAllDocs: 2, + loopEnabled: false, + loopIteration: 0, + folderPath: '/test/folder', + worktreeActive: false, + totalTasks: 5, + completedTasks: 2, + currentTaskIndex: 2, + originalContent: '', + sessionIds: [], + }; + + render(); + + const button = screen.getByText('Auto').closest('button'); + expect(button).not.toBeDisabled(); + }); + + it('should display correct tooltip when running', () => { + const currentSessionBatchState: BatchRunState = { + isRunning: true, + isStopping: false, + documents: ['doc1.md'], + currentDocumentIndex: 0, + currentDocTasksTotal: 5, + currentDocTasksCompleted: 2, + totalTasksAcrossAllDocs: 5, + completedTasksAcrossAllDocs: 2, + loopEnabled: false, + loopIteration: 0, + folderPath: '/test/folder', + worktreeActive: false, + totalTasks: 5, + completedTasks: 2, + currentTaskIndex: 2, + originalContent: '', + sessionIds: [], + }; + + render(); + + const button = screen.getByText('Auto').closest('button'); + expect(button).toHaveAttribute('title', 'Click to stop batch run'); + }); + + it('should display correct tooltip when stopping', () => { + const currentSessionBatchState: BatchRunState = { + isRunning: true, + isStopping: true, + documents: ['doc1.md'], + currentDocumentIndex: 0, + currentDocTasksTotal: 5, + currentDocTasksCompleted: 2, + totalTasksAcrossAllDocs: 5, + completedTasksAcrossAllDocs: 2, + loopEnabled: false, + loopIteration: 0, + folderPath: '/test/folder', + worktreeActive: false, + totalTasks: 5, + completedTasks: 2, + currentTaskIndex: 2, + originalContent: '', + sessionIds: [], + }; + + render(); + + const button = screen.getByText('Stopping...').closest('button'); + expect(button).toHaveAttribute('title', 'Stopping after current task...'); + }); + + it('should display progress with zero completed tasks', () => { + const currentSessionBatchState: BatchRunState = { + isRunning: true, + isStopping: false, + documents: ['doc1.md'], + currentDocumentIndex: 0, + currentDocTasksTotal: 10, + currentDocTasksCompleted: 0, + totalTasksAcrossAllDocs: 10, + completedTasksAcrossAllDocs: 0, + loopEnabled: false, + loopIteration: 0, + folderPath: '/test/folder', + worktreeActive: false, + totalTasks: 10, + completedTasks: 0, + currentTaskIndex: 0, + originalContent: '', + sessionIds: [], + }; + + render(); + + expect(screen.getByText('Auto')).toBeInTheDocument(); + expect(screen.getByText('0/10')).toBeInTheDocument(); + }); + + it('should display progress with all tasks completed', () => { + const currentSessionBatchState: BatchRunState = { + isRunning: true, + isStopping: false, + documents: ['doc1.md'], + currentDocumentIndex: 0, + currentDocTasksTotal: 8, + currentDocTasksCompleted: 8, + totalTasksAcrossAllDocs: 8, + completedTasksAcrossAllDocs: 8, + loopEnabled: false, + loopIteration: 0, + folderPath: '/test/folder', + worktreeActive: false, + totalTasks: 8, + completedTasks: 8, + currentTaskIndex: 8, + originalContent: '', + sessionIds: [], + }; + + render(); + + expect(screen.getByText('Auto')).toBeInTheDocument(); + expect(screen.getByText('8/8')).toBeInTheDocument(); + }); + + it('should apply error background color styling to Auto button', () => { + const currentSessionBatchState: BatchRunState = { + isRunning: true, + isStopping: false, + documents: ['doc1.md'], + currentDocumentIndex: 0, + currentDocTasksTotal: 5, + currentDocTasksCompleted: 2, + totalTasksAcrossAllDocs: 5, + completedTasksAcrossAllDocs: 2, + loopEnabled: false, + loopIteration: 0, + folderPath: '/test/folder', + worktreeActive: false, + totalTasks: 5, + completedTasks: 2, + currentTaskIndex: 2, + originalContent: '', + sessionIds: [], + }; + + render(); + + const button = screen.getByText('Auto').closest('button'); + expect(button).toHaveStyle({ backgroundColor: theme.colors.error }); + }); + + it('should apply cursor-not-allowed class when stopping', () => { + const currentSessionBatchState: BatchRunState = { + isRunning: true, + isStopping: true, + documents: ['doc1.md'], + currentDocumentIndex: 0, + currentDocTasksTotal: 5, + currentDocTasksCompleted: 2, + totalTasksAcrossAllDocs: 5, + completedTasksAcrossAllDocs: 2, + loopEnabled: false, + loopIteration: 0, + folderPath: '/test/folder', + worktreeActive: false, + totalTasks: 5, + completedTasks: 2, + currentTaskIndex: 2, + originalContent: '', + sessionIds: [], + }; + + render(); + + const button = screen.getByText('Stopping...').closest('button'); + expect(button).toHaveClass('cursor-not-allowed'); + }); + + it('should apply cursor-pointer class when not stopping', () => { + const currentSessionBatchState: BatchRunState = { + isRunning: true, + isStopping: false, + documents: ['doc1.md'], + currentDocumentIndex: 0, + currentDocTasksTotal: 5, + currentDocTasksCompleted: 2, + totalTasksAcrossAllDocs: 5, + completedTasksAcrossAllDocs: 2, + loopEnabled: false, + loopIteration: 0, + folderPath: '/test/folder', + worktreeActive: false, + totalTasks: 5, + completedTasks: 2, + currentTaskIndex: 2, + originalContent: '', + sessionIds: [], + }; + + render(); + + const button = screen.getByText('Auto').closest('button'); + expect(button).toHaveClass('cursor-pointer'); + }); + + it('should display uppercase AUTO text', () => { + const currentSessionBatchState: BatchRunState = { + isRunning: true, + isStopping: false, + documents: ['doc1.md'], + currentDocumentIndex: 0, + currentDocTasksTotal: 5, + currentDocTasksCompleted: 2, + totalTasksAcrossAllDocs: 5, + completedTasksAcrossAllDocs: 2, + loopEnabled: false, + loopIteration: 0, + folderPath: '/test/folder', + worktreeActive: false, + totalTasks: 5, + completedTasks: 2, + currentTaskIndex: 2, + originalContent: '', + sessionIds: [], + }; + + render(); + + // The text should have uppercase class applied + const autoText = screen.getByText('Auto'); + expect(autoText).toHaveClass('uppercase'); + }); + + it('should handle onStopBatchRun being undefined gracefully', () => { + const currentSessionBatchState: BatchRunState = { + isRunning: true, + isStopping: false, + documents: ['doc1.md'], + currentDocumentIndex: 0, + currentDocTasksTotal: 5, + currentDocTasksCompleted: 2, + totalTasksAcrossAllDocs: 5, + completedTasksAcrossAllDocs: 2, + loopEnabled: false, + loopIteration: 0, + folderPath: '/test/folder', + worktreeActive: false, + totalTasks: 5, + completedTasks: 2, + currentTaskIndex: 2, + originalContent: '', + sessionIds: [], + }; + + // Render without onStopBatchRun callback + render(); + + // Click should not throw + expect(() => fireEvent.click(screen.getByText('Auto'))).not.toThrow(); + }); }); describe('Git tooltip', () => { @@ -1471,64 +1895,332 @@ describe('MainPanel', () => { lastUpdated: Date.now(), }); - const session = createSession({ isGitRepo: true }); + const session = createSession({ isGitRepo: true }); + render(); + + await waitFor(() => { + expect(screen.getByText(/main|GIT/)).toBeInTheDocument(); + }); + + const gitBadge = screen.getByText(/main|GIT/); + fireEvent.mouseEnter(gitBadge.parentElement!); + + await waitFor(() => { + expect(screen.getByText('5')).toBeInTheDocument(); + }); + }); + + it('should display behind count in git tooltip', async () => { + setMockGitStatus('session-1', { + fileCount: 0, + branch: 'main', + remote: 'https://github.com/user/repo.git', + ahead: 0, + behind: 3, + totalAdditions: 0, + totalDeletions: 0, + modifiedCount: 0, + fileChanges: [], + lastUpdated: Date.now(), + }); + + const session = createSession({ isGitRepo: true }); + render(); + + await waitFor(() => { + expect(screen.getByText(/main|GIT/)).toBeInTheDocument(); + }); + + const gitBadge = screen.getByText(/main|GIT/); + fireEvent.mouseEnter(gitBadge.parentElement!); + + await waitFor(() => { + expect(screen.getByText('3')).toBeInTheDocument(); + }); + }); + + it('should show uncommitted changes count in git tooltip', async () => { + setMockGitStatus('session-1', { + fileCount: 7, + branch: 'main', + remote: 'https://github.com/user/repo.git', + ahead: 0, + behind: 0, + totalAdditions: 100, + totalDeletions: 50, + modifiedCount: 7, + fileChanges: [], + lastUpdated: Date.now(), + }); + + const session = createSession({ isGitRepo: true }); + render(); + + await waitFor(() => { + expect(screen.getByText(/main|GIT/)).toBeInTheDocument(); + }); + + const gitBadge = screen.getByText(/main|GIT/); + fireEvent.mouseEnter(gitBadge.parentElement!); + + await waitFor(() => { + expect(screen.getByText(/7 uncommitted changes/)).toBeInTheDocument(); + }); + }); + + it('should show working tree clean message when no uncommitted changes', async () => { + setMockGitStatus('session-1', { + fileCount: 0, + branch: 'main', + remote: 'https://github.com/user/repo.git', + ahead: 0, + behind: 0, + totalAdditions: 0, + totalDeletions: 0, + modifiedCount: 0, + fileChanges: [], + lastUpdated: Date.now(), + }); + + const session = createSession({ isGitRepo: true }); + render(); + + await waitFor(() => { + expect(screen.getByText(/main|GIT/)).toBeInTheDocument(); + }); + + const gitBadge = screen.getByText(/main|GIT/); + fireEvent.mouseEnter(gitBadge.parentElement!); + + await waitFor(() => { + expect(screen.getByText('Working tree clean')).toBeInTheDocument(); + }); + }); + }); + + describe('Remote origin display', () => { + it('should display remote URL in git tooltip', async () => { + setMockGitStatus('session-1', { + fileCount: 0, + branch: 'main', + remote: 'https://github.com/user/my-repo.git', + ahead: 0, + behind: 0, + totalAdditions: 0, + totalDeletions: 0, + modifiedCount: 0, + fileChanges: [], + lastUpdated: Date.now(), + }); + + const session = createSession({ isGitRepo: true }); + render(); + + await waitFor(() => { + expect(screen.getByText(/main|GIT/)).toBeInTheDocument(); + }); + + const gitBadge = screen.getByText(/main|GIT/); + fireEvent.mouseEnter(gitBadge.parentElement!); + + await waitFor(() => { + expect(screen.getByText('Origin')).toBeInTheDocument(); + expect(screen.getByText('github.com/user/my-repo')).toBeInTheDocument(); + }); + }); + + it('should copy remote URL when copy button is clicked', async () => { + const writeText = vi.fn().mockResolvedValue(undefined); + Object.assign(navigator, { clipboard: { writeText } }); + + setMockGitStatus('session-1', { + fileCount: 0, + branch: 'main', + remote: 'https://github.com/user/repo.git', + ahead: 0, + behind: 0, + totalAdditions: 0, + totalDeletions: 0, + modifiedCount: 0, + fileChanges: [], + lastUpdated: Date.now(), + }); + + const session = createSession({ isGitRepo: true }); + render(); + + await waitFor(() => { + expect(screen.getByText(/main|GIT/)).toBeInTheDocument(); + }); + + const gitBadge = screen.getByText(/main|GIT/); + fireEvent.mouseEnter(gitBadge.parentElement!); + + await waitFor(() => { + expect(screen.getByText('Origin')).toBeInTheDocument(); + }); + + // Click copy remote URL button + const copyButtons = screen.getAllByTitle(/Copy remote URL/); + fireEvent.click(copyButtons[0]); + + expect(writeText).toHaveBeenCalledWith('https://github.com/user/repo.git'); + }); + }); + + describe('Edge cases', () => { + it('should handle session with no tabs gracefully', () => { + const session = createSession({ aiTabs: undefined }); + + render(); + + expect(screen.queryByTestId('tab-bar')).not.toBeInTheDocument(); + }); + + it('should handle empty tabs array gracefully', () => { + const session = createSession({ aiTabs: [] }); + + render(); + + expect(screen.queryByTestId('tab-bar')).not.toBeInTheDocument(); + }); + + it('should handle tab without usageStats', () => { + const session = createSession({ + aiTabs: [{ + id: 'tab-1', + agentSessionId: 'claude-1', + name: 'Tab 1', + isUnread: false, + createdAt: Date.now(), + usageStats: undefined, + }], + activeTabId: 'tab-1', + }); + render(); - await waitFor(() => { - expect(screen.getByText(/main|GIT/)).toBeInTheDocument(); - }); + // Should render without crashing - Context Window widget is hidden when contextWindow is not configured + expect(screen.queryByText('Context Window')).not.toBeInTheDocument(); + }); - const gitBadge = screen.getByText(/main|GIT/); - fireEvent.mouseEnter(gitBadge.parentElement!); + it('should handle missing git status from context gracefully', async () => { + // Remove git status data for session (simulating context not having data yet) + setMockGitStatus('session-1', undefined); + const session = createSession({ isGitRepo: true }); + + render(); + + // Should render without crashing, showing GIT badge (without branch name since no data) await waitFor(() => { - expect(screen.getByText('5')).toBeInTheDocument(); + expect(screen.getByText(/GIT/)).toBeInTheDocument(); }); }); - it('should display behind count in git tooltip', async () => { - setMockGitStatus('session-1', { - fileCount: 0, - branch: 'main', - remote: 'https://github.com/user/repo.git', - ahead: 0, - behind: 3, - totalAdditions: 0, - totalDeletions: 0, - modifiedCount: 0, - fileChanges: [], - lastUpdated: Date.now(), + it('should handle clipboard.writeText failure gracefully', async () => { + const consoleError = vi.spyOn(console, 'error').mockImplementation(() => {}); + const writeText = vi.fn().mockRejectedValue(new Error('Clipboard error')); + Object.assign(navigator, { clipboard: { writeText } }); + + const session = createSession({ + inputMode: 'ai', + aiTabs: [{ + id: 'tab-1', + agentSessionId: 'abc12345-def6-7890', + name: 'Tab 1', + isUnread: false, + createdAt: Date.now(), + }], + activeTabId: 'tab-1', }); - const session = createSession({ isGitRepo: true }); render(); + fireEvent.click(screen.getByText('ABC12345')); + await waitFor(() => { - expect(screen.getByText(/main|GIT/)).toBeInTheDocument(); + expect(consoleError).toHaveBeenCalled(); }); - const gitBadge = screen.getByText(/main|GIT/); - fireEvent.mouseEnter(gitBadge.parentElement!); + consoleError.mockRestore(); + }); + + it('should handle gitDiff with no content gracefully', async () => { + const { gitService } = await import('../../../renderer/services/git'); + vi.mocked(gitService.getDiff).mockResolvedValue({ diff: '' }); + + const setGitDiffPreview = vi.fn(); + const session = createSession({ isGitRepo: true }); + + render(); + + fireEvent.click(screen.getByTestId('view-diff-btn')); await waitFor(() => { - expect(screen.getByText('3')).toBeInTheDocument(); + // Should not call setGitDiffPreview with empty diff + expect(setGitDiffPreview).not.toHaveBeenCalled(); }); }); + }); - it('should show uncommitted changes count in git tooltip', async () => { - setMockGitStatus('session-1', { - fileCount: 7, - branch: 'main', - remote: 'https://github.com/user/repo.git', - ahead: 0, - behind: 0, - totalAdditions: 100, - totalDeletions: 50, - modifiedCount: 7, - fileChanges: [], - lastUpdated: Date.now(), + describe('Context usage calculation edge cases', () => { + it('should hide context widget when context window is zero', () => { + const session = createSession({ + aiTabs: [{ + id: 'tab-1', + agentSessionId: 'claude-1', + name: 'Tab 1', + isUnread: false, + createdAt: Date.now(), + usageStats: { + inputTokens: 1000, + outputTokens: 500, + cacheReadInputTokens: 0, + cacheCreationInputTokens: 0, + totalCostUsd: 0.05, + contextWindow: 0, + }, + }], + activeTabId: 'tab-1', + }); + + render(); + + // Context Window widget should be hidden when contextWindow is 0 (not configured) + expect(screen.queryByText('Context Window')).not.toBeInTheDocument(); + }); + + it('should cap context usage at 100%', () => { + const getContextColor = vi.fn().mockReturnValue('#ef4444'); + const session = createSession({ + aiTabs: [{ + id: 'tab-1', + agentSessionId: 'claude-1', + name: 'Tab 1', + isUnread: false, + createdAt: Date.now(), + usageStats: { + inputTokens: 150000, + outputTokens: 100000, + cacheReadInputTokens: 0, + cacheCreationInputTokens: 0, + totalCostUsd: 0.05, + contextWindow: 200000, + }, + }], + activeTabId: 'tab-1', }); + render(); + + // Context usage should be capped at 100 + expect(getContextColor).toHaveBeenCalledWith(100, theme); + }); + }); + + describe('Hover bridge behavior', () => { + it('should keep git tooltip open when moving to bridge element', async () => { const session = createSession({ isGitRepo: true }); render(); @@ -1540,20 +2232,28 @@ describe('MainPanel', () => { fireEvent.mouseEnter(gitBadge.parentElement!); await waitFor(() => { - expect(screen.getByText(/7 uncommitted changes/)).toBeInTheDocument(); + expect(screen.getByText('Branch')).toBeInTheDocument(); }); + + // Mouse leave should start closing timeout + fireEvent.mouseLeave(gitBadge.parentElement!); + + // But if we enter the bridge element, it should stay open + // (This is handled by the internal state, tooltip should still be visible) }); + }); - it('should show working tree clean message when no uncommitted changes', async () => { + describe('Singularization in uncommitted changes', () => { + it('should use singular form for 1 uncommitted change', async () => { setMockGitStatus('session-1', { - fileCount: 0, + fileCount: 1, branch: 'main', remote: 'https://github.com/user/repo.git', ahead: 0, behind: 0, - totalAdditions: 0, - totalDeletions: 0, - modifiedCount: 0, + totalAdditions: 10, + totalDeletions: 5, + modifiedCount: 1, fileChanges: [], lastUpdated: Date.now(), }); @@ -1569,284 +2269,506 @@ describe('MainPanel', () => { fireEvent.mouseEnter(gitBadge.parentElement!); await waitFor(() => { - expect(screen.getByText('Working tree clean')).toBeInTheDocument(); + expect(screen.getByText(/1 uncommitted change$/)).toBeInTheDocument(); }); }); }); - describe('Remote origin display', () => { - it('should display remote URL in git tooltip', async () => { - setMockGitStatus('session-1', { - fileCount: 0, - branch: 'main', - remote: 'https://github.com/user/my-repo.git', - ahead: 0, - behind: 0, - totalAdditions: 0, - totalDeletions: 0, - modifiedCount: 0, - fileChanges: [], - lastUpdated: Date.now(), + describe('Agent error banner', () => { + const createAgentError = (overrides: Partial<{ + type: string; + message: string; + recoverable: boolean; + agentId: string; + sessionId?: string; + timestamp: number; + }> = {}) => ({ + type: 'auth_expired' as const, + message: 'Authentication token has expired. Please re-authenticate.', + recoverable: true, + agentId: 'claude-code', + sessionId: 'session-1', + timestamp: Date.now(), + ...overrides, + }); + + it('should display error banner when active tab has an agent error', () => { + const session = createSession({ + inputMode: 'ai', + aiTabs: [{ + id: 'tab-1', + name: 'Tab 1', + isUnread: false, + createdAt: Date.now(), + agentError: createAgentError(), + }], + activeTabId: 'tab-1', }); - const session = createSession({ isGitRepo: true }); render(); - await waitFor(() => { - expect(screen.getByText(/main|GIT/)).toBeInTheDocument(); + expect(screen.getByText('Authentication token has expired. Please re-authenticate.')).toBeInTheDocument(); + }); + + it('should not display error banner when active tab has no error', () => { + const session = createSession({ + inputMode: 'ai', + aiTabs: [{ + id: 'tab-1', + name: 'Tab 1', + isUnread: false, + createdAt: Date.now(), + agentError: undefined, + }], + activeTabId: 'tab-1', }); - const gitBadge = screen.getByText(/main|GIT/); - fireEvent.mouseEnter(gitBadge.parentElement!); + render(); - await waitFor(() => { - expect(screen.getByText('Origin')).toBeInTheDocument(); - expect(screen.getByText('github.com/user/my-repo')).toBeInTheDocument(); - }); + expect(screen.queryByText(/error|expired|failed/i)).not.toBeInTheDocument(); }); - it('should copy remote URL when copy button is clicked', async () => { - const writeText = vi.fn().mockResolvedValue(undefined); - Object.assign(navigator, { clipboard: { writeText } }); + it('should display View Details button when onShowAgentErrorModal is provided', () => { + const onShowAgentErrorModal = vi.fn(); + const session = createSession({ + inputMode: 'ai', + aiTabs: [{ + id: 'tab-1', + name: 'Tab 1', + isUnread: false, + createdAt: Date.now(), + agentError: createAgentError(), + }], + activeTabId: 'tab-1', + }); - setMockGitStatus('session-1', { - fileCount: 0, - branch: 'main', - remote: 'https://github.com/user/repo.git', - ahead: 0, - behind: 0, - totalAdditions: 0, - totalDeletions: 0, - modifiedCount: 0, - fileChanges: [], - lastUpdated: Date.now(), + render(); + + expect(screen.getByText('View Details')).toBeInTheDocument(); + }); + + it('should call onShowAgentErrorModal when View Details button is clicked', () => { + const onShowAgentErrorModal = vi.fn(); + const session = createSession({ + inputMode: 'ai', + aiTabs: [{ + id: 'tab-1', + name: 'Tab 1', + isUnread: false, + createdAt: Date.now(), + agentError: createAgentError(), + }], + activeTabId: 'tab-1', }); - const session = createSession({ isGitRepo: true }); - render(); + render(); - await waitFor(() => { - expect(screen.getByText(/main|GIT/)).toBeInTheDocument(); + fireEvent.click(screen.getByText('View Details')); + + expect(onShowAgentErrorModal).toHaveBeenCalled(); + }); + + it('should not display View Details button when onShowAgentErrorModal is not provided', () => { + const session = createSession({ + inputMode: 'ai', + aiTabs: [{ + id: 'tab-1', + name: 'Tab 1', + isUnread: false, + createdAt: Date.now(), + agentError: createAgentError(), + }], + activeTabId: 'tab-1', }); - const gitBadge = screen.getByText(/main|GIT/); - fireEvent.mouseEnter(gitBadge.parentElement!); + render(); - await waitFor(() => { - expect(screen.getByText('Origin')).toBeInTheDocument(); + expect(screen.queryByText('View Details')).not.toBeInTheDocument(); + }); + + it('should display dismiss button (X) for recoverable errors when onClearAgentError is provided', () => { + const onClearAgentError = vi.fn(); + const session = createSession({ + inputMode: 'ai', + aiTabs: [{ + id: 'tab-1', + name: 'Tab 1', + isUnread: false, + createdAt: Date.now(), + agentError: createAgentError({ recoverable: true }), + }], + activeTabId: 'tab-1', }); - // Click copy remote URL button - const copyButtons = screen.getAllByTitle(/Copy remote URL/); - fireEvent.click(copyButtons[0]); + render(); - expect(writeText).toHaveBeenCalledWith('https://github.com/user/repo.git'); + expect(screen.getByTitle('Dismiss error')).toBeInTheDocument(); }); - }); - describe('Edge cases', () => { - it('should handle session with no tabs gracefully', () => { - const session = createSession({ aiTabs: undefined }); + it('should call onClearAgentError when dismiss button is clicked', () => { + const onClearAgentError = vi.fn(); + const session = createSession({ + inputMode: 'ai', + aiTabs: [{ + id: 'tab-1', + name: 'Tab 1', + isUnread: false, + createdAt: Date.now(), + agentError: createAgentError({ recoverable: true }), + }], + activeTabId: 'tab-1', + }); - render(); + render(); - expect(screen.queryByTestId('tab-bar')).not.toBeInTheDocument(); + fireEvent.click(screen.getByTitle('Dismiss error')); + + expect(onClearAgentError).toHaveBeenCalled(); }); - it('should handle empty tabs array gracefully', () => { - const session = createSession({ aiTabs: [] }); + it('should not display dismiss button for non-recoverable errors', () => { + const onClearAgentError = vi.fn(); + const session = createSession({ + inputMode: 'ai', + aiTabs: [{ + id: 'tab-1', + name: 'Tab 1', + isUnread: false, + createdAt: Date.now(), + agentError: createAgentError({ recoverable: false }), + }], + activeTabId: 'tab-1', + }); - render(); + render(); - expect(screen.queryByTestId('tab-bar')).not.toBeInTheDocument(); + // Error banner should be shown but dismiss button should not be present + expect(screen.getByText('Authentication token has expired. Please re-authenticate.')).toBeInTheDocument(); + expect(screen.queryByTitle('Dismiss error')).not.toBeInTheDocument(); }); - it('should handle tab without usageStats', () => { + it('should not display dismiss button when onClearAgentError is not provided', () => { const session = createSession({ + inputMode: 'ai', aiTabs: [{ id: 'tab-1', - agentSessionId: 'claude-1', name: 'Tab 1', isUnread: false, createdAt: Date.now(), - usageStats: undefined, + agentError: createAgentError({ recoverable: true }), }], activeTabId: 'tab-1', }); - render(); + render(); - // Should render without crashing - Context Window widget is hidden when contextWindow is not configured - expect(screen.queryByText('Context Window')).not.toBeInTheDocument(); + expect(screen.queryByTitle('Dismiss error')).not.toBeInTheDocument(); }); - it('should handle missing git status from context gracefully', async () => { - // Remove git status data for session (simulating context not having data yet) - setMockGitStatus('session-1', undefined); + it('should display error banner with AlertCircle icon', () => { + const session = createSession({ + inputMode: 'ai', + aiTabs: [{ + id: 'tab-1', + name: 'Tab 1', + isUnread: false, + createdAt: Date.now(), + agentError: createAgentError(), + }], + activeTabId: 'tab-1', + }); - const session = createSession({ isGitRepo: true }); + const { container } = render(); + + // Check for the AlertCircle icon (lucide-react renders as SVG with lucide class) + // Look for an SVG within the error banner container (next to the error message) + const errorMessage = screen.getByText('Authentication token has expired. Please re-authenticate.'); + const banner = errorMessage.closest('div.flex.items-center'); + const alertIcon = banner?.querySelector('svg'); + expect(alertIcon).toBeInTheDocument(); + }); + + it('should display different error messages for different error types', () => { + const errorTypes = [ + { type: 'auth_expired', message: 'Your session has expired' }, + { type: 'token_exhaustion', message: 'Context window is full' }, + { type: 'rate_limited', message: 'Rate limit exceeded' }, + { type: 'network_error', message: 'Network connection failed' }, + { type: 'agent_crashed', message: 'Agent process crashed unexpectedly' }, + ]; + + for (const { type, message } of errorTypes) { + const session = createSession({ + inputMode: 'ai', + aiTabs: [{ + id: 'tab-1', + name: 'Tab 1', + isUnread: false, + createdAt: Date.now(), + agentError: createAgentError({ type: type as any, message }), + }], + activeTabId: 'tab-1', + }); + + const { unmount } = render(); + + expect(screen.getByText(message)).toBeInTheDocument(); + unmount(); + } + }); + + it('should only show error for the active tab, not inactive tabs', () => { + const session = createSession({ + inputMode: 'ai', + aiTabs: [ + { + id: 'tab-1', + name: 'Tab 1', + isUnread: false, + createdAt: Date.now(), + agentError: createAgentError({ message: 'Error on tab 1' }), + }, + { + id: 'tab-2', + name: 'Tab 2', + isUnread: false, + createdAt: Date.now(), + agentError: createAgentError({ message: 'Error on tab 2' }), + }, + ], + activeTabId: 'tab-2', // Tab 2 is active + }); render(); - // Should render without crashing, showing GIT badge (without branch name since no data) - await waitFor(() => { - expect(screen.getByText(/GIT/)).toBeInTheDocument(); - }); + // Should show tab-2's error, not tab-1's + expect(screen.getByText('Error on tab 2')).toBeInTheDocument(); + expect(screen.queryByText('Error on tab 1')).not.toBeInTheDocument(); }); - it('should handle clipboard.writeText failure gracefully', async () => { - const consoleError = vi.spyOn(console, 'error').mockImplementation(() => {}); - const writeText = vi.fn().mockRejectedValue(new Error('Clipboard error')); - Object.assign(navigator, { clipboard: { writeText } }); + it('should not display error banner when session is null', () => { + render(); + // Empty state should be shown, no error banner + expect(screen.getByText('No agents. Create one to get started.')).toBeInTheDocument(); + expect(screen.queryByRole('alert')).not.toBeInTheDocument(); + }); + + it('should still display error banner in terminal mode when active tab has error', () => { + // The error banner is shown based on activeTab's error, not inputMode + // This ensures users see errors even when they switch to terminal mode const session = createSession({ - inputMode: 'ai', + inputMode: 'terminal', aiTabs: [{ id: 'tab-1', - agentSessionId: 'abc12345-def6-7890', name: 'Tab 1', isUnread: false, createdAt: Date.now(), + agentError: createAgentError(), }], activeTabId: 'tab-1', }); render(); - fireEvent.click(screen.getByText('ABC12345')); + // The error banner is shown regardless of inputMode to ensure visibility + expect(screen.getByText('Authentication token has expired. Please re-authenticate.')).toBeInTheDocument(); + }); - await waitFor(() => { - expect(consoleError).toHaveBeenCalled(); + it('should display both View Details and dismiss buttons when both callbacks are provided for recoverable errors', () => { + const onShowAgentErrorModal = vi.fn(); + const onClearAgentError = vi.fn(); + const session = createSession({ + inputMode: 'ai', + aiTabs: [{ + id: 'tab-1', + name: 'Tab 1', + isUnread: false, + createdAt: Date.now(), + agentError: createAgentError({ recoverable: true }), + }], + activeTabId: 'tab-1', }); - consoleError.mockRestore(); - }); + render(); - it('should handle gitDiff with no content gracefully', async () => { - const { gitService } = await import('../../../renderer/services/git'); - vi.mocked(gitService.getDiff).mockResolvedValue({ diff: '' }); + expect(screen.getByText('View Details')).toBeInTheDocument(); + expect(screen.getByTitle('Dismiss error')).toBeInTheDocument(); + }); - const setGitDiffPreview = vi.fn(); - const session = createSession({ isGitRepo: true }); + it('should have appropriate styling (error color) for the banner', () => { + const session = createSession({ + inputMode: 'ai', + aiTabs: [{ + id: 'tab-1', + name: 'Tab 1', + isUnread: false, + createdAt: Date.now(), + agentError: createAgentError(), + }], + activeTabId: 'tab-1', + }); - render(); + const { container } = render(); - fireEvent.click(screen.getByTestId('view-diff-btn')); + // Find the error banner element by looking for the error message container + const errorMessage = screen.getByText('Authentication token has expired. Please re-authenticate.'); + const banner = errorMessage.closest('div.flex.items-center'); - await waitFor(() => { - // Should not call setGitDiffPreview with empty diff - expect(setGitDiffPreview).not.toHaveBeenCalled(); - }); + // The banner should have error-colored styling + expect(banner).toHaveStyle({ backgroundColor: expect.stringMatching(/ef4444|#ef4444/) }); }); - }); - describe('Context usage calculation edge cases', () => { - it('should hide context widget when context window is zero', () => { - const session = createSession({ + it('should handle error banner when switching between tabs with and without errors', () => { + // Start with a tab that has an error + const sessionWithError = createSession({ + inputMode: 'ai', aiTabs: [{ id: 'tab-1', - agentSessionId: 'claude-1', name: 'Tab 1', isUnread: false, createdAt: Date.now(), - usageStats: { - inputTokens: 1000, - outputTokens: 500, - cacheReadInputTokens: 0, - cacheCreationInputTokens: 0, - totalCostUsd: 0.05, - contextWindow: 0, - }, + agentError: createAgentError({ message: 'Error message' }), }], activeTabId: 'tab-1', }); - render(); + const { rerender } = render(); - // Context Window widget should be hidden when contextWindow is 0 (not configured) - expect(screen.queryByText('Context Window')).not.toBeInTheDocument(); + expect(screen.getByText('Error message')).toBeInTheDocument(); + + // Switch to a tab without an error + const sessionWithoutError = createSession({ + inputMode: 'ai', + aiTabs: [{ + id: 'tab-2', + name: 'Tab 2', + isUnread: false, + createdAt: Date.now(), + agentError: undefined, + }], + activeTabId: 'tab-2', + }); + + rerender(); + + expect(screen.queryByText('Error message')).not.toBeInTheDocument(); }); - it('should cap context usage at 100%', () => { - const getContextColor = vi.fn().mockReturnValue('#ef4444'); + it('should display error banner below tab bar in AI mode', () => { const session = createSession({ + inputMode: 'ai', aiTabs: [{ id: 'tab-1', - agentSessionId: 'claude-1', name: 'Tab 1', isUnread: false, createdAt: Date.now(), - usageStats: { - inputTokens: 150000, - outputTokens: 100000, - cacheReadInputTokens: 0, - cacheCreationInputTokens: 0, - totalCostUsd: 0.05, - contextWindow: 200000, - }, + agentError: createAgentError(), }], activeTabId: 'tab-1', }); - render(); + const { container } = render(); - // Context usage should be capped at 100 - expect(getContextColor).toHaveBeenCalledWith(100, theme); - }); - }); + // Tab bar should exist + expect(screen.getByTestId('tab-bar')).toBeInTheDocument(); - describe('Hover bridge behavior', () => { - it('should keep git tooltip open when moving to bridge element', async () => { - const session = createSession({ isGitRepo: true }); - render(); + // Error banner should exist + const errorMessage = screen.getByText('Authentication token has expired. Please re-authenticate.'); + expect(errorMessage).toBeInTheDocument(); - await waitFor(() => { - expect(screen.getByText(/main|GIT/)).toBeInTheDocument(); - }); + // Verify DOM order: tab-bar comes before error banner + const tabBar = screen.getByTestId('tab-bar'); + const errorBanner = errorMessage.closest('div.flex.items-center'); - const gitBadge = screen.getByText(/main|GIT/); - fireEvent.mouseEnter(gitBadge.parentElement!); + // Both should be siblings in the DOM tree + const mainPanel = container.querySelector('[style*="backgroundColor"]'); + if (mainPanel && tabBar && errorBanner) { + const children = Array.from(mainPanel.children); + const tabBarIndex = children.indexOf(tabBar); + const errorBannerIndex = children.indexOf(errorBanner as Element); - await waitFor(() => { - expect(screen.getByText('Branch')).toBeInTheDocument(); + // Tab bar should come before error banner (smaller index) + // Note: This depends on the exact DOM structure + } + }); + + it('should truncate very long error messages gracefully', () => { + const longMessage = 'A'.repeat(500) + ' error message'; + const session = createSession({ + inputMode: 'ai', + aiTabs: [{ + id: 'tab-1', + name: 'Tab 1', + isUnread: false, + createdAt: Date.now(), + agentError: createAgentError({ message: longMessage }), + }], + activeTabId: 'tab-1', }); - // Mouse leave should start closing timeout - fireEvent.mouseLeave(gitBadge.parentElement!); + render(); - // But if we enter the bridge element, it should stay open - // (This is handled by the internal state, tooltip should still be visible) + // The error message should be displayed (the component doesn't truncate, but CSS might) + expect(screen.getByText(longMessage)).toBeInTheDocument(); }); - }); - describe('Singularization in uncommitted changes', () => { - it('should use singular form for 1 uncommitted change', async () => { - setMockGitStatus('session-1', { - fileCount: 1, - branch: 'main', - remote: 'https://github.com/user/repo.git', - ahead: 0, - behind: 0, - totalAdditions: 10, - totalDeletions: 5, - modifiedCount: 1, - fileChanges: [], - lastUpdated: Date.now(), + it('should still display error banner when previewFile is open', () => { + // The error banner appears above file preview in the layout hierarchy + // This ensures users see critical errors even while previewing files + const previewFile = { name: 'test.ts', content: 'test content', path: '/test/test.ts' }; + const session = createSession({ + inputMode: 'ai', + aiTabs: [{ + id: 'tab-1', + name: 'Tab 1', + isUnread: false, + createdAt: Date.now(), + agentError: createAgentError(), + }], + activeTabId: 'tab-1', }); - const session = createSession({ isGitRepo: true }); - render(); + render(); - await waitFor(() => { - expect(screen.getByText(/main|GIT/)).toBeInTheDocument(); + // Both error banner and file preview should be visible + expect(screen.getByText('Authentication token has expired. Please re-authenticate.')).toBeInTheDocument(); + expect(screen.getByTestId('file-preview')).toBeInTheDocument(); + }); + + it('should handle error with empty message gracefully', () => { + const session = createSession({ + inputMode: 'ai', + aiTabs: [{ + id: 'tab-1', + name: 'Tab 1', + isUnread: false, + createdAt: Date.now(), + agentError: { + type: 'unknown', + message: '', // Empty message + recoverable: true, + agentId: 'claude-code', + timestamp: Date.now(), + }, + }], + activeTabId: 'tab-1', }); - const gitBadge = screen.getByText(/main|GIT/); - fireEvent.mouseEnter(gitBadge.parentElement!); + // Should render without crashing + const { container } = render(); - await waitFor(() => { - expect(screen.getByText(/1 uncommitted change$/)).toBeInTheDocument(); - }); + // The banner should still render with an icon even if message is empty + // Look for the error banner structure - contains an SVG icon + const errorBanner = container.querySelector('div.flex.items-center.gap-3'); + expect(errorBanner).toBeInTheDocument(); + const alertIcon = errorBanner?.querySelector('svg'); + expect(alertIcon).toBeInTheDocument(); }); }); }); diff --git a/src/__tests__/renderer/components/RightPanel.test.tsx b/src/__tests__/renderer/components/RightPanel.test.tsx index 4b6becf43..1455f3a13 100644 --- a/src/__tests__/renderer/components/RightPanel.test.tsx +++ b/src/__tests__/renderer/components/RightPanel.test.tsx @@ -985,6 +985,9 @@ describe('RightPanel', () => { }); describe('Elapsed time calculation', () => { + // Note: Elapsed time display uses wall clock time (Date.now() - startTime) + // and is updated via an interval while the batch run is active. + it('should clear elapsed time when batch run is not running', async () => { const currentSessionBatchState: BatchRunState = { isRunning: false, @@ -999,17 +1002,18 @@ describe('RightPanel', () => { completedTasksAcrossAllDocs: 5, loopEnabled: false, loopIteration: 0, - startTime: Date.now(), + startTime: Date.now() - 5000, + cumulativeTaskTimeMs: 5000, }; const props = createDefaultProps({ currentSessionBatchState }); render(); // Elapsed time should not be displayed when not running - expect(screen.queryByText(/elapsed/i)).not.toBeInTheDocument(); + expect(screen.queryByText(/\d+s/)).not.toBeInTheDocument(); }); it('should display elapsed seconds when batch run is running', async () => { - const startTime = Date.now() - 5000; // Started 5 seconds ago + // Set startTime to 5 seconds ago const currentSessionBatchState: BatchRunState = { isRunning: true, isStopping: false, @@ -1023,21 +1027,18 @@ describe('RightPanel', () => { completedTasksAcrossAllDocs: 5, loopEnabled: false, loopIteration: 0, - startTime, + startTime: Date.now() - 5000, // 5 seconds ago + cumulativeTaskTimeMs: 5000, }; const props = createDefaultProps({ currentSessionBatchState }); render(); - // Initial render shows elapsed time - await act(async () => { - vi.advanceTimersByTime(0); - }); - - expect(screen.getByText(/\d+s/)).toBeInTheDocument(); + // Should show "5s" based on wall clock time (startTime was 5 seconds ago) + expect(screen.getByText('5s')).toBeInTheDocument(); }); it('should display elapsed minutes and seconds', async () => { - const startTime = Date.now() - 125000; // Started 2 minutes 5 seconds ago + // Set startTime to 2 minutes 5 seconds ago const currentSessionBatchState: BatchRunState = { isRunning: true, isStopping: false, @@ -1051,24 +1052,18 @@ describe('RightPanel', () => { completedTasksAcrossAllDocs: 5, loopEnabled: false, loopIteration: 0, - startTime, - // Time tracking fields for visibility-aware elapsed time - accumulatedElapsedMs: 0, - lastActiveTimestamp: startTime, + startTime: Date.now() - 125000, // 2 minutes 5 seconds ago + cumulativeTaskTimeMs: 125000, }; const props = createDefaultProps({ currentSessionBatchState }); render(); - await act(async () => { - vi.advanceTimersByTime(0); - }); - // Should show format like "2m 5s" - expect(screen.getByText(/\d+m \d+s/)).toBeInTheDocument(); + expect(screen.getByText('2m 5s')).toBeInTheDocument(); }); it('should display elapsed hours and minutes', async () => { - const startTime = Date.now() - 3725000; // Started 1 hour, 2 minutes, 5 seconds ago + // Set startTime to 1 hour 2 minutes 5 seconds ago const currentSessionBatchState: BatchRunState = { isRunning: true, isStopping: false, @@ -1082,24 +1077,18 @@ describe('RightPanel', () => { completedTasksAcrossAllDocs: 5, loopEnabled: false, loopIteration: 0, - startTime, - // Time tracking fields for visibility-aware elapsed time - accumulatedElapsedMs: 0, - lastActiveTimestamp: startTime, + startTime: Date.now() - 3725000, // 1 hour, 2 minutes, 5 seconds ago + cumulativeTaskTimeMs: 3725000, }; const props = createDefaultProps({ currentSessionBatchState }); render(); - await act(async () => { - vi.advanceTimersByTime(0); - }); - // Should show format like "1h 2m" - expect(screen.getByText(/\d+h \d+m/)).toBeInTheDocument(); + expect(screen.getByText('1h 2m')).toBeInTheDocument(); }); - it('should update elapsed time every second', async () => { - const startTime = Date.now(); + it('should update elapsed time when startTime changes', async () => { + const now = Date.now(); const currentSessionBatchState: BatchRunState = { isRunning: true, isStopping: false, @@ -1113,60 +1102,45 @@ describe('RightPanel', () => { completedTasksAcrossAllDocs: 5, loopEnabled: false, loopIteration: 0, - startTime, + startTime: now - 3000, // 3 seconds ago + cumulativeTaskTimeMs: 3000, }; const props = createDefaultProps({ currentSessionBatchState }); - render(); - - // Initial render - await act(async () => { - vi.advanceTimersByTime(0); - }); - expect(screen.getByText('0s')).toBeInTheDocument(); + const { rerender } = render(); - // Advance time by 3 seconds (timer updates every 3s for performance - Quick Win 3) - await act(async () => { - vi.advanceTimersByTime(3000); - }); + // Initial render shows 3s expect(screen.getByText('3s')).toBeInTheDocument(); - // Advance time by another 3 seconds - await act(async () => { - vi.advanceTimersByTime(3000); - }); + // Update startTime to 6 seconds ago (simulating a new batch run or elapsed time update) + const updatedBatchState = { ...currentSessionBatchState, startTime: now - 6000 }; + rerender(); + + // Should now show 6s expect(screen.getByText('6s')).toBeInTheDocument(); }); - it('should clear interval when batch run stops', async () => { - const clearIntervalSpy = vi.spyOn(window, 'clearInterval'); - const startTime = Date.now(); + it('should show 0s elapsed time when batch run just started', async () => { const currentSessionBatchState: BatchRunState = { isRunning: true, isStopping: false, documents: ['doc1'], currentDocumentIndex: 0, totalTasks: 10, - completedTasks: 5, + completedTasks: 0, currentDocTasksTotal: 10, - currentDocTasksCompleted: 5, + currentDocTasksCompleted: 0, totalTasksAcrossAllDocs: 10, - completedTasksAcrossAllDocs: 5, + completedTasksAcrossAllDocs: 0, loopEnabled: false, loopIteration: 0, - startTime, + startTime: Date.now(), // Just started + cumulativeTaskTimeMs: 0, }; const props = createDefaultProps({ currentSessionBatchState }); - const { rerender } = render(); - - await act(async () => { - vi.advanceTimersByTime(0); - }); - - // Stop the batch run - const stoppedBatchRunState = { ...currentSessionBatchState, isRunning: false }; - rerender(); + render(); - expect(clearIntervalSpy).toHaveBeenCalled(); + // Should show 0s when just started (elapsed time is displayed even at 0) + expect(screen.getByText('0s')).toBeInTheDocument(); }); }); diff --git a/src/__tests__/renderer/components/SessionList.test.tsx b/src/__tests__/renderer/components/SessionList.test.tsx index 8c413e544..b5c46db44 100644 --- a/src/__tests__/renderer/components/SessionList.test.tsx +++ b/src/__tests__/renderer/components/SessionList.test.tsx @@ -28,6 +28,7 @@ vi.mock('lucide-react', () => ({ Settings: () => , ChevronRight: () => , ChevronDown: () => , + ChevronUp: () => , Activity: () => , X: () => , Keyboard: () => , @@ -40,6 +41,7 @@ vi.mock('lucide-react', () => ({ Info: () => , FileText: () => , GitBranch: () => , + GitPullRequest: () => , Bot: () => , Clock: () => , ScrollText: () => , @@ -53,6 +55,7 @@ vi.mock('lucide-react', () => ({ Download: () => , Compass: () => , Globe: () => , + BookOpen: () => , })); // Mock gitService diff --git a/src/__tests__/renderer/components/SettingsModal.test.tsx b/src/__tests__/renderer/components/SettingsModal.test.tsx index 0fb469776..550840747 100644 --- a/src/__tests__/renderer/components/SettingsModal.test.tsx +++ b/src/__tests__/renderer/components/SettingsModal.test.tsx @@ -60,7 +60,7 @@ vi.mock('../../../renderer/components/CustomThemeBuilder', () => ({ })); // Mock useSettings hook (used for context management settings) -vi.mock('../../../renderer/hooks/useSettings', () => ({ +vi.mock('../../../renderer/hooks/settings/useSettings', () => ({ useSettings: () => ({ contextManagementSettings: { autoGroomContexts: true, diff --git a/src/__tests__/renderer/components/TemplateAutocompleteDropdown.test.tsx b/src/__tests__/renderer/components/TemplateAutocompleteDropdown.test.tsx index 2ca7a3c13..800610550 100644 --- a/src/__tests__/renderer/components/TemplateAutocompleteDropdown.test.tsx +++ b/src/__tests__/renderer/components/TemplateAutocompleteDropdown.test.tsx @@ -8,7 +8,7 @@ import { render, screen, fireEvent, cleanup } from '@testing-library/react'; import React from 'react'; import { TemplateAutocompleteDropdown } from '../../../renderer/components/TemplateAutocompleteDropdown'; import type { Theme } from '../../../renderer/types'; -import type { AutocompleteState } from '../../../renderer/hooks/useTemplateAutocomplete'; +import type { AutocompleteState } from '../../../renderer/hooks'; // Create a mock theme for testing const createMockTheme = (): Theme => ({ diff --git a/src/__tests__/renderer/components/TerminalOutput.test.tsx b/src/__tests__/renderer/components/TerminalOutput.test.tsx index 281af7971..3f7db208e 100644 --- a/src/__tests__/renderer/components/TerminalOutput.test.tsx +++ b/src/__tests__/renderer/components/TerminalOutput.test.tsx @@ -49,11 +49,16 @@ vi.mock('ansi-to-html', () => ({ }, })); +// Track layer stack mock functions +const mockRegisterLayer = vi.fn().mockReturnValue('layer-1'); +const mockUnregisterLayer = vi.fn(); +const mockUpdateLayerHandler = vi.fn(); + vi.mock('../../../renderer/contexts/LayerStackContext', () => ({ useLayerStack: () => ({ - registerLayer: vi.fn().mockReturnValue('layer-1'), - unregisterLayer: vi.fn(), - updateLayerHandler: vi.fn(), + registerLayer: mockRegisterLayer, + unregisterLayer: mockUnregisterLayer, + updateLayerHandler: mockUpdateLayerHandler, }), })); @@ -342,6 +347,166 @@ describe('TerminalOutput', () => { expect(setOutputSearchOpen).toHaveBeenCalledWith(true); }); + + it('opens search when Ctrl+F is pressed', () => { + const setOutputSearchOpen = vi.fn(); + const props = createDefaultProps({ setOutputSearchOpen }); + const { container } = render(); + + const outputDiv = container.firstChild as HTMLElement; + fireEvent.keyDown(outputDiv, { key: 'f', ctrlKey: true }); + + expect(setOutputSearchOpen).toHaveBeenCalledWith(true); + }); + + it('filters logs case-insensitively (in terminal mode)', async () => { + // Use terminal mode to avoid log collapsing + const logs: LogEntry[] = [ + createLogEntry({ text: 'This contains HELLO world', source: 'stdout' }), + createLogEntry({ text: 'This contains hello world', source: 'stdout' }), + createLogEntry({ text: 'This does not match', source: 'stdout' }), + ]; + + const session = createDefaultSession({ + inputMode: 'terminal', + shellLogs: logs, + }); + + const props = createDefaultProps({ + session, + outputSearchQuery: 'hello', + }); + + const { container } = render(); + + // Wait for debounce (150ms) + await act(async () => { + vi.advanceTimersByTime(200); + }); + + // Both logs with 'hello' and 'HELLO' should match (case insensitive) + const logItems = container.querySelectorAll('[data-log-index]'); + expect(logItems.length).toBe(2); + }); + + it('shows all logs when search query is empty (terminal mode)', async () => { + const logs: LogEntry[] = [ + createLogEntry({ text: 'First log', source: 'stdout' }), + createLogEntry({ text: 'Second log', source: 'stdout' }), + createLogEntry({ text: 'Third log', source: 'stdout' }), + ]; + + const session = createDefaultSession({ + inputMode: 'terminal', + shellLogs: logs, + }); + + const props = createDefaultProps({ + session, + outputSearchOpen: true, + outputSearchQuery: '', + }); + + const { container } = render(); + + // Wait for debounce (150ms) + await act(async () => { + vi.advanceTimersByTime(200); + }); + + // All 3 logs should be visible when query is empty + const logItems = container.querySelectorAll('[data-log-index]'); + expect(logItems.length).toBe(3); + }); + + it('hides search input when outputSearchOpen is false', () => { + const props = createDefaultProps({ outputSearchOpen: false }); + render(); + + expect(screen.queryByPlaceholderText('Filter output... (Esc to close)')).not.toBeInTheDocument(); + }); + + it('preserves search query when filtering (controlled component)', async () => { + const setOutputSearchQuery = vi.fn(); + const props = createDefaultProps({ + outputSearchOpen: true, + outputSearchQuery: 'initial', + setOutputSearchQuery + }); + render(); + + const searchInput = screen.getByPlaceholderText('Filter output... (Esc to close)'); + + // The input should show the current query value + expect(searchInput).toHaveValue('initial'); + + // Typing calls the setter + fireEvent.change(searchInput, { target: { value: 'updated' } }); + expect(setOutputSearchQuery).toHaveBeenCalledWith('updated'); + }); + + it('does not open search when Cmd+F is pressed and search is already open', () => { + const setOutputSearchOpen = vi.fn(); + const props = createDefaultProps({ setOutputSearchOpen, outputSearchOpen: true }); + const { container } = render(); + + const outputDiv = container.firstChild as HTMLElement; + fireEvent.keyDown(outputDiv, { key: 'f', metaKey: true }); + + // Should not call setOutputSearchOpen again when already open + expect(setOutputSearchOpen).not.toHaveBeenCalled(); + }); + + it('registers layer when search opens', () => { + mockRegisterLayer.mockClear(); + const props = createDefaultProps({ outputSearchOpen: true }); + render(); + + expect(mockRegisterLayer).toHaveBeenCalledWith(expect.objectContaining({ + type: 'overlay', + ariaLabel: 'Output Search', + onEscape: expect.any(Function), + })); + }); + + it('unregisters layer when component unmounts with search open', () => { + mockUnregisterLayer.mockClear(); + const props = createDefaultProps({ outputSearchOpen: true }); + const { unmount } = render(); + + unmount(); + + expect(mockUnregisterLayer).toHaveBeenCalled(); + }); + + it('matches logs containing partial words (terminal mode)', async () => { + const logs: LogEntry[] = [ + createLogEntry({ text: 'authentication failed', source: 'stdout' }), + createLogEntry({ text: 'unauthorized access', source: 'stdout' }), + createLogEntry({ text: 'success', source: 'stdout' }), + ]; + + const session = createDefaultSession({ + inputMode: 'terminal', + shellLogs: logs, + }); + + const props = createDefaultProps({ + session, + outputSearchQuery: 'auth', + }); + + const { container } = render(); + + // Wait for debounce (150ms) + await act(async () => { + vi.advanceTimersByTime(200); + }); + + // Both 'authentication' and 'unauthorized' contain 'auth' + const logItems = container.querySelectorAll('[data-log-index]'); + expect(logItems.length).toBe(2); + }); }); describe('keyboard navigation', () => { @@ -1009,12 +1174,10 @@ describe('TerminalOutput', () => { expect(onDeleteLog).toHaveBeenCalledWith('log-1'); }); - }); - describe('markdown rendering', () => { - it('shows markdown toggle button for AI responses', () => { + it('does not show delete button when onDeleteLog is not provided', () => { const logs: LogEntry[] = [ - createLogEntry({ text: '# Heading\n\nParagraph', source: 'stdout' }), + createLogEntry({ text: 'User message', source: 'user' }), ]; const session = createDefaultSession({ @@ -1024,18 +1187,19 @@ describe('TerminalOutput', () => { const props = createDefaultProps({ session, - markdownEditMode: false, + // onDeleteLog is not provided }); render(); - expect(screen.getByTitle(/Show plain text/)).toBeInTheDocument(); + expect(screen.queryByTitle(/Delete message/)).not.toBeInTheDocument(); + expect(screen.queryByTitle(/Delete command/)).not.toBeInTheDocument(); }); - it('calls setMarkdownEditMode when toggle is clicked', async () => { - const setMarkdownEditMode = vi.fn(); + it('does not call onDeleteLog when No is clicked', async () => { + const onDeleteLog = vi.fn().mockReturnValue(null); const logs: LogEntry[] = [ - createLogEntry({ text: '# Heading', source: 'stdout' }), + createLogEntry({ id: 'log-1', text: 'User message', source: 'user' }), ]; const session = createDefaultSession({ @@ -1045,18 +1209,607 @@ describe('TerminalOutput', () => { const props = createDefaultProps({ session, - markdownEditMode: false, - setMarkdownEditMode, + onDeleteLog, }); render(); - const toggleButton = screen.getByTitle(/Show plain text/); + // Click delete button + const deleteButton = screen.getByTitle(/Delete message/); await act(async () => { - fireEvent.click(toggleButton); + fireEvent.click(deleteButton); }); - expect(setMarkdownEditMode).toHaveBeenCalledWith(true); + // Click No to cancel + const cancelButton = screen.getByRole('button', { name: 'No' }); + await act(async () => { + fireEvent.click(cancelButton); + }); + + expect(onDeleteLog).not.toHaveBeenCalled(); + // Confirmation dialog should be dismissed + expect(screen.queryByText('Delete?')).not.toBeInTheDocument(); + }); + + it('does not show delete button for stdout messages', () => { + const logs: LogEntry[] = [ + createLogEntry({ text: 'AI response', source: 'stdout' }), + ]; + + const session = createDefaultSession({ + tabs: [{ id: 'tab-1', agentSessionId: 'claude-123', logs, isUnread: false }], + activeTabId: 'tab-1', + }); + + const props = createDefaultProps({ + session, + onDeleteLog: vi.fn(), + }); + + render(); + + expect(screen.queryByTitle(/Delete message/)).not.toBeInTheDocument(); + expect(screen.queryByTitle(/Delete command/)).not.toBeInTheDocument(); + }); + + it('does not show delete button for stderr messages', () => { + const logs: LogEntry[] = [ + createLogEntry({ text: 'Error output', source: 'stderr' }), + ]; + + const session = createDefaultSession({ + tabs: [{ id: 'tab-1', agentSessionId: 'claude-123', logs, isUnread: false }], + activeTabId: 'tab-1', + }); + + const props = createDefaultProps({ + session, + onDeleteLog: vi.fn(), + }); + + render(); + + expect(screen.queryByTitle(/Delete message/)).not.toBeInTheDocument(); + expect(screen.queryByTitle(/Delete command/)).not.toBeInTheDocument(); + }); + + it('shows delete button with correct tooltip in terminal mode', () => { + const logs: LogEntry[] = [ + createLogEntry({ text: 'ls -la', source: 'user' }), + ]; + + const session = createDefaultSession({ + inputMode: 'terminal', + shellLogs: logs, + tabs: [{ id: 'tab-1', agentSessionId: 'claude-123', logs: [], isUnread: false }], + activeTabId: 'tab-1', + }); + + const props = createDefaultProps({ + session, + onDeleteLog: vi.fn(), + }); + + render(); + + expect(screen.getByTitle(/Delete command and output/)).toBeInTheDocument(); + }); + + it('shows delete button for each user message in a conversation', () => { + const logs: LogEntry[] = [ + createLogEntry({ id: 'log-1', text: 'First user message', source: 'user' }), + createLogEntry({ id: 'log-2', text: 'AI response', source: 'stdout' }), + createLogEntry({ id: 'log-3', text: 'Second user message', source: 'user' }), + createLogEntry({ id: 'log-4', text: 'Another AI response', source: 'stdout' }), + ]; + + const session = createDefaultSession({ + tabs: [{ id: 'tab-1', agentSessionId: 'claude-123', logs, isUnread: false }], + activeTabId: 'tab-1', + }); + + const props = createDefaultProps({ + session, + onDeleteLog: vi.fn(), + }); + + render(); + + // Should have 2 delete buttons, one for each user message + const deleteButtons = screen.getAllByTitle(/Delete message/); + expect(deleteButtons).toHaveLength(2); + }); + + it('confirmation dialog shows Delete? text with Yes and No buttons', async () => { + const logs: LogEntry[] = [ + createLogEntry({ text: 'User message', source: 'user' }), + ]; + + const session = createDefaultSession({ + tabs: [{ id: 'tab-1', agentSessionId: 'claude-123', logs, isUnread: false }], + activeTabId: 'tab-1', + }); + + const props = createDefaultProps({ + session, + onDeleteLog: vi.fn(), + }); + + render(); + + const deleteButton = screen.getByTitle(/Delete message/); + await act(async () => { + fireEvent.click(deleteButton); + }); + + expect(screen.getByText('Delete?')).toBeInTheDocument(); + expect(screen.getByRole('button', { name: 'Yes' })).toBeInTheDocument(); + expect(screen.getByRole('button', { name: 'No' })).toBeInTheDocument(); + }); + + it('handles onDeleteLog return value for scroll positioning', async () => { + const onDeleteLog = vi.fn().mockReturnValue(0); // Return index 0 + const logs: LogEntry[] = [ + createLogEntry({ id: 'log-1', text: 'First message', source: 'user' }), + createLogEntry({ id: 'log-2', text: 'Response', source: 'stdout' }), + createLogEntry({ id: 'log-3', text: 'Second message', source: 'user' }), + ]; + + const session = createDefaultSession({ + tabs: [{ id: 'tab-1', agentSessionId: 'claude-123', logs, isUnread: false }], + activeTabId: 'tab-1', + }); + + const props = createDefaultProps({ + session, + onDeleteLog, + }); + + render(); + + // Click delete on first message + const deleteButtons = screen.getAllByTitle(/Delete message/); + await act(async () => { + fireEvent.click(deleteButtons[0]); + }); + + const confirmButton = screen.getByRole('button', { name: 'Yes' }); + await act(async () => { + fireEvent.click(confirmButton); + }); + + expect(onDeleteLog).toHaveBeenCalledWith('log-1'); + }); + }); + + describe('markdown rendering', () => { + it('shows markdown toggle button for AI responses', () => { + const logs: LogEntry[] = [ + createLogEntry({ text: '# Heading\n\nParagraph', source: 'stdout' }), + ]; + + const session = createDefaultSession({ + tabs: [{ id: 'tab-1', agentSessionId: 'claude-123', logs, isUnread: false }], + activeTabId: 'tab-1', + }); + + const props = createDefaultProps({ + session, + markdownEditMode: false, + }); + + render(); + + expect(screen.getByTitle(/Show plain text/)).toBeInTheDocument(); + }); + + it('calls setMarkdownEditMode when toggle is clicked', async () => { + const setMarkdownEditMode = vi.fn(); + const logs: LogEntry[] = [ + createLogEntry({ text: '# Heading', source: 'stdout' }), + ]; + + const session = createDefaultSession({ + tabs: [{ id: 'tab-1', agentSessionId: 'claude-123', logs, isUnread: false }], + activeTabId: 'tab-1', + }); + + const props = createDefaultProps({ + session, + markdownEditMode: false, + setMarkdownEditMode, + }); + + render(); + + const toggleButton = screen.getByTitle(/Show plain text/); + await act(async () => { + fireEvent.click(toggleButton); + }); + + expect(setMarkdownEditMode).toHaveBeenCalledWith(true); + }); + + it('shows "Show formatted" tooltip when markdownEditMode is true', () => { + const logs: LogEntry[] = [ + createLogEntry({ text: '# Heading\n\nParagraph', source: 'stdout' }), + ]; + + const session = createDefaultSession({ + tabs: [{ id: 'tab-1', agentSessionId: 'claude-123', logs, isUnread: false }], + activeTabId: 'tab-1', + }); + + const props = createDefaultProps({ + session, + markdownEditMode: true, + }); + + render(); + + expect(screen.getByTitle(/Show formatted/)).toBeInTheDocument(); + }); + + it('toggles from formatted mode to plain text mode when clicked', async () => { + const setMarkdownEditMode = vi.fn(); + const logs: LogEntry[] = [ + createLogEntry({ text: '# Heading', source: 'stdout' }), + ]; + + const session = createDefaultSession({ + tabs: [{ id: 'tab-1', agentSessionId: 'claude-123', logs, isUnread: false }], + activeTabId: 'tab-1', + }); + + const props = createDefaultProps({ + session, + markdownEditMode: true, + setMarkdownEditMode, + }); + + render(); + + const toggleButton = screen.getByTitle(/Show formatted/); + await act(async () => { + fireEvent.click(toggleButton); + }); + + // When markdownEditMode is true, clicking should set it to false + expect(setMarkdownEditMode).toHaveBeenCalledWith(false); + }); + + it('does not show markdown toggle button for user messages', () => { + const logs: LogEntry[] = [ + createLogEntry({ text: 'User message with **markdown**', source: 'user' }), + ]; + + const session = createDefaultSession({ + tabs: [{ id: 'tab-1', agentSessionId: 'claude-123', logs, isUnread: false }], + activeTabId: 'tab-1', + }); + + const props = createDefaultProps({ + session, + markdownEditMode: false, + }); + + render(); + + expect(screen.queryByTitle(/Show plain text/)).not.toBeInTheDocument(); + expect(screen.queryByTitle(/Show formatted/)).not.toBeInTheDocument(); + }); + + it('does not show markdown toggle button in terminal mode', () => { + const logs: LogEntry[] = [ + createLogEntry({ text: 'Terminal output', source: 'stdout' }), + ]; + + const session = createDefaultSession({ + inputMode: 'terminal', + shellLogs: logs, + }); + + const props = createDefaultProps({ + session, + markdownEditMode: false, + }); + + render(); + + expect(screen.queryByTitle(/Show plain text/)).not.toBeInTheDocument(); + expect(screen.queryByTitle(/Show formatted/)).not.toBeInTheDocument(); + }); + + it('uses MarkdownRenderer when markdownEditMode is false (formatted mode)', () => { + const logs: LogEntry[] = [ + createLogEntry({ text: '# Heading\n\n**Bold text**', source: 'stdout' }), + ]; + + const session = createDefaultSession({ + tabs: [{ id: 'tab-1', agentSessionId: 'claude-123', logs, isUnread: false }], + activeTabId: 'tab-1', + }); + + const props = createDefaultProps({ + session, + markdownEditMode: false, + }); + + render(); + + // MarkdownRenderer is mocked as react-markdown, which renders with data-testid + expect(screen.getByTestId('react-markdown')).toBeInTheDocument(); + }); + + it('strips markdown when markdownEditMode is true (plain text mode)', () => { + const logs: LogEntry[] = [ + createLogEntry({ text: '# Heading\n\n**Bold text**', source: 'stdout' }), + ]; + + const session = createDefaultSession({ + tabs: [{ id: 'tab-1', agentSessionId: 'claude-123', logs, isUnread: false }], + activeTabId: 'tab-1', + }); + + const props = createDefaultProps({ + session, + markdownEditMode: true, + }); + + render(); + + // In plain text mode, markdown should be stripped + // Heading symbol (#) should be removed + // Bold markers (**) should be removed + expect(screen.getByText(/Heading/)).toBeInTheDocument(); + expect(screen.getByText(/Bold text/)).toBeInTheDocument(); + // Should not render via MarkdownRenderer + expect(screen.queryByTestId('react-markdown')).not.toBeInTheDocument(); + }); + + it('toggle button has accent color when markdownEditMode is true', () => { + const logs: LogEntry[] = [ + createLogEntry({ text: '# Heading', source: 'stdout' }), + ]; + + const session = createDefaultSession({ + tabs: [{ id: 'tab-1', agentSessionId: 'claude-123', logs, isUnread: false }], + activeTabId: 'tab-1', + }); + + const props = createDefaultProps({ + session, + markdownEditMode: true, + }); + + render(); + + const toggleButton = screen.getByTitle(/Show formatted/); + // In markdownEditMode=true, button color should be accent color + expect(toggleButton).toHaveStyle({ color: defaultTheme.colors.accent }); + }); + + it('toggle button has dim color when markdownEditMode is false', () => { + const logs: LogEntry[] = [ + createLogEntry({ text: '# Heading', source: 'stdout' }), + ]; + + const session = createDefaultSession({ + tabs: [{ id: 'tab-1', agentSessionId: 'claude-123', logs, isUnread: false }], + activeTabId: 'tab-1', + }); + + const props = createDefaultProps({ + session, + markdownEditMode: false, + }); + + render(); + + const toggleButton = screen.getByTitle(/Show plain text/); + // In markdownEditMode=false, button color should be textDim + expect(toggleButton).toHaveStyle({ color: defaultTheme.colors.textDim }); + }); + + it('preserves code block content when stripping markdown', () => { + const codeBlockText = '```javascript\nconst x = 1;\nconst y = 2;\n```'; + const logs: LogEntry[] = [ + createLogEntry({ text: codeBlockText, source: 'stdout' }), + ]; + + const session = createDefaultSession({ + tabs: [{ id: 'tab-1', agentSessionId: 'claude-123', logs, isUnread: false }], + activeTabId: 'tab-1', + }); + + const props = createDefaultProps({ + session, + markdownEditMode: true, + }); + + render(); + + // Code content should be preserved without fences + expect(screen.getByText(/const x = 1/)).toBeInTheDocument(); + expect(screen.getByText(/const y = 2/)).toBeInTheDocument(); + }); + + it('renders inline code without backticks when stripping markdown', () => { + const logs: LogEntry[] = [ + createLogEntry({ text: 'Use the `console.log` function', source: 'stdout' }), + ]; + + const session = createDefaultSession({ + tabs: [{ id: 'tab-1', agentSessionId: 'claude-123', logs, isUnread: false }], + activeTabId: 'tab-1', + }); + + const props = createDefaultProps({ + session, + markdownEditMode: true, + }); + + render(); + + // Should show the code without backticks + expect(screen.getByText(/Use the console.log function/)).toBeInTheDocument(); + }); + + it('shows markdown toggle button for stderr messages in AI mode', () => { + const logs: LogEntry[] = [ + createLogEntry({ text: 'Error: Something went wrong', source: 'stderr' }), + ]; + + const session = createDefaultSession({ + tabs: [{ id: 'tab-1', agentSessionId: 'claude-123', logs, isUnread: false }], + activeTabId: 'tab-1', + }); + + const props = createDefaultProps({ + session, + markdownEditMode: false, + }); + + render(); + + // All non-user messages in AI mode show the markdown toggle + expect(screen.getByTitle(/Show plain text/)).toBeInTheDocument(); + }); + + it('maintains markdown mode state across multiple AI responses', () => { + const logs: LogEntry[] = [ + createLogEntry({ id: 'ai-1', text: '# First Response', source: 'stdout' }), + createLogEntry({ id: 'user-1', text: 'Follow up question', source: 'user' }), + createLogEntry({ id: 'ai-2', text: '# Second Response', source: 'stdout' }), + ]; + + const session = createDefaultSession({ + tabs: [{ id: 'tab-1', agentSessionId: 'claude-123', logs, isUnread: false }], + activeTabId: 'tab-1', + }); + + const props = createDefaultProps({ + session, + markdownEditMode: true, + }); + + render(); + + // Both AI responses should be affected by the same markdown mode + // In plain text mode, we should see stripped markdown for both + expect(screen.getByText(/First Response/)).toBeInTheDocument(); + expect(screen.getByText(/Second Response/)).toBeInTheDocument(); + }); + + it('shows Eye icon when markdownEditMode is true', () => { + const logs: LogEntry[] = [ + createLogEntry({ text: '# Heading', source: 'stdout' }), + ]; + + const session = createDefaultSession({ + tabs: [{ id: 'tab-1', agentSessionId: 'claude-123', logs, isUnread: false }], + activeTabId: 'tab-1', + }); + + const props = createDefaultProps({ + session, + markdownEditMode: true, + }); + + const { container } = render(); + + // Eye icon should be present (lucide renders an svg with specific path) + const toggleButton = screen.getByTitle(/Show formatted/); + const svg = toggleButton.querySelector('svg'); + expect(svg).toBeInTheDocument(); + }); + + it('shows FileText icon when markdownEditMode is false', () => { + const logs: LogEntry[] = [ + createLogEntry({ text: '# Heading', source: 'stdout' }), + ]; + + const session = createDefaultSession({ + tabs: [{ id: 'tab-1', agentSessionId: 'claude-123', logs, isUnread: false }], + activeTabId: 'tab-1', + }); + + const props = createDefaultProps({ + session, + markdownEditMode: false, + }); + + const { container } = render(); + + // FileText icon should be present + const toggleButton = screen.getByTitle(/Show plain text/); + const svg = toggleButton.querySelector('svg'); + expect(svg).toBeInTheDocument(); + }); + + it('toggle button appears on hover (has opacity-0 group-hover:opacity-50 classes)', () => { + const logs: LogEntry[] = [ + createLogEntry({ text: '# Heading', source: 'stdout' }), + ]; + + const session = createDefaultSession({ + tabs: [{ id: 'tab-1', agentSessionId: 'claude-123', logs, isUnread: false }], + activeTabId: 'tab-1', + }); + + const props = createDefaultProps({ + session, + markdownEditMode: false, + }); + + render(); + + const toggleButton = screen.getByTitle(/Show plain text/); + // Verify the hover behavior classes are present + expect(toggleButton).toHaveClass('opacity-0'); + expect(toggleButton).toHaveClass('group-hover:opacity-50'); + }); + + it('removes links from markdown when in plain text mode', () => { + const logs: LogEntry[] = [ + createLogEntry({ text: 'Check out [this link](https://example.com)', source: 'stdout' }), + ]; + + const session = createDefaultSession({ + tabs: [{ id: 'tab-1', agentSessionId: 'claude-123', logs, isUnread: false }], + activeTabId: 'tab-1', + }); + + const props = createDefaultProps({ + session, + markdownEditMode: true, + }); + + render(); + + // Link text should be shown, but not as a link + expect(screen.getByText(/Check out this link/)).toBeInTheDocument(); + }); + + it('removes list markers from markdown when in plain text mode', () => { + const logs: LogEntry[] = [ + createLogEntry({ text: '* Item one\n* Item two\n* Item three', source: 'stdout' }), + ]; + + const session = createDefaultSession({ + tabs: [{ id: 'tab-1', agentSessionId: 'claude-123', logs, isUnread: false }], + activeTabId: 'tab-1', + }); + + const props = createDefaultProps({ + session, + markdownEditMode: true, + }); + + render(); + + // List items should be shown (stripMarkdown converts * to - for list markers) + expect(screen.getByText(/Item one/)).toBeInTheDocument(); }); }); diff --git a/src/__tests__/renderer/components/ThinkingStatusPill.test.tsx b/src/__tests__/renderer/components/ThinkingStatusPill.test.tsx index b77157ac7..84a55b30a 100644 --- a/src/__tests__/renderer/components/ThinkingStatusPill.test.tsx +++ b/src/__tests__/renderer/components/ThinkingStatusPill.test.tsx @@ -820,30 +820,7 @@ describe('ThinkingStatusPill', () => { expect(onStopAutoRun).toHaveBeenCalledTimes(1); }); - it('shows "AutoRun Stopping..." when isStopping is true', () => { - const autoRunState: BatchRunState = { - isRunning: true, - isPaused: false, - isStopping: true, - currentTaskIndex: 0, - totalTasks: 5, - completedTasks: 0, - startTime: Date.now(), - tasks: [], - batchName: 'Batch', - }; - render( - {}} - /> - ); - expect(screen.getByText('AutoRun Stopping...')).toBeInTheDocument(); - }); - - it('shows "Stopping" button text when isStopping', () => { + it('shows AutoRun label and Stopping button when isStopping is true', () => { const autoRunState: BatchRunState = { isRunning: true, isPaused: false, @@ -863,6 +840,9 @@ describe('ThinkingStatusPill', () => { onStopAutoRun={() => {}} /> ); + // AutoRun label should still be visible + expect(screen.getByText('AutoRun')).toBeInTheDocument(); + // Button should show "Stopping" text expect(screen.getByText('Stopping')).toBeInTheDocument(); }); diff --git a/src/__tests__/renderer/contexts/LayerStackContext.test.tsx b/src/__tests__/renderer/contexts/LayerStackContext.test.tsx index 93c29e3c7..9d43ed09c 100644 --- a/src/__tests__/renderer/contexts/LayerStackContext.test.tsx +++ b/src/__tests__/renderer/contexts/LayerStackContext.test.tsx @@ -18,7 +18,7 @@ import React from 'react'; import { LayerStackProvider, useLayerStack } from '../../../renderer/contexts/LayerStackContext'; // Mock the useLayerStack hook from the hooks module -vi.mock('../../../renderer/hooks/useLayerStack', () => { +vi.mock('../../../renderer/hooks/ui/useLayerStack', () => { const mockRegisterLayer = vi.fn().mockReturnValue('test-layer-id'); const mockUnregisterLayer = vi.fn(); const mockGetTopLayer = vi.fn().mockReturnValue(null); @@ -45,7 +45,7 @@ vi.mock('../../../renderer/hooks/useLayerStack', () => { }); // Import the mocked module to get access to the mock functions -import { useLayerStack as useLayerStackHook } from '../../../renderer/hooks/useLayerStack'; +import { useLayerStack as useLayerStackHook } from '../../../renderer/hooks'; describe('LayerStackContext', () => { let mockLayerStackAPI: ReturnType; diff --git a/src/__tests__/renderer/hooks/useAchievements.test.ts b/src/__tests__/renderer/hooks/useAchievements.test.ts index 621f15aa7..8f8aecd22 100644 --- a/src/__tests__/renderer/hooks/useAchievements.test.ts +++ b/src/__tests__/renderer/hooks/useAchievements.test.ts @@ -16,7 +16,7 @@ import { type AchievementState, type PendingAchievement, type UseAchievementsReturn, -} from '../../../renderer/hooks/useAchievements'; +} from '../../../renderer/hooks'; import { CONDUCTOR_BADGES } from '../../../renderer/constants/conductorBadges'; import type { AutoRunStats } from '../../../renderer/types'; diff --git a/src/__tests__/renderer/hooks/useActivityTracker.test.ts b/src/__tests__/renderer/hooks/useActivityTracker.test.ts index 25b1f8446..bdf62e602 100644 --- a/src/__tests__/renderer/hooks/useActivityTracker.test.ts +++ b/src/__tests__/renderer/hooks/useActivityTracker.test.ts @@ -1,6 +1,6 @@ import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'; import { renderHook, act } from '@testing-library/react'; -import { useActivityTracker, UseActivityTrackerReturn } from '../../../renderer/hooks/useActivityTracker'; +import { useActivityTracker, UseActivityTrackerReturn } from '../../../renderer/hooks'; import type { Session } from '../../../renderer/types'; // Constants matching the source file diff --git a/src/__tests__/renderer/hooks/useAgentCapabilities.test.ts b/src/__tests__/renderer/hooks/useAgentCapabilities.test.ts index 8b476809b..5c9d406c0 100644 --- a/src/__tests__/renderer/hooks/useAgentCapabilities.test.ts +++ b/src/__tests__/renderer/hooks/useAgentCapabilities.test.ts @@ -4,7 +4,7 @@ import { useAgentCapabilities, clearCapabilitiesCache, DEFAULT_CAPABILITIES, -} from '../../../renderer/hooks/useAgentCapabilities'; +} from '../../../renderer/hooks'; const baseCapabilities = { supportsResume: true, diff --git a/src/__tests__/renderer/hooks/useAgentErrorRecovery.test.ts b/src/__tests__/renderer/hooks/useAgentErrorRecovery.test.ts index db8ece6ea..722a9c3fe 100644 --- a/src/__tests__/renderer/hooks/useAgentErrorRecovery.test.ts +++ b/src/__tests__/renderer/hooks/useAgentErrorRecovery.test.ts @@ -1,6 +1,6 @@ import { describe, it, expect, vi } from 'vitest'; import { renderHook, act } from '@testing-library/react'; -import { useAgentErrorRecovery } from '../../../renderer/hooks/useAgentErrorRecovery'; +import { useAgentErrorRecovery } from '../../../renderer/hooks'; import type { AgentError } from '../../../shared/types'; const baseError: AgentError = { diff --git a/src/__tests__/renderer/hooks/useAgentExecution.test.ts b/src/__tests__/renderer/hooks/useAgentExecution.test.ts index 3ec57d5cd..f9abf857b 100644 --- a/src/__tests__/renderer/hooks/useAgentExecution.test.ts +++ b/src/__tests__/renderer/hooks/useAgentExecution.test.ts @@ -1,6 +1,6 @@ import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'; import { renderHook, act, waitFor } from '@testing-library/react'; -import { useAgentExecution } from '../../../renderer/hooks/useAgentExecution'; +import { useAgentExecution } from '../../../renderer/hooks'; import type { Session, AITab, UsageStats, QueuedItem } from '../../../renderer/types'; const createMockTab = (overrides: Partial = {}): AITab => ({ diff --git a/src/__tests__/renderer/hooks/useAgentSessionManagement.test.ts b/src/__tests__/renderer/hooks/useAgentSessionManagement.test.ts index 76d377976..694c91830 100644 --- a/src/__tests__/renderer/hooks/useAgentSessionManagement.test.ts +++ b/src/__tests__/renderer/hooks/useAgentSessionManagement.test.ts @@ -1,7 +1,7 @@ import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'; import { renderHook, act } from '@testing-library/react'; import type { RefObject } from 'react'; -import { useAgentSessionManagement } from '../../../renderer/hooks/useAgentSessionManagement'; +import { useAgentSessionManagement } from '../../../renderer/hooks'; import type { Session, AITab, LogEntry } from '../../../renderer/types'; import type { RightPanelHandle } from '../../../renderer/components/RightPanel'; diff --git a/src/__tests__/renderer/hooks/useAtMentionCompletion.test.ts b/src/__tests__/renderer/hooks/useAtMentionCompletion.test.ts index 774eeacb4..02c61af89 100644 --- a/src/__tests__/renderer/hooks/useAtMentionCompletion.test.ts +++ b/src/__tests__/renderer/hooks/useAtMentionCompletion.test.ts @@ -1,6 +1,6 @@ import { describe, it, expect, beforeEach } from 'vitest'; import { renderHook, act } from '@testing-library/react'; -import { useAtMentionCompletion, type AtMentionSuggestion, type UseAtMentionCompletionReturn } from '../../../renderer/hooks/useAtMentionCompletion'; +import { useAtMentionCompletion, type AtMentionSuggestion, type UseAtMentionCompletionReturn } from '../../../renderer/hooks'; import type { Session } from '../../../renderer/types'; import type { FileNode } from '../../../renderer/types/fileTree'; diff --git a/src/__tests__/renderer/hooks/useAutoRunHandlers.test.ts b/src/__tests__/renderer/hooks/useAutoRunHandlers.test.ts index 4247a4e3d..f0ba90064 100644 --- a/src/__tests__/renderer/hooks/useAutoRunHandlers.test.ts +++ b/src/__tests__/renderer/hooks/useAutoRunHandlers.test.ts @@ -17,7 +17,7 @@ import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'; import { renderHook, act, waitFor } from '@testing-library/react'; -import { useAutoRunHandlers } from '../../../renderer/hooks/useAutoRunHandlers'; +import { useAutoRunHandlers } from '../../../renderer/hooks'; import type { Session, BatchRunConfig } from '../../../renderer/types'; // ============================================================================ diff --git a/src/__tests__/renderer/hooks/useAutoRunImageHandling.test.ts b/src/__tests__/renderer/hooks/useAutoRunImageHandling.test.ts index ac068bd61..d546906e0 100644 --- a/src/__tests__/renderer/hooks/useAutoRunImageHandling.test.ts +++ b/src/__tests__/renderer/hooks/useAutoRunImageHandling.test.ts @@ -17,7 +17,7 @@ import { useAutoRunImageHandling, imageCache, type UseAutoRunImageHandlingDeps, -} from '../../../renderer/hooks/useAutoRunImageHandling'; +} from '../../../renderer/hooks'; import React from 'react'; // ============================================================================ diff --git a/src/__tests__/renderer/hooks/useAutoRunUndo.test.ts b/src/__tests__/renderer/hooks/useAutoRunUndo.test.ts index 77652ce46..645b32776 100644 --- a/src/__tests__/renderer/hooks/useAutoRunUndo.test.ts +++ b/src/__tests__/renderer/hooks/useAutoRunUndo.test.ts @@ -18,7 +18,7 @@ import { useAutoRunUndo, type UseAutoRunUndoDeps, type UndoState, -} from '../../../renderer/hooks/useAutoRunUndo'; +} from '../../../renderer/hooks'; import React from 'react'; // ============================================================================ diff --git a/src/__tests__/renderer/hooks/useAvailableAgents.test.ts b/src/__tests__/renderer/hooks/useAvailableAgents.test.ts index b2201a51e..9dc9c8e1b 100644 --- a/src/__tests__/renderer/hooks/useAvailableAgents.test.ts +++ b/src/__tests__/renderer/hooks/useAvailableAgents.test.ts @@ -3,9 +3,9 @@ import { renderHook, act, waitFor } from '@testing-library/react'; import { useAvailableAgents, useAvailableAgentsForCapability, -} from '../../../renderer/hooks/useAvailableAgents'; +} from '../../../renderer/hooks'; import type { Session } from '../../../renderer/types'; -import { DEFAULT_CAPABILITIES, type AgentCapabilities } from '../../../renderer/hooks/useAgentCapabilities'; +import { DEFAULT_CAPABILITIES, type AgentCapabilities } from '../../../renderer/hooks'; // Define agent config type matching what detect() returns interface AgentConfigDetected { diff --git a/src/__tests__/renderer/hooks/useBatchProcessor.test.ts b/src/__tests__/renderer/hooks/useBatchProcessor.test.ts index 19be08e58..82f6a7ec7 100644 --- a/src/__tests__/renderer/hooks/useBatchProcessor.test.ts +++ b/src/__tests__/renderer/hooks/useBatchProcessor.test.ts @@ -13,7 +13,7 @@ import { renderHook, act, waitFor } from '@testing-library/react'; import type { Session, Group, HistoryEntry, UsageStats, BatchRunConfig, AgentError } from '../../../renderer/types'; // Import the exported functions directly -import { countUnfinishedTasks, uncheckAllTasks, useBatchProcessor } from '../../../renderer/hooks/useBatchProcessor'; +import { countUnfinishedTasks, uncheckAllTasks, useBatchProcessor } from '../../../renderer/hooks'; // ============================================================================ // Tests for countUnfinishedTasks @@ -598,6 +598,7 @@ describe('useBatchProcessor hook', () => { // Mock window.maestro methods let mockReadDoc: ReturnType; let mockWriteDoc: ReturnType; + let mockCreateWorkingCopy: ReturnType; let mockStatus: ReturnType; let mockBranch: ReturnType; let mockBroadcastAutoRunState: ReturnType; @@ -619,6 +620,7 @@ describe('useBatchProcessor hook', () => { // Set up window.maestro mocks mockReadDoc = vi.fn().mockResolvedValue({ success: true, content: '# Tasks\n- [ ] Task 1\n- [ ] Task 2' }); mockWriteDoc = vi.fn().mockResolvedValue({ success: true }); + mockCreateWorkingCopy = vi.fn().mockResolvedValue({ workingCopyPath: 'Runs/tasks-run-1.md' }); mockStatus = vi.fn().mockResolvedValue({ stdout: '' }); mockBranch = vi.fn().mockResolvedValue({ stdout: 'main' }); mockBroadcastAutoRunState = vi.fn(); @@ -634,6 +636,7 @@ describe('useBatchProcessor hook', () => { autorun: { readDoc: mockReadDoc, writeDoc: mockWriteDoc, + createWorkingCopy: mockCreateWorkingCopy, watchFolder: vi.fn(), unwatchFolder: vi.fn(), readFolder: vi.fn() @@ -1362,7 +1365,10 @@ describe('useBatchProcessor hook', () => { }); describe('reset on completion', () => { - it('should reset checked tasks when resetOnCompletion is enabled', async () => { + it('should create working copy when resetOnCompletion is enabled', async () => { + // Note: Reset-on-completion now uses working copies in /Runs/ directory + // instead of modifying the original document. This preserves the original + // and allows the agent to work on a copy. const sessions = [createMockSession()]; const groups = [createMockGroup()]; @@ -1398,8 +1404,8 @@ describe('useBatchProcessor hook', () => { }, '/test/folder'); }); - // Should have written the reset content back - expect(mockWriteDoc).toHaveBeenCalled(); + // Should have created a working copy for the reset-on-completion document + expect(mockCreateWorkingCopy).toHaveBeenCalledWith('/test/folder', 'tasks', 1); }); }); @@ -3198,7 +3204,10 @@ describe('useBatchProcessor hook', () => { }); describe('reset-on-completion in loop mode', () => { - it('should reset checked tasks when document has resetOnCompletion enabled', async () => { + it('should create working copy when document has resetOnCompletion enabled', async () => { + // Note: Reset-on-completion now uses working copies in /Runs/ directory + // instead of modifying the original document. This preserves the original + // and allows the agent to work on a copy each loop iteration. const sessions = [createMockSession()]; const groups = [createMockGroup()]; @@ -3210,9 +3219,6 @@ describe('useBatchProcessor hook', () => { return { success: true, content: '- [x] Repeating task' }; }); - const mockWriteDoc = vi.fn().mockResolvedValue({ success: true }); - window.maestro.autorun.writeDoc = mockWriteDoc; - mockOnSpawnAgent.mockResolvedValue({ success: true, agentSessionId: 'test' }); const { result } = renderHook(() => @@ -3236,7 +3242,8 @@ describe('useBatchProcessor hook', () => { }, '/test/folder'); }); - expect(mockWriteDoc).toHaveBeenCalled(); + // Should have created a working copy for the reset-on-completion document + expect(mockCreateWorkingCopy).toHaveBeenCalledWith('/test/folder', 'tasks', 1); }); }); diff --git a/src/__tests__/renderer/hooks/useClickOutside.test.ts b/src/__tests__/renderer/hooks/useClickOutside.test.ts index 74f9f824b..e9e5695f5 100644 --- a/src/__tests__/renderer/hooks/useClickOutside.test.ts +++ b/src/__tests__/renderer/hooks/useClickOutside.test.ts @@ -8,7 +8,7 @@ import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'; import { renderHook, act } from '@testing-library/react'; import { useRef } from 'react'; -import { useClickOutside } from '../../../renderer/hooks/useClickOutside'; +import { useClickOutside } from '../../../renderer/hooks'; describe('useClickOutside', () => { let container: HTMLDivElement; diff --git a/src/__tests__/renderer/hooks/useExpandedSet.test.ts b/src/__tests__/renderer/hooks/useExpandedSet.test.ts index 7d1efb5f3..1f7c066b0 100644 --- a/src/__tests__/renderer/hooks/useExpandedSet.test.ts +++ b/src/__tests__/renderer/hooks/useExpandedSet.test.ts @@ -7,7 +7,7 @@ import { describe, it, expect, vi, beforeEach } from 'vitest'; import { renderHook, act } from '@testing-library/react'; -import { useExpandedSet } from '../../../renderer/hooks/useExpandedSet'; +import { useExpandedSet } from '../../../renderer/hooks'; describe('useExpandedSet', () => { beforeEach(() => { diff --git a/src/__tests__/renderer/hooks/useFileTreeManagement.test.ts b/src/__tests__/renderer/hooks/useFileTreeManagement.test.ts index 3f757d8d6..27cf0467b 100644 --- a/src/__tests__/renderer/hooks/useFileTreeManagement.test.ts +++ b/src/__tests__/renderer/hooks/useFileTreeManagement.test.ts @@ -11,7 +11,7 @@ import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'; import { renderHook, act, waitFor } from '@testing-library/react'; -import { useFileTreeManagement, type UseFileTreeManagementDeps } from '../../../renderer/hooks/useFileTreeManagement'; +import { useFileTreeManagement, type UseFileTreeManagementDeps } from '../../../renderer/hooks'; import type { Session } from '../../../renderer/types'; import type { FileNode } from '../../../renderer/types/fileTree'; import type { RightPanelHandle } from '../../../renderer/components/RightPanel'; diff --git a/src/__tests__/renderer/hooks/useGitStatusPolling.test.ts b/src/__tests__/renderer/hooks/useGitStatusPolling.test.ts index e3144621b..90577763b 100644 --- a/src/__tests__/renderer/hooks/useGitStatusPolling.test.ts +++ b/src/__tests__/renderer/hooks/useGitStatusPolling.test.ts @@ -9,7 +9,7 @@ import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'; import { renderHook, act, waitFor } from '@testing-library/react'; -import { useGitStatusPolling } from '../../../renderer/hooks/useGitStatusPolling'; +import { useGitStatusPolling } from '../../../renderer/hooks'; import type { Session } from '../../../renderer/types'; import { gitService } from '../../../renderer/services/git'; diff --git a/src/__tests__/renderer/hooks/useGroupManagement.test.ts b/src/__tests__/renderer/hooks/useGroupManagement.test.ts index e4af0b251..3fafc70ce 100644 --- a/src/__tests__/renderer/hooks/useGroupManagement.test.ts +++ b/src/__tests__/renderer/hooks/useGroupManagement.test.ts @@ -11,7 +11,7 @@ import { describe, it, expect, vi, beforeEach } from 'vitest'; import { renderHook, act } from '@testing-library/react'; -import { useGroupManagement, type UseGroupManagementDeps } from '../../../renderer/hooks/useGroupManagement'; +import { useGroupManagement, type UseGroupManagementDeps } from '../../../renderer/hooks'; import type { Group, Session } from '../../../renderer/types'; // ============================================================================ diff --git a/src/__tests__/renderer/hooks/useHoverTooltip.test.ts b/src/__tests__/renderer/hooks/useHoverTooltip.test.ts index 0b9f1bdb9..70264e5c9 100644 --- a/src/__tests__/renderer/hooks/useHoverTooltip.test.ts +++ b/src/__tests__/renderer/hooks/useHoverTooltip.test.ts @@ -1,6 +1,6 @@ import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'; import { renderHook, act } from '@testing-library/react'; -import { useHoverTooltip } from '../../../renderer/hooks/useHoverTooltip'; +import { useHoverTooltip } from '../../../renderer/hooks'; describe('useHoverTooltip', () => { beforeEach(() => { diff --git a/src/__tests__/renderer/hooks/useInputProcessing.test.ts b/src/__tests__/renderer/hooks/useInputProcessing.test.ts new file mode 100644 index 000000000..090914c2d --- /dev/null +++ b/src/__tests__/renderer/hooks/useInputProcessing.test.ts @@ -0,0 +1,603 @@ +import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'; +import { renderHook, act } from '@testing-library/react'; +import { useInputProcessing } from '../../../renderer/hooks/input/useInputProcessing'; +import type { Session, AITab, CustomAICommand, BatchRunState, QueuedItem } from '../../../renderer/types'; + +// Create a mock AITab +const createMockTab = (overrides: Partial = {}): AITab => ({ + id: 'tab-1', + agentSessionId: null, + name: null, + starred: false, + logs: [], + inputValue: '', + stagedImages: [], + createdAt: 1700000000000, + state: 'idle', + saveToHistory: true, + ...overrides, +}); + +// Create a mock Session +const createMockSession = (overrides: Partial = {}): Session => { + const baseTab = createMockTab(); + + return { + id: 'session-1', + name: 'Test Session', + toolType: 'claude-code', + state: 'idle', + cwd: '/test/project', + fullPath: '/test/project', + projectRoot: '/test/project', + aiLogs: [], + shellLogs: [], + workLog: [], + contextUsage: 0, + inputMode: 'ai', + aiPid: 1234, + terminalPid: 5678, + port: 0, + isLive: false, + changedFiles: [], + isGitRepo: false, + fileTree: [], + fileExplorerExpanded: [], + fileExplorerScrollPos: 0, + aiTabs: [baseTab], + activeTabId: baseTab.id, + closedTabHistory: [], + executionQueue: [], + activeTimeMs: 0, + ...overrides, + } as Session; +}; + +// Default batch state (not running) +const defaultBatchState: BatchRunState = { + isRunning: false, + isStopping: false, + documents: [], + lockedDocuments: [], + currentDocumentIndex: 0, + currentDocTasksTotal: 0, + currentDocTasksCompleted: 0, + totalTasksAcrossAllDocs: 0, + completedTasksAcrossAllDocs: 0, + loopEnabled: false, + loopIteration: 0, + folderPath: '', + worktreeActive: false, +}; + +describe('useInputProcessing', () => { + const mockSetSessions = vi.fn(); + const mockSetInputValue = vi.fn(); + const mockSetStagedImages = vi.fn(); + const mockSetSlashCommandOpen = vi.fn(); + const mockSyncAiInputToSession = vi.fn(); + const mockSyncTerminalInputToSession = vi.fn(); + const mockGetBatchState = vi.fn(() => defaultBatchState); + const mockProcessQueuedItemRef = { current: vi.fn() }; + const mockFlushBatchedUpdates = vi.fn(); + const mockOnHistoryCommand = vi.fn().mockResolvedValue(undefined); + const mockInputRef = { current: null } as React.RefObject; + + // Store original window.maestro + const originalMaestro = { ...window.maestro }; + + beforeEach(() => { + vi.clearAllMocks(); + mockGetBatchState.mockReturnValue(defaultBatchState); + + // Mock window.maestro.process.spawn + window.maestro = { + ...window.maestro, + process: { + ...window.maestro?.process, + spawn: vi.fn().mockResolvedValue(undefined), + write: vi.fn().mockResolvedValue(undefined), + runCommand: vi.fn().mockResolvedValue(undefined), + }, + agents: { + ...window.maestro?.agents, + get: vi.fn().mockResolvedValue({ + id: 'claude-code', + command: 'claude', + path: '/usr/local/bin/claude', + args: ['--print', '--verbose'], + }), + }, + web: { + ...window.maestro?.web, + broadcastUserInput: vi.fn().mockResolvedValue(undefined), + }, + } as typeof window.maestro; + }); + + afterEach(() => { + Object.assign(window.maestro, originalMaestro); + }); + + // Helper to create hook dependencies + const createDeps = (overrides: Partial[0]> = {}) => { + const session = createMockSession(); + const sessionsRef = { current: [session] }; + + return { + activeSession: session, + activeSessionId: session.id, + setSessions: mockSetSessions, + inputValue: '', + setInputValue: mockSetInputValue, + stagedImages: [], + setStagedImages: mockSetStagedImages, + inputRef: mockInputRef, + customAICommands: [] as CustomAICommand[], + setSlashCommandOpen: mockSetSlashCommandOpen, + syncAiInputToSession: mockSyncAiInputToSession, + syncTerminalInputToSession: mockSyncTerminalInputToSession, + isAiMode: true, + sessionsRef, + getBatchState: mockGetBatchState, + activeBatchRunState: defaultBatchState, + processQueuedItemRef: mockProcessQueuedItemRef, + flushBatchedUpdates: mockFlushBatchedUpdates, + onHistoryCommand: mockOnHistoryCommand, + ...overrides, + }; + }; + + describe('hook initialization', () => { + it('returns processInput function', () => { + const deps = createDeps(); + const { result } = renderHook(() => useInputProcessing(deps)); + + expect(result.current.processInput).toBeInstanceOf(Function); + expect(result.current.processInputRef).toBeDefined(); + }); + + it('handles null session gracefully', async () => { + const deps = createDeps({ activeSession: null }); + const { result } = renderHook(() => useInputProcessing(deps)); + + // Should not throw + await act(async () => { + await result.current.processInput('test message'); + }); + + // Should not call any state setters + expect(mockSetSessions).not.toHaveBeenCalled(); + }); + }); + + describe('built-in /history command', () => { + it('intercepts /history command and calls handler', async () => { + const deps = createDeps({ inputValue: '/history' }); + const { result } = renderHook(() => useInputProcessing(deps)); + + await act(async () => { + await result.current.processInput(); + }); + + expect(mockOnHistoryCommand).toHaveBeenCalledTimes(1); + expect(mockSetInputValue).toHaveBeenCalledWith(''); + expect(mockSetSlashCommandOpen).toHaveBeenCalledWith(false); + }); + + it('does not intercept /history in terminal mode', async () => { + const session = createMockSession({ inputMode: 'terminal' }); + const deps = createDeps({ + activeSession: session, + inputValue: '/history', + isAiMode: false, + }); + const { result } = renderHook(() => useInputProcessing(deps)); + + await act(async () => { + await result.current.processInput(); + }); + + // Should not call history handler in terminal mode + expect(mockOnHistoryCommand).not.toHaveBeenCalled(); + }); + }); + + describe('custom AI commands', () => { + const customCommands: CustomAICommand[] = [ + { + id: 'commit', + command: '/commit', + description: 'Commit changes', + prompt: 'Please commit all outstanding changes with a good message.', + isBuiltIn: true, + }, + { + id: 'test', + command: '/test', + description: 'Run tests', + prompt: 'Run the test suite and report results.', + }, + ]; + + it('matches and processes custom AI command', async () => { + const deps = createDeps({ + inputValue: '/commit', + customAICommands: customCommands, + }); + const { result } = renderHook(() => useInputProcessing(deps)); + + await act(async () => { + await result.current.processInput(); + }); + + // Should clear input + expect(mockSetInputValue).toHaveBeenCalledWith(''); + expect(mockSetSlashCommandOpen).toHaveBeenCalledWith(false); + expect(mockSyncAiInputToSession).toHaveBeenCalledWith(''); + }); + + it('does not match unknown slash command as custom command', async () => { + const deps = createDeps({ + inputValue: '/unknown-command', + customAICommands: customCommands, + }); + const { result } = renderHook(() => useInputProcessing(deps)); + + await act(async () => { + await result.current.processInput(); + }); + + // Unknown command should be sent through as regular message + // (for agent to handle natively) + expect(mockSetSessions).toHaveBeenCalled(); + }); + + it('processes command immediately when session is idle', async () => { + vi.useFakeTimers(); + + const deps = createDeps({ + inputValue: '/commit', + customAICommands: customCommands, + }); + const { result } = renderHook(() => useInputProcessing(deps)); + + await act(async () => { + await result.current.processInput(); + }); + + // Advance timer to trigger immediate processing + await act(async () => { + vi.advanceTimersByTime(100); + }); + + // Should call processQueuedItem + expect(mockProcessQueuedItemRef.current).toHaveBeenCalled(); + + vi.useRealTimers(); + }); + + it('queues command when session is busy', async () => { + const busySession = createMockSession({ + state: 'busy', + aiTabs: [createMockTab({ state: 'busy' })], + }); + const deps = createDeps({ + activeSession: busySession, + inputValue: '/test', + customAICommands: customCommands, + }); + const { result } = renderHook(() => useInputProcessing(deps)); + + await act(async () => { + await result.current.processInput(); + }); + + // Should add to execution queue + expect(mockSetSessions).toHaveBeenCalled(); + const setSessionsCall = mockSetSessions.mock.calls[0][0]; + // The function passed should add to executionQueue + const updatedSessions = setSessionsCall([busySession]); + expect(updatedSessions[0].executionQueue.length).toBe(1); + expect(updatedSessions[0].executionQueue[0].type).toBe('command'); + expect(updatedSessions[0].executionQueue[0].command).toBe('/test'); + }); + }); + + describe('speckit commands (via customAICommands)', () => { + // SpecKit commands are now included in customAICommands with id prefix 'speckit-' + const speckitCommands: CustomAICommand[] = [ + { + id: 'speckit-help', + command: '/speckit.help', + description: 'Learn how to use spec-kit', + prompt: '# Spec-Kit Help\n\nYou are explaining how to use Spec-Kit...', + isBuiltIn: true, + }, + { + id: 'speckit-constitution', + command: '/speckit.constitution', + description: 'Create project constitution', + prompt: '# Create Constitution\n\nCreate a project constitution...', + isBuiltIn: true, + }, + ]; + + it('matches and processes speckit command', async () => { + const deps = createDeps({ + inputValue: '/speckit.help', + customAICommands: speckitCommands, + }); + const { result } = renderHook(() => useInputProcessing(deps)); + + await act(async () => { + await result.current.processInput(); + }); + + // Should clear input (indicates command was matched) + expect(mockSetInputValue).toHaveBeenCalledWith(''); + expect(mockSetSlashCommandOpen).toHaveBeenCalledWith(false); + }); + + it('matches speckit.constitution command', async () => { + const deps = createDeps({ + inputValue: '/speckit.constitution', + customAICommands: speckitCommands, + }); + const { result } = renderHook(() => useInputProcessing(deps)); + + await act(async () => { + await result.current.processInput(); + }); + + expect(mockSetInputValue).toHaveBeenCalledWith(''); + }); + + it('does not match partial speckit command', async () => { + const deps = createDeps({ + inputValue: '/speckit', // Not a complete command + customAICommands: speckitCommands, + }); + const { result } = renderHook(() => useInputProcessing(deps)); + + await act(async () => { + await result.current.processInput(); + }); + + // Partial command should be sent through as message + expect(mockSetSessions).toHaveBeenCalled(); + }); + }); + + describe('combined custom and speckit commands', () => { + // Test the real-world scenario where both are combined + const combinedCommands: CustomAICommand[] = [ + // Regular custom command + { + id: 'commit', + command: '/commit', + description: 'Commit changes', + prompt: 'Commit all changes.', + isBuiltIn: true, + }, + // Speckit command (merged into customAICommands) + { + id: 'speckit-help', + command: '/speckit.help', + description: 'Spec-kit help', + prompt: 'Help content here.', + isBuiltIn: true, + }, + ]; + + it('matches custom command when both types present', async () => { + const deps = createDeps({ + inputValue: '/commit', + customAICommands: combinedCommands, + }); + const { result } = renderHook(() => useInputProcessing(deps)); + + await act(async () => { + await result.current.processInput(); + }); + + expect(mockSetInputValue).toHaveBeenCalledWith(''); + }); + + it('matches speckit command when both types present', async () => { + const deps = createDeps({ + inputValue: '/speckit.help', + customAICommands: combinedCommands, + }); + const { result } = renderHook(() => useInputProcessing(deps)); + + await act(async () => { + await result.current.processInput(); + }); + + expect(mockSetInputValue).toHaveBeenCalledWith(''); + }); + }); + + describe('agent-native commands (pass-through)', () => { + // Agent commands like /compact, /clear should NOT be in customAICommands + // and should fall through to be sent to the agent as regular messages + it('passes unknown slash command to agent as message', async () => { + const deps = createDeps({ + inputValue: '/compact', // Claude Code native command + customAICommands: [], // Not in custom commands + }); + const { result } = renderHook(() => useInputProcessing(deps)); + + await act(async () => { + await result.current.processInput(); + }); + + // Should be processed as a regular message (setSessions called for adding to logs) + expect(mockSetSessions).toHaveBeenCalled(); + }); + + it('passes /clear command through to agent', async () => { + const deps = createDeps({ + inputValue: '/clear', + customAICommands: [], + }); + const { result } = renderHook(() => useInputProcessing(deps)); + + await act(async () => { + await result.current.processInput(); + }); + + expect(mockSetSessions).toHaveBeenCalled(); + }); + }); + + describe('terminal mode behavior', () => { + it('does not process custom commands in terminal mode', async () => { + const session = createMockSession({ inputMode: 'terminal' }); + const deps = createDeps({ + activeSession: session, + inputValue: '/commit', + customAICommands: [ + { id: 'commit', command: '/commit', description: 'Commit', prompt: 'Commit changes.' }, + ], + isAiMode: false, + }); + const { result } = renderHook(() => useInputProcessing(deps)); + + await act(async () => { + await result.current.processInput(); + }); + + // Should not match custom command in terminal mode + // Input should be processed as terminal command + expect(mockSetSessions).toHaveBeenCalled(); + }); + }); + + describe('empty input handling', () => { + it('does not process empty input', async () => { + const deps = createDeps({ inputValue: '' }); + const { result } = renderHook(() => useInputProcessing(deps)); + + await act(async () => { + await result.current.processInput(); + }); + + expect(mockSetSessions).not.toHaveBeenCalled(); + expect(mockSetInputValue).not.toHaveBeenCalled(); + }); + + it('does not process whitespace-only input', async () => { + const deps = createDeps({ inputValue: ' ' }); + const { result } = renderHook(() => useInputProcessing(deps)); + + await act(async () => { + await result.current.processInput(); + }); + + expect(mockSetSessions).not.toHaveBeenCalled(); + }); + + it('processes input with only images (no text)', async () => { + const deps = createDeps({ + inputValue: '', + stagedImages: ['base64-image-data'], + }); + const { result } = renderHook(() => useInputProcessing(deps)); + + await act(async () => { + await result.current.processInput(); + }); + + // Should process because there are staged images + expect(mockSetSessions).toHaveBeenCalled(); + }); + }); + + describe('override input value', () => { + it('uses overrideInputValue when provided', async () => { + const customCommands: CustomAICommand[] = [ + { id: 'commit', command: '/commit', description: 'Commit', prompt: 'Commit.' }, + ]; + const deps = createDeps({ + inputValue: 'ignored input', + customAICommands: customCommands, + }); + const { result } = renderHook(() => useInputProcessing(deps)); + + await act(async () => { + await result.current.processInput('/commit'); // Override + }); + + // Should match the override value, not the inputValue + expect(mockSetInputValue).toHaveBeenCalledWith(''); + }); + }); + + describe('Auto Run blocking', () => { + it('queues write commands when Auto Run is active', async () => { + const runningBatchState: BatchRunState = { + ...defaultBatchState, + isRunning: true, + }; + mockGetBatchState.mockReturnValue(runningBatchState); + + const session = createMockSession({ state: 'idle' }); + const deps = createDeps({ + activeSession: session, + inputValue: 'regular message', + activeBatchRunState: runningBatchState, + }); + const { result } = renderHook(() => useInputProcessing(deps)); + + await act(async () => { + await result.current.processInput(); + }); + + // Should add to queue because Auto Run is active + expect(mockSetSessions).toHaveBeenCalled(); + const setSessionsCall = mockSetSessions.mock.calls[0][0]; + const updatedSessions = setSessionsCall([session]); + expect(updatedSessions[0].executionQueue.length).toBe(1); + }); + }); + + describe('flushBatchedUpdates', () => { + it('calls flushBatchedUpdates before processing', async () => { + const deps = createDeps({ inputValue: 'test message' }); + const { result } = renderHook(() => useInputProcessing(deps)); + + await act(async () => { + await result.current.processInput(); + }); + + expect(mockFlushBatchedUpdates).toHaveBeenCalledTimes(1); + }); + }); + + describe('command history tracking', () => { + it('adds slash command to aiCommandHistory', async () => { + const customCommands: CustomAICommand[] = [ + { id: 'test', command: '/test', description: 'Test', prompt: 'Test prompt.' }, + ]; + const session = createMockSession(); + const deps = createDeps({ + activeSession: session, + inputValue: '/test', + customAICommands: customCommands, + }); + const { result } = renderHook(() => useInputProcessing(deps)); + + await act(async () => { + await result.current.processInput(); + }); + + // Verify command history is updated + expect(mockSetSessions).toHaveBeenCalled(); + const setSessionsCall = mockSetSessions.mock.calls[0][0]; + const updatedSessions = setSessionsCall([session]); + expect(updatedSessions[0].aiCommandHistory).toContain('/test'); + }); + }); +}); diff --git a/src/__tests__/renderer/hooks/useKeyboardNavigation.test.ts b/src/__tests__/renderer/hooks/useKeyboardNavigation.test.ts index 3507894ff..aa2fc148a 100644 --- a/src/__tests__/renderer/hooks/useKeyboardNavigation.test.ts +++ b/src/__tests__/renderer/hooks/useKeyboardNavigation.test.ts @@ -1,6 +1,6 @@ import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'; import { renderHook, act } from '@testing-library/react'; -import { useKeyboardNavigation, UseKeyboardNavigationDeps } from '../../../renderer/hooks/useKeyboardNavigation'; +import { useKeyboardNavigation, UseKeyboardNavigationDeps } from '../../../renderer/hooks'; import type { Session, Group, FocusArea } from '../../../renderer/types'; // Create a mock session diff --git a/src/__tests__/renderer/hooks/useLayerStack.test.ts b/src/__tests__/renderer/hooks/useLayerStack.test.ts index a99352c55..90ad7f5ff 100644 --- a/src/__tests__/renderer/hooks/useLayerStack.test.ts +++ b/src/__tests__/renderer/hooks/useLayerStack.test.ts @@ -7,7 +7,7 @@ import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'; import { renderHook, act } from '@testing-library/react'; -import { useLayerStack } from '../../../renderer/hooks/useLayerStack'; +import { useLayerStack } from '../../../renderer/hooks'; import { ModalLayer, OverlayLayer } from '../../../renderer/types/layer'; describe('useLayerStack', () => { diff --git a/src/__tests__/renderer/hooks/useListNavigation.test.ts b/src/__tests__/renderer/hooks/useListNavigation.test.ts index 1ce9d508a..6eae204fc 100644 --- a/src/__tests__/renderer/hooks/useListNavigation.test.ts +++ b/src/__tests__/renderer/hooks/useListNavigation.test.ts @@ -7,7 +7,7 @@ import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'; import { renderHook, act } from '@testing-library/react'; -import { useListNavigation } from '../../../renderer/hooks/useListNavigation'; +import { useListNavigation } from '../../../renderer/hooks'; // Helper to create keyboard events function createKeyboardEvent(key: string, options: Partial = {}): KeyboardEvent { diff --git a/src/__tests__/renderer/hooks/useMainKeyboardHandler.test.ts b/src/__tests__/renderer/hooks/useMainKeyboardHandler.test.ts index d852f141f..96d6844fb 100644 --- a/src/__tests__/renderer/hooks/useMainKeyboardHandler.test.ts +++ b/src/__tests__/renderer/hooks/useMainKeyboardHandler.test.ts @@ -1,6 +1,6 @@ import { renderHook, act } from '@testing-library/react'; import { vi, describe, it, expect, beforeEach, afterEach } from 'vitest'; -import { useMainKeyboardHandler } from '../../../renderer/hooks/useMainKeyboardHandler'; +import { useMainKeyboardHandler } from '../../../renderer/hooks'; /** * Creates a minimal mock context with all required handler functions. diff --git a/src/__tests__/renderer/hooks/useMergeSession.test.ts b/src/__tests__/renderer/hooks/useMergeSession.test.ts index 188572eaa..48d22f1a0 100644 --- a/src/__tests__/renderer/hooks/useMergeSession.test.ts +++ b/src/__tests__/renderer/hooks/useMergeSession.test.ts @@ -5,7 +5,7 @@ import { useMergeSessionWithSessions, type MergeSessionRequest, __resetMergeInProgress, -} from '../../../renderer/hooks/useMergeSession'; +} from '../../../renderer/hooks'; import type { Session, AITab, LogEntry, ToolType } from '../../../renderer/types'; import type { MergeOptions } from '../../../renderer/components/MergeSessionModal'; import * as contextGroomer from '../../../renderer/services/contextGroomer'; diff --git a/src/__tests__/renderer/hooks/useMobileLandscape.test.ts b/src/__tests__/renderer/hooks/useMobileLandscape.test.ts index 33d42e311..6bb08834f 100644 --- a/src/__tests__/renderer/hooks/useMobileLandscape.test.ts +++ b/src/__tests__/renderer/hooks/useMobileLandscape.test.ts @@ -1,6 +1,6 @@ import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'; import { renderHook, act } from '@testing-library/react'; -import { useMobileLandscape } from '../../../renderer/hooks/useMobileLandscape'; +import { useMobileLandscape } from '../../../renderer/hooks'; describe('useMobileLandscape', () => { // Store original values diff --git a/src/__tests__/renderer/hooks/useModalLayer.test.ts b/src/__tests__/renderer/hooks/useModalLayer.test.ts index afe03ca3c..8408281cd 100644 --- a/src/__tests__/renderer/hooks/useModalLayer.test.ts +++ b/src/__tests__/renderer/hooks/useModalLayer.test.ts @@ -8,7 +8,7 @@ import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'; import { renderHook, act } from '@testing-library/react'; import React from 'react'; -import { useModalLayer } from '../../../renderer/hooks/useModalLayer'; +import { useModalLayer } from '../../../renderer/hooks'; import { LayerStackProvider } from '../../../renderer/contexts/LayerStackContext'; import { useLayerStack } from '../../../renderer/contexts/LayerStackContext'; diff --git a/src/__tests__/renderer/hooks/useNavigationHistory.test.ts b/src/__tests__/renderer/hooks/useNavigationHistory.test.ts index 348aa6402..fde3e2452 100644 --- a/src/__tests__/renderer/hooks/useNavigationHistory.test.ts +++ b/src/__tests__/renderer/hooks/useNavigationHistory.test.ts @@ -1,6 +1,6 @@ import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'; import { renderHook, act } from '@testing-library/react'; -import { useNavigationHistory, NavHistoryEntry } from '../../../renderer/hooks/useNavigationHistory'; +import { useNavigationHistory, NavHistoryEntry } from '../../../renderer/hooks'; describe('useNavigationHistory', () => { beforeEach(() => { diff --git a/src/__tests__/renderer/hooks/useRemoteIntegration.test.ts b/src/__tests__/renderer/hooks/useRemoteIntegration.test.ts index 6fa392c51..474e826ea 100644 --- a/src/__tests__/renderer/hooks/useRemoteIntegration.test.ts +++ b/src/__tests__/renderer/hooks/useRemoteIntegration.test.ts @@ -1,6 +1,6 @@ import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'; import { renderHook, act } from '@testing-library/react'; -import { useRemoteIntegration } from '../../../renderer/hooks/useRemoteIntegration'; +import { useRemoteIntegration } from '../../../renderer/hooks'; import type { Session, AITab } from '../../../renderer/types'; const createMockTab = (overrides: Partial = {}): AITab => ({ @@ -520,17 +520,29 @@ describe('useRemoteIntegration', () => { }); describe('tab change broadcasting', () => { - it('broadcasts tab changes to web clients', () => { + beforeEach(() => { + vi.useFakeTimers(); + }); + + afterEach(() => { + vi.useRealTimers(); + }); + + it('broadcasts tab changes to web clients when in live mode', () => { const tab = createMockTab({ id: 'tab-1' }); const session = createMockSession({ id: 'session-1', aiTabs: [tab], activeTabId: 'tab-1', }); - const deps = createDeps({ sessions: [session] }); + // IMPORTANT: isLiveMode must be true for broadcast interval to be set up + const deps = createDeps({ sessions: [session], isLiveMode: true }); renderHook(() => useRemoteIntegration(deps)); + // Broadcast happens on 500ms interval, advance timers + vi.advanceTimersByTime(500); + expect(mockWeb.broadcastTabsChange).toHaveBeenCalledWith( 'session-1', expect.arrayContaining([ @@ -539,5 +551,22 @@ describe('useRemoteIntegration', () => { 'tab-1' ); }); + + it('does not broadcast when live mode is disabled', () => { + const tab = createMockTab({ id: 'tab-1' }); + const session = createMockSession({ + id: 'session-1', + aiTabs: [tab], + activeTabId: 'tab-1', + }); + const deps = createDeps({ sessions: [session], isLiveMode: false }); + + renderHook(() => useRemoteIntegration(deps)); + + // Advance timers - should not broadcast since not in live mode + vi.advanceTimersByTime(1000); + + expect(mockWeb.broadcastTabsChange).not.toHaveBeenCalled(); + }); }); }); diff --git a/src/__tests__/renderer/hooks/useScrollIntoView.test.ts b/src/__tests__/renderer/hooks/useScrollIntoView.test.ts index f51eca6fa..1f8c18157 100644 --- a/src/__tests__/renderer/hooks/useScrollIntoView.test.ts +++ b/src/__tests__/renderer/hooks/useScrollIntoView.test.ts @@ -1,6 +1,6 @@ import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'; import { renderHook, act } from '@testing-library/react'; -import { useScrollIntoView } from '../../../renderer/hooks/useScrollIntoView'; +import { useScrollIntoView } from '../../../renderer/hooks'; // Mock scrollIntoView since jsdom doesn't support it const mockScrollIntoView = vi.fn(); diff --git a/src/__tests__/renderer/hooks/useScrollPosition.test.ts b/src/__tests__/renderer/hooks/useScrollPosition.test.ts index d42379b99..22eb4896c 100644 --- a/src/__tests__/renderer/hooks/useScrollPosition.test.ts +++ b/src/__tests__/renderer/hooks/useScrollPosition.test.ts @@ -7,10 +7,10 @@ import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'; import { renderHook, act } from '@testing-library/react'; -import { useScrollPosition } from '../../../renderer/hooks/useScrollPosition'; +import { useScrollPosition } from '../../../renderer/hooks'; // Mock useThrottledCallback to call immediately in tests -vi.mock('../../../renderer/hooks/useThrottle', () => ({ +vi.mock('../../../renderer/hooks/utils/useThrottle', () => ({ useThrottledCallback: (fn: () => void) => fn, })); diff --git a/src/__tests__/renderer/hooks/useSendToAgent.test.ts b/src/__tests__/renderer/hooks/useSendToAgent.test.ts index ef2245936..7231d579f 100644 --- a/src/__tests__/renderer/hooks/useSendToAgent.test.ts +++ b/src/__tests__/renderer/hooks/useSendToAgent.test.ts @@ -4,7 +4,7 @@ import { useSendToAgent, useSendToAgentWithSessions, type TransferRequest, -} from '../../../renderer/hooks/useSendToAgent'; +} from '../../../renderer/hooks'; import type { Session, AITab, LogEntry, ToolType } from '../../../renderer/types'; import type { SendToAgentOptions } from '../../../renderer/components/SendToAgentModal'; import * as contextGroomer from '../../../renderer/services/contextGroomer'; diff --git a/src/__tests__/renderer/hooks/useSessionPagination.test.ts b/src/__tests__/renderer/hooks/useSessionPagination.test.ts index 8b44fac5f..66c07470a 100644 --- a/src/__tests__/renderer/hooks/useSessionPagination.test.ts +++ b/src/__tests__/renderer/hooks/useSessionPagination.test.ts @@ -11,7 +11,7 @@ import { renderHook, waitFor, act } from '@testing-library/react'; import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'; -import { useSessionPagination } from '../../../renderer/hooks/useSessionPagination'; +import { useSessionPagination } from '../../../renderer/hooks'; // Mock the window.maestro API const mockListPaginated = vi.fn(); diff --git a/src/__tests__/renderer/hooks/useSettings.test.ts b/src/__tests__/renderer/hooks/useSettings.test.ts index bd8585bcb..ec346427f 100644 --- a/src/__tests__/renderer/hooks/useSettings.test.ts +++ b/src/__tests__/renderer/hooks/useSettings.test.ts @@ -1,6 +1,6 @@ import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'; import { renderHook, act, waitFor } from '@testing-library/react'; -import { useSettings } from '../../../renderer/hooks/useSettings'; +import { useSettings } from '../../../renderer/hooks'; import type { GlobalStats, AutoRunStats, OnboardingStats, CustomAICommand } from '../../../renderer/types'; import { DEFAULT_SHORTCUTS } from '../../../renderer/constants/shortcuts'; diff --git a/src/__tests__/renderer/hooks/useTabCompletion.test.ts b/src/__tests__/renderer/hooks/useTabCompletion.test.ts index e51b6d9db..eab94d7ed 100644 --- a/src/__tests__/renderer/hooks/useTabCompletion.test.ts +++ b/src/__tests__/renderer/hooks/useTabCompletion.test.ts @@ -1,6 +1,6 @@ import { describe, it, expect, beforeEach } from 'vitest'; import { renderHook } from '@testing-library/react'; -import { useTabCompletion, TabCompletionSuggestion, TabCompletionFilter } from '../../../renderer/hooks/useTabCompletion'; +import { useTabCompletion, TabCompletionSuggestion, TabCompletionFilter } from '../../../renderer/hooks'; import type { Session } from '../../../renderer/types'; import type { FileNode } from '../../../renderer/types/fileTree'; diff --git a/src/__tests__/renderer/hooks/useTemplateAutocomplete.test.ts b/src/__tests__/renderer/hooks/useTemplateAutocomplete.test.ts index bd81a493d..d2d89d37d 100644 --- a/src/__tests__/renderer/hooks/useTemplateAutocomplete.test.ts +++ b/src/__tests__/renderer/hooks/useTemplateAutocomplete.test.ts @@ -1,6 +1,6 @@ import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'; import { renderHook, act } from '@testing-library/react'; -import { useTemplateAutocomplete } from '../../../renderer/hooks/useTemplateAutocomplete'; +import { useTemplateAutocomplete } from '../../../renderer/hooks'; import { TEMPLATE_VARIABLES } from '../../../shared/templateVariables'; describe('useTemplateAutocomplete', () => { diff --git a/src/__tests__/renderer/hooks/useWebBroadcasting.test.ts b/src/__tests__/renderer/hooks/useWebBroadcasting.test.ts index 40b854c0d..d4e4509c2 100644 --- a/src/__tests__/renderer/hooks/useWebBroadcasting.test.ts +++ b/src/__tests__/renderer/hooks/useWebBroadcasting.test.ts @@ -1,6 +1,6 @@ import { describe, it, expect, vi, beforeEach, afterEach, type Mock } from 'vitest'; import { renderHook, act, waitFor } from '@testing-library/react'; -import { useWebBroadcasting } from '../../../renderer/hooks/useWebBroadcasting'; +import { useWebBroadcasting } from '../../../renderer/hooks'; import type { RightPanelHandle } from '../../../renderer/components/RightPanel'; import type { RefObject } from 'react'; diff --git a/src/__tests__/renderer/hooks/useWorktreeValidation.test.ts b/src/__tests__/renderer/hooks/useWorktreeValidation.test.ts index d8da40c32..9e44b8e15 100644 --- a/src/__tests__/renderer/hooks/useWorktreeValidation.test.ts +++ b/src/__tests__/renderer/hooks/useWorktreeValidation.test.ts @@ -10,7 +10,7 @@ import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'; import { renderHook, waitFor } from '@testing-library/react'; -import { useWorktreeValidation } from '../../../renderer/hooks/useWorktreeValidation'; +import { useWorktreeValidation } from '../../../renderer/hooks'; // Mock the window.maestro.git object const mockGit = { diff --git a/src/__tests__/web/mobile/AllSessionsView.test.tsx b/src/__tests__/web/mobile/AllSessionsView.test.tsx index 652772acb..a59a1b42b 100644 --- a/src/__tests__/web/mobile/AllSessionsView.test.tsx +++ b/src/__tests__/web/mobile/AllSessionsView.test.tsx @@ -900,7 +900,7 @@ describe('AllSessionsView', () => { }); describe('integration scenarios', () => { - it('complete user flow: search, expand group, select session', async () => { + it('complete user flow: search, auto-expand group, select session', async () => { const onSelectSession = vi.fn(); const onClose = vi.fn(); const sessions = [ @@ -915,21 +915,18 @@ describe('AllSessionsView', () => { const searchInput = screen.getByPlaceholderText('Search agents...'); fireEvent.change(searchInput, { target: { value: 'end' } }); - // Only Frontend and Backend should match + // 2. Wait for search results and auto-expand to complete + // Groups with matching sessions should auto-expand when searching await waitFor(() => { + // Only Frontend and Backend should match expect(screen.getByText('Dev')).toBeInTheDocument(); expect(screen.queryByText('Database')).not.toBeInTheDocument(); + // Sessions should be visible due to auto-expand + expect(screen.getByText('Frontend')).toBeInTheDocument(); + expect(screen.getByText('Backend')).toBeInTheDocument(); }); - // 2. Expand Dev group - const devGroup = screen.getByRole('button', { name: /Dev group/i }); - fireEvent.click(devGroup); - - // 3. Sessions should be visible - expect(screen.getByText('Frontend')).toBeInTheDocument(); - expect(screen.getByText('Backend')).toBeInTheDocument(); - - // 4. Select Backend + // 3. Select Backend const backendCard = screen.getByRole('button', { name: /Backend session/i }); fireEvent.click(backendCard); diff --git a/src/__tests__/web/mobile/App.test.tsx b/src/__tests__/web/mobile/App.test.tsx index eab191b83..e8e756559 100644 --- a/src/__tests__/web/mobile/App.test.tsx +++ b/src/__tests__/web/mobile/App.test.tsx @@ -131,6 +131,14 @@ vi.mock('../../../web/hooks/useOfflineQueue', () => ({ // Mock config vi.mock('../../../web/utils/config', () => ({ buildApiUrl: (endpoint: string) => `http://localhost:3000${endpoint}`, + getMaestroConfig: () => ({ + securityToken: 'test-token', + sessionId: null, + tabId: null, + apiBase: '/test-token/api', + wsUrl: '/test-token/ws', + }), + updateUrlForSessionTab: vi.fn(), })); // Mock constants diff --git a/src/cli/services/agent-spawner.ts b/src/cli/services/agent-spawner.ts index 1112acb48..5400a2ac4 100644 --- a/src/cli/services/agent-spawner.ts +++ b/src/cli/services/agent-spawner.ts @@ -536,7 +536,7 @@ export function readDocAndCountTasks(folderPath: string, filename: string): { co content, taskCount: matches ? matches.length : 0, }; - } catch (error) { + } catch { return { content: '', taskCount: 0 }; } } @@ -554,7 +554,7 @@ export function readDocAndGetTasks(folderPath: string, filename: string): { cont ? matches.map(m => m.replace(/^[\s]*-\s*\[\s*\]\s*/, '').trim()) : []; return { content, tasks }; - } catch (error) { + } catch { return { content: '', tasks: [] }; } } diff --git a/src/main/agent-detector.ts b/src/main/agent-detector.ts index 48e7b1233..6f5cd9304 100644 --- a/src/main/agent-detector.ts +++ b/src/main/agent-detector.ts @@ -677,7 +677,7 @@ export class AgentDetector { } return { exists: false }; - } catch (error) { + } catch { return { exists: false }; } } diff --git a/src/main/index.ts b/src/main/index.ts index ce1f974c4..bb8a26775 100644 --- a/src/main/index.ts +++ b/src/main/index.ts @@ -339,11 +339,14 @@ function createWebServer(): WebServer { // Get the requested tab's logs (or active tab if no tabId provided) // Tabs are the source of truth for AI conversation history + // Filter out thinking and tool logs - these should never be shown on the web interface let aiLogs: any[] = []; const targetTabId = tabId || session.activeTabId; if (session.aiTabs && session.aiTabs.length > 0) { const targetTab = session.aiTabs.find((t: any) => t.id === targetTabId) || session.aiTabs[0]; - aiLogs = targetTab?.logs || []; + const rawLogs = targetTab?.logs || []; + // Web interface should never show thinking/tool logs regardless of desktop settings + aiLogs = rawLogs.filter((log: any) => log.source !== 'thinking' && log.source !== 'tool'); } return { @@ -909,6 +912,22 @@ function setupIpcHandlers() { return false; }); + // Broadcast session state change to web clients (for real-time busy/idle updates) + // This is called directly from the renderer to bypass debounced persistence + // which resets state to 'idle' before saving + ipcMain.handle('web:broadcastSessionState', async (_, sessionId: string, state: string, additionalData?: { + name?: string; + toolType?: string; + inputMode?: string; + cwd?: string; + }) => { + if (webServer && webServer.getWebClientCount() > 0) { + webServer.broadcastSessionStateChange(sessionId, state, additionalData); + return true; + } + return false; + }); + // Git operations - extracted to src/main/ipc/handlers/git.ts registerGitHandlers(); @@ -1887,8 +1906,8 @@ function extractTextFromAgentOutput(rawOutput: string, agentType: string): strin const textParts: string[] = []; let resultText: string | null = null; - let resultMessageCount = 0; - let textMessageCount = 0; + let _resultMessageCount = 0; + let _textMessageCount = 0; for (const line of lines) { if (!line.trim()) continue; @@ -1900,12 +1919,12 @@ function extractTextFromAgentOutput(rawOutput: string, agentType: string): strin if (event.type === 'result' && event.text) { // Result message is the authoritative final response - save it resultText = event.text; - resultMessageCount++; + _resultMessageCount++; } if (event.type === 'text' && event.text) { textParts.push(event.text); - textMessageCount++; + _textMessageCount++; } } diff --git a/src/main/ipc/handlers/agents.ts b/src/main/ipc/handlers/agents.ts index acbb9912e..ab9aba30e 100644 --- a/src/main/ipc/handlers/agents.ts +++ b/src/main/ipc/handlers/agents.ts @@ -41,17 +41,17 @@ function stripAgentFunctions(agent: any) { // Destructure to remove function properties from agent config const { - resumeArgs, - modelArgs, - workingDirArgs, - imageArgs, + resumeArgs: _resumeArgs, + modelArgs: _modelArgs, + workingDirArgs: _workingDirArgs, + imageArgs: _imageArgs, ...serializableAgent } = agent; return { ...serializableAgent, configOptions: agent.configOptions?.map((opt: any) => { - const { argBuilder, ...serializableOpt } = opt; + const { argBuilder: _argBuilder, ...serializableOpt } = opt; return serializableOpt; }) }; diff --git a/src/main/ipc/handlers/autorun.ts b/src/main/ipc/handlers/autorun.ts index 4f087d54c..2c3351557 100644 --- a/src/main/ipc/handlers/autorun.ts +++ b/src/main/ipc/handlers/autorun.ts @@ -569,6 +569,71 @@ export function registerAutorunHandlers(deps: { }) ); + // Create a working copy of a document for reset-on-completion loops + // Working copies are stored in /Runs/ subdirectory with format: {name}-{timestamp}-loop-{N}.md + ipcMain.handle( + 'autorun:createWorkingCopy', + createIpcHandler( + handlerOpts('createWorkingCopy'), + async (folderPath: string, filename: string, loopNumber: number) => { + // Reject obvious traversal attempts + if (filename.includes('..')) { + throw new Error('Invalid filename'); + } + + // Ensure filename has .md extension for source, remove for naming + const fullFilename = filename.endsWith('.md') ? filename : `${filename}.md`; + const baseName = filename.endsWith('.md') ? filename.slice(0, -3) : filename; + + // Handle subdirectory paths (e.g., "Ingest-Loop/0_DISCOVER_NEW") + const pathParts = baseName.split('/'); + const docName = pathParts[pathParts.length - 1]; + const subDir = pathParts.length > 1 ? pathParts.slice(0, -1).join('/') : ''; + + const sourcePath = path.join(folderPath, fullFilename); + + // Validate source path is within folder + if (!validatePathWithinFolder(sourcePath, folderPath)) { + throw new Error('Invalid file path'); + } + + // Check if source file exists + try { + await fs.access(sourcePath); + } catch { + throw new Error('Source file not found'); + } + + // Create Runs directory (with subdirectory if needed) + const runsDir = subDir + ? path.join(folderPath, 'Runs', subDir) + : path.join(folderPath, 'Runs'); + await fs.mkdir(runsDir, { recursive: true }); + + // Generate working copy filename: {name}-{timestamp}-loop-{N}.md + const timestamp = Date.now(); + const workingCopyName = `${docName}-${timestamp}-loop-${loopNumber}.md`; + const workingCopyPath = path.join(runsDir, workingCopyName); + + // Validate working copy path is within folder + if (!validatePathWithinFolder(workingCopyPath, folderPath)) { + throw new Error('Invalid working copy path'); + } + + // Copy the source to working copy + await fs.copyFile(sourcePath, workingCopyPath); + + // Return the relative path (without .md for consistency with other APIs) + const relativePath = subDir + ? `Runs/${subDir}/${workingCopyName.slice(0, -3)}` + : `Runs/${workingCopyName.slice(0, -3)}`; + + logger.info(`Created Auto Run working copy: ${relativePath}`, LOG_CONTEXT); + return { workingCopyPath: relativePath, originalPath: baseName }; + } + ) + ); + // Delete all backup files in a folder ipcMain.handle( 'autorun:deleteBackups', diff --git a/src/main/ipc/handlers/git.ts b/src/main/ipc/handlers/git.ts index 034742b2a..bb341a94c 100644 --- a/src/main/ipc/handlers/git.ts +++ b/src/main/ipc/handlers/git.ts @@ -19,7 +19,7 @@ const LOG_CONTEXT = '[Git]'; // Worktree directory watchers keyed by session ID const worktreeWatchers = new Map(); -let worktreeWatchDebounceTimers = new Map(); +const worktreeWatchDebounceTimers = new Map(); /** Helper to create handler options with Git context */ const handlerOpts = (operation: string, logSuccess = false): CreateHandlerOptions => ({ @@ -665,17 +665,10 @@ export function registerGitHandlers(): void { // Scan a directory for subdirectories that are git repositories or worktrees // This is used for auto-discovering worktrees in a parent directory + // PERFORMANCE: Parallelized git operations to avoid blocking UI (was sequential before) ipcMain.handle('git:scanWorktreeDirectory', createIpcHandler( handlerOpts('scanWorktreeDirectory'), async (parentPath: string) => { - const gitSubdirs: Array<{ - path: string; - name: string; - isWorktree: boolean; - branch: string | null; - repoRoot: string | null; - }> = []; - try { // Read directory contents const entries = await fs.readdir(parentPath, { withFileTypes: true }); @@ -683,26 +676,27 @@ export function registerGitHandlers(): void { // Filter to only directories (excluding hidden directories) const subdirs = entries.filter(e => e.isDirectory() && !e.name.startsWith('.')); - // Check each subdirectory for git status - for (const subdir of subdirs) { + // Process all subdirectories in parallel instead of sequentially + // This dramatically reduces the time for directories with many worktrees + const results = await Promise.all(subdirs.map(async (subdir) => { const subdirPath = path.join(parentPath, subdir.name); // Check if it's inside a git work tree const isInsideWorkTree = await execFileNoThrow('git', ['rev-parse', '--is-inside-work-tree'], subdirPath); if (isInsideWorkTree.exitCode !== 0) { - continue; // Not a git repo + return null; // Not a git repo } - // Check if it's a worktree (git-dir != git-common-dir) - const gitDirResult = await execFileNoThrow('git', ['rev-parse', '--git-dir'], subdirPath); - const gitCommonDirResult = await execFileNoThrow('git', ['rev-parse', '--git-common-dir'], subdirPath); + // Run remaining git commands in parallel for each subdirectory + const [gitDirResult, gitCommonDirResult, branchResult] = await Promise.all([ + execFileNoThrow('git', ['rev-parse', '--git-dir'], subdirPath), + execFileNoThrow('git', ['rev-parse', '--git-common-dir'], subdirPath), + execFileNoThrow('git', ['rev-parse', '--abbrev-ref', 'HEAD'], subdirPath), + ]); const gitDir = gitDirResult.exitCode === 0 ? gitDirResult.stdout.trim() : ''; const gitCommonDir = gitCommonDirResult.exitCode === 0 ? gitCommonDirResult.stdout.trim() : gitDir; const isWorktree = gitDir !== gitCommonDir; - - // Get current branch - const branchResult = await execFileNoThrow('git', ['rev-parse', '--abbrev-ref', 'HEAD'], subdirPath); const branch = branchResult.exitCode === 0 ? branchResult.stdout.trim() : null; // Get repo root @@ -719,19 +713,23 @@ export function registerGitHandlers(): void { } } - gitSubdirs.push({ + return { path: subdirPath, name: subdir.name, isWorktree, branch, repoRoot, - }); - } + }; + })); + + // Filter out null results (non-git directories) + const gitSubdirs = results.filter((r): r is NonNullable => r !== null); + + return { gitSubdirs }; } catch (err) { logger.error(`Failed to scan directory ${parentPath}: ${err}`, LOG_CONTEXT); + return { gitSubdirs: [] }; } - - return { gitSubdirs }; } )); diff --git a/src/main/ipc/handlers/persistence.ts b/src/main/ipc/handlers/persistence.ts index 87bc7b819..52b60efc6 100644 --- a/src/main/ipc/handlers/persistence.ts +++ b/src/main/ipc/handlers/persistence.ts @@ -136,10 +136,11 @@ export function registerPersistenceHandlers(deps: PersistenceHandlerDependencies for (const session of sessions) { const prevSession = previousSessionMap.get(session.id); if (prevSession) { - // Session exists - check if state changed + // Session exists - check if state or other tracked properties changed if (prevSession.state !== session.state || prevSession.inputMode !== session.inputMode || prevSession.name !== session.name || + prevSession.cwd !== session.cwd || JSON.stringify(prevSession.cliActivity) !== JSON.stringify(session.cliActivity)) { webServer.broadcastSessionStateChange(session.id, session.state, { name: session.name, @@ -197,7 +198,7 @@ export function registerPersistenceHandlers(deps: PersistenceHandlerDependencies const content = await fs.readFile(cliActivityPath, 'utf-8'); const data = JSON.parse(content); return data.activities || []; - } catch (error) { + } catch { // File doesn't exist or is invalid - return empty array return []; } diff --git a/src/main/ipc/handlers/system.ts b/src/main/ipc/handlers/system.ts index 7c225b9f9..1b85e5e1e 100644 --- a/src/main/ipc/handlers/system.ts +++ b/src/main/ipc/handlers/system.ts @@ -357,7 +357,7 @@ export function registerSystemHandlers(deps: SystemHandlerDependencies): void { if (!fsSync.existsSync(targetPath)) { try { fsSync.mkdirSync(targetPath, { recursive: true }); - } catch (error) { + } catch { return { success: false, error: `Cannot create directory: ${targetPath}` }; } } diff --git a/src/main/parsers/codex-output-parser.ts b/src/main/parsers/codex-output-parser.ts index e19920ed2..0d442ed37 100644 --- a/src/main/parsers/codex-output-parser.ts +++ b/src/main/parsers/codex-output-parser.ts @@ -275,9 +275,11 @@ export class CodexOutputParser implements AgentOutputParser { case 'reasoning': // Reasoning shows model's thinking process // Emit as text but mark it as partial/streaming + // Format reasoning text: add line breaks before ** SECTION ** markers + // Codex uses this pattern to separate thinking stages return { type: 'text', - text: item.text || '', + text: this.formatReasoningText(item.text || ''), isPartial: true, raw: msg, }; @@ -324,6 +326,20 @@ export class CodexOutputParser implements AgentOutputParser { } } + /** + * Format reasoning text by adding line breaks before **section** markers + * Codex uses patterns like **Thinking**, **Planning**, **Executing** etc. + * to separate different stages of its thinking process + */ + private formatReasoningText(text: string): string { + if (!text) { + return text; + } + // Match patterns like **some description** (bold markdown sections) + // Add a blank line before each section marker for better readability + return text.replace(/(\*\*[^*]+\*\*)/g, '\n\n$1'); + } + /** * Decode tool output which may be a string or byte array * Codex sometimes returns command output as byte arrays diff --git a/src/main/preload.ts b/src/main/preload.ts index bb919e604..1cbaf466a 100644 --- a/src/main/preload.ts +++ b/src/main/preload.ts @@ -1,4 +1,5 @@ import { contextBridge, ipcRenderer } from 'electron'; +import type { MainLogLevel, SystemLogEntry } from '../shared/logger-types'; // Type definitions that match renderer types interface ProcessConfig { @@ -147,10 +148,16 @@ contextBridge.exposeInMainWorld('maestro', { // This allows web commands to go through the same code path as desktop commands // inputMode is optional - if provided, renderer should use it instead of session state onRemoteCommand: (callback: (sessionId: string, command: string, inputMode?: 'ai' | 'terminal') => void) => { - console.log('[Preload] Registering onRemoteCommand listener'); + console.log('[Preload] Registering onRemoteCommand listener, callback type:', typeof callback); const handler = (_: any, sessionId: string, command: string, inputMode?: 'ai' | 'terminal') => { console.log('[Preload] Received remote:executeCommand IPC:', { sessionId, command: command?.substring(0, 50), inputMode }); - callback(sessionId, command, inputMode); + console.log('[Preload] About to invoke callback, callback type:', typeof callback); + try { + callback(sessionId, command, inputMode); + console.log('[Preload] Callback invoked successfully'); + } catch (error) { + console.error('[Preload] Error invoking remote command callback:', error); + } }; ipcRenderer.on('remote:executeCommand', handler); return () => ipcRenderer.removeListener('remote:executeCommand', handler); @@ -327,6 +334,15 @@ contextBridge.exposeInMainWorld('maestro', { thinkingStartTime?: number | null; }>, activeTabId: string) => ipcRenderer.invoke('web:broadcastTabsChange', sessionId, aiTabs, activeTabId), + // Broadcast session state change to web clients (for real-time busy/idle updates) + // This bypasses the debounced persistence which resets state to idle + broadcastSessionState: (sessionId: string, state: string, additionalData?: { + name?: string; + toolType?: string; + inputMode?: string; + cwd?: string; + }) => + ipcRenderer.invoke('web:broadcastSessionState', sessionId, state, additionalData), }, // Git API @@ -606,12 +622,12 @@ contextBridge.exposeInMainWorld('maestro', { // Logger API logger: { - log: (level: string, message: string, context?: string, data?: unknown) => + log: (level: MainLogLevel, message: string, context?: string, data?: unknown) => ipcRenderer.invoke('logger:log', level, message, context, data), - getLogs: (filter?: { level?: string; context?: string; limit?: number }) => + getLogs: (filter?: { level?: MainLogLevel; context?: string; limit?: number }) => ipcRenderer.invoke('logger:getLogs', filter), clearLogs: () => ipcRenderer.invoke('logger:clearLogs'), - setLogLevel: (level: string) => ipcRenderer.invoke('logger:setLogLevel', level), + setLogLevel: (level: MainLogLevel) => ipcRenderer.invoke('logger:setLogLevel', level), getLogLevel: () => ipcRenderer.invoke('logger:getLogLevel'), setMaxLogBuffer: (max: number) => ipcRenderer.invoke('logger:setMaxLogBuffer', max), getMaxLogBuffer: () => ipcRenderer.invoke('logger:getMaxLogBuffer'), @@ -622,8 +638,8 @@ contextBridge.exposeInMainWorld('maestro', { autorun: (message: string, context?: string, data?: unknown) => ipcRenderer.invoke('logger:log', 'autorun', message, context || 'AutoRun', data), // Subscribe to new log entries in real-time - onNewLog: (callback: (log: { timestamp: number; level: string; message: string; context?: string; data?: unknown }) => void) => { - const handler = (_: any, log: any) => callback(log); + onNewLog: (callback: (log: SystemLogEntry) => void) => { + const handler = (_: Electron.IpcRendererEvent, log: SystemLogEntry) => callback(log); ipcRenderer.on('logger:newLog', handler); return () => ipcRenderer.removeListener('logger:newLog', handler); }, @@ -1027,13 +1043,17 @@ contextBridge.exposeInMainWorld('maestro', { ipcRenderer.on('autorun:fileChanged', wrappedHandler); return () => ipcRenderer.removeListener('autorun:fileChanged', wrappedHandler); }, - // Backup operations for reset-on-completion documents + // Backup operations for reset-on-completion documents (legacy) createBackup: (folderPath: string, filename: string) => ipcRenderer.invoke('autorun:createBackup', folderPath, filename), restoreBackup: (folderPath: string, filename: string) => ipcRenderer.invoke('autorun:restoreBackup', folderPath, filename), deleteBackups: (folderPath: string) => ipcRenderer.invoke('autorun:deleteBackups', folderPath), + // Working copy operations for reset-on-completion documents (preferred) + // Creates a copy in /Runs/ subdirectory: {name}-{timestamp}-loop-{N}.md + createWorkingCopy: (folderPath: string, filename: string, loopNumber: number): Promise<{ workingCopyPath: string; originalPath: string }> => + ipcRenderer.invoke('autorun:createWorkingCopy', folderPath, filename, loopNumber), }, // Playbooks API (saved batch run configurations) @@ -1574,20 +1594,16 @@ export interface MaestroAPI { }) => void) => () => void; }; logger: { - log: (level: string, message: string, context?: string, data?: unknown) => Promise; - getLogs: (filter?: { level?: string; context?: string; limit?: number }) => Promise>; + log: (level: MainLogLevel, message: string, context?: string, data?: unknown) => Promise; + getLogs: (filter?: { level?: MainLogLevel; context?: string; limit?: number }) => Promise; clearLogs: () => Promise; - setLogLevel: (level: string) => Promise; - getLogLevel: () => Promise; + setLogLevel: (level: MainLogLevel) => Promise; + getLogLevel: () => Promise; setMaxLogBuffer: (max: number) => Promise; getMaxLogBuffer: () => Promise; - onNewLog: (callback: (log: { timestamp: number; level: string; message: string; context?: string; data?: unknown }) => void) => () => void; + toast: (title: string, data?: unknown) => Promise; + autorun: (message: string, context?: string, data?: unknown) => Promise; + onNewLog: (callback: (log: SystemLogEntry) => void) => () => void; }; claude: { listSessions: (projectPath: string) => Promise Promise<{ success: boolean; backupFilename?: string; error?: string }>; restoreBackup: (folderPath: string, filename: string) => Promise<{ success: boolean; error?: string }>; deleteBackups: (folderPath: string) => Promise<{ success: boolean; deletedCount?: number; error?: string }>; + createWorkingCopy: (folderPath: string, filename: string, loopNumber: number) => Promise<{ workingCopyPath: string; originalPath: string }>; }; playbooks: { list: (sessionId: string) => Promise<{ diff --git a/src/main/process-manager.ts b/src/main/process-manager.ts index f11020cdd..a8bd4abaa 100644 --- a/src/main/process-manager.ts +++ b/src/main/process-manager.ts @@ -403,8 +403,11 @@ export class ProcessManager extends EventEmitter { // Apply custom shell environment variables from user configuration if (shellEnvVars && Object.keys(shellEnvVars).length > 0) { + const homeDir = os.homedir(); for (const [key, value] of Object.entries(shellEnvVars)) { - ptyEnv[key] = value; + // Expand tilde (~) to home directory - shells do this automatically, + // but environment variables passed programmatically need manual expansion + ptyEnv[key] = value.startsWith('~/') ? path.join(homeDir, value.slice(2)) : value; } logger.debug('Applied custom shell env vars to PTY', 'ProcessManager', { keys: Object.keys(shellEnvVars) @@ -521,7 +524,9 @@ export class ProcessManager extends EventEmitter { // See: https://github.com/pedramamini/Maestro/issues/41 if (customEnvVars && Object.keys(customEnvVars).length > 0) { for (const [key, value] of Object.entries(customEnvVars)) { - env[key] = value; + // Expand tilde (~) to home directory - shells do this automatically, + // but environment variables passed programmatically need manual expansion + env[key] = value.startsWith('~/') ? path.join(home, value.slice(2)) : value; } logger.debug('[ProcessManager] Applied custom env vars', 'ProcessManager', { sessionId, @@ -541,8 +546,8 @@ export class ProcessManager extends EventEmitter { // need to be executed through the shell. This is because: // 1. spawn() with shell:false cannot execute batch scripts directly // 2. Commands without extensions need PATHEXT resolution - let spawnCommand = command; - let spawnArgs = finalArgs; + const spawnCommand = command; + const spawnArgs = finalArgs; let useShell = false; if (isWindows) { @@ -844,7 +849,7 @@ export class ProcessManager extends EventEmitter { this.emit('usage', sessionId, usageStats); } } - } catch (e) { + } catch { // If it's not valid JSON, emit as raw text this.emit('data', sessionId, line); } @@ -1298,8 +1303,11 @@ export class ProcessManager extends EventEmitter { // Apply custom shell environment variables from user configuration if (shellEnvVars && Object.keys(shellEnvVars).length > 0) { + const homeDir = os.homedir(); for (const [key, value] of Object.entries(shellEnvVars)) { - env[key] = value; + // Expand tilde (~) to home directory - shells do this automatically, + // but environment variables passed programmatically need manual expansion + env[key] = value.startsWith('~/') ? path.join(homeDir, value.slice(2)) : value; } logger.debug('[ProcessManager] Applied custom shell env vars to runCommand', 'ProcessManager', { keys: Object.keys(shellEnvVars) @@ -1340,8 +1348,8 @@ export class ProcessManager extends EventEmitter { shell: shellPath, // Use resolved full path to shell }); - let stdoutBuffer = ''; - let stderrBuffer = ''; + let _stdoutBuffer = ''; + let _stderrBuffer = ''; // Handle stdout - emit data events for real-time streaming childProcess.stdout?.on('data', (data: Buffer) => { @@ -1361,7 +1369,7 @@ export class ProcessManager extends EventEmitter { // Only emit if there's actual content after filtering if (output.trim()) { - stdoutBuffer += output; + _stdoutBuffer += output; logger.debug('[ProcessManager] runCommand EMITTING data event', 'ProcessManager', { sessionId, outputLength: output.length }); this.emit('data', sessionId, output); } else { @@ -1372,7 +1380,7 @@ export class ProcessManager extends EventEmitter { // Handle stderr - emit with [stderr] prefix for differentiation childProcess.stderr?.on('data', (data: Buffer) => { const output = data.toString(); - stderrBuffer += output; + _stderrBuffer += output; // Emit stderr with prefix so renderer can style it differently this.emit('stderr', sessionId, output); }); diff --git a/src/main/utils/logger.ts b/src/main/utils/logger.ts index 7c0e35ba6..5d5631a85 100644 --- a/src/main/utils/logger.ts +++ b/src/main/utils/logger.ts @@ -4,40 +4,28 @@ */ import { EventEmitter } from 'events'; +import { + type MainLogLevel, + type SystemLogEntry, + LOG_LEVEL_PRIORITY, + DEFAULT_MAX_LOGS, +} from '../../shared/logger-types'; -export type LogLevel = 'debug' | 'info' | 'warn' | 'error' | 'toast' | 'autorun'; - -export interface LogEntry { - timestamp: number; - level: LogLevel; - message: string; - context?: string; - data?: unknown; -} +// Re-export types for backwards compatibility +export type { MainLogLevel as LogLevel, SystemLogEntry as LogEntry }; class Logger extends EventEmitter { - private logs: LogEntry[] = []; - private maxLogs = 1000; // Keep last 1000 log entries - private minLevel: LogLevel = 'info'; // Default log level - - constructor() { - super(); - } + private logs: SystemLogEntry[] = []; + private maxLogs = DEFAULT_MAX_LOGS; + private minLevel: MainLogLevel = 'info'; // Default log level - private levelPriority: Record = { - debug: 0, - info: 1, - warn: 2, - error: 3, - toast: 1, // Toast notifications always logged at info priority (always visible) - autorun: 1, // Auto Run logs always logged at info priority (always visible) - }; + private levelPriority = LOG_LEVEL_PRIORITY; - setLogLevel(level: LogLevel): void { + setLogLevel(level: MainLogLevel): void { this.minLevel = level; } - getLogLevel(): LogLevel { + getLogLevel(): MainLogLevel { return this.minLevel; } @@ -53,11 +41,11 @@ class Logger extends EventEmitter { return this.maxLogs; } - private shouldLog(level: LogLevel): boolean { + private shouldLog(level: MainLogLevel): boolean { return this.levelPriority[level] >= this.levelPriority[this.minLevel]; } - private addLog(entry: LogEntry): void { + private addLog(entry: SystemLogEntry): void { this.logs.push(entry); // Keep only the last maxLogs entries @@ -163,7 +151,7 @@ class Logger extends EventEmitter { }); } - getLogs(filter?: { level?: LogLevel; context?: string; limit?: number }): LogEntry[] { + getLogs(filter?: { level?: MainLogLevel; context?: string; limit?: number }): SystemLogEntry[] { let filtered = [...this.logs]; if (filter?.level) { diff --git a/src/main/utils/shellDetector.ts b/src/main/utils/shellDetector.ts index 70c1ced7c..95a07c802 100644 --- a/src/main/utils/shellDetector.ts +++ b/src/main/utils/shellDetector.ts @@ -90,7 +90,7 @@ async function detectShell(shellId: string, shellName: string): Promise { const { sessionId } = request.params as { sessionId: string }; + const { tabId } = request.query as { tabId?: string }; // Note: Session validation happens in the frontend via the sessions list - this.serveIndexHtml(reply, sessionId); + this.serveIndexHtml(reply, sessionId, tabId || null); }); // Catch-all for invalid tokens - redirect to GitHub diff --git a/src/renderer/App.tsx b/src/renderer/App.tsx index 0a0618fa9..cfdd82542 100644 --- a/src/renderer/App.tsx +++ b/src/renderer/App.tsx @@ -1,91 +1,88 @@ import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react'; -import { NewInstanceModal, EditAgentModal } from './components/NewInstanceModal'; import { SettingsModal } from './components/SettingsModal'; import { SessionList } from './components/SessionList'; import { RightPanel, RightPanelHandle } from './components/RightPanel'; -import { QuickActionsModal } from './components/QuickActionsModal'; -import { LightboxModal } from './components/LightboxModal'; -import { ShortcutsHelpModal } from './components/ShortcutsHelpModal'; import { slashCommands } from './slashCommands'; -import { AboutModal } from './components/AboutModal'; -import { UpdateCheckModal } from './components/UpdateCheckModal'; -import { CreateGroupModal } from './components/CreateGroupModal'; -import { RenameSessionModal } from './components/RenameSessionModal'; -import { RenameTabModal } from './components/RenameTabModal'; -import { RenameGroupModal } from './components/RenameGroupModal'; -import { ConfirmModal } from './components/ConfirmModal'; -import { QuitConfirmModal } from './components/QuitConfirmModal'; +import { + AppModals, + type PRDetails, + type FlatFileItem, + type MergeOptions, + type SendToAgentOptions, +} from './components/AppModals'; +import { DEFAULT_BATCH_PROMPT } from './components/BatchRunnerModal'; import { ErrorBoundary } from './components/ErrorBoundary'; import { MainPanel, type MainPanelHandle } from './components/MainPanel'; -import { ProcessMonitor } from './components/ProcessMonitor'; -import { GitDiffViewer } from './components/GitDiffViewer'; -import { GitLogViewer } from './components/GitLogViewer'; import { LogViewer } from './components/LogViewer'; -import { BatchRunnerModal, DEFAULT_BATCH_PROMPT } from './components/BatchRunnerModal'; -import { TabSwitcherModal } from './components/TabSwitcherModal'; -import { FileSearchModal, type FlatFileItem } from './components/FileSearchModal'; -import { PromptComposerModal } from './components/PromptComposerModal'; -import { ExecutionQueueBrowser } from './components/ExecutionQueueBrowser'; -import { StandingOvationOverlay } from './components/StandingOvationOverlay'; -import { FirstRunCelebration } from './components/FirstRunCelebration'; -import { KeyboardMasteryCelebration } from './components/KeyboardMasteryCelebration'; -import { LeaderboardRegistrationModal } from './components/LeaderboardRegistrationModal'; +import { AppOverlays } from './components/AppOverlays'; import { PlaygroundPanel } from './components/PlaygroundPanel'; -import { AutoRunSetupModal } from './components/AutoRunSetupModal'; import { DebugWizardModal } from './components/DebugWizardModal'; import { DebugPackageModal } from './components/DebugPackageModal'; -import { MaestroWizard, useWizard, WizardResumeModal, SerializableWizardState, AUTO_RUN_FOLDER_NAME } from './components/Wizard'; +import { MaestroWizard, useWizard, WizardResumeModal, AUTO_RUN_FOLDER_NAME } from './components/Wizard'; import { TourOverlay } from './components/Wizard/tour'; import { CONDUCTOR_BADGES, getBadgeForTime } from './constants/conductorBadges'; import { EmptyStateView } from './components/EmptyStateView'; -import { AgentErrorModal } from './components/AgentErrorModal'; -import { WorktreeConfigModal } from './components/WorktreeConfigModal'; -import { CreateWorktreeModal } from './components/CreateWorktreeModal'; -import { CreatePRModal, PRDetails } from './components/CreatePRModal'; -import { DeleteWorktreeModal } from './components/DeleteWorktreeModal'; -import { MergeSessionModal } from './components/MergeSessionModal'; -import { SendToAgentModal } from './components/SendToAgentModal'; -import { TransferProgressModal } from './components/TransferProgressModal'; // Group Chat Components import { GroupChatPanel } from './components/GroupChatPanel'; -import { type GroupChatMessagesHandle } from './components/GroupChatMessages'; import { GroupChatRightPanel, type GroupChatRightTab } from './components/GroupChatRightPanel'; -import { NewGroupChatModal } from './components/NewGroupChatModal'; -import { DeleteGroupChatModal } from './components/DeleteGroupChatModal'; -import { RenameGroupChatModal } from './components/RenameGroupChatModal'; -import { EditGroupChatModal } from './components/EditGroupChatModal'; -import { GroupChatInfoOverlay } from './components/GroupChatInfoOverlay'; // Import custom hooks -import { useBatchProcessor } from './hooks/useBatchProcessor'; -import { useSettings, useActivityTracker, useMobileLandscape, useNavigationHistory, useAutoRunHandlers, useInputSync, useSessionNavigation, useDebouncedPersistence, useBatchedSessionUpdates } from './hooks'; -import type { AutoRunTreeNode } from './hooks'; -import { useTabCompletion, TabCompletionSuggestion, TabCompletionFilter } from './hooks/useTabCompletion'; -import { useAtMentionCompletion } from './hooks/useAtMentionCompletion'; -import { useKeyboardShortcutHelpers } from './hooks/useKeyboardShortcutHelpers'; -import { useKeyboardNavigation } from './hooks/useKeyboardNavigation'; -import { useMainKeyboardHandler } from './hooks/useMainKeyboardHandler'; -import { useRemoteIntegration } from './hooks/useRemoteIntegration'; -import { useAgentSessionManagement } from './hooks/useAgentSessionManagement'; -import { useAgentExecution } from './hooks/useAgentExecution'; -import { useFileTreeManagement } from './hooks/useFileTreeManagement'; -import { useGroupManagement } from './hooks/useGroupManagement'; -import { useWebBroadcasting } from './hooks/useWebBroadcasting'; -import { useCliActivityMonitoring } from './hooks/useCliActivityMonitoring'; -import { useThemeStyles } from './hooks/useThemeStyles'; -import { useSortedSessions, compareNamesIgnoringEmojis } from './hooks/useSortedSessions'; -import { useInputProcessing, DEFAULT_IMAGE_ONLY_PROMPT } from './hooks/useInputProcessing'; -import { useAgentErrorRecovery } from './hooks/useAgentErrorRecovery'; -import { useAgentCapabilities } from './hooks/useAgentCapabilities'; -import { useMergeSessionWithSessions } from './hooks/useMergeSession'; -import { useSendToAgentWithSessions } from './hooks/useSendToAgent'; -import { useSummarizeAndContinue } from './hooks/useSummarizeAndContinue'; +import { + // Batch processing + useBatchProcessor, + // Settings + useSettings, + useDebouncedPersistence, + // Session management + useActivityTracker, + useNavigationHistory, + useSessionNavigation, + useSortedSessions, + compareNamesIgnoringEmojis, + useGroupManagement, + // Input processing + useInputSync, + useTabCompletion, + useAtMentionCompletion, + useInputProcessing, + DEFAULT_IMAGE_ONLY_PROMPT, + // Keyboard handling + useKeyboardShortcutHelpers, + useKeyboardNavigation, + useMainKeyboardHandler, + // Agent + useAgentSessionManagement, + useAgentExecution, + useAgentErrorRecovery, + useAgentCapabilities, + useMergeSessionWithSessions, + useSendToAgentWithSessions, + useSummarizeAndContinue, + // Git + useFileTreeManagement, + // Remote + useRemoteIntegration, + useWebBroadcasting, + useCliActivityMonitoring, + useMobileLandscape, + // UI + useThemeStyles, + useAppHandlers, + // Auto Run + useAutoRunHandlers, +} from './hooks'; +import type { TabCompletionSuggestion, TabCompletionFilter } from './hooks'; // Import contexts import { useLayerStack } from './contexts/LayerStackContext'; import { useToast } from './contexts/ToastContext'; +import { useModalContext } from './contexts/ModalContext'; import { GitStatusProvider } from './contexts/GitStatusContext'; +import { InputProvider, useInputContext } from './contexts/InputContext'; +import { GroupChatProvider, useGroupChat } from './contexts/GroupChatContext'; +import { AutoRunProvider, useAutoRun } from './contexts/AutoRunContext'; +import { SessionProvider, useSession } from './contexts/SessionContext'; import { ToastContainer } from './components/Toast'; // Import services @@ -97,120 +94,126 @@ import { autorunSynopsisPrompt, maestroSystemPrompt } from '../prompts'; import { parseSynopsis } from '../shared/synopsis'; // Import types and constants +// Note: GroupChat, GroupChatState are now imported via GroupChatContext; GroupChatMessage still used locally import type { - ToolType, SessionState, RightPanelTab, SettingsTab, - FocusArea, LogEntry, Session, Group, AITab, UsageStats, QueuedItem, BatchRunConfig, - AgentError, BatchRunState, GroupChat, GroupChatMessage, GroupChatState, - SpecKitCommand + ToolType, SessionState, RightPanelTab, + FocusArea, LogEntry, Session, AITab, UsageStats, QueuedItem, BatchRunConfig, + AgentError, BatchRunState, GroupChatMessage, + SpecKitCommand, LeaderboardRegistration, CustomAICommand } from './types'; import { THEMES } from './constants/themes'; import { generateId } from './utils/ids'; import { getContextColor } from './utils/theme'; -import { setActiveTab, createTab, closeTab, reopenClosedTab, getActiveTab, getWriteModeTab, navigateToNextTab, navigateToPrevTab, navigateToTabByIndex, navigateToLastTab, getInitialRenameValue, createMergedSession } from './utils/tabHelpers'; -import { TAB_SHORTCUTS } from './constants/shortcuts'; -import { shouldOpenExternally, getAllFolderPaths, flattenTree } from './utils/fileExplorer'; +import { setActiveTab, createTab, closeTab, reopenClosedTab, getActiveTab, getWriteModeTab, navigateToNextTab, navigateToPrevTab, navigateToTabByIndex, navigateToLastTab, getInitialRenameValue } from './utils/tabHelpers'; +import { shouldOpenExternally, flattenTree } from './utils/fileExplorer'; import type { FileNode } from './types/fileTree'; import { substituteTemplateVariables } from './utils/templateVariables'; import { validateNewSession } from './utils/sessionValidation'; -import { estimateContextUsage, DEFAULT_CONTEXT_WINDOWS } from './utils/contextUsage'; - -/** - * Known Claude Code tool names - used to detect concatenated tool name patterns - * that shouldn't appear in thinking content - */ -const KNOWN_TOOL_NAMES = [ - // Core Claude Code tools - 'Task', 'TaskOutput', 'Bash', 'Glob', 'Grep', 'Read', 'Edit', 'Write', - 'NotebookEdit', 'WebFetch', 'TodoWrite', 'WebSearch', 'KillShell', - 'AskUserQuestion', 'Skill', 'EnterPlanMode', 'ExitPlanMode', 'LSP' -]; - -/** - * Check if a string looks like concatenated tool names (e.g., "TaskGrepGrepReadReadRead") - * This can happen if malformed content is emitted as thinking chunks - */ -function isLikelyConcatenatedToolNames(text: string): boolean { - // Pattern: 3+ tool names concatenated without spaces - let matchCount = 0; - let remaining = text.trim(); - - // Also handle MCP tools with pattern mcp____ - const mcpPattern = /^mcp__[a-zA-Z0-9_]+__[a-zA-Z0-9_]+/; - - while (remaining.length > 0) { - let foundMatch = false; - - // Check for MCP tool pattern first - const mcpMatch = remaining.match(mcpPattern); - if (mcpMatch) { - matchCount++; - remaining = remaining.substring(mcpMatch[0].length); - foundMatch = true; - } else { - // Check for known tool names - for (const toolName of KNOWN_TOOL_NAMES) { - if (remaining.startsWith(toolName)) { - matchCount++; - remaining = remaining.substring(toolName.length); - foundMatch = true; - break; - } - } - } - - if (!foundMatch) { - // Found non-tool-name content, this is probably real text - return false; - } - } - - // If we matched 3+ consecutive tool names with no other content, it's likely malformed - return matchCount >= 3; -} - -// Get description for Claude Code slash commands -// Built-in commands have known descriptions, custom ones use a generic description -const CLAUDE_BUILTIN_COMMANDS: Record = { - 'compact': 'Summarize conversation to reduce context usage', - 'context': 'Show current context window usage', - 'cost': 'Show session cost and token usage', - 'init': 'Initialize CLAUDE.md with codebase info', - 'pr-comments': 'Address PR review comments', - 'release-notes': 'Generate release notes from changes', - 'todos': 'Find and list TODO comments in codebase', - 'review': 'Review code changes', - 'security-review': 'Review code for security issues', - 'plan': 'Create an implementation plan', -}; - -const getSlashCommandDescription = (cmd: string): string => { - // Remove leading slash if present - const cmdName = cmd.startsWith('/') ? cmd.slice(1) : cmd; - - // Check for built-in command - if (CLAUDE_BUILTIN_COMMANDS[cmdName]) { - return CLAUDE_BUILTIN_COMMANDS[cmdName]; - } - - // For plugin commands (e.g., "plugin-name:command"), use the full name as description hint - if (cmdName.includes(':')) { - const [plugin, command] = cmdName.split(':'); - return `${command} (${plugin})`; - } - - // Generic description for unknown commands - return 'Claude Code command'; -}; +import { estimateContextUsage } from './utils/contextUsage'; +import { formatLogsForClipboard } from './utils/contextExtractor'; +import { isLikelyConcatenatedToolNames, getSlashCommandDescription } from './constants/app'; // Note: DEFAULT_IMAGE_ONLY_PROMPT is now imported from useInputProcessing hook -export default function MaestroConsole() { +function MaestroConsoleInner() { // --- LAYER STACK (for blocking shortcuts when modals are open) --- const { hasOpenLayers, hasOpenModal } = useLayerStack(); // --- TOAST NOTIFICATIONS --- const { addToast, setDefaultDuration: setToastDefaultDuration, setAudioFeedback, setOsNotifications } = useToast(); + // --- MODAL STATE (centralized modal state management) --- + const { + // Settings Modal + settingsModalOpen, setSettingsModalOpen, settingsTab, setSettingsTab, + // New Instance Modal + newInstanceModalOpen, setNewInstanceModalOpen, + // Edit Agent Modal + editAgentModalOpen, setEditAgentModalOpen, editAgentSession, setEditAgentSession, + // Shortcuts Help Modal + shortcutsHelpOpen, setShortcutsHelpOpen, setShortcutsSearchQuery, + // Quick Actions Modal + quickActionOpen, setQuickActionOpen, quickActionInitialMode, setQuickActionInitialMode, + // Lightbox Modal + lightboxImage, setLightboxImage, lightboxImages, setLightboxImages, setLightboxSource, + lightboxIsGroupChatRef, lightboxAllowDeleteRef, + // About Modal + aboutModalOpen, setAboutModalOpen, + // Update Check Modal + updateCheckModalOpen, setUpdateCheckModalOpen, + // Leaderboard Registration Modal + leaderboardRegistrationOpen, setLeaderboardRegistrationOpen, + // Standing Ovation Overlay + standingOvationData, setStandingOvationData, + // First Run Celebration + firstRunCelebrationData, setFirstRunCelebrationData, + // Log Viewer + logViewerOpen, setLogViewerOpen, + // Process Monitor + processMonitorOpen, setProcessMonitorOpen, + // Keyboard Mastery Celebration + pendingKeyboardMasteryLevel, setPendingKeyboardMasteryLevel, + // Playground Panel + playgroundOpen, setPlaygroundOpen, + // Debug Wizard Modal + debugWizardModalOpen, setDebugWizardModalOpen, + // Debug Package Modal + debugPackageModalOpen, setDebugPackageModalOpen, + // Confirmation Modal + confirmModalOpen, setConfirmModalOpen, confirmModalMessage, setConfirmModalMessage, + confirmModalOnConfirm, setConfirmModalOnConfirm, + // Quit Confirmation Modal + quitConfirmModalOpen, setQuitConfirmModalOpen, + // Rename Instance Modal + renameInstanceModalOpen, setRenameInstanceModalOpen, renameInstanceValue, setRenameInstanceValue, + renameInstanceSessionId, setRenameInstanceSessionId, + // Rename Tab Modal + renameTabModalOpen, setRenameTabModalOpen, renameTabId, setRenameTabId, + renameTabInitialName, setRenameTabInitialName, + // Rename Group Modal + renameGroupModalOpen, setRenameGroupModalOpen, renameGroupId, setRenameGroupId, + renameGroupValue, setRenameGroupValue, renameGroupEmoji, setRenameGroupEmoji, + // Agent Sessions Browser + agentSessionsOpen, setAgentSessionsOpen, activeAgentSessionId, setActiveAgentSessionId, + // Execution Queue Browser Modal + queueBrowserOpen, setQueueBrowserOpen, + // Batch Runner Modal + batchRunnerModalOpen, setBatchRunnerModalOpen, + // Auto Run Setup Modal + autoRunSetupModalOpen, setAutoRunSetupModalOpen, + // Wizard Resume Modal + wizardResumeModalOpen, setWizardResumeModalOpen, wizardResumeState, setWizardResumeState, + // Agent Error Modal + agentErrorModalSessionId, setAgentErrorModalSessionId, + // Worktree Modals + worktreeConfigModalOpen, setWorktreeConfigModalOpen, + createWorktreeModalOpen, setCreateWorktreeModalOpen, createWorktreeSession, setCreateWorktreeSession, + createPRModalOpen, setCreatePRModalOpen, createPRSession, setCreatePRSession, + deleteWorktreeModalOpen, setDeleteWorktreeModalOpen, deleteWorktreeSession, setDeleteWorktreeSession, + // Tab Switcher Modal + tabSwitcherOpen, setTabSwitcherOpen, + // Fuzzy File Search Modal + fuzzyFileSearchOpen, setFuzzyFileSearchOpen, + // Prompt Composer Modal + promptComposerOpen, setPromptComposerOpen, + // Merge Session Modal + mergeSessionModalOpen, setMergeSessionModalOpen, + // Send to Agent Modal + sendToAgentModalOpen, setSendToAgentModalOpen, + // Group Chat Modals + showNewGroupChatModal, setShowNewGroupChatModal, + showDeleteGroupChatModal, setShowDeleteGroupChatModal, + showRenameGroupChatModal, setShowRenameGroupChatModal, + showEditGroupChatModal, setShowEditGroupChatModal, + showGroupChatInfo, setShowGroupChatInfo, + // Git Diff Viewer + gitDiffPreview, setGitDiffPreview, + // Git Log Viewer + gitLogOpen, setGitLogOpen, + // Tour Overlay + tourOpen, setTourOpen, tourFromWizard, setTourFromWizard, + } = useModalContext(); + // --- MOBILE LANDSCAPE MODE (reading-only view) --- const isMobileLandscape = useMobileLandscape(); @@ -226,10 +229,10 @@ export default function MaestroConsole() { state: wizardState, openWizard: openWizardModal, restoreState: restoreWizardState, - loadResumeState, + loadResumeState: _loadResumeState, clearResumeState, completeWizard, - closeWizard: closeWizardModal, + closeWizard: _closeWizardModal, goToStep: wizardGoToStep, } = useWizard(); @@ -272,15 +275,16 @@ export default function MaestroConsole() { shortcuts, setShortcuts, tabShortcuts, setTabShortcuts, customAICommands, setCustomAICommands, - globalStats, updateGlobalStats, + globalStats: _globalStats, updateGlobalStats, autoRunStats, recordAutoRunComplete, updateAutoRunProgress, acknowledgeBadge, getUnacknowledgedBadgeLevel, - tourCompleted, setTourCompleted, + usageStats, updateUsageStats, + tourCompleted: _tourCompleted, setTourCompleted, firstAutoRunCompleted, setFirstAutoRunCompleted, recordWizardStart, recordWizardComplete, recordWizardAbandon, recordWizardResume, recordTourStart, recordTourComplete, recordTourSkip, leaderboardRegistration, setLeaderboardRegistration, isLeaderboardRegistered, - contextManagementSettings, updateContextManagementSettings, + contextManagementSettings, updateContextManagementSettings: _updateContextManagementSettings, keyboardMasteryStats, recordShortcutUsage, acknowledgeKeyboardMasteryLevel, getUnacknowledgedKeyboardMasteryLevel, @@ -289,68 +293,76 @@ export default function MaestroConsole() { // --- KEYBOARD SHORTCUT HELPERS --- const { isShortcut, isTabShortcut } = useKeyboardShortcutHelpers({ shortcuts, tabShortcuts }); - // --- STATE --- - const [sessions, setSessions] = useState([]); - const [groups, setGroups] = useState([]); + // --- SESSION STATE (Phase 6: extracted to SessionContext) --- + // Use SessionContext for all core session states + const { + sessions, setSessions, + groups, setGroups, + activeSessionId, setActiveSessionId: setActiveSessionIdFromContext, + setActiveSessionIdInternal, + sessionsLoaded, setSessionsLoaded, + initialLoadComplete, + sessionsRef, groupsRef, activeSessionIdRef, + batchedUpdater, + activeSession, + cyclePositionRef, + removedWorktreePaths: _removedWorktreePaths, setRemovedWorktreePaths, removedWorktreePathsRef, + } = useSession(); + // Spec Kit commands (loaded from bundled prompts) const [speckitCommands, setSpeckitCommands] = useState([]); - // Track worktree paths that were manually removed - prevents re-discovery during this session - const [removedWorktreePaths, setRemovedWorktreePaths] = useState>(new Set()); - // Ref to always access current removed paths (avoids stale closure in async scanner) - const removedWorktreePathsRef = useRef>(removedWorktreePaths); - removedWorktreePathsRef.current = removedWorktreePaths; - - // --- GROUP CHAT STATE --- - const [groupChats, setGroupChats] = useState([]); + + // --- GROUP CHAT STATE (Phase 4: extracted to GroupChatContext) --- + // Note: groupChatsExpanded remains here as it's a UI layout concern (already in UILayoutContext) const [groupChatsExpanded, setGroupChatsExpanded] = useState(true); - const [activeGroupChatId, setActiveGroupChatId] = useState(null); - const [groupChatMessages, setGroupChatMessages] = useState([]); - const [groupChatState, setGroupChatState] = useState('idle'); - const [groupChatStagedImages, setGroupChatStagedImages] = useState([]); - const [groupChatReadOnlyMode, setGroupChatReadOnlyMode] = useState(false); - const [groupChatExecutionQueue, setGroupChatExecutionQueue] = useState([]); - const [groupChatRightTab, setGroupChatRightTab] = useState('participants'); - const [groupChatParticipantColors, setGroupChatParticipantColors] = useState>({}); - const [moderatorUsage, setModeratorUsage] = useState<{ contextUsage: number; totalCost: number; tokenCount: number } | null>(null); - // Track per-participant working state (participantName -> 'idle' | 'working') - const [participantStates, setParticipantStates] = useState>(new Map()); - // Track state per-group-chat (for showing busy indicator when not active) - const [groupChatStates, setGroupChatStates] = useState>(new Map()); - // Track participant states per-group-chat (groupChatId -> Map) - const [allGroupChatParticipantStates, setAllGroupChatParticipantStates] = useState>>(new Map()); - // Group chat agent error state - const [groupChatError, setGroupChatError] = useState<{ groupChatId: string; error: AgentError; participantName?: string } | null>(null); - - // --- BATCHED SESSION UPDATES (reduces React re-renders during AI streaming) --- - const batchedUpdater = useBatchedSessionUpdates(setSessions); - - // Track if initial data has been loaded to prevent overwriting on mount - const initialLoadComplete = useRef(false); - - // Track if sessions/groups have been loaded (for splash screen coordination) - const [sessionsLoaded, setSessionsLoaded] = useState(false); - - const [activeSessionId, setActiveSessionIdInternal] = useState(sessions[0]?.id || 's1'); - - // Track current position in visual order for cycling (allows same session to appear twice) - const cyclePositionRef = useRef(-1); - - // Wrapper that resets cycle position when session is changed via click (not cycling) - // Also flushes batched updates to ensure previous session's state is fully updated - // Dismisses any active group chat when selecting an agent + + // Use GroupChatContext for all group chat states + const { + groupChats, setGroupChats, + activeGroupChatId, setActiveGroupChatId, + groupChatMessages, setGroupChatMessages, + groupChatState, setGroupChatState, + groupChatStagedImages, setGroupChatStagedImages, + groupChatReadOnlyMode, setGroupChatReadOnlyMode, + groupChatExecutionQueue, setGroupChatExecutionQueue, + groupChatRightTab, setGroupChatRightTab, + groupChatParticipantColors, setGroupChatParticipantColors, + moderatorUsage, setModeratorUsage, + participantStates, setParticipantStates, + groupChatStates, setGroupChatStates, + allGroupChatParticipantStates, setAllGroupChatParticipantStates, + groupChatError, setGroupChatError, + groupChatInputRef, + groupChatMessagesRef, + clearGroupChatError: handleClearGroupChatErrorBase, + } = useGroupChat(); + + // Wrapper for setActiveSessionId that also dismisses active group chat const setActiveSessionId = useCallback((id: string) => { - batchedUpdater.flushNow(); // Flush pending updates before switching sessions - cyclePositionRef.current = -1; // Reset so next cycle finds first occurrence setActiveGroupChatId(null); // Dismiss group chat when selecting an agent - setActiveSessionIdInternal(id); - }, [batchedUpdater]); + setActiveSessionIdFromContext(id); + }, [setActiveSessionIdFromContext, setActiveGroupChatId]); - // Input State - both modes use local state for responsive typing - // AI mode syncs to tab state on blur/submit for persistence + // Input State - PERFORMANCE CRITICAL: Input values stay in App.tsx local state + // to avoid context re-renders on every keystroke. Only completion states are in context. const [terminalInputValue, setTerminalInputValue] = useState(''); const [aiInputValueLocal, setAiInputValueLocal] = useState(''); - const [slashCommandOpen, setSlashCommandOpen] = useState(false); - const [selectedSlashCommandIndex, setSelectedSlashCommandIndex] = useState(0); + + // Completion states from InputContext (these change infrequently) + const { + slashCommandOpen, setSlashCommandOpen, + selectedSlashCommandIndex, setSelectedSlashCommandIndex, + tabCompletionOpen, setTabCompletionOpen, + selectedTabCompletionIndex, setSelectedTabCompletionIndex, + tabCompletionFilter, setTabCompletionFilter, + atMentionOpen, setAtMentionOpen, + atMentionFilter, setAtMentionFilter, + atMentionStartIndex, setAtMentionStartIndex, + selectedAtMentionIndex, setSelectedAtMentionIndex, + commandHistoryOpen, setCommandHistoryOpen, + commandHistoryFilter, setCommandHistoryFilter, + commandHistorySelectedIndex, setCommandHistorySelectedIndex, + } = useInputContext(); // UI State const [leftSidebarOpen, setLeftSidebarOpen] = useState(true); @@ -369,59 +381,17 @@ export default function MaestroConsole() { const [fileTreeFilter, setFileTreeFilter] = useState(''); const [fileTreeFilterOpen, setFileTreeFilterOpen] = useState(false); - // Git Diff State - const [gitDiffPreview, setGitDiffPreview] = useState(null); - - // Tour Overlay State - const [tourOpen, setTourOpen] = useState(false); - const [tourFromWizard, setTourFromWizard] = useState(false); - - // Git Log Viewer State - const [gitLogOpen, setGitLogOpen] = useState(false); + // Note: Git Diff State, Tour Overlay State, and Git Log Viewer State are now from ModalContext // Renaming State const [editingGroupId, setEditingGroupId] = useState(null); const [editingSessionId, setEditingSessionId] = useState(null); - // Drag and Drop State + // Drag and Drop State (for session list - image drag handled by useAppHandlers) const [draggingSessionId, setDraggingSessionId] = useState(null); - const [isDraggingImage, setIsDraggingImage] = useState(false); - const dragCounterRef = useRef(0); // Track nested drag enter/leave events - - // Modals - const [settingsModalOpen, setSettingsModalOpen] = useState(false); - const [newInstanceModalOpen, setNewInstanceModalOpen] = useState(false); - const [editAgentModalOpen, setEditAgentModalOpen] = useState(false); - const [editAgentSession, setEditAgentSession] = useState(null); - const [shortcutsHelpOpen, setShortcutsHelpOpen] = useState(false); - const [shortcutsSearchQuery, setShortcutsSearchQuery] = useState(''); - const [quickActionOpen, setQuickActionOpen] = useState(false); - const [quickActionInitialMode, setQuickActionInitialMode] = useState<'main' | 'move-to-group'>('main'); - const [settingsTab, setSettingsTab] = useState('general'); - const [lightboxImage, setLightboxImage] = useState(null); - const [lightboxImages, setLightboxImages] = useState([]); // Context images for navigation - const [lightboxSource, setLightboxSource] = useState<'staged' | 'history'>('history'); // Track source for delete permission - const lightboxIsGroupChatRef = useRef(false); // Track if lightbox was opened from group chat - const lightboxAllowDeleteRef = useRef(false); // Track if delete should be allowed (set synchronously before state updates) - const [aboutModalOpen, setAboutModalOpen] = useState(false); - const [updateCheckModalOpen, setUpdateCheckModalOpen] = useState(false); - const [leaderboardRegistrationOpen, setLeaderboardRegistrationOpen] = useState(false); - const [standingOvationData, setStandingOvationData] = useState<{ - badge: typeof CONDUCTOR_BADGES[number]; - isNewRecord: boolean; - recordTimeMs?: number; - } | null>(null); - const [firstRunCelebrationData, setFirstRunCelebrationData] = useState<{ - elapsedTimeMs: number; - completedTasks: number; - totalTasks: number; - } | null>(null); - const [logViewerOpen, setLogViewerOpen] = useState(false); - const [processMonitorOpen, setProcessMonitorOpen] = useState(false); - const [pendingKeyboardMasteryLevel, setPendingKeyboardMasteryLevel] = useState(null); - const [playgroundOpen, setPlaygroundOpen] = useState(false); - const [debugWizardModalOpen, setDebugWizardModalOpen] = useState(false); - const [debugPackageModalOpen, setDebugPackageModalOpen] = useState(false); + + // Note: All modal states are now managed by ModalContext + // See useModalContext() destructuring above for modal states // Stable callbacks for memoized modals (prevents re-renders from callback reference changes) // NOTE: These must be declared AFTER the state they reference @@ -430,6 +400,27 @@ export default function MaestroConsole() { const handleCloseSettings = useCallback(() => setSettingsModalOpen(false), []); const handleCloseDebugPackage = useCallback(() => setDebugPackageModalOpen(false), []); + // AppInfoModals stable callbacks + const handleCloseShortcutsHelp = useCallback(() => setShortcutsHelpOpen(false), []); + const handleCloseAboutModal = useCallback(() => setAboutModalOpen(false), []); + const handleCloseUpdateCheckModal = useCallback(() => setUpdateCheckModalOpen(false), []); + const handleCloseProcessMonitor = useCallback(() => setProcessMonitorOpen(false), []); + const handleCloseLogViewer = useCallback(() => setLogViewerOpen(false), []); + + // Confirm modal close handler + const handleCloseConfirmModal = useCallback(() => setConfirmModalOpen(false), []); + + // Quit confirm modal handlers + const handleConfirmQuit = useCallback(() => { + setQuitConfirmModalOpen(false); + window.maestro.app.confirmQuit(); + }, []); + + const handleCancelQuit = useCallback(() => { + setQuitConfirmModalOpen(false); + window.maestro.app.cancelQuit(); + }, []); + // Keyboard mastery level-up callback const onKeyboardMasteryLevelUp = useCallback((level: number) => { setPendingKeyboardMasteryLevel(level); @@ -443,110 +434,63 @@ export default function MaestroConsole() { setPendingKeyboardMasteryLevel(null); }, [pendingKeyboardMasteryLevel, acknowledgeKeyboardMasteryLevel]); - // Confirmation Modal State - const [confirmModalOpen, setConfirmModalOpen] = useState(false); - const [confirmModalMessage, setConfirmModalMessage] = useState(''); - const [confirmModalOnConfirm, setConfirmModalOnConfirm] = useState<(() => void) | null>(null); + // Handle standing ovation close + const handleStandingOvationClose = useCallback(() => { + if (standingOvationData) { + // Mark badge as acknowledged when user clicks "Take a Bow" + acknowledgeBadge(standingOvationData.badge.level); + } + setStandingOvationData(null); + }, [standingOvationData, acknowledgeBadge]); - // Quit Confirmation Modal State - const [quitConfirmModalOpen, setQuitConfirmModalOpen] = useState(false); + // Handle first run celebration close + const handleFirstRunCelebrationClose = useCallback(() => { + setFirstRunCelebrationData(null); + }, []); - // Rename Instance Modal State - const [renameInstanceModalOpen, setRenameInstanceModalOpen] = useState(false); - const [renameInstanceValue, setRenameInstanceValue] = useState(''); - const [renameInstanceSessionId, setRenameInstanceSessionId] = useState(null); + // Handle open leaderboard registration + const handleOpenLeaderboardRegistration = useCallback(() => { + setLeaderboardRegistrationOpen(true); + }, []); - // Rename Tab Modal State - const [renameTabModalOpen, setRenameTabModalOpen] = useState(false); - const [renameTabId, setRenameTabId] = useState(null); - const [renameTabInitialName, setRenameTabInitialName] = useState(''); + // Handle open leaderboard registration from About modal (closes About first) + const handleOpenLeaderboardRegistrationFromAbout = useCallback(() => { + setAboutModalOpen(false); + setLeaderboardRegistrationOpen(true); + }, []); - // Rename Group Modal State - const [renameGroupModalOpen, setRenameGroupModalOpen] = useState(false); + // AppSessionModals stable callbacks + const handleCloseNewInstanceModal = useCallback(() => setNewInstanceModalOpen(false), []); + const handleCloseEditAgentModal = useCallback(() => { + setEditAgentModalOpen(false); + setEditAgentSession(null); + }, []); + const handleCloseRenameSessionModal = useCallback(() => { + setRenameInstanceModalOpen(false); + setRenameInstanceSessionId(null); + }, []); + const handleCloseRenameTabModal = useCallback(() => { + setRenameTabModalOpen(false); + setRenameTabId(null); + }, []); - // Agent Sessions Browser State (main panel view) - const [agentSessionsOpen, setAgentSessionsOpen] = useState(false); - const [activeAgentSessionId, setActiveAgentSessionId] = useState(null); + // Note: All modal states (confirmation, rename, queue browser, batch runner, etc.) + // are now managed by ModalContext - see useModalContext() destructuring above // NOTE: showSessionJumpNumbers state is now provided by useMainKeyboardHandler hook - // Execution Queue Browser Modal State - const [queueBrowserOpen, setQueueBrowserOpen] = useState(false); - - // Batch Runner Modal State - const [batchRunnerModalOpen, setBatchRunnerModalOpen] = useState(false); - - // Auto Run Setup Modal State - const [autoRunSetupModalOpen, setAutoRunSetupModalOpen] = useState(false); - - // Wizard Resume Modal State - const [wizardResumeModalOpen, setWizardResumeModalOpen] = useState(false); - const [wizardResumeState, setWizardResumeState] = useState(null); - - // Agent Error Modal State - tracks which session has an active error being shown - const [agentErrorModalSessionId, setAgentErrorModalSessionId] = useState(null); - - // Worktree Modal State - const [worktreeConfigModalOpen, setWorktreeConfigModalOpen] = useState(false); - const [createWorktreeModalOpen, setCreateWorktreeModalOpen] = useState(false); - const [createWorktreeSession, setCreateWorktreeSession] = useState(null); - const [createPRModalOpen, setCreatePRModalOpen] = useState(false); - const [createPRSession, setCreatePRSession] = useState(null); - const [deleteWorktreeModalOpen, setDeleteWorktreeModalOpen] = useState(false); - const [deleteWorktreeSession, setDeleteWorktreeSession] = useState(null); - - // Tab Switcher Modal State - const [tabSwitcherOpen, setTabSwitcherOpen] = useState(false); - - // Fuzzy File Search Modal State - const [fuzzyFileSearchOpen, setFuzzyFileSearchOpen] = useState(false); - - // Prompt Composer Modal State - const [promptComposerOpen, setPromptComposerOpen] = useState(false); - - // Merge Session Modal State - const [mergeSessionModalOpen, setMergeSessionModalOpen] = useState(false); - - // Send to Agent Modal State - const [sendToAgentModalOpen, setSendToAgentModalOpen] = useState(false); - - // Group Chat Modal State - const [showNewGroupChatModal, setShowNewGroupChatModal] = useState(false); - const [showDeleteGroupChatModal, setShowDeleteGroupChatModal] = useState(null); - const [showRenameGroupChatModal, setShowRenameGroupChatModal] = useState(null); - const [showEditGroupChatModal, setShowEditGroupChatModal] = useState(null); - const [showGroupChatInfo, setShowGroupChatInfo] = useState(false); - - const [renameGroupId, setRenameGroupId] = useState(null); - const [renameGroupValue, setRenameGroupValue] = useState(''); - const [renameGroupEmoji, setRenameGroupEmoji] = useState('📂'); - const [renameGroupEmojiPickerOpen, setRenameGroupEmojiPickerOpen] = useState(false); - // Output Search State const [outputSearchOpen, setOutputSearchOpen] = useState(false); const [outputSearchQuery, setOutputSearchQuery] = useState(''); - // Command History Modal State - const [commandHistoryOpen, setCommandHistoryOpen] = useState(false); - const [commandHistoryFilter, setCommandHistoryFilter] = useState(''); - const [commandHistorySelectedIndex, setCommandHistorySelectedIndex] = useState(0); - - // Tab Completion State (terminal mode only) - const [tabCompletionOpen, setTabCompletionOpen] = useState(false); - const [selectedTabCompletionIndex, setSelectedTabCompletionIndex] = useState(0); - const [tabCompletionFilter, setTabCompletionFilter] = useState('all'); + // Note: Command History, Tab Completion, and @ Mention states are now in InputContext + // See useInputContext() destructuring above for these states // Flash notification state (for inline notifications like "Commands disabled while agent is working") const [flashNotification, setFlashNotification] = useState(null); // Success flash notification state (for success messages like "Refresh complete") const [successFlashNotification, setSuccessFlashNotification] = useState(null); - // @ mention file completion state (AI mode only, desktop only) - const [atMentionOpen, setAtMentionOpen] = useState(false); - const [atMentionFilter, setAtMentionFilter] = useState(''); - const [atMentionStartIndex, setAtMentionStartIndex] = useState(-1); // Position of @ in input - const [selectedAtMentionIndex, setSelectedAtMentionIndex] = useState(0); - // Note: Images are now stored per-tab in AITab.stagedImages // See stagedImages/setStagedImages computed from active tab below @@ -554,11 +498,18 @@ export default function MaestroConsole() { const [isLiveMode, setIsLiveMode] = useState(false); const [webInterfaceUrl, setWebInterfaceUrl] = useState(null); - // Auto Run document management state (content is per-session in session.autoRunContent) - const [autoRunDocumentList, setAutoRunDocumentList] = useState([]); - const [autoRunDocumentTree, setAutoRunDocumentTree] = useState([]); - const [autoRunIsLoadingDocuments, setAutoRunIsLoadingDocuments] = useState(false); - const [autoRunDocumentTaskCounts, setAutoRunDocumentTaskCounts] = useState>(new Map()); + // Auto Run document management state (Phase 5: now from AutoRunContext) + // Content is per-session in session.autoRunContent + const { + documentList: autoRunDocumentList, + setDocumentList: setAutoRunDocumentList, + documentTree: autoRunDocumentTree, + setDocumentTree: setAutoRunDocumentTree, + isLoadingDocuments: autoRunIsLoadingDocuments, + setIsLoadingDocuments: setAutoRunIsLoadingDocuments, + documentTaskCounts: autoRunDocumentTaskCounts, + setDocumentTaskCounts: setAutoRunDocumentTaskCounts, + } = useAutoRun(); // Restore focus when LogViewer closes to ensure global hotkeys work useEffect(() => { @@ -579,6 +530,33 @@ export default function MaestroConsole() { } }, [logViewerOpen]); + // ProcessMonitor navigation handlers + const handleProcessMonitorNavigateToSession = useCallback((sessionId: string, tabId?: string) => { + setActiveSessionId(sessionId); + if (tabId) { + // Switch to the specific tab within the session + setSessions(prev => prev.map(s => + s.id === sessionId ? { ...s, activeTabId: tabId } : s + )); + } + }, [setActiveSessionId, setSessions]); + + const handleProcessMonitorNavigateToGroupChat = useCallback((groupChatId: string) => { + // Restore state for this group chat when navigating from ProcessMonitor + setActiveGroupChatId(groupChatId); + setGroupChatState(groupChatStates.get(groupChatId) ?? 'idle'); + setParticipantStates(allGroupChatParticipantStates.get(groupChatId) ?? new Map()); + setProcessMonitorOpen(false); + }, [setActiveGroupChatId, setGroupChatState, groupChatStates, setParticipantStates, allGroupChatParticipantStates]); + + // LogViewer shortcut handler + const handleLogViewerShortcutUsed = useCallback((shortcutId: string) => { + const result = recordShortcutUsage(shortcutId); + if (result.newLevel !== null) { + onKeyboardMasteryLevelUp(result.newLevel); + } + }, [recordShortcutUsage, onKeyboardMasteryLevelUp]); + // Sync toast duration setting to ToastContext useEffect(() => { setToastDefaultDuration(toastDuration); @@ -605,10 +583,12 @@ export default function MaestroConsole() { }, []); // Close file preview when switching sessions (history is now per-session) + // previewFile intentionally omitted: we only want to clear preview on session change, not when preview itself changes useEffect(() => { if (previewFile !== null) { setPreviewFile(null); } + }, [activeSessionId]); // Restore a persisted session by respawning its process @@ -768,7 +748,7 @@ export default function MaestroConsole() { sessionLoadStarted.current = true; const loadSessionsAndGroups = async () => { - let hasSessionsLoaded = false; + let _hasSessionsLoaded = false; try { const savedSessions = await window.maestro.sessions.getAll(); @@ -780,7 +760,7 @@ export default function MaestroConsole() { savedSessions.map(s => restoreSession(s)) ); setSessions(restoredSessions); - hasSessionsLoaded = true; + _hasSessionsLoaded = true; // Set active session to first session if current activeSessionId is invalid if (restoredSessions.length > 0 && !restoredSessions.find(s => s.id === activeSessionId)) { setActiveSessionId(restoredSessions[0].id); @@ -820,6 +800,7 @@ export default function MaestroConsole() { } }; loadSessionsAndGroups(); + }, []); // Hide splash screen only when both settings and sessions have fully loaded @@ -860,7 +841,10 @@ export default function MaestroConsole() { } } } - }, [settingsLoaded, sessionsLoaded]); // Only run once on startup + // autoRunStats.longestRunMs and getUnacknowledgedBadgeLevel intentionally omitted - + // this effect runs once on startup to check for missed badges, not on every stats update + + }, [settingsLoaded, sessionsLoaded]); // Check for unacknowledged badges when user returns to the app // Uses multiple triggers: visibility change, window focus, and mouse activity @@ -941,7 +925,10 @@ export default function MaestroConsole() { }, 1200); // Slightly longer delay than badge to avoid overlap } } - }, [settingsLoaded, sessionsLoaded]); // Only run once on startup + // getUnacknowledgedKeyboardMasteryLevel intentionally omitted - + // this effect runs once on startup to check for unacknowledged levels, not on function changes + + }, [settingsLoaded, sessionsLoaded]); // Scan worktree directories on startup for sessions with worktreeConfig // This restores worktree sub-agents after app restart @@ -970,16 +957,20 @@ export default function MaestroConsole() { } // Check if a session already exists for this worktree - const existingSession = sessions.find(s => - (s.parentSessionId === parentSession.id && s.worktreeBranch === subdir.branch) || - s.cwd === subdir.path - ); + // Normalize paths for comparison (remove trailing slashes) + const normalizedSubdirPath = subdir.path.replace(/\/+$/, ''); + const existingSession = sessions.find(s => { + const normalizedCwd = s.cwd.replace(/\/+$/, ''); + // Check if same path (regardless of parent) or same branch under same parent + return normalizedCwd === normalizedSubdirPath || + (s.parentSessionId === parentSession.id && s.worktreeBranch === subdir.branch); + }); if (existingSession) { continue; } // Also check in sessions we're about to add - if (newWorktreeSessions.some(s => s.cwd === subdir.path)) { + if (newWorktreeSessions.some(s => s.cwd.replace(/\/+$/, '') === normalizedSubdirPath)) { continue; } @@ -1086,7 +1077,7 @@ export default function MaestroConsole() { // Run once on startup with a small delay to let UI settle const timer = setTimeout(scanWorktreeConfigsOnStartup, 500); return () => clearTimeout(timer); - // eslint-disable-next-line react-hooks/exhaustive-deps + }, [sessionsLoaded]); // Only run once when sessions are loaded // Check for updates on startup if enabled @@ -1122,6 +1113,9 @@ export default function MaestroConsole() { // Set up process event listeners for real-time output useEffect(() => { + // Copy ref value to local variable for cleanup (React ESLint rule) + const thinkingChunkBuffer = thinkingChunkBufferRef.current; + // Handle process output data (BATCHED for performance) // sessionId will be in format: "{id}-ai-{tabId}", "{id}-terminal", "{id}-batch-{timestamp}", etc. const unsubscribeData = window.maestro.process.onData((sessionId: string, data: string) => { @@ -2209,8 +2203,9 @@ export default function MaestroConsole() { cancelAnimationFrame(thinkingChunkRafIdRef.current); thinkingChunkRafIdRef.current = null; } - thinkingChunkBufferRef.current.clear(); + thinkingChunkBuffer.clear(); }; + }, []); // --- GROUP CHAT EVENT LISTENERS --- @@ -2290,6 +2285,7 @@ export default function MaestroConsole() { unsubParticipantState?.(); unsubModeratorSessionId?.(); }; + }, [activeGroupChatId]); // Process group chat execution queue when state becomes idle @@ -2315,11 +2311,9 @@ export default function MaestroConsole() { } }, [groupChatState, groupChatExecutionQueue, activeGroupChatId]); - // Refs + // Refs (groupChatInputRef and groupChatMessagesRef are now in GroupChatContext) const logsEndRef = useRef(null); const inputRef = useRef(null); - const groupChatInputRef = useRef(null); - const groupChatMessagesRef = useRef(null); const terminalOutputRef = useRef(null); const sidebarContainerRef = useRef(null); const fileTreeContainerRef = useRef(null); @@ -2329,20 +2323,15 @@ export default function MaestroConsole() { const mainPanelRef = useRef(null); // Refs for toast notifications (to access latest values in event handlers) - const groupsRef = useRef(groups); + // Note: sessionsRef, groupsRef, activeSessionIdRef are now provided by SessionContext const addToastRef = useRef(addToast); - const sessionsRef = useRef(sessions); const updateGlobalStatsRef = useRef(updateGlobalStats); const customAICommandsRef = useRef(customAICommands); const speckitCommandsRef = useRef(speckitCommands); - const activeSessionIdRef = useRef(activeSessionId); - groupsRef.current = groups; addToastRef.current = addToast; - sessionsRef.current = sessions; updateGlobalStatsRef.current = updateGlobalStats; customAICommandsRef.current = customAICommands; speckitCommandsRef.current = speckitCommands; - activeSessionIdRef.current = activeSessionId; // Note: spawnBackgroundSynopsisRef and spawnAgentWithPromptRef are now provided by useAgentExecution hook // Note: addHistoryEntryRef is now provided by useAgentSessionManagement hook @@ -2351,7 +2340,7 @@ export default function MaestroConsole() { // Ref for handling remote commands from web interface // This allows web commands to go through the exact same code path as desktop commands - const pendingRemoteCommandRef = useRef<{ sessionId: string; command: string } | null>(null); + const _pendingRemoteCommandRef = useRef<{ sessionId: string; command: string } | null>(null); // Refs for batch processor error handling (Phase 5.10) // These are populated after useBatchProcessor is called and used in the agent error handler @@ -2386,10 +2375,7 @@ export default function MaestroConsole() { // Keyboard navigation state const [selectedSidebarIndex, setSelectedSidebarIndex] = useState(0); - const activeSession = useMemo(() => - sessions.find(s => s.id === activeSessionId) || sessions[0] || null, - [sessions, activeSessionId] - ); + // Note: activeSession is now provided by SessionContext const activeTabForError = useMemo(() => ( activeSession ? getActiveTab(activeSession) : null ), [activeSession]); @@ -2516,6 +2502,34 @@ export default function MaestroConsole() { )); }, [activeSessionId]); + // --- APP HANDLERS (drag, file, folder operations) --- + const { + handleImageDragEnter, + handleImageDragLeave, + handleImageDragOver, + isDraggingImage, + setIsDraggingImage, + dragCounterRef, + handleFileClick, + updateSessionWorkingDirectory, + toggleFolder, + expandAllFolders, + collapseAllFolders, + } = useAppHandlers({ + activeSession, + activeSessionId, + setSessions, + setActiveFocus, + setPreviewFile, + filePreviewHistory, + setFilePreviewHistory, + filePreviewHistoryIndex, + setFilePreviewHistoryIndex, + setConfirmModalMessage, + setConfirmModalOnConfirm, + setConfirmModalOpen, + }); + // Use custom colors when custom theme is selected, otherwise use the standard theme const theme = useMemo(() => { if (activeThemeId === 'custom') { @@ -2534,6 +2548,7 @@ export default function MaestroConsole() { ? (activeSession.shellCwd || activeSession.cwd) : activeSession.cwd) : '', + [activeSession?.inputMode, activeSession?.shellCwd, activeSession?.cwd] ); @@ -2658,12 +2673,8 @@ export default function MaestroConsole() { onAuthenticate: errorSession ? () => handleAuthenticateAfterError(errorSession.id) : undefined, }); - // Handler to clear group chat error and resume operations - const handleClearGroupChatError = useCallback(() => { - setGroupChatError(null); - // Focus the input for retry - setTimeout(() => groupChatInputRef.current?.focus(), 0); - }, []); + // Handler to clear group chat error (now uses context's clearGroupChatError) + const handleClearGroupChatError = handleClearGroupChatErrorBase; // Use the agent error recovery hook for group chat errors const { recoveryActions: groupChatRecoveryActions } = useAgentErrorRecovery({ @@ -2734,13 +2745,13 @@ export default function MaestroConsole() { const { mergeState, progress: mergeProgress, - error: mergeError, + error: _mergeError, startTime: mergeStartTime, sourceName: mergeSourceName, targetName: mergeTargetName, executeMerge, cancelTab: cancelMergeTab, - cancelMerge, + cancelMerge: _cancelMerge, clearTabState: clearMergeTabState, reset: resetMerge, } = useMergeSessionWithSessions({ @@ -2817,8 +2828,8 @@ export default function MaestroConsole() { const { transferState, progress: transferProgress, - error: transferError, - executeTransfer, + error: _transferError, + executeTransfer: _executeTransfer, cancelTransfer, reset: resetTransfer, } = useSendToAgentWithSessions({ @@ -2851,12 +2862,166 @@ export default function MaestroConsole() { }, }); + // --- STABLE HANDLERS FOR APP AGENT MODALS --- + + // LeaderboardRegistrationModal handlers + const handleCloseLeaderboardRegistration = useCallback(() => { + setLeaderboardRegistrationOpen(false); + }, []); + + const handleSaveLeaderboardRegistration = useCallback((registration: LeaderboardRegistration) => { + setLeaderboardRegistration(registration); + }, []); + + const handleLeaderboardOptOut = useCallback(() => { + setLeaderboardRegistration(null); + }, []); + + // MergeSessionModal handlers + const handleCloseMergeSession = useCallback(() => { + setMergeSessionModalOpen(false); + resetMerge(); + }, [resetMerge]); + + const handleMerge = useCallback(async ( + targetSessionId: string, + targetTabId: string | undefined, + options: MergeOptions + ) => { + // Close the modal - merge will show in the input area overlay + setMergeSessionModalOpen(false); + + // Execute merge using the hook (callbacks handle toasts and navigation) + const result = await executeMerge( + activeSession!, + activeSession!.activeTabId, + targetSessionId, + targetTabId, + options + ); + + if (!result.success) { + addToast({ + type: 'error', + title: 'Merge Failed', + message: result.error || 'Failed to merge contexts', + }); + } + // Note: Success toasts are handled by onSessionCreated (for new sessions) + // and onMergeComplete (for merging into existing sessions) callbacks + + return result; + }, [activeSession, executeMerge, addToast]); + + // TransferProgressModal handlers + const handleCancelTransfer = useCallback(() => { + cancelTransfer(); + setTransferSourceAgent(null); + setTransferTargetAgent(null); + }, [cancelTransfer]); + + const handleCompleteTransfer = useCallback(() => { + resetTransfer(); + setTransferSourceAgent(null); + setTransferTargetAgent(null); + }, [resetTransfer]); + + // SendToAgentModal handlers + const handleCloseSendToAgent = useCallback(() => { + setSendToAgentModalOpen(false); + }, []); + + const handleSendToAgent = useCallback(async ( + targetSessionId: string, + options: SendToAgentOptions + ) => { + // Find the target session + const targetSession = sessions.find(s => s.id === targetSessionId); + if (!targetSession) { + return { success: false, error: 'Target session not found' }; + } + + // Store source and target agents for progress modal display + setTransferSourceAgent(activeSession!.toolType); + setTransferTargetAgent(targetSession.toolType); + + // Close the selection modal - progress modal will take over + setSendToAgentModalOpen(false); + + // Get source tab context + const sourceTab = activeSession!.aiTabs.find(t => t.id === activeSession!.activeTabId); + if (!sourceTab) { + return { success: false, error: 'Source tab not found' }; + } + + // Transfer context to the target session's active tab + // Create a new tab in the target session with the transferred context + const newTabId = `tab-${Date.now()}`; + const transferNotice: LogEntry = { + id: `transfer-notice-${Date.now()}`, + timestamp: Date.now(), + source: 'system', + text: `Context transferred from "${activeSession!.name}" (${activeSession!.toolType})${options.groomContext ? ' - cleaned to reduce size' : ''}`, + }; + + const newTab: AITab = { + id: newTabId, + name: `From: ${activeSession!.name}`, + logs: [transferNotice, ...sourceTab.logs], + agentSessionId: null, + starred: false, + inputValue: '', + stagedImages: [], + createdAt: Date.now(), + state: 'idle', + }; + + // Add the new tab to the target session + setSessions(prev => prev.map(s => { + if (s.id === targetSessionId) { + return { + ...s, + aiTabs: [...s.aiTabs, newTab], + activeTabId: newTabId, + }; + } + return s; + })); + + // Navigate to the target session + setActiveSessionId(targetSessionId); + + // Calculate estimated tokens for the message + const estimatedTokens = sourceTab.logs + .filter(log => log.text && log.source !== 'system') + .reduce((sum, log) => sum + Math.round((log.text?.length || 0) / 4), 0); + const tokenInfo = estimatedTokens > 0 + ? ` (~${estimatedTokens.toLocaleString()} tokens)` + : ''; + + // Show success toast with detailed info + addToast({ + type: 'success', + title: 'Context Transferred', + message: `"${activeSession!.name}" → "${targetSession.name}"${tokenInfo}. Ready in new tab.`, + sessionId: targetSessionId, + tabId: newTabId, + }); + + // Reset transfer state + resetTransfer(); + setTransferSourceAgent(null); + setTransferTargetAgent(null); + + return { success: true, newSessionId: targetSessionId, newTabId }; + }, [activeSession, sessions, setSessions, setActiveSessionId, addToast, resetTransfer]); + // Summarize & Continue hook for context compaction (non-blocking, per-tab) const { summarizeState, progress: summarizeProgress, result: summarizeResult, - error: summarizeError, + error: _summarizeError, startTime, startSummarize, cancelTab, @@ -2922,6 +3087,20 @@ export default function MaestroConsole() { }); }, [activeSession, canSummarize, minContextUsagePercent, startSummarize, setSessions, addToast, clearTabState]); + // Combine custom AI commands with spec-kit commands for input processing (slash command execution) + // This ensures speckit commands are processed the same way as custom commands + const allCustomCommands = useMemo((): CustomAICommand[] => { + // Convert speckit commands to CustomAICommand format + const speckitAsCustom: CustomAICommand[] = speckitCommands.map(cmd => ({ + id: `speckit-${cmd.id}`, + command: cmd.command, + description: cmd.description, + prompt: cmd.prompt, + isBuiltIn: true, // Speckit commands are built-in (bundled) + })); + return [...customAICommands, ...speckitAsCustom]; + }, [customAICommands, speckitCommands]); + // Combine built-in slash commands with custom AI commands, spec-kit commands, AND agent-specific commands for autocomplete const allSlashCommands = useMemo(() => { const customCommandsAsSlash = customAICommands @@ -3016,7 +3195,7 @@ export default function MaestroConsole() { // The inputValue changes when we blur (syncAiInputToSession), but we don't want // to read it back into local state - that would cause a feedback loop. // We only need to load inputValue when switching TO a different tab. - // eslint-disable-next-line react-hooks/exhaustive-deps + }, [activeTab?.id]); // Input sync handlers (extracted to useInputSync hook) @@ -3052,7 +3231,7 @@ export default function MaestroConsole() { // Update ref to current session prevActiveSessionIdRef.current = activeSession.id; } - // eslint-disable-next-line react-hooks/exhaustive-deps + }, [activeSession?.id]); // Use local state for responsive typing - no session state update on every keystroke @@ -3065,6 +3244,7 @@ export default function MaestroConsole() { if (!activeSession || activeSession.inputMode !== 'ai') return []; const activeTab = getActiveTab(activeSession); return activeTab?.stagedImages || []; + }, [activeSession?.aiTabs, activeSession?.activeTabId, activeSession?.inputMode]); // Set staged images on the active tab @@ -3184,11 +3364,11 @@ export default function MaestroConsole() { // Extracted hook for agent spawning and execution operations const { spawnAgentForSession, - spawnAgentWithPrompt, + spawnAgentWithPrompt: _spawnAgentWithPrompt, spawnBackgroundSynopsis, spawnBackgroundSynopsisRef, - spawnAgentWithPromptRef, - showFlashNotification, + spawnAgentWithPromptRef: _spawnAgentWithPromptRef, + showFlashNotification: _showFlashNotification, showSuccessFlash, } = useAgentExecution({ activeSession, @@ -3216,11 +3396,71 @@ export default function MaestroConsole() { defaultShowThinking, }); + // PERFORMANCE: Memoized callback for creating new agent sessions + // Extracted from inline function to prevent MainPanel re-renders + const handleNewAgentSession = useCallback(() => { + // Create a fresh AI tab using functional setState to avoid stale closure + setSessions(prev => { + const currentSession = prev.find(s => s.id === activeSessionIdRef.current); + if (!currentSession) return prev; + return prev.map(s => { + if (s.id !== currentSession.id) return s; + const result = createTab(s, { saveToHistory: defaultSaveToHistory, showThinking: defaultShowThinking }); + if (!result) return s; + return result.session; + }); + }); + setActiveAgentSessionId(null); + setAgentSessionsOpen(false); + }, [defaultSaveToHistory, defaultShowThinking]); + + // PERFORMANCE: Memoized tab management callbacks + // Extracted from inline functions to prevent MainPanel re-renders + const handleTabSelect = useCallback((tabId: string) => { + setSessions(prev => prev.map(s => { + if (s.id !== activeSessionIdRef.current) return s; + const result = setActiveTab(s, tabId); + return result ? result.session : s; + })); + }, []); + + const handleTabClose = useCallback((tabId: string) => { + setSessions(prev => prev.map(s => { + if (s.id !== activeSessionIdRef.current) return s; + // Note: showUnreadOnly is accessed via ref pattern if needed, or we accept this dep + const result = closeTab(s, tabId, false); // Don't filter for unread during close + return result ? result.session : s; + })); + }, []); + + const handleNewTab = useCallback(() => { + setSessions(prev => prev.map(s => { + if (s.id !== activeSessionIdRef.current) return s; + const result = createTab(s, { saveToHistory: defaultSaveToHistory, showThinking: defaultShowThinking }); + if (!result) return s; + return result.session; + })); + }, [defaultSaveToHistory, defaultShowThinking]); + + const handleRemoveQueuedItem = useCallback((itemId: string) => { + setSessions(prev => prev.map(s => { + if (s.id !== activeSessionIdRef.current) return s; + return { + ...s, + executionQueue: s.executionQueue.filter(item => item.id !== itemId) + }; + })); + }, []); + + const handleOpenQueueBrowser = useCallback(() => { + setQueueBrowserOpen(true); + }, []); + // Note: spawnBackgroundSynopsisRef and spawnAgentWithPromptRef are now updated in useAgentExecution hook // Initialize batch processor (supports parallel batches per session) const { - batchRunStates, + batchRunStates: _batchRunStates, getBatchState, activeBatchSessionIds, startBatchRun, @@ -3432,6 +3672,61 @@ export default function MaestroConsole() { sessionId: info.sessionId, }); } + }, + // Process queued items after batch completion/stop + // This ensures pending user messages are processed after Auto Run ends + onProcessQueueAfterCompletion: (sessionId) => { + const session = sessionsRef.current.find(s => s.id === sessionId); + if (session && session.executionQueue.length > 0 && processQueuedItemRef.current) { + // Pop first item and process it + const [nextItem, ...remainingQueue] = session.executionQueue; + + // Update session state: set to busy, pop first item from queue + setSessions(prev => prev.map(s => { + if (s.id !== sessionId) return s; + + const targetTab = s.aiTabs.find(tab => tab.id === nextItem.tabId) || getActiveTab(s); + if (!targetTab) { + return { + ...s, + state: 'busy' as SessionState, + busySource: 'ai', + executionQueue: remainingQueue, + thinkingStartTime: Date.now(), + }; + } + + // For message items, add a log entry to the target tab + let updatedAiTabs = s.aiTabs; + if (nextItem.type === 'message' && nextItem.text) { + const logEntry: LogEntry = { + id: generateId(), + timestamp: Date.now(), + source: 'user', + text: nextItem.text, + images: nextItem.images + }; + updatedAiTabs = s.aiTabs.map(tab => + tab.id === targetTab.id + ? { ...tab, logs: [...tab.logs, logEntry], state: 'busy' as const } + : tab + ); + } + + return { + ...s, + state: 'busy' as SessionState, + busySource: 'ai', + aiTabs: updatedAiTabs, + activeTabId: targetTab.id, + executionQueue: remainingQueue, + thinkingStartTime: Date.now(), + }; + })); + + // Process the item after state update + processQueuedItemRef.current(sessionId, nextItem); + } } }); @@ -3594,7 +3889,7 @@ export default function MaestroConsole() { }, [activeSession, groups, spawnBackgroundSynopsis, addHistoryEntry, addLogToActiveTab, setSessions, addToast]); // Input processing hook - handles sending messages and commands - const { processInput, processInputRef } = useInputProcessing({ + const { processInput, processInputRef: _processInputRef } = useInputProcessing({ activeSession, activeSessionId, setSessions, @@ -3603,7 +3898,7 @@ export default function MaestroConsole() { stagedImages, setStagedImages, inputRef, - customAICommands, + customAICommands: allCustomCommands, // Use combined custom + speckit commands setSlashCommandOpen, syncAiInputToSession, syncTerminalInputToSession, @@ -3666,6 +3961,36 @@ export default function MaestroConsole() { }; }, [activeBatchSessionIds.length, updateAutoRunProgress, autoRunStats.longestRunMs]); + // Track peak usage stats for achievements image + useEffect(() => { + // Count current active agents (non-terminal sessions) + const activeAgents = sessions.filter(s => s.toolType !== 'terminal').length; + + // Count busy sessions (currently processing) + const busySessions = sessions.filter(s => s.state === 'busy').length; + + // Count auto-run sessions (sessions with active batch runs) + const autoRunSessions = activeBatchSessionIds.length; + + // Count total queue depth across all sessions + const totalQueueDepth = sessions.reduce((sum, s) => sum + (s.executionQueue?.length || 0), 0); + + // Update usage stats (only updates if new values are higher) + updateUsageStats({ + maxAgents: activeAgents, + maxDefinedAgents: activeAgents, // Same as active agents for now + maxSimultaneousAutoRuns: autoRunSessions, + maxSimultaneousQueries: busySessions, + maxQueueDepth: totalQueueDepth, + }); + }, [sessions, activeBatchSessionIds, updateUsageStats]); + + // Memoize worktree config key to avoid complex expression in dependency array + const worktreeConfigKey = useMemo(() => + sessions.map(s => `${s.id}:${s.worktreeConfig?.basePath}:${s.worktreeConfig?.watchEnabled}`).join(','), + [sessions] + ); + // File watcher for worktree directories - provides immediate detection // This is more efficient than polling and gives real-time results useEffect(() => { @@ -3696,10 +4021,14 @@ export default function MaestroConsole() { if (!parentSession) return; // Check if session already exists for this worktree - const existingSession = currentSessions.find(s => - (s.parentSessionId === sessionId && s.worktreeBranch === worktree.branch) || - s.cwd === worktree.path - ); + // Normalize paths for comparison (remove trailing slashes) + const normalizedWorktreePath = worktree.path.replace(/\/+$/, ''); + const existingSession = currentSessions.find(s => { + const normalizedCwd = s.cwd.replace(/\/+$/, ''); + // Check if same path (regardless of parent) or same branch under same parent + return normalizedCwd === normalizedWorktreePath || + (s.parentSessionId === sessionId && s.worktreeBranch === worktree.branch); + }); if (existingSession) return; // Create new worktree session @@ -3804,166 +4133,190 @@ export default function MaestroConsole() { window.maestro.git.unwatchWorktreeDirectory(session.id); } }; - // eslint-disable-next-line react-hooks/exhaustive-deps + }, [ // Re-run when worktreeConfig changes on any session - sessions.map(s => `${s.id}:${s.worktreeConfig?.basePath}:${s.worktreeConfig?.watchEnabled}`).join(','), + worktreeConfigKey, defaultSaveToHistory ]); - // Legacy: Periodic scanner for sessions using old worktreeParentPath - // TODO: Remove after migration to new parent/child model + // Legacy: Scanner for sessions using old worktreeParentPath + // TODO: Remove after migration to new parent/child model (use worktreeConfig with file watchers instead) + // PERFORMANCE: Only scan on app focus (visibility change) instead of continuous polling + // This avoids blocking the main thread every 30 seconds during active use useEffect(() => { - const scanWorktreeParents = async () => { - // Find sessions that have worktreeParentPath set (legacy model) - const worktreeParentSessions = sessions.filter(s => s.worktreeParentPath); - if (worktreeParentSessions.length === 0) return; + // Check if any sessions use the legacy worktreeParentPath model + const hasLegacyWorktreeSessions = sessions.some(s => s.worktreeParentPath); + if (!hasLegacyWorktreeSessions) return; - // Collect all new sessions to add in a single batch (avoids stale closure issues) - const newSessionsToAdd: Session[] = []; - // Track paths we're about to add to avoid duplicates within this scan - const pathsBeingAdded = new Set(); + // Track if we're currently scanning to avoid overlapping scans + let isScanning = false; - for (const session of worktreeParentSessions) { - try { - const result = await window.maestro.git.scanWorktreeDirectory(session.worktreeParentPath!); - const { gitSubdirs } = result; + const scanWorktreeParents = async () => { + if (isScanning) return; + isScanning = true; - for (const subdir of gitSubdirs) { - // Skip if this path was manually removed by the user (use ref for current value) - const currentRemovedPaths = removedWorktreePathsRef.current; - if (currentRemovedPaths.has(subdir.path)) { - continue; - } + try { + // Find sessions that have worktreeParentPath set (legacy model) + const worktreeParentSessions = sessionsRef.current.filter(s => s.worktreeParentPath); + if (worktreeParentSessions.length === 0) return; - // Skip if session already exists (check current sessions) - const existingSession = sessions.find(s => s.cwd === subdir.path || s.projectRoot === subdir.path); - if (existingSession) { - continue; - } + // Collect all new sessions to add in a single batch (avoids stale closure issues) + const newSessionsToAdd: Session[] = []; + // Track paths we're about to add to avoid duplicates within this scan + const pathsBeingAdded = new Set(); - // Skip if we're already adding this path in this scan batch - if (pathsBeingAdded.has(subdir.path)) { - continue; - } + for (const session of worktreeParentSessions) { + try { + const result = await window.maestro.git.scanWorktreeDirectory(session.worktreeParentPath!); + const { gitSubdirs } = result; - // Found a new worktree - prepare session creation - pathsBeingAdded.add(subdir.path); + for (const subdir of gitSubdirs) { + // Skip if this path was manually removed by the user (use ref for current value) + const currentRemovedPaths = removedWorktreePathsRef.current; + if (currentRemovedPaths.has(subdir.path)) { + continue; + } - const sessionName = subdir.branch - ? `${subdir.name} (${subdir.branch})` - : subdir.name; + // Skip if session already exists (check current sessions via ref) + const currentSessions = sessionsRef.current; + const existingSession = currentSessions.find(s => s.cwd === subdir.path || s.projectRoot === subdir.path); + if (existingSession) { + continue; + } - const newId = generateId(); - const initialTabId = generateId(); - const initialTab: AITab = { - id: initialTabId, - agentSessionId: null, - name: null, - starred: false, - logs: [], - inputValue: '', - stagedImages: [], - createdAt: Date.now(), - state: 'idle', - saveToHistory: defaultSaveToHistory - }; + // Skip if we're already adding this path in this scan batch + if (pathsBeingAdded.has(subdir.path)) { + continue; + } - // Fetch git info - let gitBranches: string[] | undefined; - let gitTags: string[] | undefined; - let gitRefsCacheTime: number | undefined; + // Found a new worktree - prepare session creation + pathsBeingAdded.add(subdir.path); - try { - [gitBranches, gitTags] = await Promise.all([ - gitService.getBranches(subdir.path), - gitService.getTags(subdir.path) - ]); - gitRefsCacheTime = Date.now(); - } catch { - // Ignore errors - } + const sessionName = subdir.branch + ? `${subdir.name} (${subdir.branch})` + : subdir.name; - const newSession: Session = { - id: newId, - name: sessionName, - groupId: session.groupId, - toolType: session.toolType, - state: 'idle', - cwd: subdir.path, - fullPath: subdir.path, - projectRoot: subdir.path, - isGitRepo: true, - gitBranches, - gitTags, - gitRefsCacheTime, - worktreeParentPath: session.worktreeParentPath, - aiLogs: [], - shellLogs: [{ id: generateId(), timestamp: Date.now(), source: 'system', text: 'Shell Session Ready.' }], - workLog: [], - contextUsage: 0, - inputMode: session.inputMode, - aiPid: 0, - terminalPid: 0, - port: 3000 + Math.floor(Math.random() * 100), - isLive: false, - changedFiles: [], - fileTree: [], - fileExplorerExpanded: [], - fileExplorerScrollPos: 0, - fileTreeAutoRefreshInterval: 180, - shellCwd: subdir.path, - aiCommandHistory: [], - shellCommandHistory: [], - executionQueue: [], - activeTimeMs: 0, - aiTabs: [initialTab], - activeTabId: initialTabId, - closedTabHistory: [], - customPath: session.customPath, - customArgs: session.customArgs, - customEnvVars: session.customEnvVars, - customModel: session.customModel - }; + const newId = generateId(); + const initialTabId = generateId(); + const initialTab: AITab = { + id: initialTabId, + agentSessionId: null, + name: null, + starred: false, + logs: [], + inputValue: '', + stagedImages: [], + createdAt: Date.now(), + state: 'idle', + saveToHistory: defaultSaveToHistory + }; + + // Fetch git info + let gitBranches: string[] | undefined; + let gitTags: string[] | undefined; + let gitRefsCacheTime: number | undefined; + + try { + [gitBranches, gitTags] = await Promise.all([ + gitService.getBranches(subdir.path), + gitService.getTags(subdir.path) + ]); + gitRefsCacheTime = Date.now(); + } catch { + // Ignore errors + } + + const newSession: Session = { + id: newId, + name: sessionName, + groupId: session.groupId, + toolType: session.toolType, + state: 'idle', + cwd: subdir.path, + fullPath: subdir.path, + projectRoot: subdir.path, + isGitRepo: true, + gitBranches, + gitTags, + gitRefsCacheTime, + worktreeParentPath: session.worktreeParentPath, + aiLogs: [], + shellLogs: [{ id: generateId(), timestamp: Date.now(), source: 'system', text: 'Shell Session Ready.' }], + workLog: [], + contextUsage: 0, + inputMode: session.inputMode, + aiPid: 0, + terminalPid: 0, + port: 3000 + Math.floor(Math.random() * 100), + isLive: false, + changedFiles: [], + fileTree: [], + fileExplorerExpanded: [], + fileExplorerScrollPos: 0, + fileTreeAutoRefreshInterval: 180, + shellCwd: subdir.path, + aiCommandHistory: [], + shellCommandHistory: [], + executionQueue: [], + activeTimeMs: 0, + aiTabs: [initialTab], + activeTabId: initialTabId, + closedTabHistory: [], + customPath: session.customPath, + customArgs: session.customArgs, + customEnvVars: session.customEnvVars, + customModel: session.customModel + }; - newSessionsToAdd.push(newSession); + newSessionsToAdd.push(newSession); + } + } catch (error) { + console.error(`[WorktreeScanner] Error scanning ${session.worktreeParentPath}:`, error); } - } catch (error) { - console.error(`[WorktreeScanner] Error scanning ${session.worktreeParentPath}:`, error); } - } - - // Add all new sessions in a single update (uses functional update to get fresh state) - if (newSessionsToAdd.length > 0) { - setSessions(prev => { - // Double-check against current state to avoid duplicates - const currentPaths = new Set(prev.map(s => s.cwd)); - const trulyNew = newSessionsToAdd.filter(s => !currentPaths.has(s.cwd)); - if (trulyNew.length === 0) return prev; - return [...prev, ...trulyNew]; - }); - for (const session of newSessionsToAdd) { - addToast({ - type: 'success', - title: 'New Worktree Discovered', - message: session.name, + // Add all new sessions in a single update (uses functional update to get fresh state) + if (newSessionsToAdd.length > 0) { + setSessions(prev => { + // Double-check against current state to avoid duplicates + const currentPaths = new Set(prev.map(s => s.cwd)); + const trulyNew = newSessionsToAdd.filter(s => !currentPaths.has(s.cwd)); + if (trulyNew.length === 0) return prev; + return [...prev, ...trulyNew]; }); + + for (const session of newSessionsToAdd) { + addToast({ + type: 'success', + title: 'New Worktree Discovered', + message: session.name, + }); + } } + } finally { + isScanning = false; } }; - // Scan immediately on mount if there are worktree parents + // Scan once on mount scanWorktreeParents(); - // Set up interval to scan every 30 seconds - const intervalId = setInterval(scanWorktreeParents, 30000); + // Scan when app regains focus (visibility change) instead of polling + // This is much more efficient - only scans when user returns to app + const handleVisibilityChange = () => { + if (!document.hidden) { + scanWorktreeParents(); + } + }; + + document.addEventListener('visibilitychange', handleVisibilityChange); return () => { - clearInterval(intervalId); + document.removeEventListener('visibilitychange', handleVisibilityChange); }; - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [sessions.length, defaultSaveToHistory]); // Re-run when session count changes (removedWorktreePaths accessed via ref) + + }, [sessions.some(s => s.worktreeParentPath), defaultSaveToHistory]); // Only re-run when legacy sessions exist/don't exist // Handler to open batch runner modal const handleOpenBatchRunner = useCallback(() => { @@ -4025,10 +4378,12 @@ export default function MaestroConsole() { const sessionId = targetSessionId ?? (activeBatchSessionIds.length > 0 ? activeBatchSessionIds[0] : activeSession?.id); if (!sessionId) return; - setConfirmModalMessage('Stop Auto Run after the current task completes?'); + const session = sessions.find(s => s.id === sessionId); + const agentName = session?.name || 'this session'; + setConfirmModalMessage(`Stop Auto Run for "${agentName}" after the current task completes?`); setConfirmModalOnConfirm(() => () => stopBatchRun(sessionId)); setConfirmModalOpen(true); - }, [activeBatchSessionIds, activeSession, stopBatchRun]); + }, [activeBatchSessionIds, activeSession, sessions, stopBatchRun]); // Error handling callbacks for Auto Run (Phase 5.10) const handleSkipCurrentDocument = useCallback(() => { @@ -4103,7 +4458,7 @@ export default function MaestroConsole() { // Restore the state for this specific chat from the per-chat state map // This prevents state from one chat bleeding into another when switching - setGroupChatState(prev => { + setGroupChatState(_prev => { const savedState = groupChatStates.get(id); return savedState ?? 'idle'; }); @@ -4185,7 +4540,7 @@ export default function MaestroConsole() { )); } } - }, [sessions]); + }, [sessions, setActiveSessionId]); const handleCreateGroupChat = useCallback(async ( name: string, @@ -4228,6 +4583,24 @@ export default function MaestroConsole() { setShowEditGroupChatModal(null); }, []); + // --- GROUP CHAT MODAL HANDLERS --- + // Stable callback handlers for AppGroupChatModals component + const handleCloseNewGroupChatModal = useCallback(() => setShowNewGroupChatModal(false), []); + const handleCloseDeleteGroupChatModal = useCallback(() => setShowDeleteGroupChatModal(null), []); + const handleConfirmDeleteGroupChat = useCallback(() => { + if (showDeleteGroupChatModal) { + handleDeleteGroupChat(showDeleteGroupChatModal); + } + }, [showDeleteGroupChatModal, handleDeleteGroupChat]); + const handleCloseRenameGroupChatModal = useCallback(() => setShowRenameGroupChatModal(null), []); + const handleRenameGroupChatFromModal = useCallback((newName: string) => { + if (showRenameGroupChatModal) { + handleRenameGroupChat(showRenameGroupChatModal, newName); + } + }, [showRenameGroupChatModal, handleRenameGroupChat]); + const handleCloseEditGroupChatModal = useCallback(() => setShowEditGroupChatModal(null), []); + const handleCloseGroupChatInfo = useCallback(() => setShowGroupChatInfo(false), []); + const handleSendGroupChatMessage = useCallback(async (content: string, images?: string[], readOnly?: boolean) => { if (!activeGroupChatId) return; @@ -4321,6 +4694,62 @@ export default function MaestroConsole() { // The hook handles: debouncing, flush-on-unmount, flush-on-visibility-change, flush-on-beforeunload const { flushNow: flushSessionPersistence } = useDebouncedPersistence(sessions, initialLoadComplete); + // AppSessionModals handlers that depend on flushSessionPersistence + const handleSaveEditAgent = useCallback(( + sessionId: string, + name: string, + nudgeMessage?: string, + customPath?: string, + customArgs?: string, + customEnvVars?: Record, + customModel?: string, + customContextWindow?: number + ) => { + setSessions(prev => prev.map(s => { + if (s.id !== sessionId) return s; + return { ...s, name, nudgeMessage, customPath, customArgs, customEnvVars, customModel, customContextWindow }; + })); + }, []); + + const handleRenameTab = useCallback((newName: string) => { + if (!activeSession || !renameTabId) return; + setSessions(prev => prev.map(s => { + if (s.id !== activeSession.id) return s; + // Find the tab to get its agentSessionId for persistence + const tab = s.aiTabs.find(t => t.id === renameTabId); + if (tab?.agentSessionId) { + // Persist name to agent session metadata (async, fire and forget) + // Use projectRoot (not cwd) for consistent session storage access + const agentId = s.toolType || 'claude-code'; + if (agentId === 'claude-code') { + window.maestro.claude.updateSessionName( + s.projectRoot, + tab.agentSessionId, + newName || '' + ).catch(err => console.error('Failed to persist tab name:', err)); + } else { + window.maestro.agentSessions.setSessionName( + agentId, + s.projectRoot, + tab.agentSessionId, + newName || null + ).catch(err => console.error('Failed to persist tab name:', err)); + } + // Also update past history entries with this agentSessionId + window.maestro.history.updateSessionName( + tab.agentSessionId, + newName || '' + ).catch(err => console.error('Failed to update history session names:', err)); + } + return { + ...s, + aiTabs: s.aiTabs.map(tab => + tab.id === renameTabId ? { ...tab, name: newName || null } : tab + ) + }; + })); + }, [activeSession, renameTabId]); + // Persist groups directly (groups change infrequently, no need to debounce) useEffect(() => { if (initialLoadComplete.current) { @@ -4337,7 +4766,7 @@ export default function MaestroConsole() { if (activeSession && fileTreeContainerRef.current && activeSession.fileExplorerScrollPos !== undefined) { fileTreeContainerRef.current.scrollTop = activeSession.fileExplorerScrollPos; } - // eslint-disable-next-line react-hooks/exhaustive-deps + }, [activeSessionId]); // Only restore on session switch, not on scroll position changes // Track navigation history when session or AI tab changes @@ -4348,7 +4777,7 @@ export default function MaestroConsole() { tabId: activeSession.inputMode === 'ai' && activeSession.aiTabs?.length > 0 ? activeSession.activeTabId : undefined }); } - // eslint-disable-next-line react-hooks/exhaustive-deps + }, [activeSessionId, activeSession?.activeTabId]); // Track session and tab changes // Reset shortcuts search when modal closes @@ -5075,6 +5504,8 @@ export default function MaestroConsole() { setTourOpen, setActiveFocus, startBatchRun, + sessions, + addToast, ]); /** @@ -5089,7 +5520,7 @@ export default function MaestroConsole() { * (e.g., "Here's a summary of our previous conversations...") * @returns Promise that resolves when the session is initialized */ - const initializeMergedSession = useCallback(async ( + const _initializeMergedSession = useCallback(async ( session: Session, contextSummary?: string ) => { @@ -5262,7 +5693,7 @@ export default function MaestroConsole() { if (isLiveMode) { // Stop tunnel first (if running), then stop web server await window.maestro.tunnel.stop(); - const result = await window.maestro.live.disableAll(); + const _result = await window.maestro.live.disableAll(); setIsLiveMode(false); setWebInterfaceUrl(null); } else { @@ -5646,7 +6077,7 @@ export default function MaestroConsole() { }; window.addEventListener('maestro:remoteCommand', handleRemoteCommand); return () => window.removeEventListener('maestro:remoteCommand', handleRemoteCommand); - }, []); + }, [addLogToActiveTab]); // Listen for tour UI actions to control right panel state useEffect(() => { @@ -6140,7 +6571,7 @@ export default function MaestroConsole() { if (s.id !== activeSession.id) return s; // Add kill log to the appropriate place and clear thinking/tool logs - let updatedSession = { ...s }; + const updatedSession = { ...s }; if (currentMode === 'ai') { const tab = getActiveTab(s); if (tab) { @@ -6378,7 +6809,7 @@ export default function MaestroConsole() { // Handle slash command autocomplete if (slashCommandOpen) { - const isTerminalMode = activeSession.inputMode === 'terminal'; + const isTerminalMode = activeSession?.inputMode === 'terminal'; const filteredCommands = allSlashCommands.filter(cmd => { // Check if command is only available in terminal mode if ('terminalOnly' in cmd && cmd.terminalOnly && !isTerminalMode) return false; @@ -6413,7 +6844,7 @@ export default function MaestroConsole() { if (e.key === 'Enter') { // Use the appropriate setting based on input mode - const currentEnterToSend = activeSession.inputMode === 'terminal' ? enterToSendTerminal : enterToSendAI; + const currentEnterToSend = activeSession?.inputMode === 'terminal' ? enterToSendTerminal : enterToSendAI; if (currentEnterToSend && !e.shiftKey && !e.metaKey) { e.preventDefault(); @@ -6428,7 +6859,7 @@ export default function MaestroConsole() { terminalOutputRef.current?.focus(); } else if (e.key === 'ArrowUp') { // Only show command history in terminal mode, not AI mode - if (activeSession.inputMode === 'terminal') { + if (activeSession?.inputMode === 'terminal') { e.preventDefault(); setCommandHistoryOpen(true); setCommandHistoryFilter(inputValue); @@ -6571,147 +7002,6 @@ export default function MaestroConsole() { } }; - // Drag event handlers for app-level image drop zone - const handleImageDragEnter = useCallback((e: React.DragEvent) => { - e.preventDefault(); - e.stopPropagation(); - dragCounterRef.current++; - // Check if dragging files that include images - if (e.dataTransfer.types.includes('Files')) { - setIsDraggingImage(true); - } - }, []); - - const handleImageDragLeave = useCallback((e: React.DragEvent) => { - e.preventDefault(); - e.stopPropagation(); - dragCounterRef.current--; - // Only hide overlay when all nested elements have been left - if (dragCounterRef.current <= 0) { - dragCounterRef.current = 0; - setIsDraggingImage(false); - } - }, []); - - const handleImageDragOver = useCallback((e: React.DragEvent) => { - e.preventDefault(); - e.stopPropagation(); - }, []); - - // Reset drag state when drag ends (e.g., user cancels by pressing Escape or dragging outside window) - useEffect(() => { - const handleDragEnd = () => { - dragCounterRef.current = 0; - setIsDraggingImage(false); - }; - - // dragend fires when the drag operation ends (drop or cancel) - document.addEventListener('dragend', handleDragEnd); - // Also listen for drop anywhere in case it's not on our drop zone - document.addEventListener('drop', handleDragEnd); - - return () => { - document.removeEventListener('dragend', handleDragEnd); - document.removeEventListener('drop', handleDragEnd); - }; - }, []); - - // --- RENDER --- - - // Recursive File Tree Renderer - - const handleFileClick = async (node: any, path: string) => { - if (node.type === 'file') { - try { - // Construct full file path - const fullPath = `${activeSession.fullPath}/${path}`; - - // Check if file should be opened externally - if (shouldOpenExternally(node.name)) { - // Show confirmation modal before opening externally - setConfirmModalMessage(`Open "${node.name}" in external application?`); - setConfirmModalOnConfirm(() => async () => { - await window.maestro.shell.openExternal(`file://${fullPath}`); - setConfirmModalOpen(false); - }); - setConfirmModalOpen(true); - return; - } - - const content = await window.maestro.fs.readFile(fullPath); - const newFile = { - name: node.name, - content: content, - path: fullPath - }; - - // Only add to history if it's a different file than the current one - const currentFile = filePreviewHistory[filePreviewHistoryIndex]; - if (!currentFile || currentFile.path !== fullPath) { - // Add to navigation history (truncate forward history if we're not at the end) - const newHistory = filePreviewHistory.slice(0, filePreviewHistoryIndex + 1); - newHistory.push(newFile); - setFilePreviewHistory(newHistory); - setFilePreviewHistoryIndex(newHistory.length - 1); - } - - setPreviewFile(newFile); - setActiveFocus('main'); - } catch (error) { - console.error('Failed to read file:', error); - } - } - }; - - - const updateSessionWorkingDirectory = async () => { - const newPath = await window.maestro.dialog.selectFolder(); - if (!newPath) return; - - setSessions(prev => prev.map(s => { - if (s.id !== activeSessionId) return s; - return { - ...s, - cwd: newPath, - fullPath: newPath, - fileTree: [], - fileTreeError: undefined - }; - })); - }; - - const toggleFolder = (path: string, sessionId: string, setSessions: React.Dispatch>) => { - setSessions(prev => prev.map(s => { - if (s.id !== sessionId) return s; - if (!s.fileExplorerExpanded) return s; - const expanded = new Set(s.fileExplorerExpanded); - if (expanded.has(path)) { - expanded.delete(path); - } else { - expanded.add(path); - } - return { ...s, fileExplorerExpanded: Array.from(expanded) }; - })); - }; - - // Expand all folders in file tree - const expandAllFolders = (sessionId: string, session: Session, setSessions: React.Dispatch>) => { - setSessions(prev => prev.map(s => { - if (s.id !== sessionId) return s; - if (!s.fileTree) return s; - const allFolderPaths = getAllFolderPaths(s.fileTree); - return { ...s, fileExplorerExpanded: allFolderPaths }; - })); - }; - - // Collapse all folders in file tree - const collapseAllFolders = (sessionId: string, setSessions: React.Dispatch>) => { - setSessions(prev => prev.map(s => { - if (s.id !== sessionId) return s; - return { ...s, fileExplorerExpanded: [] }; - })); - }; - // --- FILE TREE MANAGEMENT --- // Extracted hook for file tree operations (refresh, git state, filtering) const { @@ -6754,1288 +7044,1315 @@ export default function MaestroConsole() { setCreateGroupModalOpen, } = groupModalState; - // Update keyboardHandlerRef synchronously during render (before effects run) - // This must be placed after all handler functions and state are defined to avoid TDZ errors - // The ref is provided by useMainKeyboardHandler hook - keyboardHandlerRef.current = { - shortcuts, activeFocus, activeRightTab, sessions, selectedSidebarIndex, activeSessionId, - quickActionOpen, settingsModalOpen, shortcutsHelpOpen, newInstanceModalOpen, aboutModalOpen, - processMonitorOpen, logViewerOpen, createGroupModalOpen, confirmModalOpen, renameInstanceModalOpen, - renameGroupModalOpen, activeSession, previewFile, fileTreeFilter, fileTreeFilterOpen, gitDiffPreview, - gitLogOpen, lightboxImage, hasOpenLayers, hasOpenModal, visibleSessions, sortedSessions, groups, - bookmarksCollapsed, leftSidebarOpen, editingSessionId, editingGroupId, markdownEditMode, defaultSaveToHistory, defaultShowThinking, - setLeftSidebarOpen, setRightPanelOpen, addNewSession, deleteSession, setQuickActionInitialMode, - setQuickActionOpen, cycleSession, toggleInputMode, setShortcutsHelpOpen, setSettingsModalOpen, - setSettingsTab, setActiveRightTab, handleSetActiveRightTab, setActiveFocus, setBookmarksCollapsed, setGroups, - setSelectedSidebarIndex, setActiveSessionId, handleViewGitDiff, setGitLogOpen, setActiveAgentSessionId, - setAgentSessionsOpen, setLogViewerOpen, setProcessMonitorOpen, logsEndRef, inputRef, terminalOutputRef, sidebarContainerRef, - setSessions, createTab, closeTab, reopenClosedTab, getActiveTab, setRenameTabId, setRenameTabInitialName, - setRenameTabModalOpen, navigateToNextTab, navigateToPrevTab, navigateToTabByIndex, navigateToLastTab, - setFileTreeFilterOpen, isShortcut, isTabShortcut, handleNavBack, handleNavForward, toggleUnreadFilter, - setTabSwitcherOpen, showUnreadOnly, stagedImages, handleSetLightboxImage, setMarkdownEditMode, - toggleTabStar, toggleTabUnread, setPromptComposerOpen, openWizardModal, rightPanelRef, setFuzzyFileSearchOpen, - setShowNewGroupChatModal, deleteGroupChatWithConfirmation, - // Group chat context - activeGroupChatId, groupChatInputRef, groupChatStagedImages, setGroupChatRightTab, - // Navigation handlers from useKeyboardNavigation hook - handleSidebarNavigation, handleTabNavigation, handleEnterToActivate, handleEscapeInMain, - // Agent capabilities - hasActiveSessionCapability, + // Group Modal Handlers (stable callbacks for AppGroupModals) + // Must be defined after groupModalState destructure since setCreateGroupModalOpen comes from there + const handleCloseCreateGroupModal = useCallback(() => { + setCreateGroupModalOpen(false); + }, [setCreateGroupModalOpen]); + const handleCloseRenameGroupModal = useCallback(() => { + setRenameGroupModalOpen(false); + }, []); - // Merge session modal and send to agent modal - setMergeSessionModalOpen, - setSendToAgentModalOpen, - // Summarize and continue - canSummarizeActiveTab: (() => { - if (!activeSession || !activeSession.activeTabId) return false; - return canSummarize(activeSession.contextUsage); - })(), - summarizeAndContinue: handleSummarizeAndContinue, + // Worktree Modal Handlers (stable callbacks for AppWorktreeModals) + const handleCloseWorktreeConfigModal = useCallback(() => { + setWorktreeConfigModalOpen(false); + }, []); - // Keyboard mastery gamification - recordShortcutUsage, onKeyboardMasteryLevelUp + const handleSaveWorktreeConfig = useCallback(async (config: { basePath: string; watchEnabled: boolean }) => { + if (!activeSession) return; - }; + // Save the config first + setSessions(prev => prev.map(s => + s.id === activeSession.id + ? { ...s, worktreeConfig: config } + : s + )); - // Update flat file list when active session's tree, expanded folders, filter, or hidden files setting changes - useEffect(() => { - if (!activeSession || !activeSession.fileExplorerExpanded) { - setFlatFileList([]); - return; - } - const expandedSet = new Set(activeSession.fileExplorerExpanded); + // Scan for worktrees and create sub-agent sessions + try { + const scanResult = await window.maestro.git.scanWorktreeDirectory(config.basePath); + const { gitSubdirs } = scanResult; - // Apply hidden files filter to match FileExplorerPanel's display - const filterHiddenFiles = (nodes: FileNode[]): FileNode[] => { - if (showHiddenFiles) return nodes; - return nodes - .filter(node => !node.name.startsWith('.')) - .map(node => ({ - ...node, - children: node.children ? filterHiddenFiles(node.children) : undefined - })); - }; + if (gitSubdirs.length > 0) { + const newWorktreeSessions: Session[] = []; - // Use filteredFileTree when available (it returns the full tree when no filter is active) - // Then apply hidden files filter to match what FileExplorerPanel displays - const displayTree = filterHiddenFiles(filteredFileTree); - setFlatFileList(flattenTree(displayTree, expandedSet)); - }, [activeSession?.fileExplorerExpanded, filteredFileTree, showHiddenFiles]); + for (const subdir of gitSubdirs) { + // Skip main/master/HEAD branches - they're typically the main repo + if (subdir.branch === 'main' || subdir.branch === 'master' || subdir.branch === 'HEAD') { + continue; + } - // Handle pending jump path from /jump command - useEffect(() => { - if (!activeSession || activeSession.pendingJumpPath === undefined || flatFileList.length === 0) return; + // Check if a session already exists for this worktree + const existingSession = sessions.find(s => + s.parentSessionId === activeSession.id && + s.worktreeBranch === subdir.branch + ); + if (existingSession) { + continue; + } - const jumpPath = activeSession.pendingJumpPath; + // Also check by path + const existingByPath = sessions.find(s => s.cwd === subdir.path); + if (existingByPath) { + continue; + } - // Find the target index - let targetIndex = 0; + const newId = generateId(); + const initialTabId = generateId(); + const initialTab: AITab = { + id: initialTabId, + agentSessionId: null, + name: null, + starred: false, + logs: [], + inputValue: '', + stagedImages: [], + createdAt: Date.now(), + state: 'idle', + saveToHistory: true + }; - if (jumpPath === '') { - // Jump to root - select first item - targetIndex = 0; - } else { - // Find the folder in the flat list and select it directly - const folderIndex = flatFileList.findIndex(item => item.fullPath === jumpPath && item.isFolder); + // Fetch git info for this subdirectory + let gitBranches: string[] | undefined; + let gitTags: string[] | undefined; + let gitRefsCacheTime: number | undefined; - if (folderIndex !== -1) { - // Select the folder itself (not its first child) - targetIndex = folderIndex; + try { + [gitBranches, gitTags] = await Promise.all([ + gitService.getBranches(subdir.path), + gitService.getTags(subdir.path) + ]); + gitRefsCacheTime = Date.now(); + } catch { + // Ignore errors fetching git info + } + + const worktreeSession: Session = { + id: newId, + name: subdir.branch || subdir.name, + groupId: activeSession.groupId, + toolType: activeSession.toolType, + state: 'idle', + cwd: subdir.path, + fullPath: subdir.path, + projectRoot: subdir.path, + isGitRepo: true, + gitBranches, + gitTags, + gitRefsCacheTime, + parentSessionId: activeSession.id, + worktreeBranch: subdir.branch || undefined, + aiLogs: [], + shellLogs: [{ id: generateId(), timestamp: Date.now(), source: 'system', text: 'Worktree Session Ready.' }], + workLog: [], + contextUsage: 0, + inputMode: activeSession.toolType === 'terminal' ? 'terminal' : 'ai', + aiPid: 0, + terminalPid: 0, + port: 3000 + Math.floor(Math.random() * 100), + isLive: false, + changedFiles: [], + fileTree: [], + fileExplorerExpanded: [], + fileExplorerScrollPos: 0, + fileTreeAutoRefreshInterval: 180, + shellCwd: subdir.path, + aiCommandHistory: [], + shellCommandHistory: [], + executionQueue: [], + activeTimeMs: 0, + aiTabs: [initialTab], + activeTabId: initialTabId, + closedTabHistory: [], + customPath: activeSession.customPath, + customArgs: activeSession.customArgs, + customEnvVars: activeSession.customEnvVars, + customModel: activeSession.customModel, + customContextWindow: activeSession.customContextWindow, + nudgeMessage: activeSession.nudgeMessage, + autoRunFolderPath: activeSession.autoRunFolderPath + }; + + newWorktreeSessions.push(worktreeSession); + } + + if (newWorktreeSessions.length > 0) { + setSessions(prev => [...prev, ...newWorktreeSessions]); + // Expand worktrees on parent + setSessions(prev => prev.map(s => + s.id === activeSession.id + ? { ...s, worktreesExpanded: true } + : s + )); + addToast({ + type: 'success', + title: 'Worktrees Discovered', + message: `Found ${newWorktreeSessions.length} worktree sub-agent${newWorktreeSessions.length > 1 ? 's' : ''}`, + }); + } } - // If folder not found, stay at 0 + } catch (err) { + console.error('Failed to scan for worktrees:', err); } + }, [activeSession, sessions, addToast]); - fileTreeKeyboardNavRef.current = true; // Scroll to jumped file - setSelectedFileIndex(targetIndex); - - // Clear the pending jump path + const handleDisableWorktreeConfig = useCallback(() => { + if (!activeSession) return; setSessions(prev => prev.map(s => - s.id === activeSession.id ? { ...s, pendingJumpPath: undefined } : s + s.id === activeSession.id + ? { ...s, worktreeConfig: undefined, worktreeParentPath: undefined } + : s )); - }, [activeSession?.pendingJumpPath, flatFileList, activeSession?.id]); - - // Scroll to selected file item when selection changes via keyboard - useEffect(() => { - // Only scroll when selection changed via keyboard navigation, not mouse click - if (!fileTreeKeyboardNavRef.current) return; - fileTreeKeyboardNavRef.current = false; // Reset flag after handling + addToast({ + type: 'success', + title: 'Worktrees Disabled', + message: 'Worktree configuration cleared for this agent.', + }); + }, [activeSession, addToast]); - // Allow scroll when: - // 1. Right panel is focused on files tab (normal keyboard navigation) - // 2. Tab completion is open and files tab is visible (sync from tab completion) - const shouldScroll = (activeFocus === 'right' && activeRightTab === 'files') || - (tabCompletionOpen && activeRightTab === 'files'); - if (!shouldScroll) return; + const handleCreateWorktreeFromConfig = useCallback(async (branchName: string, basePath: string) => { + if (!activeSession || !basePath) { + addToast({ type: 'error', title: 'Error', message: 'No worktree directory configured' }); + return; + } - // Use requestAnimationFrame to ensure DOM is updated - requestAnimationFrame(() => { - const container = fileTreeContainerRef.current; - if (!container) return; + const worktreePath = `${basePath}/${branchName}`; + console.log('[WorktreeConfig] Create worktree:', branchName, 'at', worktreePath); - // Find the selected element - const selectedElement = container.querySelector(`[data-file-index="${selectedFileIndex}"]`) as HTMLElement; + try { + // Create the worktree via git + const result = await window.maestro.git.worktreeSetup( + activeSession.cwd, + worktreePath, + branchName + ); - if (selectedElement) { - // Use scrollIntoView with center alignment to avoid sticky header overlap - selectedElement.scrollIntoView({ - behavior: 'auto', // Immediate scroll - block: 'center', // Center in viewport to avoid sticky header at top - inline: 'nearest' - }); + if (!result.success) { + throw new Error(result.error || 'Failed to create worktree'); } - }); - }, [selectedFileIndex, activeFocus, activeRightTab, flatFileList, tabCompletionOpen]); - // File Explorer keyboard navigation - useEffect(() => { - const handleFileExplorerKeys = (e: KeyboardEvent) => { - // Skip when a modal is open (let textarea/input in modal handle arrow keys) - if (hasOpenModal()) return; - - // Only handle when right panel is focused and on files tab - if (activeFocus !== 'right' || activeRightTab !== 'files' || flatFileList.length === 0) return; + // Create a new session for the worktree, inheriting all config from parent + const newId = generateId(); + const initialTabId = generateId(); + const initialTab: AITab = { + id: initialTabId, + agentSessionId: null, + name: null, + starred: false, + logs: [], + inputValue: '', + stagedImages: [], + createdAt: Date.now(), + state: 'idle', + saveToHistory: defaultSaveToHistory + }; - const expandedFolders = new Set(activeSession.fileExplorerExpanded || []); + // Fetch git info for the worktree + let gitBranches: string[] | undefined; + let gitTags: string[] | undefined; + let gitRefsCacheTime: number | undefined; - // Cmd+Arrow: jump to top/bottom - if ((e.metaKey || e.ctrlKey) && e.key === 'ArrowUp') { - e.preventDefault(); - fileTreeKeyboardNavRef.current = true; - setSelectedFileIndex(0); - } else if ((e.metaKey || e.ctrlKey) && e.key === 'ArrowDown') { - e.preventDefault(); - fileTreeKeyboardNavRef.current = true; - setSelectedFileIndex(flatFileList.length - 1); - } - // Option+Arrow: page up/down (move by 10 items) - else if (e.altKey && e.key === 'ArrowUp') { - e.preventDefault(); - fileTreeKeyboardNavRef.current = true; - setSelectedFileIndex(prev => Math.max(0, prev - 10)); - } else if (e.altKey && e.key === 'ArrowDown') { - e.preventDefault(); - fileTreeKeyboardNavRef.current = true; - setSelectedFileIndex(prev => Math.min(flatFileList.length - 1, prev + 10)); - } - // Regular Arrow: move one item - else if (e.key === 'ArrowUp') { - e.preventDefault(); - fileTreeKeyboardNavRef.current = true; - setSelectedFileIndex(prev => Math.max(0, prev - 1)); - } else if (e.key === 'ArrowDown') { - e.preventDefault(); - fileTreeKeyboardNavRef.current = true; - setSelectedFileIndex(prev => Math.min(flatFileList.length - 1, prev + 1)); - } else if (e.key === 'ArrowLeft') { - e.preventDefault(); - const selectedItem = flatFileList[selectedFileIndex]; - if (selectedItem?.isFolder && expandedFolders.has(selectedItem.fullPath)) { - // If selected item is an expanded folder, collapse it - toggleFolder(selectedItem.fullPath, activeSessionId, setSessions); - } else if (selectedItem) { - // If selected item is a file or collapsed folder, collapse parent folder - const parentPath = selectedItem.fullPath.substring(0, selectedItem.fullPath.lastIndexOf('/')); - if (parentPath && expandedFolders.has(parentPath)) { - toggleFolder(parentPath, activeSessionId, setSessions); - // Move selection to parent folder - const parentIndex = flatFileList.findIndex(item => item.fullPath === parentPath); - if (parentIndex >= 0) { - fileTreeKeyboardNavRef.current = true; - setSelectedFileIndex(parentIndex); - } - } - } - } else if (e.key === 'ArrowRight') { - e.preventDefault(); - const selectedItem = flatFileList[selectedFileIndex]; - if (selectedItem?.isFolder && !expandedFolders.has(selectedItem.fullPath)) { - toggleFolder(selectedItem.fullPath, activeSessionId, setSessions); - } - } else if (e.key === 'Enter') { - e.preventDefault(); - const selectedItem = flatFileList[selectedFileIndex]; - if (selectedItem) { - if (selectedItem.isFolder) { - toggleFolder(selectedItem.fullPath, activeSessionId, setSessions); - } else { - handleFileClick(selectedItem, selectedItem.fullPath); - } - } + try { + [gitBranches, gitTags] = await Promise.all([ + gitService.getBranches(worktreePath), + gitService.getTags(worktreePath) + ]); + gitRefsCacheTime = Date.now(); + } catch { + // Ignore errors } - }; - window.addEventListener('keydown', handleFileExplorerKeys); - return () => window.removeEventListener('keydown', handleFileExplorerKeys); - }, [activeFocus, activeRightTab, flatFileList, selectedFileIndex, activeSession?.fileExplorerExpanded, activeSessionId, setSessions, toggleFolder, handleFileClick, hasOpenModal]); + const worktreeSession: Session = { + id: newId, + name: branchName, + groupId: activeSession.groupId, + toolType: activeSession.toolType, + state: 'idle', + cwd: worktreePath, + fullPath: worktreePath, + projectRoot: worktreePath, + isGitRepo: true, + gitBranches, + gitTags, + gitRefsCacheTime, + parentSessionId: activeSession.id, + worktreeBranch: branchName, + aiLogs: [], + shellLogs: [{ id: generateId(), timestamp: Date.now(), source: 'system', text: 'Worktree Session Ready.' }], + workLog: [], + contextUsage: 0, + inputMode: activeSession.toolType === 'terminal' ? 'terminal' : 'ai', + aiPid: 0, + terminalPid: 0, + port: 3000 + Math.floor(Math.random() * 100), + isLive: false, + changedFiles: [], + fileTree: [], + fileExplorerExpanded: [], + fileExplorerScrollPos: 0, + fileTreeAutoRefreshInterval: 180, + shellCwd: worktreePath, + aiCommandHistory: [], + shellCommandHistory: [], + executionQueue: [], + activeTimeMs: 0, + aiTabs: [initialTab], + activeTabId: initialTabId, + closedTabHistory: [], + customPath: activeSession.customPath, + customArgs: activeSession.customArgs, + customEnvVars: activeSession.customEnvVars, + customModel: activeSession.customModel, + customContextWindow: activeSession.customContextWindow, + nudgeMessage: activeSession.nudgeMessage, + autoRunFolderPath: activeSession.autoRunFolderPath + }; - return ( - -
+ setSessions(prev => [...prev, worktreeSession]); - {/* Image Drop Overlay */} - {isDraggingImage && ( -
-
- - - - - Drop image to attach - -
-
- )} - - {/* --- DRAGGABLE TITLE BAR (hidden in mobile landscape) --- */} - {!isMobileLandscape && ( -
- {activeGroupChatId ? ( - - Maestro Group Chat: {groupChats.find(c => c.id === activeGroupChatId)?.name || 'Unknown'} - - ) : activeSession && ( - - {(() => { - const parts: string[] = []; - // Group name (if grouped) - const group = groups.find(g => g.id === activeSession.groupId); - if (group) { - parts.push(`${group.emoji} ${group.name}`); - } - // Agent name (user-given name for this agent instance) - parts.push(activeSession.name); - // Active tab name or UUID octet - const activeTab = activeSession.aiTabs?.find(t => t.id === activeSession.activeTabId); - if (activeTab) { - const tabLabel = activeTab.name || - (activeTab.agentSessionId ? activeTab.agentSessionId.split('-')[0].toUpperCase() : null); - if (tabLabel) { - parts.push(tabLabel); - } - } - return parts.join(' | '); - })()} - - )} -
- )} - - {/* --- MODALS --- */} - {quickActionOpen && ( - { - if (activeSession?.inputMode === 'ai' && activeSession.activeTabId) { - const activeTab = activeSession.aiTabs?.find(t => t.id === activeSession.activeTabId); - // Only allow rename if tab has an active Claude session - if (activeTab?.agentSessionId) { - setRenameTabId(activeTab.id); - setRenameTabInitialName(getInitialRenameValue(activeTab)); - setRenameTabModalOpen(true); - } - } - }} - onToggleReadOnlyMode={() => { - if (activeSession?.inputMode === 'ai' && activeSession.activeTabId) { - setSessions(prev => prev.map(s => { - if (s.id !== activeSession.id) return s; - return { - ...s, - aiTabs: s.aiTabs.map(tab => - tab.id === s.activeTabId ? { ...tab, readOnlyMode: !tab.readOnlyMode } : tab - ) - }; - })); - } - }} - onToggleTabShowThinking={() => { - if (activeSession?.inputMode === 'ai' && activeSession.activeTabId) { - setSessions(prev => prev.map(s => { - if (s.id !== activeSession.id) return s; - return { - ...s, - aiTabs: s.aiTabs.map(tab => { - if (tab.id !== s.activeTabId) return tab; - // When turning OFF, clear any thinking/tool logs - if (tab.showThinking) { - return { - ...tab, - showThinking: false, - logs: tab.logs.filter(l => l.source !== 'thinking' && l.source !== 'tool') - }; - } - return { ...tab, showThinking: true }; - }) - }; - })); - } - }} - onOpenTabSwitcher={() => { - if (activeSession?.inputMode === 'ai' && activeSession.aiTabs) { - setTabSwitcherOpen(true); - } - }} - setPlaygroundOpen={setPlaygroundOpen} - onRefreshGitFileState={async () => { - if (activeSessionId) { - // Refresh file tree, branches/tags, and history - await refreshGitFileState(activeSessionId); - // Also refresh git info in main panel header (branch, ahead/behind, uncommitted) - await mainPanelRef.current?.refreshGitInfo(); - setSuccessFlashNotification('Files, Git, History Refreshed'); - setTimeout(() => setSuccessFlashNotification(null), 2000); - } - }} - onDebugReleaseQueuedItem={() => { - if (!activeSession || activeSession.executionQueue.length === 0) return; - const [nextItem, ...remainingQueue] = activeSession.executionQueue; - // Update state to remove item from queue - setSessions(prev => prev.map(s => { - if (s.id !== activeSessionId) return s; - return { ...s, executionQueue: remainingQueue }; - })); - // Process the item - processQueuedItem(activeSessionId, nextItem); - console.log('[Debug] Released queued item:', nextItem); - }} - markdownEditMode={markdownEditMode} - onToggleMarkdownEditMode={() => setMarkdownEditMode(!markdownEditMode)} - setUpdateCheckModalOpen={setUpdateCheckModalOpen} - openWizard={openWizardModal} - wizardGoToStep={wizardGoToStep} - setDebugWizardModalOpen={setDebugWizardModalOpen} - setDebugPackageModalOpen={setDebugPackageModalOpen} - startTour={() => { - setTourFromWizard(false); - setTourOpen(true); - }} - setFuzzyFileSearchOpen={setFuzzyFileSearchOpen} - onEditAgent={(session) => { - setEditAgentSession(session); - setEditAgentModalOpen(true); - }} - groupChats={groupChats} - onNewGroupChat={() => setShowNewGroupChatModal(true)} - onOpenGroupChat={handleOpenGroupChat} - onCloseGroupChat={handleCloseGroupChat} - onDeleteGroupChat={deleteGroupChatWithConfirmation} - activeGroupChatId={activeGroupChatId} - hasActiveSessionCapability={hasActiveSessionCapability} - onOpenMergeSession={() => setMergeSessionModalOpen(true)} - onOpenSendToAgent={() => setSendToAgentModalOpen(true)} - onOpenCreatePR={(session) => { - setCreatePRSession(session); - setCreatePRModalOpen(true); - }} - onSummarizeAndContinue={() => handleSummarizeAndContinue()} - canSummarizeActiveTab={activeSession ? canSummarize(activeSession.contextUsage) : false} - onToggleRemoteControl={async () => { - await toggleGlobalLive(); - // Show flash notification based on the NEW state (opposite of current) - if (isLiveMode) { - // Was live, now offline - setSuccessFlashNotification('Remote Control: OFFLINE — See indicator at top of left panel'); - } else { - // Was offline, now live - setSuccessFlashNotification('Remote Control: LIVE — See LIVE indicator at top of left panel for QR code'); - } - setTimeout(() => setSuccessFlashNotification(null), 4000); - }} - /> - )} - {lightboxImage && ( - 0 ? lightboxImages : stagedImages} - onClose={() => { - setLightboxImage(null); - setLightboxImages([]); - setLightboxSource('history'); - lightboxIsGroupChatRef.current = false; - lightboxAllowDeleteRef.current = false; - // Return focus to input after closing carousel - setTimeout(() => inputRef.current?.focus(), 0); - }} - onNavigate={(img) => setLightboxImage(img)} - // Use ref for delete permission - refs are set synchronously before React batches state updates - // This ensures Cmd+Y and click both correctly enable delete when source is 'staged' - onDelete={lightboxAllowDeleteRef.current ? (img: string) => { - // Use ref for group chat check too, for consistency - if (lightboxIsGroupChatRef.current) { - setGroupChatStagedImages(prev => prev.filter(i => i !== img)); - } else { - setStagedImages(prev => prev.filter(i => i !== img)); - } - } : undefined} - theme={theme} - /> - )} - - {/* --- GIT DIFF VIEWER --- */} - {gitDiffPreview && activeSession && ( - - )} - - {/* --- GIT LOG VIEWER --- */} - {gitLogOpen && activeSession && ( - - )} - - {/* --- SHORTCUTS HELP MODAL --- */} - {shortcutsHelpOpen && ( - setShortcutsHelpOpen(false)} - hasNoAgents={hasNoAgents} - keyboardMasteryStats={keyboardMasteryStats} - /> - )} - - {/* --- ABOUT MODAL --- */} - {aboutModalOpen && ( - setAboutModalOpen(false)} - onOpenLeaderboardRegistration={() => { - setAboutModalOpen(false); - setLeaderboardRegistrationOpen(true); - }} - isLeaderboardRegistered={isLeaderboardRegistered} - /> - )} - - {/* --- LEADERBOARD REGISTRATION MODAL --- */} - {leaderboardRegistrationOpen && ( - setLeaderboardRegistrationOpen(false)} - onSave={(registration) => { - setLeaderboardRegistration(registration); - }} - onOptOut={() => { - setLeaderboardRegistration(null); - }} - /> - )} + // Expand parent's worktrees + setSessions(prev => prev.map(s => + s.id === activeSession.id ? { ...s, worktreesExpanded: true } : s + )); - {/* --- UPDATE CHECK MODAL --- */} - {updateCheckModalOpen && ( - setUpdateCheckModalOpen(false)} - /> - )} + addToast({ + type: 'success', + title: 'Worktree Created', + message: branchName, + }); + } catch (err) { + console.error('[WorktreeConfig] Failed to create worktree:', err); + addToast({ + type: 'error', + title: 'Failed to Create Worktree', + message: err instanceof Error ? err.message : String(err), + }); + throw err; // Re-throw so the modal can show the error + } + }, [activeSession, defaultSaveToHistory, addToast]); - {/* --- DEBUG PACKAGE MODAL --- */} - + const handleCloseCreateWorktreeModal = useCallback(() => { + setCreateWorktreeModalOpen(false); + setCreateWorktreeSession(null); + }, []); - {/* --- AGENT ERROR MODAL --- */} - {errorSession?.agentError && ( - - )} + const handleCreateWorktree = useCallback(async (branchName: string) => { + if (!createWorktreeSession) return; - {/* --- GROUP CHAT ERROR MODAL --- */} - {groupChatError && ( - c.id === groupChatError.groupChatId)?.name || 'Unknown'} - recoveryActions={groupChatRecoveryActions} - onDismiss={handleClearGroupChatError} - dismissible={groupChatError.error.recoverable} - /> - )} + // Determine base path: use configured path or default to parent directory + const basePath = createWorktreeSession.worktreeConfig?.basePath || + createWorktreeSession.cwd.replace(/\/[^/]+$/, '') + '/worktrees'; - {/* --- WORKTREE CONFIG MODAL --- */} - {worktreeConfigModalOpen && activeSession && ( - setWorktreeConfigModalOpen(false)} - theme={theme} - session={activeSession} - onSaveConfig={async (config) => { - // Save the config first - setSessions(prev => prev.map(s => - s.id === activeSession.id - ? { ...s, worktreeConfig: config } - : s - )); + const worktreePath = `${basePath}/${branchName}`; + console.log('[CreateWorktree] Create worktree:', branchName, 'at', worktreePath); - // Scan for worktrees and create sub-agent sessions - try { - const scanResult = await window.maestro.git.scanWorktreeDirectory(config.basePath); - const { gitSubdirs } = scanResult; + // Create the worktree via git + const result = await window.maestro.git.worktreeSetup( + createWorktreeSession.cwd, + worktreePath, + branchName + ); - if (gitSubdirs.length > 0) { - const newWorktreeSessions: Session[] = []; + if (!result.success) { + throw new Error(result.error || 'Failed to create worktree'); + } - for (const subdir of gitSubdirs) { - // Skip main/master/HEAD branches - they're typically the main repo - if (subdir.branch === 'main' || subdir.branch === 'master' || subdir.branch === 'HEAD') { - continue; - } + // Create a new session for the worktree, inheriting all config from parent + const newId = generateId(); + const initialTabId = generateId(); + const initialTab: AITab = { + id: initialTabId, + agentSessionId: null, + name: null, + starred: false, + logs: [], + inputValue: '', + stagedImages: [], + createdAt: Date.now(), + state: 'idle', + saveToHistory: defaultSaveToHistory + }; - // Check if a session already exists for this worktree - const existingSession = sessions.find(s => - s.parentSessionId === activeSession.id && - s.worktreeBranch === subdir.branch - ); - if (existingSession) { - continue; - } + // Fetch git info for the worktree + let gitBranches: string[] | undefined; + let gitTags: string[] | undefined; + let gitRefsCacheTime: number | undefined; - // Also check by path - const existingByPath = sessions.find(s => s.cwd === subdir.path); - if (existingByPath) { - continue; - } + try { + [gitBranches, gitTags] = await Promise.all([ + gitService.getBranches(worktreePath), + gitService.getTags(worktreePath) + ]); + gitRefsCacheTime = Date.now(); + } catch { + // Ignore errors + } - const newId = generateId(); - const initialTabId = generateId(); - const initialTab: AITab = { - id: initialTabId, - agentSessionId: null, - name: null, - starred: false, - logs: [], - inputValue: '', - stagedImages: [], - createdAt: Date.now(), - state: 'idle', - saveToHistory: true - }; + const worktreeSession: Session = { + id: newId, + name: branchName, + groupId: createWorktreeSession.groupId, + toolType: createWorktreeSession.toolType, + state: 'idle', + cwd: worktreePath, + fullPath: worktreePath, + projectRoot: worktreePath, + isGitRepo: true, + gitBranches, + gitTags, + gitRefsCacheTime, + parentSessionId: createWorktreeSession.id, + worktreeBranch: branchName, + aiLogs: [], + shellLogs: [{ id: generateId(), timestamp: Date.now(), source: 'system', text: 'Worktree Session Ready.' }], + workLog: [], + contextUsage: 0, + inputMode: createWorktreeSession.toolType === 'terminal' ? 'terminal' : 'ai', + aiPid: 0, + terminalPid: 0, + port: 3000 + Math.floor(Math.random() * 100), + isLive: false, + changedFiles: [], + fileTree: [], + fileExplorerExpanded: [], + fileExplorerScrollPos: 0, + fileTreeAutoRefreshInterval: 180, + shellCwd: worktreePath, + aiCommandHistory: [], + shellCommandHistory: [], + executionQueue: [], + activeTimeMs: 0, + aiTabs: [initialTab], + activeTabId: initialTabId, + closedTabHistory: [], + customPath: createWorktreeSession.customPath, + customArgs: createWorktreeSession.customArgs, + customEnvVars: createWorktreeSession.customEnvVars, + customModel: createWorktreeSession.customModel, + customContextWindow: createWorktreeSession.customContextWindow, + nudgeMessage: createWorktreeSession.nudgeMessage, + autoRunFolderPath: createWorktreeSession.autoRunFolderPath + }; - // Fetch git info for this subdirectory - let gitBranches: string[] | undefined; - let gitTags: string[] | undefined; - let gitRefsCacheTime: number | undefined; - - try { - [gitBranches, gitTags] = await Promise.all([ - gitService.getBranches(subdir.path), - gitService.getTags(subdir.path) - ]); - gitRefsCacheTime = Date.now(); - } catch { - // Ignore errors fetching git info - } + setSessions(prev => [...prev, worktreeSession]); - const worktreeSession: Session = { - id: newId, - name: subdir.branch || subdir.name, - groupId: activeSession.groupId, // Inherit group from parent - toolType: activeSession.toolType, - state: 'idle', - cwd: subdir.path, - fullPath: subdir.path, - projectRoot: subdir.path, - isGitRepo: true, - gitBranches, - gitTags, - gitRefsCacheTime, - parentSessionId: activeSession.id, - worktreeBranch: subdir.branch || undefined, - aiLogs: [], - shellLogs: [{ id: generateId(), timestamp: Date.now(), source: 'system', text: 'Worktree Session Ready.' }], - workLog: [], - contextUsage: 0, - inputMode: activeSession.toolType === 'terminal' ? 'terminal' : 'ai', - aiPid: 0, - terminalPid: 0, - port: 3000 + Math.floor(Math.random() * 100), - isLive: false, - changedFiles: [], - fileTree: [], - fileExplorerExpanded: [], - fileExplorerScrollPos: 0, - fileTreeAutoRefreshInterval: 180, - shellCwd: subdir.path, - aiCommandHistory: [], - shellCommandHistory: [], - executionQueue: [], - activeTimeMs: 0, - aiTabs: [initialTab], - activeTabId: initialTabId, - closedTabHistory: [], - customPath: activeSession.customPath, - customArgs: activeSession.customArgs, - customEnvVars: activeSession.customEnvVars, - customModel: activeSession.customModel, - customContextWindow: activeSession.customContextWindow, - nudgeMessage: activeSession.nudgeMessage, - autoRunFolderPath: activeSession.autoRunFolderPath - }; + // Expand parent's worktrees + setSessions(prev => prev.map(s => + s.id === createWorktreeSession.id ? { ...s, worktreesExpanded: true } : s + )); - newWorktreeSessions.push(worktreeSession); - } + // Save worktree config if not already configured + if (!createWorktreeSession.worktreeConfig?.basePath) { + setSessions(prev => prev.map(s => + s.id === createWorktreeSession.id + ? { ...s, worktreeConfig: { basePath, watchEnabled: true } } + : s + )); + } - if (newWorktreeSessions.length > 0) { - setSessions(prev => [...prev, ...newWorktreeSessions]); - // Expand worktrees on parent - setSessions(prev => prev.map(s => - s.id === activeSession.id - ? { ...s, worktreesExpanded: true } - : s - )); - addToast({ - type: 'success', - title: 'Worktrees Discovered', - message: `Found ${newWorktreeSessions.length} worktree sub-agent${newWorktreeSessions.length > 1 ? 's' : ''}`, - }); - } - } - } catch (err) { - console.error('Failed to scan for worktrees:', err); - } - }} - onCreateWorktree={async (branchName, basePath) => { - if (!basePath) { - addToast({ type: 'error', title: 'Error', message: 'No worktree directory configured' }); - return; - } + addToast({ + type: 'success', + title: 'Worktree Created', + message: branchName, + }); + }, [createWorktreeSession, defaultSaveToHistory, addToast]); - const worktreePath = `${basePath}/${branchName}`; - console.log('[WorktreeConfig] Create worktree:', branchName, 'at', worktreePath); + const handleCloseCreatePRModal = useCallback(() => { + setCreatePRModalOpen(false); + setCreatePRSession(null); + }, []); - try { - // Create the worktree via git - const result = await window.maestro.git.worktreeSetup( - activeSession.cwd, - worktreePath, - branchName - ); + const handlePRCreated = useCallback(async (prDetails: PRDetails) => { + const session = createPRSession || activeSession; + addToast({ + type: 'success', + title: 'Pull Request Created', + message: prDetails.title, + actionUrl: prDetails.url, + actionLabel: prDetails.url, + }); + // Add history entry with PR details + if (session) { + await window.maestro.history.add({ + id: generateId(), + type: 'USER', + timestamp: Date.now(), + summary: `Created PR: ${prDetails.title}`, + fullResponse: [ + `**Pull Request:** [${prDetails.title}](${prDetails.url})`, + `**Branch:** ${prDetails.sourceBranch} → ${prDetails.targetBranch}`, + prDetails.description ? `**Description:** ${prDetails.description}` : '', + ].filter(Boolean).join('\n\n'), + projectPath: session.projectRoot || session.cwd, + sessionId: session.id, + sessionName: session.name, + }); + rightPanelRef.current?.refreshHistoryPanel(); + } + setCreatePRSession(null); + }, [createPRSession, activeSession, addToast]); - if (!result.success) { - throw new Error(result.error || 'Failed to create worktree'); - } + const handleCloseDeleteWorktreeModal = useCallback(() => { + setDeleteWorktreeModalOpen(false); + setDeleteWorktreeSession(null); + }, []); - // Create a new session for the worktree, inheriting all config from parent - const newId = generateId(); - const initialTabId = generateId(); - const initialTab: AITab = { - id: initialTabId, - agentSessionId: null, - name: null, - starred: false, - logs: [], - inputValue: '', - stagedImages: [], - createdAt: Date.now(), - state: 'idle', - saveToHistory: defaultSaveToHistory - }; - - // Fetch git info for the worktree - let gitBranches: string[] | undefined; - let gitTags: string[] | undefined; - let gitRefsCacheTime: number | undefined; - - try { - [gitBranches, gitTags] = await Promise.all([ - gitService.getBranches(worktreePath), - gitService.getTags(worktreePath) - ]); - gitRefsCacheTime = Date.now(); - } catch { - // Ignore errors - } - - const worktreeSession: Session = { - id: newId, - name: branchName, - groupId: activeSession.groupId, // Inherit group from parent - toolType: activeSession.toolType, - state: 'idle', - cwd: worktreePath, - fullPath: worktreePath, - projectRoot: worktreePath, - isGitRepo: true, - gitBranches, - gitTags, - gitRefsCacheTime, - parentSessionId: activeSession.id, - worktreeBranch: branchName, - aiLogs: [], - shellLogs: [{ id: generateId(), timestamp: Date.now(), source: 'system', text: 'Worktree Session Ready.' }], - workLog: [], - contextUsage: 0, - inputMode: activeSession.toolType === 'terminal' ? 'terminal' : 'ai', - aiPid: 0, - terminalPid: 0, - port: 3000 + Math.floor(Math.random() * 100), - isLive: false, - changedFiles: [], - fileTree: [], - fileExplorerExpanded: [], - fileExplorerScrollPos: 0, - fileTreeAutoRefreshInterval: 180, - shellCwd: worktreePath, - aiCommandHistory: [], - shellCommandHistory: [], - executionQueue: [], - activeTimeMs: 0, - aiTabs: [initialTab], - activeTabId: initialTabId, - closedTabHistory: [], - // Inherit all agent configuration from parent - customPath: activeSession.customPath, - customArgs: activeSession.customArgs, - customEnvVars: activeSession.customEnvVars, - customModel: activeSession.customModel, - customContextWindow: activeSession.customContextWindow, - nudgeMessage: activeSession.nudgeMessage, - autoRunFolderPath: activeSession.autoRunFolderPath + const handleConfirmDeleteWorktree = useCallback(() => { + if (!deleteWorktreeSession) return; + // Remove the session but keep the worktree on disk + setSessions(prev => prev.filter(s => s.id !== deleteWorktreeSession.id)); + }, [deleteWorktreeSession]); + + const handleConfirmAndDeleteWorktreeOnDisk = useCallback(async () => { + if (!deleteWorktreeSession) return; + // Remove the session AND delete the worktree from disk + const result = await window.maestro.git.removeWorktree(deleteWorktreeSession.cwd, true); + if (!result.success) { + throw new Error(result.error || 'Failed to remove worktree'); + } + setSessions(prev => prev.filter(s => s.id !== deleteWorktreeSession.id)); + }, [deleteWorktreeSession]); + + // AppUtilityModals stable callbacks + const handleCloseLightbox = useCallback(() => { + setLightboxImage(null); + setLightboxImages([]); + setLightboxSource('history'); + lightboxIsGroupChatRef.current = false; + lightboxAllowDeleteRef.current = false; + // Return focus to input after closing carousel + setTimeout(() => inputRef.current?.focus(), 0); + }, []); + const handleNavigateLightbox = useCallback((img: string) => setLightboxImage(img), []); + const handleDeleteLightboxImage = useCallback((img: string) => { + // Use ref for group chat check - refs are set synchronously before React batches state updates + if (lightboxIsGroupChatRef.current) { + setGroupChatStagedImages(prev => prev.filter(i => i !== img)); + } else { + setStagedImages(prev => prev.filter(i => i !== img)); + } + }, []); + const handleCloseAutoRunSetup = useCallback(() => setAutoRunSetupModalOpen(false), []); + const handleCloseBatchRunner = useCallback(() => setBatchRunnerModalOpen(false), []); + const handleSaveBatchPrompt = useCallback((prompt: string) => { + if (!activeSession) return; + // Save the custom prompt and modification timestamp to the session (persisted across restarts) + setSessions(prev => prev.map(s => + s.id === activeSession.id ? { ...s, batchRunnerPrompt: prompt, batchRunnerPromptModifiedAt: Date.now() } : s + )); + }, [activeSession]); + const handleCloseTabSwitcher = useCallback(() => setTabSwitcherOpen(false), []); + const handleUtilityTabSelect = useCallback((tabId: string) => { + if (!activeSession) return; + setSessions(prev => prev.map(s => + s.id === activeSession.id ? { ...s, activeTabId: tabId } : s + )); + }, [activeSession]); + const handleNamedSessionSelect = useCallback((agentSessionId: string, _projectPath: string, sessionName: string, starred?: boolean) => { + // Open a closed named session as a new tab - use handleResumeSession to properly load messages + handleResumeSession(agentSessionId, [], sessionName, starred); + // Focus input so user can start interacting immediately + setActiveFocus('main'); + setTimeout(() => inputRef.current?.focus(), 50); + }, [handleResumeSession, setActiveFocus]); + const handleCloseFileSearch = useCallback(() => setFuzzyFileSearchOpen(false), []); + const handleFileSearchSelect = useCallback((file: FlatFileItem) => { + // Preview the file directly (handleFileClick expects relative path) + if (!file.isFolder) { + handleFileClick({ name: file.name, type: 'file' }, file.fullPath); + } + }, [handleFileClick]); + const handleClosePromptComposer = useCallback(() => { + setPromptComposerOpen(false); + setTimeout(() => inputRef.current?.focus(), 0); + }, []); + const handlePromptComposerSubmit = useCallback((value: string) => { + if (activeGroupChatId) { + // Update group chat draft + setGroupChats(prev => prev.map(c => + c.id === activeGroupChatId ? { ...c, draftMessage: value } : c + )); + } else { + setInputValue(value); + } + }, [activeGroupChatId]); + const handlePromptComposerSend = useCallback((value: string) => { + if (activeGroupChatId) { + // Send to group chat + handleSendGroupChatMessage(value, groupChatStagedImages.length > 0 ? groupChatStagedImages : undefined, groupChatReadOnlyMode); + setGroupChatStagedImages([]); + // Clear draft + setGroupChats(prev => prev.map(c => + c.id === activeGroupChatId ? { ...c, draftMessage: '' } : c + )); + } else { + // Set the input value and trigger send + setInputValue(value); + // Use setTimeout to ensure state updates before processing + setTimeout(() => processInput(value), 0); + } + }, [activeGroupChatId, groupChatStagedImages, groupChatReadOnlyMode, handleSendGroupChatMessage, processInput]); + const handlePromptToggleTabSaveToHistory = useCallback(() => { + if (!activeSession) return; + const activeTab = getActiveTab(activeSession); + if (!activeTab) return; + setSessions(prev => prev.map(s => { + if (s.id !== activeSession.id) return s; + return { + ...s, + aiTabs: s.aiTabs.map(tab => + tab.id === activeTab.id ? { ...tab, saveToHistory: !tab.saveToHistory } : tab + ) + }; + })); + }, [activeSession, getActiveTab]); + const handlePromptToggleTabReadOnlyMode = useCallback(() => { + if (activeGroupChatId) { + setGroupChatReadOnlyMode(prev => !prev); + } else { + if (!activeSession) return; + const activeTab = getActiveTab(activeSession); + if (!activeTab) return; + setSessions(prev => prev.map(s => { + if (s.id !== activeSession.id) return s; + return { + ...s, + aiTabs: s.aiTabs.map(tab => + tab.id === activeTab.id ? { ...tab, readOnlyMode: !tab.readOnlyMode } : tab + ) + }; + })); + } + }, [activeGroupChatId, activeSession, getActiveTab]); + const handlePromptToggleTabShowThinking = useCallback(() => { + if (!activeSession) return; + const activeTab = getActiveTab(activeSession); + if (!activeTab) return; + setSessions(prev => prev.map(s => { + if (s.id !== activeSession.id) return s; + return { + ...s, + aiTabs: s.aiTabs.map(tab => { + if (tab.id !== activeTab.id) return tab; + if (tab.showThinking) { + // Turn off - clear thinking logs + return { + ...tab, + showThinking: false, + logs: tab.logs.filter(log => log.source !== 'thinking'), + }; + } + return { ...tab, showThinking: true }; + }) + }; + })); + }, [activeSession, getActiveTab]); + const handlePromptToggleEnterToSend = useCallback(() => setEnterToSendAI(!enterToSendAI), [enterToSendAI]); + + // QuickActionsModal stable callbacks + const handleQuickActionsRenameTab = useCallback(() => { + if (activeSession?.inputMode === 'ai' && activeSession.activeTabId) { + const activeTab = activeSession.aiTabs?.find(t => t.id === activeSession.activeTabId); + // Only allow rename if tab has an active Claude session + if (activeTab?.agentSessionId) { + setRenameTabId(activeTab.id); + setRenameTabInitialName(getInitialRenameValue(activeTab)); + setRenameTabModalOpen(true); + } + } + }, [activeSession, getInitialRenameValue]); + const handleQuickActionsToggleReadOnlyMode = useCallback(() => { + if (activeSession?.inputMode === 'ai' && activeSession.activeTabId) { + setSessions(prev => prev.map(s => { + if (s.id !== activeSession.id) return s; + return { + ...s, + aiTabs: s.aiTabs.map(tab => + tab.id === s.activeTabId ? { ...tab, readOnlyMode: !tab.readOnlyMode } : tab + ) + }; + })); + } + }, [activeSession]); + const handleQuickActionsToggleTabShowThinking = useCallback(() => { + if (activeSession?.inputMode === 'ai' && activeSession.activeTabId) { + setSessions(prev => prev.map(s => { + if (s.id !== activeSession.id) return s; + return { + ...s, + aiTabs: s.aiTabs.map(tab => { + if (tab.id !== s.activeTabId) return tab; + // When turning OFF, clear any thinking/tool logs + if (tab.showThinking) { + return { + ...tab, + showThinking: false, + logs: tab.logs.filter(l => l.source !== 'thinking' && l.source !== 'tool') }; - - setSessions(prev => [...prev, worktreeSession]); - - // Expand parent's worktrees - setSessions(prev => prev.map(s => - s.id === activeSession.id ? { ...s, worktreesExpanded: true } : s - )); - - addToast({ - type: 'success', - title: 'Worktree Created', - message: branchName, - }); - } catch (err) { - console.error('[WorktreeConfig] Failed to create worktree:', err); - addToast({ - type: 'error', - title: 'Failed to Create Worktree', - message: err instanceof Error ? err.message : String(err), - }); - throw err; // Re-throw so the modal can show the error } - }} - /> - )} - - {/* --- CREATE WORKTREE MODAL (quick create from context menu) --- */} - {createWorktreeModalOpen && createWorktreeSession && ( - { - setCreateWorktreeModalOpen(false); - setCreateWorktreeSession(null); - }} - theme={theme} - session={createWorktreeSession} - onCreateWorktree={async (branchName) => { - // Determine base path: use configured path or default to parent directory - const basePath = createWorktreeSession.worktreeConfig?.basePath || - createWorktreeSession.cwd.replace(/\/[^/]+$/, '') + '/worktrees'; - - const worktreePath = `${basePath}/${branchName}`; - console.log('[CreateWorktree] Create worktree:', branchName, 'at', worktreePath); - - // Create the worktree via git - const result = await window.maestro.git.worktreeSetup( - createWorktreeSession.cwd, - worktreePath, - branchName - ); + return { ...tab, showThinking: true }; + }) + }; + })); + } + }, [activeSession]); + const handleQuickActionsOpenTabSwitcher = useCallback(() => { + if (activeSession?.inputMode === 'ai' && activeSession.aiTabs) { + setTabSwitcherOpen(true); + } + }, [activeSession]); + const handleQuickActionsRefreshGitFileState = useCallback(async () => { + if (activeSessionId) { + // Refresh file tree, branches/tags, and history + await refreshGitFileState(activeSessionId); + // Also refresh git info in main panel header (branch, ahead/behind, uncommitted) + await mainPanelRef.current?.refreshGitInfo(); + setSuccessFlashNotification('Files, Git, History Refreshed'); + setTimeout(() => setSuccessFlashNotification(null), 2000); + } + }, [activeSessionId, refreshGitFileState, setSuccessFlashNotification]); + const handleQuickActionsDebugReleaseQueuedItem = useCallback(() => { + if (!activeSession || activeSession.executionQueue.length === 0) return; + const [nextItem, ...remainingQueue] = activeSession.executionQueue; + // Update state to remove item from queue + setSessions(prev => prev.map(s => { + if (s.id !== activeSessionId) return s; + return { ...s, executionQueue: remainingQueue }; + })); + // Process the item + processQueuedItem(activeSessionId, nextItem); + }, [activeSession, activeSessionId, processQueuedItem]); + const handleQuickActionsToggleMarkdownEditMode = useCallback(() => setMarkdownEditMode(!markdownEditMode), [markdownEditMode]); + const handleQuickActionsStartTour = useCallback(() => { + setTourFromWizard(false); + setTourOpen(true); + }, []); + const handleQuickActionsEditAgent = useCallback((session: Session) => { + setEditAgentSession(session); + setEditAgentModalOpen(true); + }, []); + const handleQuickActionsNewGroupChat = useCallback(() => setShowNewGroupChatModal(true), []); + const handleQuickActionsOpenMergeSession = useCallback(() => setMergeSessionModalOpen(true), []); + const handleQuickActionsOpenSendToAgent = useCallback(() => setSendToAgentModalOpen(true), []); + const handleQuickActionsOpenCreatePR = useCallback((session: Session) => { + setCreatePRSession(session); + setCreatePRModalOpen(true); + }, []); + const handleQuickActionsSummarizeAndContinue = useCallback(() => handleSummarizeAndContinue(), [handleSummarizeAndContinue]); + const handleQuickActionsToggleRemoteControl = useCallback(async () => { + await toggleGlobalLive(); + // Show flash notification based on the NEW state (opposite of current) + if (isLiveMode) { + // Was live, now offline + setSuccessFlashNotification('Remote Control: OFFLINE — See indicator at top of left panel'); + } else { + // Was offline, now live + setSuccessFlashNotification('Remote Control: LIVE — See LIVE indicator at top of left panel for QR code'); + } + setTimeout(() => setSuccessFlashNotification(null), 4000); + }, [toggleGlobalLive, isLiveMode, setSuccessFlashNotification]); + const handleQuickActionsAutoRunResetTasks = useCallback(() => { + rightPanelRef.current?.openAutoRunResetTasksModal(); + }, []); - if (!result.success) { - throw new Error(result.error || 'Failed to create worktree'); - } + const handleCloseQueueBrowser = useCallback(() => setQueueBrowserOpen(false), []); + const handleRemoveQueueItem = useCallback((sessionId: string, itemId: string) => { + setSessions(prev => prev.map(s => { + if (s.id !== sessionId) return s; + return { + ...s, + executionQueue: s.executionQueue.filter(item => item.id !== itemId) + }; + })); + }, []); + const handleSwitchQueueSession = useCallback((sessionId: string) => { + setActiveSessionId(sessionId); + }, [setActiveSessionId]); + const handleReorderQueueItems = useCallback((sessionId: string, fromIndex: number, toIndex: number) => { + setSessions(prev => prev.map(s => { + if (s.id !== sessionId) return s; + const queue = [...s.executionQueue]; + const [removed] = queue.splice(fromIndex, 1); + queue.splice(toIndex, 0, removed); + return { ...s, executionQueue: queue }; + })); + }, []); - // Create a new session for the worktree, inheriting all config from parent - const newId = generateId(); - const initialTabId = generateId(); - const initialTab: AITab = { - id: initialTabId, - agentSessionId: null, - name: null, - starred: false, - logs: [], - inputValue: '', - stagedImages: [], - createdAt: Date.now(), - state: 'idle', - saveToHistory: defaultSaveToHistory - }; + // Update keyboardHandlerRef synchronously during render (before effects run) + // This must be placed after all handler functions and state are defined to avoid TDZ errors + // The ref is provided by useMainKeyboardHandler hook + keyboardHandlerRef.current = { + shortcuts, activeFocus, activeRightTab, sessions, selectedSidebarIndex, activeSessionId, + quickActionOpen, settingsModalOpen, shortcutsHelpOpen, newInstanceModalOpen, aboutModalOpen, + processMonitorOpen, logViewerOpen, createGroupModalOpen, confirmModalOpen, renameInstanceModalOpen, + renameGroupModalOpen, activeSession, previewFile, fileTreeFilter, fileTreeFilterOpen, gitDiffPreview, + gitLogOpen, lightboxImage, hasOpenLayers, hasOpenModal, visibleSessions, sortedSessions, groups, + bookmarksCollapsed, leftSidebarOpen, editingSessionId, editingGroupId, markdownEditMode, defaultSaveToHistory, defaultShowThinking, + setLeftSidebarOpen, setRightPanelOpen, addNewSession, deleteSession, setQuickActionInitialMode, + setQuickActionOpen, cycleSession, toggleInputMode, setShortcutsHelpOpen, setSettingsModalOpen, + setSettingsTab, setActiveRightTab, handleSetActiveRightTab, setActiveFocus, setBookmarksCollapsed, setGroups, + setSelectedSidebarIndex, setActiveSessionId, handleViewGitDiff, setGitLogOpen, setActiveAgentSessionId, + setAgentSessionsOpen, setLogViewerOpen, setProcessMonitorOpen, logsEndRef, inputRef, terminalOutputRef, sidebarContainerRef, + setSessions, createTab, closeTab, reopenClosedTab, getActiveTab, setRenameTabId, setRenameTabInitialName, + setRenameTabModalOpen, navigateToNextTab, navigateToPrevTab, navigateToTabByIndex, navigateToLastTab, + setFileTreeFilterOpen, isShortcut, isTabShortcut, handleNavBack, handleNavForward, toggleUnreadFilter, + setTabSwitcherOpen, showUnreadOnly, stagedImages, handleSetLightboxImage, setMarkdownEditMode, + toggleTabStar, toggleTabUnread, setPromptComposerOpen, openWizardModal, rightPanelRef, setFuzzyFileSearchOpen, + setShowNewGroupChatModal, deleteGroupChatWithConfirmation, + // Group chat context + activeGroupChatId, groupChatInputRef, groupChatStagedImages, setGroupChatRightTab, + // Navigation handlers from useKeyboardNavigation hook + handleSidebarNavigation, handleTabNavigation, handleEnterToActivate, handleEscapeInMain, + // Agent capabilities + hasActiveSessionCapability, - // Fetch git info for the worktree - let gitBranches: string[] | undefined; - let gitTags: string[] | undefined; - let gitRefsCacheTime: number | undefined; + // Merge session modal and send to agent modal + setMergeSessionModalOpen, + setSendToAgentModalOpen, + // Summarize and continue + canSummarizeActiveTab: (() => { + if (!activeSession || !activeSession.activeTabId) return false; + return canSummarize(activeSession.contextUsage); + })(), + summarizeAndContinue: handleSummarizeAndContinue, - try { - [gitBranches, gitTags] = await Promise.all([ - gitService.getBranches(worktreePath), - gitService.getTags(worktreePath) - ]); - gitRefsCacheTime = Date.now(); - } catch { - // Ignore errors - } + // Keyboard mastery gamification + recordShortcutUsage, onKeyboardMasteryLevelUp - const worktreeSession: Session = { - id: newId, - name: branchName, - groupId: createWorktreeSession.groupId, // Inherit group from parent - toolType: createWorktreeSession.toolType, - state: 'idle', - cwd: worktreePath, - fullPath: worktreePath, - projectRoot: worktreePath, - isGitRepo: true, - gitBranches, - gitTags, - gitRefsCacheTime, - parentSessionId: createWorktreeSession.id, - worktreeBranch: branchName, - aiLogs: [], - shellLogs: [{ id: generateId(), timestamp: Date.now(), source: 'system', text: 'Worktree Session Ready.' }], - workLog: [], - contextUsage: 0, - inputMode: createWorktreeSession.toolType === 'terminal' ? 'terminal' : 'ai', - aiPid: 0, - terminalPid: 0, - port: 3000 + Math.floor(Math.random() * 100), - isLive: false, - changedFiles: [], - fileTree: [], - fileExplorerExpanded: [], - fileExplorerScrollPos: 0, - fileTreeAutoRefreshInterval: 180, - shellCwd: worktreePath, - aiCommandHistory: [], - shellCommandHistory: [], - executionQueue: [], - activeTimeMs: 0, - aiTabs: [initialTab], - activeTabId: initialTabId, - closedTabHistory: [], - // Inherit all agent configuration from parent - customPath: createWorktreeSession.customPath, - customArgs: createWorktreeSession.customArgs, - customEnvVars: createWorktreeSession.customEnvVars, - customModel: createWorktreeSession.customModel, - customContextWindow: createWorktreeSession.customContextWindow, - nudgeMessage: createWorktreeSession.nudgeMessage, - autoRunFolderPath: createWorktreeSession.autoRunFolderPath - }; + }; - setSessions(prev => [...prev, worktreeSession]); + // Update flat file list when active session's tree, expanded folders, filter, or hidden files setting changes + useEffect(() => { + if (!activeSession || !activeSession.fileExplorerExpanded) { + setFlatFileList([]); + return; + } + const expandedSet = new Set(activeSession.fileExplorerExpanded); - // Expand parent's worktrees - setSessions(prev => prev.map(s => - s.id === createWorktreeSession.id ? { ...s, worktreesExpanded: true } : s - )); + // Apply hidden files filter to match FileExplorerPanel's display + const filterHiddenFiles = (nodes: FileNode[]): FileNode[] => { + if (showHiddenFiles) return nodes; + return nodes + .filter(node => !node.name.startsWith('.')) + .map(node => ({ + ...node, + children: node.children ? filterHiddenFiles(node.children) : undefined + })); + }; - // Save worktree config if not already configured - if (!createWorktreeSession.worktreeConfig?.basePath) { - setSessions(prev => prev.map(s => - s.id === createWorktreeSession.id - ? { ...s, worktreeConfig: { basePath, watchEnabled: true } } - : s - )); - } + // Use filteredFileTree when available (it returns the full tree when no filter is active) + // Then apply hidden files filter to match what FileExplorerPanel displays + const displayTree = filterHiddenFiles(filteredFileTree); + setFlatFileList(flattenTree(displayTree, expandedSet)); + + }, [activeSession?.fileExplorerExpanded, filteredFileTree, showHiddenFiles]); - addToast({ - type: 'success', - title: 'Worktree Created', - message: branchName, - }); - }} - /> - )} + // Handle pending jump path from /jump command + useEffect(() => { + if (!activeSession || activeSession.pendingJumpPath === undefined || flatFileList.length === 0) return; - {/* --- MERGE SESSION MODAL --- */} - {mergeSessionModalOpen && activeSession && activeSession.activeTabId && ( - { - setMergeSessionModalOpen(false); - resetMerge(); - }} - onMerge={async (targetSessionId, targetTabId, options) => { - // Close the modal - merge will show in the input area overlay - setMergeSessionModalOpen(false); - - // Execute merge using the hook (callbacks handle toasts and navigation) - const result = await executeMerge( - activeSession, - activeSession.activeTabId, - targetSessionId, - targetTabId, - options - ); + const jumpPath = activeSession.pendingJumpPath; - if (!result.success) { - addToast({ - type: 'error', - title: 'Merge Failed', - message: result.error || 'Failed to merge contexts', - }); - } - // Note: Success toasts are handled by onSessionCreated (for new sessions) - // and onMergeComplete (for merging into existing sessions) callbacks + // Find the target index + let targetIndex = 0; - return result; - }} - /> - )} + if (jumpPath === '') { + // Jump to root - select first item + targetIndex = 0; + } else { + // Find the folder in the flat list and select it directly + const folderIndex = flatFileList.findIndex(item => item.fullPath === jumpPath && item.isFolder); - {/* --- TRANSFER PROGRESS MODAL --- */} - {(transferState === 'grooming' || transferState === 'creating' || transferState === 'complete') && - transferProgress && - transferSourceAgent && - transferTargetAgent && ( - { - cancelTransfer(); - setTransferSourceAgent(null); - setTransferTargetAgent(null); - }} - onComplete={() => { - resetTransfer(); - setTransferSourceAgent(null); - setTransferTargetAgent(null); - }} - /> - )} + if (folderIndex !== -1) { + // Select the folder itself (not its first child) + targetIndex = folderIndex; + } + // If folder not found, stay at 0 + } - {/* --- SEND TO AGENT MODAL --- */} - {sendToAgentModalOpen && activeSession && activeSession.activeTabId && ( - setSendToAgentModalOpen(false)} - onSend={async (targetSessionId, options) => { - // Find the target session - const targetSession = sessions.find(s => s.id === targetSessionId); - if (!targetSession) { - return { success: false, error: 'Target session not found' }; - } + fileTreeKeyboardNavRef.current = true; // Scroll to jumped file + setSelectedFileIndex(targetIndex); - // Store source and target agents for progress modal display - setTransferSourceAgent(activeSession.toolType); - setTransferTargetAgent(targetSession.toolType); + // Clear the pending jump path + setSessions(prev => prev.map(s => + s.id === activeSession.id ? { ...s, pendingJumpPath: undefined } : s + )); + + }, [activeSession?.pendingJumpPath, flatFileList, activeSession?.id]); - // Close the selection modal - progress modal will take over - setSendToAgentModalOpen(false); + // Scroll to selected file item when selection changes via keyboard + useEffect(() => { + // Only scroll when selection changed via keyboard navigation, not mouse click + if (!fileTreeKeyboardNavRef.current) return; + fileTreeKeyboardNavRef.current = false; // Reset flag after handling - // Get source tab context - const sourceTab = activeSession.aiTabs.find(t => t.id === activeSession.activeTabId); - if (!sourceTab) { - return { success: false, error: 'Source tab not found' }; - } + // Allow scroll when: + // 1. Right panel is focused on files tab (normal keyboard navigation) + // 2. Tab completion is open and files tab is visible (sync from tab completion) + const shouldScroll = (activeFocus === 'right' && activeRightTab === 'files') || + (tabCompletionOpen && activeRightTab === 'files'); + if (!shouldScroll) return; - // Transfer context to the target session's active tab - // Create a new tab in the target session with the transferred context - const newTabId = `tab-${Date.now()}`; - const transferNotice: LogEntry = { - id: `transfer-notice-${Date.now()}`, - timestamp: Date.now(), - source: 'system', - text: `Context transferred from "${activeSession.name}" (${activeSession.toolType})${options.groomContext ? ' - cleaned to reduce size' : ''}`, - }; + // Use requestAnimationFrame to ensure DOM is updated + requestAnimationFrame(() => { + const container = fileTreeContainerRef.current; + if (!container) return; - const newTab: AITab = { - id: newTabId, - name: `From: ${activeSession.name}`, - logs: [transferNotice, ...sourceTab.logs], - agentSessionId: null, - starred: false, - inputValue: '', - stagedImages: [], - createdAt: Date.now(), - state: 'idle', - }; + // Find the selected element + const selectedElement = container.querySelector(`[data-file-index="${selectedFileIndex}"]`) as HTMLElement; - // Add the new tab to the target session - setSessions(prev => prev.map(s => { - if (s.id === targetSessionId) { - return { - ...s, - aiTabs: [...s.aiTabs, newTab], - activeTabId: newTabId, - }; - } - return s; - })); + if (selectedElement) { + // Use scrollIntoView with center alignment to avoid sticky header overlap + selectedElement.scrollIntoView({ + behavior: 'auto', // Immediate scroll + block: 'center', // Center in viewport to avoid sticky header at top + inline: 'nearest' + }); + } + }); + }, [selectedFileIndex, activeFocus, activeRightTab, flatFileList, tabCompletionOpen]); - // Navigate to the target session - setActiveSessionId(targetSessionId); + // File Explorer keyboard navigation + useEffect(() => { + const handleFileExplorerKeys = (e: KeyboardEvent) => { + // Skip when a modal is open (let textarea/input in modal handle arrow keys) + if (hasOpenModal()) return; - // Calculate estimated tokens for the message - const estimatedTokens = sourceTab.logs - .filter(log => log.text && log.source !== 'system') - .reduce((sum, log) => sum + Math.round((log.text?.length || 0) / 4), 0); - const tokenInfo = estimatedTokens > 0 - ? ` (~${estimatedTokens.toLocaleString()} tokens)` - : ''; + // Only handle when right panel is focused and on files tab + if (activeFocus !== 'right' || activeRightTab !== 'files' || flatFileList.length === 0) return; - // Show success toast with detailed info - addToast({ - type: 'success', - title: 'Context Transferred', - message: `"${activeSession.name}" → "${targetSession.name}"${tokenInfo}. Ready in new tab.`, - sessionId: targetSessionId, - tabId: newTabId, - }); + const expandedFolders = new Set(activeSession?.fileExplorerExpanded || []); - // Reset transfer state - resetTransfer(); - setTransferSourceAgent(null); - setTransferTargetAgent(null); + // Cmd+Arrow: jump to top/bottom + if ((e.metaKey || e.ctrlKey) && e.key === 'ArrowUp') { + e.preventDefault(); + fileTreeKeyboardNavRef.current = true; + setSelectedFileIndex(0); + } else if ((e.metaKey || e.ctrlKey) && e.key === 'ArrowDown') { + e.preventDefault(); + fileTreeKeyboardNavRef.current = true; + setSelectedFileIndex(flatFileList.length - 1); + } + // Option+Arrow: page up/down (move by 10 items) + else if (e.altKey && e.key === 'ArrowUp') { + e.preventDefault(); + fileTreeKeyboardNavRef.current = true; + setSelectedFileIndex(prev => Math.max(0, prev - 10)); + } else if (e.altKey && e.key === 'ArrowDown') { + e.preventDefault(); + fileTreeKeyboardNavRef.current = true; + setSelectedFileIndex(prev => Math.min(flatFileList.length - 1, prev + 10)); + } + // Regular Arrow: move one item + else if (e.key === 'ArrowUp') { + e.preventDefault(); + fileTreeKeyboardNavRef.current = true; + setSelectedFileIndex(prev => Math.max(0, prev - 1)); + } else if (e.key === 'ArrowDown') { + e.preventDefault(); + fileTreeKeyboardNavRef.current = true; + setSelectedFileIndex(prev => Math.min(flatFileList.length - 1, prev + 1)); + } else if (e.key === 'ArrowLeft') { + e.preventDefault(); + const selectedItem = flatFileList[selectedFileIndex]; + if (selectedItem?.isFolder && expandedFolders.has(selectedItem.fullPath)) { + // If selected item is an expanded folder, collapse it + toggleFolder(selectedItem.fullPath, activeSessionId, setSessions); + } else if (selectedItem) { + // If selected item is a file or collapsed folder, collapse parent folder + const parentPath = selectedItem.fullPath.substring(0, selectedItem.fullPath.lastIndexOf('/')); + if (parentPath && expandedFolders.has(parentPath)) { + toggleFolder(parentPath, activeSessionId, setSessions); + // Move selection to parent folder + const parentIndex = flatFileList.findIndex(item => item.fullPath === parentPath); + if (parentIndex >= 0) { + fileTreeKeyboardNavRef.current = true; + setSelectedFileIndex(parentIndex); + } + } + } + } else if (e.key === 'ArrowRight') { + e.preventDefault(); + const selectedItem = flatFileList[selectedFileIndex]; + if (selectedItem?.isFolder && !expandedFolders.has(selectedItem.fullPath)) { + toggleFolder(selectedItem.fullPath, activeSessionId, setSessions); + } + } else if (e.key === 'Enter') { + e.preventDefault(); + const selectedItem = flatFileList[selectedFileIndex]; + if (selectedItem) { + if (selectedItem.isFolder) { + toggleFolder(selectedItem.fullPath, activeSessionId, setSessions); + } else { + handleFileClick(selectedItem, selectedItem.fullPath); + } + } + } + }; - return { success: true, newSessionId: targetSessionId, newTabId }; - }} - /> - )} + window.addEventListener('keydown', handleFileExplorerKeys); + return () => window.removeEventListener('keydown', handleFileExplorerKeys); + }, [activeFocus, activeRightTab, flatFileList, selectedFileIndex, activeSession?.fileExplorerExpanded, activeSessionId, setSessions, toggleFolder, handleFileClick, hasOpenModal]); - {/* --- CREATE PR MODAL --- */} - {createPRModalOpen && (createPRSession || activeSession) && ( - { - setCreatePRModalOpen(false); - setCreatePRSession(null); - }} - theme={theme} - worktreePath={(createPRSession || activeSession)!.cwd} - worktreeBranch={(createPRSession || activeSession)!.worktreeBranch || (createPRSession || activeSession)!.gitBranches?.[0] || 'main'} - availableBranches={(createPRSession || activeSession)!.gitBranches || ['main', 'master']} - onPRCreated={async (prDetails: PRDetails) => { - const session = createPRSession || activeSession; - addToast({ - type: 'success', - title: 'Pull Request Created', - message: prDetails.title, - actionUrl: prDetails.url, - actionLabel: prDetails.url, - }); - // Add history entry with PR details - if (session) { - await window.maestro.history.add({ - id: generateId(), - type: 'USER', - timestamp: Date.now(), - summary: `Created PR: ${prDetails.title}`, - fullResponse: [ - `**Pull Request:** [${prDetails.title}](${prDetails.url})`, - `**Branch:** ${prDetails.sourceBranch} → ${prDetails.targetBranch}`, - prDetails.description ? `**Description:** ${prDetails.description}` : '', - ].filter(Boolean).join('\n\n'), - projectPath: session.projectRoot || session.cwd, - sessionId: session.id, - sessionName: session.name, - }); - rightPanelRef.current?.refreshHistoryPanel(); - } - setCreatePRSession(null); - }} - /> - )} + return ( + +
- {/* --- DELETE WORKTREE MODAL --- */} - {deleteWorktreeModalOpen && deleteWorktreeSession && ( - { - setDeleteWorktreeModalOpen(false); - setDeleteWorktreeSession(null); - }} - onConfirm={() => { - // Remove the session but keep the worktree on disk - setSessions(prev => prev.filter(s => s.id !== deleteWorktreeSession.id)); - }} - onConfirmAndDelete={async () => { - // Remove the session AND delete the worktree from disk - const result = await window.maestro.git.removeWorktree(deleteWorktreeSession.cwd, true); - if (!result.success) { - throw new Error(result.error || 'Failed to remove worktree'); - } - setSessions(prev => prev.filter(s => s.id !== deleteWorktreeSession.id)); - }} - /> + {/* Image Drop Overlay */} + {isDraggingImage && ( +
+
+ + + + + Drop image to attach + +
+
)} - {/* --- FIRST RUN CELEBRATION OVERLAY --- */} - {firstRunCelebrationData && ( - setFirstRunCelebrationData(null)} - onOpenLeaderboardRegistration={() => setLeaderboardRegistrationOpen(true)} - isLeaderboardRegistered={isLeaderboardRegistered} - /> + {/* --- DRAGGABLE TITLE BAR (hidden in mobile landscape) --- */} + {!isMobileLandscape && ( +
+ {activeGroupChatId ? ( + + Maestro Group Chat: {groupChats.find(c => c.id === activeGroupChatId)?.name || 'Unknown'} + + ) : activeSession && ( + + {(() => { + const parts: string[] = []; + // Group name (if grouped) + const group = groups.find(g => g.id === activeSession.groupId); + if (group) { + parts.push(`${group.emoji} ${group.name}`); + } + // Agent name (user-given name for this agent instance) + parts.push(activeSession.name); + // Active tab name or UUID octet + const activeTab = activeSession.aiTabs?.find(t => t.id === activeSession.activeTabId); + if (activeTab) { + const tabLabel = activeTab.name || + (activeTab.agentSessionId ? activeTab.agentSessionId.split('-')[0].toUpperCase() : null); + if (tabLabel) { + parts.push(tabLabel); + } + } + return parts.join(' | '); + })()} + + )} +
)} - {/* --- KEYBOARD MASTERY CELEBRATION OVERLAY --- */} - {pendingKeyboardMasteryLevel !== null && ( - - )} + {/* --- UNIFIED MODALS (all modal groups consolidated into AppModals) --- */} + c.id === activeGroupChatId)?.draftMessage || '') + : inputValue} + onPromptComposerSubmit={handlePromptComposerSubmit} + onPromptComposerSend={handlePromptComposerSend} + promptComposerSessionName={activeGroupChatId + ? groupChats.find(c => c.id === activeGroupChatId)?.name + : activeSession?.name} + promptComposerStagedImages={activeGroupChatId ? groupChatStagedImages : (canAttachImages ? stagedImages : [])} + setPromptComposerStagedImages={activeGroupChatId ? setGroupChatStagedImages : (canAttachImages ? setStagedImages : undefined)} + onPromptImageAttachBlocked={activeGroupChatId || !blockCodexResumeImages ? undefined : showImageAttachBlockedNotice} + onPromptOpenLightbox={handleSetLightboxImage} + promptTabSaveToHistory={activeGroupChatId ? false : (activeSession ? getActiveTab(activeSession)?.saveToHistory ?? false : false)} + onPromptToggleTabSaveToHistory={activeGroupChatId ? undefined : handlePromptToggleTabSaveToHistory} + promptTabReadOnlyMode={activeGroupChatId ? groupChatReadOnlyMode : (activeSession ? getActiveTab(activeSession)?.readOnlyMode ?? false : false)} + onPromptToggleTabReadOnlyMode={handlePromptToggleTabReadOnlyMode} + promptTabShowThinking={activeGroupChatId ? false : (activeSession ? getActiveTab(activeSession)?.showThinking ?? false : false)} + onPromptToggleTabShowThinking={activeGroupChatId ? undefined : handlePromptToggleTabShowThinking} + promptSupportsThinking={!activeGroupChatId && hasActiveSessionCapability('supportsThinkingDisplay')} + promptEnterToSend={enterToSendAI} + onPromptToggleEnterToSend={handlePromptToggleEnterToSend} + queueBrowserOpen={queueBrowserOpen} + onCloseQueueBrowser={handleCloseQueueBrowser} + onRemoveQueueItem={handleRemoveQueueItem} + onSwitchQueueSession={handleSwitchQueueSession} + onReorderQueueItems={handleReorderQueueItems} + // AppGroupChatModals props + showNewGroupChatModal={showNewGroupChatModal} + onCloseNewGroupChatModal={handleCloseNewGroupChatModal} + onCreateGroupChat={handleCreateGroupChat} + showDeleteGroupChatModal={showDeleteGroupChatModal} + onCloseDeleteGroupChatModal={handleCloseDeleteGroupChatModal} + onConfirmDeleteGroupChat={handleConfirmDeleteGroupChat} + showRenameGroupChatModal={showRenameGroupChatModal} + onCloseRenameGroupChatModal={handleCloseRenameGroupChatModal} + onRenameGroupChatFromModal={handleRenameGroupChatFromModal} + showEditGroupChatModal={showEditGroupChatModal} + onCloseEditGroupChatModal={handleCloseEditGroupChatModal} + onUpdateGroupChat={handleUpdateGroupChat} + showGroupChatInfo={showGroupChatInfo} + groupChatMessages={groupChatMessages} + onCloseGroupChatInfo={handleCloseGroupChatInfo} + onOpenModeratorSession={handleOpenModeratorSession} + // AppAgentModals props + leaderboardRegistrationOpen={leaderboardRegistrationOpen} + onCloseLeaderboardRegistration={handleCloseLeaderboardRegistration} + leaderboardRegistration={leaderboardRegistration} + onSaveLeaderboardRegistration={handleSaveLeaderboardRegistration} + onLeaderboardOptOut={handleLeaderboardOptOut} + errorSession={errorSession} + recoveryActions={recoveryActions} + onDismissAgentError={handleCloseAgentErrorModal} + groupChatError={groupChatError} + groupChatRecoveryActions={groupChatRecoveryActions} + onClearGroupChatError={handleClearGroupChatError} + mergeSessionModalOpen={mergeSessionModalOpen} + onCloseMergeSession={handleCloseMergeSession} + onMerge={handleMerge} + transferState={transferState} + transferProgress={transferProgress} + transferSourceAgent={transferSourceAgent} + transferTargetAgent={transferTargetAgent} + onCancelTransfer={handleCancelTransfer} + onCompleteTransfer={handleCompleteTransfer} + sendToAgentModalOpen={sendToAgentModalOpen} + onCloseSendToAgent={handleCloseSendToAgent} + onSendToAgent={handleSendToAgent} + /> - {/* --- STANDING OVATION OVERLAY --- */} - {standingOvationData && ( - { - // Mark badge as acknowledged when user clicks "Take a Bow" - acknowledgeBadge(standingOvationData.badge.level); - setStandingOvationData(null); - }} - onOpenLeaderboardRegistration={() => setLeaderboardRegistrationOpen(true)} - isLeaderboardRegistered={isLeaderboardRegistered} - /> - )} + {/* --- DEBUG PACKAGE MODAL --- */} + - {/* --- PROCESS MONITOR --- */} - {processMonitorOpen && ( - setProcessMonitorOpen(false)} - onNavigateToSession={(sessionId, tabId) => { - setActiveSessionId(sessionId); - if (tabId) { - // Switch to the specific tab within the session - setSessions(prev => prev.map(s => - s.id === sessionId ? { ...s, activeTabId: tabId } : s - )); - } - }} - onNavigateToGroupChat={(groupChatId) => { - // Restore state for this group chat when navigating from ProcessMonitor - setActiveGroupChatId(groupChatId); - setGroupChatState(groupChatStates.get(groupChatId) ?? 'idle'); - setParticipantStates(allGroupChatParticipantStates.get(groupChatId) ?? new Map()); - setProcessMonitorOpen(false); - }} - /> - )} + {/* --- CELEBRATION OVERLAYS --- */} + {/* --- DEVELOPER PLAYGROUND --- */} {playgroundOpen && ( @@ -8053,185 +8370,7 @@ export default function MaestroConsole() { onClose={() => setDebugWizardModalOpen(false)} /> - {/* --- GROUP CHAT MODALS --- */} - {showNewGroupChatModal && ( - setShowNewGroupChatModal(false)} - onCreate={handleCreateGroupChat} - /> - )} - - {showDeleteGroupChatModal && ( - c.id === showDeleteGroupChatModal)?.name || ''} - onClose={() => setShowDeleteGroupChatModal(null)} - onConfirm={() => handleDeleteGroupChat(showDeleteGroupChatModal)} - /> - )} - - {showRenameGroupChatModal && ( - c.id === showRenameGroupChatModal)?.name || ''} - onClose={() => setShowRenameGroupChatModal(null)} - onRename={(newName) => handleRenameGroupChat(showRenameGroupChatModal, newName)} - /> - )} - - {showEditGroupChatModal && ( - c.id === showEditGroupChatModal) || null} - onClose={() => setShowEditGroupChatModal(null)} - onSave={handleUpdateGroupChat} - /> - )} - - {showGroupChatInfo && activeGroupChatId && groupChats.find(c => c.id === activeGroupChatId) && ( - c.id === activeGroupChatId)!} - messages={groupChatMessages} - onClose={() => setShowGroupChatInfo(false)} - onOpenModeratorSession={handleOpenModeratorSession} - /> - )} - - {/* --- CREATE GROUP MODAL --- */} - {createGroupModalOpen && ( - { - setCreateGroupModalOpen(false); - }} - groups={groups} - setGroups={setGroups} - /> - )} - - {/* --- CONFIRMATION MODAL --- */} - {confirmModalOpen && ( - setConfirmModalOpen(false)} - /> - )} - - {/* --- QUIT CONFIRMATION MODAL --- */} - {quitConfirmModalOpen && (() => { - // Get busy agent info for display - const busyAgents = sessions.filter( - s => s.state === 'busy' && s.busySource === 'ai' && s.toolType !== 'terminal' - ); - return ( - s.name)} - onConfirmQuit={() => { - setQuitConfirmModalOpen(false); - window.maestro.app.confirmQuit(); - }} - onCancel={() => { - setQuitConfirmModalOpen(false); - window.maestro.app.cancelQuit(); - }} - /> - ); - })()} - - {/* --- RENAME INSTANCE MODAL --- */} - {renameInstanceModalOpen && ( - { - setRenameInstanceModalOpen(false); - setRenameInstanceSessionId(null); - }} - sessions={sessions} - setSessions={setSessions} - activeSessionId={activeSessionId} - targetSessionId={renameInstanceSessionId || undefined} - onAfterRename={flushSessionPersistence} - /> - )} - - {/* --- RENAME TAB MODAL --- */} - {renameTabModalOpen && renameTabId && ( - t.id === renameTabId)?.agentSessionId} - onClose={() => { - setRenameTabModalOpen(false); - setRenameTabId(null); - }} - onRename={(newName: string) => { - if (!activeSession || !renameTabId) return; - setSessions(prev => prev.map(s => { - if (s.id !== activeSession.id) return s; - // Find the tab to get its agentSessionId for persistence - const tab = s.aiTabs.find(t => t.id === renameTabId); - if (tab?.agentSessionId) { - // Persist name to agent session metadata (async, fire and forget) - // Use projectRoot (not cwd) for consistent session storage access - const agentId = s.toolType || 'claude-code'; - if (agentId === 'claude-code') { - window.maestro.claude.updateSessionName( - s.projectRoot, - tab.agentSessionId, - newName || '' - ).catch(err => console.error('Failed to persist tab name:', err)); - } else { - window.maestro.agentSessions.setSessionName( - agentId, - s.projectRoot, - tab.agentSessionId, - newName || null - ).catch(err => console.error('Failed to persist tab name:', err)); - } - // Also update past history entries with this agentSessionId - window.maestro.history.updateSessionName( - tab.agentSessionId, - newName || '' - ).catch(err => console.error('Failed to update history session names:', err)); - } - return { - ...s, - aiTabs: s.aiTabs.map(tab => - tab.id === renameTabId ? { ...tab, name: newName || null } : tab - ) - }; - })); - }} - /> - )} - - {/* --- RENAME GROUP MODAL --- */} - {renameGroupModalOpen && renameGroupId && ( - setRenameGroupModalOpen(false)} - groups={groups} - setGroups={setGroups} - /> - )} + {/* NOTE: All modals are now rendered via the unified component above */} {/* --- EMPTY STATE VIEW (when no sessions) --- */} {sessions.length === 0 && !isMobileLandscape ? ( @@ -8367,16 +8506,11 @@ export default function MaestroConsole() {
setLogViewerOpen(false)} + onClose={handleCloseLogViewer} logLevel={logLevel} savedSelectedLevels={logViewerSelectedLevels} onSelectedLevelsChange={setLogViewerSelectedLevels} - onShortcutUsed={(shortcutId: string) => { - const result = recordShortcutUsage(shortcutId); - if (result.newLevel !== null) { - onKeyboardMasteryLevelUp(result.newLevel); - } - }} + onShortcutUsed={handleLogViewerShortcutUsed} />
)} @@ -8506,23 +8640,8 @@ export default function MaestroConsole() { setLogViewerOpen={setLogViewerOpen} setAgentSessionsOpen={setAgentSessionsOpen} setActiveAgentSessionId={setActiveAgentSessionId} - onResumeAgentSession={(agentSessionId: string, messages: LogEntry[], sessionName?: string, starred?: boolean, usageStats?: UsageStats) => { - // Opens the Claude session as a new tab (or switches to existing tab if duplicate) - handleResumeSession(agentSessionId, messages, sessionName, starred, usageStats); - }} - onNewAgentSession={() => { - // Create a fresh AI tab - if (activeSession) { - setSessions(prev => prev.map(s => { - if (s.id !== activeSession.id) return s; - const result = createTab(s, { saveToHistory: defaultSaveToHistory, showThinking: defaultShowThinking }); - if (!result) return s; - return result.session; - })); - setActiveAgentSessionId(null); - } - setAgentSessionsOpen(false); - }} + onResumeAgentSession={handleResumeSession} + onNewAgentSession={handleNewAgentSession} setActiveFocus={setActiveFocus} setOutputSearchOpen={setOutputSearchOpen} setOutputSearchQuery={setOutputSearchQuery} @@ -8679,47 +8798,13 @@ export default function MaestroConsole() { return nextUserCommandIndex; }} - onRemoveQueuedItem={(itemId: string) => { - if (!activeSession) return; - setSessions(prev => prev.map(s => { - if (s.id !== activeSession.id) return s; - return { - ...s, - executionQueue: s.executionQueue.filter(item => item.id !== itemId) - }; - })); - }} - onOpenQueueBrowser={() => setQueueBrowserOpen(true)} + onRemoveQueuedItem={handleRemoveQueuedItem} + onOpenQueueBrowser={handleOpenQueueBrowser} audioFeedbackCommand={audioFeedbackCommand} - // Tab management handlers - onTabSelect={(tabId: string) => { - if (!activeSession) return; - // Use functional setState to compute new session from fresh state (avoids stale closure issues) - setSessions(prev => prev.map(s => { - if (s.id !== activeSession.id) return s; - const result = setActiveTab(s, tabId); // Use 's' from prev, not stale 'activeSession' - return result ? result.session : s; - })); - }} - onTabClose={(tabId: string) => { - if (!activeSession) return; - // Use functional setState to compute from fresh state (avoids stale closure issues) - setSessions(prev => prev.map(s => { - if (s.id !== activeSession.id) return s; - const result = closeTab(s, tabId, showUnreadOnly); - return result ? result.session : s; - })); - }} - onNewTab={() => { - if (!activeSession) return; - // Use functional setState to compute from fresh state (avoids stale closure issues) - setSessions(prev => prev.map(s => { - if (s.id !== activeSession.id) return s; - const result = createTab(s, { saveToHistory: defaultSaveToHistory, showThinking: defaultShowThinking }); - if (!result) return s; - return result.session; - })); - }} + // Tab management handlers (memoized for performance) + onTabSelect={handleTabSelect} + onTabClose={handleTabClose} + onNewTab={handleNewTab} onRequestTabRename={(tabId: string) => { if (!activeSession) return; const tab = activeSession.aiTabs?.find(t => t.id === tabId); @@ -9020,6 +9105,28 @@ export default function MaestroConsole() { } setSendToAgentModalOpen(true); }} + onCopyContext={(tabId: string) => { + // Copy tab conversation context to clipboard + if (!activeSession) return; + const tab = activeSession.aiTabs.find(t => t.id === tabId); + if (!tab || !tab.logs || tab.logs.length === 0) return; + + const text = formatLogsForClipboard(tab.logs); + navigator.clipboard.writeText(text).then(() => { + addToast({ + type: 'success', + title: 'Context Copied', + message: 'Conversation copied to clipboard.', + }); + }).catch((err) => { + console.error('Failed to copy context:', err); + addToast({ + type: 'error', + title: 'Copy Failed', + message: 'Failed to copy context to clipboard.', + }); + }); + }} // Context warning sash settings (Phase 6) contextWarningsEnabled={contextManagementSettings.contextWarningsEnabled} contextWarningYellowThreshold={contextManagementSettings.contextWarningYellowThreshold} @@ -9156,251 +9263,8 @@ export default function MaestroConsole() { )} - {/* --- AUTO RUN SETUP MODAL --- */} - {autoRunSetupModalOpen && ( - setAutoRunSetupModalOpen(false)} - onFolderSelected={handleAutoRunFolderSelected} - currentFolder={activeSession?.autoRunFolderPath} - sessionName={activeSession?.name} - /> - )} - - {/* --- BATCH RUNNER MODAL --- */} - {batchRunnerModalOpen && activeSession && activeSession.autoRunFolderPath && ( - setBatchRunnerModalOpen(false)} - onGo={handleStartBatchRun} - onSave={(prompt) => { - // Save the custom prompt and modification timestamp to the session (persisted across restarts) - setSessions(prev => prev.map(s => - s.id === activeSession.id ? { ...s, batchRunnerPrompt: prompt, batchRunnerPromptModifiedAt: Date.now() } : s - )); - }} - initialPrompt={activeSession.batchRunnerPrompt || ''} - lastModifiedAt={activeSession.batchRunnerPromptModifiedAt} - showConfirmation={showConfirmation} - folderPath={activeSession.autoRunFolderPath} - currentDocument={activeSession.autoRunSelectedFile || ''} - allDocuments={autoRunDocumentList} - documentTree={autoRunDocumentTree} - getDocumentTaskCount={getDocumentTaskCount} - onRefreshDocuments={handleAutoRunRefresh} - sessionId={activeSession.id} - /> - )} - - {/* --- TAB SWITCHER MODAL --- */} - {tabSwitcherOpen && activeSession?.aiTabs && ( - { - setSessions(prev => prev.map(s => - s.id === activeSession.id ? { ...s, activeTabId: tabId } : s - )); - }} - onNamedSessionSelect={(agentSessionId, _projectPath, sessionName, starred) => { - // Open a closed named session as a new tab - use handleResumeSession to properly load messages - handleResumeSession(agentSessionId, [], sessionName, starred); - // Focus input so user can start interacting immediately - setActiveFocus('main'); - setTimeout(() => inputRef.current?.focus(), 50); - }} - onClose={() => setTabSwitcherOpen(false)} - /> - )} - - {/* --- FUZZY FILE SEARCH MODAL --- */} - {fuzzyFileSearchOpen && activeSession && ( - { - // Preview the file directly (handleFileClick expects relative path) - if (!file.isFolder) { - handleFileClick({ name: file.name, type: 'file' }, file.fullPath); - } - }} - onClose={() => setFuzzyFileSearchOpen(false)} - /> - )} - - {/* --- PROMPT COMPOSER MODAL --- */} - { - setPromptComposerOpen(false); - setTimeout(() => inputRef.current?.focus(), 0); - }} - theme={theme} - initialValue={activeGroupChatId - ? (groupChats.find(c => c.id === activeGroupChatId)?.draftMessage || '') - : inputValue - } - onSubmit={(value) => { - if (activeGroupChatId) { - // Update group chat draft - setGroupChats(prev => prev.map(c => - c.id === activeGroupChatId ? { ...c, draftMessage: value } : c - )); - } else { - setInputValue(value); - } - }} - onSend={(value) => { - if (activeGroupChatId) { - // Send to group chat - handleSendGroupChatMessage(value, groupChatStagedImages.length > 0 ? groupChatStagedImages : undefined, groupChatReadOnlyMode); - setGroupChatStagedImages([]); - // Clear draft - setGroupChats(prev => prev.map(c => - c.id === activeGroupChatId ? { ...c, draftMessage: '' } : c - )); - } else { - // Set the input value and trigger send - setInputValue(value); - // Use setTimeout to ensure state updates before processing - setTimeout(() => processInput(value), 0); - } - }} - sessionName={activeGroupChatId - ? groupChats.find(c => c.id === activeGroupChatId)?.name - : activeSession?.name - } - // Image attachment props - context-aware - stagedImages={activeGroupChatId ? groupChatStagedImages : (canAttachImages ? stagedImages : [])} - setStagedImages={activeGroupChatId ? setGroupChatStagedImages : (canAttachImages ? setStagedImages : undefined)} - onImageAttachBlocked={activeGroupChatId || !blockCodexResumeImages ? undefined : showImageAttachBlockedNotice} - onOpenLightbox={handleSetLightboxImage} - // Bottom bar toggles - context-aware (History not applicable for group chat) - tabSaveToHistory={activeGroupChatId ? false : (activeSession ? getActiveTab(activeSession)?.saveToHistory ?? false : false)} - onToggleTabSaveToHistory={activeGroupChatId ? undefined : () => { - if (!activeSession) return; - const activeTab = getActiveTab(activeSession); - if (!activeTab) return; - setSessions(prev => prev.map(s => { - if (s.id !== activeSession.id) return s; - return { - ...s, - aiTabs: s.aiTabs.map(tab => - tab.id === activeTab.id ? { ...tab, saveToHistory: !tab.saveToHistory } : tab - ) - }; - })); - }} - tabReadOnlyMode={activeGroupChatId ? groupChatReadOnlyMode : (activeSession ? getActiveTab(activeSession)?.readOnlyMode ?? false : false)} - onToggleTabReadOnlyMode={activeGroupChatId - ? () => setGroupChatReadOnlyMode(!groupChatReadOnlyMode) - : () => { - if (!activeSession) return; - const activeTab = getActiveTab(activeSession); - if (!activeTab) return; - setSessions(prev => prev.map(s => { - if (s.id !== activeSession.id) return s; - return { - ...s, - aiTabs: s.aiTabs.map(tab => - tab.id === activeTab.id ? { ...tab, readOnlyMode: !tab.readOnlyMode } : tab - ) - }; - })); - } - } - tabShowThinking={activeGroupChatId ? false : (activeSession ? getActiveTab(activeSession)?.showThinking ?? false : false)} - onToggleTabShowThinking={activeGroupChatId ? undefined : () => { - if (!activeSession) return; - const activeTab = getActiveTab(activeSession); - if (!activeTab) return; - setSessions(prev => prev.map(s => { - if (s.id !== activeSession.id) return s; - return { - ...s, - aiTabs: s.aiTabs.map(tab => { - if (tab.id !== activeTab.id) return tab; - if (tab.showThinking) { - // Turn off - clear thinking logs - return { - ...tab, - showThinking: false, - logs: tab.logs.filter(log => log.source !== 'thinking'), - }; - } - return { ...tab, showThinking: true }; - }) - }; - })); - }} - supportsThinking={!activeGroupChatId && hasActiveSessionCapability('supportsThinkingDisplay')} - enterToSend={enterToSendAI} - onToggleEnterToSend={() => setEnterToSendAI(!enterToSendAI)} - /> - - {/* --- EXECUTION QUEUE BROWSER --- */} - setQueueBrowserOpen(false)} - sessions={sessions} - activeSessionId={activeSessionId} - theme={theme} - onRemoveItem={(sessionId, itemId) => { - setSessions(prev => prev.map(s => { - if (s.id !== sessionId) return s; - return { - ...s, - executionQueue: s.executionQueue.filter(item => item.id !== itemId) - }; - })); - }} - onSwitchSession={(sessionId) => { - setActiveSessionId(sessionId); - }} - onReorderItems={(sessionId, fromIndex, toIndex) => { - setSessions(prev => prev.map(s => { - if (s.id !== sessionId) return s; - const queue = [...s.executionQueue]; - const [removed] = queue.splice(fromIndex, 1); - queue.splice(toIndex, 0, removed); - return { ...s, executionQueue: queue }; - })); - }} - /> - {/* Old settings modal removed - using new SettingsModal component below */} - - {/* --- NEW INSTANCE MODAL --- */} - setNewInstanceModalOpen(false)} - onCreate={createNewSession} - theme={theme} - existingSessions={sessionsForValidation} - /> - - {/* --- EDIT AGENT MODAL --- */} - { - setEditAgentModalOpen(false); - setEditAgentSession(null); - }} - onSave={(sessionId, name, nudgeMessage, customPath, customArgs, customEnvVars, customModel, customContextWindow) => { - setSessions(prev => prev.map(s => { - if (s.id !== sessionId) return s; - return { ...s, name, nudgeMessage, customPath, customArgs, customEnvVars, customModel, customContextWindow }; - })); - }} - theme={theme} - session={editAgentSession} - existingSessions={sessionsForValidation} - /> + {/* NOTE: NewInstanceModal and EditAgentModal are now rendered via AppSessionModals */} {/* --- SETTINGS MODAL (New Component) --- */} ); } + +/** + * MaestroConsole - Main application component with context providers + * + * Wraps MaestroConsoleInner with context providers for centralized state management. + * Phase 3: InputProvider - centralized input state management + * Phase 4: GroupChatProvider - centralized group chat state management + * Phase 5: AutoRunProvider - centralized Auto Run and batch processing state management + * Phase 6: SessionProvider - centralized session and group state management + * See refactor-details-2.md for full plan. + */ +export default function MaestroConsole() { + return ( + + + + + + + + + + ); +} diff --git a/src/renderer/components/AICommandsPanel.tsx b/src/renderer/components/AICommandsPanel.tsx index b1e9f49fc..d6d44bec7 100644 --- a/src/renderer/components/AICommandsPanel.tsx +++ b/src/renderer/components/AICommandsPanel.tsx @@ -1,8 +1,8 @@ import React, { useState, useRef } from 'react'; -import { Plus, Trash2, Edit2, Save, X, Terminal, Lock, ChevronDown, ChevronRight, Variable, RotateCcw } from 'lucide-react'; +import { Plus, Trash2, Edit2, Save, X, Terminal, Lock, ChevronDown, ChevronRight, Variable } from 'lucide-react'; import type { Theme, CustomAICommand } from '../types'; import { TEMPLATE_VARIABLES_GENERAL } from '../utils/templateVariables'; -import { useTemplateAutocomplete } from '../hooks/useTemplateAutocomplete'; +import { useTemplateAutocomplete } from '../hooks'; import { TemplateAutocompleteDropdown } from './TemplateAutocompleteDropdown'; interface AICommandsPanelProps { diff --git a/src/renderer/components/AboutModal.tsx b/src/renderer/components/AboutModal.tsx index e1cbe445c..acdbb6cfa 100644 --- a/src/renderer/components/AboutModal.tsx +++ b/src/renderer/components/AboutModal.tsx @@ -1,6 +1,6 @@ import React, { useEffect, useRef, useState, useCallback } from 'react'; -import { X, Wand2, ExternalLink, FileCode, BarChart3, Loader2, Trophy, Globe, Check } from 'lucide-react'; -import type { Theme, Session, AutoRunStats } from '../types'; +import { X, Wand2, ExternalLink, FileCode, BarChart3, Loader2, Trophy, Globe, Check, BookOpen } from 'lucide-react'; +import type { Theme, Session, AutoRunStats, MaestroUsageStats } from '../types'; import { MODAL_PRIORITIES } from '../constants/modalPriorities'; import pedramAvatar from '../assets/pedram-avatar.png'; import { AchievementCard } from './AchievementCard'; @@ -34,12 +34,13 @@ interface AboutModalProps { theme: Theme; sessions: Session[]; autoRunStats: AutoRunStats; + usageStats?: MaestroUsageStats | null; onClose: () => void; onOpenLeaderboardRegistration?: () => void; isLeaderboardRegistered?: boolean; } -export function AboutModal({ theme, sessions, autoRunStats, onClose, onOpenLeaderboardRegistration, isLeaderboardRegistered }: AboutModalProps) { +export function AboutModal({ theme, sessions, autoRunStats, usageStats, onClose, onOpenLeaderboardRegistration, isLeaderboardRegistered }: AboutModalProps) { const [globalStats, setGlobalStats] = useState(null); const [loading, setLoading] = useState(true); const [isStatsComplete, setIsStatsComplete] = useState(false); @@ -139,6 +140,14 @@ export function AboutModal({ theme, sessions, autoRunStats, onClose, onOpenLeade +
+ )} {taskCounts.total > 0 && ( {taskCounts.completed} of {taskCounts.total} task{taskCounts.total !== 1 ? 's' : ''} completed @@ -1704,6 +1761,17 @@ const AutoRunInner = forwardRef(function AutoRunInn /> )} + {/* Reset Tasks Confirmation Modal */} + {resetTasksModalOpen && selectedFile && ( + setResetTasksModalOpen(false)} + /> + )} + {/* Lightbox for viewing images with navigation, copy, and delete */} { + const _getDisplayName = (path: string) => { const parts = path.split('/'); return parts[parts.length - 1]; }; diff --git a/src/renderer/components/AutoRunExpandedModal.tsx b/src/renderer/components/AutoRunExpandedModal.tsx index feee77cfa..244b5fedb 100644 --- a/src/renderer/components/AutoRunExpandedModal.tsx +++ b/src/renderer/components/AutoRunExpandedModal.tsx @@ -1,6 +1,6 @@ import { useEffect, useRef, useCallback, useState } from 'react'; import { createPortal } from 'react-dom'; -import { X, Minimize2, Eye, Edit, Play, Square, Loader2, Image, Save, RotateCcw } from 'lucide-react'; +import { X, Minimize2, Eye, Edit, Play, Square, Loader2, Save, RotateCcw } from 'lucide-react'; import type { Theme, BatchRunState, SessionState, Shortcut } from '../types'; import { useLayerStack } from '../contexts/LayerStackContext'; import { MODAL_PRIORITIES } from '../constants/modalPriorities'; @@ -309,13 +309,14 @@ export function AutoRunExpandedModal({ {/* Run / Stop button */} {isLocked ? (
diff --git a/src/renderer/components/BatchRunnerModal.tsx b/src/renderer/components/BatchRunnerModal.tsx index 1efa05792..13987bfbb 100644 --- a/src/renderer/components/BatchRunnerModal.tsx +++ b/src/renderer/components/BatchRunnerModal.tsx @@ -41,13 +41,6 @@ interface BatchRunnerModalProps { sessionId: string; } -// Helper function to count unchecked tasks in scratchpad content -function countUncheckedTasks(content: string): number { - if (!content) return 0; - const matches = content.match(/^-\s*\[\s*\]/gm); - return matches ? matches.length : 0; -} - // Helper function to format the last modified date function formatLastModified(timestamp: number): string { const date = new Date(timestamp); @@ -200,7 +193,7 @@ export function BatchRunnerModal(props: BatchRunnerModalProps) { // Count missing documents for warning display const missingDocCount = documents.filter(doc => doc.isMissing).length; - const hasMissingDocs = missingDocCount > 0; + const _hasMissingDocs = missingDocCount > 0; // Register layer on mount useEffect(() => { @@ -227,6 +220,7 @@ export function BatchRunnerModal(props: BatchRunnerModalProps) { unregisterLayer(layerIdRef.current); } }; + }, [registerLayer, unregisterLayer, showSavePlaybookModal, showDeleteConfirmModal, handleCancelDeletePlaybook]); // Update handler when dependencies change @@ -242,6 +236,7 @@ export function BatchRunnerModal(props: BatchRunnerModalProps) { } }); } + }, [onClose, updateLayerHandler, showSavePlaybookModal, showDeleteConfirmModal, handleCancelDeletePlaybook]); // Focus textarea on mount diff --git a/src/renderer/components/ContextWarningSash.tsx b/src/renderer/components/ContextWarningSash.tsx index 8edf778c5..b053e17a7 100644 --- a/src/renderer/components/ContextWarningSash.tsx +++ b/src/renderer/components/ContextWarningSash.tsx @@ -24,7 +24,7 @@ export interface ContextWarningSashProps { * - Dismiss button that hides the warning until usage increases 10%+ or crosses threshold */ export function ContextWarningSash({ - theme, + theme: _theme, contextUsage, yellowThreshold, redThreshold, diff --git a/src/renderer/components/CreatePRModal.tsx b/src/renderer/components/CreatePRModal.tsx index 2fb4c52c6..8d47aeee7 100644 --- a/src/renderer/components/CreatePRModal.tsx +++ b/src/renderer/components/CreatePRModal.tsx @@ -146,7 +146,7 @@ export function CreatePRModal({ try { const status = await window.maestro.git.checkGhCli(); setGhCliStatus(status); - } catch (err) { + } catch { setGhCliStatus({ installed: false, authenticated: false }); } }; @@ -157,7 +157,7 @@ export function CreatePRModal({ const lines = result.stdout.trim().split('\n').filter((line: string) => line.length > 0); setUncommittedCount(lines.length); setHasUncommittedChanges(lines.length > 0); - } catch (err) { + } catch { setHasUncommittedChanges(false); setUncommittedCount(0); } diff --git a/src/renderer/components/CustomThemeBuilder.tsx b/src/renderer/components/CustomThemeBuilder.tsx index 8385d53fd..5debffcf5 100644 --- a/src/renderer/components/CustomThemeBuilder.tsx +++ b/src/renderer/components/CustomThemeBuilder.tsx @@ -354,7 +354,7 @@ export function CustomThemeBuilder({ } else { onImportError?.('Invalid theme file: missing colors object'); } - } catch (err) { + } catch { onImportError?.('Failed to parse theme file: invalid JSON format'); } }; diff --git a/src/renderer/components/DebugPackageModal.tsx b/src/renderer/components/DebugPackageModal.tsx index f612cc692..426637411 100644 --- a/src/renderer/components/DebugPackageModal.tsx +++ b/src/renderer/components/DebugPackageModal.tsx @@ -9,7 +9,7 @@ */ import React, { useState, useEffect, useRef, useCallback } from 'react'; -import { Package, Check, X, Loader2, FolderOpen, AlertCircle, Copy } from 'lucide-react'; +import { Package, Check, Loader2, FolderOpen, AlertCircle, Copy } from 'lucide-react'; import type { Theme } from '../types'; import { MODAL_PRIORITIES } from '../constants/modalPriorities'; import { Modal, ModalFooter } from './ui/Modal'; diff --git a/src/renderer/components/DeleteWorktreeModal.tsx b/src/renderer/components/DeleteWorktreeModal.tsx index 7cfeada52..b95a21431 100644 --- a/src/renderer/components/DeleteWorktreeModal.tsx +++ b/src/renderer/components/DeleteWorktreeModal.tsx @@ -51,7 +51,7 @@ export function DeleteWorktreeModal({ return ( { - const countBefore = allDocuments.length; + const _countBefore = allDocuments.length; setRefreshing(true); setRefreshMessage(null); @@ -341,7 +341,7 @@ function DocumentSelectorModal({ }; const allSelected = selectedDocs.size === allDocuments.length && allDocuments.length > 0; - const someSelected = selectedDocs.size > 0; + const _someSelected = selectedDocs.size > 0; // Calculate task count for selected documents const selectedTaskCount = useMemo(() => { diff --git a/src/renderer/components/FileExplorerPanel.tsx b/src/renderer/components/FileExplorerPanel.tsx index 6d66609fd..807a43102 100644 --- a/src/renderer/components/FileExplorerPanel.tsx +++ b/src/renderer/components/FileExplorerPanel.tsx @@ -197,6 +197,7 @@ export function FileExplorerPanel(props: FileExplorerPanelProps) { layerIdRef.current = id; return () => unregisterLayer(id); } + }, [fileTreeFilterOpen, registerLayer, unregisterLayer]); // Update handler when dependencies change @@ -346,6 +347,7 @@ export function FileExplorerPanel(props: FileExplorerPanelProps) { )} ); + }, [session.fullPath, session.changedFiles, session.fileExplorerExpanded, session.id, previewFile?.path, activeFocus, activeRightTab, selectedFileIndex, theme, toggleFolder, setSessions, setSelectedFileIndex, setActiveFocus, handleFileClick, fileTreeFilter]); return ( diff --git a/src/renderer/components/FilePreview.tsx b/src/renderer/components/FilePreview.tsx index 12595e197..c87caa13b 100644 --- a/src/renderer/components/FilePreview.tsx +++ b/src/renderer/components/FilePreview.tsx @@ -2,9 +2,10 @@ import React, { useState, useRef, useEffect, useMemo, useCallback } from 'react' import ReactMarkdown from 'react-markdown'; import remarkGfm from 'remark-gfm'; import rehypeRaw from 'rehype-raw'; +import rehypeSlug from 'rehype-slug'; import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'; import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism'; -import { FileCode, X, Copy, FileText, Eye, ChevronUp, ChevronDown, ChevronLeft, ChevronRight, Clipboard, Loader2, Image, Globe, Save, Edit, FolderOpen, AlertTriangle } from 'lucide-react'; +import { FileCode, X, Eye, ChevronUp, ChevronDown, ChevronLeft, ChevronRight, Clipboard, Loader2, Image, Globe, Save, Edit, FolderOpen, AlertTriangle } from 'lucide-react'; import { visit } from 'unist-util-visit'; import { useLayerStack } from '../contexts/LayerStackContext'; import { MODAL_PRIORITIES } from '../constants/modalPriorities'; @@ -843,7 +844,7 @@ export function FilePreview({ file, onClose, theme, markdownEditMode, setMarkdow new ClipboardItem({ [blob.type]: blob }) ]); setCopyNotificationMessage('Image Copied to Clipboard'); - } catch (err) { + } catch { // Fallback: copy the data URL if image copy fails navigator.clipboard.writeText(file.content); setCopyNotificationMessage('Image URL Copied to Clipboard'); @@ -1534,15 +1535,19 @@ export function FilePreview({ file, onClose, theme, markdownEditMode, setMarkdow ? [[remarkFileLinks, { fileTree, cwd }] as any] : []) ]} - rehypePlugins={[rehypeRaw]} + rehypePlugins={[rehypeRaw, rehypeSlug]} components={{ - a: ({ node, href, children, ...props }) => { + a: ({ node: _node, href, children, ...props }) => { // Check for maestro-file:// protocol OR data-maestro-file attribute // (data attribute is fallback when rehype strips custom protocols) const dataFilePath = (props as any)['data-maestro-file']; const isMaestroFile = href?.startsWith('maestro-file://') || !!dataFilePath; const filePath = dataFilePath || (href?.startsWith('maestro-file://') ? href.replace('maestro-file://', '') : null); + // Check for anchor links (same-page navigation) + const isAnchorLink = href?.startsWith('#') ?? false; + const anchorId = isAnchorLink && href ? href.slice(1) : null; + return ( ); }, - code: ({ node, inline, className, children, ...props }: any) => { + code: ({ node: _node, inline, className, children, ...props }: any) => { const match = (className || '').match(/language-(\w+)/); const language = match ? match[1] : 'text'; const codeContent = String(children).replace(/\n$/, ''); @@ -1592,12 +1605,12 @@ export function FilePreview({ file, onClose, theme, markdownEditMode, setMarkdow ); }, - img: ({ node, src, alt, ...props }) => { + img: ({ node: _node, src, alt, ...props }) => { // Check if this image came from file tree (set by remarkFileLinks) const isFromTree = (props as any)['data-maestro-from-tree'] === 'true'; // Get the project root from the markdown file path (directory containing the file tree root) // For FilePreview, the file.path is absolute, so we extract the root from it - const markdownDir = file.path.substring(0, file.path.lastIndexOf('/')); + const _markdownDir = file.path.substring(0, file.path.lastIndexOf('/')); // If image is from file tree, we need the project root to resolve correctly // The project root would be the common ancestor - we'll derive it from the file path // For now, use the directory where the first folder in cwd would be located diff --git a/src/renderer/components/FileSearchModal.tsx b/src/renderer/components/FileSearchModal.tsx index 252404d8d..b227aa243 100644 --- a/src/renderer/components/FileSearchModal.tsx +++ b/src/renderer/components/FileSearchModal.tsx @@ -197,7 +197,7 @@ export function FileSearchModal({ // Filter files based on view mode and search query const filteredFiles = useMemo(() => { // First filter by view mode (hidden files) - let files = viewMode === 'visible' + const files = viewMode === 'visible' ? allFiles.filter(f => !isHiddenFile(f.fullPath)) : allFiles; diff --git a/src/renderer/components/FirstRunCelebration.tsx b/src/renderer/components/FirstRunCelebration.tsx index 3dcdda677..31aa6daff 100644 --- a/src/renderer/components/FirstRunCelebration.tsx +++ b/src/renderer/components/FirstRunCelebration.tsx @@ -165,7 +165,7 @@ export function FirstRunCelebration({ // Fire confetti on mount useEffect(() => { fireConfetti(); - // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); // Handle close with confetti diff --git a/src/renderer/components/GitLogViewer.tsx b/src/renderer/components/GitLogViewer.tsx index 08a977a02..f2abfbddf 100644 --- a/src/renderer/components/GitLogViewer.tsx +++ b/src/renderer/components/GitLogViewer.tsx @@ -88,7 +88,7 @@ export const GitLogViewer = memo(function GitLogViewer({ cwd, theme, onClose }: try { const result = await window.maestro.git.show(cwd, hash); setSelectedCommitDiff(result.stdout); - } catch (err) { + } catch { setSelectedCommitDiff(null); } finally { setLoadingDiff(false); @@ -358,7 +358,6 @@ export const GitLogViewer = memo(function GitLogViewer({ cwd, theme, onClose }: {entry.refs.map((ref, i) => { const isTag = ref.startsWith('tag:'); const isBranch = !isTag && !ref.includes('/'); - const isRemote = ref.includes('/'); return ( void; + /** Use compact mode - just show file count without breakdown */ + compact?: boolean; } /** @@ -21,7 +23,7 @@ interface GitStatusWidgetProps { * The context provides detailed file changes (with line additions/deletions) * only for the active session. Non-active sessions will show basic file counts. */ -export function GitStatusWidget({ sessionId, isGitRepo, theme, onViewDiff }: GitStatusWidgetProps) { +export function GitStatusWidget({ sessionId, isGitRepo, theme, onViewDiff, compact = false }: GitStatusWidgetProps) { // Tooltip hover state with timeout for smooth UX const [tooltipOpen, setTooltipOpen] = useState(false); const tooltipTimeout = useRef | null>(null); @@ -73,28 +75,40 @@ export function GitStatusWidget({ sessionId, isGitRepo, theme, onViewDiff }: Git onClick={onViewDiff} className="flex items-center gap-2 px-2 py-1 rounded text-xs transition-colors hover:bg-white/5" style={{ color: theme.colors.textMain }} + title={compact ? `+${additions} −${deletions} ~${modified}` : undefined} > - - - {additions > 0 && ( - - - {additions} + {compact ? ( + // Compact mode: just show file count + + + {statusData.fileCount} - )} + ) : ( + // Full mode: show breakdown by type + <> + - {deletions > 0 && ( - - - {deletions} - - )} + {additions > 0 && ( + + + {additions} + + )} - {modified > 0 && ( - - - {modified} - + {deletions > 0 && ( + + + {deletions} + + )} + + {modified > 0 && ( + + + {modified} + + )} + )} diff --git a/src/renderer/components/GitWorktreeSection.tsx b/src/renderer/components/GitWorktreeSection.tsx index 30fcbe296..435d34e5b 100644 --- a/src/renderer/components/GitWorktreeSection.tsx +++ b/src/renderer/components/GitWorktreeSection.tsx @@ -1,7 +1,7 @@ import { useState, useRef } from 'react'; import { GitBranch, AlertTriangle, Loader2, ChevronDown } from 'lucide-react'; import type { Theme, WorktreeValidationState, GhCliStatus } from '../types'; -import { useClickOutside } from '../hooks/useClickOutside'; +import { useClickOutside } from '../hooks'; // Re-export types for backward compatibility export type { WorktreeValidationState, GhCliStatus } from '../types'; diff --git a/src/renderer/components/GroupChatHistoryPanel.tsx b/src/renderer/components/GroupChatHistoryPanel.tsx index e4a596788..74d98281d 100644 --- a/src/renderer/components/GroupChatHistoryPanel.tsx +++ b/src/renderer/components/GroupChatHistoryPanel.tsx @@ -297,7 +297,6 @@ function GroupChatActivityGraph({ // Build stacked segments for each participant const segments: { name: string; percent: number; color: string }[] = []; - let runningTotal = 0; for (const name of participantOrder) { if (bucket[name]) { const segmentPercent = (bucket[name] / total) * 100; @@ -306,7 +305,6 @@ function GroupChatActivityGraph({ percent: segmentPercent, color: participantColors[name] || theme.colors.textDim, }); - runningTotal += bucket[name]; } } diff --git a/src/renderer/components/GroupChatInput.tsx b/src/renderer/components/GroupChatInput.tsx index 894daaae0..3ec303d6f 100644 --- a/src/renderer/components/GroupChatInput.tsx +++ b/src/renderer/components/GroupChatInput.tsx @@ -63,7 +63,7 @@ export const GroupChatInput = React.memo(function GroupChatInput({ theme, state, onSend, - participants, + participants: _participants, sessions, groupChatId, draftMessage, diff --git a/src/renderer/components/GroupChatRightPanel.tsx b/src/renderer/components/GroupChatRightPanel.tsx index 2301fe2e5..04ac88315 100644 --- a/src/renderer/components/GroupChatRightPanel.tsx +++ b/src/renderer/components/GroupChatRightPanel.tsx @@ -123,7 +123,7 @@ export function GroupChatRightPanel({ setColorPreferences(prev => ({ ...prev, ...prefsToSave })); saveColorPreferences({ ...colorPreferences, ...prefsToSave }); } - // eslint-disable-next-line react-hooks/exhaustive-deps + }, [colorResult]); // Notify parent when colors are computed (use ref to prevent infinite loops) diff --git a/src/renderer/components/HistoryDetailModal.tsx b/src/renderer/components/HistoryDetailModal.tsx index aef8e28bd..16eeb984e 100644 --- a/src/renderer/components/HistoryDetailModal.tsx +++ b/src/renderer/components/HistoryDetailModal.tsx @@ -46,7 +46,7 @@ export function HistoryDetailModal({ theme, entry, onClose, - onJumpToAgentSession, + onJumpToAgentSession: _onJumpToAgentSession, onResumeSession, onDelete, onUpdate, diff --git a/src/renderer/components/HistoryPanel.tsx b/src/renderer/components/HistoryPanel.tsx index 95e8d5807..6429e85b0 100644 --- a/src/renderer/components/HistoryPanel.tsx +++ b/src/renderer/components/HistoryPanel.tsx @@ -3,8 +3,7 @@ import { Bot, User, ExternalLink, Check, X, Clock, HelpCircle, Award } from 'luc import type { Session, Theme, HistoryEntry, HistoryEntryType } from '../types'; import { HistoryDetailModal } from './HistoryDetailModal'; import { HistoryHelpModal } from './HistoryHelpModal'; -import { useThrottledCallback } from '../hooks/useThrottle'; -import { useListNavigation } from '../hooks/useListNavigation'; +import { useThrottledCallback, useListNavigation } from '../hooks'; import { formatElapsedTime } from '../utils/formatters'; // Double checkmark SVG component for validated entries diff --git a/src/renderer/components/InputArea.tsx b/src/renderer/components/InputArea.tsx index e009f26e7..0af571699 100644 --- a/src/renderer/components/InputArea.tsx +++ b/src/renderer/components/InputArea.tsx @@ -1,15 +1,14 @@ import React, { useEffect, useMemo } from 'react'; import { Terminal, Cpu, Keyboard, ImageIcon, X, ArrowUp, Eye, History, File, Folder, GitBranch, Tag, PenLine, Brain } from 'lucide-react'; import type { Session, Theme, BatchRunState } from '../types'; -import type { TabCompletionSuggestion, TabCompletionFilter } from '../hooks/useTabCompletion'; +import type { TabCompletionSuggestion, TabCompletionFilter } from '../hooks'; import type { SummarizeProgress, SummarizeResult, GroomingProgress, MergeResult } from '../types/contextMerge'; import { ThinkingStatusPill } from './ThinkingStatusPill'; import { MergeProgressOverlay } from './MergeProgressOverlay'; import { ExecutionQueueIndicator } from './ExecutionQueueIndicator'; import { ContextWarningSash } from './ContextWarningSash'; import { SummarizeProgressOverlay } from './SummarizeProgressOverlay'; -import { useAgentCapabilities } from '../hooks/useAgentCapabilities'; -import { useScrollIntoView } from '../hooks/useScrollIntoView'; +import { useAgentCapabilities, useScrollIntoView } from '../hooks'; import { getProviderDisplayName } from '../utils/sessionValidation'; interface SlashCommand { @@ -667,43 +666,40 @@ export const InputArea = React.memo(function InputArea(props: InputAreaProps) { } // @ mention file completion (AI mode only) + // PERFORMANCE: Quick check with lastIndexOf before doing detailed scan if (!isTerminalMode && setAtMentionOpen && setAtMentionFilter && setAtMentionStartIndex && setSelectedAtMentionIndex) { - // Find the last @ before cursor that's not part of a completed mention - let atIndex = -1; - for (let i = cursorPosition - 1; i >= 0; i--) { - if (value[i] === '@') { - // Check if this @ is at start of input or after a space/newline - if (i === 0 || /\s/.test(value[i - 1])) { - atIndex = i; - break; - } - } - // Stop if we hit a space (means we're past any potential @ trigger) - if (value[i] === ' ' || value[i] === '\n') { - break; - } - } + // Quick check: if no @ in the text before cursor, skip the detailed scan + const textBeforeCursor = value.substring(0, cursorPosition); + const lastAtPos = textBeforeCursor.lastIndexOf('@'); - if (atIndex >= 0) { - // Extract filter text after @ - const filterText = value.substring(atIndex + 1, cursorPosition); - // Only show dropdown if filter doesn't contain spaces (incomplete mention) - if (!filterText.includes(' ')) { + if (lastAtPos === -1) { + // No @ at all before cursor + setAtMentionOpen(false); + } else { + // Check if this @ could be a valid mention trigger + // It must be at start or after whitespace, and text after it must not contain spaces + const isValidTrigger = lastAtPos === 0 || /\s/.test(value[lastAtPos - 1]); + const textAfterAt = value.substring(lastAtPos + 1, cursorPosition); + const hasSpaceAfterAt = textAfterAt.includes(' '); + + if (isValidTrigger && !hasSpaceAfterAt) { setAtMentionOpen(true); - setAtMentionFilter(filterText); - setAtMentionStartIndex(atIndex); + setAtMentionFilter(textAfterAt); + setAtMentionStartIndex(lastAtPos); setSelectedAtMentionIndex(0); } else { setAtMentionOpen(false); } - } else { - setAtMentionOpen(false); } } - // Auto-grow logic - limit to 5 lines (~112px with text-sm) - e.target.style.height = 'auto'; - e.target.style.height = `${Math.min(e.target.scrollHeight, 112)}px`; + // PERFORMANCE: Auto-grow logic deferred to next animation frame + // This prevents layout thrashing from blocking the keystroke handling + const textarea = e.target; + requestAnimationFrame(() => { + textarea.style.height = 'auto'; + textarea.style.height = `${Math.min(textarea.scrollHeight, 112)}px`; + }); }} onKeyDown={handleInputKeyDown} onPaste={handlePaste} diff --git a/src/renderer/components/KeyboardMasteryCelebration.tsx b/src/renderer/components/KeyboardMasteryCelebration.tsx index 62770e992..85545f65c 100644 --- a/src/renderer/components/KeyboardMasteryCelebration.tsx +++ b/src/renderer/components/KeyboardMasteryCelebration.tsx @@ -137,7 +137,7 @@ export function KeyboardMasteryCelebration({ timeoutsRef.current.forEach(clearTimeout); timeoutsRef.current = []; }; - // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); // Handle close with confetti - use ref to avoid stale state diff --git a/src/renderer/components/LeaderboardRegistrationModal.tsx b/src/renderer/components/LeaderboardRegistrationModal.tsx index 90a9f2ec9..9c0e2cbfe 100644 --- a/src/renderer/components/LeaderboardRegistrationModal.tsx +++ b/src/renderer/components/LeaderboardRegistrationModal.tsx @@ -95,7 +95,7 @@ export function LeaderboardRegistrationModal({ // Polling state - generate clientToken once if not already persisted const [clientToken] = useState(() => existingRegistration?.clientToken || generateClientToken()); - const [isPolling, setIsPolling] = useState(false); + const [_isPolling, setIsPolling] = useState(false); const pollingIntervalRef = useRef(null); // Manual token entry state diff --git a/src/renderer/components/MainPanel.tsx b/src/renderer/components/MainPanel.tsx index dacd5a953..997d6edc7 100644 --- a/src/renderer/components/MainPanel.tsx +++ b/src/renderer/components/MainPanel.tsx @@ -11,8 +11,7 @@ import { TabBar } from './TabBar'; import { gitService } from '../services/git'; import { useGitStatus } from '../contexts/GitStatusContext'; import { formatShortcutKeys } from '../utils/shortcutFormatter'; -import { useAgentCapabilities } from '../hooks/useAgentCapabilities'; -import { useHoverTooltip } from '../hooks/useHoverTooltip'; +import { useAgentCapabilities, useHoverTooltip } from '../hooks'; import type { Session, Theme, Shortcut, FocusArea, BatchRunState } from '../types'; interface SlashCommand { @@ -53,9 +52,9 @@ interface MainPanelProps { selectedSlashCommandIndex: number; // Tab completion props tabCompletionOpen?: boolean; - tabCompletionSuggestions?: import('../hooks/useTabCompletion').TabCompletionSuggestion[]; + tabCompletionSuggestions?: import('../hooks').TabCompletionSuggestion[]; selectedTabCompletionIndex?: number; - tabCompletionFilter?: import('../hooks/useTabCompletion').TabCompletionFilter; + tabCompletionFilter?: import('../hooks').TabCompletionFilter; // @ mention completion props (AI mode) atMentionOpen?: boolean; atMentionFilter?: string; @@ -96,7 +95,7 @@ interface MainPanelProps { // Tab completion setters setTabCompletionOpen?: (open: boolean) => void; setSelectedTabCompletionIndex?: (index: number) => void; - setTabCompletionFilter?: (filter: import('../hooks/useTabCompletion').TabCompletionFilter) => void; + setTabCompletionFilter?: (filter: import('../hooks').TabCompletionFilter) => void; // @ mention completion setters setAtMentionOpen?: (open: boolean) => void; setAtMentionFilter?: (filter: string) => void; @@ -194,6 +193,7 @@ interface MainPanelProps { onSummarizeAndContinue?: (tabId: string) => void; onMergeWith?: (tabId: string) => void; onSendToAgent?: (tabId: string) => void; + onCopyContext?: (tabId: string) => void; // Context warning sash settings (Phase 6) contextWarningsEnabled?: boolean; @@ -220,7 +220,9 @@ interface MainPanelProps { onShortcutUsed?: (shortcutId: string) => void; } -export const MainPanel = forwardRef(function MainPanel(props, ref) { +// PERFORMANCE: Wrap with React.memo to prevent re-renders when parent (App.tsx) re-renders +// due to input value changes. The component will only re-render when its props actually change. +export const MainPanel = React.memo(forwardRef(function MainPanel(props, ref) { const { logViewerOpen, agentSessionsOpen, activeAgentSessionId, activeSession, sessions, theme, activeFocus, outputSearchOpen, outputSearchQuery, inputValue, enterToSendAI, enterToSendTerminal, stagedImages, commandHistoryOpen, commandHistoryFilter, @@ -229,16 +231,16 @@ export const MainPanel = forwardRef(function Ma setTabCompletionOpen, setSelectedTabCompletionIndex, setTabCompletionFilter, atMentionOpen, atMentionFilter, atMentionStartIndex, atMentionSuggestions, selectedAtMentionIndex, setAtMentionOpen, setAtMentionFilter, setAtMentionStartIndex, setSelectedAtMentionIndex, - previewFile, markdownEditMode, shortcuts, rightPanelOpen, maxOutputLines, gitDiffPreview, + previewFile, markdownEditMode, shortcuts, rightPanelOpen, maxOutputLines, gitDiffPreview: _gitDiffPreview, fileTreeFilterOpen, logLevel, setGitDiffPreview, setLogViewerOpen, setAgentSessionsOpen, setActiveAgentSessionId, onResumeAgentSession, onNewAgentSession, setActiveFocus, setOutputSearchOpen, setOutputSearchQuery, setInputValue, setEnterToSendAI, setEnterToSendTerminal, setStagedImages, setLightboxImage, setCommandHistoryOpen, setCommandHistoryFilter, setCommandHistorySelectedIndex, setSlashCommandOpen, setSelectedSlashCommandIndex, setPreviewFile, setMarkdownEditMode, - setAboutModalOpen, setRightPanelOpen, setGitLogOpen, inputRef, logsEndRef, terminalOutputRef, + setAboutModalOpen: _setAboutModalOpen, setRightPanelOpen, setGitLogOpen, inputRef, logsEndRef, terminalOutputRef, fileTreeContainerRef, fileTreeFilterInputRef, toggleInputMode, processInput, handleInterrupt, handleInputKeyDown, handlePaste, handleDrop, getContextColor, setActiveSessionId, - batchRunState, currentSessionBatchState, onStopBatchRun, showConfirmation, onRemoveQueuedItem, onOpenQueueBrowser, + batchRunState: _batchRunState, currentSessionBatchState, onStopBatchRun, showConfirmation: _showConfirmation, onRemoveQueuedItem, onOpenQueueBrowser, isMobileLandscape = false, showFlashNotification, onOpenWorktreeConfig, @@ -247,6 +249,7 @@ export const MainPanel = forwardRef(function Ma onSummarizeAndContinue, onMergeWith, onSendToAgent, + onCopyContext, // Context warning sash settings (Phase 6) contextWarningsEnabled = false, contextWarningYellowThreshold = 60, @@ -372,8 +375,9 @@ export const MainPanel = forwardRef(function Ma }; }, []); - // Responsive breakpoints for hiding widgets + // Responsive breakpoints for hiding/simplifying widgets const showCostWidget = panelWidth > 500; + const useCompactGitWidget = panelWidth < 700; // Git status from centralized context (replaces local polling) // The context handles polling for all sessions and provides detailed data for the active session @@ -517,11 +521,14 @@ export const MainPanel = forwardRef(function Ma setGitLogOpen?.(true); } }} + title={activeSession.isGitRepo && gitInfo?.branch ? gitInfo.branch : undefined} > {activeSession.isGitRepo ? ( <> - {gitInfo?.branch || 'GIT'} + + {gitInfo?.branch || 'GIT'} + ) : 'LOCAL'} @@ -671,6 +678,7 @@ export const MainPanel = forwardRef(function Ma isGitRepo={activeSession.isGitRepo} theme={theme} onViewDiff={handleViewGitDiff} + compact={useCompactGitWidget} /> @@ -686,8 +694,9 @@ export const MainPanel = forwardRef(function Ma disabled={isCurrentSessionStopping} className={`flex items-center gap-1.5 px-3.5 py-1.5 rounded-lg font-bold text-xs transition-all ${isCurrentSessionStopping ? 'cursor-not-allowed' : 'hover:opacity-90 cursor-pointer'}`} style={{ - backgroundColor: theme.colors.error, - color: 'white' + backgroundColor: isCurrentSessionStopping ? theme.colors.warning : theme.colors.error, + color: isCurrentSessionStopping ? theme.colors.bgMain : 'white', + pointerEvents: isCurrentSessionStopping ? 'none' : 'auto' }} title={isCurrentSessionStopping ? 'Stopping after current task...' : 'Click to stop batch run'} > @@ -887,6 +896,7 @@ export const MainPanel = forwardRef(function Ma onMergeWith={onMergeWith} onSendToAgent={onSendToAgent} onSummarizeAndContinue={onSummarizeAndContinue} + onCopyContext={onCopyContext} showUnreadOnly={showUnreadOnly} onToggleUnreadFilter={onToggleUnreadFilter} onOpenTabSearch={onOpenTabSearch} @@ -1135,4 +1145,4 @@ export const MainPanel = forwardRef(function Ma )} ); -}); +})); diff --git a/src/renderer/components/MarkdownRenderer.tsx b/src/renderer/components/MarkdownRenderer.tsx index e49b7caed..f37dc96c4 100644 --- a/src/renderer/components/MarkdownRenderer.tsx +++ b/src/renderer/components/MarkdownRenderer.tsx @@ -184,7 +184,7 @@ interface MarkdownRendererProps { projectRoot?: string; /** Callback when a file link is clicked */ onFileClick?: (path: string) => void; - /** Allow raw HTML passthrough via rehype-raw (can break table/bold rendering) */ + /** Allow raw HTML passthrough via rehype-raw (may break GFM table rendering) */ allowRawHtml?: boolean; } @@ -225,7 +225,7 @@ export const MarkdownRenderer = memo(({ content, theme, onCopy, className = '', remarkPlugins={remarkPlugins} rehypePlugins={allowRawHtml ? [rehypeRaw] : undefined} components={{ - a: ({ node, href, children, ...props }) => { + a: ({ node: _node, href, children, ...props }) => { // Check for maestro-file:// protocol OR data-maestro-file attribute // (data attribute is fallback when rehype strips custom protocols) const dataFilePath = (props as any)['data-maestro-file']; @@ -250,7 +250,7 @@ export const MarkdownRenderer = memo(({ content, theme, onCopy, className = '', ); }, - code: ({ node, inline, className, children, ...props }: any) => { + code: ({ node: _node, inline, className, children, ...props }: any) => { const match = (className || '').match(/language-(\w+)/); const language = match ? match[1] : 'text'; const codeContent = String(children).replace(/\n$/, ''); @@ -268,7 +268,7 @@ export const MarkdownRenderer = memo(({ content, theme, onCopy, className = '', ); }, - img: ({ node, src, alt, ...props }: any) => { + img: ({ node: _node, src, alt, ...props }: any) => { // Use LocalImage component to handle file:// URLs via IPC // Extract width from data-maestro-width attribute if present const widthStr = props['data-maestro-width']; diff --git a/src/renderer/components/MergeProgressModal.tsx b/src/renderer/components/MergeProgressModal.tsx index 8ab85b413..020e92b04 100644 --- a/src/renderer/components/MergeProgressModal.tsx +++ b/src/renderer/components/MergeProgressModal.tsx @@ -380,7 +380,7 @@ export function MergeProgressModal({ {STAGES.map((stage, index) => { const isActive = index === currentStageIndex; const isCompleted = index < currentStageIndex; - const isPending = index > currentStageIndex; + const _isPending = index > currentStageIndex; return (
- {items.map((item, itemIndex) => { + {items.map((item, _itemIndex) => { const flatIndex = filteredItems.indexOf(item); const isSelected = flatIndex === selectedIndex; const isTarget = selectedTarget?.tabId === item.tabId; diff --git a/src/renderer/components/MermaidRenderer.tsx b/src/renderer/components/MermaidRenderer.tsx index 224ba78ca..8e3eb6595 100644 --- a/src/renderer/components/MermaidRenderer.tsx +++ b/src/renderer/components/MermaidRenderer.tsx @@ -1,17 +1,173 @@ -import { useEffect, useRef, useState } from 'react'; +import { useLayoutEffect, useRef, useState } from 'react'; import mermaid from 'mermaid'; import DOMPurify from 'dompurify'; +import type { Theme } from '../types'; + +// Track theme for mermaid initialization +let lastThemeId: string | null = null; interface MermaidRendererProps { chart: string; - theme: any; + theme: Theme; +} + +/** + * Convert hex color to RGB components + */ +function hexToRgb(hex: string): { r: number; g: number; b: number } | null { + const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); + return result ? { + r: parseInt(result[1], 16), + g: parseInt(result[2], 16), + b: parseInt(result[3], 16) + } : null; } -// Initialize mermaid with custom theme settings -const initMermaid = (isDarkTheme: boolean) => { +/** + * Create a slightly lighter/darker version of a color + */ +function adjustBrightness(hex: string, percent: number): string { + const rgb = hexToRgb(hex); + if (!rgb) return hex; + + const adjust = (value: number) => Math.min(255, Math.max(0, Math.round(value + (255 * percent / 100)))); + const r = adjust(rgb.r); + const g = adjust(rgb.g); + const b = adjust(rgb.b); + + return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`; +} + +/** + * Initialize mermaid with theme-aware settings using the app's color scheme + */ +const initMermaid = (theme: Theme) => { + const colors = theme.colors; + + // Determine if this is a dark theme by checking background luminance + const bgRgb = hexToRgb(colors.bgMain); + const isDark = bgRgb ? (bgRgb.r * 0.299 + bgRgb.g * 0.587 + bgRgb.b * 0.114) < 128 : true; + + // Create theme variables from the app's color scheme + const themeVariables = { + // Base colors + primaryColor: colors.accent, + primaryTextColor: colors.textMain, + primaryBorderColor: colors.border, + + // Secondary colors (derived from accent) + secondaryColor: adjustBrightness(colors.accent, isDark ? -20 : 20), + secondaryTextColor: colors.textMain, + secondaryBorderColor: colors.border, + + // Tertiary colors + tertiaryColor: colors.bgActivity, + tertiaryTextColor: colors.textMain, + tertiaryBorderColor: colors.border, + + // Background and text + background: colors.bgMain, + mainBkg: colors.bgActivity, + textColor: colors.textMain, + titleColor: colors.textMain, + + // Line colors + lineColor: colors.textDim, + + // Node colors for flowcharts + nodeBkg: colors.bgActivity, + nodeTextColor: colors.textMain, + nodeBorder: colors.border, + + // Cluster (subgraph) colors + clusterBkg: colors.bgSidebar, + clusterBorder: colors.border, + + // Edge labels + edgeLabelBackground: colors.bgMain, + + // State diagram colors + labelColor: colors.textMain, + altBackground: colors.bgSidebar, + + // Sequence diagram colors + actorBkg: colors.bgActivity, + actorBorder: colors.border, + actorTextColor: colors.textMain, + actorLineColor: colors.textDim, + signalColor: colors.textMain, + signalTextColor: colors.textMain, + labelBoxBkgColor: colors.bgActivity, + labelBoxBorderColor: colors.border, + labelTextColor: colors.textMain, + loopTextColor: colors.textMain, + noteBkgColor: colors.bgActivity, + noteBorderColor: colors.border, + noteTextColor: colors.textMain, + activationBkgColor: colors.bgActivity, + activationBorderColor: colors.accent, + sequenceNumberColor: colors.textMain, + + // Class diagram colors + classText: colors.textMain, + + // Git graph colors + git0: colors.accent, + git1: colors.success, + git2: colors.warning, + git3: colors.error, + gitBranchLabel0: colors.textMain, + gitBranchLabel1: colors.textMain, + gitBranchLabel2: colors.textMain, + gitBranchLabel3: colors.textMain, + + // Gantt colors + sectionBkgColor: colors.bgActivity, + altSectionBkgColor: colors.bgSidebar, + sectionBkgColor2: colors.bgActivity, + taskBkgColor: colors.accent, + taskTextColor: colors.textMain, + taskTextLightColor: colors.textMain, + taskTextOutsideColor: colors.textMain, + activeTaskBkgColor: colors.accent, + activeTaskBorderColor: colors.border, + doneTaskBkgColor: colors.success, + doneTaskBorderColor: colors.border, + critBkgColor: colors.error, + critBorderColor: colors.error, + gridColor: colors.border, + todayLineColor: colors.warning, + + // Pie chart colors + pie1: colors.accent, + pie2: colors.success, + pie3: colors.warning, + pie4: colors.error, + pie5: adjustBrightness(colors.accent, 30), + pie6: adjustBrightness(colors.success, 30), + pie7: adjustBrightness(colors.warning, 30), + pieTitleTextColor: colors.textMain, + pieSectionTextColor: colors.textMain, + pieLegendTextColor: colors.textMain, + + // Relationship colors for ER diagrams + relationColor: colors.textDim, + relationLabelColor: colors.textMain, + relationLabelBackground: colors.bgMain, + + // Requirement diagram + requirementBkgColor: colors.bgActivity, + requirementBorderColor: colors.border, + requirementTextColor: colors.textMain, + + // Mindmap + mindmapBkg: colors.bgActivity, + }; + mermaid.initialize({ startOnLoad: false, - theme: isDarkTheme ? 'dark' : 'default', + theme: 'base', // Use 'base' theme to fully customize with themeVariables + themeVariables, securityLevel: 'strict', fontFamily: 'ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace', flowchart: { @@ -30,91 +186,92 @@ const initMermaid = (isDarkTheme: boolean) => { }); }; -// Sanitize and parse SVG into safe DOM nodes -const createSanitizedSvgElement = (svgString: string): Node | null => { - // First sanitize with DOMPurify configured for SVG - const sanitized = DOMPurify.sanitize(svgString, { - USE_PROFILES: { svg: true, svgFilters: true }, - ADD_TAGS: ['foreignObject'], - ADD_ATTR: ['xmlns', 'xmlns:xlink', 'xlink:href', 'dominant-baseline', 'text-anchor'], - RETURN_DOM: true - }); - - // Return the first child (the SVG element) - return sanitized.firstChild; -}; - export function MermaidRenderer({ chart, theme }: MermaidRendererProps) { const containerRef = useRef(null); const [error, setError] = useState(null); const [isLoading, setIsLoading] = useState(true); + const [svgContent, setSvgContent] = useState(null); + + // Use useLayoutEffect to ensure DOM is ready before we try to render + useLayoutEffect(() => { + let cancelled = false; - useEffect(() => { const renderChart = async () => { - if (!containerRef.current || !chart.trim()) return; + if (!chart.trim()) { + setIsLoading(false); + return; + } setIsLoading(true); setError(null); + setSvgContent(null); - // Determine if theme is dark by checking background color - const isDarkTheme = theme.colors.bgMain.toLowerCase().includes('#1') || - theme.colors.bgMain.toLowerCase().includes('#2') || - theme.colors.bgMain.toLowerCase().includes('#0'); - - // Initialize mermaid with the current theme - initMermaid(isDarkTheme); + // Initialize mermaid with the app's theme colors (only when theme changes) + if (lastThemeId !== theme.name) { + initMermaid(theme); + lastThemeId = theme.name; + } try { // Generate a unique ID for this diagram const id = `mermaid-${Math.random().toString(36).substring(2, 11)}`; - // Render the diagram - const { svg: renderedSvg } = await mermaid.render(id, chart.trim()); + // Render the diagram - mermaid.render returns { svg: string } + const result = await mermaid.render(id, chart.trim()); - // Create sanitized DOM element from SVG string - const svgElement = createSanitizedSvgElement(renderedSvg); + if (cancelled) return; - // Clear container and append sanitized SVG - while (containerRef.current.firstChild) { - containerRef.current.removeChild(containerRef.current.firstChild); + if (result && result.svg) { + // Sanitize the SVG before setting it + const sanitizedSvg = DOMPurify.sanitize(result.svg, { + USE_PROFILES: { svg: true, svgFilters: true }, + ADD_TAGS: ['foreignObject'], + ADD_ATTR: ['xmlns', 'xmlns:xlink', 'xlink:href', 'dominant-baseline', 'text-anchor'], + }); + setSvgContent(sanitizedSvg); + setError(null); + } else { + setError('Mermaid returned empty result'); } - - if (svgElement) { - containerRef.current.appendChild(svgElement); - } - - setError(null); } catch (err) { + if (cancelled) return; console.error('Mermaid rendering error:', err); setError(err instanceof Error ? err.message : 'Failed to render diagram'); - - // Clear container on error - if (containerRef.current) { - while (containerRef.current.firstChild) { - containerRef.current.removeChild(containerRef.current.firstChild); - } - } } finally { - setIsLoading(false); + if (!cancelled) { + setIsLoading(false); + } } }; renderChart(); - }, [chart, theme.colors.bgMain]); - if (isLoading) { - return ( -
- Rendering diagram... -
- ); - } + return () => { + cancelled = true; + }; + }, [chart, theme]); + + // Update container with SVG when content changes + // NOTE: This hook must be called before any conditional returns to satisfy rules-of-hooks + // We depend on isLoading to ensure we re-run once the container div is actually rendered + useLayoutEffect(() => { + if (containerRef.current && svgContent) { + // Parse sanitized SVG and append to container + const parser = new DOMParser(); + const doc = parser.parseFromString(svgContent, 'image/svg+xml'); + const svgElement = doc.documentElement; + + // Clear existing content + while (containerRef.current.firstChild) { + containerRef.current.removeChild(containerRef.current.firstChild); + } + + // Append new SVG + if (svgElement && svgElement.tagName === 'svg') { + containerRef.current.appendChild(document.importNode(svgElement, true)); + } + } + }, [svgContent, isLoading]); if (error) { return ( @@ -149,12 +306,33 @@ export function MermaidRenderer({ chart, theme }: MermaidRendererProps) { ); } + // Show loading state + if (isLoading) { + return ( +
+
+ Rendering diagram... +
+
+ ); + } + + // Render container - SVG will be inserted via the effect above return (
); diff --git a/src/renderer/components/NewInstanceModal.tsx b/src/renderer/components/NewInstanceModal.tsx index c93c225da..5021a301b 100644 --- a/src/renderer/components/NewInstanceModal.tsx +++ b/src/renderer/components/NewInstanceModal.tsx @@ -690,7 +690,7 @@ export function EditAgentModal({ isOpen, onClose, onSave, theme, session, existi const [customPath, setCustomPath] = useState(''); const [customArgs, setCustomArgs] = useState(''); const [customEnvVars, setCustomEnvVars] = useState>({}); - const [customModel, setCustomModel] = useState(''); + const [_customModel, setCustomModel] = useState(''); const [refreshingAgent, setRefreshingAgent] = useState(false); const nameInputRef = useRef(null); diff --git a/src/renderer/components/ProcessMonitor.tsx b/src/renderer/components/ProcessMonitor.tsx index f63955e02..ed892b145 100644 --- a/src/renderer/components/ProcessMonitor.tsx +++ b/src/renderer/components/ProcessMonitor.tsx @@ -534,7 +534,7 @@ export function ProcessMonitor(props: ProcessMonitorProps) { }; // Expand all nodes by default on initial load - // eslint-disable-next-line react-hooks/exhaustive-deps + useEffect(() => { if (!isLoading && !hasExpandedInitially) { // Build tree and get all expandable node IDs diff --git a/src/renderer/components/QuickActionsModal.tsx b/src/renderer/components/QuickActionsModal.tsx index 5d262fe27..01c6e4f18 100644 --- a/src/renderer/components/QuickActionsModal.tsx +++ b/src/renderer/components/QuickActionsModal.tsx @@ -8,7 +8,7 @@ import { MODAL_PRIORITIES } from '../constants/modalPriorities'; import { gitService } from '../services/git'; import { formatShortcutKeys } from '../utils/shortcutFormatter'; import type { WizardStep } from './Wizard/WizardContext'; -import { useListNavigation } from '../hooks/useListNavigation'; +import { useListNavigation } from '../hooks'; interface QuickAction { id: string; @@ -90,6 +90,10 @@ interface QuickActionsModalProps { // Summarize and continue onSummarizeAndContinue?: () => void; canSummarizeActiveTab?: boolean; + // Auto Run reset tasks + autoRunSelectedDocument?: string | null; + autoRunCompletedTaskCount?: number; + onAutoRunResetTasks?: () => void; } export function QuickActionsModal(props: QuickActionsModalProps) { @@ -104,10 +108,11 @@ export function QuickActionsModal(props: QuickActionsModalProps) { setShortcutsHelpOpen, setAboutModalOpen, setLogViewerOpen, setProcessMonitorOpen, setAgentSessionsOpen, setActiveAgentSessionId, setGitDiffPreview, setGitLogOpen, onRenameTab, onToggleReadOnlyMode, onToggleTabShowThinking, onOpenTabSwitcher, tabShortcuts, isAiMode, setPlaygroundOpen, onRefreshGitFileState, - onDebugReleaseQueuedItem, markdownEditMode, onToggleMarkdownEditMode, setUpdateCheckModalOpen, openWizard, wizardGoToStep, setDebugWizardModalOpen, setDebugPackageModalOpen, startTour, setFuzzyFileSearchOpen, onEditAgent, + onDebugReleaseQueuedItem, markdownEditMode, onToggleMarkdownEditMode, setUpdateCheckModalOpen, openWizard, wizardGoToStep: _wizardGoToStep, setDebugWizardModalOpen, setDebugPackageModalOpen, startTour, setFuzzyFileSearchOpen, onEditAgent, groupChats, onNewGroupChat, onOpenGroupChat, onCloseGroupChat, onDeleteGroupChat, activeGroupChatId, hasActiveSessionCapability, onOpenMergeSession, onOpenSendToAgent, onOpenCreatePR, - onSummarizeAndContinue, canSummarizeActiveTab + onSummarizeAndContinue, canSummarizeActiveTab, + autoRunSelectedDocument, autoRunCompletedTaskCount, onAutoRunResetTasks } = props; const [search, setSearch] = useState(''); @@ -339,6 +344,7 @@ export function QuickActionsModal(props: QuickActionsModalProps) { { id: 'devtools', label: 'Toggle JavaScript Console', action: () => { window.maestro.devtools.toggle(); setQuickActionOpen(false); } }, { id: 'about', label: 'About Maestro', action: () => { setAboutModalOpen(true); setQuickActionOpen(false); } }, { id: 'website', label: 'Maestro Website', subtext: 'Open the Maestro website', action: () => { window.maestro.shell.openExternal('https://runmaestro.ai/'); setQuickActionOpen(false); } }, + { id: 'docs', label: 'Documentation and User Guide', subtext: 'Open the Maestro documentation', action: () => { window.maestro.shell.openExternal('https://docs.runmaestro.ai/'); setQuickActionOpen(false); } }, { id: 'discord', label: 'Join Discord', subtext: 'Join the Maestro community', action: () => { window.maestro.shell.openExternal('https://discord.gg/SrBsykvG'); setQuickActionOpen(false); } }, ...(setUpdateCheckModalOpen ? [{ id: 'updateCheck', label: 'Check for Updates', action: () => { setUpdateCheckModalOpen(true); setQuickActionOpen(false); } }] : []), { id: 'createDebugPackage', label: 'Create Debug Package', subtext: 'Generate a support bundle for bug reporting', action: () => { @@ -362,6 +368,16 @@ export function QuickActionsModal(props: QuickActionsModalProps) { { id: 'goToFiles', label: 'Go to Files Tab', shortcut: shortcuts.goToFiles, action: () => { setRightPanelOpen(true); setActiveRightTab('files'); setQuickActionOpen(false); } }, { id: 'goToHistory', label: 'Go to History Tab', shortcut: shortcuts.goToHistory, action: () => { setRightPanelOpen(true); setActiveRightTab('history'); setQuickActionOpen(false); } }, { id: 'goToAutoRun', label: 'Go to Auto Run Tab', shortcut: shortcuts.goToAutoRun, action: () => { setRightPanelOpen(true); setActiveRightTab('autorun'); setQuickActionOpen(false); } }, + // Auto Run reset tasks - only show when there are completed tasks in the selected document + ...(autoRunSelectedDocument && autoRunCompletedTaskCount && autoRunCompletedTaskCount > 0 && onAutoRunResetTasks ? [{ + id: 'resetAutoRunTasks', + label: `Reset Finished Tasks in ${autoRunSelectedDocument}`, + subtext: `Uncheck ${autoRunCompletedTaskCount} completed task${autoRunCompletedTaskCount !== 1 ? 's' : ''}`, + action: () => { + onAutoRunResetTasks(); + setQuickActionOpen(false); + } + }] : []), ...(setFuzzyFileSearchOpen ? [{ id: 'fuzzyFileSearch', label: 'Fuzzy File Search', shortcut: shortcuts.fuzzyFileSearch, action: () => { setFuzzyFileSearchOpen(true); setQuickActionOpen(false); } }] : []), // Group Chat commands - only show when at least 2 AI agents exist ...(onNewGroupChat && sessions.filter(s => s.toolType !== 'terminal').length >= 2 ? [{ id: 'newGroupChat', label: 'New Group Chat', action: () => { onNewGroupChat(); setQuickActionOpen(false); } }] : []), diff --git a/src/renderer/components/RenameGroupModal.tsx b/src/renderer/components/RenameGroupModal.tsx index 718bb51e4..bf402d1c9 100644 --- a/src/renderer/components/RenameGroupModal.tsx +++ b/src/renderer/components/RenameGroupModal.tsx @@ -18,7 +18,7 @@ interface RenameGroupModalProps { export function RenameGroupModal(props: RenameGroupModalProps) { const { theme, groupId, groupName, setGroupName, groupEmoji, setGroupEmoji, - onClose, groups, setGroups + onClose, groups: _groups, setGroups } = props; const inputRef = useRef(null); diff --git a/src/renderer/components/ResetTasksConfirmModal.tsx b/src/renderer/components/ResetTasksConfirmModal.tsx new file mode 100644 index 000000000..3c340fa62 --- /dev/null +++ b/src/renderer/components/ResetTasksConfirmModal.tsx @@ -0,0 +1,66 @@ +import React, { useRef, useCallback } from 'react'; +import { RotateCcw } from 'lucide-react'; +import type { Theme } from '../types'; +import { MODAL_PRIORITIES } from '../constants/modalPriorities'; +import { Modal, ModalFooter } from './ui/Modal'; + +interface ResetTasksConfirmModalProps { + theme: Theme; + documentName: string; + completedTaskCount: number; + onConfirm: () => void; + onClose: () => void; +} + +export function ResetTasksConfirmModal({ + theme, + documentName, + completedTaskCount, + onConfirm, + onClose +}: ResetTasksConfirmModalProps) { + const confirmButtonRef = useRef(null); + + const handleConfirm = useCallback(() => { + onConfirm(); + onClose(); + }, [onConfirm, onClose]); + + return ( + + } + > +
+
+ +
+
+

+ Are you sure you want to reset all {completedTaskCount} completed task{completedTaskCount !== 1 ? 's' : ''} in{' '} + {documentName}? +

+

+ This will uncheck all completed checkboxes, marking them as pending again. +

+
+
+ + ); +} diff --git a/src/renderer/components/RightPanel.tsx b/src/renderer/components/RightPanel.tsx index aa509a252..7f7d03979 100644 --- a/src/renderer/components/RightPanel.tsx +++ b/src/renderer/components/RightPanel.tsx @@ -13,6 +13,8 @@ export interface RightPanelHandle { refreshHistoryPanel: () => void; focusAutoRun: () => void; toggleAutoRunExpanded: () => void; + openAutoRunResetTasksModal: () => void; + getAutoRunCompletedTaskCount: () => number; } interface RightPanelProps { @@ -120,8 +122,7 @@ export const RightPanel = forwardRef(function const historyPanelRef = useRef(null); const autoRunRef = useRef(null); - // Elapsed time for Auto Run display - uses cumulative task time (sum of actual task durations) - // This is the most accurate measure of actual work time, unaffected by display sleep + // Elapsed time for Auto Run display - tracks wall clock time from startTime const [elapsedTime, setElapsedTime] = useState(''); // Shared draft state for Auto Run (shared between panel and expanded modal) @@ -189,18 +190,25 @@ export const RightPanel = forwardRef(function } }, []); - // Update elapsed time display when cumulative task time changes - // This is simply reading from the batch state - no complex tracking needed + // Update elapsed time display using wall clock time from startTime + // Uses an interval to update every second while running useEffect(() => { - if (!currentSessionBatchState?.isRunning) { + if (!currentSessionBatchState?.isRunning || !currentSessionBatchState?.startTime) { setElapsedTime(''); return; } - // Use cumulative task time (sum of actual task durations) as primary display - const cumulativeMs = currentSessionBatchState.cumulativeTaskTimeMs || 0; - setElapsedTime(cumulativeMs > 0 ? formatElapsed(cumulativeMs) : ''); - }, [currentSessionBatchState?.isRunning, currentSessionBatchState?.cumulativeTaskTimeMs, formatElapsed]); + // Calculate elapsed immediately + const updateElapsed = () => { + const elapsed = Date.now() - currentSessionBatchState.startTime!; + setElapsedTime(formatElapsed(elapsed)); + }; + + updateElapsed(); + const interval = setInterval(updateElapsed, 1000); + + return () => clearInterval(interval); + }, [currentSessionBatchState?.isRunning, currentSessionBatchState?.startTime, formatElapsed]); // Expose methods to parent useImperativeHandle(ref, () => ({ @@ -210,7 +218,13 @@ export const RightPanel = forwardRef(function focusAutoRun: () => { autoRunRef.current?.focus(); }, - toggleAutoRunExpanded + toggleAutoRunExpanded, + openAutoRunResetTasksModal: () => { + autoRunRef.current?.openResetTasksModal(); + }, + getAutoRunCompletedTaskCount: () => { + return autoRunRef.current?.getCompletedTaskCount() ?? 0; + } }), [toggleAutoRunExpanded]); // Focus the history panel when switching to history tab @@ -450,12 +464,12 @@ export const RightPanel = forwardRef(function )}
- {/* Elapsed time - shows sum of actual task durations */} - {elapsedTime && !currentSessionBatchState.isStopping && ( + {/* Elapsed time - wall clock time since run started */} + {elapsedTime && ( {elapsedTime} @@ -523,7 +537,7 @@ export const RightPanel = forwardRef(function
{/* Overall completed count with loop info */} -
+
{currentSessionBatchState.isStopping ? 'Waiting for current task to complete before stopping...' @@ -535,7 +549,7 @@ export const RightPanel = forwardRef(function {/* Loop iteration indicator */} {currentSessionBatchState.loopEnabled && ( Loop {currentSessionBatchState.loopIteration + 1} of {currentSessionBatchState.maxLoops ?? '∞'} diff --git a/src/renderer/components/SendToAgentModal.tsx b/src/renderer/components/SendToAgentModal.tsx index a5793866e..c1e0dea22 100644 --- a/src/renderer/components/SendToAgentModal.tsx +++ b/src/renderer/components/SendToAgentModal.tsx @@ -14,7 +14,7 @@ */ import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react'; -import { Search, ArrowRight, Check, X, Loader2, Circle } from 'lucide-react'; +import { Search, ArrowRight, X, Loader2, Circle } from 'lucide-react'; import type { Theme, Session, AITab, ToolType } from '../types'; import type { MergeResult } from '../types/contextMerge'; import { fuzzyMatchWithScore } from '../utils/search'; diff --git a/src/renderer/components/SessionItem.tsx b/src/renderer/components/SessionItem.tsx index 5dc7b12d5..20f325b9a 100644 --- a/src/renderer/components/SessionItem.tsx +++ b/src/renderer/components/SessionItem.tsx @@ -211,7 +211,10 @@ export const SessionItem = memo(function SessionItem({ {isInBatch && (
@@ -265,11 +268,11 @@ export const SessionItem = memo(function SessionItem({ {/* AI Status Indicator with Unread Badge - ml-auto ensures it aligns to right edge */}
- Delete Worktree + Remove Worktree )} @@ -472,6 +472,17 @@ function HamburgerMenuContent({
+
{session.state} • {session.toolType}
@@ -788,7 +814,7 @@ export function SessionList(props: SessionListProps) { setLiveOverlayOpen, liveOverlayRef, cloudflaredInstalled, - cloudflaredChecked, + cloudflaredChecked: _cloudflaredChecked, tunnelStatus, tunnelUrl, tunnelError, @@ -916,7 +942,7 @@ export function SessionList(props: SessionListProps) { }; // Helper: Check if a session has worktree children - const hasWorktreeChildren = (sessionId: string): boolean => { + const _hasWorktreeChildren = (sessionId: string): boolean => { return sessions.some(s => s.parentSessionId === sessionId); }; @@ -924,7 +950,7 @@ export function SessionList(props: SessionListProps) { const renderCollapsedPill = ( session: Session, keyPrefix: string, - onExpand: () => void + _onExpand: () => void ) => { const worktreeChildren = getWorktreeChildren(session.id); const allSessions = [session, ...worktreeChildren]; @@ -941,15 +967,16 @@ export function SessionList(props: SessionListProps) { const hasUnreadTabs = s.aiTabs?.some(tab => tab.hasUnread); const isFirst = idx === 0; const isLast = idx === allSessions.length - 1; + const isInBatch = activeBatchSessionIds.includes(s.id); return (
@@ -1069,7 +1097,7 @@ export function SessionList(props: SessionListProps) { > {/* Worktree children list */}
- {worktreeChildren.sort((a, b) => compareSessionNames(a.worktreeBranch || a.name, b.worktreeBranch || b.name)).map(child => { + {worktreeChildren.sort((a, b) => compareSessionNames(a.name, b.name)).map(child => { const childGlobalIdx = sortedSessions.findIndex(s => s.id === child.id); const isChildKeyboardSelected = activeFocus === 'sidebar' && childGlobalIdx === selectedSidebarIndex; return ( @@ -1187,7 +1215,7 @@ export function SessionList(props: SessionListProps) { setPreFilterBookmarksCollapsed(null); } } - // eslint-disable-next-line react-hooks/exhaustive-deps + }, [sessionFilterOpen]); // Temporarily expand groups when filtering to show matching sessions @@ -1227,7 +1255,7 @@ export function SessionList(props: SessionListProps) { setGroups(prev => prev.map(g => ({ ...g, collapsed: true }))); setBookmarksCollapsed(false); } - // eslint-disable-next-line react-hooks/exhaustive-deps + }, [sessionFilter]); // Get the jump number (1-9, 0=10th) for a session based on its position in visibleSessions @@ -2069,6 +2097,7 @@ export function SessionList(props: SessionListProps) { theme={theme} gitFileCount={gitFileCounts.get(session.id)} groupName={groups.find(g => g.id === session.groupId)?.name} + isInBatch={isInBatch} />
diff --git a/src/renderer/components/SessionListItem.tsx b/src/renderer/components/SessionListItem.tsx index 143eaf7d1..1d5fce452 100644 --- a/src/renderer/components/SessionListItem.tsx +++ b/src/renderer/components/SessionListItem.tsx @@ -28,7 +28,7 @@ import { } from 'lucide-react'; import type { Theme } from '../types'; import { formatSize, formatRelativeTime } from '../utils/formatters'; -import type { ClaudeSession } from '../hooks/useSessionViewer'; +import type { ClaudeSession } from '../hooks'; /** * Search result info for content-based searches diff --git a/src/renderer/components/SettingsModal.tsx b/src/renderer/components/SettingsModal.tsx index f0abdfb8d..4e55d3d48 100644 --- a/src/renderer/components/SettingsModal.tsx +++ b/src/renderer/components/SettingsModal.tsx @@ -1,6 +1,6 @@ import React, { useState, useEffect, useRef, memo } from 'react'; import { X, Key, Moon, Sun, Keyboard, Check, Terminal, Bell, Cpu, Settings, Palette, Sparkles, History, Download, Bug, Cloud, FolderSync, RotateCcw, Folder, ChevronDown, Plus, Trash2, Brain, AlertTriangle } from 'lucide-react'; -import { useSettings } from '../hooks/useSettings'; +import { useSettings } from '../hooks'; import type { Theme, ThemeColors, ThemeId, Shortcut, ShellInfo, CustomAICommand, LLMProvider } from '../types'; import { CustomThemeBuilder } from './CustomThemeBuilder'; import { useLayerStack } from '../contexts/LayerStackContext'; @@ -244,7 +244,7 @@ export const SettingsModal = memo(function SettingsModal(props: SettingsModalPro // Sync/storage location state const [defaultStoragePath, setDefaultStoragePath] = useState(''); - const [currentStoragePath, setCurrentStoragePath] = useState(''); + const [_currentStoragePath, setCurrentStoragePath] = useState(''); const [customSyncPath, setCustomSyncPath] = useState(undefined); const [syncRestartRequired, setSyncRestartRequired] = useState(false); const [syncMigrating, setSyncMigrating] = useState(false); diff --git a/src/renderer/components/SpecKitCommandsPanel.tsx b/src/renderer/components/SpecKitCommandsPanel.tsx index 3a23303e6..abbb66e77 100644 --- a/src/renderer/components/SpecKitCommandsPanel.tsx +++ b/src/renderer/components/SpecKitCommandsPanel.tsx @@ -1,7 +1,7 @@ import React, { useState, useRef, useEffect } from 'react'; import { Edit2, Save, X, RotateCcw, RefreshCw, ExternalLink, ChevronDown, ChevronRight, Wand2 } from 'lucide-react'; import type { Theme, SpecKitCommand, SpecKitMetadata } from '../types'; -import { useTemplateAutocomplete } from '../hooks/useTemplateAutocomplete'; +import { useTemplateAutocomplete } from '../hooks'; import { TemplateAutocompleteDropdown } from './TemplateAutocompleteDropdown'; interface SpecKitCommandsPanelProps { diff --git a/src/renderer/components/StandingOvationOverlay.tsx b/src/renderer/components/StandingOvationOverlay.tsx index 5b2a153a9..58358675d 100644 --- a/src/renderer/components/StandingOvationOverlay.tsx +++ b/src/renderer/components/StandingOvationOverlay.tsx @@ -112,7 +112,7 @@ export function StandingOvationOverlay({ // Fire confetti on mount only - empty deps to run once useEffect(() => { fireConfetti(); - // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); // Handle graceful close with confetti diff --git a/src/renderer/components/TabBar.tsx b/src/renderer/components/TabBar.tsx index ed0bbdea1..d45433871 100644 --- a/src/renderer/components/TabBar.tsx +++ b/src/renderer/components/TabBar.tsx @@ -1,6 +1,6 @@ import React, { useState, useRef, useCallback, useEffect } from 'react'; import { createPortal } from 'react-dom'; -import { X, Plus, Star, Copy, Edit2, Mail, Pencil, Search, GitMerge, ArrowRightCircle, Minimize2 } from 'lucide-react'; +import { X, Plus, Star, Copy, Edit2, Mail, Pencil, Search, GitMerge, ArrowRightCircle, Minimize2, Clipboard } from 'lucide-react'; import type { AITab, Theme } from '../types'; import { hasDraft } from '../utils/tabHelpers'; @@ -21,6 +21,8 @@ interface TabBarProps { onSendToAgent?: (tabId: string) => void; /** Handler to summarize and continue in a new tab */ onSummarizeAndContinue?: (tabId: string) => void; + /** Handler to copy conversation context to clipboard */ + onCopyContext?: (tabId: string) => void; showUnreadOnly?: boolean; onToggleUnreadFilter?: () => void; onOpenTabSearch?: () => void; @@ -49,6 +51,8 @@ interface TabProps { onSendToAgent?: () => void; /** Handler to summarize and continue in a new tab */ onSummarizeAndContinue?: () => void; + /** Handler to copy conversation context to clipboard */ + onCopyContext?: () => void; shortcutHint?: number | null; registerRef?: (el: HTMLDivElement | null) => void; hasDraft?: boolean; @@ -118,6 +122,7 @@ function Tab({ onMergeWith, onSendToAgent, onSummarizeAndContinue, + onCopyContext, shortcutHint, registerRef, hasDraft @@ -228,6 +233,12 @@ function Tab({ setOverlayOpen(false); }; + const handleCopyContextClick = (e: React.MouseEvent) => { + e.stopPropagation(); + onCopyContext?.(); + setOverlayOpen(false); + }; + const displayName = getTabDisplayName(tab); // Browser-style tab: all tabs have borders, active tab "connects" to content @@ -445,10 +456,22 @@ function Tab({ {/* Context Management Section - divider and grouped options */} - {(tab.agentSessionId || (tab.logs?.length ?? 0) >= 5) && (onMergeWith || onSendToAgent || onSummarizeAndContinue) && ( + {(tab.agentSessionId || (tab.logs?.length ?? 0) >= 1) && (onMergeWith || onSendToAgent || onSummarizeAndContinue || onCopyContext) && (
)} + {/* Context: Copy to Clipboard */} + {(tab.logs?.length ?? 0) >= 1 && onCopyContext && ( + + )} + {/* Context: Compact */} {(tab.logs?.length ?? 0) >= 5 && onSummarizeAndContinue && (
); -}); +})); TerminalOutput.displayName = 'TerminalOutput'; diff --git a/src/renderer/components/ThinkingStatusPill.tsx b/src/renderer/components/ThinkingStatusPill.tsx index e34e57124..084e8fd59 100644 --- a/src/renderer/components/ThinkingStatusPill.tsx +++ b/src/renderer/components/ThinkingStatusPill.tsx @@ -187,7 +187,7 @@ const AutoRunPill = memo(({ className="text-xs font-semibold shrink-0" style={{ color: theme.colors.accent }} > - {isStopping ? 'AutoRun Stopping...' : 'AutoRun'} + AutoRun {/* Worktree indicator */} @@ -237,14 +237,15 @@ const AutoRunPill = memo(({ style={{ backgroundColor: theme.colors.border }} />