ros/automaker
1
0
Fork 0
mirror of https://github.com/AutoMaker-Org/automaker.git synced 2026-03-17 22:13:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

Bug fixes and stability improvements (#815)

Browse Source 
* fix(copilot): correct tool.execution_complete event handling

The CopilotProvider was using incorrect event type and data structure
for tool execution completion events from the @github/copilot-sdk,
causing tool call outputs to be empty.

Changes:
- Update event type from 'tool.execution_end' to 'tool.execution_complete'
- Fix data structure to use nested result.content instead of flat result
- Fix error structure to use error.message instead of flat error
- Add success field to match SDK event structure
- Add tests for empty and missing result handling

This aligns with the official @github/copilot-sdk v0.1.16 types
defined in session-events.d.ts.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

* test(copilot): add edge case test for error with code field

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

* refactor(copilot): improve error handling and code quality

Code review improvements:
- Extract magic string '[ERROR]' to TOOL_ERROR_PREFIX constant
- Add null-safe error handling with direct error variable assignment
- Include error codes in error messages for better debugging
- Add JSDoc documentation for tool.execution_complete handler
- Update tests to verify error codes are displayed
- Add missing tool_use_id assertion in error test

These changes improve:
- Code maintainability (no magic strings)
- Debugging experience (error codes now visible)
- Type safety (explicit null checks)
- Test coverage (verify error code formatting)

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

* Changes from fix/bug-fixes-1-0

* test(copilot): add edge case test for error with code field

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

* Changes from fix/bug-fixes-1-0

* fix: Handle detached HEAD state in worktree discovery and recovery

* fix: Remove unused isDevServerStarting prop and md: breakpoint classes

* fix: Add missing dependency and sanitize persisted cache data

* feat: Ensure NODE_ENV is set to test in vitest configs

* feat: Configure Playwright to run only E2E tests

* fix: Improve PR tracking and dev server lifecycle management

* feat: Add settings-based defaults for planning mode, model config, and custom providers. Fixes #816

* feat: Add worktree and branch selector to graph view

* fix: Add timeout and error handling for worktree HEAD ref resolution

* fix: use absolute icon path and place icon outside asar on Linux

The hicolor icon theme index only lists sizes up to 512x512, so an icon
installed only at 1024x1024 is invisible to GNOME/KDE's theme resolver,
causing both the app launcher and taskbar to show a generic icon.
Additionally, BrowserWindow.icon cannot be read by the window manager
when the file is inside app.asar.

- extraResources: copy logo_larger.png to resources/ (outside asar) so
  it lands at /opt/Automaker/resources/logo_larger.png on install
- linux.desktop.Icon: set to the absolute resources path, bypassing the
  hicolor theme lookup and its size constraints entirely
- icon-manager.ts: on Linux production use process.resourcesPath so
  BrowserWindow receives a real filesystem path the WM can read directly

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* fix: use linux.desktop.entry for custom desktop Icon field

electron-builder v26 rejects arbitrary keys in linux.desktop — the
correct schema wraps custom .desktop overrides inside desktop.entry.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* fix: set desktop name on Linux so taskbar uses the correct app icon

Without app.setDesktopName(), the window manager cannot associate the
running Electron process with automaker.desktop. GNOME/KDE fall back to
_NET_WM_ICON which defaults to Electron's own bundled icon.

Calling app.setDesktopName('automaker.desktop') before any window is
created sets the _GTK_APPLICATION_ID hint and XDG app_id so the WM
picks up the desktop entry's Icon for the taskbar.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* Fix: memory and context views mobile friendly (#818)

* Changes from fix/memory-and-context-mobile-friendly

* fix: Improve file extension detection and add path traversal protection

* refactor: Extract file extension utilities and add path traversal guards

Code review improvements:
- Extract isMarkdownFilename and isImageFilename to shared image-utils.ts
- Remove duplicated code from context-view.tsx and memory-view.tsx
- Add path traversal guard for context fixture utilities (matching memory)
- Add 7 new tests for context fixture path traversal protection
- Total 61 tests pass

Addresses code review feedback from PR #813

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* test: Add e2e tests for profiles crud and board background persistence

* Update apps/ui/playwright.config.ts

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

* fix: Add robust test navigation handling and file filtering

* fix: Format NODE_OPTIONS configuration on single line

* test: Update profiles and board background persistence tests

* test: Replace iPhone 13 Pro with Pixel 5 for mobile test consistency

* Update apps/ui/src/components/views/context-view.tsx

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

* chore: Remove test project directory

* feat: Filter context files by type and improve mobile menu visibility

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

* fix: Improve test reliability and localhost handling

* chore: Use explicit TEST_USE_EXTERNAL_BACKEND env var for server cleanup

* feat: Add E2E/CI mock mode for provider factory and auth verification

* feat: Add remoteBranch parameter to pull and rebase operations

* chore: Enhance E2E testing setup with worker isolation and auth state management

- Updated .gitignore to include worker-specific test fixtures.
- Modified e2e-tests.yml to implement test sharding for improved CI performance.
- Refactored global setup to authenticate once and save session state for reuse across tests.
- Introduced worker-isolated fixture paths to prevent conflicts during parallel test execution.
- Improved test navigation and loading handling for better reliability.
- Updated various test files to utilize new auth state management and fixture paths.

* fix: Update Playwright configuration and improve test reliability

- Increased the number of workers in Playwright configuration for better parallelism in CI environments.
- Enhanced the board background persistence test to ensure dropdown stability by waiting for the list to populate before interaction, improving test reliability.

* chore: Simplify E2E test configuration and enhance mock implementations

- Updated e2e-tests.yml to run tests in a single shard for streamlined CI execution.
- Enhanced unit tests for worktree list handling by introducing a mock for execGitCommand, improving test reliability and coverage.
- Refactored setup functions to better manage command mocks for git operations in tests.
- Improved error handling in mkdirSafe function to account for undefined stats in certain environments.

* refactor: Improve test configurations and enhance error handling

- Updated Playwright configuration to clear VITE_SERVER_URL, ensuring the frontend uses the Vite proxy and preventing cookie domain mismatches.
- Enhanced MergeRebaseDialog logic to normalize selectedBranch for better handling of various ref formats.
- Improved global setup with a more robust backend health check, throwing an error if the backend is not healthy after retries.
- Refactored project creation tests to handle file existence checks more reliably.
- Added error handling for missing E2E source fixtures to guide setup process.
- Enhanced memory navigation to handle sandbox dialog visibility more effectively.

* refactor: Enhance Git command execution and improve test configurations

- Updated Git command execution to merge environment paths correctly, ensuring proper command execution context.
- Refactored the Git initialization process to handle errors more gracefully and ensure user configuration is set before creating the initial commit.
- Improved test configurations by updating Playwright test identifiers for better clarity and consistency across different project states.
- Enhanced cleanup functions in tests to handle directory removal more robustly, preventing errors during test execution.

* fix: Resolve React hooks errors from duplicate instances in dependency tree

* style: Format alias configuration for improved readability

---------

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Co-authored-by: DhanushSantosh <dhanushsantoshs05@gmail.com>
Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
This commit is contained in:
gsxdsm
2026-02-27 17:03:29 -08:00
committed by GitHub
parent 70d400793b
commit 0196911d59
234 changed files with 15881 additions and 2916 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/ui/src/components/dialogs/file-browser-dialog.tsx
View File

@@ -177,7 +177,7 @@ export function FileBrowserDialog({
onSelect(currentPath);
onOpenChange(false);
}
}, [currentPath, onSelect, onOpenChange]);
}, [currentPath, onSelect, onOpenChange, addRecentFolder]);
// Handle Command/Ctrl+Enter keyboard shortcut to select current folder
useEffect(() => {

35
apps/ui/src/components/dialogs/pr-comment-resolution-dialog.tsx
View File

@@ -37,7 +37,7 @@ import { Switch } from '@/components/ui/switch';
import { Label } from '@/components/ui/label';
import { Spinner } from '@/components/ui/spinner';
import { Markdown } from '@/components/ui/markdown';
import { cn, modelSupportsThinking, generateUUID } from '@/lib/utils';
import { cn, generateUUID, normalizeModelEntry } from '@/lib/utils';
import { useAppStore } from '@/store/app-store';
import { useGitHubPRReviewComments } from '@/hooks/queries';
import { useCreateFeature, useResolveReviewThread } from '@/hooks/mutations';
@@ -45,7 +45,7 @@ import { toast } from 'sonner';
import type { PRReviewComment } from '@/lib/electron';
import type { Feature } from '@/store/app-store';
import type { PhaseModelEntry } from '@automaker/types';
import { supportsReasoningEffort, normalizeThinkingLevelForModel } from '@automaker/types';
import { normalizeThinkingLevelForModel } from '@automaker/types';
import { resolveModelString } from '@automaker/model-resolver';
import { PhaseModelSelector } from '@/components/views/settings-view/model-defaults';
@@ -62,6 +62,8 @@ export interface PRCommentResolutionPRInfo {
title: string;
/** The branch name (headRefName) associated with this PR, used to assign features to the correct worktree */
headRefName?: string;
/** The URL of the PR, used to set prUrl on created features */
url?: string;
}
interface PRCommentResolutionDialogProps {
@@ -730,14 +732,9 @@ export function PRCommentResolutionDialog({
const selectedComments = comments.filter((c) => selectedIds.has(c.id));
// Resolve model settings from the current model entry
const selectedModel = resolveModelString(modelEntry.model);
const normalizedThinking = modelSupportsThinking(selectedModel)
? modelEntry.thinkingLevel || 'none'
: 'none';
const normalizedReasoning = supportsReasoningEffort(selectedModel)
? modelEntry.reasoningEffort || 'none'
: 'none';
// Resolve and normalize model settings
const normalizedEntry = normalizeModelEntry(modelEntry);
const selectedModel = resolveModelString(normalizedEntry.model);
setIsCreating(true);
setCreationErrors([]);
@@ -753,8 +750,13 @@ export function PRCommentResolutionDialog({
steps: [],
status: 'backlog',
model: selectedModel,
thinkingLevel: normalizedThinking,
reasoningEffort: normalizedReasoning,
thinkingLevel: normalizedEntry.thinkingLevel,
reasoningEffort: normalizedEntry.reasoningEffort,
providerId: normalizedEntry.providerId,
planningMode: 'skip',
requirePlanApproval: false,
dependencies: [],
...(pr.url ? { prUrl: pr.url } : {}),
// Associate feature with the PR's branch so it appears on the correct worktree
...(pr.headRefName ? { branchName: pr.headRefName } : {}),
};
@@ -779,8 +781,13 @@ export function PRCommentResolutionDialog({
steps: [],
status: 'backlog',
model: selectedModel,
thinkingLevel: normalizedThinking,
reasoningEffort: normalizedReasoning,
thinkingLevel: normalizedEntry.thinkingLevel,
reasoningEffort: normalizedEntry.reasoningEffort,
providerId: normalizedEntry.providerId,
planningMode: 'skip',
requirePlanApproval: false,
dependencies: [],
...(pr.url ? { prUrl: pr.url } : {}),
// Associate feature with the PR's branch so it appears on the correct worktree
...(pr.headRefName ? { branchName: pr.headRefName } : {}),
};

3
apps/ui/src/components/layout/sidebar/hooks/use-navigation.ts
View File

@@ -67,7 +67,7 @@ export function useNavigation({
hideContext,
hideTerminal,
currentProject,
projects,
projects: _projects,
projectHistory,
navigate,
toggleSidebar,
@@ -325,7 +325,6 @@ export function useNavigation({
currentProject,
navigate,
toggleSidebar,
projects.length,
handleOpenFolder,
projectHistory.length,
cyclePrevProject,

5
apps/ui/src/components/shared/model-override-trigger.tsx
View File

@@ -48,12 +48,13 @@ export function ModelOverrideTrigger({
const globalDefault = phaseModels[phase];
const normalizedGlobal = normalizeEntry(globalDefault);
// Compare models (and thinking levels if both have them)
// Compare models, thinking levels, and provider IDs
const modelsMatch = entry.model === normalizedGlobal.model;
const thinkingMatch =
(entry.thinkingLevel || 'none') === (normalizedGlobal.thinkingLevel || 'none');
const providerMatch = entry.providerId === normalizedGlobal.providerId;
if (modelsMatch && thinkingMatch) {
if (modelsMatch && thinkingMatch && providerMatch) {
onModelChange(null); // Clear override
} else {
onModelChange(entry); // Set override

3
apps/ui/src/components/ui/description-image-dropzone.tsx
View File

@@ -244,6 +244,7 @@ export function DescriptionImageDropZone({
onTextFilesChange,
previewImages,
saveImageToTemp,
setPreviewImages,
]
);
@@ -309,7 +310,7 @@ export function DescriptionImageDropZone({
return newMap;
});
},
[images, onImagesChange]
[images, onImagesChange, setPreviewImages]
);
const removeTextFile = useCallback(

7
apps/ui/src/components/ui/git-diff-panel.tsx
View File

@@ -384,7 +384,8 @@ export function GitDiffPanel({
const queryError = useWorktrees ? worktreeError : gitError;
// Extract files, diff content, and merge state from the data
const files: FileStatus[] = diffsData?.files ?? [];
// Use useMemo to stabilize the files array reference to prevent unnecessary re-renders
const files = useMemo(() => diffsData?.files ?? [], [diffsData?.files]);
const diffContent = diffsData?.diff ?? '';
const mergeState: MergeStateInfo | undefined = diffsData?.mergeState;
const error = queryError
@@ -584,7 +585,7 @@ export function GitDiffPanel({
() => setStagingInProgress(new Set(allPaths)),
() => setStagingInProgress(new Set())
);
}, [worktreePath, projectPath, useWorktrees, enableStaging, files, executeStagingAction]);
}, [worktreePath, useWorktrees, enableStaging, files, executeStagingAction]);
const handleUnstageAll = useCallback(async () => {
const stagedFiles = files.filter((f) => {
@@ -607,7 +608,7 @@ export function GitDiffPanel({
() => setStagingInProgress(new Set(allPaths)),
() => setStagingInProgress(new Set())
);
}, [worktreePath, projectPath, useWorktrees, enableStaging, files, executeStagingAction]);
}, [worktreePath, useWorktrees, enableStaging, files, executeStagingAction]);
// Compute merge summary
const mergeSummary = useMemo(() => {

1
apps/ui/src/components/ui/spinner.tsx
View File

@@ -37,6 +37,7 @@ export function Spinner({ size = 'md', variant = 'primary', className }: Spinner
<Loader2
className={cn(sizeClasses[size], 'animate-spin', variantClasses[variant], className)}
aria-hidden="true"
data-testid="spinner"
/>
);
}

4
apps/ui/src/components/ui/xterm-log-viewer.tsx
View File

@@ -178,7 +178,9 @@ export const XtermLogViewer = forwardRef<XtermLogViewerRef, XtermLogViewerProps>
fitAddonRef.current = null;
setIsReady(false);
};
}, []); // Only run once on mount
// Only run once on mount - intentionally excluding deps to prevent re-initialization
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
// Update theme when it changes
useEffect(() => {

58
apps/ui/src/components/views/board-view.tsx
View File

@@ -34,6 +34,7 @@ import type {
BacklogPlanResult,
FeatureStatusWithPipeline,
FeatureTemplate,
ReasoningEffort,
} from '@automaker/types';
import { pathsEqual } from '@/lib/utils';
import { toast } from 'sonner';
@@ -977,23 +978,27 @@ export function BoardView() {
// Helper that creates a feature and immediately starts it (used by conflict handlers and the Make button)
const handleAddAndStartFeature = useCallback(
async (featureData: Parameters<typeof handleAddFeature>[0]) => {
// Capture existing feature IDs before adding
const featuresBeforeIds = new Set(useAppStore.getState().features.map((f) => f.id));
async (featureData: Parameters<typeof handleAddFeature>[0]): Promise<string | null> => {
let createdFeatureId: string | null = null;
try {
// Create feature directly with in_progress status to avoid brief backlog flash
await handleAddFeature({ ...featureData, initialStatus: 'in_progress' });
const createdFeature = await handleAddFeature({
...featureData,
initialStatus: 'in_progress',
});
createdFeatureId = createdFeature?.id ?? null;
} catch (error) {
logger.error('Failed to create feature:', error);
toast.error('Failed to create feature', {
description: error instanceof Error ? error.message : 'An error occurred',
});
return;
return null;
}
// Find the newly created feature by looking for an ID that wasn't in the original set
const latestFeatures = useAppStore.getState().features;
const newFeature = latestFeatures.find((f) => !featuresBeforeIds.has(f.id));
const newFeature = createdFeatureId
? latestFeatures.find((f) => f.id === createdFeatureId)
: undefined;
if (newFeature) {
try {
@@ -1010,6 +1015,8 @@ export function BoardView() {
description: 'The feature was created but could not be started automatically.',
});
}
return createdFeatureId;
},
[handleAddFeature, handleStartImplementation]
);
@@ -1018,7 +1025,12 @@ export function BoardView() {
const handleQuickAdd = useCallback(
async (
description: string,
modelEntry: { model: string; thinkingLevel?: string; reasoningEffort?: string }
modelEntry: {
model: string;
thinkingLevel?: string;
reasoningEffort?: string;
providerId?: string;
}
) => {
// Generate a title from the first line of the description
const title = description.split('\n')[0].substring(0, 100);
@@ -1032,7 +1044,8 @@ export function BoardView() {
skipTests: defaultSkipTests,
model: resolveModelString(modelEntry.model) as ModelAlias,
thinkingLevel: (modelEntry.thinkingLevel as ThinkingLevel) || 'none',
reasoningEffort: modelEntry.reasoningEffort,
reasoningEffort: modelEntry.reasoningEffort as ReasoningEffort,
providerId: modelEntry.providerId,
branchName: addFeatureUseSelectedWorktreeBranch ? selectedWorktreeBranch : undefined,
priority: 2,
planningMode: useAppStore.getState().defaultPlanningMode ?? 'skip',
@@ -1053,7 +1066,12 @@ export function BoardView() {
const handleQuickAddAndStart = useCallback(
async (
description: string,
modelEntry: { model: string; thinkingLevel?: string; reasoningEffort?: string }
modelEntry: {
model: string;
thinkingLevel?: string;
reasoningEffort?: string;
providerId?: string;
}
) => {
// Generate a title from the first line of the description
const title = description.split('\n')[0].substring(0, 100);
@@ -1067,7 +1085,8 @@ export function BoardView() {
skipTests: defaultSkipTests,
model: resolveModelString(modelEntry.model) as ModelAlias,
thinkingLevel: (modelEntry.thinkingLevel as ThinkingLevel) || 'none',
reasoningEffort: modelEntry.reasoningEffort,
reasoningEffort: modelEntry.reasoningEffort as ReasoningEffort,
providerId: modelEntry.providerId,
branchName: addFeatureUseSelectedWorktreeBranch ? selectedWorktreeBranch : undefined,
priority: 2,
planningMode: useAppStore.getState().defaultPlanningMode ?? 'skip',
@@ -1104,6 +1123,8 @@ export function BoardView() {
title: prInfo.title,
// Pass the worktree's branch so features are created on the correct worktree
headRefName: worktree.branch,
// Pass the PR URL so features are created with prUrl set
url: prInfo.url,
});
setShowPRCommentDialog(true);
}, []);
@@ -1132,11 +1153,22 @@ export function BoardView() {
priority: 1,
planningMode: 'skip' as const,
requirePlanApproval: false,
dependencies: [],
};
await handleAddAndStartFeature(featureData);
const createdFeatureId = await handleAddAndStartFeature(featureData);
// Set prUrl on the created feature if the PR has a URL
if (prInfo.url && createdFeatureId) {
updateFeature(createdFeatureId, { prUrl: prInfo.url });
try {
await persistFeatureUpdate(createdFeatureId, { prUrl: prInfo.url });
} catch (error) {
logger.error('Failed to persist PR URL on created feature:', error);
}
}
},
[handleAddAndStartFeature, defaultSkipTests]
[handleAddAndStartFeature, defaultSkipTests, updateFeature, persistFeatureUpdate]
);
// Handler for resolving conflicts - opens dialog to select remote branch, then creates a feature

32
apps/ui/src/components/views/board-view/components/kanban-card/agent-info-panel.tsx
View File

@@ -13,6 +13,7 @@ import { getProviderIconForModel } from '@/components/ui/provider-icon';
import { useFeature, useAgentOutput } from '@/hooks/queries';
import { queryKeys } from '@/lib/query-keys';
import { getFirstNonEmptySummary } from '@/lib/summary-selection';
import { useAppStore } from '@/store/app-store';
/**
* Formats thinking level for compact display
@@ -64,6 +65,21 @@ export const AgentInfoPanel = memo(function AgentInfoPanel({
const queryClient = useQueryClient();
const [isSummaryDialogOpen, setIsSummaryDialogOpen] = useState(false);
const [isTodosExpanded, setIsTodosExpanded] = useState(false);
// Get providers from store for provider-aware model name display
// This allows formatModelName to show provider-specific model names (e.g., "GLM 4.7" instead of "Sonnet 4.5")
// when a feature was executed using a Claude-compatible provider
const claudeCompatibleProviders = useAppStore((state) => state.claudeCompatibleProviders);
// Memoize the format options to avoid recreating the object on every render
const modelFormatOptions = useMemo(
() => ({
providerId: feature.providerId,
claudeCompatibleProviders,
}),
[feature.providerId, claudeCompatibleProviders]
);
// Track real-time task status updates from WebSocket events
const [taskStatusMap, setTaskStatusMap] = useState<
Map<string, 'pending' | 'in_progress' | 'completed'>
@@ -74,7 +90,7 @@ export const AgentInfoPanel = memo(function AgentInfoPanel({
const [lastWsEventTimestamp, setLastWsEventTimestamp] = useState<number | null>(null);
// Determine if we should poll for updates
const shouldFetchData = feature.status !== 'backlog';
const shouldFetchData = feature.status !== 'backlog' && feature.status !== 'merge_conflict';
// Track whether we're receiving WebSocket events (within threshold)
// Use a state to trigger re-renders when the WebSocket connection becomes stale
@@ -242,9 +258,7 @@ export const AgentInfoPanel = memo(function AgentInfoPanel({
return agentInfo?.todos || [];
}, [
freshPlanSpec,
feature.planSpec?.tasks,
feature.planSpec?.tasksCompleted,
feature.planSpec?.currentTaskId,
feature.planSpec,
agentInfo?.todos,
taskStatusMap,
taskSummaryMap,
@@ -314,7 +328,7 @@ export const AgentInfoPanel = memo(function AgentInfoPanel({
}, [feature.id, shouldListenToEvents]);
// Model/Preset Info for Backlog Cards
if (feature.status === 'backlog') {
if (feature.status === 'backlog' || feature.status === 'merge_conflict') {
const provider = getProviderFromModel(feature.model);
const isCodex = provider === 'codex';
const isClaude = provider === 'claude';
@@ -327,7 +341,9 @@ export const AgentInfoPanel = memo(function AgentInfoPanel({
const ProviderIcon = getProviderIconForModel(feature.model);
return <ProviderIcon className="w-3 h-3" />;
})()}
<span className="font-medium">{formatModelName(feature.model ?? DEFAULT_MODEL)}</span>
<span className="font-medium">
{formatModelName(feature.model ?? DEFAULT_MODEL, modelFormatOptions)}
</span>
</div>
{isClaude && feature.thinkingLevel && feature.thinkingLevel !== 'none' ? (
<div className="flex items-center gap-1 text-purple-400">
@@ -373,7 +389,9 @@ export const AgentInfoPanel = memo(function AgentInfoPanel({
const ProviderIcon = getProviderIconForModel(feature.model);
return <ProviderIcon className="w-3 h-3" />;
})()}
<span className="font-medium">{formatModelName(feature.model ?? DEFAULT_MODEL)}</span>
<span className="font-medium">
{formatModelName(feature.model ?? DEFAULT_MODEL, modelFormatOptions)}
</span>
</div>
{agentInfo?.currentPhase && (
<div

32
apps/ui/src/components/views/board-view/components/kanban-card/card-actions.tsx
View File

@@ -39,7 +39,7 @@ export const CardActions = memo(function CardActions({
feature,
isCurrentAutoTask,
isRunningTask = false,
hasContext: _hasContext,
hasContext = false,
shortcutKey,
isSelectionMode = false,
onEdit,
@@ -54,6 +54,8 @@ export const CardActions = memo(function CardActions({
onViewPlan,
onApprovePlan,
}: CardActionsProps) {
const showBacklogLogsButton = hasContext && !!onViewOutput;
// Hide all actions when in selection mode
if (isSelectionMode) {
return null;
@@ -243,7 +245,7 @@ export const CardActions = memo(function CardActions({
onViewOutput();
}}
onPointerDown={(e) => e.stopPropagation()}
data-testid={`view-output-inprogress-${feature.id}`}
data-testid={`view-output-${feature.id}`}
>
<FileText className="w-3 h-3" />
</Button>
@@ -348,6 +350,7 @@ export const CardActions = memo(function CardActions({
{!isCurrentAutoTask &&
isRunningTask &&
(feature.status === 'backlog' ||
feature.status === 'merge_conflict' ||
feature.status === 'interrupted' ||
feature.status === 'ready') && (
<>
@@ -395,6 +398,7 @@ export const CardActions = memo(function CardActions({
{!isCurrentAutoTask &&
!isRunningTask &&
(feature.status === 'backlog' ||
feature.status === 'merge_conflict' ||
feature.status === 'interrupted' ||
feature.status === 'ready') && (
<>
@@ -412,6 +416,22 @@ export const CardActions = memo(function CardActions({
<Edit className="w-3 h-3 mr-1" />
Edit
</Button>
{showBacklogLogsButton && (
<Button
variant="outline"
size="sm"
className="h-7 text-xs px-2"
onClick={(e) => {
e.stopPropagation();
onViewOutput();
}}
onPointerDown={(e) => e.stopPropagation()}
data-testid={`view-output-backlog-${feature.id}`}
title="View Logs"
>
<FileText className="w-3 h-3" />
</Button>
)}
{feature.planSpec?.content && onViewPlan && (
<Button
variant="outline"
@@ -440,8 +460,12 @@ export const CardActions = memo(function CardActions({
onPointerDown={(e) => e.stopPropagation()}
data-testid={`make-${feature.id}`}
>
<PlayCircle className="w-3 h-3 mr-1" />
Make
{feature.status === 'merge_conflict' ? (
<RotateCcw className="w-3 h-3 mr-1" />
) : (
<PlayCircle className="w-3 h-3 mr-1" />
)}
{feature.status === 'merge_conflict' ? 'Restart' : 'Make'}
</Button>
)}
</>

70
apps/ui/src/components/views/board-view/components/kanban-card/card-badges.tsx
View File

@@ -3,7 +3,7 @@ import { memo, useEffect, useMemo, useState } from 'react';
import { Feature, useAppStore } from '@/store/app-store';
import { cn } from '@/lib/utils';
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
import { AlertCircle, Lock, Hand, Sparkles, SkipForward } from 'lucide-react';
import { AlertCircle, AlertTriangle, Lock, Hand, Sparkles, SkipForward } from 'lucide-react';
import { getBlockingDependencies } from '@automaker/dependency-resolver';
import { useShallow } from 'zustand/react/shallow';
import { usePipelineConfig } from '@/hooks/queries/use-pipeline';
@@ -18,33 +18,61 @@ interface CardBadgesProps {
/**
* CardBadges - Shows error badges below the card header
* Note: Blocked/Lock badges are now shown in PriorityBadges for visual consistency
* Note: Merge conflict badge is aligned with the top badge row for visual consistency
*/
export const CardBadges = memo(function CardBadges({ feature }: CardBadgesProps) {
if (!feature.error) {
const showMergeConflict = feature.status === 'merge_conflict';
const mergeConflictOffsetClass = feature.priority ? 'left-9' : 'left-2';
if (!feature.error && !showMergeConflict) {
return null;
}
return (
<div className="flex flex-wrap items-center gap-1.5 px-3 pt-1.5 min-h-[24px]">
<>
{/* Merge conflict badge */}
{showMergeConflict && (
<div className={cn('absolute top-2 z-10', mergeConflictOffsetClass)}>
<Tooltip>
<TooltipTrigger asChild>
<div
className={cn(
uniformBadgeClass,
'bg-[var(--status-warning-bg)] border-[var(--status-warning)]/40 text-[var(--status-warning)]'
)}
data-testid={`merge-conflict-badge-${feature.id}`}
>
<AlertTriangle className="w-3.5 h-3.5" />
</div>
</TooltipTrigger>
<TooltipContent side="bottom" className="text-xs max-w-[250px]">
<p>Merge Conflict: automatic merge failed and requires manual resolution</p>
</TooltipContent>
</Tooltip>
</div>
)}
{/* Error badge */}
<Tooltip>
<TooltipTrigger asChild>
<div
className={cn(
uniformBadgeClass,
'bg-[var(--status-error-bg)] border-[var(--status-error)]/40 text-[var(--status-error)]'
)}
data-testid={`error-badge-${feature.id}`}
>
<AlertCircle className="w-3.5 h-3.5" />
</div>
</TooltipTrigger>
<TooltipContent side="bottom" className="text-xs max-w-[250px]">
<p>{feature.error}</p>
</TooltipContent>
</Tooltip>
</div>
{feature.error && (
<div className="flex flex-wrap items-center gap-1.5 px-3 pt-1.5 min-h-[24px]">
<Tooltip>
<TooltipTrigger asChild>
<div
className={cn(
uniformBadgeClass,
'bg-[var(--status-error-bg)] border-[var(--status-error)]/40 text-[var(--status-error)]'
)}
data-testid={`error-badge-${feature.id}`}
>
<AlertCircle className="w-3.5 h-3.5" />
</div>
</TooltipTrigger>
<TooltipContent side="bottom" className="text-xs max-w-[250px]">
<p>{feature.error}</p>
</TooltipContent>
</Tooltip>
</div>
)}
</>
);
});

45
apps/ui/src/components/views/board-view/components/kanban-card/card-header.tsx
View File

@@ -1,4 +1,4 @@
import { memo, useState } from 'react';
import { memo, useState, useMemo } from 'react';
import type { DraggableAttributes, DraggableSyntheticListeners } from '@dnd-kit/core';
import { Feature } from '@/store/app-store';
import { cn } from '@/lib/utils';
@@ -30,6 +30,7 @@ import { CountUpTimer } from '@/components/ui/count-up-timer';
import { formatModelName, DEFAULT_MODEL } from '@/lib/agent-context-parser';
import { DeleteConfirmDialog } from '@/components/ui/delete-confirm-dialog';
import { getProviderIconForModel } from '@/components/ui/provider-icon';
import { useAppStore } from '@/store/app-store';
function DuplicateMenuItems({
onDuplicate,
@@ -107,6 +108,7 @@ interface CardHeaderProps {
isDraggable: boolean;
isCurrentAutoTask: boolean;
isSelectionMode?: boolean;
hasContext?: boolean;
onEdit: () => void;
onDelete: () => void;
onViewOutput?: () => void;
@@ -123,6 +125,7 @@ export const CardHeaderSection = memo(function CardHeaderSection({
isDraggable,
isCurrentAutoTask,
isSelectionMode = false,
hasContext = false,
onEdit,
onDelete,
onViewOutput,
@@ -135,6 +138,21 @@ export const CardHeaderSection = memo(function CardHeaderSection({
}: CardHeaderProps) {
const [isDescriptionExpanded, setIsDescriptionExpanded] = useState(false);
const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
const showBacklogLogsButton = hasContext && !!onViewOutput;
// Get providers from store for provider-aware model name display
// This allows formatModelName to show provider-specific model names (e.g., "GLM 4.7" instead of "Sonnet 4.5")
// when a feature was executed using a Claude-compatible provider
const claudeCompatibleProviders = useAppStore((state) => state.claudeCompatibleProviders);
// Memoize the format options to avoid recreating the object on every render
const modelFormatOptions = useMemo(
() => ({
providerId: feature.providerId,
claudeCompatibleProviders,
}),
[feature.providerId, claudeCompatibleProviders]
);
const handleDeleteClick = (e: React.MouseEvent) => {
e.stopPropagation();
@@ -207,7 +225,9 @@ export const CardHeaderSection = memo(function CardHeaderSection({
<div className="px-2 py-1.5 text-[10px] text-muted-foreground border-t mt-1 pt-1.5">
<div className="flex items-center gap-1">
<ProviderIcon className="w-3 h-3" />
<span>{formatModelName(feature.model ?? DEFAULT_MODEL)}</span>
<span>
{formatModelName(feature.model ?? DEFAULT_MODEL, modelFormatOptions)}
</span>
</div>
</div>
);
@@ -221,6 +241,7 @@ export const CardHeaderSection = memo(function CardHeaderSection({
{!isCurrentAutoTask &&
!isSelectionMode &&
(feature.status === 'backlog' ||
feature.status === 'merge_conflict' ||
feature.status === 'interrupted' ||
feature.status === 'ready') && (
<div className="absolute top-2 right-2 flex items-center gap-1">
@@ -238,6 +259,22 @@ export const CardHeaderSection = memo(function CardHeaderSection({
>
<GitFork className="w-4 h-4" />
</Button>
{showBacklogLogsButton && (
<Button
variant="ghost"
size="sm"
className="h-6 w-6 p-0 hover:bg-white/10 text-muted-foreground hover:text-foreground"
onClick={(e) => {
e.stopPropagation();
onViewOutput?.();
}}
onPointerDown={(e) => e.stopPropagation()}
data-testid={`logs-backlog-${feature.id}`}
title="Logs"
>
<FileText className="w-4 h-4" />
</Button>
)}
<Button
variant="ghost"
size="sm"
@@ -444,7 +481,9 @@ export const CardHeaderSection = memo(function CardHeaderSection({
<div className="px-2 py-1.5 text-[10px] text-muted-foreground border-t mt-1 pt-1.5">
<div className="flex items-center gap-1">
<ProviderIcon className="w-3 h-3" />
<span>{formatModelName(feature.model ?? DEFAULT_MODEL)}</span>
<span>
{formatModelName(feature.model ?? DEFAULT_MODEL, modelFormatOptions)}
</span>
</div>
</div>
);

8
apps/ui/src/components/views/board-view/components/kanban-card/kanban-card.tsx
View File

@@ -131,6 +131,7 @@ export const KanbanCard = memo(function KanbanCard({
!!isCurrentAutoTask &&
!isInExecutionState &&
(feature.status === 'backlog' ||
feature.status === 'merge_conflict' ||
feature.status === 'ready' ||
feature.status === 'interrupted');
// Show running visual treatment for both fully confirmed and stale-status running tasks
@@ -149,6 +150,7 @@ export const KanbanCard = memo(function KanbanCard({
!isSelectionMode &&
!isRunningWithStaleStatus &&
(feature.status === 'backlog' ||
feature.status === 'merge_conflict' ||
feature.status === 'interrupted' ||
feature.status === 'ready' ||
feature.status === 'waiting_approval' ||
@@ -194,7 +196,10 @@ export const KanbanCard = memo(function KanbanCard({
const cardStyle = getCardBorderStyle(cardBorderEnabled, cardBorderOpacity);
// Only allow selection for features matching the selection target
const isSelectable = isSelectionMode && feature.status === selectionTarget;
const isSelectable =
isSelectionMode &&
(feature.status === selectionTarget ||
(selectionTarget === 'backlog' && feature.status === 'merge_conflict'));
const wrapperClasses = cn(
'relative select-none outline-none transition-transform duration-200 ease-out',
@@ -275,6 +280,7 @@ export const KanbanCard = memo(function KanbanCard({
isDraggable={isDraggable}
isCurrentAutoTask={isActivelyRunning}
isSelectionMode={isSelectionMode}
hasContext={hasContext}
onEdit={onEdit}
onDelete={onDelete}
onViewOutput={onViewOutput}

160
apps/ui/src/components/views/board-view/components/list-view/row-actions.tsx
View File

@@ -144,6 +144,7 @@ function getPrimaryAction(
if (
isRunningTask &&
(feature.status === 'backlog' ||
feature.status === 'merge_conflict' ||
feature.status === 'ready' ||
feature.status === 'interrupted') &&
handlers.onForceStop
@@ -156,11 +157,14 @@ function getPrimaryAction(
};
}
// Backlog - implement is primary
if (feature.status === 'backlog' && handlers.onImplement) {
// Backlog-like statuses - implement/restart is primary
if (
(feature.status === 'backlog' || feature.status === 'merge_conflict') &&
handlers.onImplement
) {
return {
icon: PlayCircle,
label: 'Make',
icon: feature.status === 'merge_conflict' ? RotateCcw : PlayCircle,
label: feature.status === 'merge_conflict' ? 'Restart' : 'Make',
onClick: handlers.onImplement,
variant: 'primary',
};
@@ -293,13 +297,16 @@ export const RowActions = memo(function RowActions({
// Use controlled or uncontrolled state
const open = isOpen ?? internalOpen;
const setOpen = (value: boolean) => {
if (onOpenChange) {
onOpenChange(value);
} else {
setInternalOpen(value);
}
};
const setOpen = useCallback(
(value: boolean) => {
if (onOpenChange) {
onOpenChange(value);
} else {
setInternalOpen(value);
}
},
[onOpenChange]
);
const handleOpenChange = useCallback(
(newOpen: boolean) => {
@@ -425,68 +432,77 @@ export const RowActions = memo(function RowActions({
)}
{/* Backlog actions */}
{!isCurrentAutoTask && !isRunningTask && feature.status === 'backlog' && (
<>
<MenuItem icon={Edit} label="Edit" onClick={withClose(handlers.onEdit)} />
{feature.planSpec?.content && handlers.onViewPlan && (
<MenuItem icon={Eye} label="View Plan" onClick={withClose(handlers.onViewPlan)} />
)}
{handlers.onImplement && (
<MenuItem
icon={PlayCircle}
label="Make"
onClick={withClose(handlers.onImplement)}
variant="primary"
/>
)}
{handlers.onSpawnTask && (
<MenuItem
icon={GitFork}
label="Spawn Sub-Task"
onClick={withClose(handlers.onSpawnTask)}
/>
)}
{handlers.onDuplicate && (
<DropdownMenuSub>
<div className="flex items-center">
<DropdownMenuItem
onClick={withClose(handlers.onDuplicate)}
className="flex-1 pr-0 rounded-r-none"
>
<Copy className="w-4 h-4 mr-2" />
Duplicate
</DropdownMenuItem>
{handlers.onDuplicateAsChild && (
<DropdownMenuSubTrigger className="px-1 rounded-l-none border-l border-border/30 h-8" />
)}
</div>
{handlers.onDuplicateAsChild && (
<DropdownMenuSubContent>
<MenuItem
icon={GitFork}
label="Duplicate as Child"
onClick={withClose(handlers.onDuplicateAsChild)}
/>
{handlers.onDuplicateAsChildMultiple && (
<MenuItem
icon={Repeat}
label="Duplicate as Child ×N"
onClick={withClose(handlers.onDuplicateAsChildMultiple)}
/>
{!isCurrentAutoTask &&
!isRunningTask &&
(feature.status === 'backlog' || feature.status === 'merge_conflict') && (
<>
<MenuItem icon={Edit} label="Edit" onClick={withClose(handlers.onEdit)} />
{handlers.onViewOutput && (
<MenuItem
icon={FileText}
label="View Logs"
onClick={withClose(handlers.onViewOutput)}
/>
)}
{feature.planSpec?.content && handlers.onViewPlan && (
<MenuItem icon={Eye} label="View Plan" onClick={withClose(handlers.onViewPlan)} />
)}
{handlers.onImplement && (
<MenuItem
icon={feature.status === 'merge_conflict' ? RotateCcw : PlayCircle}
label={feature.status === 'merge_conflict' ? 'Restart' : 'Make'}
onClick={withClose(handlers.onImplement)}
variant="primary"
/>
)}
{handlers.onSpawnTask && (
<MenuItem
icon={GitFork}
label="Spawn Sub-Task"
onClick={withClose(handlers.onSpawnTask)}
/>
)}
{handlers.onDuplicate && (
<DropdownMenuSub>
<div className="flex items-center">
<DropdownMenuItem
onClick={withClose(handlers.onDuplicate)}
className="flex-1 pr-0 rounded-r-none"
>
<Copy className="w-4 h-4 mr-2" />
Duplicate
</DropdownMenuItem>
{handlers.onDuplicateAsChild && (
<DropdownMenuSubTrigger className="px-1 rounded-l-none border-l border-border/30 h-8" />
)}
</DropdownMenuSubContent>
)}
</DropdownMenuSub>
)}
<DropdownMenuSeparator />
<MenuItem
icon={Trash2}
label="Delete"
onClick={withClose(handlers.onDelete)}
variant="destructive"
/>
</>
)}
</div>
{handlers.onDuplicateAsChild && (
<DropdownMenuSubContent>
<MenuItem
icon={GitFork}
label="Duplicate as Child"
onClick={withClose(handlers.onDuplicateAsChild)}
/>
{handlers.onDuplicateAsChildMultiple && (
<MenuItem
icon={Repeat}
label="Duplicate as Child ×N"
onClick={withClose(handlers.onDuplicateAsChildMultiple)}
/>
)}
</DropdownMenuSubContent>
)}
</DropdownMenuSub>
)}
<DropdownMenuSeparator />
<MenuItem
icon={Trash2}
label="Delete"
onClick={withClose(handlers.onDelete)}
variant="destructive"
/>
</>
)}
{/* In Progress actions - starting/running (no error, force stop available) - mirrors running task actions */}
{!isCurrentAutoTask &&

7
apps/ui/src/components/views/board-view/components/list-view/status-badge.tsx
View File

@@ -23,6 +23,12 @@ const BASE_STATUS_DISPLAY: Record<string, StatusDisplay> = {
bgClass: 'bg-[var(--status-backlog)]/15',
borderClass: 'border-[var(--status-backlog)]/30',
},
merge_conflict: {
label: 'Merge Conflict',
colorClass: 'text-[var(--status-warning)]',
bgClass: 'bg-[var(--status-warning)]/15',
borderClass: 'border-[var(--status-warning)]/30',
},
in_progress: {
label: 'In Progress',
colorClass: 'text-[var(--status-in-progress)]',
@@ -204,6 +210,7 @@ export function getStatusLabel(
export function getStatusOrder(status: FeatureStatusWithPipeline): number {
const baseOrder: Record<string, number> = {
backlog: 0,
merge_conflict: 0,
in_progress: 1,
waiting_approval: 2,
verified: 3,

25
apps/ui/src/components/views/board-view/dialogs/add-feature-dialog.tsx
View File

@@ -24,16 +24,11 @@ import {
import { Play, Cpu, FolderKanban, Settings2 } from 'lucide-react';
import { useNavigate } from '@tanstack/react-router';
import { toast } from 'sonner';
import { cn } from '@/lib/utils';
import { modelSupportsThinking } from '@/lib/utils';
import { cn, normalizeModelEntry } from '@/lib/utils';
import { useAppStore } from '@/store/app-store';
import type { ThinkingLevel, PlanningMode, Feature, FeatureImage } from '@/store/types';
import type { ReasoningEffort, PhaseModelEntry, AgentModel } from '@automaker/types';
import {
supportsReasoningEffort,
normalizeThinkingLevelForModel,
getThinkingLevelsForModel,
} from '@automaker/types';
import { normalizeThinkingLevelForModel, getThinkingLevelsForModel } from '@automaker/types';
import {
PrioritySelector,
WorkModeSelector,
@@ -90,6 +85,7 @@ type FeatureData = {
model: AgentModel;
thinkingLevel: ThinkingLevel;
reasoningEffort: ReasoningEffort;
providerId?: string;
branchName: string;
priority: number;
planningMode: PlanningMode;
@@ -327,13 +323,7 @@ export function AddFeatureDialog({
}
const finalCategory = category || 'Uncategorized';
const selectedModel = modelEntry.model;
const normalizedThinking = modelSupportsThinking(selectedModel)
? modelEntry.thinkingLevel || 'none'
: 'none';
const normalizedReasoning = supportsReasoningEffort(selectedModel)
? modelEntry.reasoningEffort || 'none'
: 'none';
const normalizedEntry = normalizeModelEntry(modelEntry);
// For 'current' mode, use empty string (work on current branch)
// For 'auto' mode, use empty string (will be auto-generated in use-board-actions)
@@ -381,9 +371,10 @@ export function AddFeatureDialog({
imagePaths,
textFilePaths,
skipTests,
model: selectedModel,
thinkingLevel: normalizedThinking,
reasoningEffort: normalizedReasoning,
model: normalizedEntry.model,
thinkingLevel: normalizedEntry.thinkingLevel,
reasoningEffort: normalizedEntry.reasoningEffort,
providerId: normalizedEntry.providerId,
branchName: finalBranchName,
priority,
planningMode,

41
apps/ui/src/components/views/board-view/dialogs/agent-output-modal.constants.ts Normal file
View File

@@ -0,0 +1,41 @@
/**
* Constants for AgentOutputModal component
* Centralizes magic numbers, timeouts, and configuration values
*/
export const MODAL_CONSTANTS = {
// Auto-scroll threshold for detecting when user is at bottom
AUTOSCROLL_THRESHOLD: 50,
// Delay for closing modal after successful completion
MODAL_CLOSE_DELAY_MS: 1500,
// Modal height constraints for different viewports
HEIGHT_CONSTRAINTS: {
MOBILE_MAX_DVH: '85dvh',
SMALL_MAX_VH: '80vh',
TABLET_MAX_VH: '85vh',
},
// Modal width constraints for different viewports
WIDTH_CONSTRAINTS: {
MOBILE_MAX_CALC: 'calc(100% - 2rem)',
SMALL_MAX_VW: '60vw',
TABLET_MAX_VW: '90vw',
TABLET_MAX_WIDTH: '1200px',
},
// View modes
VIEW_MODES: {
SUMMARY: 'summary',
PARSED: 'parsed',
RAW: 'raw',
CHANGES: 'changes',
} as const,
// Component heights (complete Tailwind class fragments for template interpolation)
COMPONENT_HEIGHTS: {
SMALL_MIN: 'sm:min-h-[200px]',
SMALL_MAX: 'sm:max-h-[60vh]',
},
} as const;

6
apps/ui/src/components/views/board-view/dialogs/agent-output-modal.tsx
View File

@@ -26,6 +26,7 @@ import { useAgentOutput, useFeature } from '@/hooks/queries';
import { cn } from '@/lib/utils';
import type { AutoModeEvent } from '@/types/electron';
import type { BacklogPlanEvent } from '@automaker/types';
import { MODAL_CONSTANTS } from './agent-output-modal.constants';
interface AgentOutputModalProps {
open: boolean;
@@ -257,7 +258,8 @@ export function AgentOutputModal({
if (!summaryScrollRef.current) return;
const { scrollTop, scrollHeight, clientHeight } = summaryScrollRef.current;
const isAtBottom = scrollHeight - scrollTop - clientHeight < 50;
const isAtBottom =
scrollHeight - scrollTop - clientHeight < MODAL_CONSTANTS.AUTOSCROLL_THRESHOLD;
setSummaryAutoScroll(isAtBottom);
};
@@ -440,7 +442,7 @@ export function AgentOutputModal({
return () => {
unsubscribe();
};
}, [open, featureId, isBacklogPlan]);
}, [open, featureId, isBacklogPlan, onClose]);
// Listen to backlog plan events and update output
useEffect(() => {

1
apps/ui/src/components/views/board-view/dialogs/backlog-plan-dialog.tsx
View File

@@ -140,6 +140,7 @@ export function BacklogPlanDialog({
setPrompt('');
onClose();
}, [
logger,
projectPath,
prompt,
modelOverride,

56
apps/ui/src/components/views/board-view/dialogs/edit-feature-dialog.tsx
View File

@@ -24,10 +24,9 @@ import {
import { GitBranch, Cpu, FolderKanban, Settings2 } from 'lucide-react';
import { useNavigate } from '@tanstack/react-router';
import { toast } from 'sonner';
import { cn, modelSupportsThinking } from '@/lib/utils';
import { cn, migrateModelId, normalizeModelEntry } from '@/lib/utils';
import { Feature, ModelAlias, ThinkingLevel, PlanningMode } from '@/store/app-store';
import type { ReasoningEffort, PhaseModelEntry, DescriptionHistoryEntry } from '@automaker/types';
import { migrateModelId } from '@automaker/types';
import {
PrioritySelector,
WorkModeSelector,
@@ -41,7 +40,6 @@ import type { WorkMode } from '../shared';
import { PhaseModelSelector } from '@/components/views/settings-view/model-defaults/phase-model-selector';
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
import { DependencyTreeDialog } from './dependency-tree-dialog';
import { supportsReasoningEffort } from '@automaker/types';
interface EditFeatureDialogProps {
feature: Feature | null;
@@ -56,6 +54,7 @@ interface EditFeatureDialogProps {
model: ModelAlias;
thinkingLevel: ThinkingLevel;
reasoningEffort: ReasoningEffort;
providerId?: string;
imagePaths: DescriptionImagePath[];
textFilePaths: DescriptionTextFilePath[];
branchName: string; // Can be empty string to use current branch
@@ -109,11 +108,14 @@ export function EditFeatureDialog({
);
// Model selection state - migrate legacy model IDs to canonical format
const [modelEntry, setModelEntry] = useState<PhaseModelEntry>(() => ({
model: migrateModelId(feature?.model) || 'claude-opus',
thinkingLevel: feature?.thinkingLevel || 'none',
reasoningEffort: feature?.reasoningEffort || 'none',
}));
const [modelEntry, setModelEntry] = useState<PhaseModelEntry>(() =>
normalizeModelEntry({
model: migrateModelId(feature?.model) || 'claude-opus',
thinkingLevel: feature?.thinkingLevel || 'none',
reasoningEffort: feature?.reasoningEffort || 'none',
providerId: feature?.providerId,
})
);
// Track the source of description changes for history
const [descriptionChangeSource, setDescriptionChangeSource] = useState<
@@ -161,11 +163,14 @@ export function EditFeatureDialog({
setPreEnhancementDescription(null);
setLocalHistory(feature.descriptionHistory ?? []);
// Reset model entry - migrate legacy model IDs
setModelEntry({
model: migrateModelId(feature.model) || 'claude-opus',
thinkingLevel: feature.thinkingLevel || 'none',
reasoningEffort: feature.reasoningEffort || 'none',
});
setModelEntry(
normalizeModelEntry({
model: migrateModelId(feature.model) || 'claude-opus',
thinkingLevel: feature.thinkingLevel || 'none',
reasoningEffort: feature.reasoningEffort || 'none',
providerId: feature.providerId,
})
);
// Reset dependency state
setParentDependencies(feature.dependencies ?? []);
const childDeps = allFeatures
@@ -202,19 +207,14 @@ export function EditFeatureDialog({
if (!editingFeature) return;
// Validate branch selection for custom mode
const isBranchSelectorEnabled = editingFeature.status === 'backlog';
const isBranchSelectorEnabled =
editingFeature.status === 'backlog' || editingFeature.status === 'merge_conflict';
if (isBranchSelectorEnabled && workMode === 'custom' && !editingFeature.branchName?.trim()) {
toast.error('Please select a branch name');
return;
}
const selectedModel = modelEntry.model;
const normalizedThinking: ThinkingLevel = modelSupportsThinking(selectedModel)
? (modelEntry.thinkingLevel ?? 'none')
: 'none';
const normalizedReasoning: ReasoningEffort = supportsReasoningEffort(selectedModel)
? (modelEntry.reasoningEffort ?? 'none')
: 'none';
const normalizedEntry = normalizeModelEntry(modelEntry);
// For 'current' mode, use empty string (work on current branch)
// For 'auto' mode, use empty string (will be auto-generated in use-board-actions)
@@ -232,9 +232,10 @@ export function EditFeatureDialog({
category: editingFeature.category,
description: editingFeature.description,
skipTests: editingFeature.skipTests ?? false,
model: selectedModel,
thinkingLevel: normalizedThinking,
reasoningEffort: normalizedReasoning,
model: normalizedEntry.model,
thinkingLevel: normalizedEntry.thinkingLevel,
reasoningEffort: normalizedEntry.reasoningEffort,
providerId: normalizedEntry.providerId,
imagePaths: editingFeature.imagePaths ?? [],
textFilePaths: editingFeature.textFilePaths ?? [],
branchName: finalBranchName,
@@ -557,7 +558,9 @@ export function EditFeatureDialog({
branchSuggestions={branchSuggestions}
branchCardCounts={branchCardCounts}
currentBranch={currentBranch}
disabled={editingFeature.status !== 'backlog'}
disabled={
editingFeature.status !== 'backlog' && editingFeature.status !== 'merge_conflict'
}
testIdPrefix="edit-feature-work-mode"
/>
</div>
@@ -627,7 +630,8 @@ export function EditFeatureDialog({
hotkeyActive={!!editingFeature}
data-testid="confirm-edit-feature"
disabled={
editingFeature.status === 'backlog' &&
(editingFeature.status === 'backlog' ||
editingFeature.status === 'merge_conflict') &&
workMode === 'custom' &&
!editingFeature.branchName?.trim()
}

138
apps/ui/src/components/views/board-view/dialogs/event-content-formatter.ts Normal file
View File

@@ -0,0 +1,138 @@
/**
* Event content formatting utilities for AgentOutputModal
* Extracts the complex switch statement logic from the main component
*/
import type { AutoModeEvent } from '@/types/electron';
import type { BacklogPlanEvent } from '@automaker/types';
/**
* Format auto mode event content for display
*/
export function formatAutoModeEventContent(event: AutoModeEvent): string {
switch (event.type) {
case 'auto_mode_progress':
return event.content || '';
case 'auto_mode_tool': {
const toolName = event.tool || 'Unknown Tool';
const toolInput = event.input ? JSON.stringify(event.input, null, 2) : '';
return `\n🔧 Tool: ${toolName}\n${toolInput ? `Input: ${toolInput}\n` : ''}`;
}
case 'auto_mode_phase': {
const phaseEmoji = event.phase === 'planning' ? '📋' : event.phase === 'action' ? '⚡' : '✅';
return `\n${phaseEmoji} ${event.message}\n`;
}
case 'auto_mode_error':
return `\n❌ Error: ${event.error}\n`;
case 'auto_mode_ultrathink_preparation':
return formatUltrathinkPreparation(event);
case 'planning_started': {
if ('mode' in event && 'message' in event) {
const modeLabel = event.mode === 'lite' ? 'Lite' : event.mode === 'spec' ? 'Spec' : 'Full';
return `\n📋 Planning Mode: ${modeLabel}\n${event.message}\n`;
}
return '';
}
case 'plan_approval_required':
return '\n⏸️ Plan generated - waiting for your approval...\n';
case 'plan_approved':
return event.hasEdits
? '\n✅ Plan approved (with edits) - continuing to implementation...\n'
: '\n✅ Plan approved - continuing to implementation...\n';
case 'plan_auto_approved':
return '\n✅ Plan auto-approved - continuing to implementation...\n';
case 'plan_revision_requested': {
const revisionEvent = event as Extract<AutoModeEvent, { type: 'plan_revision_requested' }>;
return `\n🔄 Revising plan based on your feedback (v${revisionEvent.planVersion})...\n`;
}
case 'auto_mode_task_started': {
const taskEvent = event as Extract<AutoModeEvent, { type: 'auto_mode_task_started' }>;
return `\n▶ Starting ${taskEvent.taskId}: ${taskEvent.taskDescription}\n`;
}
case 'auto_mode_task_complete': {
const taskEvent = event as Extract<AutoModeEvent, { type: 'auto_mode_task_complete' }>;
return `\n✓ ${taskEvent.taskId} completed (${taskEvent.tasksCompleted}/${taskEvent.tasksTotal})\n`;
}
case 'auto_mode_phase_complete': {
const phaseEvent = event as Extract<AutoModeEvent, { type: 'auto_mode_phase_complete' }>;
return `\n🏁 Phase ${phaseEvent.phaseNumber} complete\n`;
}
case 'auto_mode_feature_complete': {
const emoji = event.passes ? '✅' : '⚠️';
return `\n${emoji} Task completed: ${event.message}\n`;
}
default:
return '';
}
}
/**
* Format backlog plan event content for display
*/
export function formatBacklogPlanEventContent(event: BacklogPlanEvent): string {
switch (event.type) {
case 'backlog_plan_progress':
return `\n🧭 ${event.content || 'Backlog plan progress update'}\n`;
case 'backlog_plan_error':
return `\n❌ Backlog plan error: ${event.error || 'Unknown error'}\n`;
case 'backlog_plan_complete':
return '\n✅ Backlog plan completed\n';
default:
return `\nℹ️ ${event.type}\n`;
}
}
/**
* Format ultrathink preparation details
*/
function formatUltrathinkPreparation(
event: AutoModeEvent & {
warnings?: string[];
recommendations?: string[];
estimatedCost?: number;
estimatedTime?: string;
}
): string {
let prepContent = '\n🧠 Ultrathink Preparation\n';
if (event.warnings && event.warnings.length > 0) {
prepContent += '\n⚠️ Warnings:\n';
event.warnings.forEach((warning: string) => {
prepContent += ` • ${warning}\n`;
});
}
if (event.recommendations && event.recommendations.length > 0) {
prepContent += '\n💡 Recommendations:\n';
event.recommendations.forEach((rec: string) => {
prepContent += ` • ${rec}\n`;
});
}
if (event.estimatedCost !== undefined) {
prepContent += `\n💰 Estimated Cost: ~$${event.estimatedCost.toFixed(2)} per execution\n`;
}
if (event.estimatedTime) {
prepContent += `\n⏱️ Estimated Time: ${event.estimatedTime}\n`;
}
return prepContent;
}

25
apps/ui/src/components/views/board-view/dialogs/mass-edit-dialog.tsx
View File

@@ -22,7 +22,7 @@ import {
import type { WorkMode } from '../shared';
import { PhaseModelSelector } from '@/components/views/settings-view/model-defaults/phase-model-selector';
import type { PhaseModelEntry } from '@automaker/types';
import { cn } from '@/lib/utils';
import { cn, normalizeModelEntry } from '@/lib/utils';
interface MassEditDialogProps {
open: boolean;
@@ -181,7 +181,9 @@ export function MassEditDialog({
});
setModel(getInitialValue(selectedFeatures, 'model', 'claude-sonnet') as ModelAlias);
setThinkingLevel(getInitialValue(selectedFeatures, 'thinkingLevel', 'none') as ThinkingLevel);
setProviderId(undefined); // Features don't store providerId, but we track it after selection
setProviderId(
getInitialValue(selectedFeatures, 'providerId', undefined) as string | undefined
);
setPlanningMode(getInitialValue(selectedFeatures, 'planningMode', 'skip') as PlanningMode);
setRequirePlanApproval(getInitialValue(selectedFeatures, 'requirePlanApproval', false));
setPriority(getInitialValue(selectedFeatures, 'priority', 2));
@@ -207,8 +209,23 @@ export function MassEditDialog({
const handleApply = async () => {
const updates: Partial<Feature> = {};
if (applyState.model) updates.model = model;
if (applyState.thinkingLevel) updates.thinkingLevel = thinkingLevel;
if (applyState.model || applyState.thinkingLevel) {
const normalizedEntry = normalizeModelEntry({
model,
thinkingLevel,
providerId,
});
if (applyState.model) {
updates.model = normalizedEntry.model;
updates.providerId = normalizedEntry.providerId;
}
if (applyState.thinkingLevel) {
updates.thinkingLevel = normalizedEntry.thinkingLevel;
}
}
if (applyState.planningMode) updates.planningMode = planningMode;
if (applyState.requirePlanApproval) updates.requirePlanApproval = requirePlanApproval;
if (applyState.priority) updates.priority = priority;

35
apps/ui/src/components/views/board-view/dialogs/merge-rebase-dialog.tsx
View File

@@ -192,15 +192,9 @@ export function MergeRebaseDialog({
const api = getHttpApiClient();
if (selectedStrategy === 'rebase') {
// First fetch the remote to ensure we have latest refs
try {
await api.worktree.pull(worktree.path, selectedRemote);
} catch {
// Fetch may fail if no upstream - that's okay, we'll try rebase anyway
}
// Attempt the rebase operation
const result = await api.worktree.rebase(worktree.path, selectedBranch);
// Attempt the rebase operation - the rebase service fetches from the remote
// before rebasing to ensure we have up-to-date refs
const result = await api.worktree.rebase(worktree.path, selectedBranch, selectedRemote);
if (result.success) {
toast.success(`Rebased onto ${selectedBranch}`, {
@@ -223,9 +217,26 @@ export function MergeRebaseDialog({
setStep('select');
}
} else {
// Merge strategy - attempt to merge the remote branch
// Use the pull endpoint for merging remote branches
const result = await api.worktree.pull(worktree.path, selectedRemote, true);
// Merge strategy - merge the selected remote branch into the current branch.
// selectedBranch may be a full ref (e.g. refs/remotes/origin/main); normalize to short name
// for 'git pull <remote> <branch>'.
let remoteBranchShortName = selectedBranch;
const remotePrefix = `refs/remotes/${selectedRemote}/`;
if (selectedBranch.startsWith(remotePrefix)) {
remoteBranchShortName = selectedBranch.slice(remotePrefix.length);
} else if (selectedBranch.startsWith(`${selectedRemote}/`)) {
remoteBranchShortName = selectedBranch.slice(selectedRemote.length + 1);
} else if (selectedBranch.startsWith('refs/heads/')) {
remoteBranchShortName = selectedBranch.slice('refs/heads/'.length);
} else if (selectedBranch.startsWith('refs/')) {
remoteBranchShortName = selectedBranch.slice('refs/'.length);
}
const result = await api.worktree.pull(
worktree.path,
selectedRemote,
true,
remoteBranchShortName
);
if (result.success && result.result) {
if (result.result.hasConflicts) {

9
apps/ui/src/components/views/board-view/dialogs/stash-changes-dialog.tsx
View File

@@ -510,9 +510,12 @@ export function StashChangesDialog({
A descriptive message helps identify this stash later. Press{' '}
<kbd className="px-1 py-0.5 text-[10px] bg-muted rounded border">
{typeof navigator !== 'undefined' &&
((navigator as any).userAgentData?.platform || navigator.platform || '').includes(
'Mac'
)
(
(navigator as Navigator & { userAgentData?: { platform?: string } }).userAgentData
?.platform ||
navigator.platform ||
''
).includes('Mac')
? '⌘'
: 'Ctrl'}
+Enter

24
apps/ui/src/components/views/board-view/hooks/use-board-actions.ts
View File

@@ -25,6 +25,18 @@ const logger = createLogger('BoardActions');
const MAX_DUPLICATES = 50;
function normalizeFeatureBranchName(branchName?: string | null): string | undefined {
if (!branchName) return undefined;
let normalized = branchName.trim();
if (!normalized) return undefined;
normalized = normalized.replace(/^refs\/heads\//, '');
normalized = normalized.replace(/^refs\/remotes\/[^/]+\//, '');
normalized = normalized.replace(/^(origin|upstream)\//, '');
return normalized || undefined;
}
/**
* Removes a running task from all worktrees for a given project.
* Used when stopping features to ensure the task is removed from all worktree contexts,
@@ -137,6 +149,8 @@ export function useBoardActions({
skipTests: boolean;
model: ModelAlias;
thinkingLevel: ThinkingLevel;
reasoningEffort?: ReasoningEffort;
providerId?: string;
branchName: string;
priority: number;
planningMode: PlanningMode;
@@ -182,7 +196,7 @@ export function useBoardActions({
if (workMode === 'current') {
// Work directly on current branch - use the current worktree's branch if not on main
// This ensures features created on a non-main worktree are associated with that worktree
finalBranchName = currentWorktreeBranch || undefined;
finalBranchName = normalizeFeatureBranchName(currentWorktreeBranch);
} else if (workMode === 'auto') {
// Auto-generate a branch name based on feature title and timestamp
// Create a slug from the title: lowercase, replace non-alphanumeric with hyphens
@@ -196,7 +210,7 @@ export function useBoardActions({
finalBranchName = `feature/${titleSlug}-${randomSuffix}`;
} else {
// Custom mode - use provided branch name
finalBranchName = featureData.branchName || undefined;
finalBranchName = normalizeFeatureBranchName(featureData.branchName);
}
// Create worktree for 'auto' or 'custom' modes when we have a branch name
@@ -388,11 +402,11 @@ export function useBoardActions({
if (workMode === 'current') {
// Work directly on current branch - use the current worktree's branch if not on main
// This ensures features updated on a non-main worktree are associated with that worktree
finalBranchName = currentWorktreeBranch || undefined;
finalBranchName = normalizeFeatureBranchName(currentWorktreeBranch);
} else if (workMode === 'auto') {
// Preserve existing branch name if one exists (avoid orphaning worktrees on edit)
if (updates.branchName?.trim()) {
finalBranchName = updates.branchName;
finalBranchName = normalizeFeatureBranchName(updates.branchName);
} else {
// Auto-generate a branch name based on feature title
// Create a slug from the title: lowercase, replace non-alphanumeric with hyphens
@@ -406,7 +420,7 @@ export function useBoardActions({
finalBranchName = `feature/${titleSlug}-${randomSuffix}`;
}
} else {
finalBranchName = updates.branchName || undefined;
finalBranchName = normalizeFeatureBranchName(updates.branchName);
}
// Create worktree for 'auto' or 'custom' modes when we have a branch name

64
apps/ui/src/components/views/board-view/hooks/use-board-column-features.ts
View File

@@ -1,5 +1,5 @@
// @ts-nocheck - column filtering logic with dependency resolution and status mapping
import { useMemo, useCallback } from 'react';
import { useMemo, useCallback, useEffect, useRef } from 'react';
import { Feature, useAppStore } from '@/store/app-store';
import {
createFeatureMap,
@@ -28,6 +28,45 @@ export function useBoardColumnFeatures({
currentWorktreeBranch,
projectPath,
}: UseBoardColumnFeaturesProps) {
// Get recently completed features from store for race condition protection
const recentlyCompletedFeatures = useAppStore((state) => state.recentlyCompletedFeatures);
const clearRecentlyCompletedFeatures = useAppStore(
(state) => state.clearRecentlyCompletedFeatures
);
// Track previous feature IDs to detect when features list has been refreshed
const prevFeatureIdsRef = useRef<Set<string>>(new Set());
// Clear recently completed features when the cache refreshes with updated statuses.
//
// RACE CONDITION SCENARIO THIS PREVENTS:
// 1. Feature completes on server -> status becomes 'verified'/'completed' on disk
// 2. Server emits auto_mode_feature_complete event
// 3. Frontend receives event -> removes feature from runningTasks, adds to recentlyCompletedFeatures
// 4. React Query invalidates features query, triggers async refetch
// 5. RACE: Before refetch completes, component may re-render with stale cache data
// where status='backlog' and feature is no longer in runningTasks
// 6. This hook prevents the feature from appearing in backlog during that window
//
// When the refetch completes with fresh data (status='verified'/'completed'),
// this effect clears the recentlyCompletedFeatures set since it's no longer needed.
useEffect(() => {
const currentIds = new Set(features.map((f) => f.id));
// Check if any recently completed features now have terminal statuses in the new data
// If so, we can clear the tracking since the cache is now fresh
const hasUpdatedStatus = Array.from(recentlyCompletedFeatures).some((featureId) => {
const feature = features.find((f) => f.id === featureId);
return feature && (feature.status === 'verified' || feature.status === 'completed');
});
if (hasUpdatedStatus) {
clearRecentlyCompletedFeatures();
}
prevFeatureIdsRef.current = currentIds;
}, [features, recentlyCompletedFeatures, clearRecentlyCompletedFeatures]);
// Memoize column features to prevent unnecessary re-renders
const columnFeaturesMap = useMemo(() => {
// Use a more flexible type to support dynamic pipeline statuses
@@ -44,6 +83,9 @@ export function useBoardColumnFeatures({
// briefly appearing in backlog during the timing gap between when the server
// starts executing a feature and when the UI receives the event/status update.
const allRunningTaskIds = new Set(runningAutoTasksAllWorktrees);
// Get recently completed features for additional race condition protection
// These features should not appear in backlog even if cache has stale status
const recentlyCompleted = recentlyCompletedFeatures;
// Filter features by search query (case-insensitive)
const normalizedQuery = searchQuery.toLowerCase().trim();
@@ -148,12 +190,19 @@ export function useBoardColumnFeatures({
// Filter all items by worktree, including backlog
// This ensures backlog items with a branch assigned only show in that branch
//
// 'ready' and 'interrupted' are transitional statuses that don't have dedicated columns:
// 'merge_conflict', 'ready', and 'interrupted' are backlog-lane statuses that don't
// have dedicated columns:
// - 'merge_conflict': Automatic merge failed; user must resolve conflicts before restart
// - 'ready': Feature has an approved plan, waiting to be picked up for execution
// - 'interrupted': Feature execution was aborted (e.g., user stopped it, server restart)
// Both display in the backlog column and need the same allRunningTaskIds race-condition
// protection as 'backlog' to prevent briefly flashing in backlog when already executing.
if (status === 'backlog' || status === 'ready' || status === 'interrupted') {
if (
status === 'backlog' ||
status === 'merge_conflict' ||
status === 'ready' ||
status === 'interrupted'
) {
// IMPORTANT: Check if this feature is running on ANY worktree before placing in backlog.
// This prevents a race condition where the feature has started executing on the server
// (and is tracked in a different worktree's running list) but the disk status hasn't
@@ -165,6 +214,14 @@ export function useBoardColumnFeatures({
if (matchesWorktree) {
map.in_progress.push(f);
}
} else if (recentlyCompleted.has(f.id)) {
// Feature recently completed - skip placing in backlog to prevent race condition
// where stale cache has status='backlog' but feature actually completed.
// The feature will be placed correctly once the cache refreshes.
// Log for debugging (can remove after verification)
console.debug(
`Feature ${f.id} recently completed - skipping backlog placement during cache refresh`
);
} else if (matchesWorktree) {
map.backlog.push(f);
}
@@ -231,6 +288,7 @@ export function useBoardColumnFeatures({
currentWorktreePath,
currentWorktreeBranch,
projectPath,
recentlyCompletedFeatures,
]);
const getColumnFeatures = useCallback(

2
apps/ui/src/components/views/board-view/hooks/use-board-drag-drop.ts
View File

@@ -196,7 +196,7 @@ export function useBoardDragDrop({
// Handle different drag scenarios
// Note: Worktrees are created server-side at execution time based on feature.branchName
if (draggedFeature.status === 'backlog') {
if (draggedFeature.status === 'backlog' || draggedFeature.status === 'merge_conflict') {
// From backlog
if (targetStatus === 'in_progress') {
// Use helper function to handle concurrency check and start implementation

4
apps/ui/src/components/views/board-view/hooks/use-board-effects.ts
View File

@@ -73,6 +73,10 @@ export function useBoardEffects({
const checkAllContexts = async () => {
const featuresWithPotentialContext = features.filter(
(f) =>
f.status === 'backlog' ||
f.status === 'merge_conflict' ||
f.status === 'ready' ||
f.status === 'interrupted' ||
f.status === 'in_progress' ||
f.status === 'waiting_approval' ||
f.status === 'verified' ||

3
apps/ui/src/components/views/board-view/hooks/use-board-features.ts
View File

@@ -61,7 +61,7 @@ export function useBoardFeatures({ currentProject }: UseBoardFeaturesProps) {
} catch {
setPersistedCategories([]);
}
}, [currentProject, loadFeatures]);
}, [currentProject]);
// Save a new category to the persisted categories file
const saveCategory = useCallback(
@@ -161,6 +161,7 @@ export function useBoardFeatures({ currentProject }: UseBoardFeaturesProps) {
});
return unsubscribe;
// eslint-disable-next-line react-hooks/exhaustive-deps -- loadFeatures is a stable ref from React Query
}, [currentProject]);
// Check for interrupted features on mount

20
apps/ui/src/components/views/board-view/hooks/use-board-persistence.ts
View File

@@ -32,6 +32,14 @@ export function useBoardPersistence({ currentProject }: UseBoardPersistenceProps
) => {
if (!currentProject) return;
// Cancel any in-flight refetches to prevent them from overwriting our optimistic update.
// Without this, a slow background refetch (e.g., from a prior create/invalidate) can
// resolve after setQueryData and overwrite the cache with stale data.
await queryClient.cancelQueries({
queryKey: queryKeys.features.all(currentProject.path),
exact: true,
});
// Capture previous cache snapshot for rollback on error
const previousFeatures = queryClient.getQueryData<Feature[]>(
queryKeys.features.all(currentProject.path)
@@ -123,6 +131,12 @@ export function useBoardPersistence({ currentProject }: UseBoardPersistenceProps
throw new Error('Features API not available');
}
// Cancel any in-flight refetches to prevent them from overwriting our optimistic update
await queryClient.cancelQueries({
queryKey: queryKeys.features.all(currentProject.path),
exact: true,
});
// Capture previous cache snapshot for synchronous rollback on error
const previousFeatures = queryClient.getQueryData<Feature[]>(
queryKeys.features.all(currentProject.path)
@@ -175,6 +189,12 @@ export function useBoardPersistence({ currentProject }: UseBoardPersistenceProps
async (featureId: string) => {
if (!currentProject) return;
// Cancel any in-flight refetches to prevent them from overwriting our optimistic update
await queryClient.cancelQueries({
queryKey: queryKeys.features.all(currentProject.path),
exact: true,
});
// Optimistically remove from React Query cache for immediate board refresh
const previousFeatures = queryClient.getQueryData<Feature[]>(
queryKeys.features.all(currentProject.path)

1
apps/ui/src/components/views/board-view/kanban-board.tsx
View File

@@ -161,6 +161,7 @@ function VirtualizedList<Item extends VirtualListItem>({
const resolvedHeight = measured ?? estimatedItemHeight;
return resolvedHeight + itemGap;
});
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [items, estimatedItemHeight, itemGap, measureVersion]);
const itemStarts = useMemo(() => {

22
apps/ui/src/components/views/board-view/worktree-panel/components/worktree-actions-dropdown.tsx
View File

@@ -70,7 +70,8 @@ interface WorktreeActionsDropdownProps {
hasRemoteBranch: boolean;
isPulling: boolean;
isPushing: boolean;
isStartingDevServer: boolean;
isStartingAnyDevServer: boolean;
isDevServerStarting: boolean;
isDevServerRunning: boolean;
devServerInfo?: DevServerInfo;
gitRepoStatus: GitRepoStatus;
@@ -244,7 +245,8 @@ export function WorktreeActionsDropdown({
hasRemoteBranch,
isPulling,
isPushing,
isStartingDevServer,
isStartingAnyDevServer,
isDevServerStarting,
isDevServerRunning,
devServerInfo,
gitRepoStatus,
@@ -550,20 +552,26 @@ export function WorktreeActionsDropdown({
<div className="flex items-center">
<DropdownMenuItem
onClick={() => onStartDevServer(worktree)}
disabled={isStartingDevServer}
disabled={isStartingAnyDevServer || isDevServerStarting}
className="text-xs flex-1 pr-0 rounded-r-none"
>
<Play
className={cn('w-3.5 h-3.5 mr-2', isStartingDevServer && 'animate-pulse')}
className={cn(
'w-3.5 h-3.5 mr-2',
(isStartingAnyDevServer || isDevServerStarting) && 'animate-pulse'
)}
/>
{isStartingDevServer ? 'Starting...' : 'Start Dev Server'}
{isStartingAnyDevServer || isDevServerStarting
? 'Starting...'
: 'Start Dev Server'}
</DropdownMenuItem>
<DropdownMenuSubTrigger
className={cn(
'text-xs px-1 rounded-l-none border-l border-border/30 h-8',
isStartingDevServer && 'opacity-50 cursor-not-allowed'
(isStartingAnyDevServer || isDevServerStarting) &&
'opacity-50 cursor-not-allowed'
)}
disabled={isStartingDevServer}
disabled={isStartingAnyDevServer || isDevServerStarting}
/>
</div>
<DropdownMenuSubContent>{viewDevServerLogsItem}</DropdownMenuSubContent>

13
apps/ui/src/components/views/board-view/worktree-panel/components/worktree-dropdown-item.tsx
View File

@@ -31,6 +31,8 @@ export interface WorktreeDropdownItemProps {
cardCount?: number;
/** Whether the dev server is running for this worktree */
devServerRunning?: boolean;
/** Whether the dev server is starting for this worktree */
devServerStarting?: boolean;
/** Dev server information if running */
devServerInfo?: DevServerInfo;
/** Whether auto-mode is running for this worktree */
@@ -64,6 +66,7 @@ export function WorktreeDropdownItem({
isRunning,
cardCount,
devServerRunning,
devServerStarting,
devServerInfo,
isAutoModeRunning = false,
isTestRunning = false,
@@ -154,6 +157,16 @@ export function WorktreeDropdownItem({
</span>
)}
{/* Dev server starting indicator */}
{devServerStarting && (
<span
className="inline-flex items-center justify-center h-4 w-4 text-amber-500"
title="Dev server starting..."
>
<Spinner size="xs" variant="current" />
</span>
)}
{/* Test running indicator */}
{isTestRunning && (
<span

25
apps/ui/src/components/views/board-view/worktree-panel/components/worktree-dropdown.tsx
View File

@@ -53,6 +53,8 @@ export interface WorktreeDropdownProps {
branchCardCounts?: Record<string, number>;
/** Function to check if dev server is running for a worktree */
isDevServerRunning: (worktree: WorktreeInfo) => boolean;
/** Function to check if dev server is starting for a worktree */
isDevServerStarting: (worktree: WorktreeInfo) => boolean;
/** Function to get dev server info for a worktree */
getDevServerInfo: (worktree: WorktreeInfo) => DevServerInfo | undefined;
/** Function to check if auto-mode is running for a worktree */
@@ -78,7 +80,7 @@ export interface WorktreeDropdownProps {
// Action dropdown props
isPulling: boolean;
isPushing: boolean;
isStartingDevServer: boolean;
isStartingAnyDevServer: boolean;
aheadCount: number;
behindCount: number;
hasRemoteBranch: boolean;
@@ -178,6 +180,7 @@ export function WorktreeDropdown({
isActivating,
branchCardCounts,
isDevServerRunning,
isDevServerStarting,
getDevServerInfo,
isAutoModeRunningForWorktree,
isTestRunningForWorktree,
@@ -196,7 +199,7 @@ export function WorktreeDropdown({
// Action dropdown props
isPulling,
isPushing,
isStartingDevServer,
isStartingAnyDevServer,
aheadCount,
behindCount,
hasRemoteBranch,
@@ -270,6 +273,7 @@ export function WorktreeDropdown({
if (!selectedWorktree) {
return {
devServerRunning: false,
devServerStarting: false,
devServerInfo: undefined,
autoModeRunning: false,
isRunning: false,
@@ -279,6 +283,7 @@ export function WorktreeDropdown({
}
return {
devServerRunning: isDevServerRunning(selectedWorktree),
devServerStarting: isDevServerStarting(selectedWorktree),
devServerInfo: getDevServerInfo(selectedWorktree),
autoModeRunning: isAutoModeRunningForWorktree(selectedWorktree),
isRunning: hasRunningFeatures(selectedWorktree),
@@ -288,6 +293,7 @@ export function WorktreeDropdown({
}, [
selectedWorktree,
isDevServerRunning,
isDevServerStarting,
getDevServerInfo,
isAutoModeRunningForWorktree,
hasRunningFeatures,
@@ -360,6 +366,16 @@ export function WorktreeDropdown({
</span>
)}
{/* Dev server starting indicator */}
{selectedStatus.devServerStarting && (
<span
className="inline-flex items-center justify-center h-4 w-4 text-amber-500 shrink-0"
title="Dev server starting..."
>
<Spinner size="xs" variant="current" />
</span>
)}
{/* Test running indicator */}
{selectedStatus.testRunning && (
<span
@@ -468,6 +484,7 @@ export function WorktreeDropdown({
isRunning={hasRunningFeatures(mainWorktree)}
cardCount={branchCardCounts?.[mainWorktree.branch]}
devServerRunning={isDevServerRunning(mainWorktree)}
devServerStarting={isDevServerStarting(mainWorktree)}
devServerInfo={getDevServerInfo(mainWorktree)}
isAutoModeRunning={isAutoModeRunningForWorktree(mainWorktree)}
isTestRunning={isTestRunningForWorktree(mainWorktree)}
@@ -493,6 +510,7 @@ export function WorktreeDropdown({
isRunning={hasRunningFeatures(worktree)}
cardCount={branchCardCounts?.[worktree.branch]}
devServerRunning={isDevServerRunning(worktree)}
devServerStarting={isDevServerStarting(worktree)}
devServerInfo={getDevServerInfo(worktree)}
isAutoModeRunning={isAutoModeRunningForWorktree(worktree)}
isTestRunning={isTestRunningForWorktree(worktree)}
@@ -543,7 +561,8 @@ export function WorktreeDropdown({
}
isPulling={isPulling}
isPushing={isPushing}
isStartingDevServer={isStartingDevServer}
isStartingDevServer={isStartingAnyDevServer}
isDevServerStarting={isDevServerStarting(selectedWorktree)}
isDevServerRunning={isDevServerRunning(selectedWorktree)}
devServerInfo={getDevServerInfo(selectedWorktree)}
gitRepoStatus={gitRepoStatus}

17
apps/ui/src/components/views/board-view/worktree-panel/components/worktree-mobile-dropdown.tsx
View File

@@ -7,15 +7,18 @@ import {
DropdownMenuSeparator,
DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { GitBranch, ChevronDown, CircleDot, Check } from 'lucide-react';
import { GitBranch, ChevronDown, CircleDot, Check, Globe } from 'lucide-react';
import { Spinner } from '@/components/ui/spinner';
import { cn } from '@/lib/utils';
import type { WorktreeInfo } from '../types';
import type { WorktreeInfo, DevServerInfo } from '../types';
interface WorktreeMobileDropdownProps {
worktrees: WorktreeInfo[];
isWorktreeSelected: (worktree: WorktreeInfo) => boolean;
hasRunningFeatures: (worktree: WorktreeInfo) => boolean;
isDevServerRunning: (worktree: WorktreeInfo) => boolean;
isDevServerStarting: (worktree: WorktreeInfo) => boolean;
getDevServerInfo: (worktree: WorktreeInfo) => DevServerInfo | undefined;
isActivating: boolean;
branchCardCounts?: Record<string, number>;
onSelectWorktree: (worktree: WorktreeInfo) => void;
@@ -25,6 +28,9 @@ export function WorktreeMobileDropdown({
worktrees,
isWorktreeSelected,
hasRunningFeatures,
isDevServerRunning,
isDevServerStarting,
getDevServerInfo,
isActivating,
branchCardCounts,
onSelectWorktree,
@@ -59,6 +65,9 @@ export function WorktreeMobileDropdown({
{worktrees.map((worktree) => {
const isSelected = isWorktreeSelected(worktree);
const isRunning = hasRunningFeatures(worktree);
const devServerRunning = isDevServerRunning(worktree);
const devServerStarting = isDevServerStarting(worktree);
const devServerInfo = getDevServerInfo(worktree);
const cardCount = branchCardCounts?.[worktree.branch];
const hasChanges = worktree.hasChanges;
const changedFilesCount = worktree.changedFilesCount;
@@ -103,6 +112,10 @@ export function WorktreeMobileDropdown({
{changedFilesCount ?? '!'}
</span>
)}
{devServerRunning && devServerInfo?.urlDetected === true && (
<Globe className="w-3 h-3 text-green-500" />
)}
{devServerStarting && <Spinner size="xs" variant="muted" />}
</div>
</DropdownMenuItem>
);

9
apps/ui/src/components/views/board-view/worktree-panel/components/worktree-tab.tsx
View File

@@ -34,7 +34,8 @@ interface WorktreeTabProps {
isSwitching: boolean;
isPulling: boolean;
isPushing: boolean;
isStartingDevServer: boolean;
isStartingAnyDevServer: boolean;
isDevServerStarting: boolean;
aheadCount: number;
behindCount: number;
hasRemoteBranch: boolean;
@@ -146,7 +147,8 @@ export function WorktreeTab({
isSwitching,
isPulling,
isPushing,
isStartingDevServer,
isStartingAnyDevServer,
isDevServerStarting,
aheadCount,
behindCount,
hasRemoteBranch,
@@ -531,7 +533,8 @@ export function WorktreeTab({
trackingRemote={trackingRemote}
isPulling={isPulling}
isPushing={isPushing}
isStartingDevServer={isStartingDevServer}
isStartingDevServer={isStartingAnyDevServer}
isDevServerStarting={isDevServerStarting}
isDevServerRunning={isDevServerRunning}
devServerInfo={devServerInfo}
gitRepoStatus={gitRepoStatus}

46
apps/ui/src/components/views/board-view/worktree-panel/hooks/use-dev-servers.ts
View File

@@ -56,7 +56,8 @@ function showUrlDetectedToast(url: string, port: number): void {
}
export function useDevServers({ projectPath }: UseDevServersOptions) {
const [isStartingDevServer, setIsStartingDevServer] = useState(false);
const [isStartingAnyDevServer, setIsStartingAnyDevServer] = useState(false);
const [startingServers, setStartingServers] = useState<Set<string>>(new Set());
const [runningDevServers, setRunningDevServers] = useState<Map<string, DevServerInfo>>(new Map());
// Track which worktrees have had their url-detected toast shown to prevent re-triggering
@@ -327,7 +328,16 @@ export function useDevServers({ projectPath }: UseDevServersOptions) {
if (!api?.worktree?.onDevServerLogEvent) return;
const unsubscribe = api.worktree.onDevServerLogEvent((event) => {
if (event.type === 'dev-server:url-detected') {
if (event.type === 'dev-server:starting') {
const { worktreePath } = event.payload;
const key = normalizePath(worktreePath);
setStartingServers((prev) => {
const next = new Set(prev);
next.add(key);
return next;
});
logger.info(`Dev server starting for ${worktreePath} (reactive update)`);
} else if (event.type === 'dev-server:url-detected') {
const { worktreePath, url, port } = event.payload;
const key = normalizePath(worktreePath);
// Clear the port detection timeout since URL was successfully detected
@@ -387,6 +397,15 @@ export function useDevServers({ projectPath }: UseDevServersOptions) {
// Reactively add/update the server when it starts
const { worktreePath, port, url } = event.payload;
const key = normalizePath(worktreePath);
// Remove from starting set
setStartingServers((prev) => {
if (!prev.has(key)) return prev;
const next = new Set(prev);
next.delete(key);
return next;
});
// Clear previous toast tracking for this key so a new detection triggers a fresh toast
toastShownForRef.current.delete(key);
setRunningDevServers((prev) => {
@@ -409,11 +428,12 @@ export function useDevServers({ projectPath }: UseDevServersOptions) {
// Cleanup all port detection timers on unmount
useEffect(() => {
const timers = portDetectionTimers.current;
return () => {
for (const timer of portDetectionTimers.current.values()) {
for (const timer of timers.values()) {
clearTimeout(timer);
}
portDetectionTimers.current.clear();
timers.clear();
};
}, []);
@@ -427,8 +447,8 @@ export function useDevServers({ projectPath }: UseDevServersOptions) {
const handleStartDevServer = useCallback(
async (worktree: WorktreeInfo) => {
if (isStartingDevServer) return;
setIsStartingDevServer(true);
if (isStartingAnyDevServer) return;
setIsStartingAnyDevServer(true);
try {
const api = getElectronAPI();
@@ -470,10 +490,10 @@ export function useDevServers({ projectPath }: UseDevServersOptions) {
description: error instanceof Error ? error.message : undefined,
});
} finally {
setIsStartingDevServer(false);
setIsStartingAnyDevServer(false);
}
},
[isStartingDevServer, projectPath, startPortDetectionTimer]
[isStartingAnyDevServer, projectPath, startPortDetectionTimer]
);
const handleStopDevServer = useCallback(
@@ -543,6 +563,13 @@ export function useDevServers({ projectPath }: UseDevServersOptions) {
[runningDevServers, getWorktreeKey]
);
const isDevServerStarting = useCallback(
(worktree: WorktreeInfo) => {
return startingServers.has(getWorktreeKey(worktree));
},
[startingServers, getWorktreeKey]
);
const getDevServerInfo = useCallback(
(worktree: WorktreeInfo) => {
return runningDevServers.get(getWorktreeKey(worktree));
@@ -551,10 +578,11 @@ export function useDevServers({ projectPath }: UseDevServersOptions) {
);
return {
isStartingDevServer,
isStartingAnyDevServer,
runningDevServers,
getWorktreeKey,
isDevServerRunning,
isDevServerStarting,
getDevServerInfo,
handleStartDevServer,
handleStopDevServer,

4
apps/ui/src/components/views/board-view/worktree-panel/hooks/use-worktrees.ts
View File

@@ -1,4 +1,4 @@
import { useEffect, useCallback, useRef, startTransition } from 'react';
import { useEffect, useCallback, useRef, startTransition, useMemo } from 'react';
import { useQueryClient } from '@tanstack/react-query';
import { useAppStore } from '@/store/app-store';
import { useWorktrees as useWorktreesQuery } from '@/hooks/queries';
@@ -26,7 +26,7 @@ export function useWorktrees({
// Use the React Query hook
const { data, isLoading, refetch } = useWorktreesQuery(projectPath);
const worktrees = (data?.worktrees ?? []) as WorktreeInfo[];
const worktrees = useMemo(() => (data?.worktrees ?? []) as WorktreeInfo[], [data?.worktrees]);
// Sync worktrees to Zustand store when they change.
// Use a ref to track the previous worktrees and skip the store update when the

21
apps/ui/src/components/views/board-view/worktree-panel/worktree-panel.tsx
View File

@@ -87,8 +87,9 @@ export function WorktreePanel({
} = useWorktrees({ projectPath, refreshTrigger, onRemovedWorktrees });
const {
isStartingDevServer,
isStartingAnyDevServer,
isDevServerRunning,
isDevServerStarting,
getDevServerInfo,
handleStartDevServer,
handleStopDevServer,
@@ -211,7 +212,6 @@ export function WorktreePanel({
// Read store state directly inside the effect to avoid a dependency cycle
// (the effect writes to the same state it would otherwise depend on)
useEffect(() => {
const mainWt = worktrees.find((w) => w.isMain);
const otherWts = worktrees.filter((w) => !w.isMain);
const otherSlotCount = Math.max(0, pinnedWorktreesCount);
@@ -487,7 +487,7 @@ export function WorktreePanel({
description: `Stopped tests in ${worktree.branch}`,
});
} else {
toast.error('Failed to stop tests', {
toast.error(result.error || 'Failed to stop tests', {
description: result.error || 'Unknown error',
});
}
@@ -982,6 +982,9 @@ export function WorktreePanel({
worktrees={worktrees}
isWorktreeSelected={isWorktreeSelected}
hasRunningFeatures={hasRunningFeatures}
isDevServerRunning={isDevServerRunning}
isDevServerStarting={isDevServerStarting}
getDevServerInfo={getDevServerInfo}
isActivating={isActivating}
branchCardCounts={branchCardCounts}
onSelectWorktree={handleSelectWorktree}
@@ -1017,7 +1020,8 @@ export function WorktreePanel({
trackingRemote={getTrackingRemote(selectedWorktree.path)}
isPulling={isPulling}
isPushing={isPushing}
isStartingDevServer={isStartingDevServer}
isStartingAnyDevServer={isStartingAnyDevServer}
isDevServerStarting={isDevServerStarting(selectedWorktree)}
isDevServerRunning={isDevServerRunning(selectedWorktree)}
devServerInfo={getDevServerInfo(selectedWorktree)}
gitRepoStatus={gitRepoStatus}
@@ -1245,6 +1249,7 @@ export function WorktreePanel({
isActivating={isActivating}
branchCardCounts={branchCardCounts}
isDevServerRunning={isDevServerRunning}
isDevServerStarting={isDevServerStarting}
getDevServerInfo={getDevServerInfo}
isAutoModeRunningForWorktree={isAutoModeRunningForWorktree}
isTestRunningForWorktree={isTestRunningForWorktree}
@@ -1261,7 +1266,7 @@ export function WorktreePanel({
onCreateBranch={onCreateBranch}
isPulling={isPulling}
isPushing={isPushing}
isStartingDevServer={isStartingDevServer}
isStartingAnyDevServer={isStartingAnyDevServer}
aheadCount={aheadCount}
behindCount={behindCount}
hasRemoteBranch={hasRemoteBranch}
@@ -1322,6 +1327,7 @@ export function WorktreePanel({
isRunning={hasRunningFeatures(mainWorktree)}
isActivating={isActivating}
isDevServerRunning={isDevServerRunning(mainWorktree)}
isDevServerStarting={isDevServerStarting(mainWorktree)}
devServerInfo={getDevServerInfo(mainWorktree)}
branches={branches}
filteredBranches={filteredBranches}
@@ -1330,7 +1336,7 @@ export function WorktreePanel({
isSwitching={isSwitching}
isPulling={isPulling}
isPushing={isPushing}
isStartingDevServer={isStartingDevServer}
isStartingAnyDevServer={isStartingAnyDevServer}
aheadCount={aheadCount}
behindCount={behindCount}
hasRemoteBranch={hasRemoteBranch}
@@ -1413,6 +1419,7 @@ export function WorktreePanel({
isRunning={hasRunningFeatures(worktree)}
isActivating={isActivating}
isDevServerRunning={isDevServerRunning(worktree)}
isDevServerStarting={isDevServerStarting(worktree)}
devServerInfo={getDevServerInfo(worktree)}
branches={branches}
filteredBranches={filteredBranches}
@@ -1421,7 +1428,7 @@ export function WorktreePanel({
isSwitching={isSwitching}
isPulling={isPulling}
isPushing={isPushing}
isStartingDevServer={isStartingDevServer}
isStartingAnyDevServer={isStartingAnyDevServer}
aheadCount={aheadCount}
behindCount={behindCount}
hasRemoteBranch={hasRemoteBranch}

11
apps/ui/src/components/views/context-view.tsx
View File

@@ -242,8 +242,13 @@ export function ContextView() {
const handleSelectFile = (file: ContextFile) => {
// Note: Unsaved changes warning could be added here in the future
// For now, silently proceed to avoid disrupting mobile UX flow
loadFileContent(file);
// Set selected file immediately for responsive UI feedback,
// then load content asynchronously
setSelectedFile(file);
setEditedContent(file.content || '');
setHasChanges(false);
setIsPreviewMode(isMarkdownFilename(file.name));
loadFileContent(file);
};
// Save current file
@@ -527,11 +532,13 @@ export function ContextView() {
delete metadata.files[selectedFile.name];
await saveMetadata(metadata);
// Refresh file list before closing dialog so UI is updated when dialog dismisses
await loadContextFiles();
setIsDeleteDialogOpen(false);
setSelectedFile(null);
setEditedContent('');
setHasChanges(false);
await loadContextFiles();
} catch (error) {
logger.error('Failed to delete file:', error);
}

18
apps/ui/src/components/views/dashboard-view.tsx
View File

@@ -591,12 +591,16 @@ export function DashboardView() {
<Button
size="icon"
className="bg-linear-to-r from-brand-500 to-brand-600 hover:from-brand-600 hover:to-brand-700 text-white"
data-testid="create-new-project-mobile"
>
<Plus className="w-4 h-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="w-56">
<DropdownMenuItem onClick={handleNewProject}>
<DropdownMenuItem
onClick={handleNewProject}
data-testid="quick-setup-option-mobile"
>
<Plus className="w-4 h-4 mr-2" />
Quick Setup
</DropdownMenuItem>
@@ -662,7 +666,7 @@ export function DashboardView() {
<DropdownMenuContent align="end" className="w-56">
<DropdownMenuItem
onClick={handleNewProject}
data-testid="quick-setup-option"
data-testid="quick-setup-option-no-projects"
>
<Plus className="w-4 h-4 mr-2" />
Quick Setup
@@ -749,14 +753,20 @@ export function DashboardView() {
</Button>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button className="hidden sm:flex bg-linear-to-r from-brand-500 to-brand-600 hover:from-brand-600 hover:to-brand-700 text-white">
<Button
className="hidden sm:flex bg-linear-to-r from-brand-500 to-brand-600 hover:from-brand-600 hover:to-brand-700 text-white"
data-testid="create-new-project-header"
>
<Plus className="w-4 h-4 mr-2" />
New Project
<ChevronDown className="w-4 h-4 ml-2" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="w-56">
<DropdownMenuItem onClick={handleNewProject}>
<DropdownMenuItem
onClick={handleNewProject}
data-testid="quick-setup-option-has-projects"
>
<Plus className="w-4 h-4 mr-2" />
Quick Setup
</DropdownMenuItem>

7
apps/ui/src/components/views/file-editor-view/components/code-editor.tsx
View File

@@ -36,6 +36,8 @@ export interface CodeEditorHandle {
redo: () => void;
/** Returns the current text selection with line range, or null if nothing is selected */
getSelection: () => { text: string; fromLine: number; toLine: number } | null;
/** Returns the current editor content (may differ from store if onChange hasn't fired yet) */
getValue: () => string | null;
}
interface CodeEditorProps {
@@ -465,6 +467,11 @@ export const CodeEditor = forwardRef<CodeEditorHandle, CodeEditorProps>(function
const toLine = view.state.doc.lineAt(to).number;
return { text, fromLine, toLine };
},
getValue: () => {
const view = editorRef.current?.view;
if (!view) return null;
return view.state.doc.toString();
},
}),
[]
);

15
apps/ui/src/components/views/file-editor-view/file-editor-dirty-utils.ts Normal file
View File

@@ -0,0 +1,15 @@
export function computeIsDirty(content: string, originalContent: string): boolean {
return content !== originalContent;
}
export function updateTabWithContent<
T extends { originalContent: string; content: string; isDirty: boolean },
>(tab: T, content: string): T {
return { ...tab, content, isDirty: computeIsDirty(content, tab.originalContent) };
}
export function markTabAsSaved<
T extends { originalContent: string; content: string; isDirty: boolean },
>(tab: T, content: string): T {
return { ...tab, content, originalContent: content, isDirty: false };
}

34
apps/ui/src/components/views/file-editor-view/file-editor-view.tsx
View File

@@ -489,18 +489,38 @@ export function FileEditorView({ initialPath }: FileEditorViewProps) {
// ─── Handle Save ─────────────────────────────────────────────
const handleSave = useCallback(async () => {
if (!activeTab || !activeTab.isDirty) return;
// Get fresh state from the store to avoid stale closure issues
const {
tabs: currentTabs,
activeTabId: currentActiveTabId,
updateTabContent,
} = useFileEditorStore.getState();
if (!currentActiveTabId) return;
const tab = currentTabs.find((t) => t.id === currentActiveTabId);
if (!tab || !tab.isDirty) return;
// Get the current editor content directly from CodeMirror to ensure
// we save the latest content even if onChange hasn't fired yet
const editorContent = editorRef.current?.getValue();
const contentToSave = editorContent ?? tab.content;
// Sync the editor content to the store before saving
if (editorContent != null && editorContent !== tab.content) {
updateTabContent(tab.id, editorContent);
}
try {
const api = getElectronAPI();
const result = await api.writeFile(activeTab.filePath, activeTab.content);
const result = await api.writeFile(tab.filePath, contentToSave);
if (result.success) {
markTabSaved(activeTab.id, activeTab.content);
markTabSaved(tab.id, contentToSave);
// Refresh git status and inline diff after save
loadGitStatus();
if (showInlineDiff) {
loadFileDiff(activeTab.filePath);
loadFileDiff(tab.filePath);
}
} else {
logger.error('Failed to save file:', result.error);
@@ -508,7 +528,7 @@ export function FileEditorView({ initialPath }: FileEditorViewProps) {
} catch (error) {
logger.error('Failed to save file:', error);
}
}, [activeTab, markTabSaved, loadGitStatus, showInlineDiff, loadFileDiff]);
}, [markTabSaved, loadGitStatus, showInlineDiff, loadFileDiff]);
// ─── Auto Save: save a specific tab by ID ───────────────────
const saveTabById = useCallback(
@@ -584,6 +604,7 @@ export function FileEditorView({ initialPath }: FileEditorViewProps) {
autoSaveTimerRef.current = null;
}
};
// eslint-disable-next-line react-hooks/exhaustive-deps -- activeTab is accessed for isDirty/content only
}, [editorAutoSave, editorAutoSaveDelay, activeTab?.isDirty, activeTab?.content, handleSave]);
// ─── Handle Search ──────────────────────────────────────────
@@ -710,6 +731,7 @@ export function FileEditorView({ initialPath }: FileEditorViewProps) {
model: resolveModelString(featureData.model),
thinkingLevel: featureData.thinkingLevel,
reasoningEffort: featureData.reasoningEffort,
providerId: featureData.providerId,
skipTests: featureData.skipTests,
branchName: featureData.workMode === 'current' ? currentBranch : featureData.branchName,
planningMode: featureData.planningMode,
@@ -1069,6 +1091,7 @@ export function FileEditorView({ initialPath }: FileEditorViewProps) {
} else {
useFileEditorStore.getState().setActiveFileGitDetails(null);
}
// eslint-disable-next-line react-hooks/exhaustive-deps -- activeTab accessed for specific properties only
}, [activeTab?.filePath, activeTab?.isBinary, loadFileGitDetails]);
// Load file diff when inline diff is enabled and active tab changes
@@ -1078,6 +1101,7 @@ export function FileEditorView({ initialPath }: FileEditorViewProps) {
} else {
useFileEditorStore.getState().setActiveFileDiff(null);
}
// eslint-disable-next-line react-hooks/exhaustive-deps -- activeTab accessed for specific properties only
}, [
showInlineDiff,
activeTab?.filePath,

9
apps/ui/src/components/views/file-editor-view/use-file-editor-store.ts
View File

@@ -1,5 +1,6 @@
import { create } from 'zustand';
import { persist, type StorageValue } from 'zustand/middleware';
import { updateTabWithContent, markTabAsSaved } from './file-editor-dirty-utils';
export interface FileTreeNode {
name: string;
@@ -262,17 +263,13 @@ export const useFileEditorStore = create<FileEditorState>()(
updateTabContent: (tabId, content) => {
set({
tabs: get().tabs.map((t) =>
t.id === tabId ? { ...t, content, isDirty: content !== t.originalContent } : t
),
tabs: get().tabs.map((t) => (t.id === tabId ? updateTabWithContent(t, content) : t)),
});
},
markTabSaved: (tabId, content) => {
set({
tabs: get().tabs.map((t) =>
t.id === tabId ? { ...t, content, originalContent: content, isDirty: false } : t
),
tabs: get().tabs.map((t) => (t.id === tabId ? markTabAsSaved(t, content) : t)),
});
},

5
apps/ui/src/components/views/github-issues-view.tsx
View File

@@ -209,10 +209,12 @@ export function GitHubIssuesView() {
model: featureData.model,
thinkingLevel: featureData.thinkingLevel,
reasoningEffort: featureData.reasoningEffort,
providerId: featureData.providerId,
skipTests: featureData.skipTests,
branchName: featureData.workMode === 'current' ? currentBranch : featureData.branchName,
planningMode: featureData.planningMode,
requirePlanApproval: featureData.requirePlanApproval,
dependencies: [],
excludedPipelineSteps: featureData.excludedPipelineSteps,
...(featureData.imagePaths?.length ? { imagePaths: featureData.imagePaths } : {}),
...(featureData.textFilePaths?.length
@@ -288,6 +290,9 @@ export function GitHubIssuesView() {
model: resolveModelString('opus'),
thinkingLevel: 'none' as const,
branchName: currentBranch,
planningMode: 'skip' as const,
requirePlanApproval: false,
dependencies: [],
createdAt: new Date().toISOString(),
updatedAt: new Date().toISOString(),
};

23
apps/ui/src/components/views/github-issues-view/components/issue-detail-panel.tsx
View File

@@ -193,17 +193,16 @@ export function IssueDetailPanel({
</>
);
})()}
{!isMobile && (
<Button
variant="secondary"
size="sm"
onClick={() => onCreateFeature(issue)}
title="Create a new feature to address this issue"
>
<Plus className="h-4 w-4 mr-1" />
Create Feature
</Button>
)}
<Button
variant="secondary"
size="sm"
onClick={() => onCreateFeature(issue)}
aria-label="Create Feature"
title="Create a new feature to address this issue"
>
<Plus className={cn('h-4 w-4', !isMobile && 'mr-1')} />
{!isMobile && 'Create Feature'}
</Button>
<Button
variant="outline"
size="sm"
@@ -395,7 +394,7 @@ export function IssueDetailPanel({
)}
</div>
{/* Create Feature CTA - shown on mobile since it's hidden from the header */}
{/* Create Feature CTA */}
{isMobile && (
<div className="mt-6 p-4 rounded-lg bg-primary/5 border border-primary/20">
<div className="flex items-center gap-2 mb-2">

2
apps/ui/src/components/views/github-issues-view/hooks/use-issue-validation.ts
View File

@@ -264,6 +264,7 @@ export function useIssueValidation({
const modelToUse = normalizedEntry.model;
const thinkingLevelToUse = normalizedEntry.thinkingLevel;
const reasoningEffortToUse = normalizedEntry.reasoningEffort;
const providerIdToUse = normalizedEntry.providerId;
// Use mutation to trigger validation (toast is handled by mutation)
validateIssueMutation.mutate({
@@ -271,6 +272,7 @@ export function useIssueValidation({
model: modelToUse,
thinkingLevel: thinkingLevelToUse,
reasoningEffort: reasoningEffortToUse,
providerId: providerIdToUse,
comments,
linkedPRs,
});

1
apps/ui/src/components/views/github-issues-view/hooks/use-issues-filter.ts
View File

@@ -227,6 +227,7 @@ export function useIssuesFilter(
hasActiveFilter,
matchedCount: matchedIssues.length,
};
// eslint-disable-next-line react-hooks/exhaustive-deps -- filterState destructured to individual deps
}, [
issues,
searchQuery,

13
apps/ui/src/components/views/github-prs-view.tsx
View File

@@ -39,7 +39,7 @@ import {
export function GitHubPRsView() {
const [selectedPR, setSelectedPR] = useState<GitHubPR | null>(null);
const [commentDialogPR, setCommentDialogPR] = useState<GitHubPR | null>(null);
const { currentProject } = useAppStore();
const { currentProject, getEffectiveUseWorktrees } = useAppStore();
const isMobile = useIsMobile();
const {
@@ -84,6 +84,9 @@ export function GitHubPRsView() {
model: resolveModelString('opus'),
thinkingLevel: 'none',
planningMode: 'skip',
requirePlanApproval: false,
dependencies: [],
...(pr.url ? { prUrl: pr.url } : {}),
...(pr.headRefName ? { branchName: pr.headRefName } : {}),
};
@@ -94,7 +97,11 @@ export function GitHubPRsView() {
const api = getElectronAPI();
if (api.autoMode?.runFeature) {
try {
await api.autoMode.runFeature(currentProject.path, featureId);
await api.autoMode.runFeature(
currentProject.path,
featureId,
getEffectiveUseWorktrees(currentProject.path)
);
toast.success('Feature created and started', {
description: `Addressing review comments on PR #${pr.number}`,
});
@@ -118,7 +125,7 @@ export function GitHubPRsView() {
});
}
},
[currentProject, createFeature]
[currentProject, createFeature, getEffectiveUseWorktrees]
);
const formatDate = (dateString: string) => {

200
apps/ui/src/components/views/graph-view-page.tsx
View File

@@ -1,4 +1,4 @@
import { useState, useCallback, useMemo, useEffect } from 'react';
import { useState, useCallback, useMemo, useEffect, useRef } from 'react';
import { useAppStore, Feature, FeatureImagePath } from '@/store/app-store';
import { useShallow } from 'zustand/react/shallow';
import { GraphView } from './graph-view';
@@ -10,7 +10,13 @@ import {
} from './board-view/dialogs';
import { useBoardFeatures, useBoardActions, useBoardPersistence } from './board-view/hooks';
import { useWorktrees } from './board-view/worktree-panel/hooks';
import {
WorktreeMobileDropdown,
BranchSwitchDropdown,
} from './board-view/worktree-panel/components';
import type { BranchInfo, WorktreeInfo } from './board-view/worktree-panel/types';
import { useAutoMode } from '@/hooks/use-auto-mode';
import { useSwitchBranch } from '@/hooks/mutations';
import { pathsEqual } from '@/lib/utils';
import { Spinner } from '@/components/ui/spinner';
import { getElectronAPI } from '@/lib/electron';
@@ -51,7 +57,7 @@ export function GraphViewPage() {
);
// Ensure worktrees are loaded when landing directly on graph view
useWorktrees({ projectPath: currentProject?.path ?? '' });
const { handleSelectWorktree } = useWorktrees({ projectPath: currentProject?.path ?? '' });
const worktreesByProject = useAppStore((s) => s.worktreesByProject);
const worktrees = useMemo(
@@ -108,6 +114,181 @@ export function GraphViewPage() {
const selectedWorktreeBranch =
currentWorktreeBranch || worktrees.find((w) => w.isMain)?.branch || 'main';
const repoDefaultBranch = worktrees.find((w) => w.isMain)?.branch;
// Branch card counts
const branchCardCounts = useMemo(() => {
return hookFeatures.reduce(
(counts, feature) => {
if (feature.status !== 'completed') {
const branch = (feature.branchName as string | undefined) ?? repoDefaultBranch ?? 'main';
counts[branch] = (counts[branch] || 0) + 1;
}
return counts;
},
{} as Record<string, number>
);
}, [hookFeatures, repoDefaultBranch]);
// Graph worktree selector state
const [branches, setBranches] = useState<BranchInfo[]>([]);
const [branchFilter, setBranchFilter] = useState('');
const [isLoadingBranches, setIsLoadingBranches] = useState(false);
const switchBranchMutation = useSwitchBranch();
const latestLoadBranchesId = useRef(0);
const graphWorktrees = useMemo<WorktreeInfo[]>(() => {
return worktrees.map((worktree) => ({
...worktree,
isCurrent: worktree.isMain
? currentWorktreePath === null
: pathsEqual(worktree.path, currentWorktreePath ?? ''),
hasWorktree: worktree.hasWorktree ?? true,
}));
}, [worktrees, currentWorktreePath]);
const isWorktreeSelected = useCallback(
(worktree: WorktreeInfo) => {
return worktree.isMain
? currentWorktreePath === null
: pathsEqual(worktree.path, currentWorktreePath ?? '');
},
[currentWorktreePath]
);
const selectedGraphWorktree = useMemo(
() => graphWorktrees.find((worktree) => isWorktreeSelected(worktree)) ?? null,
[graphWorktrees, isWorktreeSelected]
);
const filteredBranches = useMemo(() => {
const query = branchFilter.trim().toLowerCase();
if (!query) return branches;
return branches.filter((branch) => branch.name.toLowerCase().includes(query));
}, [branches, branchFilter]);
const loadBranchesForWorktree = useCallback(async (worktreePath: string) => {
const requestId = ++latestLoadBranchesId.current;
setIsLoadingBranches(true);
try {
const api = getElectronAPI();
if (!api?.worktree?.listBranches) {
if (requestId === latestLoadBranchesId.current) {
setBranches([]);
setIsLoadingBranches(false);
}
return;
}
const result = await api.worktree.listBranches(worktreePath, true);
if (requestId !== latestLoadBranchesId.current) return;
if (!result.success || !result.result?.branches) {
setBranches([]);
return;
}
setBranches(
result.result.branches.map((branch) => ({
name: branch.name,
isCurrent: branch.isCurrent,
isRemote: branch.isRemote,
}))
);
} catch (error) {
if (requestId !== latestLoadBranchesId.current) return;
logger.error('Error loading branches for graph worktree selector:', error);
setBranches([]);
} finally {
if (requestId === latestLoadBranchesId.current) {
setIsLoadingBranches(false);
}
}
}, []);
const handleGraphSelectWorktree = useCallback(
(worktree: WorktreeInfo) => {
const matchingWorktree = worktrees.find((candidate) =>
worktree.isMain
? candidate.isMain
: !candidate.isMain && pathsEqual(candidate.path, worktree.path)
);
if (matchingWorktree) {
handleSelectWorktree(matchingWorktree);
}
},
[worktrees, handleSelectWorktree]
);
const handleBranchDropdownOpenChange = useCallback(
(open: boolean) => {
if (!open || !selectedGraphWorktree) return;
setBranchFilter('');
loadBranchesForWorktree(selectedGraphWorktree.path);
},
[selectedGraphWorktree, loadBranchesForWorktree]
);
const handleGraphSwitchBranch = useCallback(
(worktree: WorktreeInfo, branchName: string) => {
switchBranchMutation.mutate({
worktreePath: worktree.path,
branchName,
});
},
[switchBranchMutation]
);
const graphWorktreeSelector = useMemo(() => {
return (
<div className="flex items-center gap-2 w-full sm:w-auto">
<WorktreeMobileDropdown
worktrees={graphWorktrees}
isWorktreeSelected={isWorktreeSelected}
hasRunningFeatures={() => false}
isDevServerRunning={() => false}
isDevServerStarting={() => false}
getDevServerInfo={() => undefined}
isActivating={false}
branchCardCounts={branchCardCounts}
onSelectWorktree={handleGraphSelectWorktree}
/>
{selectedGraphWorktree && (
<BranchSwitchDropdown
worktree={selectedGraphWorktree}
isSelected={true}
standalone={true}
branches={branches}
filteredBranches={filteredBranches}
branchFilter={branchFilter}
isLoadingBranches={isLoadingBranches}
isSwitching={switchBranchMutation.isPending}
onOpenChange={handleBranchDropdownOpenChange}
onFilterChange={setBranchFilter}
onSwitchBranch={handleGraphSwitchBranch}
onCreateBranch={() => {
toast.info('Create branch is available in the board worktree panel.');
}}
/>
)}
</div>
);
}, [
graphWorktrees,
isWorktreeSelected,
branchCardCounts,
handleGraphSelectWorktree,
selectedGraphWorktree,
branches,
filteredBranches,
branchFilter,
isLoadingBranches,
switchBranchMutation.isPending,
handleBranchDropdownOpenChange,
handleGraphSwitchBranch,
]);
// Branch suggestions
const [branchSuggestions, setBranchSuggestions] = useState<string[]>([]);
@@ -205,20 +386,6 @@ export function GraphViewPage() {
};
}, [currentProject, pendingBacklogPlan]);
// Branch card counts
const branchCardCounts = useMemo(() => {
return hookFeatures.reduce(
(counts, feature) => {
if (feature.status !== 'completed') {
const branch = (feature.branchName as string | undefined) ?? 'main';
counts[branch] = (counts[branch] || 0) + 1;
}
return counts;
},
{} as Record<string, number>
);
}, [hookFeatures]);
// Category suggestions
const categorySuggestions = useMemo(() => {
const featureCategories = hookFeatures.map((f) => f.category).filter(Boolean);
@@ -424,6 +591,7 @@ export function GraphViewPage() {
hasPendingPlan={Boolean(pendingBacklogPlan)}
planUseSelectedWorktreeBranch={planUseSelectedWorktreeBranch}
onPlanUseSelectedWorktreeBranchChange={setPlanUseSelectedWorktreeBranch}
worktreeSelector={graphWorktreeSelector}
/>
{/* Edit Feature Dialog */}

18
apps/ui/src/components/views/graph-view/graph-canvas.tsx
View File

@@ -1,4 +1,4 @@
import { useCallback, useState, useEffect, useMemo, useRef } from 'react';
import { useCallback, useState, useEffect, useMemo, useRef, type ReactNode } from 'react';
import {
ReactFlow,
Background,
@@ -81,6 +81,7 @@ interface GraphCanvasProps {
backgroundSettings?: BackgroundSettings;
className?: string;
projectPath?: string | null;
worktreeSelector?: ReactNode;
}
// Helper to get session storage key for viewport
@@ -130,6 +131,7 @@ function GraphCanvasInner({
backgroundSettings,
className,
projectPath,
worktreeSelector,
}: GraphCanvasProps) {
const [isLocked, setIsLocked] = useState(false);
const [layoutDirection, setLayoutDirection] = useState<'LR' | 'TB'>('LR');
@@ -539,9 +541,10 @@ function GraphCanvasInner({
<GraphLegend />
{/* Add Feature Button */}
<Panel position="top-right">
<div className="flex items-center gap-2">
{/* Worktree selector + actions */}
<Panel position="top-right" className="mt-14 sm:mt-0">
<div className="flex flex-col items-end gap-2">
{worktreeSelector}
{onOpenPlanDialog && (
<div className="flex items-center gap-1.5 rounded-md border border-border bg-secondary/60 px-2 py-1 shadow-sm">
{hasPendingPlan && (
@@ -572,7 +575,12 @@ function GraphCanvasInner({
)}
</div>
)}
<Button variant="default" size="sm" onClick={onAddFeature} className="gap-1.5">
<Button
variant="default"
size="sm"
onClick={onAddFeature}
className="gap-1.5 w-full sm:w-auto"
>
<Plus className="w-4 h-4" />
Add Feature
</Button>

5
apps/ui/src/components/views/graph-view/graph-view.tsx
View File

@@ -1,4 +1,4 @@
import { useMemo, useCallback } from 'react';
import { useMemo, useCallback, type ReactNode } from 'react';
import { Feature, useAppStore } from '@/store/app-store';
import { GraphCanvas } from './graph-canvas';
import { useBoardBackground } from '../board-view/hooks';
@@ -27,6 +27,7 @@ interface GraphViewProps {
hasPendingPlan?: boolean;
planUseSelectedWorktreeBranch?: boolean;
onPlanUseSelectedWorktreeBranchChange?: (value: boolean) => void;
worktreeSelector?: ReactNode;
}
export function GraphView({
@@ -50,6 +51,7 @@ export function GraphView({
hasPendingPlan,
planUseSelectedWorktreeBranch,
onPlanUseSelectedWorktreeBranchChange,
worktreeSelector,
}: GraphViewProps) {
const currentProject = useAppStore((state) => state.currentProject);
@@ -235,6 +237,7 @@ export function GraphView({
hasPendingPlan={hasPendingPlan}
planUseSelectedWorktreeBranch={planUseSelectedWorktreeBranch}
onPlanUseSelectedWorktreeBranchChange={onPlanUseSelectedWorktreeBranchChange}
worktreeSelector={worktreeSelector}
backgroundStyle={backgroundImageStyle}
backgroundSettings={backgroundSettings}
projectPath={projectPath}

10
apps/ui/src/components/views/graph-view/hooks/use-graph-nodes.ts
View File

@@ -189,7 +189,15 @@ export function useGraphNodes({
});
return { nodes: nodeList, edges: edgeList };
}, [features, runningAutoTasks, filterResult, actionCallbacks, backgroundSettings]);
}, [
features,
runningAutoTasks,
filterResult,
actionCallbacks,
backgroundSettings,
renderMode,
enableEdgeAnimations,
]);
return { nodes, edges };
}

1
apps/ui/src/components/views/interview-view.tsx
View File

@@ -230,6 +230,7 @@ export function InterviewView() {
});
}
}, 500);
// eslint-disable-next-line react-hooks/exhaustive-deps -- generateSpec is stable
}, [input, isGenerating, isComplete, currentQuestionIndex, interviewData]);
const generateSpec = useCallback(async (data: InterviewState) => {

3
apps/ui/src/components/views/login-view.tsx
View File

@@ -319,7 +319,8 @@ export function LoginView() {
if (state.phase === 'redirecting') {
navigate({ to: state.to });
}
}, [state.phase, state.phase === 'redirecting' ? state.to : null, navigate]);
// eslint-disable-next-line react-hooks/exhaustive-deps -- state.to only accessed when phase is redirecting
}, [state.phase, navigate]);
// Handle login form submission
const handleSubmit = (e: React.FormEvent) => {

1
apps/ui/src/components/views/project-settings-view/project-bulk-replace-dialog.tsx
View File

@@ -226,6 +226,7 @@ export function ProjectBulkReplaceDialog({
});
return [defaultFeaturePreview, ...phasePreview];
// eslint-disable-next-line react-hooks/exhaustive-deps -- generatePreviewItem is stable helper
}, [
phaseModels,
projectOverrides,

5
apps/ui/src/components/views/running-agents-view.tsx
View File

@@ -55,7 +55,8 @@ export function RunningAgentsView() {
// Use mutation for regular features
stopFeature.mutate({ featureId: agent.featureId, projectPath: agent.projectPath });
},
[stopFeature, refetch, logger]
// eslint-disable-next-line react-hooks/exhaustive-deps -- logger is stable
[stopFeature, refetch]
);
const handleNavigateToProject = useCallback(
@@ -75,6 +76,7 @@ export function RunningAgentsView() {
});
}
},
// eslint-disable-next-line react-hooks/exhaustive-deps -- logger is stable
[projects, setCurrentProject, navigate]
);
@@ -84,6 +86,7 @@ export function RunningAgentsView() {
projectPath: agent.projectPath,
});
setSelectedAgent(agent);
// eslint-disable-next-line react-hooks/exhaustive-deps -- logger is stable
}, []);
if (isLoading) {

1
apps/ui/src/components/views/settings-view.tsx
View File

@@ -67,7 +67,6 @@ export function SettingsView() {
defaultMaxTurns,
setDefaultMaxTurns,
featureTemplates,
setFeatureTemplates,
addFeatureTemplate,
updateFeatureTemplate,
deleteFeatureTemplate,

9
apps/ui/src/components/views/settings-view/model-defaults/bulk-replace-dialog.tsx
View File

@@ -214,7 +214,14 @@ export function BulkReplaceDialog({ open, onOpenChange }: BulkReplaceDialogProps
});
return [defaultFeaturePreview, ...phasePreview];
}, [phaseModels, selectedProviderConfig, enabledProviders, defaultFeatureModel]);
// eslint-disable-next-line react-hooks/exhaustive-deps -- generatePreviewItem depends on enabledProviders and selectedProviderConfig, which are already in deps
}, [
phaseModels,
selectedProviderConfig,
enabledProviders,
defaultFeatureModel,
generatePreviewItem,
]);
// Count how many will change
const changeCount = preview.filter((p) => p.isChanged).length;

20
apps/ui/src/components/views/settings-view/model-defaults/phase-model-selector.tsx
View File

@@ -1,6 +1,7 @@
import { Fragment, useEffect, useMemo, useRef, useState } from 'react';
import { cn } from '@/lib/utils';
import { useAppStore } from '@/store/app-store';
import { useShallow } from 'zustand/react/shallow';
import { useIsMobile } from '@/hooks/use-media-query';
import { useOpencodeModels } from '@/hooks/queries';
import type {
@@ -186,7 +187,23 @@ export function PhaseModelSelector({
claudeCompatibleProviders,
defaultThinkingLevel: storeDefaultThinkingLevel,
defaultReasoningEffort: storeDefaultReasoningEffort,
} = useAppStore();
} = useAppStore(
useShallow((state) => ({
enabledCursorModels: state.enabledCursorModels,
enabledGeminiModels: state.enabledGeminiModels,
enabledCopilotModels: state.enabledCopilotModels,
favoriteModels: state.favoriteModels,
toggleFavoriteModel: state.toggleFavoriteModel,
codexModels: state.codexModels,
codexModelsLoading: state.codexModelsLoading,
fetchCodexModels: state.fetchCodexModels,
enabledDynamicModelIds: state.enabledDynamicModelIds,
disabledProviders: state.disabledProviders,
claudeCompatibleProviders: state.claudeCompatibleProviders,
defaultThinkingLevel: state.defaultThinkingLevel,
defaultReasoningEffort: state.defaultReasoningEffort,
}))
);
// Use React Query for OpenCode models so that changes made in the settings tab
// (which also uses React Query) are immediately reflected here via the shared cache,
@@ -674,6 +691,7 @@ export function PhaseModelSelector({
transformedCodexModels,
allOpencodeModels,
disabledProviders,
isCursorDisabled,
]);
// Group OpenCode models by model type for better organization

33
apps/ui/src/components/views/settings-view/providers/opencode-model-configuration.tsx
View File

@@ -262,20 +262,23 @@ export function OpencodeModelConfiguration({
const providerOrder: OpencodeProvider[] = ['opencode'];
// Dynamic provider order (prioritize commonly used ones)
const dynamicProviderOrder = [
'github-copilot',
'google',
'openai',
'openrouter',
'anthropic',
'xai',
'deepseek',
'ollama',
'lmstudio',
'azure',
'amazon-bedrock',
'opencode', // Skip opencode in dynamic since it's in static
];
const dynamicProviderOrder = useMemo(
() => [
'github-copilot',
'google',
'openai',
'openrouter',
'anthropic',
'xai',
'deepseek',
'ollama',
'lmstudio',
'azure',
'amazon-bedrock',
'opencode', // Skip opencode in dynamic since it's in static
],
[]
);
const sortedDynamicProviders = useMemo(() => {
const providerIndex = (providerId: string) => dynamicProviderOrder.indexOf(providerId);
@@ -294,7 +297,7 @@ export function OpencodeModelConfiguration({
if (bIndex !== -1) return 1;
return a.localeCompare(b);
});
}, [dynamicModelsByProvider, providers]);
}, [dynamicModelsByProvider, providers, dynamicProviderOrder]);
useEffect(() => {
if (

2
apps/ui/src/components/views/setup-view/steps/cli-setup-step.tsx
View File

@@ -256,7 +256,7 @@ export function CliSetupStep({ config, state, onNext, onBack, onSkip }: CliSetup
setApiKeyVerificationStatus('error');
setApiKeyVerificationError(errorMessage);
}
}, [authStatus, config, setAuthStatus]);
}, [authStatus, config, setAuthStatus, apiKey]);
const deleteApiKey = useCallback(async () => {
setIsDeletingApiKey(true);

16
apps/ui/src/components/views/spec-view/hooks/use-spec-generation.ts
View File

@@ -55,10 +55,20 @@ export function useSpecGeneration({ loadSpec }: UseSpecGenerationOptions) {
// Phase tracking and status
const [currentPhase, setCurrentPhase] = useState<string>('');
const [errorMessage, setErrorMessage] = useState<string>('');
const currentPhaseRef = useRef<string>('');
const errorMessageRef = useRef<string>('');
const statusCheckRef = useRef<boolean>(false);
const stateRestoredRef = useRef<boolean>(false);
const pendingStatusTimeoutRef = useRef<NodeJS.Timeout | null>(null);
useEffect(() => {
currentPhaseRef.current = currentPhase;
}, [currentPhase]);
useEffect(() => {
errorMessageRef.current = errorMessage;
}, [errorMessage]);
// Reset all state when project changes
useEffect(() => {
setIsCreating(false);
@@ -300,7 +310,7 @@ export function useSpecGeneration({ loadSpec }: UseSpecGenerationOptions) {
setLogs(newLog);
logger.debug('[useSpecGeneration] Progress:', event.content.substring(0, 100));
if (errorMessage) {
if (errorMessageRef.current) {
setErrorMessage('');
}
} else if (event.type === 'spec_regeneration_tool') {
@@ -310,7 +320,7 @@ export function useSpecGeneration({ loadSpec }: UseSpecGenerationOptions) {
event.tool?.includes('Feature');
if (isFeatureTool) {
if (currentPhase !== 'feature_generation') {
if (currentPhaseRef.current !== 'feature_generation') {
setCurrentPhase('feature_generation');
setIsCreating(true);
setIsRegenerating(true);
@@ -420,7 +430,7 @@ export function useSpecGeneration({ loadSpec }: UseSpecGenerationOptions) {
return () => {
unsubscribe();
};
}, [currentProject?.path, loadSpec, errorMessage, currentPhase]);
}, [currentProject, loadSpec]);
// Handler functions
const handleCreateSpec = useCallback(async () => {

11
apps/ui/src/components/views/terminal-view.tsx
View File

@@ -40,9 +40,6 @@ import {
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuSub,
DropdownMenuSubContent,
DropdownMenuSubTrigger,
DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import {
@@ -1265,7 +1262,7 @@ export function TerminalView({
// See: terminal-panel.tsx lines 319-399 for the shortcut handlers.
// Collect all terminal IDs from a panel tree in order
const getTerminalIds = (panel: TerminalPanelContent): string[] => {
const getTerminalIds = useCallback((panel: TerminalPanelContent): string[] => {
if (panel.type === 'terminal') {
return [panel.sessionId];
}
@@ -1273,7 +1270,7 @@ export function TerminalView({
return panel.panels.flatMap(getTerminalIds);
}
return []; // testRunner type
};
}, []);
// Get a STABLE key for a panel - uses the stable id for splits
// This prevents unnecessary remounts when layout structure changes
@@ -1428,7 +1425,7 @@ export function TerminalView({
setActiveTerminalSession(nextTerminal);
}
},
[activeTab?.layout, terminalState.activeSessionId, setActiveTerminalSession]
[activeTab?.layout, terminalState.activeSessionId, setActiveTerminalSession, getTerminalIds]
);
// Handle global keyboard shortcuts for pane navigation
@@ -1454,7 +1451,7 @@ export function TerminalView({
window.addEventListener('keydown', handleKeyDown);
return () => window.removeEventListener('keydown', handleKeyDown);
}, [navigateToTerminal]);
}, [navigateToTerminal, getTerminalIds]);
// Render panel content recursively
const renderPanelContent = (content: TerminalPanelContent): React.ReactNode => {

90
apps/ui/src/components/views/terminal-view/terminal-panel.tsx
View File

@@ -1,4 +1,4 @@
import { useEffect, useRef, useCallback, useState } from 'react';
import { useEffect, useRef, useCallback, useState, useMemo } from 'react';
import { useNavigate } from '@tanstack/react-router';
import { createLogger } from '@automaker/utils/logger';
import {
@@ -53,7 +53,7 @@ import { toast } from 'sonner';
import { getElectronAPI } from '@/lib/electron';
import { getApiKey, getSessionToken, getServerUrlSync } from '@/lib/http-api-client';
import { writeToClipboard, readFromClipboard } from '@/lib/clipboard-utils';
import { useIsMobile } from '@/hooks/use-media-query';
import { useIsMobile, useIsTablet } from '@/hooks/use-media-query';
import { useVirtualKeyboardResize } from '@/hooks/use-virtual-keyboard-resize';
import { MobileTerminalShortcuts } from './mobile-terminal-shortcuts';
import { applyStickyModifier, type StickyModifier } from './sticky-modifier-keys';
@@ -161,6 +161,8 @@ export function TerminalPanel({
const [isImageDragOver, setIsImageDragOver] = useState(false);
const [isProcessingImage, setIsProcessingImage] = useState(false);
const hasRunInitialCommandRef = useRef(false);
const runCommandOnConnectRef = useRef(runCommandOnConnect);
const onCommandRanRef = useRef(onCommandRan);
// Long-press timer for mobile context menu
const longPressTimerRef = useRef<NodeJS.Timeout | null>(null);
const longPressTouchStartRef = useRef<{ x: number; y: number } | null>(null);
@@ -176,6 +178,9 @@ export function TerminalPanel({
const showSearchRef = useRef(false);
const [isAtBottom, setIsAtBottom] = useState(true);
runCommandOnConnectRef.current = runCommandOnConnect;
onCommandRanRef.current = onCommandRan;
// Mobile text selection mode - renders terminal buffer as selectable DOM text
const [isSelectMode, setIsSelectMode] = useState(false);
const [selectModeText, setSelectModeText] = useState('');
@@ -192,8 +197,10 @@ export function TerminalPanel({
const INITIAL_RECONNECT_DELAY = 1000;
const [processExitCode, setProcessExitCode] = useState<number | null>(null);
// Detect mobile viewport for shortcuts bar
// Detect mobile/tablet viewport for shortcuts bar
const isMobile = useIsMobile();
const isTablet = useIsTablet();
const showShortcutsBar = isMobile || isTablet;
// Track virtual keyboard height on mobile to prevent overlap
const { keyboardHeight, isKeyboardOpen } = useVirtualKeyboardResize();
@@ -514,18 +521,21 @@ export function TerminalPanel({
// Get theme colors for search highlighting
const terminalTheme = getTerminalTheme(effectiveTheme);
const searchOptions = {
caseSensitive: false,
regex: false,
decorations: {
matchBackground: terminalTheme.searchMatchBackground,
matchBorder: terminalTheme.searchMatchBorder,
matchOverviewRuler: terminalTheme.searchMatchBorder,
activeMatchBackground: terminalTheme.searchActiveMatchBackground,
activeMatchBorder: terminalTheme.searchActiveMatchBorder,
activeMatchColorOverviewRuler: terminalTheme.searchActiveMatchBorder,
},
};
const searchOptions = useMemo(
() => ({
caseSensitive: false,
regex: false,
decorations: {
matchBackground: terminalTheme.searchMatchBackground,
matchBorder: terminalTheme.searchMatchBorder,
matchOverviewRuler: terminalTheme.searchMatchBorder,
activeMatchBackground: terminalTheme.searchActiveMatchBackground,
activeMatchBorder: terminalTheme.searchActiveMatchBorder,
activeMatchColorOverviewRuler: terminalTheme.searchActiveMatchBorder,
},
}),
[terminalTheme]
);
// Search functions
const searchNext = useCallback(() => {
@@ -1207,8 +1217,9 @@ export function TerminalPanel({
}
// Run initial command if specified and not already run
// Only run for new terminals (no scrollback received)
const initialCommand = runCommandOnConnectRef.current;
if (
runCommandOnConnect &&
initialCommand &&
!hasRunInitialCommandRef.current &&
ws.readyState === WebSocket.OPEN
) {
@@ -1222,10 +1233,8 @@ export function TerminalPanel({
setTimeout(() => {
if (ws.readyState === WebSocket.OPEN) {
ws.send(
JSON.stringify({ type: 'input', data: runCommandOnConnect + lineEnding })
);
onCommandRan?.();
ws.send(JSON.stringify({ type: 'input', data: initialCommand + lineEnding }));
onCommandRanRef.current?.();
}
}, delay);
}
@@ -1506,21 +1515,36 @@ export function TerminalPanel({
}, [fontSize, isTerminalReady]);
// Update terminal theme when app theme or custom colors change (including system preference)
// We read directly from the store to ensure we have the latest values, avoiding potential
// stale closure issues with the useShallow subscription when the terminal first becomes ready.
// The dependency array includes the subscription values to trigger the effect when colors change,
// but we read from getState() inside to guarantee we always have the most current values.
useEffect(() => {
if (xtermRef.current && isTerminalReady) {
// Clear any search decorations first to prevent stale color artifacts
searchAddonRef.current?.clearDecorations();
const baseTheme = getTerminalTheme(resolvedTheme);
// Read colors directly from store to ensure we have the latest values.
// This fixes a race condition where the terminal might be created before
// settings are fully hydrated from the server. We prioritize store values
// over subscription values to avoid stale closures.
const storeState = useAppStore.getState().terminalState;
const customBgColor = storeState.customBackgroundColor;
const customFgColor = storeState.customForegroundColor;
const terminalTheme =
customBackgroundColor || customForegroundColor
customBgColor || customFgColor
? {
...baseTheme,
...(customBackgroundColor && { background: customBackgroundColor }),
...(customForegroundColor && { foreground: customForegroundColor }),
...(customBgColor && { background: customBgColor }),
...(customFgColor && { foreground: customFgColor }),
}
: baseTheme;
xtermRef.current.options.theme = terminalTheme;
}
// Note: customBackgroundColor and customForegroundColor are in dependencies to trigger
// re-renders when colors change, but we read from getState() inside for actual values
}, [resolvedTheme, customBackgroundColor, customForegroundColor, isTerminalReady]);
// Handle keyboard shortcuts for zoom (Ctrl+Plus, Ctrl+Minus, Ctrl+0)
@@ -1588,7 +1612,7 @@ export function TerminalPanel({
}, [zoomIn, zoomOut]);
// Context menu actions for keyboard navigation
const menuActions = ['copy', 'paste', 'selectAll', 'clear'] as const;
const menuActions = useMemo(() => ['copy', 'paste', 'selectAll', 'clear'] as const, []);
// Keep ref in sync with state for use in event handlers
useEffect(() => {
@@ -1658,7 +1682,7 @@ export function TerminalPanel({
document.removeEventListener('scroll', handleScroll, true);
document.removeEventListener('keydown', handleKeyDown);
};
}, [contextMenu, closeContextMenu, handleContextMenuAction]);
}, [contextMenu, closeContextMenu, handleContextMenuAction, menuActions]);
// Focus the correct menu item when navigation changes
useEffect(() => {
@@ -1667,16 +1691,16 @@ export function TerminalPanel({
buttons[focusedMenuIndex]?.focus();
}, [focusedMenuIndex, contextMenu]);
// Reset select mode when viewport transitions from mobile to non-mobile.
// The select-mode overlay is only rendered when (isSelectMode && isMobile), so if the
// viewport becomes non-mobile while isSelectMode is true the overlay disappears but the
// Reset select mode when viewport transitions away from shortcuts-bar viewports.
// The select-mode overlay is only rendered when (isSelectMode && showShortcutsBar), so if the
// viewport no longer shows the shortcuts bar while isSelectMode is true the overlay disappears but the
// state is left dirty with no UI to clear it. Resetting here keeps state consistent.
useEffect(() => {
if (!isMobile && isSelectMode) {
if (!showShortcutsBar && isSelectMode) {
setIsSelectMode(false);
setSelectModeText('');
}
}, [isMobile]); // eslint-disable-line react-hooks/exhaustive-deps
}, [showShortcutsBar, isSelectMode]);
// Handle right-click context menu with boundary checking
const handleContextMenu = useCallback((e: React.MouseEvent) => {
@@ -2398,8 +2422,8 @@ export function TerminalPanel({
</div>
)}
{/* Mobile shortcuts bar - special keys, clipboard, and arrow keys for touch devices */}
{isMobile && (
{/* Mobile/tablet shortcuts bar - special keys, clipboard, and arrow keys for touch devices */}
{showShortcutsBar && (
<MobileTerminalShortcuts
onSendInput={sendTerminalInput}
isConnected={connectionStatus === 'connected'}
@@ -2443,7 +2467,7 @@ export function TerminalPanel({
Overlays the canvas so users can use native touch selection on real DOM text.
xterm.js renders to a <canvas>, which prevents native text selection on mobile.
This overlay shows the same content as real DOM text that supports touch selection. */}
{isSelectMode && isMobile && (
{isSelectMode && showShortcutsBar && (
<div className="absolute inset-0 z-30 flex flex-col">
{/* Header bar with copy/done actions */}
<div className="flex items-center justify-between px-3 py-2 bg-brand-500/95 backdrop-blur-sm text-white shrink-0">

7
apps/ui/src/hooks/mutations/use-github-mutations.ts
View File

@@ -19,6 +19,7 @@ interface ValidateIssueInput {
model?: ModelId;
thinkingLevel?: ThinkingLevel;
reasoningEffort?: ReasoningEffort;
providerId?: string;
comments?: GitHubComment[];
linkedPRs?: LinkedPRInfo[];
}
@@ -47,7 +48,8 @@ interface ValidateIssueInput {
export function useValidateIssue(projectPath: string) {
return useMutation({
mutationFn: async (input: ValidateIssueInput) => {
const { issue, model, thinkingLevel, reasoningEffort, comments, linkedPRs } = input;
const { issue, model, thinkingLevel, reasoningEffort, providerId, comments, linkedPRs } =
input;
const api = getElectronAPI();
if (!api.github?.validateIssue) {
@@ -71,7 +73,8 @@ export function useValidateIssue(projectPath: string) {
validationInput,
resolvedModel,
thinkingLevel,
reasoningEffort
reasoningEffort,
providerId
);
if (!result.success) {

95
apps/ui/src/hooks/queries/use-features.ts
View File

@@ -12,6 +12,7 @@ import { getElectronAPI } from '@/lib/electron';
import { queryKeys } from '@/lib/query-keys';
import { STALE_TIMES } from '@/lib/query-client';
import { createSmartPollingInterval, getGlobalEventsRecent } from '@/hooks/use-event-recency';
import { isPipelineStatus } from '@automaker/types';
import type { Feature } from '@/store/app-store';
const FEATURES_REFETCH_ON_FOCUS = false;
@@ -25,7 +26,7 @@ const FEATURES_CACHE_PREFIX = 'automaker:features-cache:';
* Bump this version whenever the Feature shape changes so stale localStorage
* entries with incompatible schemas are automatically discarded.
*/
const FEATURES_CACHE_VERSION = 1;
const FEATURES_CACHE_VERSION = 2;
/** Maximum number of per-project cache entries to keep in localStorage (LRU). */
const MAX_FEATURES_CACHE_ENTRIES = 10;
@@ -37,13 +38,75 @@ interface PersistedFeaturesCache {
features: Feature[];
}
const STATIC_FEATURE_STATUSES: ReadonlySet<string> = new Set([
'backlog',
'merge_conflict',
'ready',
'in_progress',
'interrupted',
'waiting_approval',
'verified',
'completed',
]);
function isValidFeatureStatus(value: unknown): value is Feature['status'] {
return (
typeof value === 'string' && (STATIC_FEATURE_STATUSES.has(value) || isPipelineStatus(value))
);
}
function sanitizePersistedFeatureEntry(value: unknown): Feature | null {
if (typeof value !== 'object' || value === null) {
return null;
}
const raw = value as Record<string, unknown>;
const id = typeof raw.id === 'string' ? raw.id.trim() : '';
if (!id) {
return null;
}
return {
...(raw as Feature),
id,
title: typeof raw.title === 'string' ? raw.title : undefined,
titleGenerating: typeof raw.titleGenerating === 'boolean' ? raw.titleGenerating : undefined,
category: typeof raw.category === 'string' ? raw.category : '',
description: typeof raw.description === 'string' ? raw.description : '',
steps: Array.isArray(raw.steps)
? raw.steps.filter((step): step is string => typeof step === 'string')
: [],
status: isValidFeatureStatus(raw.status) ? raw.status : 'backlog',
branchName:
typeof raw.branchName === 'string' && raw.branchName.trim() ? raw.branchName : undefined,
};
}
export function sanitizePersistedFeatures(features: unknown): Feature[] {
if (!Array.isArray(features)) {
return [];
}
const sanitized: Feature[] = [];
for (const feature of features) {
const normalized = sanitizePersistedFeatureEntry(feature);
if (normalized) {
sanitized.push(normalized);
}
}
return sanitized;
}
function readPersistedFeatures(projectPath: string): PersistedFeaturesCache | null {
if (typeof window === 'undefined') return null;
try {
const raw = window.localStorage.getItem(`${FEATURES_CACHE_PREFIX}${projectPath}`);
if (!raw) return null;
const parsed = JSON.parse(raw) as PersistedFeaturesCache;
if (!parsed || !Array.isArray(parsed.features) || typeof parsed.timestamp !== 'number') {
const parsed = JSON.parse(raw) as {
schemaVersion?: number;
timestamp?: number;
features?: unknown;
};
if (!parsed || typeof parsed.timestamp !== 'number') {
return null;
}
// Reject entries written by an older (or newer) schema version
@@ -52,7 +115,31 @@ function readPersistedFeatures(projectPath: string): PersistedFeaturesCache | nu
window.localStorage.removeItem(`${FEATURES_CACHE_PREFIX}${projectPath}`);
return null;
}
return parsed;
const features = sanitizePersistedFeatures(parsed.features);
// If schema claims valid but nothing survived sanitization, treat as corrupt.
if (Array.isArray(parsed.features) && parsed.features.length > 0 && features.length === 0) {
window.localStorage.removeItem(`${FEATURES_CACHE_PREFIX}${projectPath}`);
return null;
}
// Migrate partial/corrupt entries in-place so later reads are clean.
if (Array.isArray(parsed.features) && features.length !== parsed.features.length) {
window.localStorage.setItem(
`${FEATURES_CACHE_PREFIX}${projectPath}`,
JSON.stringify({
schemaVersion: FEATURES_CACHE_VERSION,
timestamp: parsed.timestamp,
features,
} satisfies PersistedFeaturesCache)
);
}
return {
schemaVersion: FEATURES_CACHE_VERSION,
timestamp: parsed.timestamp,
features,
};
} catch {
return null;
}

130
apps/ui/src/hooks/use-agent-output-websocket.ts Normal file
View File

@@ -0,0 +1,130 @@
/**
* Custom hook for handling WebSocket events in AgentOutputModal
* Centralizes WebSocket event logic to reduce duplication
*/
import { useEffect, useRef, useCallback, useState } from 'react';
import { getElectronAPI } from '@/lib/electron';
import { useAgentOutput } from '@/hooks/queries';
import {
formatAutoModeEventContent,
formatBacklogPlanEventContent,
} from '@/components/views/board-view/dialogs/event-content-formatter';
import type { AutoModeEvent } from '@/types/electron';
import type { BacklogPlanEvent } from '@automaker/types';
import { MODAL_CONSTANTS } from '@/components/views/board-view/dialogs/agent-output-modal.constants';
interface UseAgentOutputWebSocketProps {
open: boolean;
featureId: string;
isBacklogPlan: boolean;
projectPath: string;
onFeatureComplete?: (passes: boolean) => void;
}
export function useAgentOutputWebSocket({
open,
featureId,
isBacklogPlan,
projectPath,
onFeatureComplete,
}: UseAgentOutputWebSocketProps) {
const [streamedContent, setStreamedContent] = useState('');
const closeTimeoutRef = useRef<NodeJS.Timeout>();
// Use React Query for initial output loading
const { data: initialOutput = '', isLoading } = useAgentOutput(projectPath, featureId, {
enabled: open && !!projectPath,
});
// Combine initial output with streamed content
const output = initialOutput + streamedContent;
// Handle auto mode events
const handleAutoModeEvent = useCallback(
(event: AutoModeEvent) => {
// Filter events for this specific feature only
if ('featureId' in event && event.featureId !== featureId) {
return;
}
const newContent = formatAutoModeEventContent(event);
if (newContent) {
setStreamedContent((prev) => prev + newContent);
}
// Handle feature completion
if (event.type === 'auto_mode_feature_complete' && event.passes && onFeatureComplete) {
// Clear any existing timeout first
if (closeTimeoutRef.current) {
clearTimeout(closeTimeoutRef.current);
}
// Set timeout to close modal after delay
closeTimeoutRef.current = setTimeout(() => {
onFeatureComplete(true);
}, MODAL_CONSTANTS.MODAL_CLOSE_DELAY_MS);
}
},
[featureId, onFeatureComplete]
);
// Handle backlog plan events
const handleBacklogPlanEvent = useCallback((event: BacklogPlanEvent) => {
const newContent = formatBacklogPlanEventContent(event);
if (newContent) {
setStreamedContent((prev) => prev + newContent);
}
}, []);
// Set up WebSocket event listeners
useEffect(() => {
if (!open) {
// Clean up timeout when modal closes
if (closeTimeoutRef.current) {
clearTimeout(closeTimeoutRef.current);
closeTimeoutRef.current = undefined;
}
return;
}
const api = getElectronAPI();
if (!api) return;
let unsubscribe: (() => void) | undefined;
if (isBacklogPlan) {
// Handle backlog plan events
if (api.backlogPlan) {
unsubscribe = api.backlogPlan.onEvent(handleBacklogPlanEvent);
}
} else {
// Handle auto mode events
if (api.autoMode) {
unsubscribe = api.autoMode.onEvent(handleAutoModeEvent);
}
}
return () => {
if (closeTimeoutRef.current) {
clearTimeout(closeTimeoutRef.current);
}
unsubscribe?.();
};
}, [open, featureId, isBacklogPlan, handleAutoModeEvent, handleBacklogPlanEvent]);
// Reset streamed content when modal opens or featureId changes
useEffect(() => {
if (open) {
setStreamedContent('');
}
}, [open, featureId]);
return {
output,
isLoading,
streamedContent,
};
}

36
apps/ui/src/hooks/use-auto-mode.ts
View File

@@ -11,6 +11,10 @@ import { getGlobalEventsRecent } from '@/hooks/use-event-recency';
const logger = createLogger('AutoMode');
const AUTO_MODE_SESSION_KEY = 'automaker:autoModeRunningByWorktreeKey';
// Session key delimiter for parsing stored worktree keys
const SESSION_KEY_DELIMITER = '::';
// Marker for main worktree in session storage keys
const MAIN_WORKTREE_MARKER = '__main__';
function arraysEqual(a: string[], b: string[]): boolean {
if (a.length !== b.length) return false;
@@ -25,7 +29,7 @@ const AUTO_MODE_POLLING_INTERVAL = 30000;
* @param branchName - The branch name, or null for main worktree
*/
function getWorktreeSessionKey(projectPath: string, branchName: string | null): string {
return `${projectPath}::${branchName ?? '__main__'}`;
return `${projectPath}${SESSION_KEY_DELIMITER}${branchName ?? MAIN_WORKTREE_MARKER}`;
}
function readAutoModeSession(): Record<string, boolean> {
@@ -84,9 +88,9 @@ export function useAutoMode(worktree?: WorktreeInfo) {
setPendingPlanApproval,
getWorktreeKey,
getMaxConcurrencyForWorktree,
setMaxConcurrencyForWorktree,
isPrimaryWorktreeBranch,
globalMaxConcurrency,
addRecentlyCompletedFeature,
} = useAppStore(
useShallow((state) => ({
autoModeByWorktree: state.autoModeByWorktree,
@@ -99,9 +103,9 @@ export function useAutoMode(worktree?: WorktreeInfo) {
setPendingPlanApproval: state.setPendingPlanApproval,
getWorktreeKey: state.getWorktreeKey,
getMaxConcurrencyForWorktree: state.getMaxConcurrencyForWorktree,
setMaxConcurrencyForWorktree: state.setMaxConcurrencyForWorktree,
isPrimaryWorktreeBranch: state.isPrimaryWorktreeBranch,
globalMaxConcurrency: state.maxConcurrency,
addRecentlyCompletedFeature: state.addRecentlyCompletedFeature,
}))
);
@@ -274,6 +278,28 @@ export function useAutoMode(worktree?: WorktreeInfo) {
}
}, [currentProject, setAutoModeRunning]);
// Restore auto mode state from session storage on mount.
// This ensures that auto mode indicators show up immediately on page load,
// before the refreshStatus API call completes. The session storage is
// populated whenever auto mode starts/stops, so it provides a reliable
// initial state that will be verified/corrected by refreshStatus.
useEffect(() => {
if (!currentProject) return;
try {
const sessionData = readAutoModeSession();
const currentBranchName = branchNameRef.current;
const currentKey = getWorktreeSessionKey(currentProject.path, currentBranchName);
if (sessionData[currentKey] === true) {
setAutoModeRunning(currentProject.id, currentBranchName, true);
logger.debug(`Restored auto mode state from session storage for key: ${currentKey}`);
}
} catch (error) {
logger.error('Error restoring auto mode state from session storage:', error);
}
}, [currentProject, setAutoModeRunning]);
// On mount (and when refreshStatus identity changes, e.g. project switch),
// query backend for current auto loop status and sync UI state.
// This handles cases where the backend is still running after a page refresh.
@@ -445,6 +471,9 @@ export function useAutoMode(worktree?: WorktreeInfo) {
// Feature completed - remove from running tasks and UI will reload features on its own
if (event.featureId) {
logger.info('Feature completed:', event.featureId, 'passes:', event.passes);
// Track recently completed to prevent race condition where completed features
// briefly appear in backlog due to stale cache data
addRecentlyCompletedFeature(event.featureId);
removeRunningTask(eventProjectId, eventBranchName, event.featureId);
addAutoModeActivity({
featureId: event.featureId,
@@ -697,6 +726,7 @@ export function useAutoMode(worktree?: WorktreeInfo) {
currentProject?.path,
getMaxConcurrencyForWorktree,
isPrimaryWorktreeBranch,
addRecentlyCompletedFeature,
]);
// Start auto mode - calls backend to start the auto loop for this worktree

4
apps/ui/src/hooks/use-guided-prompts.ts
View File

@@ -23,8 +23,8 @@ interface UseGuidedPromptsReturn {
export function useGuidedPrompts(): UseGuidedPromptsReturn {
const { data, isLoading, error, refetch } = useIdeationPrompts();
const prompts = data?.prompts ?? [];
const categories = data?.categories ?? [];
const prompts = useMemo(() => data?.prompts ?? [], [data?.prompts]);
const categories = useMemo(() => data?.categories ?? [], [data?.categories]);
const getPromptsByCategory = useCallback(
(category: IdeaCategory): IdeationPrompt[] => {

18
apps/ui/src/hooks/use-settings-migration.ts
View File

@@ -204,6 +204,7 @@ export function parseLocalStorageSettings(): Partial<GlobalSettings> | null {
projectHistoryIndex: state.projectHistoryIndex as number,
lastSelectedSessionByProject:
state.lastSelectedSessionByProject as GlobalSettings['lastSelectedSessionByProject'],
agentModelBySession: state.agentModelBySession as GlobalSettings['agentModelBySession'],
// UI State from standalone localStorage keys or Zustand state
worktreePanelCollapsed:
worktreePanelCollapsed === 'true' || (state.worktreePanelCollapsed as boolean),
@@ -332,6 +333,15 @@ export function mergeSettings(
merged.lastSelectedSessionByProject = localSettings.lastSelectedSessionByProject;
}
if (
(!serverSettings.agentModelBySession ||
Object.keys(serverSettings.agentModelBySession).length === 0) &&
localSettings.agentModelBySession &&
Object.keys(localSettings.agentModelBySession).length > 0
) {
merged.agentModelBySession = localSettings.agentModelBySession;
}
// For simple values, use localStorage if server value is default/undefined
if (!serverSettings.lastProjectDir && localSettings.lastProjectDir) {
merged.lastProjectDir = localSettings.lastProjectDir;
@@ -799,6 +809,13 @@ export function hydrateStoreFromSettings(settings: GlobalSettings): void {
projectHistory: settings.projectHistory ?? [],
projectHistoryIndex: settings.projectHistoryIndex ?? -1,
lastSelectedSessionByProject: settings.lastSelectedSessionByProject ?? {},
agentModelBySession: settings.agentModelBySession
? Object.fromEntries(
Object.entries(settings.agentModelBySession as Record<string, unknown>).map(
([sessionId, entry]) => [sessionId, migratePhaseModelEntry(entry)]
)
)
: current.agentModelBySession,
// Sanitize currentWorktreeByProject: only restore entries where path is null
// (main branch). Non-null paths point to worktree directories that may have
// been deleted while the app was closed. Restoring a stale path causes the
@@ -926,6 +943,7 @@ function buildSettingsUpdateFromStore(): Record<string, unknown> {
projectHistory: state.projectHistory,
projectHistoryIndex: state.projectHistoryIndex,
lastSelectedSessionByProject: state.lastSelectedSessionByProject,
agentModelBySession: state.agentModelBySession,
currentWorktreeByProject: state.currentWorktreeByProject,
worktreePanelCollapsed: state.worktreePanelCollapsed,
lastProjectDir: state.lastProjectDir,

6
apps/ui/src/hooks/use-settings-sync.ts
View File

@@ -105,7 +105,7 @@ const SETTINGS_FIELDS_TO_SYNC = [
'promptCustomization',
'eventHooks',
'featureTemplates',
'claudeCompatibleProviders',
'claudeCompatibleProviders', // Claude-compatible provider configs - must persist to server
'claudeApiProfiles',
'activeClaudeApiProfileId',
'projects',
@@ -450,6 +450,7 @@ export function useSettingsSync(): SettingsSyncState {
}
initializeSync();
// eslint-disable-next-line react-hooks/exhaustive-deps -- state.loaded is intentionally excluded to prevent infinite loop
}, [authChecked, isAuthenticated, settingsLoaded]);
// Subscribe to store changes and sync to server
@@ -823,6 +824,9 @@ export async function refreshSettingsFromServer(): Promise<boolean> {
editorAutoSaveDelay: serverSettings.editorAutoSaveDelay ?? 1000,
defaultTerminalId: serverSettings.defaultTerminalId ?? null,
promptCustomization: serverSettings.promptCustomization ?? {},
// Claude-compatible providers - must be loaded from server for persistence
claudeCompatibleProviders: serverSettings.claudeCompatibleProviders ?? [],
// Deprecated Claude API profiles (kept for migration)
claudeApiProfiles: serverSettings.claudeApiProfiles ?? [],
activeClaudeApiProfileId: serverSettings.activeClaudeApiProfileId ?? null,
projects: serverSettings.projects,

6
apps/ui/src/hooks/use-test-runners.ts
View File

@@ -59,7 +59,6 @@ export function useTestRunners(worktreePath?: string) {
// Get store state and actions
const {
sessions,
activeSessionByWorktree,
isLoading,
error,
startSession,
@@ -75,7 +74,6 @@ export function useTestRunners(worktreePath?: string) {
} = useTestRunnersStore(
useShallow((state) => ({
sessions: state.sessions,
activeSessionByWorktree: state.activeSessionByWorktree,
isLoading: state.isLoading,
error: state.error,
startSession: state.startSession,
@@ -95,12 +93,12 @@ export function useTestRunners(worktreePath?: string) {
const activeSession = useMemo(() => {
if (!worktreePath) return null;
return getActiveSession(worktreePath);
}, [worktreePath, getActiveSession, activeSessionByWorktree]);
}, [worktreePath, getActiveSession]);
const isRunning = useMemo(() => {
if (!worktreePath) return false;
return isWorktreeRunning(worktreePath);
}, [worktreePath, isWorktreeRunning, activeSessionByWorktree, sessions]);
}, [worktreePath, isWorktreeRunning]);
// Get all sessions for the current worktree
const worktreeSessions = useMemo(() => {

36
apps/ui/src/lib/agent-context-parser.ts
View File

@@ -3,6 +3,8 @@
* Extracts useful information from agent context files for display in kanban cards
*/
import type { ClaudeCompatibleProvider } from '@automaker/types';
export interface AgentTaskInfo {
// Task list extracted from TodoWrite tool calls
todos: {
@@ -30,9 +32,39 @@ export interface AgentTaskInfo {
export const DEFAULT_MODEL = 'claude-opus-4-6';
/**
* Formats a model name for display
* Options for formatting model names
*/
export function formatModelName(model: string): string {
export interface FormatModelNameOptions {
/** Provider ID to look up custom display names */
providerId?: string;
/** List of Claude-compatible providers to search for display names */
claudeCompatibleProviders?: ClaudeCompatibleProvider[];
}
/**
* Formats a model name for display, with optional provider-aware lookup.
*
* When a providerId and providers array are supplied, this function will:
* 1. Look up the provider configuration
* 2. Find the model in the provider's models array
* 3. Return the displayName from that configuration
*
* This allows Claude-compatible providers (like GLM, MiniMax, OpenRouter) to
* show their own model names (e.g., "GLM 4.7", "MiniMax M2.1") instead of
* the internal Claude model aliases (e.g., "Sonnet 4.5").
*/
export function formatModelName(model: string, options?: FormatModelNameOptions): string {
// If we have a providerId and providers array, look up the display name from the provider
if (options?.providerId && options?.claudeCompatibleProviders) {
const provider = options.claudeCompatibleProviders.find((p) => p.id === options.providerId);
if (provider?.models) {
const providerModel = provider.models.find((m) => m.id === model);
if (providerModel?.displayName) {
return providerModel.displayName;
}
}
}
// Claude models
if (model.includes('opus-4-6') || model === 'claude-opus') return 'Opus 4.6';
if (model.includes('opus')) return 'Opus 4.5';

19
apps/ui/src/lib/electron.ts
View File

@@ -370,7 +370,8 @@ export interface GitHubAPI {
issue: IssueValidationInput,
model?: ModelId,
thinkingLevel?: ThinkingLevel,
reasoningEffort?: ReasoningEffort
reasoningEffort?: ReasoningEffort,
providerId?: string
) => Promise<{ success: boolean; message?: string; issueNumber?: number; error?: string }>;
/** Check validation status for an issue or all issues */
getValidationStatus: (
@@ -2388,12 +2389,18 @@ function createMockWorktreeAPI(): WorktreeAPI {
};
},
pull: async (worktreePath: string, remote?: string, stashIfNeeded?: boolean) => {
pull: async (
worktreePath: string,
remote?: string,
stashIfNeeded?: boolean,
remoteBranch?: string
) => {
const targetRemote = remote || 'origin';
console.log('[Mock] Pulling latest changes for:', {
worktreePath,
remote: targetRemote,
stashIfNeeded,
remoteBranch,
});
return {
success: true,
@@ -2901,8 +2908,8 @@ function createMockWorktreeAPI(): WorktreeAPI {
},
};
},
rebase: async (worktreePath: string, ontoBranch: string) => {
console.log('[Mock] Rebase:', { worktreePath, ontoBranch });
rebase: async (worktreePath: string, ontoBranch: string, remote?: string) => {
console.log('[Mock] Rebase:', { worktreePath, ontoBranch, remote });
return {
success: true,
result: {
@@ -3994,7 +4001,8 @@ function createMockGitHubAPI(): GitHubAPI {
issue: IssueValidationInput,
model?: ModelId,
thinkingLevel?: ThinkingLevel,
reasoningEffort?: ReasoningEffort
reasoningEffort?: ReasoningEffort,
providerId?: string
) => {
console.log('[Mock] Starting async validation:', {
projectPath,
@@ -4002,6 +4010,7 @@ function createMockGitHubAPI(): GitHubAPI {
model,
thinkingLevel,
reasoningEffort,
providerId,
});
// Simulate async validation in background

23
apps/ui/src/lib/http-api-client.ts
View File

@@ -565,6 +565,7 @@ type EventType =
| 'worktree:init-started'
| 'worktree:init-output'
| 'worktree:init-completed'
| 'dev-server:starting'
| 'dev-server:started'
| 'dev-server:output'
| 'dev-server:stopped'
@@ -586,6 +587,11 @@ interface DevServerUrlEvent {
timestamp: string;
}
export interface DevServerStartingEvent {
worktreePath: string;
timestamp: string;
}
export type DevServerStartedEvent = DevServerUrlEvent;
export interface DevServerOutputEvent {
@@ -605,6 +611,7 @@ export interface DevServerStoppedEvent {
export type DevServerUrlDetectedEvent = DevServerUrlEvent;
export type DevServerLogEvent =
| { type: 'dev-server:starting'; payload: DevServerStartingEvent }
| { type: 'dev-server:started'; payload: DevServerStartedEvent }
| { type: 'dev-server:output'; payload: DevServerOutputEvent }
| { type: 'dev-server:stopped'; payload: DevServerStoppedEvent }
@@ -2250,8 +2257,8 @@ export class HttpApiClient implements ElectronAPI {
}),
stageFiles: (worktreePath: string, files: string[], operation: 'stage' | 'unstage') =>
this.post('/api/worktree/stage-files', { worktreePath, files, operation }),
pull: (worktreePath: string, remote?: string, stashIfNeeded?: boolean) =>
this.post('/api/worktree/pull', { worktreePath, remote, stashIfNeeded }),
pull: (worktreePath: string, remote?: string, stashIfNeeded?: boolean, remoteBranch?: string) =>
this.post('/api/worktree/pull', { worktreePath, remote, remoteBranch, stashIfNeeded }),
checkoutBranch: (
worktreePath: string,
branchName: string,
@@ -2294,6 +2301,9 @@ export class HttpApiClient implements ElectronAPI {
getDevServerLogs: (worktreePath: string): Promise<DevServerLogsResponse> =>
this.get(`/api/worktree/dev-server-logs?worktreePath=${encodeURIComponent(worktreePath)}`),
onDevServerLogEvent: (callback: (event: DevServerLogEvent) => void) => {
const unsub0 = this.subscribeToEvent('dev-server:starting', (payload) =>
callback({ type: 'dev-server:starting', payload: payload as DevServerStartingEvent })
);
const unsub1 = this.subscribeToEvent('dev-server:started', (payload) =>
callback({ type: 'dev-server:started', payload: payload as DevServerStartedEvent })
);
@@ -2307,6 +2317,7 @@ export class HttpApiClient implements ElectronAPI {
callback({ type: 'dev-server:url-detected', payload: payload as DevServerUrlDetectedEvent })
);
return () => {
unsub0();
unsub1();
unsub2();
unsub3();
@@ -2363,8 +2374,8 @@ export class HttpApiClient implements ElectronAPI {
this.post('/api/worktree/stash-drop', { worktreePath, stashIndex }),
cherryPick: (worktreePath: string, commitHashes: string[], options?: { noCommit?: boolean }) =>
this.post('/api/worktree/cherry-pick', { worktreePath, commitHashes, options }),
rebase: (worktreePath: string, ontoBranch: string) =>
this.post('/api/worktree/rebase', { worktreePath, ontoBranch }),
rebase: (worktreePath: string, ontoBranch: string, remote?: string) =>
this.post('/api/worktree/rebase', { worktreePath, ontoBranch, remote }),
abortOperation: (worktreePath: string) =>
this.post('/api/worktree/abort-operation', { worktreePath }),
continueOperation: (worktreePath: string) =>
@@ -2481,7 +2492,8 @@ export class HttpApiClient implements ElectronAPI {
issue: IssueValidationInput,
model?: ModelId,
thinkingLevel?: ThinkingLevel,
reasoningEffort?: ReasoningEffort
reasoningEffort?: ReasoningEffort,
providerId?: string
) =>
this.post('/api/github/validate-issue', {
projectPath,
@@ -2489,6 +2501,7 @@ export class HttpApiClient implements ElectronAPI {
model,
thinkingLevel,
reasoningEffort,
providerId,
}),
getValidationStatus: (projectPath: string, issueNumber?: number) =>
this.post('/api/github/validation-status', { projectPath, issueNumber }),

8
apps/ui/src/lib/log-parser.ts
View File

@@ -1526,11 +1526,11 @@ export function getLogTypeColors(type: LogEntryType): {
};
case 'success':
return {
bg: 'bg-emerald-500/10',
border: 'border-emerald-500/30',
text: 'text-emerald-300',
bg: 'bg-emerald-500/20',
border: 'border-emerald-500/40',
text: 'text-emerald-200',
icon: 'text-emerald-400',
badge: 'bg-emerald-500/20 text-emerald-300',
badge: 'bg-emerald-500/30 text-emerald-200',
};
case 'warning':
return {

43
apps/ui/src/lib/settings-utils.ts
View File

@@ -2,6 +2,34 @@
* Shared settings utility functions
*/
export interface WorktreeSelection {
path: string | null;
branch: string;
}
/**
* Check whether an unknown value is a valid worktree selection.
*/
export function isValidWorktreeSelection(value: unknown): value is WorktreeSelection {
if (typeof value !== 'object' || value === null) {
return false;
}
const entry = value as Record<string, unknown>;
const branch = entry.branch;
const path = entry.path;
if (typeof branch !== 'string' || branch.trim().length === 0) {
return false;
}
if (path === null) {
return true;
}
return typeof path === 'string' && path.trim().length > 0;
}
/**
* Validate and sanitize currentWorktreeByProject entries.
*
@@ -13,19 +41,12 @@
* path or branch).
*/
export function sanitizeWorktreeByProject(
raw: Record<string, { path: string | null; branch: string }> | undefined
): Record<string, { path: string | null; branch: string }> {
raw: Record<string, unknown> | undefined
): Record<string, WorktreeSelection> {
if (!raw) return {};
const sanitized: Record<string, { path: string | null; branch: string }> = {};
const sanitized: Record<string, WorktreeSelection> = {};
for (const [projectPath, worktree] of Object.entries(raw)) {
// Only validate structure - keep both null (main) and non-null (worktree) paths
// Runtime validation in use-worktrees.ts handles deleted worktrees
if (
typeof worktree === 'object' &&
worktree !== null &&
typeof worktree.branch === 'string' &&
(worktree.path === null || typeof worktree.path === 'string')
) {
if (isValidWorktreeSelection(worktree)) {
sanitized[projectPath] = worktree;
}
}

30
apps/ui/src/lib/utils.ts
View File

@@ -1,6 +1,12 @@
import { clsx, type ClassValue } from 'clsx';
import { twMerge } from 'tailwind-merge';
import type { ModelAlias, ModelProvider } from '@/store/app-store';
import {
normalizeThinkingLevelForModel,
normalizeReasoningEffortForModel,
LEGACY_CLAUDE_ALIAS_MAP,
type PhaseModelEntry,
} from '@automaker/types';
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
@@ -12,6 +18,30 @@ export function cn(...inputs: ClassValue[]) {
// (the main @automaker/utils barrel imports modules that depend on @automaker/platform)
export { getErrorMessage } from '@automaker/utils/error-handler';
/**
* Migrate legacy model aliases to canonical prefixed IDs.
* Returns the canonical ID if it's a legacy alias, otherwise returns the input unchanged.
*/
export function migrateModelId(modelId: string | undefined): string | undefined {
if (!modelId) return modelId;
return LEGACY_CLAUDE_ALIAS_MAP[modelId as keyof typeof LEGACY_CLAUDE_ALIAS_MAP] || modelId;
}
/**
* Normalize a model entry by ensuring thinking levels and reasoning efforts
* are valid for the selected model.
*/
export function normalizeModelEntry(entry: PhaseModelEntry): PhaseModelEntry {
const model = entry.model;
return {
model,
providerId: entry.providerId,
thinkingLevel: normalizeThinkingLevelForModel(model, entry.thinkingLevel),
reasoningEffort: normalizeReasoningEffortForModel(model, entry.reasoningEffort),
};
}
/**
* Determine if the current model supports extended thinking controls
* Note: This is for Claude's "thinking levels" only, not Codex's "reasoning effort"

1
apps/ui/src/routes/__root.tsx
View File

@@ -781,6 +781,7 @@ function RootLayoutContent() {
};
initAuth();
// eslint-disable-next-line react-hooks/exhaustive-deps -- setIpcConnected is stable, runs once on mount
}, []); // Runs once per load; auth state drives routing rules
// Note: Settings are now loaded in __root.tsx after successful session verification

11
apps/ui/src/store/app-store.ts
View File

@@ -295,6 +295,7 @@ const initialState: AppState = {
chatHistoryOpen: false,
autoModeByWorktree: {},
autoModeActivityLog: [],
recentlyCompletedFeatures: new Set<string>(),
maxConcurrency: DEFAULT_MAX_CONCURRENCY,
boardViewMode: 'kanban',
defaultSkipTests: true,
@@ -1091,6 +1092,16 @@ export const useAppStore = create<AppState & AppActions>()((set, get) => ({
clearAutoModeActivity: () => set({ autoModeActivityLog: [] }),
addRecentlyCompletedFeature: (featureId: string) => {
set((state) => {
const newSet = new Set(state.recentlyCompletedFeatures);
newSet.add(featureId);
return { recentlyCompletedFeatures: newSet };
});
},
clearRecentlyCompletedFeatures: () => set({ recentlyCompletedFeatures: new Set() }),
setMaxConcurrency: (max) => set({ maxConcurrency: max }),
getMaxConcurrencyForWorktree: (projectId: string, branchName: string | null) => {

1
apps/ui/src/store/types/project-types.ts
View File

@@ -44,6 +44,7 @@ export interface Feature extends Omit<
branchName?: string; // Explicit type to override BaseFeature's index signature
thinkingLevel?: ThinkingLevel; // Explicit type to override BaseFeature's index signature
reasoningEffort?: ReasoningEffort; // Explicit type to override BaseFeature's index signature
providerId?: string; // Explicit type to override BaseFeature's index signature
summary?: string; // Explicit type to override BaseFeature's index signature
}

7
apps/ui/src/store/types/state-types.ts
View File

@@ -121,6 +121,10 @@ export interface AppState {
maxConcurrency?: number; // Maximum concurrent features for this worktree (defaults to 3)
}
>;
// Features that recently completed (via auto_mode_feature_complete event)
// Used to prevent race condition where completed features briefly appear in backlog
// due to stale cache data. Cleared when features are refetched.
recentlyCompletedFeatures: Set<string>;
autoModeActivityLog: AutoModeActivity[];
maxConcurrency: number; // Legacy: Maximum number of concurrent agent tasks (deprecated, use per-worktree maxConcurrency)
@@ -508,6 +512,9 @@ export interface AppActions {
getWorktreeKey: (projectId: string, branchName: string | null) => string;
addAutoModeActivity: (activity: Omit<AutoModeActivity, 'id' | 'timestamp'>) => void;
clearAutoModeActivity: () => void;
// Recently completed features - prevents race condition with stale cache
addRecentlyCompletedFeature: (featureId: string) => void;
clearRecentlyCompletedFeatures: () => void;
setMaxConcurrency: (max: number) => void; // Legacy: kept for backward compatibility
getMaxConcurrencyForWorktree: (projectId: string, branchName: string | null) => number;
setMaxConcurrencyForWorktree: (

37
apps/ui/src/store/ui-cache-store.ts
View File

@@ -22,6 +22,7 @@
import { create } from 'zustand';
import { persist } from 'zustand/middleware';
import { sanitizeWorktreeByProject } from '@/lib/settings-utils';
import { useAppStore } from '@/store/app-store';
interface UICacheState {
@@ -81,38 +82,6 @@ export const useUICacheStore = create<UICacheState & UICacheActions>()(
)
);
/**
* Check whether an unknown value is a valid cached worktree entry.
* Accepts objects with a non-empty string branch and a path that is null or a string.
*/
function isValidCachedWorktreeEntry(
worktree: unknown
): worktree is { path: string | null; branch: string } {
return (
typeof worktree === 'object' &&
worktree !== null &&
typeof (worktree as Record<string, unknown>).branch === 'string' &&
((worktree as Record<string, unknown>).branch as string).trim().length > 0 &&
((worktree as Record<string, unknown>).path === null ||
typeof (worktree as Record<string, unknown>).path === 'string')
);
}
/**
* Filter a raw worktree map, discarding entries that fail structural validation.
*/
function sanitizeCachedWorktreeByProject(
raw: Record<string, unknown>
): Record<string, { path: string | null; branch: string }> {
const sanitized: Record<string, { path: string | null; branch: string }> = {};
for (const [key, worktree] of Object.entries(raw)) {
if (isValidCachedWorktreeEntry(worktree)) {
sanitized[key] = worktree;
}
}
return sanitized;
}
/**
* Sync critical UI state from the main app store to the UI cache.
* Call this whenever the app store changes to keep the cache up to date.
@@ -151,7 +120,7 @@ export function syncUICache(appState: {
// 1. restoreFromUICache() - early restore with validation
// 2. use-worktrees.ts - runtime validation that resets to main if deleted
// This allows users to have their feature worktree selection persist across refreshes.
update.cachedCurrentWorktreeByProject = sanitizeCachedWorktreeByProject(
update.cachedCurrentWorktreeByProject = sanitizeWorktreeByProject(
appState.currentWorktreeByProject as Record<string, unknown>
);
}
@@ -209,7 +178,7 @@ export function restoreFromUICache(
) {
// Validate structure only - keep both null (main) and non-null (worktree) paths
// Runtime validation in use-worktrees.ts handles deleted worktrees gracefully
const sanitized = sanitizeCachedWorktreeByProject(
const sanitized = sanitizeWorktreeByProject(
cache.cachedCurrentWorktreeByProject as Record<string, unknown>
);
if (Object.keys(sanitized).length > 0) {

3
apps/ui/src/types/electron.d.ts vendored
View File

@@ -1137,7 +1137,8 @@ export interface WorktreeAPI {
pull: (
worktreePath: string,
remote?: string,
stashIfNeeded?: boolean
stashIfNeeded?: boolean,
remoteBranch?: string
) => Promise<{
success: boolean;
result?: {