mirror of
https://github.com/AutoMaker-Org/automaker.git
synced 2026-02-01 08:13:37 +00:00
feat: Implement worktree initialization script functionality
This commit introduces a new feature for managing worktree initialization scripts, allowing users to configure and execute scripts upon worktree creation. Key changes include: 1. **New API Endpoints**: Added endpoints for getting, setting, and deleting init scripts. 2. **Worktree Routes**: Updated worktree routes to include init script handling. 3. **Init Script Service**: Created a service to execute the init scripts asynchronously, with support for cross-platform compatibility. 4. **UI Components**: Added UI components for displaying and editing init scripts, including a dedicated section in the settings view. 5. **Event Handling**: Implemented event handling for init script execution status, providing real-time feedback in the UI. This enhancement improves the user experience by allowing automated setup processes for new worktrees, streamlining project workflows.
This commit is contained in:
Kacper
262
apps/ui/src/components/ui/ansi-output.tsx
Normal file
262
apps/ui/src/components/ui/ansi-output.tsx
Normal file
@@ -0,0 +1,262 @@
|
||||
import { useMemo } from 'react';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
interface AnsiOutputProps {
|
||||
text: string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
// ANSI color codes to CSS color mappings
|
||||
const ANSI_COLORS: Record<number, string> = {
|
||||
// Standard colors
|
||||
30: '#6b7280', // Black (use gray for visibility on dark bg)
|
||||
31: '#ef4444', // Red
|
||||
32: '#22c55e', // Green
|
||||
33: '#eab308', // Yellow
|
||||
34: '#3b82f6', // Blue
|
||||
35: '#a855f7', // Magenta
|
||||
36: '#06b6d4', // Cyan
|
||||
37: '#d1d5db', // White
|
||||
// Bright colors
|
||||
90: '#9ca3af', // Bright Black (Gray)
|
||||
91: '#f87171', // Bright Red
|
||||
92: '#4ade80', // Bright Green
|
||||
93: '#facc15', // Bright Yellow
|
||||
94: '#60a5fa', // Bright Blue
|
||||
95: '#c084fc', // Bright Magenta
|
||||
96: '#22d3ee', // Bright Cyan
|
||||
97: '#ffffff', // Bright White
|
||||
};
|
||||
|
||||
const ANSI_BG_COLORS: Record<number, string> = {
|
||||
40: 'transparent',
|
||||
41: '#ef4444',
|
||||
42: '#22c55e',
|
||||
43: '#eab308',
|
||||
44: '#3b82f6',
|
||||
45: '#a855f7',
|
||||
46: '#06b6d4',
|
||||
47: '#f3f4f6',
|
||||
// Bright backgrounds
|
||||
100: '#374151',
|
||||
101: '#f87171',
|
||||
102: '#4ade80',
|
||||
103: '#facc15',
|
||||
104: '#60a5fa',
|
||||
105: '#c084fc',
|
||||
106: '#22d3ee',
|
||||
107: '#ffffff',
|
||||
};
|
||||
|
||||
interface TextSegment {
|
||||
text: string;
|
||||
style: {
|
||||
color?: string;
|
||||
backgroundColor?: string;
|
||||
fontWeight?: string;
|
||||
fontStyle?: string;
|
||||
textDecoration?: string;
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Strip hyperlink escape sequences (OSC 8)
|
||||
* Format: ESC]8;;url ESC\ text ESC]8;; ESC\
|
||||
*/
|
||||
function stripHyperlinks(text: string): string {
|
||||
// Remove OSC 8 hyperlink sequences
|
||||
// eslint-disable-next-line no-control-regex
|
||||
return text.replace(/\x1b\]8;;[^\x07\x1b]*(?:\x07|\x1b\\)/g, '');
|
||||
}
|
||||
|
||||
/**
|
||||
* Strip other OSC sequences (title, etc.)
|
||||
*/
|
||||
function stripOtherOSC(text: string): string {
|
||||
// Remove OSC sequences (ESC ] ... BEL or ESC ] ... ST)
|
||||
// eslint-disable-next-line no-control-regex
|
||||
return text.replace(/\x1b\][^\x07\x1b]*(?:\x07|\x1b\\)/g, '');
|
||||
}
|
||||
|
||||
function parseAnsi(text: string): TextSegment[] {
|
||||
// Pre-process: strip hyperlinks and other OSC sequences
|
||||
let processedText = stripHyperlinks(text);
|
||||
processedText = stripOtherOSC(processedText);
|
||||
|
||||
const segments: TextSegment[] = [];
|
||||
|
||||
// Match ANSI escape sequences: ESC[...m (SGR - Select Graphic Rendition)
|
||||
// Also handle ESC[K (erase line) and other CSI sequences by stripping them
|
||||
// The ESC character can be \x1b, \033, \u001b
|
||||
// eslint-disable-next-line no-control-regex
|
||||
const ansiRegex = /\x1b\[([0-9;]*)([a-zA-Z])/g;
|
||||
|
||||
let currentStyle: TextSegment['style'] = {};
|
||||
let lastIndex = 0;
|
||||
let match;
|
||||
|
||||
while ((match = ansiRegex.exec(processedText)) !== null) {
|
||||
// Add text before this escape sequence
|
||||
if (match.index > lastIndex) {
|
||||
const content = processedText.slice(lastIndex, match.index);
|
||||
if (content) {
|
||||
segments.push({ text: content, style: { ...currentStyle } });
|
||||
}
|
||||
}
|
||||
|
||||
const params = match[1];
|
||||
const command = match[2];
|
||||
|
||||
// Only process 'm' command (SGR - graphics/color)
|
||||
// Ignore other commands like K (erase), H (cursor), J (clear), etc.
|
||||
if (command === 'm') {
|
||||
// Parse the escape sequence codes
|
||||
const codes = params ? params.split(';').map((c) => parseInt(c, 10) || 0) : [0];
|
||||
|
||||
for (let i = 0; i < codes.length; i++) {
|
||||
const code = codes[i];
|
||||
|
||||
if (code === 0) {
|
||||
// Reset all attributes
|
||||
currentStyle = {};
|
||||
} else if (code === 1) {
|
||||
// Bold
|
||||
currentStyle.fontWeight = 'bold';
|
||||
} else if (code === 2) {
|
||||
// Dim/faint
|
||||
currentStyle.color = 'var(--muted-foreground)';
|
||||
} else if (code === 3) {
|
||||
// Italic
|
||||
currentStyle.fontStyle = 'italic';
|
||||
} else if (code === 4) {
|
||||
// Underline
|
||||
currentStyle.textDecoration = 'underline';
|
||||
} else if (code === 22) {
|
||||
// Normal intensity (not bold, not dim)
|
||||
currentStyle.fontWeight = undefined;
|
||||
} else if (code === 23) {
|
||||
// Not italic
|
||||
currentStyle.fontStyle = undefined;
|
||||
} else if (code === 24) {
|
||||
// Not underlined
|
||||
currentStyle.textDecoration = undefined;
|
||||
} else if (code === 38) {
|
||||
// Extended foreground color
|
||||
if (codes[i + 1] === 5 && codes[i + 2] !== undefined) {
|
||||
// 256 color mode: 38;5;n
|
||||
const colorIndex = codes[i + 2];
|
||||
currentStyle.color = get256Color(colorIndex);
|
||||
i += 2;
|
||||
} else if (codes[i + 1] === 2 && codes[i + 4] !== undefined) {
|
||||
// RGB mode: 38;2;r;g;b
|
||||
const r = codes[i + 2];
|
||||
const g = codes[i + 3];
|
||||
const b = codes[i + 4];
|
||||
currentStyle.color = `rgb(${r}, ${g}, ${b})`;
|
||||
i += 4;
|
||||
}
|
||||
} else if (code === 48) {
|
||||
// Extended background color
|
||||
if (codes[i + 1] === 5 && codes[i + 2] !== undefined) {
|
||||
// 256 color mode: 48;5;n
|
||||
const colorIndex = codes[i + 2];
|
||||
currentStyle.backgroundColor = get256Color(colorIndex);
|
||||
i += 2;
|
||||
} else if (codes[i + 1] === 2 && codes[i + 4] !== undefined) {
|
||||
// RGB mode: 48;2;r;g;b
|
||||
const r = codes[i + 2];
|
||||
const g = codes[i + 3];
|
||||
const b = codes[i + 4];
|
||||
currentStyle.backgroundColor = `rgb(${r}, ${g}, ${b})`;
|
||||
i += 4;
|
||||
}
|
||||
} else if (ANSI_COLORS[code]) {
|
||||
// Standard foreground color (30-37, 90-97)
|
||||
currentStyle.color = ANSI_COLORS[code];
|
||||
} else if (ANSI_BG_COLORS[code]) {
|
||||
// Standard background color (40-47, 100-107)
|
||||
currentStyle.backgroundColor = ANSI_BG_COLORS[code];
|
||||
} else if (code === 39) {
|
||||
// Default foreground
|
||||
currentStyle.color = undefined;
|
||||
} else if (code === 49) {
|
||||
// Default background
|
||||
currentStyle.backgroundColor = undefined;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
lastIndex = match.index + match[0].length;
|
||||
}
|
||||
|
||||
// Add remaining text after last escape sequence
|
||||
if (lastIndex < processedText.length) {
|
||||
const content = processedText.slice(lastIndex);
|
||||
if (content) {
|
||||
segments.push({ text: content, style: { ...currentStyle } });
|
||||
}
|
||||
}
|
||||
|
||||
// If no segments were created (no ANSI codes), return the whole text
|
||||
if (segments.length === 0 && processedText) {
|
||||
segments.push({ text: processedText, style: {} });
|
||||
}
|
||||
|
||||
return segments;
|
||||
}
|
||||
|
||||
/**
|
||||
* Convert 256-color palette index to CSS color
|
||||
*/
|
||||
function get256Color(index: number): string {
|
||||
// 0-15: Standard colors
|
||||
if (index < 16) {
|
||||
const standardColors = [
|
||||
'#000000', '#cd0000', '#00cd00', '#cdcd00', '#0000ee', '#cd00cd', '#00cdcd', '#e5e5e5',
|
||||
'#7f7f7f', '#ff0000', '#00ff00', '#ffff00', '#5c5cff', '#ff00ff', '#00ffff', '#ffffff',
|
||||
];
|
||||
return standardColors[index];
|
||||
}
|
||||
|
||||
// 16-231: 6x6x6 color cube
|
||||
if (index < 232) {
|
||||
const n = index - 16;
|
||||
const b = n % 6;
|
||||
const g = Math.floor(n / 6) % 6;
|
||||
const r = Math.floor(n / 36);
|
||||
const toHex = (v: number) => (v === 0 ? 0 : 55 + v * 40);
|
||||
return `rgb(${toHex(r)}, ${toHex(g)}, ${toHex(b)})`;
|
||||
}
|
||||
|
||||
// 232-255: Grayscale
|
||||
const gray = 8 + (index - 232) * 10;
|
||||
return `rgb(${gray}, ${gray}, ${gray})`;
|
||||
}
|
||||
|
||||
export function AnsiOutput({ text, className }: AnsiOutputProps) {
|
||||
const segments = useMemo(() => parseAnsi(text), [text]);
|
||||
|
||||
return (
|
||||
<pre
|
||||
className={cn(
|
||||
'font-mono text-xs whitespace-pre-wrap break-words text-muted-foreground',
|
||||
className
|
||||
)}
|
||||
>
|
||||
{segments.map((segment, index) => (
|
||||
<span
|
||||
key={index}
|
||||
style={{
|
||||
color: segment.style.color,
|
||||
backgroundColor: segment.style.backgroundColor,
|
||||
fontWeight: segment.style.fontWeight,
|
||||
fontStyle: segment.style.fontStyle,
|
||||
textDecoration: segment.style.textDecoration,
|
||||
}}
|
||||
>
|
||||
{segment.text}
|
||||
</span>
|
||||
))}
|
||||
</pre>
|
||||
);
|
||||
}
|
||||
141
apps/ui/src/components/ui/shell-syntax-editor.tsx
Normal file
141
apps/ui/src/components/ui/shell-syntax-editor.tsx
Normal file
@@ -0,0 +1,141 @@
|
||||
import CodeMirror from '@uiw/react-codemirror';
|
||||
import { StreamLanguage } from '@codemirror/language';
|
||||
import { shell } from '@codemirror/legacy-modes/mode/shell';
|
||||
import { EditorView } from '@codemirror/view';
|
||||
import { Extension } from '@codemirror/state';
|
||||
import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
|
||||
import { tags as t } from '@lezer/highlight';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
interface ShellSyntaxEditorProps {
|
||||
value: string;
|
||||
onChange: (value: string) => void;
|
||||
placeholder?: string;
|
||||
className?: string;
|
||||
minHeight?: string;
|
||||
'data-testid'?: string;
|
||||
}
|
||||
|
||||
// Syntax highlighting using CSS variables for theme compatibility
|
||||
const syntaxColors = HighlightStyle.define([
|
||||
// Keywords (if, then, else, fi, for, while, do, done, case, esac, etc.)
|
||||
{ tag: t.keyword, color: 'var(--chart-4, oklch(0.7 0.15 280))' },
|
||||
|
||||
// Strings (single and double quoted)
|
||||
{ tag: t.string, color: 'var(--chart-1, oklch(0.646 0.222 41.116))' },
|
||||
|
||||
// Comments
|
||||
{ tag: t.comment, color: 'var(--muted-foreground)', fontStyle: 'italic' },
|
||||
|
||||
// Variables ($VAR, ${VAR})
|
||||
{ tag: t.variableName, color: 'var(--chart-2, oklch(0.6 0.118 184.704))' },
|
||||
|
||||
// Operators
|
||||
{ tag: t.operator, color: 'var(--muted-foreground)' },
|
||||
|
||||
// Numbers
|
||||
{ tag: t.number, color: 'var(--chart-3, oklch(0.7 0.15 150))' },
|
||||
|
||||
// Function names / commands
|
||||
{ tag: t.function(t.variableName), color: 'var(--primary)' },
|
||||
{ tag: t.attributeName, color: 'var(--chart-5, oklch(0.65 0.2 30))' },
|
||||
|
||||
// Default text
|
||||
{ tag: t.content, color: 'var(--foreground)' },
|
||||
]);
|
||||
|
||||
// Editor theme using CSS variables
|
||||
const editorTheme = EditorView.theme({
|
||||
'&': {
|
||||
height: '100%',
|
||||
fontSize: '0.875rem',
|
||||
fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace',
|
||||
backgroundColor: 'transparent',
|
||||
color: 'var(--foreground)',
|
||||
},
|
||||
'.cm-scroller': {
|
||||
overflow: 'auto',
|
||||
fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace',
|
||||
},
|
||||
'.cm-content': {
|
||||
padding: '0.75rem',
|
||||
minHeight: '100%',
|
||||
caretColor: 'var(--primary)',
|
||||
},
|
||||
'.cm-cursor, .cm-dropCursor': {
|
||||
borderLeftColor: 'var(--primary)',
|
||||
},
|
||||
'&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': {
|
||||
backgroundColor: 'oklch(0.55 0.25 265 / 0.3)',
|
||||
},
|
||||
'.cm-activeLine': {
|
||||
backgroundColor: 'var(--accent)',
|
||||
opacity: '0.3',
|
||||
},
|
||||
'.cm-line': {
|
||||
padding: '0 0.25rem',
|
||||
},
|
||||
'&.cm-focused': {
|
||||
outline: 'none',
|
||||
},
|
||||
'.cm-gutters': {
|
||||
backgroundColor: 'transparent',
|
||||
color: 'var(--muted-foreground)',
|
||||
border: 'none',
|
||||
paddingRight: '0.5rem',
|
||||
},
|
||||
'.cm-lineNumbers .cm-gutterElement': {
|
||||
minWidth: '2rem',
|
||||
textAlign: 'right',
|
||||
paddingRight: '0.5rem',
|
||||
},
|
||||
'.cm-placeholder': {
|
||||
color: 'var(--muted-foreground)',
|
||||
fontStyle: 'italic',
|
||||
},
|
||||
});
|
||||
|
||||
// Combine all extensions
|
||||
const extensions: Extension[] = [
|
||||
StreamLanguage.define(shell),
|
||||
syntaxHighlighting(syntaxColors),
|
||||
editorTheme,
|
||||
];
|
||||
|
||||
export function ShellSyntaxEditor({
|
||||
value,
|
||||
onChange,
|
||||
placeholder,
|
||||
className,
|
||||
minHeight = '200px',
|
||||
'data-testid': testId,
|
||||
}: ShellSyntaxEditorProps) {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'w-full rounded-lg border border-border bg-muted/30 overflow-hidden',
|
||||
className
|
||||
)}
|
||||
style={{ minHeight }}
|
||||
data-testid={testId}
|
||||
>
|
||||
<CodeMirror
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
extensions={extensions}
|
||||
theme="none"
|
||||
placeholder={placeholder}
|
||||
className="h-full [&_.cm-editor]:h-full [&_.cm-editor]:min-h-[inherit]"
|
||||
basicSetup={{
|
||||
lineNumbers: true,
|
||||
foldGutter: false,
|
||||
highlightActiveLine: true,
|
||||
highlightSelectionMatches: true,
|
||||
autocompletion: false,
|
||||
bracketMatching: true,
|
||||
indentOnInput: true,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -78,6 +78,8 @@ import {
|
||||
} from './board-view/hooks';
|
||||
import { SelectionActionBar } from './board-view/components';
|
||||
import { MassEditDialog } from './board-view/dialogs';
|
||||
import { InitScriptIndicator } from './board-view/init-script-indicator';
|
||||
import { useInitScriptEvents } from '@/hooks/use-init-script-events';
|
||||
|
||||
// Stable empty array to avoid infinite loop in selector
|
||||
const EMPTY_WORKTREES: ReturnType<ReturnType<typeof useAppStore.getState>['getWorktrees']> = [];
|
||||
@@ -255,6 +257,9 @@ export function BoardView() {
|
||||
// Window state hook for compact dialog mode
|
||||
const { isMaximized } = useWindowState();
|
||||
|
||||
// Init script events hook - subscribe to worktree init script events
|
||||
useInitScriptEvents(currentProject?.path ?? null);
|
||||
|
||||
// Keyboard shortcuts hook will be initialized after actions hook
|
||||
|
||||
// Prevent hydration issues
|
||||
@@ -1570,6 +1575,9 @@ export function BoardView() {
|
||||
setSelectedWorktreeForAction(null);
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Init Script Indicator - floating overlay for worktree init script status */}
|
||||
<InitScriptIndicator projectPath={currentProject.path} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,140 @@
|
||||
import { useState, useRef, useEffect } from 'react';
|
||||
import { Terminal, Check, X, Loader2, ChevronDown, ChevronUp } from 'lucide-react';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { useAppStore, type InitScriptState } from '@/store/app-store';
|
||||
import { AnsiOutput } from '@/components/ui/ansi-output';
|
||||
|
||||
interface InitScriptIndicatorProps {
|
||||
projectPath: string;
|
||||
}
|
||||
|
||||
export function InitScriptIndicator({ projectPath }: InitScriptIndicatorProps) {
|
||||
const initScriptState = useAppStore((s) => s.initScriptState[projectPath]);
|
||||
const clearInitScriptState = useAppStore((s) => s.clearInitScriptState);
|
||||
const [showLogs, setShowLogs] = useState(false);
|
||||
const [dismissed, setDismissed] = useState(false);
|
||||
const logsEndRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
// Auto-scroll to bottom when new output arrives
|
||||
useEffect(() => {
|
||||
if (showLogs && logsEndRef.current) {
|
||||
logsEndRef.current.scrollIntoView({ behavior: 'smooth' });
|
||||
}
|
||||
}, [initScriptState?.output, showLogs]);
|
||||
|
||||
// Reset dismissed state when a new script starts
|
||||
useEffect(() => {
|
||||
if (initScriptState?.status === 'running') {
|
||||
setDismissed(false);
|
||||
setShowLogs(true);
|
||||
}
|
||||
}, [initScriptState?.status]);
|
||||
|
||||
if (!initScriptState || dismissed) return null;
|
||||
if (initScriptState.status === 'idle') return null;
|
||||
|
||||
const { status, output, branch, error } = initScriptState;
|
||||
|
||||
const handleDismiss = () => {
|
||||
setDismissed(true);
|
||||
// Clear state after a delay to allow for future scripts
|
||||
setTimeout(() => {
|
||||
clearInitScriptState(projectPath);
|
||||
}, 100);
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'fixed bottom-4 right-4 z-50',
|
||||
'bg-card border border-border rounded-lg shadow-lg',
|
||||
'min-w-[350px] max-w-[500px]',
|
||||
'animate-in slide-in-from-right-5 duration-200'
|
||||
)}
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between p-3 border-b border-border/50">
|
||||
<div className="flex items-center gap-2">
|
||||
{status === 'running' && (
|
||||
<Loader2 className="w-4 h-4 animate-spin text-blue-500" />
|
||||
)}
|
||||
{status === 'success' && <Check className="w-4 h-4 text-green-500" />}
|
||||
{status === 'failed' && <X className="w-4 h-4 text-red-500" />}
|
||||
<span className="font-medium text-sm">
|
||||
Init Script{' '}
|
||||
{status === 'running'
|
||||
? 'Running'
|
||||
: status === 'success'
|
||||
? 'Completed'
|
||||
: 'Failed'}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<button
|
||||
onClick={() => setShowLogs(!showLogs)}
|
||||
className="p-1 hover:bg-accent rounded transition-colors"
|
||||
title={showLogs ? 'Hide logs' : 'Show logs'}
|
||||
>
|
||||
{showLogs ? (
|
||||
<ChevronDown className="w-4 h-4 text-muted-foreground" />
|
||||
) : (
|
||||
<ChevronUp className="w-4 h-4 text-muted-foreground" />
|
||||
)}
|
||||
</button>
|
||||
{status !== 'running' && (
|
||||
<button
|
||||
onClick={handleDismiss}
|
||||
className="p-1 hover:bg-accent rounded transition-colors"
|
||||
title="Dismiss"
|
||||
>
|
||||
<X className="w-4 h-4 text-muted-foreground" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Branch info */}
|
||||
<div className="px-3 py-2 text-xs text-muted-foreground flex items-center gap-2">
|
||||
<Terminal className="w-3.5 h-3.5" />
|
||||
<span>Branch: {branch}</span>
|
||||
</div>
|
||||
|
||||
{/* Logs (collapsible) */}
|
||||
{showLogs && (
|
||||
<div className="border-t border-border/50">
|
||||
<div className="p-3 max-h-[300px] overflow-y-auto">
|
||||
{output.length > 0 ? (
|
||||
<AnsiOutput text={output.join('')} />
|
||||
) : (
|
||||
<div className="text-xs text-muted-foreground/60 text-center py-2">
|
||||
{status === 'running' ? 'Waiting for output...' : 'No output'}
|
||||
</div>
|
||||
)}
|
||||
{error && (
|
||||
<div className="mt-2 text-red-500 text-xs font-medium">
|
||||
Error: {error}
|
||||
</div>
|
||||
)}
|
||||
<div ref={logsEndRef} />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Status bar for completed states */}
|
||||
{status !== 'running' && (
|
||||
<div
|
||||
className={cn(
|
||||
'px-3 py-2 text-xs',
|
||||
status === 'success'
|
||||
? 'bg-green-500/10 text-green-600'
|
||||
: 'bg-red-500/10 text-red-600'
|
||||
)}
|
||||
>
|
||||
{status === 'success'
|
||||
? 'Initialization completed successfully'
|
||||
: 'Initialization failed - worktree is still usable'}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -15,6 +15,7 @@ import { TerminalSection } from './settings-view/terminal/terminal-section';
|
||||
import { AudioSection } from './settings-view/audio/audio-section';
|
||||
import { KeyboardShortcutsSection } from './settings-view/keyboard-shortcuts/keyboard-shortcuts-section';
|
||||
import { FeatureDefaultsSection } from './settings-view/feature-defaults/feature-defaults-section';
|
||||
import { WorktreesSection } from './settings-view/worktrees';
|
||||
import { DangerZoneSection } from './settings-view/danger-zone/danger-zone-section';
|
||||
import { AccountSection } from './settings-view/account';
|
||||
import { SecuritySection } from './settings-view/security';
|
||||
@@ -149,17 +150,22 @@ export function SettingsView() {
|
||||
defaultSkipTests={defaultSkipTests}
|
||||
enableDependencyBlocking={enableDependencyBlocking}
|
||||
skipVerificationInAutoMode={skipVerificationInAutoMode}
|
||||
useWorktrees={useWorktrees}
|
||||
defaultPlanningMode={defaultPlanningMode}
|
||||
defaultRequirePlanApproval={defaultRequirePlanApproval}
|
||||
onDefaultSkipTestsChange={setDefaultSkipTests}
|
||||
onEnableDependencyBlockingChange={setEnableDependencyBlocking}
|
||||
onSkipVerificationInAutoModeChange={setSkipVerificationInAutoMode}
|
||||
onUseWorktreesChange={setUseWorktrees}
|
||||
onDefaultPlanningModeChange={setDefaultPlanningMode}
|
||||
onDefaultRequirePlanApprovalChange={setDefaultRequirePlanApproval}
|
||||
/>
|
||||
);
|
||||
case 'worktrees':
|
||||
return (
|
||||
<WorktreesSection
|
||||
useWorktrees={useWorktrees}
|
||||
onUseWorktreesChange={setUseWorktrees}
|
||||
/>
|
||||
);
|
||||
case 'account':
|
||||
return <AccountSection />;
|
||||
case 'security':
|
||||
|
||||
@@ -14,6 +14,8 @@ import {
|
||||
MessageSquareText,
|
||||
User,
|
||||
Shield,
|
||||
Cpu,
|
||||
GitBranch,
|
||||
} from 'lucide-react';
|
||||
import { AnthropicIcon, CursorIcon, OpenAIIcon, OpenCodeIcon } from '@/components/ui/provider-icon';
|
||||
import type { SettingsViewId } from '../hooks/use-settings-view';
|
||||
@@ -37,6 +39,7 @@ export const GLOBAL_NAV_GROUPS: NavigationGroup[] = [
|
||||
items: [
|
||||
{ id: 'model-defaults', label: 'Model Defaults', icon: Workflow },
|
||||
{ id: 'defaults', label: 'Feature Defaults', icon: FlaskConical },
|
||||
{ id: 'worktrees', label: 'Worktrees', icon: GitBranch },
|
||||
{ id: 'prompts', label: 'Prompt Customization', icon: MessageSquareText },
|
||||
{ id: 'api-keys', label: 'API Keys', icon: Key },
|
||||
{
|
||||
|
||||
@@ -3,7 +3,6 @@ import { Checkbox } from '@/components/ui/checkbox';
|
||||
import {
|
||||
FlaskConical,
|
||||
TestTube,
|
||||
GitBranch,
|
||||
AlertCircle,
|
||||
Zap,
|
||||
ClipboardList,
|
||||
@@ -27,13 +26,11 @@ interface FeatureDefaultsSectionProps {
|
||||
defaultSkipTests: boolean;
|
||||
enableDependencyBlocking: boolean;
|
||||
skipVerificationInAutoMode: boolean;
|
||||
useWorktrees: boolean;
|
||||
defaultPlanningMode: PlanningMode;
|
||||
defaultRequirePlanApproval: boolean;
|
||||
onDefaultSkipTestsChange: (value: boolean) => void;
|
||||
onEnableDependencyBlockingChange: (value: boolean) => void;
|
||||
onSkipVerificationInAutoModeChange: (value: boolean) => void;
|
||||
onUseWorktreesChange: (value: boolean) => void;
|
||||
onDefaultPlanningModeChange: (value: PlanningMode) => void;
|
||||
onDefaultRequirePlanApprovalChange: (value: boolean) => void;
|
||||
}
|
||||
@@ -42,13 +39,11 @@ export function FeatureDefaultsSection({
|
||||
defaultSkipTests,
|
||||
enableDependencyBlocking,
|
||||
skipVerificationInAutoMode,
|
||||
useWorktrees,
|
||||
defaultPlanningMode,
|
||||
defaultRequirePlanApproval,
|
||||
onDefaultSkipTestsChange,
|
||||
onEnableDependencyBlockingChange,
|
||||
onSkipVerificationInAutoModeChange,
|
||||
onUseWorktreesChange,
|
||||
onDefaultPlanningModeChange,
|
||||
onDefaultRequirePlanApprovalChange,
|
||||
}: FeatureDefaultsSectionProps) {
|
||||
@@ -257,32 +252,6 @@ export function FeatureDefaultsSection({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Separator */}
|
||||
<div className="border-t border-border/30" />
|
||||
|
||||
{/* Worktree Isolation Setting */}
|
||||
<div className="group flex items-start space-x-3 p-3 rounded-xl hover:bg-accent/30 transition-colors duration-200 -mx-3">
|
||||
<Checkbox
|
||||
id="use-worktrees"
|
||||
checked={useWorktrees}
|
||||
onCheckedChange={(checked) => onUseWorktreesChange(checked === true)}
|
||||
className="mt-1"
|
||||
data-testid="use-worktrees-checkbox"
|
||||
/>
|
||||
<div className="space-y-1.5">
|
||||
<Label
|
||||
htmlFor="use-worktrees"
|
||||
className="text-foreground cursor-pointer font-medium flex items-center gap-2"
|
||||
>
|
||||
<GitBranch className="w-4 h-4 text-brand-500" />
|
||||
Enable Git Worktree Isolation
|
||||
</Label>
|
||||
<p className="text-xs text-muted-foreground/80 leading-relaxed">
|
||||
Creates isolated git branches for each feature. When disabled, agents work directly in
|
||||
the main project directory.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -16,6 +16,7 @@ export type SettingsViewId =
|
||||
| 'keyboard'
|
||||
| 'audio'
|
||||
| 'defaults'
|
||||
| 'worktrees'
|
||||
| 'account'
|
||||
| 'security'
|
||||
| 'danger';
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
export { WorktreesSection } from './worktrees-section';
|
||||
@@ -0,0 +1,238 @@
|
||||
import { useState, useEffect, useCallback, useRef } from 'react';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Checkbox } from '@/components/ui/checkbox';
|
||||
import { ShellSyntaxEditor } from '@/components/ui/shell-syntax-editor';
|
||||
import { GitBranch, Terminal, FileCode, Check, Loader2 } from 'lucide-react';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { apiPost, apiPut } from '@/lib/api-fetch';
|
||||
import { toast } from 'sonner';
|
||||
import { useAppStore } from '@/store/app-store';
|
||||
|
||||
interface WorktreesSectionProps {
|
||||
useWorktrees: boolean;
|
||||
onUseWorktreesChange: (value: boolean) => void;
|
||||
}
|
||||
|
||||
interface InitScriptResponse {
|
||||
success: boolean;
|
||||
exists: boolean;
|
||||
content: string;
|
||||
path: string;
|
||||
error?: string;
|
||||
}
|
||||
|
||||
export function WorktreesSection({ useWorktrees, onUseWorktreesChange }: WorktreesSectionProps) {
|
||||
const currentProject = useAppStore((s) => s.currentProject);
|
||||
const [scriptContent, setScriptContent] = useState('');
|
||||
const [scriptPath, setScriptPath] = useState('');
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [isSaving, setIsSaving] = useState(false);
|
||||
const [showSaved, setShowSaved] = useState(false);
|
||||
const saveTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
const savedTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
|
||||
// Load init script content when project changes
|
||||
useEffect(() => {
|
||||
if (!currentProject?.path) {
|
||||
setScriptContent('');
|
||||
setScriptPath('');
|
||||
setIsLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const loadInitScript = async () => {
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const response = await apiPost<InitScriptResponse>('/api/worktree/init-script', {
|
||||
projectPath: currentProject.path,
|
||||
});
|
||||
if (response.success) {
|
||||
setScriptContent(response.content || '');
|
||||
setScriptPath(response.path || '');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to load init script:', error);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
loadInitScript();
|
||||
}, [currentProject?.path]);
|
||||
|
||||
// Debounced save function
|
||||
const saveScript = useCallback(
|
||||
async (content: string) => {
|
||||
if (!currentProject?.path) return;
|
||||
|
||||
setIsSaving(true);
|
||||
try {
|
||||
const response = await apiPut<{ success: boolean; error?: string }>(
|
||||
'/api/worktree/init-script',
|
||||
{
|
||||
projectPath: currentProject.path,
|
||||
content,
|
||||
}
|
||||
);
|
||||
if (response.success) {
|
||||
setShowSaved(true);
|
||||
savedTimeoutRef.current = setTimeout(() => setShowSaved(false), 2000);
|
||||
} else {
|
||||
toast.error('Failed to save init script', {
|
||||
description: response.error,
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to save init script:', error);
|
||||
toast.error('Failed to save init script');
|
||||
} finally {
|
||||
setIsSaving(false);
|
||||
}
|
||||
},
|
||||
[currentProject?.path]
|
||||
);
|
||||
|
||||
// Handle content change with debounce
|
||||
const handleContentChange = useCallback(
|
||||
(value: string) => {
|
||||
setScriptContent(value);
|
||||
setShowSaved(false);
|
||||
|
||||
// Clear existing timeouts
|
||||
if (saveTimeoutRef.current) {
|
||||
clearTimeout(saveTimeoutRef.current);
|
||||
}
|
||||
if (savedTimeoutRef.current) {
|
||||
clearTimeout(savedTimeoutRef.current);
|
||||
}
|
||||
|
||||
// Debounce save
|
||||
saveTimeoutRef.current = setTimeout(() => {
|
||||
saveScript(value);
|
||||
}, 1000);
|
||||
},
|
||||
[saveScript]
|
||||
);
|
||||
|
||||
// Cleanup timeouts
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (saveTimeoutRef.current) clearTimeout(saveTimeoutRef.current);
|
||||
if (savedTimeoutRef.current) clearTimeout(savedTimeoutRef.current);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'rounded-2xl overflow-hidden',
|
||||
'border border-border/50',
|
||||
'bg-gradient-to-br from-card/90 via-card/70 to-card/80 backdrop-blur-xl',
|
||||
'shadow-sm shadow-black/5'
|
||||
)}
|
||||
>
|
||||
<div className="p-6 border-b border-border/50 bg-gradient-to-r from-transparent via-accent/5 to-transparent">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<div className="w-9 h-9 rounded-xl bg-gradient-to-br from-brand-500/20 to-brand-600/10 flex items-center justify-center border border-brand-500/20">
|
||||
<GitBranch className="w-5 h-5 text-brand-500" />
|
||||
</div>
|
||||
<h2 className="text-lg font-semibold text-foreground tracking-tight">Worktrees</h2>
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground/80 ml-12">
|
||||
Configure git worktree isolation and initialization scripts.
|
||||
</p>
|
||||
</div>
|
||||
<div className="p-6 space-y-5">
|
||||
{/* Enable Worktrees Toggle */}
|
||||
<div className="group flex items-start space-x-3 p-3 rounded-xl hover:bg-accent/30 transition-colors duration-200 -mx-3">
|
||||
<Checkbox
|
||||
id="use-worktrees"
|
||||
checked={useWorktrees}
|
||||
onCheckedChange={(checked) => onUseWorktreesChange(checked === true)}
|
||||
className="mt-1"
|
||||
data-testid="use-worktrees-checkbox"
|
||||
/>
|
||||
<div className="space-y-1.5">
|
||||
<Label
|
||||
htmlFor="use-worktrees"
|
||||
className="text-foreground cursor-pointer font-medium flex items-center gap-2"
|
||||
>
|
||||
<GitBranch className="w-4 h-4 text-brand-500" />
|
||||
Enable Git Worktree Isolation
|
||||
</Label>
|
||||
<p className="text-xs text-muted-foreground/80 leading-relaxed">
|
||||
Creates isolated git branches for each feature. When disabled, agents work directly in
|
||||
the main project directory.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Separator */}
|
||||
<div className="border-t border-border/30" />
|
||||
|
||||
{/* Init Script Section */}
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Terminal className="w-4 h-4 text-brand-500" />
|
||||
<Label className="text-foreground font-medium">Initialization Script</Label>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-xs text-muted-foreground">
|
||||
{isSaving && (
|
||||
<span className="flex items-center gap-1">
|
||||
<Loader2 className="w-3 h-3 animate-spin" />
|
||||
Saving...
|
||||
</span>
|
||||
)}
|
||||
{showSaved && !isSaving && (
|
||||
<span className="flex items-center gap-1 text-green-500">
|
||||
<Check className="w-3 h-3" />
|
||||
Saved
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground/80 leading-relaxed">
|
||||
Shell commands to run after a worktree is created. Runs once per worktree. Uses Git
|
||||
Bash on Windows for cross-platform compatibility.
|
||||
</p>
|
||||
|
||||
{currentProject ? (
|
||||
<>
|
||||
{/* File path indicator */}
|
||||
<div className="flex items-center gap-2 text-xs text-muted-foreground/60">
|
||||
<FileCode className="w-3.5 h-3.5" />
|
||||
<code className="font-mono">.automaker/worktree-init.sh</code>
|
||||
</div>
|
||||
|
||||
{isLoading ? (
|
||||
<div className="flex items-center justify-center py-8">
|
||||
<Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
) : (
|
||||
<ShellSyntaxEditor
|
||||
value={scriptContent}
|
||||
onChange={handleContentChange}
|
||||
placeholder={`# Example initialization commands
|
||||
npm install
|
||||
|
||||
# Or use pnpm
|
||||
# pnpm install
|
||||
|
||||
# Copy environment file
|
||||
# cp .env.example .env`}
|
||||
minHeight="200px"
|
||||
data-testid="init-script-editor"
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<div className="text-sm text-muted-foreground/60 py-4 text-center">
|
||||
Select a project to configure the init script.
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user