feat: add configurable CLI command and UI improvements

Add support for alternative CLI commands via CLI_COMMAND environment
variable, allowing users to use CLIs other than 'claude' (e.g., 'glm').
This change affects all server services and the main CLI launcher.

Key changes:

- Configurable CLI command via CLI_COMMAND env var (defaults to 'claude')
- Configurable Playwright headless mode via PLAYWRIGHT_HEADLESS env var
- Pin claude-agent-sdk version to <0.2.0 for stability
- Use tail -500 for progress notes to avoid context overflow
- Add project delete functionality with confirmation dialog
- Replace single-line input with resizable textarea in spec chat
- Add coder agent configuration for code implementation tasks
- Ignore issues/ directory in git

Files modified:
- client.py: CLI command and Playwright headless configuration
- server/main.py, server/services/*: CLI command configuration
- start.py: CLI command configuration and error messages
- .env.example: Document new environment variables
- .gitignore: Ignore issues/ directory
- requirements.txt: Pin SDK version
- .claude/templates/*: Use tail -500 for progress notes
- ui/src/components/ProjectSelector.tsx: Add delete button
- ui/src/components/SpecCreationChat.tsx: Auto-resizing textarea
- ui/src/components/ConfirmDialog.tsx: New reusable dialog
- .claude/agents/coder.md: New coder agent configuration

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Auto
2026-01-10 13:19:49 +02:00
parent a0f7e72361
commit 117ca89f08
16 changed files with 496 additions and 49 deletions

View File

@@ -0,0 +1,103 @@
/**
* ConfirmDialog Component
*
* A reusable confirmation dialog following the neobrutalism design system.
* Used to confirm destructive actions like deleting projects.
*/
import { AlertTriangle, X } from 'lucide-react'
interface ConfirmDialogProps {
isOpen: boolean
title: string
message: string
confirmLabel?: string
cancelLabel?: string
variant?: 'danger' | 'warning'
isLoading?: boolean
onConfirm: () => void
onCancel: () => void
}
export function ConfirmDialog({
isOpen,
title,
message,
confirmLabel = 'Confirm',
cancelLabel = 'Cancel',
variant = 'danger',
isLoading = false,
onConfirm,
onCancel,
}: ConfirmDialogProps) {
if (!isOpen) return null
const variantColors = {
danger: {
icon: 'var(--color-neo-danger)',
button: 'neo-btn-danger',
},
warning: {
icon: 'var(--color-neo-pending)',
button: 'neo-btn-warning',
},
}
const colors = variantColors[variant]
return (
<div className="neo-modal-backdrop" onClick={onCancel}>
<div
className="neo-modal w-full max-w-md"
onClick={(e) => e.stopPropagation()}
>
{/* Header */}
<div className="flex items-center justify-between p-4 border-b-3 border-[var(--color-neo-border)]">
<div className="flex items-center gap-3">
<div
className="p-2 border-2 border-[var(--color-neo-border)] shadow-[2px_2px_0px_rgba(0,0,0,1)]"
style={{ backgroundColor: colors.icon }}
>
<AlertTriangle size={20} className="text-white" />
</div>
<h2 className="font-display font-bold text-lg text-[#1a1a1a]">
{title}
</h2>
</div>
<button
onClick={onCancel}
className="neo-btn neo-btn-ghost p-2"
disabled={isLoading}
>
<X size={20} />
</button>
</div>
{/* Content */}
<div className="p-6">
<p className="text-[var(--color-neo-text-secondary)] mb-6">
{message}
</p>
{/* Actions */}
<div className="flex justify-end gap-3">
<button
onClick={onCancel}
className="neo-btn"
disabled={isLoading}
>
{cancelLabel}
</button>
<button
onClick={onConfirm}
className={`neo-btn ${colors.button}`}
disabled={isLoading}
>
{isLoading ? 'Deleting...' : confirmLabel}
</button>
</div>
</div>
</div>
</div>
)
}