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

Add quick-add feature with improved workflows (#802)

Browse Source 
* Changes from feature/quick-add

* feat: Clarify system prompt and improve error handling across services. Address PR Feedback

* feat: Improve PR description parsing and refactor event handling

* feat: Add context options to pipeline orchestrator initialization

* fix: Deduplicate React and handle CJS interop for use-sync-external-store

Resolve "Cannot read properties of null (reading 'useState')" errors by
deduplicating React/react-dom and ensuring use-sync-external-store is
bundled together with React to prevent CJS packages from resolving to
different React instances.
This commit is contained in:
gsxdsm
2026-02-22 20:48:09 -08:00
committed by GitHub
parent 9305ecc242
commit e7504b247f
70 changed files with 3141 additions and 560 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
apps/ui/src/components/views/board-view/board-error-boundary.tsx Normal file
View File

@@ -0,0 +1,74 @@
import { Component, type ReactNode, type ErrorInfo } from 'react';
import { createLogger } from '@automaker/utils/logger';
import { AlertCircle, RefreshCw } from 'lucide-react';
import { Button } from '@/components/ui/button';
const logger = createLogger('BoardErrorBoundary');
interface Props {
children: ReactNode;
/** Called when the user clicks "Recover" - should reset worktree to main */
onRecover?: () => void;
}
interface State {
hasError: boolean;
error: Error | null;
}
/**
* Error boundary for the board's content area (WorktreePanel + KanbanBoard/ListView).
*
* Catches render errors caused by stale worktree state during worktree switches
* (e.g. re-render cascades that trigger React error #185 on mobile Safari PWA).
* Instead of crashing the entire page, this shows a recovery UI that resets
* the worktree selection to main and retries rendering.
*/
export class BoardErrorBoundary extends Component<Props, State> {
constructor(props: Props) {
super(props);
this.state = { hasError: false, error: null };
}
static getDerivedStateFromError(error: Error): State {
return { hasError: true, error };
}
componentDidCatch(error: Error, errorInfo: ErrorInfo) {
logger.error('Board content crashed:', {
error: error.message,
stack: error.stack,
componentStack: errorInfo.componentStack,
});
}
handleRecover = () => {
this.setState({ hasError: false, error: null });
this.props.onRecover?.();
};
render() {
if (this.state.hasError) {
return (
<div className="flex-1 flex flex-col items-center justify-center gap-4 p-6 text-center">
<div className="w-12 h-12 rounded-full bg-destructive/10 flex items-center justify-center">
<AlertCircle className="w-6 h-6 text-destructive" />
</div>
<div className="space-y-2">
<h3 className="text-lg font-semibold text-foreground">Board crashed</h3>
<p className="text-sm text-muted-foreground max-w-sm">
A rendering error occurred, possibly during a worktree switch. Click recover to reset
to the main branch and retry.
</p>
</div>
<Button variant="outline" size="sm" onClick={this.handleRecover} className="gap-2">
<RefreshCw className="w-4 h-4" />
Recover
</Button>
</div>
);
}
return this.props.children;
}
}

188
apps/ui/src/components/views/board-view/components/add-feature-button.tsx Normal file
View File

@@ -0,0 +1,188 @@
import { useState } from 'react';
import { Button } from '@/components/ui/button';
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { Plus, ChevronDown, Zap, FileText } from 'lucide-react';
import type { FeatureTemplate } from '@automaker/types';
import { cn } from '@/lib/utils';
interface AddFeatureButtonProps {
/** Handler for the primary "Add Feature" action (opens full dialog) */
onAddFeature: () => void;
/** Handler for Quick Add submission */
onQuickAdd: () => void;
/** Handler for template selection */
onTemplateSelect: (template: FeatureTemplate) => void;
/** Available templates (filtered to enabled ones) */
templates: FeatureTemplate[];
/** Whether to show as a small icon button or full button */
compact?: boolean;
/** Whether the button should take full width */
fullWidth?: boolean;
/** Additional className */
className?: string;
/** Test ID prefix */
testIdPrefix?: string;
/** Shortcut text to display (optional) */
shortcut?: string;
}
export function AddFeatureButton({
onAddFeature,
onQuickAdd,
onTemplateSelect,
templates,
compact = false,
fullWidth = false,
className,
testIdPrefix = 'add-feature',
shortcut,
}: AddFeatureButtonProps) {
const [dropdownOpen, setDropdownOpen] = useState(false);
// Filter to only enabled templates and sort by order
const enabledTemplates = templates
.filter((t) => t.enabled !== false)
.sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
const handleTemplateClick = (template: FeatureTemplate) => {
setDropdownOpen(false);
onTemplateSelect(template);
};
if (compact) {
// Compact mode: Three small icon segments
return (
<div className={cn('flex', className)}>
{/* Segment 1: Add Feature */}
<Button
variant="default"
size="sm"
className="h-6 w-6 p-0 rounded-r-none"
onClick={onAddFeature}
title="Add Feature"
data-testid={`${testIdPrefix}-button`}
>
<Plus className="w-3.5 h-3.5" />
</Button>
{/* Segment 2: Quick Add */}
<Button
variant="default"
size="sm"
className="h-6 w-6 p-0 rounded-none border-l border-primary-foreground/20"
onClick={onQuickAdd}
title="Quick Add"
data-testid={`${testIdPrefix}-quick-add-button`}
>
<Zap className="w-3 h-3" />
</Button>
{/* Segment 3: Templates dropdown */}
{enabledTemplates.length > 0 && (
<DropdownMenu open={dropdownOpen} onOpenChange={setDropdownOpen}>
<DropdownMenuTrigger asChild>
<Button
variant="default"
size="sm"
className="h-6 w-4 p-0 rounded-l-none border-l border-primary-foreground/20"
title="Templates"
data-testid={`${testIdPrefix}-dropdown-trigger`}
>
<ChevronDown className="w-3 h-3" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="start" sideOffset={4}>
{enabledTemplates.map((template) => (
<DropdownMenuItem
key={template.id}
onClick={() => handleTemplateClick(template)}
data-testid={`template-menu-item-${template.id}`}
>
<FileText className="w-4 h-4 mr-2" />
<span className="truncate max-w-[200px]">{template.name}</span>
</DropdownMenuItem>
))}
</DropdownMenuContent>
</DropdownMenu>
)}
</div>
);
}
// Full mode: Three-segment button
return (
<div className={cn('flex justify-center', fullWidth && 'w-full', className)}>
{/* Segment 1: Add Feature */}
<Button
variant="default"
size="sm"
className={cn('h-8 text-xs px-3 rounded-r-none', fullWidth && 'flex-1')}
onClick={onAddFeature}
data-testid={`${testIdPrefix}-button`}
>
<Plus className="w-3.5 h-3.5 mr-1.5" />
Add Feature
{shortcut && (
<span className="ml-auto pl-2 text-[10px] font-mono opacity-70 bg-black/20 px-1 py-0.5 rounded">
{shortcut}
</span>
)}
</Button>
{/* Segment 2: Quick Add */}
<Button
variant="default"
size="sm"
className={cn(
'h-8 text-xs px-2.5 rounded-none border-l border-primary-foreground/20',
fullWidth && 'flex-shrink-0'
)}
onClick={onQuickAdd}
data-testid={`${testIdPrefix}-quick-add-button`}
>
<Zap className="w-3.5 h-3.5 mr-1" />
Quick
</Button>
{/* Segment 3: Templates dropdown */}
<DropdownMenu open={dropdownOpen} onOpenChange={setDropdownOpen}>
<DropdownMenuTrigger asChild>
<Button
variant="default"
size="sm"
className={cn(
'h-8 rounded-l-none border-l border-primary-foreground/20',
enabledTemplates.length > 0 ? 'px-1.5' : 'w-7 p-0',
fullWidth && 'flex-shrink-0'
)}
aria-label="Templates"
title="Templates"
data-testid={`${testIdPrefix}-dropdown-trigger`}
>
<FileText className="w-3.5 h-3.5 mr-0.5" />
<ChevronDown className="w-2.5 h-2.5" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" sideOffset={4}>
{enabledTemplates.length > 0 ? (
enabledTemplates.map((template) => (
<DropdownMenuItem
key={template.id}
onClick={() => handleTemplateClick(template)}
data-testid={`template-menu-item-${template.id}`}
>
<FileText className="w-4 h-4 mr-2" />
<span className="truncate max-w-[200px]">{template.name}</span>
</DropdownMenuItem>
))
) : (
<DropdownMenuItem disabled className="text-muted-foreground">
No templates configured
</DropdownMenuItem>
)}
</DropdownMenuContent>
</DropdownMenu>
</div>
);
}

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

@@ -5,12 +5,13 @@ import { Button } from '@/components/ui/button';
import { getBlockingDependencies } from '@automaker/dependency-resolver';
import { useAppStore, formatShortcut } from '@/store/app-store';
import type { Feature } from '@/store/app-store';
import type { PipelineConfig, FeatureStatusWithPipeline } from '@automaker/types';
import type { PipelineConfig, FeatureStatusWithPipeline, FeatureTemplate } from '@automaker/types';
import { ListHeader } from './list-header';
import { ListRow, sortFeatures } from './list-row';
import { createRowActionHandlers, type RowActionHandlers } from './row-actions';
import { getStatusOrder } from './status-badge';
import { getColumnsWithPipeline } from '../../constants';
import { AddFeatureButton } from '../add-feature-button';
import type { SortConfig, SortColumn } from '../../hooks/use-list-view-state';
/** Empty set constant to avoid creating new instances on each render */
@@ -65,6 +66,12 @@ export interface ListViewProps {
pipelineConfig?: PipelineConfig | null;
/** Callback to add a new feature */
onAddFeature?: () => void;
/** Callback for quick add */
onQuickAdd?: () => void;
/** Callback for template selection */
onTemplateSelect?: (template: FeatureTemplate) => void;
/** Available feature templates */
templates?: FeatureTemplate[];
/** Whether selection mode is enabled */
isSelectionMode?: boolean;
/** Set of selected feature IDs */
@@ -125,7 +132,22 @@ const StatusGroupHeader = memo(function StatusGroupHeader({
/**
* EmptyState displays a message when there are no features
*/
const EmptyState = memo(function EmptyState({ onAddFeature }: { onAddFeature?: () => void }) {
const EmptyState = memo(function EmptyState({
onAddFeature,
onQuickAdd,
onTemplateSelect,
templates,
shortcut,
}: {
onAddFeature?: () => void;
onQuickAdd?: () => void;
onTemplateSelect?: (template: FeatureTemplate) => void;
templates?: FeatureTemplate[];
shortcut?: string;
}) {
// Only show AddFeatureButton if all required handlers are provided
const canShowSplitButton = onAddFeature && onQuickAdd && onTemplateSelect;
return (
<div
className={cn(
@@ -135,12 +157,21 @@ const EmptyState = memo(function EmptyState({ onAddFeature }: { onAddFeature?: (
data-testid="list-view-empty"
>
<p className="text-sm mb-4">No features to display</p>
{onAddFeature && (
{canShowSplitButton ? (
<AddFeatureButton
onAddFeature={onAddFeature}
onQuickAdd={onQuickAdd}
onTemplateSelect={onTemplateSelect}
templates={templates || []}
shortcut={shortcut}
testIdPrefix="list-view-empty-add-feature"
/>
) : onAddFeature ? (
<Button variant="default" size="sm" onClick={onAddFeature}>
<Plus className="w-4 h-4 mr-2" />
Add Feature
</Button>
)}
) : null}
</div>
);
});
@@ -190,6 +221,9 @@ export const ListView = memo(function ListView({
runningAutoTasks,
pipelineConfig = null,
onAddFeature,
onQuickAdd,
onTemplateSelect,
templates = [],
isSelectionMode = false,
selectedFeatureIds = EMPTY_SET,
onToggleFeatureSelection,
@@ -388,7 +422,13 @@ export const ListView = memo(function ListView({
if (totalFeatures === 0) {
return (
<div className={cn('flex flex-col h-full bg-background', className)} data-testid="list-view">
<EmptyState onAddFeature={onAddFeature} />
<EmptyState
onAddFeature={onAddFeature}
onQuickAdd={onQuickAdd}
onTemplateSelect={onTemplateSelect}
templates={templates}
shortcut={formatShortcut(addFeatureShortcut, true)}
/>
</div>
);
}
@@ -452,21 +492,17 @@ export const ListView = memo(function ListView({
</div>
{/* Footer with Add Feature button, styled like board view */}
{onAddFeature && (
{onAddFeature && onQuickAdd && onTemplateSelect && (
<div className="border-t border-border px-4 py-2">
<Button
variant="default"
size="sm"
onClick={onAddFeature}
className="w-full h-9 text-sm"
data-testid="list-view-add-feature"
>
<Plus className="w-4 h-4 mr-2" />
Add Feature
<span className="ml-auto pl-2 text-[10px] font-mono opacity-70 bg-black/20 px-1.5 py-0.5 rounded">
{formatShortcut(addFeatureShortcut, true)}
</span>
</Button>
<AddFeatureButton
onAddFeature={onAddFeature}
onQuickAdd={onQuickAdd}
onTemplateSelect={onTemplateSelect}
templates={templates}
fullWidth
shortcut={formatShortcut(addFeatureShortcut, true)}
testIdPrefix="list-view-add-feature"
/>
</div>
)}
</div>

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

@@ -29,7 +29,10 @@ import { useAppStore } from '@/store/app-store';
/**
* Normalize PhaseModelEntry or string to PhaseModelEntry
*/
function normalizeEntry(entry: PhaseModelEntry | string): PhaseModelEntry {
function normalizeEntry(entry: PhaseModelEntry | string | undefined | null): PhaseModelEntry {
if (!entry) {
return { model: 'claude-sonnet' as ModelAlias };
}
if (typeof entry === 'string') {
return { model: entry as ModelAlias | CursorModelId };
}
@@ -110,7 +113,12 @@ export function BacklogPlanDialog({
// Use model override if set, otherwise use global default (extract model string from PhaseModelEntry)
const effectiveModelEntry = modelOverride || normalizeEntry(phaseModels.backlogPlanningModel);
const effectiveModel = effectiveModelEntry.model;
const result = await api.backlogPlan.generate(projectPath, prompt, effectiveModel);
const result = await api.backlogPlan.generate(
projectPath,
prompt,
effectiveModel,
currentBranch
);
if (!result.success) {
logger.error('Backlog plan generation failed to start', {
error: result.error,
@@ -131,7 +139,15 @@ export function BacklogPlanDialog({
});
setPrompt('');
onClose();
}, [projectPath, prompt, modelOverride, phaseModels, setIsGeneratingPlan, onClose]);
}, [
projectPath,
prompt,
modelOverride,
phaseModels,
setIsGeneratingPlan,
onClose,
currentBranch,
]);
const handleApply = useCallback(async () => {
if (!pendingPlanResult) return;

145
apps/ui/src/components/views/board-view/dialogs/create-worktree-dialog.tsx
View File

@@ -10,12 +10,27 @@ import {
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { GitBranch, AlertCircle, ChevronDown, ChevronRight, Globe, RefreshCw } from 'lucide-react';
import {
GitBranch,
AlertCircle,
ChevronDown,
ChevronRight,
Globe,
RefreshCw,
Cloud,
} from 'lucide-react';
import { Spinner } from '@/components/ui/spinner';
import { getElectronAPI } from '@/lib/electron';
import { getHttpApiClient } from '@/lib/http-api-client';
import { BranchAutocomplete } from '@/components/ui/branch-autocomplete';
import { toast } from 'sonner';
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from '@/components/ui/select';
/**
* Parse git/worktree error messages and return user-friendly versions
@@ -113,10 +128,19 @@ export function CreateWorktreeDialog({
// allow free-form branch entry via allowCreate as a fallback.
const [branchFetchError, setBranchFetchError] = useState<string | null>(null);
// Remote selection state
const [selectedRemote, setSelectedRemote] = useState<string>('local');
const [availableRemotes, setAvailableRemotes] = useState<Array<{ name: string; url: string }>>(
[]
);
const [remoteBranches, setRemoteBranches] = useState<
Map<string, Array<{ name: string; fullRef: string }>>
>(new Map());
// AbortController ref so in-flight branch fetches can be cancelled when the dialog closes
const branchFetchAbortRef = useRef<AbortController | null>(null);
// Fetch available branches (local + remote) when the base branch section is expanded
// Fetch available branches and remotes when the base branch section is expanded
const fetchBranches = useCallback(
async (signal?: AbortSignal) => {
if (!projectPath) return;
@@ -125,13 +149,16 @@ export function CreateWorktreeDialog({
try {
const api = getHttpApiClient();
// Fetch branches using the project path (use listBranches on the project root).
// Pass the AbortSignal so controller.abort() cancels the in-flight HTTP request.
const branchResult = await api.worktree.listBranches(projectPath, true, signal);
// Fetch both branches and remotes in parallel
const [branchResult, remotesResult] = await Promise.all([
api.worktree.listBranches(projectPath, true, signal),
api.worktree.listRemotes(projectPath),
]);
// If the fetch was aborted while awaiting, bail out to avoid stale state writes
if (signal?.aborted) return;
// Process branches
if (branchResult.success && branchResult.result) {
setBranchFetchError(null);
setAvailableBranches(
@@ -147,6 +174,30 @@ export function CreateWorktreeDialog({
setBranchFetchError(message);
setAvailableBranches([{ name: 'main', isRemote: false }]);
}
// Process remotes
if (remotesResult.success && remotesResult.result) {
const remotes = remotesResult.result.remotes;
setAvailableRemotes(
remotes.map((r: { name: string; url: string; branches: unknown[] }) => ({
name: r.name,
url: r.url,
}))
);
// Build remote branches map for filtering
const branchesMap = new Map<string, Array<{ name: string; fullRef: string }>>();
remotes.forEach(
(r: {
name: string;
url: string;
branches: Array<{ name: string; fullRef: string }>;
}) => {
branchesMap.set(r.name, r.branches || []);
}
);
setRemoteBranches(branchesMap);
}
} catch (err) {
// If aborted, don't update state
if (signal?.aborted) return;
@@ -160,6 +211,8 @@ export function CreateWorktreeDialog({
// and enable free-form entry (allowCreate) so the user can still type
// any branch name when the remote list is unavailable.
setAvailableBranches([{ name: 'main', isRemote: false }]);
setAvailableRemotes([]);
setRemoteBranches(new Map());
} finally {
if (!signal?.aborted) {
setIsLoadingBranches(false);
@@ -198,27 +251,30 @@ export function CreateWorktreeDialog({
setAvailableBranches([]);
setBranchFetchError(null);
setIsLoadingBranches(false);
setSelectedRemote('local');
setAvailableRemotes([]);
setRemoteBranches(new Map());
}
}, [open]);
// Build branch name list for the autocomplete, with local branches first then remote
// Build branch name list for the autocomplete, filtered by selected remote
const branchNames = useMemo(() => {
const local: string[] = [];
const remote: string[] = [];
for (const b of availableBranches) {
if (b.isRemote) {
// Skip bare remote refs without a branch name (e.g. "origin" by itself)
if (!b.name.includes('/')) continue;
remote.push(b.name);
} else {
local.push(b.name);
}
// If "local" is selected, show only local branches
if (selectedRemote === 'local') {
return availableBranches.filter((b) => !b.isRemote).map((b) => b.name);
}
// Local branches first, then remote branches
return [...local, ...remote];
}, [availableBranches]);
// If a specific remote is selected, show only branches from that remote
const remoteBranchList = remoteBranches.get(selectedRemote);
if (remoteBranchList) {
return remoteBranchList.map((b) => b.fullRef);
}
// Fallback: filter from available branches by remote prefix
return availableBranches
.filter((b) => b.isRemote && b.name.startsWith(`${selectedRemote}/`))
.map((b) => b.name);
}, [availableBranches, selectedRemote, remoteBranches]);
// Determine if the selected base branch is a remote branch.
// Also detect manually entered remote-style names (e.g. "origin/feature")
@@ -418,6 +474,47 @@ export function CreateWorktreeDialog({
</div>
)}
{/* Remote Selector */}
<div className="grid gap-1.5">
<Label htmlFor="remote-select" className="text-xs text-muted-foreground">
Source
</Label>
<Select
value={selectedRemote}
onValueChange={(value) => {
setSelectedRemote(value);
// Clear base branch when switching remotes
setBaseBranch('');
}}
disabled={isLoadingBranches}
>
<SelectTrigger id="remote-select" className="h-8">
<SelectValue placeholder="Select source..." />
</SelectTrigger>
<SelectContent>
<SelectItem value="local">
<div className="flex items-center gap-2">
<GitBranch className="w-3.5 h-3.5" />
<span>Local Branches</span>
</div>
</SelectItem>
{availableRemotes.map((remote) => (
<SelectItem key={remote.name} value={remote.name}>
<div className="flex items-center gap-2">
<Cloud className="w-3.5 h-3.5" />
<span>{remote.name}</span>
{remote.url && (
<span className="text-xs text-muted-foreground truncate max-w-[150px]">
({remote.url})
</span>
)}
</div>
</SelectItem>
))}
</SelectContent>
</Select>
</div>
<BranchAutocomplete
value={baseBranch}
onChange={(value) => {
@@ -425,9 +522,13 @@ export function CreateWorktreeDialog({
setError(null);
}}
branches={branchNames}
placeholder="Select base branch (default: HEAD)..."
placeholder={
selectedRemote === 'local'
? 'Select local branch (default: HEAD)...'
: `Select branch from ${selectedRemote}...`
}
disabled={isLoadingBranches}
allowCreate={!!branchFetchError}
allowCreate={!!branchFetchError || selectedRemote === 'local'}
/>
{isRemoteBaseBranch && (

1
apps/ui/src/components/views/board-view/dialogs/index.ts
View File

@@ -1,4 +1,5 @@
export { AddFeatureDialog } from './add-feature-dialog';
export { QuickAddDialog } from './quick-add-dialog';
export { AgentOutputModal } from './agent-output-modal';
export { BacklogPlanDialog } from './backlog-plan-dialog';
export { CompletedFeaturesModal } from './completed-features-modal';

139
apps/ui/src/components/views/board-view/dialogs/quick-add-dialog.tsx Normal file
View File

@@ -0,0 +1,139 @@
import { useState, useRef, useEffect } from 'react';
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
} from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { HotkeyButton } from '@/components/ui/hotkey-button';
import { Textarea } from '@/components/ui/textarea';
import { Play, Plus } from 'lucide-react';
import type { PhaseModelEntry } from '@automaker/types';
import { PhaseModelSelector } from '@/components/views/settings-view/model-defaults/phase-model-selector';
import { useAppStore } from '@/store/app-store';
interface QuickAddDialogProps {
open: boolean;
onOpenChange: (open: boolean) => void;
onAdd: (description: string, modelEntry: PhaseModelEntry) => void;
onAddAndStart: (description: string, modelEntry: PhaseModelEntry) => void;
}
export function QuickAddDialog({ open, onOpenChange, onAdd, onAddAndStart }: QuickAddDialogProps) {
const [description, setDescription] = useState('');
const [descriptionError, setDescriptionError] = useState(false);
const textareaRef = useRef<HTMLTextAreaElement>(null);
// Get default feature model from store
const defaultFeatureModel = useAppStore((s) => s.defaultFeatureModel);
const currentProject = useAppStore((s) => s.currentProject);
// Use project-level default feature model if set, otherwise fall back to global
const effectiveDefaultFeatureModel = currentProject?.defaultFeatureModel ?? defaultFeatureModel;
const [modelEntry, setModelEntry] = useState<PhaseModelEntry>(
effectiveDefaultFeatureModel || { model: 'claude-opus' }
);
// Reset form when dialog opens (in useEffect to avoid state mutation during render)
useEffect(() => {
if (open) {
setDescription('');
setDescriptionError(false);
setModelEntry(effectiveDefaultFeatureModel || { model: 'claude-opus' });
}
}, [open, effectiveDefaultFeatureModel]);
const handleSubmit = (actionFn: (description: string, modelEntry: PhaseModelEntry) => void) => {
if (!description.trim()) {
setDescriptionError(true);
textareaRef.current?.focus();
return;
}
actionFn(description.trim(), modelEntry);
setDescription('');
setDescriptionError(false);
onOpenChange(false);
};
const handleAdd = () => handleSubmit(onAdd);
const handleAddAndStart = () => handleSubmit(onAddAndStart);
const handleDescriptionChange = (value: string) => {
setDescription(value);
if (value.trim()) {
setDescriptionError(false);
}
};
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent
compact
className="sm:max-w-md"
data-testid="quick-add-dialog"
onOpenAutoFocus={(e) => {
e.preventDefault();
textareaRef.current?.focus();
}}
>
<DialogHeader>
<DialogTitle>Quick Add Feature</DialogTitle>
<DialogDescription>
Create a new feature with minimal configuration. All other settings use defaults.
</DialogDescription>
</DialogHeader>
<div className="py-4 space-y-4">
{/* Description Input */}
<div className="space-y-2">
<label htmlFor="quick-add-description" className="text-sm font-medium">
Description
</label>
<Textarea
ref={textareaRef}
id="quick-add-description"
value={description}
onChange={(e) => handleDescriptionChange(e.target.value)}
placeholder="Describe what you want to build..."
className={
descriptionError ? 'border-destructive focus-visible:ring-destructive' : ''
}
rows={3}
data-testid="quick-add-description-input"
/>
{descriptionError && (
<p className="text-xs text-destructive">Description is required</p>
)}
</div>
{/* Model Selection */}
<PhaseModelSelector value={modelEntry} onChange={setModelEntry} compact align="end" />
</div>
<DialogFooter className="gap-2">
<Button variant="ghost" onClick={() => onOpenChange(false)}>
Cancel
</Button>
<Button variant="secondary" onClick={handleAdd} data-testid="quick-add-button">
<Plus className="w-4 h-4 mr-2" />
Add
</Button>
<HotkeyButton
onClick={handleAddAndStart}
hotkey={{ key: 'Enter', cmdCtrl: true }}
hotkeyActive={open}
data-testid="quick-add-and-start-button"
>
<Play className="w-4 h-4 mr-2" />
Make
</HotkeyButton>
</DialogFooter>
</DialogContent>
</Dialog>
);
}

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

@@ -13,11 +13,20 @@ import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable'
import { Button } from '@/components/ui/button';
import { KanbanColumn, KanbanCard, EmptyStateCard } from './components';
import { Feature, useAppStore, formatShortcut } from '@/store/app-store';
import { Archive, Settings2, CheckSquare, GripVertical, Plus, CheckCircle2 } from 'lucide-react';
import {
Archive,
Settings2,
CheckSquare,
GripVertical,
Plus,
CheckCircle2,
Zap,
} from 'lucide-react';
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
import { useResponsiveKanban } from '@/hooks/use-responsive-kanban';
import { getColumnsWithPipeline, type ColumnId } from './constants';
import type { PipelineConfig } from '@automaker/types';
import type { PipelineConfig, FeatureTemplate } from '@automaker/types';
import { AddFeatureButton } from './components/add-feature-button';
import { cn } from '@/lib/utils';
interface KanbanBoardProps {
activeFeature: Feature | null;
@@ -53,6 +62,10 @@ interface KanbanBoardProps {
runningAutoTasks: string[];
onArchiveAllVerified: () => void;
onAddFeature: () => void;
onQuickAdd: () => void;
onTemplateSelect: (template: FeatureTemplate) => void;
templates: FeatureTemplate[];
addFeatureShortcut?: string;
onShowCompletedModal: () => void;
completedCount: number;
pipelineConfig: PipelineConfig | null;
@@ -292,6 +305,10 @@ export function KanbanBoard({
runningAutoTasks,
onArchiveAllVerified,
onAddFeature,
onQuickAdd,
onTemplateSelect,
templates,
addFeatureShortcut: addFeatureShortcutProp,
onShowCompletedModal,
completedCount,
pipelineConfig,
@@ -311,7 +328,7 @@ export function KanbanBoard({
// Get the keyboard shortcut for adding features
const keyboardShortcuts = useAppStore((state) => state.keyboardShortcuts);
const addFeatureShortcut = keyboardShortcuts.addFeature || 'N';
const addFeatureShortcut = addFeatureShortcutProp || keyboardShortcuts.addFeature || 'N';
// Use responsive column widths based on window size
// containerStyle handles centering and ensures columns fit without horizontal scroll in Electron
@@ -408,16 +425,28 @@ export function KanbanBoard({
</div>
) : column.id === 'backlog' ? (
<div className="flex items-center gap-1">
<Button
variant="default"
size="sm"
className="h-6 w-6 p-0"
onClick={onAddFeature}
title="Add Feature"
data-testid="add-feature-button"
>
<Plus className="w-3.5 h-3.5" />
</Button>
<div className="flex items-center">
<Button
variant="default"
size="sm"
className="h-6 w-6 p-0 rounded-r-none"
onClick={onAddFeature}
title="Add Feature"
data-testid="add-feature-button"
>
<Plus className="w-3.5 h-3.5" />
</Button>
<Button
variant="default"
size="sm"
className="h-6 w-6 p-0 rounded-l-none border-l border-primary-foreground/20"
onClick={onQuickAdd}
title="Quick Add Feature"
data-testid="quick-add-feature-button"
>
<Zap className="w-3.5 h-3.5" />
</Button>
</div>
<Button
variant="ghost"
size="sm"
@@ -494,19 +523,14 @@ export function KanbanBoard({
}
footerAction={
column.id === 'backlog' ? (
<Button
variant="default"
size="sm"
className="w-full h-9 text-sm"
onClick={onAddFeature}
data-testid="add-feature-floating-button"
>
<Plus className="w-4 h-4 mr-2" />
Add Feature
<span className="ml-auto pl-2 text-[10px] font-mono opacity-70 bg-black/20 px-1.5 py-0.5 rounded">
{formatShortcut(addFeatureShortcut, true)}
</span>
</Button>
<AddFeatureButton
onAddFeature={onAddFeature}
onQuickAdd={onQuickAdd}
onTemplateSelect={onTemplateSelect}
templates={templates}
fullWidth
shortcut={formatShortcut(addFeatureShortcut, true)}
/>
) : undefined
}
>

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

@@ -147,6 +147,8 @@ interface WorktreeActionsDropdownProps {
onSyncWithRemote?: (worktree: WorktreeInfo, remote: string) => void;
/** Set tracking branch to a specific remote */
onSetTracking?: (worktree: WorktreeInfo, remote: string) => void;
/** List of remote names that have a branch matching the current branch name */
remotesWithBranch?: string[];
}
/**
@@ -182,7 +184,9 @@ function RemoteActionMenuItem({
<Icon className="w-3.5 h-3.5 mr-2" />
{remote.name}
{trackingRemote === remote.name && (
<span className="ml-auto text-[10px] text-muted-foreground mr-1">tracking</span>
<span className="ml-auto text-[10px] bg-muted text-muted-foreground px-1.5 py-0.5 rounded mr-2">
tracking
</span>
)}
</DropdownMenuItem>
<DropdownMenuSubTrigger
@@ -282,6 +286,7 @@ export function WorktreeActionsDropdown({
onSync,
onSyncWithRemote,
onSetTracking,
remotesWithBranch,
}: WorktreeActionsDropdownProps) {
// Get available editors for the "Open In" submenu
const { editors } = useAvailableEditors();
@@ -326,6 +331,21 @@ export function WorktreeActionsDropdown({
? 'Repository has no commits yet'
: null;
// Check if the branch exists on remotes other than the tracking remote.
// This indicates the branch was pushed to a different remote than the one being tracked,
// so the ahead/behind counts may be misleading.
const otherRemotesWithBranch = useMemo(() => {
if (!remotesWithBranch || remotesWithBranch.length === 0) return [];
if (!trackingRemote) return remotesWithBranch;
return remotesWithBranch.filter((r) => r !== trackingRemote);
}, [remotesWithBranch, trackingRemote]);
// True when branch exists on a different remote but NOT on the tracking remote
const isOnDifferentRemote =
otherRemotesWithBranch.length > 0 &&
trackingRemote &&
!remotesWithBranch?.includes(trackingRemote);
// Determine if the changes/PR section has any visible items
// Show Create PR when no existing PR is linked
const showCreatePR = !hasPR;
@@ -783,11 +803,17 @@ export function WorktreeActionsDropdown({
{!isGitOpsAvailable && (
<AlertCircle className="w-3 h-3 ml-auto text-muted-foreground" />
)}
{isGitOpsAvailable && behindCount > 0 && (
{isGitOpsAvailable && !isOnDifferentRemote && behindCount > 0 && (
<span className="ml-auto text-[10px] bg-muted px-1.5 py-0.5 rounded">
{behindCount} behind
</span>
)}
{isGitOpsAvailable && isOnDifferentRemote && (
<span className="ml-auto inline-flex items-center gap-0.5 text-[10px] bg-blue-500/20 text-blue-600 dark:text-blue-400 px-1.5 py-0.5 rounded">
<Globe className="w-2.5 h-2.5" />
on {otherRemotesWithBranch.join(', ')}
</span>
)}
</DropdownMenuItem>
<DropdownMenuSubTrigger
className={cn(
@@ -832,11 +858,17 @@ export function WorktreeActionsDropdown({
{!isGitOpsAvailable && (
<AlertCircle className="w-3 h-3 ml-auto text-muted-foreground" />
)}
{isGitOpsAvailable && behindCount > 0 && (
{isGitOpsAvailable && !isOnDifferentRemote && behindCount > 0 && (
<span className="ml-auto text-[10px] bg-muted px-1.5 py-0.5 rounded">
{behindCount} behind
</span>
)}
{isGitOpsAvailable && isOnDifferentRemote && (
<span className="ml-auto inline-flex items-center gap-0.5 text-[10px] bg-blue-500/20 text-blue-600 dark:text-blue-400 px-1.5 py-0.5 rounded">
<Globe className="w-2.5 h-2.5" />
on {otherRemotesWithBranch.join(', ')}
</span>
)}
</DropdownMenuItem>
)}
</TooltipWrapper>
@@ -856,7 +888,9 @@ export function WorktreeActionsDropdown({
}
}}
disabled={
isPushing || (hasRemoteBranch && aheadCount === 0) || !isGitOpsAvailable
isPushing ||
(hasRemoteBranch && !isOnDifferentRemote && aheadCount === 0) ||
!isGitOpsAvailable
}
className={cn(
'text-xs flex-1 pr-0 rounded-r-none',
@@ -874,21 +908,33 @@ export function WorktreeActionsDropdown({
local only
</span>
)}
{isGitOpsAvailable && hasRemoteBranch && aheadCount > 0 && (
<span className="ml-auto text-[10px] bg-primary/20 text-primary px-1.5 py-0.5 rounded">
{aheadCount} ahead
</span>
)}
{isGitOpsAvailable && hasRemoteBranch && trackingRemote && (
<span
className={cn(
'text-[10px] bg-muted text-muted-foreground px-1.5 py-0.5 rounded',
aheadCount > 0 ? 'ml-1' : 'ml-auto'
)}
>
{trackingRemote}
{isGitOpsAvailable && hasRemoteBranch && isOnDifferentRemote && (
<span className="ml-auto inline-flex items-center gap-0.5 text-[10px] bg-blue-500/20 text-blue-600 dark:text-blue-400 px-1.5 py-0.5 rounded">
<Globe className="w-2.5 h-2.5" />
on {otherRemotesWithBranch.join(', ')}
</span>
)}
{isGitOpsAvailable &&
hasRemoteBranch &&
!isOnDifferentRemote &&
aheadCount > 0 && (
<span className="ml-auto text-[10px] bg-primary/20 text-primary px-1.5 py-0.5 rounded">
{aheadCount} ahead
</span>
)}
{isGitOpsAvailable &&
hasRemoteBranch &&
!isOnDifferentRemote &&
trackingRemote && (
<span
className={cn(
'text-[10px] bg-muted text-muted-foreground px-1.5 py-0.5 rounded',
aheadCount > 0 ? 'ml-1' : 'ml-auto'
)}
>
{trackingRemote}
</span>
)}
</DropdownMenuItem>
<DropdownMenuSubTrigger
className={cn(
@@ -932,7 +978,11 @@ export function WorktreeActionsDropdown({
onPush(worktree);
}
}}
disabled={isPushing || (hasRemoteBranch && aheadCount === 0) || !isGitOpsAvailable}
disabled={
isPushing ||
(hasRemoteBranch && !isOnDifferentRemote && aheadCount === 0) ||
!isGitOpsAvailable
}
className={cn('text-xs', !isGitOpsAvailable && 'opacity-50 cursor-not-allowed')}
>
<Upload className={cn('w-3.5 h-3.5 mr-2', isPushing && 'animate-pulse')} />
@@ -946,12 +996,18 @@ export function WorktreeActionsDropdown({
local only
</span>
)}
{isGitOpsAvailable && hasRemoteBranch && aheadCount > 0 && (
{isGitOpsAvailable && hasRemoteBranch && isOnDifferentRemote && (
<span className="ml-auto inline-flex items-center gap-0.5 text-[10px] bg-blue-500/20 text-blue-600 dark:text-blue-400 px-1.5 py-0.5 rounded">
<Globe className="w-2.5 h-2.5" />
on {otherRemotesWithBranch.join(', ')}
</span>
)}
{isGitOpsAvailable && hasRemoteBranch && !isOnDifferentRemote && aheadCount > 0 && (
<span className="ml-auto text-[10px] bg-primary/20 text-primary px-1.5 py-0.5 rounded">
{aheadCount} ahead
</span>
)}
{isGitOpsAvailable && hasRemoteBranch && trackingRemote && (
{isGitOpsAvailable && hasRemoteBranch && !isOnDifferentRemote && trackingRemote && (
<span
className={cn(
'text-[10px] bg-muted text-muted-foreground px-1.5 py-0.5 rounded',

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

@@ -146,6 +146,8 @@ export interface WorktreeDropdownProps {
onSyncWithRemote?: (worktree: WorktreeInfo, remote: string) => void;
/** Set tracking branch to a specific remote */
onSetTracking?: (worktree: WorktreeInfo, remote: string) => void;
/** List of remote names that have a branch matching the current branch name */
remotesWithBranch?: string[];
}
/**
@@ -242,6 +244,7 @@ export function WorktreeDropdown({
onSync,
onSyncWithRemote,
onSetTracking,
remotesWithBranch,
}: WorktreeDropdownProps) {
// Find the currently selected worktree to display in the trigger
const selectedWorktree = worktrees.find((w) => isWorktreeSelected(w));
@@ -565,6 +568,7 @@ export function WorktreeDropdown({
onSync={onSync}
onSyncWithRemote={onSyncWithRemote}
onSetTracking={onSetTracking}
remotesWithBranch={remotesWithBranch}
/>
)}
</div>

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

@@ -116,6 +116,8 @@ interface WorktreeTabProps {
onSyncWithRemote?: (worktree: WorktreeInfo, remote: string) => void;
/** Set tracking branch to a specific remote */
onSetTracking?: (worktree: WorktreeInfo, remote: string) => void;
/** List of remote names that have a branch matching the current branch name */
remotesWithBranch?: string[];
}
export function WorktreeTab({
@@ -193,6 +195,7 @@ export function WorktreeTab({
onSync,
onSyncWithRemote,
onSetTracking,
remotesWithBranch,
}: WorktreeTabProps) {
// Make the worktree tab a drop target for feature cards
const { setNodeRef, isOver } = useDroppable({
@@ -566,6 +569,7 @@ export function WorktreeTab({
onSync={onSync}
onSyncWithRemote={onSyncWithRemote}
onSetTracking={onSetTracking}
remotesWithBranch={remotesWithBranch}
/>
</div>
);

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

@@ -17,6 +17,8 @@ export interface UseBranchesReturn {
trackingRemote: string | undefined;
/** Per-worktree tracking remote lookup — avoids stale values when multiple panels share the hook */
getTrackingRemote: (worktreePath: string) => string | undefined;
/** List of remote names that have a branch matching the current branch name */
remotesWithBranch: string[];
isLoadingBranches: boolean;
branchFilter: string;
setBranchFilter: (filter: string) => void;
@@ -49,6 +51,7 @@ export function useBranches(): UseBranchesReturn {
const behindCount = branchData?.behindCount ?? 0;
const hasRemoteBranch = branchData?.hasRemoteBranch ?? false;
const trackingRemote = branchData?.trackingRemote;
const remotesWithBranch = branchData?.remotesWithBranch ?? [];
// Per-worktree tracking remote cache: keeps results from previous fetchBranches()
// calls so multiple WorktreePanel instances don't all share a single stale value.
@@ -119,6 +122,7 @@ export function useBranches(): UseBranchesReturn {
hasRemoteBranch,
trackingRemote,
getTrackingRemote,
remotesWithBranch,
isLoadingBranches,
branchFilter,
setBranchFilter,

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

@@ -1,4 +1,4 @@
import { useEffect, useCallback, useRef } from 'react';
import { useEffect, useCallback, useRef, startTransition } from 'react';
import { useQueryClient } from '@tanstack/react-query';
import { useAppStore } from '@/store/app-store';
import { useWorktrees as useWorktreesQuery } from '@/hooks/queries';
@@ -93,7 +93,15 @@ export function useWorktrees({
// Fallback to "main" only if worktrees haven't loaded yet
const mainWorktree = worktrees.find((w) => w.isMain);
const mainBranch = mainWorktree?.branch || 'main';
setCurrentWorktree(projectPath, null, mainBranch);
// Note: Zustand uses useSyncExternalStore so setCurrentWorktree updates
// are flushed synchronously. The real guard against React error #185 is
// dependency isolation — currentWorktree is intentionally excluded from
// the validation effect deps below (via currentWorktreeRef) so we don't
// create a feedback loop. startTransition may still help batch unrelated
// React state updates but does NOT defer or prevent Zustand-driven cascades.
startTransition(() => {
setCurrentWorktree(projectPath, null, mainBranch);
});
}
}
}, [worktrees, projectPath, setCurrentWorktree]);
@@ -109,7 +117,16 @@ export function useWorktrees({
if (isSameWorktree) return;
setCurrentWorktree(projectPath, worktree.isMain ? null : worktree.path, worktree.branch);
// Note: Zustand uses useSyncExternalStore so setCurrentWorktree updates are
// flushed synchronously — startTransition does NOT prevent Zustand-driven
// cascades. The actual protection against React error #185 is dependency
// isolation via currentWorktreeRef (currentWorktree is excluded from the
// validation effect's dependency array). startTransition may still help
// batch unrelated concurrent React state updates but should not be relied
// upon for Zustand update ordering.
startTransition(() => {
setCurrentWorktree(projectPath, worktree.isMain ? null : worktree.path, worktree.branch);
});
// Defer feature query invalidation so the store update and client-side
// re-filtering happen in the current render cycle first. The features
@@ -121,7 +138,7 @@ export function useWorktrees({
queryClient.invalidateQueries({
queryKey: queryKeys.features.all(projectPath),
});
}, 0);
}, 100);
},
[projectPath, setCurrentWorktree, queryClient, currentWorktreePath]
);

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

@@ -101,6 +101,7 @@ export function WorktreePanel({
hasRemoteBranch,
trackingRemote,
getTrackingRemote,
remotesWithBranch,
isLoadingBranches,
branchFilter,
setBranchFilter,
@@ -466,20 +467,8 @@ export function WorktreePanel({
const isMobile = useIsMobile();
// Periodic interval check (30 seconds) to detect branch changes on disk
// Reduced polling to lessen repeated worktree list calls while keeping UI reasonably fresh
const intervalRef = useRef<NodeJS.Timeout | null>(null);
useEffect(() => {
intervalRef.current = setInterval(() => {
fetchWorktrees({ silent: true });
}, 30000);
return () => {
if (intervalRef.current) {
clearInterval(intervalRef.current);
}
};
}, [fetchWorktrees]);
// NOTE: Periodic polling is handled by React Query's refetchInterval
// in hooks/queries/use-worktrees.ts (30s). No separate setInterval needed.
// Prune stale tracking-remote cache entries and remotes cache when worktrees change
useEffect(() => {
@@ -967,6 +956,7 @@ export function WorktreePanel({
onSync={handleSyncWithRemoteSelection}
onSyncWithRemote={handleSyncWithSpecificRemote}
onSetTracking={handleSetTrackingForRemote}
remotesWithBranch={remotesWithBranch}
onOpenInEditor={handleOpenInEditor}
onOpenInIntegratedTerminal={handleOpenInIntegratedTerminal}
onOpenInExternalTerminal={handleOpenInExternalTerminal}
@@ -1214,6 +1204,7 @@ export function WorktreePanel({
onSync={handleSyncWithRemoteSelection}
onSyncWithRemote={handleSyncWithSpecificRemote}
onSetTracking={handleSetTrackingForRemote}
remotesWithBranch={remotesWithBranch}
remotesCache={remotesCache}
onOpenInEditor={handleOpenInEditor}
onOpenInIntegratedTerminal={handleOpenInIntegratedTerminal}
@@ -1358,6 +1349,7 @@ export function WorktreePanel({
terminalScripts={terminalScripts}
onRunTerminalScript={handleRunTerminalScript}
onEditScripts={handleEditScripts}
remotesWithBranch={remotesWithBranch}
/>
)}
</div>
@@ -1449,6 +1441,7 @@ export function WorktreePanel({
terminalScripts={terminalScripts}
onRunTerminalScript={handleRunTerminalScript}
onEditScripts={handleEditScripts}
remotesWithBranch={remotesWithBranch}
/>
);
})}