mirror of
https://github.com/leonvanzyl/autocoder.git
synced 2026-01-29 22:02:05 +00:00
refactor(ui): migrate to shadcn/ui components and fix scroll issues
Migrate UI component library from custom implementations to shadcn/ui: - Add shadcn/ui primitives (Button, Card, Dialog, Input, etc.) - Replace custom styles with Tailwind CSS v4 theme configuration - Remove custom-theme.css in favor of globals.css with @theme directive Fix scroll overflow issues in multiple components: - ProjectSelector: "New Project" button no longer overlays project list - FolderBrowser: folder list now scrolls properly within modal - AgentCard: log modal content stays within bounds - ConversationHistory: conversation list scrolls correctly - KanbanColumn: feature cards scroll within fixed height - ScheduleModal: schedule form content scrolls properly Key technical changes: - Replace ScrollArea component with native overflow-y-auto divs - Add min-h-0 to flex containers to allow proper shrinking - Restructure dropdown layouts with flex-col for fixed footers New files: - ui/components.json (shadcn/ui configuration) - ui/src/components/ui/* (20 UI primitive components) - ui/src/lib/utils.ts (cn utility for class merging) - ui/tsconfig.app.json (app-specific TypeScript config) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Auto
22
ui/components.json
Normal file
22
ui/components.json
Normal file
@@ -0,0 +1,22 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema.json",
|
||||
"style": "new-york",
|
||||
"rsc": false,
|
||||
"tsx": true,
|
||||
"tailwind": {
|
||||
"config": "",
|
||||
"css": "src/styles/globals.css",
|
||||
"baseColor": "neutral",
|
||||
"cssVariables": true,
|
||||
"prefix": ""
|
||||
},
|
||||
"iconLibrary": "lucide",
|
||||
"aliases": {
|
||||
"components": "@/components",
|
||||
"utils": "@/lib/utils",
|
||||
"ui": "@/components/ui",
|
||||
"lib": "@/lib",
|
||||
"hooks": "@/hooks"
|
||||
},
|
||||
"registries": {}
|
||||
}
|
||||
1025
ui/package-lock.json
generated
1025
ui/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -12,37 +12,52 @@
|
||||
"test:e2e:ui": "playwright test --ui"
|
||||
},
|
||||
"dependencies": {
|
||||
"@radix-ui/react-dialog": "^1.1.2",
|
||||
"@radix-ui/react-dropdown-menu": "^2.1.2",
|
||||
"@radix-ui/react-tooltip": "^1.1.3",
|
||||
"@tanstack/react-query": "^5.60.0",
|
||||
"@radix-ui/react-checkbox": "^1.3.3",
|
||||
"@radix-ui/react-dialog": "^1.1.15",
|
||||
"@radix-ui/react-dropdown-menu": "^2.1.16",
|
||||
"@radix-ui/react-label": "^2.1.8",
|
||||
"@radix-ui/react-popover": "^1.1.15",
|
||||
"@radix-ui/react-radio-group": "^1.3.8",
|
||||
"@radix-ui/react-scroll-area": "^1.2.10",
|
||||
"@radix-ui/react-select": "^2.2.6",
|
||||
"@radix-ui/react-separator": "^1.1.8",
|
||||
"@radix-ui/react-slot": "^1.2.4",
|
||||
"@radix-ui/react-switch": "^1.2.6",
|
||||
"@radix-ui/react-tabs": "^1.1.13",
|
||||
"@radix-ui/react-toggle": "^1.1.10",
|
||||
"@radix-ui/react-tooltip": "^1.2.8",
|
||||
"@tanstack/react-query": "^5.72.0",
|
||||
"@xterm/addon-fit": "^0.11.0",
|
||||
"@xterm/addon-web-links": "^0.12.0",
|
||||
"@xterm/xterm": "^6.0.0",
|
||||
"@xyflow/react": "^12.10.0",
|
||||
"canvas-confetti": "^1.9.4",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"clsx": "^2.1.1",
|
||||
"dagre": "^0.8.5",
|
||||
"lucide-react": "^0.460.0",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1"
|
||||
"lucide-react": "^0.475.0",
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0",
|
||||
"tailwind-merge": "^3.4.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^9.13.0",
|
||||
"@eslint/js": "^9.19.0",
|
||||
"@playwright/test": "^1.57.0",
|
||||
"@tailwindcss/vite": "^4.0.0-beta.4",
|
||||
"@tailwindcss/vite": "^4.1.0",
|
||||
"@types/canvas-confetti": "^1.9.0",
|
||||
"@types/dagre": "^0.7.53",
|
||||
"@types/react": "^18.3.12",
|
||||
"@types/react-dom": "^18.3.1",
|
||||
"@vitejs/plugin-react": "^4.3.3",
|
||||
"eslint": "^9.13.0",
|
||||
"eslint-plugin-react-hooks": "^5.0.0",
|
||||
"eslint-plugin-react-refresh": "^0.4.14",
|
||||
"globals": "^15.11.0",
|
||||
"tailwindcss": "^4.0.0-beta.4",
|
||||
"typescript": "~5.6.2",
|
||||
"typescript-eslint": "^8.11.0",
|
||||
"vite": "^5.4.10"
|
||||
"@types/node": "^22.12.0",
|
||||
"@types/react": "^19.0.0",
|
||||
"@types/react-dom": "^19.0.0",
|
||||
"@vitejs/plugin-react": "^4.4.0",
|
||||
"eslint": "^9.19.0",
|
||||
"eslint-plugin-react-hooks": "^5.1.0",
|
||||
"eslint-plugin-react-refresh": "^0.4.19",
|
||||
"globals": "^15.14.0",
|
||||
"tailwindcss": "^4.1.0",
|
||||
"tw-animate-css": "^1.4.0",
|
||||
"typescript": "~5.7.3",
|
||||
"typescript-eslint": "^8.23.0",
|
||||
"vite": "^7.3.0"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -27,6 +27,9 @@ import { KeyboardShortcutsHelp } from './components/KeyboardShortcutsHelp'
|
||||
import { getDependencyGraph } from './lib/api'
|
||||
import { Loader2, Settings, Moon, Sun } from 'lucide-react'
|
||||
import type { Feature } from './lib/types'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Card, CardContent } from '@/components/ui/card'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
|
||||
const STORAGE_KEY = 'autocoder-selected-project'
|
||||
const DARK_MODE_KEY = 'autocoder-dark-mode'
|
||||
@@ -256,9 +259,9 @@ function App() {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-neo-bg">
|
||||
<div className="min-h-screen bg-background">
|
||||
{/* Header */}
|
||||
<header className="bg-neo-card text-neo-text border-b-4 border-neo-border">
|
||||
<header className="bg-card text-foreground border-b-2 border-border">
|
||||
<div className="max-w-7xl mx-auto px-4 py-4">
|
||||
<div className="flex items-center justify-between">
|
||||
{/* Logo and Title */}
|
||||
@@ -289,47 +292,49 @@ function App() {
|
||||
url={wsState.devServerUrl}
|
||||
/>
|
||||
|
||||
<button
|
||||
<Button
|
||||
onClick={() => setShowSettings(true)}
|
||||
className="neo-btn text-sm py-2 px-3"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
title="Settings (,)"
|
||||
aria-label="Open Settings"
|
||||
>
|
||||
<Settings size={18} />
|
||||
</button>
|
||||
</Button>
|
||||
|
||||
{/* Ollama Mode Indicator */}
|
||||
{settings?.ollama_mode && (
|
||||
<div
|
||||
className="flex items-center gap-1.5 px-2 py-1 bg-white rounded border-2 border-neo-border shadow-neo-sm"
|
||||
className="flex items-center gap-1.5 px-2 py-1 bg-card rounded border-2 border-border shadow-sm"
|
||||
title="Using Ollama local models (configured via .env)"
|
||||
>
|
||||
<img src="/ollama.png" alt="Ollama" className="w-5 h-5" />
|
||||
<span className="text-xs font-bold text-neo-text">Ollama</span>
|
||||
<span className="text-xs font-bold text-foreground">Ollama</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* GLM Mode Badge */}
|
||||
{settings?.glm_mode && (
|
||||
<span
|
||||
className="px-2 py-1 text-xs font-bold bg-[var(--color-neo-glm)] text-white rounded border-2 border-neo-border shadow-neo-sm"
|
||||
<Badge
|
||||
className="bg-purple-500 text-white hover:bg-purple-600"
|
||||
title="Using GLM API (configured via .env)"
|
||||
>
|
||||
GLM
|
||||
</span>
|
||||
</Badge>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Dark mode toggle - always visible */}
|
||||
<button
|
||||
<Button
|
||||
onClick={() => setDarkMode(!darkMode)}
|
||||
className="neo-btn text-sm py-2 px-3"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
title="Toggle dark mode"
|
||||
aria-label="Toggle dark mode"
|
||||
>
|
||||
{darkMode ? <Sun size={18} /> : <Moon size={18} />}
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -341,11 +346,11 @@ function App() {
|
||||
style={{ paddingBottom: debugOpen ? debugPanelHeight + 32 : undefined }}
|
||||
>
|
||||
{!selectedProject ? (
|
||||
<div className="neo-empty-state mt-12">
|
||||
<div className="text-center mt-12">
|
||||
<h2 className="font-display text-2xl font-bold mb-2">
|
||||
Welcome to AutoCoder
|
||||
</h2>
|
||||
<p className="text-neo-text-secondary mb-4">
|
||||
<p className="text-muted-foreground mb-4">
|
||||
Select a project from the dropdown above or create a new one to get started.
|
||||
</p>
|
||||
</div>
|
||||
@@ -381,15 +386,17 @@ function App() {
|
||||
features.in_progress.length === 0 &&
|
||||
features.done.length === 0 &&
|
||||
wsState.agentStatus === 'running' && (
|
||||
<div className="neo-card p-8 text-center">
|
||||
<Loader2 size={32} className="animate-spin mx-auto mb-4 text-neo-progress" />
|
||||
<h3 className="font-display font-bold text-xl mb-2">
|
||||
Initializing Features...
|
||||
</h3>
|
||||
<p className="text-neo-text-secondary">
|
||||
The agent is reading your spec and creating features. This may take a moment.
|
||||
</p>
|
||||
</div>
|
||||
<Card className="p-8 text-center">
|
||||
<CardContent className="p-0">
|
||||
<Loader2 size={32} className="animate-spin mx-auto mb-4 text-primary" />
|
||||
<h3 className="font-display font-bold text-xl mb-2">
|
||||
Initializing Features...
|
||||
</h3>
|
||||
<p className="text-muted-foreground">
|
||||
The agent is reading your spec and creating features. This may take a moment.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* View Toggle - only show when there are features */}
|
||||
@@ -411,7 +418,7 @@ function App() {
|
||||
hasSpec={hasSpec}
|
||||
/>
|
||||
) : (
|
||||
<div className="neo-card overflow-hidden" style={{ height: '600px' }}>
|
||||
<Card className="overflow-hidden" style={{ height: '600px' }}>
|
||||
{graphData ? (
|
||||
<DependencyGraph
|
||||
graphData={graphData}
|
||||
@@ -420,10 +427,10 @@ function App() {
|
||||
/>
|
||||
) : (
|
||||
<div className="h-full flex items-center justify-center">
|
||||
<Loader2 size={32} className="animate-spin text-neo-progress" />
|
||||
<Loader2 size={32} className="animate-spin text-primary" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
@@ -461,7 +468,7 @@ function App() {
|
||||
|
||||
{/* Spec Creation Chat - for creating spec from empty kanban */}
|
||||
{showSpecChat && selectedProject && (
|
||||
<div className="fixed inset-0 z-50 bg-[var(--color-neo-bg)]">
|
||||
<div className="fixed inset-0 z-50 bg-background">
|
||||
<SpecCreationChat
|
||||
projectName={selectedProject}
|
||||
onComplete={() => {
|
||||
@@ -508,14 +515,10 @@ function App() {
|
||||
)}
|
||||
|
||||
{/* Settings Modal */}
|
||||
{showSettings && (
|
||||
<SettingsModal onClose={() => setShowSettings(false)} />
|
||||
)}
|
||||
<SettingsModal isOpen={showSettings} onClose={() => setShowSettings(false)} />
|
||||
|
||||
{/* Keyboard Shortcuts Help */}
|
||||
{showKeyboardHelp && (
|
||||
<KeyboardShortcutsHelp onClose={() => setShowKeyboardHelp(false)} />
|
||||
)}
|
||||
<KeyboardShortcutsHelp isOpen={showKeyboardHelp} onClose={() => setShowKeyboardHelp(false)} />
|
||||
|
||||
{/* Celebration Overlay - shows when a feature is completed by an agent */}
|
||||
{wsState.celebration && (
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { Activity } from 'lucide-react'
|
||||
import { AgentAvatar } from './AgentAvatar'
|
||||
import type { AgentMascot } from '../lib/types'
|
||||
import { Card, CardContent } from '@/components/ui/card'
|
||||
|
||||
interface ActivityItem {
|
||||
agentName: string
|
||||
@@ -38,8 +39,8 @@ export function ActivityFeed({ activities, maxItems = 5, showHeader = true }: Ac
|
||||
<div>
|
||||
{showHeader && (
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<Activity size={14} className="text-neo-text-secondary" />
|
||||
<span className="text-xs font-bold text-neo-text-secondary uppercase tracking-wide">
|
||||
<Activity size={14} className="text-muted-foreground" />
|
||||
<span className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">
|
||||
Recent Activity
|
||||
</span>
|
||||
</div>
|
||||
@@ -47,34 +48,36 @@ export function ActivityFeed({ activities, maxItems = 5, showHeader = true }: Ac
|
||||
|
||||
<div className="space-y-2">
|
||||
{displayedActivities.map((activity) => (
|
||||
<div
|
||||
<Card
|
||||
key={`${activity.featureId}-${activity.timestamp}-${activity.thought.slice(0, 20)}`}
|
||||
className="flex items-start gap-2 py-1.5 px-2 rounded bg-[var(--color-neo-bg)] border border-neo-border/20"
|
||||
className="py-1.5"
|
||||
>
|
||||
<AgentAvatar
|
||||
name={activity.agentName as AgentMascot}
|
||||
state="working"
|
||||
size="sm"
|
||||
/>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-xs font-bold" style={{
|
||||
color: getMascotColor(activity.agentName as AgentMascot)
|
||||
}}>
|
||||
{activity.agentName}
|
||||
</span>
|
||||
<span className="text-[10px] text-neo-text-muted">
|
||||
#{activity.featureId}
|
||||
</span>
|
||||
<span className="text-[10px] text-neo-text-muted ml-auto">
|
||||
{formatTimestamp(activity.timestamp)}
|
||||
</span>
|
||||
<CardContent className="p-2 flex items-start gap-2">
|
||||
<AgentAvatar
|
||||
name={activity.agentName as AgentMascot}
|
||||
state="working"
|
||||
size="sm"
|
||||
/>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-xs font-semibold" style={{
|
||||
color: getMascotColor(activity.agentName as AgentMascot)
|
||||
}}>
|
||||
{activity.agentName}
|
||||
</span>
|
||||
<span className="text-[10px] text-muted-foreground">
|
||||
#{activity.featureId}
|
||||
</span>
|
||||
<span className="text-[10px] text-muted-foreground ml-auto">
|
||||
{formatTimestamp(activity.timestamp)}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground truncate" title={activity.thought}>
|
||||
{activity.thought}
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-xs text-neo-text-secondary truncate" title={activity.thought}>
|
||||
{activity.thought}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,18 @@
|
||||
import { useState, useId } from 'react'
|
||||
import { X, Plus, Trash2, Loader2, AlertCircle } from 'lucide-react'
|
||||
import { useCreateFeature } from '../hooks/useProjects'
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogFooter,
|
||||
} from '@/components/ui/dialog'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Textarea } from '@/components/ui/textarea'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { Alert, AlertDescription } from '@/components/ui/alert'
|
||||
|
||||
interface Step {
|
||||
id: string
|
||||
@@ -65,149 +77,135 @@ export function AddFeatureForm({ projectName, onClose }: AddFeatureFormProps) {
|
||||
const isValid = category.trim() && name.trim() && description.trim()
|
||||
|
||||
return (
|
||||
<div className="neo-modal-backdrop" onClick={onClose}>
|
||||
<div
|
||||
className="neo-modal w-full max-w-2xl"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between p-6 border-b-3 border-[var(--color-neo-border)]">
|
||||
<h2 className="font-display text-2xl font-bold">
|
||||
Add Feature
|
||||
</h2>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="neo-btn neo-btn-ghost p-2"
|
||||
>
|
||||
<X size={24} />
|
||||
</button>
|
||||
</div>
|
||||
<Dialog open={true} onOpenChange={(open) => !open && onClose()}>
|
||||
<DialogContent className="sm:max-w-2xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Add Feature</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
{/* Form */}
|
||||
<form onSubmit={handleSubmit} className="p-6 space-y-4">
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
{/* Error Message */}
|
||||
{error && (
|
||||
<div className="flex items-center gap-3 p-4 bg-[var(--color-neo-error-bg)] text-[var(--color-neo-error-text)] border-3 border-[var(--color-neo-error-border)]">
|
||||
<AlertCircle size={20} />
|
||||
<span>{error}</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setError(null)}
|
||||
className="ml-auto hover:opacity-70 transition-opacity"
|
||||
>
|
||||
<X size={16} />
|
||||
</button>
|
||||
</div>
|
||||
<Alert variant="destructive">
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
<AlertDescription className="flex items-center justify-between">
|
||||
<span>{error}</span>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon-xs"
|
||||
onClick={() => setError(null)}
|
||||
>
|
||||
<X size={14} />
|
||||
</Button>
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{/* Category & Priority Row */}
|
||||
<div className="flex gap-4">
|
||||
<div className="flex-1">
|
||||
<label className="block font-display font-bold mb-2 uppercase text-sm">
|
||||
Category
|
||||
</label>
|
||||
<input
|
||||
<div className="flex-1 space-y-2">
|
||||
<Label htmlFor="category">Category</Label>
|
||||
<Input
|
||||
id="category"
|
||||
type="text"
|
||||
value={category}
|
||||
onChange={(e) => setCategory(e.target.value)}
|
||||
placeholder="e.g., Authentication, UI, API"
|
||||
className="neo-input"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="w-32">
|
||||
<label className="block font-display font-bold mb-2 uppercase text-sm">
|
||||
Priority
|
||||
</label>
|
||||
<input
|
||||
<div className="w-32 space-y-2">
|
||||
<Label htmlFor="priority">Priority</Label>
|
||||
<Input
|
||||
id="priority"
|
||||
type="number"
|
||||
value={priority}
|
||||
onChange={(e) => setPriority(e.target.value)}
|
||||
placeholder="Auto"
|
||||
min="1"
|
||||
className="neo-input"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Name */}
|
||||
<div>
|
||||
<label className="block font-display font-bold mb-2 uppercase text-sm">
|
||||
Feature Name
|
||||
</label>
|
||||
<input
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="name">Feature Name</Label>
|
||||
<Input
|
||||
id="name"
|
||||
type="text"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
placeholder="e.g., User login form"
|
||||
className="neo-input"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<div>
|
||||
<label className="block font-display font-bold mb-2 uppercase text-sm">
|
||||
Description
|
||||
</label>
|
||||
<textarea
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="description">Description</Label>
|
||||
<Textarea
|
||||
id="description"
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
placeholder="Describe what this feature should do..."
|
||||
className="neo-input min-h-[100px] resize-y"
|
||||
className="min-h-[100px] resize-y"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Steps */}
|
||||
<div>
|
||||
<label className="block font-display font-bold mb-2 uppercase text-sm">
|
||||
Test Steps (Optional)
|
||||
</label>
|
||||
<div className="space-y-2">
|
||||
<Label>Test Steps (Optional)</Label>
|
||||
<div className="space-y-2">
|
||||
{steps.map((step, index) => (
|
||||
<div key={step.id} className="flex gap-2 items-center">
|
||||
<span
|
||||
className="w-10 h-10 flex-shrink-0 flex items-center justify-center font-mono font-bold text-sm border-3 border-[var(--color-neo-border)] bg-[var(--color-neo-bg)] text-[var(--color-neo-text-secondary)]"
|
||||
style={{ boxShadow: 'var(--shadow-neo-sm)' }}
|
||||
>
|
||||
<span className="w-10 h-10 flex-shrink-0 flex items-center justify-center font-mono font-semibold text-sm border rounded-md bg-muted text-muted-foreground">
|
||||
{index + 1}
|
||||
</span>
|
||||
<input
|
||||
<Input
|
||||
type="text"
|
||||
value={step.value}
|
||||
onChange={(e) => handleStepChange(step.id, e.target.value)}
|
||||
placeholder="Describe this step..."
|
||||
className="neo-input flex-1"
|
||||
className="flex-1"
|
||||
/>
|
||||
{steps.length > 1 && (
|
||||
<button
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => handleRemoveStep(step.id)}
|
||||
className="neo-btn neo-btn-ghost p-2"
|
||||
>
|
||||
<Trash2 size={18} />
|
||||
</button>
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<button
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={handleAddStep}
|
||||
className="neo-btn neo-btn-ghost mt-2 text-sm"
|
||||
>
|
||||
<Plus size={16} />
|
||||
Add Step
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex gap-3 pt-4 border-t-3 border-[var(--color-neo-border)]">
|
||||
<button
|
||||
<DialogFooter className="pt-4 border-t">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={onClose}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={!isValid || createFeature.isPending}
|
||||
className="neo-btn neo-btn-success flex-1"
|
||||
>
|
||||
{createFeature.isPending ? (
|
||||
<Loader2 size={18} className="animate-spin" />
|
||||
@@ -217,17 +215,10 @@ export function AddFeatureForm({ projectName, onClose }: AddFeatureFormProps) {
|
||||
Create Feature
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
className="neo-btn neo-btn-ghost"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -606,7 +606,7 @@ export function AgentAvatar({ name, state, size = 'md', showName = false }: Agen
|
||||
<SvgComponent colors={colors} size={svgSize} />
|
||||
</div>
|
||||
{showName && (
|
||||
<span className={`${font} font-bold text-neo-text`} style={{ color: colors.primary }}>
|
||||
<span className={`${font} font-bold text-foreground`} style={{ color: colors.primary }}>
|
||||
{name}
|
||||
</span>
|
||||
)}
|
||||
|
||||
@@ -3,6 +3,9 @@ import { useState } from 'react'
|
||||
import { createPortal } from 'react-dom'
|
||||
import { AgentAvatar } from './AgentAvatar'
|
||||
import type { ActiveAgent, AgentLogEntry, AgentType } from '../lib/types'
|
||||
import { Card, CardContent } from '@/components/ui/card'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
|
||||
interface AgentCardProps {
|
||||
agent: ActiveAgent
|
||||
@@ -31,22 +34,22 @@ function getStateText(state: ActiveAgent['state']): string {
|
||||
}
|
||||
}
|
||||
|
||||
// Get state color
|
||||
// Get state color class
|
||||
function getStateColor(state: ActiveAgent['state']): string {
|
||||
switch (state) {
|
||||
case 'success':
|
||||
return 'text-neo-done'
|
||||
return 'text-primary'
|
||||
case 'error':
|
||||
return 'text-neo-pending' // Yellow - just pivoting, not a real error
|
||||
return 'text-yellow-600'
|
||||
case 'struggling':
|
||||
return 'text-orange-500' // Orange - working hard, being persistent
|
||||
return 'text-orange-500'
|
||||
case 'working':
|
||||
case 'testing':
|
||||
return 'text-neo-progress'
|
||||
return 'text-primary'
|
||||
case 'thinking':
|
||||
return 'text-neo-pending'
|
||||
return 'text-yellow-600'
|
||||
default:
|
||||
return 'text-neo-text-secondary'
|
||||
return 'text-muted-foreground'
|
||||
}
|
||||
}
|
||||
|
||||
@@ -55,14 +58,13 @@ function getAgentTypeBadge(agentType: AgentType): { label: string; className: st
|
||||
if (agentType === 'testing') {
|
||||
return {
|
||||
label: 'TEST',
|
||||
className: 'bg-purple-100 text-purple-700 border-purple-300',
|
||||
className: 'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-300',
|
||||
icon: FlaskConical,
|
||||
}
|
||||
}
|
||||
// Default to coding
|
||||
return {
|
||||
label: 'CODE',
|
||||
className: 'bg-blue-100 text-blue-700 border-blue-300',
|
||||
className: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300',
|
||||
icon: Code,
|
||||
}
|
||||
}
|
||||
@@ -74,75 +76,66 @@ export function AgentCard({ agent, onShowLogs }: AgentCardProps) {
|
||||
const TypeIcon = typeBadge.icon
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`
|
||||
neo-card p-3 min-w-[180px] max-w-[220px]
|
||||
${isActive ? 'animate-pulse-neo' : ''}
|
||||
transition-all duration-300
|
||||
`}
|
||||
>
|
||||
{/* Agent type badge */}
|
||||
<div className="flex justify-end mb-1">
|
||||
<span
|
||||
className={`
|
||||
inline-flex items-center gap-1 px-1.5 py-0.5 text-[10px] font-bold
|
||||
uppercase tracking-wide rounded border
|
||||
${typeBadge.className}
|
||||
`}
|
||||
>
|
||||
<TypeIcon size={10} />
|
||||
{typeBadge.label}
|
||||
</span>
|
||||
</div>
|
||||
<Card className={`min-w-[180px] max-w-[220px] py-3 ${isActive ? 'animate-pulse' : ''}`}>
|
||||
<CardContent className="p-3 space-y-2">
|
||||
{/* Agent type badge */}
|
||||
<div className="flex justify-end">
|
||||
<Badge variant="outline" className={`text-[10px] ${typeBadge.className}`}>
|
||||
<TypeIcon size={10} />
|
||||
{typeBadge.label}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
{/* Header with avatar and name */}
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<AgentAvatar name={agent.agentName} state={agent.state} size="sm" />
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="font-display font-bold text-sm truncate">
|
||||
{agent.agentName}
|
||||
{/* Header with avatar and name */}
|
||||
<div className="flex items-center gap-2">
|
||||
<AgentAvatar name={agent.agentName} state={agent.state} size="sm" />
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="font-semibold text-sm truncate">
|
||||
{agent.agentName}
|
||||
</div>
|
||||
<div className={`text-xs ${getStateColor(agent.state)}`}>
|
||||
{getStateText(agent.state)}
|
||||
</div>
|
||||
</div>
|
||||
<div className={`text-xs ${getStateColor(agent.state)}`}>
|
||||
{getStateText(agent.state)}
|
||||
</div>
|
||||
</div>
|
||||
{/* Log button */}
|
||||
{hasLogs && onShowLogs && (
|
||||
<button
|
||||
onClick={() => onShowLogs(agent.agentIndex)}
|
||||
className="p-1 hover:bg-neo-bg-secondary rounded transition-colors"
|
||||
title={`View logs (${agent.logs?.length || 0} entries)`}
|
||||
>
|
||||
<ScrollText size={14} className="text-neo-text-secondary" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Feature info */}
|
||||
<div className="mb-2">
|
||||
<div className="text-xs text-neo-text-secondary mb-0.5">
|
||||
Feature #{agent.featureId}
|
||||
</div>
|
||||
<div className="text-sm font-medium truncate" title={agent.featureName}>
|
||||
{agent.featureName}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Thought bubble */}
|
||||
{agent.thought && (
|
||||
<div className="relative mt-2 pt-2 border-t-2 border-neo-border/30">
|
||||
<div className="flex items-start gap-1.5">
|
||||
<MessageCircle size={14} className="text-neo-progress shrink-0 mt-0.5" />
|
||||
<p
|
||||
className="text-xs text-neo-text-secondary line-clamp-2 italic"
|
||||
title={agent.thought}
|
||||
{/* Log button */}
|
||||
{hasLogs && onShowLogs && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon-xs"
|
||||
onClick={() => onShowLogs(agent.agentIndex)}
|
||||
title={`View logs (${agent.logs?.length || 0} entries)`}
|
||||
>
|
||||
{agent.thought}
|
||||
</p>
|
||||
<ScrollText size={14} className="text-muted-foreground" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Feature info */}
|
||||
<div>
|
||||
<div className="text-xs text-muted-foreground mb-0.5">
|
||||
Feature #{agent.featureId}
|
||||
</div>
|
||||
<div className="text-sm font-medium truncate" title={agent.featureName}>
|
||||
{agent.featureName}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Thought bubble */}
|
||||
{agent.thought && (
|
||||
<div className="pt-2 border-t border-border/50">
|
||||
<div className="flex items-start gap-1.5">
|
||||
<MessageCircle size={14} className="text-primary shrink-0 mt-0.5" />
|
||||
<p
|
||||
className="text-xs text-muted-foreground line-clamp-2 italic"
|
||||
title={agent.thought}
|
||||
>
|
||||
{agent.thought}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -170,91 +163,76 @@ export function AgentLogModal({ agent, logs, onClose }: AgentLogModalProps) {
|
||||
const getLogColor = (type: AgentLogEntry['type']) => {
|
||||
switch (type) {
|
||||
case 'error':
|
||||
return 'text-neo-danger'
|
||||
return 'text-destructive'
|
||||
case 'state_change':
|
||||
return 'text-neo-progress'
|
||||
return 'text-primary'
|
||||
default:
|
||||
return 'text-neo-text'
|
||||
return 'text-foreground'
|
||||
}
|
||||
}
|
||||
|
||||
// Use portal to render modal at document body level (avoids overflow:hidden issues)
|
||||
return createPortal(
|
||||
<div
|
||||
className="fixed inset-0 flex items-center justify-center p-4 bg-black/50"
|
||||
style={{ zIndex: 9999 }}
|
||||
onClick={(e) => {
|
||||
// Close when clicking backdrop
|
||||
if (e.target === e.currentTarget) onClose()
|
||||
}}
|
||||
>
|
||||
<div className="neo-card w-full max-w-4xl max-h-[80vh] flex flex-col bg-neo-bg">
|
||||
<Card className="w-full max-w-4xl max-h-[80vh] flex flex-col py-0">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between p-4 border-b-3 border-neo-border">
|
||||
<div className="flex items-center justify-between p-4 border-b">
|
||||
<div className="flex items-center gap-3">
|
||||
<AgentAvatar name={agent.agentName} state={agent.state} size="sm" />
|
||||
<div>
|
||||
<div className="flex items-center gap-2">
|
||||
<h2 className="font-display font-bold text-lg">
|
||||
<h2 className="font-semibold text-lg">
|
||||
{agent.agentName} Logs
|
||||
</h2>
|
||||
<span
|
||||
className={`
|
||||
inline-flex items-center gap-1 px-1.5 py-0.5 text-[10px] font-bold
|
||||
uppercase tracking-wide rounded border
|
||||
${typeBadge.className}
|
||||
`}
|
||||
>
|
||||
<Badge variant="outline" className={`text-[10px] ${typeBadge.className}`}>
|
||||
<TypeIcon size={10} />
|
||||
{typeBadge.label}
|
||||
</span>
|
||||
</Badge>
|
||||
</div>
|
||||
<p className="text-sm text-neo-text-secondary">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Feature #{agent.featureId}: {agent.featureName}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={handleCopy}
|
||||
className="neo-button neo-button-sm flex items-center gap-1"
|
||||
title="Copy all logs"
|
||||
>
|
||||
<Button variant="outline" size="sm" onClick={handleCopy}>
|
||||
{copied ? <Check size={14} /> : <Copy size={14} />}
|
||||
{copied ? 'Copied!' : 'Copy'}
|
||||
</button>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="p-2 hover:bg-neo-bg-secondary rounded transition-colors"
|
||||
>
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon-sm" onClick={onClose}>
|
||||
<X size={20} />
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Log content */}
|
||||
<div className="flex-1 overflow-auto p-4 bg-neo-bg-secondary font-mono text-xs">
|
||||
{logs.length === 0 ? (
|
||||
<p className="text-neo-text-secondary italic">No logs available</p>
|
||||
) : (
|
||||
<div className="space-y-1">
|
||||
{logs.map((log, idx) => (
|
||||
<div className="flex-1 min-h-0 overflow-y-auto p-4 bg-muted/50">
|
||||
<div className="font-mono text-xs space-y-1">
|
||||
{logs.length === 0 ? (
|
||||
<p className="text-muted-foreground italic">No logs available</p>
|
||||
) : (
|
||||
logs.map((log, idx) => (
|
||||
<div key={idx} className={`${getLogColor(log.type)} whitespace-pre-wrap break-all`}>
|
||||
<span className="text-neo-muted">
|
||||
<span className="text-muted-foreground">
|
||||
[{new Date(log.timestamp).toLocaleTimeString()}]
|
||||
</span>{' '}
|
||||
{log.line}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="p-3 border-t-2 border-neo-border/30 text-xs text-neo-text-secondary">
|
||||
<div className="p-3 border-t text-xs text-muted-foreground">
|
||||
{logs.length} log entries
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>,
|
||||
document.body
|
||||
)
|
||||
|
||||
@@ -9,6 +9,8 @@ import { useNextScheduledRun } from '../hooks/useSchedules'
|
||||
import { formatNextRun, formatEndTime } from '../lib/timeUtils'
|
||||
import { ScheduleModal } from './ScheduleModal'
|
||||
import type { AgentStatus } from '../lib/types'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
|
||||
interface AgentControlProps {
|
||||
projectName: string
|
||||
@@ -30,18 +32,17 @@ export function AgentControl({ projectName, status }: AgentControlProps) {
|
||||
|
||||
const isLoading = startAgent.isPending || stopAgent.isPending
|
||||
const isRunning = status === 'running' || status === 'paused'
|
||||
const isLoadingStatus = status === 'loading' // Status unknown, waiting for WebSocket
|
||||
const isLoadingStatus = status === 'loading'
|
||||
const isParallel = concurrency > 1
|
||||
|
||||
const handleStart = () => startAgent.mutate({
|
||||
yoloMode,
|
||||
parallelMode: isParallel,
|
||||
maxConcurrency: concurrency, // Always pass concurrency (1-5)
|
||||
maxConcurrency: concurrency,
|
||||
testingAgentRatio: settings?.testing_agent_ratio,
|
||||
})
|
||||
const handleStop = () => stopAgent.mutate()
|
||||
|
||||
// Simplified: either show Start (when stopped/crashed), Stop (when running/paused), or loading spinner
|
||||
const isStopped = status === 'stopped' || status === 'crashed'
|
||||
|
||||
return (
|
||||
@@ -50,7 +51,7 @@ export function AgentControl({ projectName, status }: AgentControlProps) {
|
||||
{/* Concurrency slider - visible when stopped */}
|
||||
{isStopped && (
|
||||
<div className="flex items-center gap-2">
|
||||
<GitBranch size={16} className={isParallel ? 'text-[var(--color-neo-primary)]' : 'text-gray-400'} />
|
||||
<GitBranch size={16} className={isParallel ? 'text-primary' : 'text-muted-foreground'} />
|
||||
<input
|
||||
type="range"
|
||||
min={1}
|
||||
@@ -58,11 +59,11 @@ export function AgentControl({ projectName, status }: AgentControlProps) {
|
||||
value={concurrency}
|
||||
onChange={(e) => setConcurrency(Number(e.target.value))}
|
||||
disabled={isLoading}
|
||||
className="w-16 h-2 accent-[var(--color-neo-primary)] cursor-pointer"
|
||||
className="w-16 h-2 accent-primary cursor-pointer"
|
||||
title={`${concurrency} concurrent agent${concurrency > 1 ? 's' : ''}`}
|
||||
aria-label="Set number of concurrent agents"
|
||||
/>
|
||||
<span className="text-xs font-bold min-w-[1.5rem] text-center">
|
||||
<span className="text-xs font-semibold min-w-[1.5rem] text-center">
|
||||
{concurrency}x
|
||||
</span>
|
||||
</div>
|
||||
@@ -70,80 +71,71 @@ export function AgentControl({ projectName, status }: AgentControlProps) {
|
||||
|
||||
{/* Show concurrency indicator when running with multiple agents */}
|
||||
{isRunning && isParallel && (
|
||||
<div className="flex items-center gap-1 text-xs text-[var(--color-neo-primary)] font-bold">
|
||||
<Badge variant="secondary" className="gap-1">
|
||||
<GitBranch size={14} />
|
||||
<span>{concurrency}x</span>
|
||||
</div>
|
||||
{concurrency}x
|
||||
</Badge>
|
||||
)}
|
||||
|
||||
{/* Schedule status display */}
|
||||
{nextRun?.is_currently_running && nextRun.next_end && (
|
||||
<div className="flex items-center gap-2 text-sm text-[var(--color-neo-done)] font-bold">
|
||||
<Clock size={16} className="flex-shrink-0" />
|
||||
<span>Running until {formatEndTime(nextRun.next_end)}</span>
|
||||
</div>
|
||||
<Badge variant="default" className="gap-1">
|
||||
<Clock size={14} />
|
||||
Running until {formatEndTime(nextRun.next_end)}
|
||||
</Badge>
|
||||
)}
|
||||
|
||||
{!nextRun?.is_currently_running && nextRun?.next_start && (
|
||||
<div className="flex items-center gap-2 text-sm text-gray-900 dark:text-white font-bold">
|
||||
<Clock size={16} className="flex-shrink-0" />
|
||||
<span>Next: {formatNextRun(nextRun.next_start)}</span>
|
||||
</div>
|
||||
<Badge variant="secondary" className="gap-1">
|
||||
<Clock size={14} />
|
||||
Next: {formatNextRun(nextRun.next_start)}
|
||||
</Badge>
|
||||
)}
|
||||
|
||||
{/* Start/Stop button */}
|
||||
{isLoadingStatus ? (
|
||||
<button
|
||||
disabled
|
||||
className="neo-btn text-sm py-2 px-3 opacity-50 cursor-not-allowed"
|
||||
title="Loading agent status..."
|
||||
aria-label="Loading agent status"
|
||||
>
|
||||
<Button disabled variant="outline" size="sm">
|
||||
<Loader2 size={18} className="animate-spin" />
|
||||
</button>
|
||||
</Button>
|
||||
) : isStopped ? (
|
||||
<button
|
||||
<Button
|
||||
onClick={handleStart}
|
||||
disabled={isLoading}
|
||||
className={`neo-btn text-sm py-2 px-3 ${
|
||||
yoloMode ? 'neo-btn-yolo' : 'neo-btn-success'
|
||||
}`}
|
||||
variant={yoloMode ? 'secondary' : 'default'}
|
||||
size="sm"
|
||||
title={yoloMode ? 'Start Agent (YOLO Mode)' : 'Start Agent'}
|
||||
aria-label={yoloMode ? 'Start Agent in YOLO Mode' : 'Start Agent'}
|
||||
>
|
||||
{isLoading ? (
|
||||
<Loader2 size={18} className="animate-spin" />
|
||||
) : (
|
||||
<Play size={18} />
|
||||
)}
|
||||
</button>
|
||||
</Button>
|
||||
) : (
|
||||
<button
|
||||
<Button
|
||||
onClick={handleStop}
|
||||
disabled={isLoading}
|
||||
className={`neo-btn text-sm py-2 px-3 ${
|
||||
yoloMode ? 'neo-btn-yolo' : 'neo-btn-danger'
|
||||
}`}
|
||||
variant="destructive"
|
||||
size="sm"
|
||||
title={yoloMode ? 'Stop Agent (YOLO Mode)' : 'Stop Agent'}
|
||||
aria-label={yoloMode ? 'Stop Agent in YOLO Mode' : 'Stop Agent'}
|
||||
>
|
||||
{isLoading ? (
|
||||
<Loader2 size={18} className="animate-spin" />
|
||||
) : (
|
||||
<Square size={18} />
|
||||
)}
|
||||
</button>
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{/* Clock button to open schedule modal */}
|
||||
<button
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setShowScheduleModal(true)}
|
||||
className="neo-btn text-sm py-2 px-3"
|
||||
title="Manage schedules"
|
||||
aria-label="Manage agent schedules"
|
||||
>
|
||||
<Clock size={18} />
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Schedule Modal */}
|
||||
|
||||
@@ -4,6 +4,9 @@ import { AgentCard, AgentLogModal } from './AgentCard'
|
||||
import { ActivityFeed } from './ActivityFeed'
|
||||
import { OrchestratorStatusCard } from './OrchestratorStatusCard'
|
||||
import type { ActiveAgent, AgentLogEntry, OrchestratorStatus } from '../lib/types'
|
||||
import { Card, CardContent } from '@/components/ui/card'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Button } from '@/components/ui/button'
|
||||
|
||||
const ACTIVITY_COLLAPSED_KEY = 'autocoder-activity-collapsed'
|
||||
|
||||
@@ -35,7 +38,6 @@ export function AgentMissionControl({
|
||||
return false
|
||||
}
|
||||
})
|
||||
// State for log modal
|
||||
const [selectedAgentForLogs, setSelectedAgentForLogs] = useState<ActiveAgent | null>(null)
|
||||
|
||||
const toggleActivityCollapsed = () => {
|
||||
@@ -54,18 +56,18 @@ export function AgentMissionControl({
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="neo-card mb-6 overflow-hidden">
|
||||
<Card className="mb-6 overflow-hidden py-0">
|
||||
{/* Header */}
|
||||
<button
|
||||
onClick={() => setIsExpanded(!isExpanded)}
|
||||
className="w-full flex items-center justify-between px-4 py-3 bg-[var(--color-neo-progress)] hover:brightness-105 transition-all"
|
||||
className="w-full flex items-center justify-between px-4 py-3 bg-primary hover:bg-primary/90 transition-colors"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<Rocket size={20} className="text-neo-text-on-bright" />
|
||||
<span className="font-display font-bold text-neo-text-on-bright uppercase tracking-wide">
|
||||
<Rocket size={20} className="text-primary-foreground" />
|
||||
<span className="font-semibold text-primary-foreground uppercase tracking-wide">
|
||||
Mission Control
|
||||
</span>
|
||||
<span className="neo-badge neo-badge-sm bg-white text-neo-text ml-2">
|
||||
<Badge variant="secondary" className="ml-2">
|
||||
{agents.length > 0
|
||||
? `${agents.length} ${agents.length === 1 ? 'agent' : 'agents'} active`
|
||||
: orchestratorStatus?.state === 'initializing'
|
||||
@@ -74,12 +76,12 @@ export function AgentMissionControl({
|
||||
? 'Complete'
|
||||
: 'Orchestrating'
|
||||
}
|
||||
</span>
|
||||
</Badge>
|
||||
</div>
|
||||
{isExpanded ? (
|
||||
<ChevronUp size={20} className="text-neo-text-on-bright" />
|
||||
<ChevronUp size={20} className="text-primary-foreground" />
|
||||
) : (
|
||||
<ChevronDown size={20} className="text-neo-text-on-bright" />
|
||||
<ChevronDown size={20} className="text-primary-foreground" />
|
||||
)}
|
||||
</button>
|
||||
|
||||
@@ -90,7 +92,7 @@ export function AgentMissionControl({
|
||||
${isExpanded ? 'max-h-[600px] opacity-100' : 'max-h-0 opacity-0'}
|
||||
`}
|
||||
>
|
||||
<div className="p-4">
|
||||
<CardContent className="p-4">
|
||||
{/* Orchestrator Status Card */}
|
||||
{orchestratorStatus && (
|
||||
<OrchestratorStatusCard status={orchestratorStatus} />
|
||||
@@ -98,7 +100,7 @@ export function AgentMissionControl({
|
||||
|
||||
{/* Agent Cards Row */}
|
||||
{agents.length > 0 && (
|
||||
<div className="flex gap-4 overflow-x-auto pb-4 scrollbar-thin">
|
||||
<div className="flex gap-4 overflow-x-auto pb-4">
|
||||
{agents.map((agent) => (
|
||||
<AgentCard
|
||||
key={`agent-${agent.agentIndex}`}
|
||||
@@ -116,24 +118,26 @@ export function AgentMissionControl({
|
||||
|
||||
{/* Collapsible Activity Feed */}
|
||||
{recentActivity.length > 0 && (
|
||||
<div className="mt-4 pt-4 border-t-2 border-neo-border/30">
|
||||
<button
|
||||
<div className="mt-4 pt-4 border-t">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={toggleActivityCollapsed}
|
||||
className="flex items-center gap-2 mb-2 hover:opacity-80 transition-opacity"
|
||||
className="gap-2 mb-2 h-auto p-1"
|
||||
>
|
||||
<Activity size={14} className="text-neo-text-secondary" />
|
||||
<span className="text-xs font-bold text-neo-text-secondary uppercase tracking-wide">
|
||||
<Activity size={14} className="text-muted-foreground" />
|
||||
<span className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">
|
||||
Recent Activity
|
||||
</span>
|
||||
<span className="text-xs text-neo-muted">
|
||||
<span className="text-xs text-muted-foreground">
|
||||
({recentActivity.length})
|
||||
</span>
|
||||
{activityCollapsed ? (
|
||||
<ChevronDown size={14} className="text-neo-text-secondary" />
|
||||
<ChevronDown size={14} className="text-muted-foreground" />
|
||||
) : (
|
||||
<ChevronUp size={14} className="text-neo-text-secondary" />
|
||||
<ChevronUp size={14} className="text-muted-foreground" />
|
||||
)}
|
||||
</button>
|
||||
</Button>
|
||||
<div
|
||||
className={`
|
||||
transition-all duration-200 ease-out overflow-hidden
|
||||
@@ -144,7 +148,7 @@ export function AgentMissionControl({
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</div>
|
||||
|
||||
{/* Log Modal */}
|
||||
@@ -155,6 +159,6 @@ export function AgentMissionControl({
|
||||
onClose={() => setSelectedAgentForLogs(null)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { useMemo, useState, useEffect } from 'react'
|
||||
import { Brain, Sparkles } from 'lucide-react'
|
||||
import type { AgentStatus } from '../lib/types'
|
||||
import { Card } from '@/components/ui/card'
|
||||
|
||||
interface AgentThoughtProps {
|
||||
logs: Array<{ line: string; timestamp: string }>
|
||||
@@ -105,38 +106,25 @@ export function AgentThought({ logs, agentStatus }: AgentThoughtProps) {
|
||||
${shouldShow ? 'opacity-100 max-h-20' : 'opacity-0 max-h-0'}
|
||||
`}
|
||||
>
|
||||
<div
|
||||
className={`
|
||||
relative
|
||||
bg-[var(--color-neo-card)]
|
||||
border-3 border-[var(--color-neo-border)]
|
||||
shadow-[var(--shadow-neo-sm)]
|
||||
px-4 py-3
|
||||
flex items-center gap-3
|
||||
${isRunning ? 'animate-pulse-neo' : ''}
|
||||
`}
|
||||
>
|
||||
<Card className={`relative px-4 py-3 flex items-center gap-3 ${isRunning ? 'animate-pulse' : ''}`}>
|
||||
{/* Brain Icon with subtle glow */}
|
||||
<div className="relative shrink-0">
|
||||
<Brain
|
||||
size={22}
|
||||
className="text-[var(--color-neo-progress)]"
|
||||
className="text-primary"
|
||||
strokeWidth={2.5}
|
||||
/>
|
||||
{isRunning && (
|
||||
<Sparkles
|
||||
size={10}
|
||||
className="absolute -top-1 -right-1 text-[var(--color-neo-pending)] animate-pulse"
|
||||
className="absolute -top-1 -right-1 text-yellow-500 animate-pulse"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Thought text with fade transition + shimmer effect when running */}
|
||||
{/* Thought text with fade transition */}
|
||||
<p
|
||||
className={`
|
||||
font-mono text-sm truncate transition-all duration-150 ease-out
|
||||
${isRunning ? 'animate-shimmer' : 'text-[var(--color-neo-text)]'}
|
||||
`}
|
||||
className="font-mono text-sm truncate transition-all duration-150 ease-out text-foreground"
|
||||
style={{
|
||||
opacity: textVisible ? 1 : 0,
|
||||
transform: textVisible ? 'translateY(0)' : 'translateY(-4px)',
|
||||
@@ -147,14 +135,11 @@ export function AgentThought({ logs, agentStatus }: AgentThoughtProps) {
|
||||
|
||||
{/* Subtle running indicator bar */}
|
||||
{isRunning && (
|
||||
<div className="absolute bottom-0 left-0 right-0 h-0.5 bg-[var(--color-neo-progress)] opacity-50">
|
||||
<div
|
||||
className="h-full bg-[var(--color-neo-progress)] animate-pulse"
|
||||
style={{ width: '100%' }}
|
||||
/>
|
||||
<div className="absolute bottom-0 left-0 right-0 h-0.5 bg-primary/50">
|
||||
<div className="h-full bg-primary animate-pulse" style={{ width: '100%' }} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -12,6 +12,8 @@ import { useAssistantChat } from '../hooks/useAssistantChat'
|
||||
import { ChatMessage as ChatMessageComponent } from './ChatMessage'
|
||||
import { ConversationHistory } from './ConversationHistory'
|
||||
import type { ChatMessage } from '../lib/types'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Textarea } from '@/components/ui/textarea'
|
||||
|
||||
interface AssistantChatProps {
|
||||
projectName: string
|
||||
@@ -167,28 +169,28 @@ export function AssistantChat({
|
||||
return (
|
||||
<div className="flex flex-col h-full">
|
||||
{/* Header with actions and connection status */}
|
||||
<div className="flex items-center justify-between px-4 py-2 border-b-2 border-[var(--color-neo-border)] bg-[var(--color-neo-bg)]">
|
||||
<div className="flex items-center justify-between px-4 py-2 border-b border-border bg-background">
|
||||
{/* Action buttons */}
|
||||
<div className="flex items-center gap-1 relative">
|
||||
<button
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={handleNewChat}
|
||||
className="neo-btn neo-btn-ghost p-1.5 text-[var(--color-neo-text-secondary)] hover:text-[var(--color-neo-text)]"
|
||||
className="h-8 w-8"
|
||||
title="New conversation"
|
||||
disabled={isLoading}
|
||||
>
|
||||
<Plus size={16} />
|
||||
</button>
|
||||
<button
|
||||
</Button>
|
||||
<Button
|
||||
variant={showHistory ? 'secondary' : 'ghost'}
|
||||
size="icon"
|
||||
onClick={() => setShowHistory(!showHistory)}
|
||||
className={`neo-btn neo-btn-ghost p-1.5 ${
|
||||
showHistory
|
||||
? 'text-[var(--color-neo-text)] bg-[var(--color-neo-pending)]'
|
||||
: 'text-[var(--color-neo-text-secondary)] hover:text-[var(--color-neo-text)]'
|
||||
}`}
|
||||
className="h-8 w-8"
|
||||
title="Conversation history"
|
||||
>
|
||||
<History size={16} />
|
||||
</button>
|
||||
</Button>
|
||||
|
||||
{/* History dropdown */}
|
||||
<ConversationHistory
|
||||
@@ -204,34 +206,34 @@ export function AssistantChat({
|
||||
<div className="flex items-center gap-2">
|
||||
{connectionStatus === 'connected' ? (
|
||||
<>
|
||||
<Wifi size={14} className="text-[var(--color-neo-done)]" />
|
||||
<span className="text-xs text-[var(--color-neo-text-secondary)]">Connected</span>
|
||||
<Wifi size={14} className="text-green-500" />
|
||||
<span className="text-xs text-muted-foreground">Connected</span>
|
||||
</>
|
||||
) : connectionStatus === 'connecting' ? (
|
||||
<>
|
||||
<Loader2 size={14} className="text-[var(--color-neo-progress)] animate-spin" />
|
||||
<span className="text-xs text-[var(--color-neo-text-secondary)]">Connecting...</span>
|
||||
<Loader2 size={14} className="text-primary animate-spin" />
|
||||
<span className="text-xs text-muted-foreground">Connecting...</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<WifiOff size={14} className="text-[var(--color-neo-danger)]" />
|
||||
<span className="text-xs text-[var(--color-neo-text-secondary)]">Disconnected</span>
|
||||
<WifiOff size={14} className="text-destructive" />
|
||||
<span className="text-xs text-muted-foreground">Disconnected</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Messages area */}
|
||||
<div className="flex-1 overflow-y-auto bg-[var(--color-neo-bg)]">
|
||||
<div className="flex-1 overflow-y-auto bg-background">
|
||||
{isLoadingConversation ? (
|
||||
<div className="flex items-center justify-center h-full text-[var(--color-neo-text-secondary)] text-sm">
|
||||
<div className="flex items-center justify-center h-full text-muted-foreground text-sm">
|
||||
<div className="flex items-center gap-2">
|
||||
<Loader2 size={16} className="animate-spin" />
|
||||
<span>Loading conversation...</span>
|
||||
</div>
|
||||
</div>
|
||||
) : displayMessages.length === 0 ? (
|
||||
<div className="flex items-center justify-center h-full text-[var(--color-neo-text-secondary)] text-sm">
|
||||
<div className="flex items-center justify-center h-full text-muted-foreground text-sm">
|
||||
{isLoading ? (
|
||||
<div className="flex items-center gap-2">
|
||||
<Loader2 size={16} className="animate-spin" />
|
||||
@@ -253,12 +255,12 @@ export function AssistantChat({
|
||||
|
||||
{/* Loading indicator */}
|
||||
{isLoading && displayMessages.length > 0 && (
|
||||
<div className="px-4 py-2 border-t-2 border-[var(--color-neo-border)] bg-[var(--color-neo-bg)]">
|
||||
<div className="flex items-center gap-2 text-[var(--color-neo-text-secondary)] text-sm">
|
||||
<div className="px-4 py-2 border-t border-border bg-background">
|
||||
<div className="flex items-center gap-2 text-muted-foreground text-sm">
|
||||
<div className="flex gap-1">
|
||||
<span className="w-2 h-2 bg-[var(--color-neo-progress)] rounded-full animate-bounce" style={{ animationDelay: '0ms' }} />
|
||||
<span className="w-2 h-2 bg-[var(--color-neo-progress)] rounded-full animate-bounce" style={{ animationDelay: '150ms' }} />
|
||||
<span className="w-2 h-2 bg-[var(--color-neo-progress)] rounded-full animate-bounce" style={{ animationDelay: '300ms' }} />
|
||||
<span className="w-2 h-2 bg-primary rounded-full animate-bounce" style={{ animationDelay: '0ms' }} />
|
||||
<span className="w-2 h-2 bg-primary rounded-full animate-bounce" style={{ animationDelay: '150ms' }} />
|
||||
<span className="w-2 h-2 bg-primary rounded-full animate-bounce" style={{ animationDelay: '300ms' }} />
|
||||
</div>
|
||||
<span>Thinking...</span>
|
||||
</div>
|
||||
@@ -266,33 +268,21 @@ export function AssistantChat({
|
||||
)}
|
||||
|
||||
{/* Input area */}
|
||||
<div className="border-t-3 border-[var(--color-neo-border)] p-4 bg-[var(--color-neo-card)]">
|
||||
<div className="border-t border-border p-4 bg-card">
|
||||
<div className="flex gap-2">
|
||||
<textarea
|
||||
<Textarea
|
||||
ref={inputRef}
|
||||
value={inputValue}
|
||||
onChange={(e) => setInputValue(e.target.value)}
|
||||
onKeyDown={handleKeyDown}
|
||||
placeholder="Ask about the codebase..."
|
||||
disabled={isLoading || isLoadingConversation || connectionStatus !== 'connected'}
|
||||
className="
|
||||
flex-1
|
||||
neo-input
|
||||
resize-none
|
||||
min-h-[44px]
|
||||
max-h-[120px]
|
||||
py-2.5
|
||||
"
|
||||
className="flex-1 resize-none min-h-[44px] max-h-[120px]"
|
||||
rows={1}
|
||||
/>
|
||||
<button
|
||||
<Button
|
||||
onClick={handleSend}
|
||||
disabled={!inputValue.trim() || isLoading || isLoadingConversation || connectionStatus !== 'connected'}
|
||||
className="
|
||||
neo-btn neo-btn-primary
|
||||
px-4
|
||||
disabled:opacity-50 disabled:cursor-not-allowed
|
||||
"
|
||||
title="Send message"
|
||||
>
|
||||
{isLoading ? (
|
||||
@@ -300,9 +290,9 @@ export function AssistantChat({
|
||||
) : (
|
||||
<Send size={18} />
|
||||
)}
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
<p className="text-xs text-[var(--color-neo-text-secondary)] mt-2">
|
||||
<p className="text-xs text-muted-foreground mt-2">
|
||||
Press Enter to send, Shift+Enter for new line
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -3,6 +3,7 @@
|
||||
*/
|
||||
|
||||
import { MessageCircle, X } from 'lucide-react'
|
||||
import { Button } from '@/components/ui/button'
|
||||
|
||||
interface AssistantFABProps {
|
||||
onClick: () => void
|
||||
@@ -11,24 +12,14 @@ interface AssistantFABProps {
|
||||
|
||||
export function AssistantFAB({ onClick, isOpen }: AssistantFABProps) {
|
||||
return (
|
||||
<button
|
||||
<Button
|
||||
onClick={onClick}
|
||||
className={`
|
||||
fixed bottom-6 right-6 z-50
|
||||
w-14 h-14
|
||||
flex items-center justify-center
|
||||
bg-[var(--color-neo-progress)] text-[var(--color-neo-text-on-bright)]
|
||||
border-3 border-[var(--color-neo-border)]
|
||||
shadow-neo-md
|
||||
transition-all duration-200
|
||||
hover:shadow-neo-lg hover:-translate-y-0.5
|
||||
active:shadow-neo-sm active:translate-y-0.5
|
||||
${isOpen ? 'rotate-0' : ''}
|
||||
`}
|
||||
size="icon"
|
||||
className="fixed bottom-6 right-6 z-50 w-14 h-14 rounded-full shadow-lg hover:shadow-xl transition-all duration-200 hover:-translate-y-0.5 active:translate-y-0.5"
|
||||
title={isOpen ? 'Close Assistant (Press A)' : 'Open Assistant (Press A)'}
|
||||
aria-label={isOpen ? 'Close Assistant' : 'Open Assistant'}
|
||||
>
|
||||
{isOpen ? <X size={24} /> : <MessageCircle size={24} />}
|
||||
</button>
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -11,6 +11,7 @@ import { X, Bot } from 'lucide-react'
|
||||
import { AssistantChat } from './AssistantChat'
|
||||
import { useConversation } from '../hooks/useConversations'
|
||||
import type { ChatMessage } from '../lib/types'
|
||||
import { Button } from '@/components/ui/button'
|
||||
|
||||
interface AssistantPanelProps {
|
||||
projectName: string
|
||||
@@ -103,45 +104,37 @@ export function AssistantPanel({ projectName, isOpen, onClose }: AssistantPanelP
|
||||
className={`
|
||||
fixed right-0 top-0 bottom-0 z-50
|
||||
w-[400px] max-w-[90vw]
|
||||
bg-neo-card
|
||||
border-l-4 border-[var(--color-neo-border)]
|
||||
bg-card
|
||||
border-l border-border
|
||||
transform transition-transform duration-300 ease-out
|
||||
flex flex-col
|
||||
flex flex-col shadow-xl
|
||||
${isOpen ? 'translate-x-0' : 'translate-x-full'}
|
||||
`}
|
||||
style={{ boxShadow: 'var(--shadow-neo-left-lg)' }}
|
||||
role="dialog"
|
||||
aria-label="Project Assistant"
|
||||
aria-hidden={!isOpen}
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between px-4 py-3 border-b-3 border-neo-border bg-neo-progress">
|
||||
<div className="flex items-center justify-between px-4 py-3 border-b border-border bg-primary text-primary-foreground">
|
||||
<div className="flex items-center gap-2">
|
||||
<div
|
||||
className="bg-neo-card border-2 border-neo-border p-1.5"
|
||||
style={{ boxShadow: 'var(--shadow-neo-sm)' }}
|
||||
>
|
||||
<div className="bg-card text-foreground border border-border p-1.5 rounded">
|
||||
<Bot size={18} />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="font-display font-bold text-neo-text-on-bright">Project Assistant</h2>
|
||||
<p className="text-xs text-neo-text-on-bright opacity-80 font-mono">{projectName}</p>
|
||||
<h2 className="font-semibold">Project Assistant</h2>
|
||||
<p className="text-xs opacity-80 font-mono">{projectName}</p>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={onClose}
|
||||
className="
|
||||
neo-btn neo-btn-ghost
|
||||
p-2
|
||||
bg-[var(--color-neo-card)] border-[var(--color-neo-border)]
|
||||
hover:bg-[var(--color-neo-bg)]
|
||||
text-[var(--color-neo-text)]
|
||||
"
|
||||
className="text-primary-foreground hover:bg-primary-foreground/20"
|
||||
title="Close Assistant (Press A)"
|
||||
aria-label="Close Assistant"
|
||||
>
|
||||
<X size={18} />
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Chat area */}
|
||||
|
||||
@@ -2,6 +2,7 @@ import { useCallback, useEffect, useState } from 'react'
|
||||
import { Sparkles, PartyPopper } from 'lucide-react'
|
||||
import { AgentAvatar } from './AgentAvatar'
|
||||
import type { AgentMascot } from '../lib/types'
|
||||
import { Card, CardContent } from '@/components/ui/card'
|
||||
|
||||
interface CelebrationOverlayProps {
|
||||
agentName: AgentMascot | 'Unknown'
|
||||
@@ -80,17 +81,18 @@ export function CelebrationOverlay({ agentName, featureName, onComplete }: Celeb
|
||||
</div>
|
||||
|
||||
{/* Celebration card - click to dismiss */}
|
||||
<button
|
||||
type="button"
|
||||
<Card
|
||||
onClick={dismiss}
|
||||
className="neo-card p-6 bg-[var(--color-neo-done)] animate-bounce-in pointer-events-auto cursor-pointer hover:scale-105 transition-transform focus:outline-none focus:ring-2 focus:ring-neo-accent"
|
||||
className="p-6 bg-green-500 border-green-600 animate-bounce-in pointer-events-auto cursor-pointer hover:scale-105 transition-transform focus:outline-none focus:ring-2 focus:ring-primary"
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
>
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
<CardContent className="p-0 flex flex-col items-center gap-4">
|
||||
{/* Icons */}
|
||||
<div className="flex items-center gap-2">
|
||||
<Sparkles size={24} className="text-neo-pending animate-pulse" />
|
||||
<PartyPopper size={28} className="text-neo-accent" />
|
||||
<Sparkles size={24} className="text-neo-pending animate-pulse" />
|
||||
<Sparkles size={24} className="text-yellow-300 animate-pulse" />
|
||||
<PartyPopper size={28} className="text-white" />
|
||||
<Sparkles size={24} className="text-yellow-300 animate-pulse" />
|
||||
</div>
|
||||
|
||||
{/* Avatar celebrating */}
|
||||
@@ -98,23 +100,23 @@ export function CelebrationOverlay({ agentName, featureName, onComplete }: Celeb
|
||||
|
||||
{/* Message */}
|
||||
<div className="text-center">
|
||||
<h3 className="font-display text-lg font-bold text-neo-text-on-bright mb-1">
|
||||
<h3 className="font-display text-lg font-bold text-white mb-1">
|
||||
Feature Complete!
|
||||
</h3>
|
||||
<p className="text-sm text-neo-text-on-bright/80 max-w-[200px] truncate">
|
||||
<p className="text-sm text-white/80 max-w-[200px] truncate">
|
||||
{featureName}
|
||||
</p>
|
||||
<p className="text-xs text-neo-text-on-bright/60 mt-2">
|
||||
<p className="text-xs text-white/60 mt-2">
|
||||
Great job, {agentName}!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Dismiss hint */}
|
||||
<p className="text-xs text-neo-text-on-bright/40 mt-1">
|
||||
<p className="text-xs text-white/40 mt-1">
|
||||
Click or press Esc to dismiss
|
||||
</p>
|
||||
</div>
|
||||
</button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -2,12 +2,13 @@
|
||||
* Chat Message Component
|
||||
*
|
||||
* Displays a single message in the spec creation chat.
|
||||
* Supports user, assistant, and system messages with neobrutalism styling.
|
||||
* Supports user, assistant, and system messages with clean styling.
|
||||
*/
|
||||
|
||||
import { memo } from 'react'
|
||||
import { Bot, User, Info } from 'lucide-react'
|
||||
import type { ChatMessage as ChatMessageType } from '../lib/types'
|
||||
import { Card } from '@/components/ui/card'
|
||||
|
||||
interface ChatMessageProps {
|
||||
message: ChatMessageType
|
||||
@@ -25,37 +26,34 @@ export const ChatMessage = memo(function ChatMessage({ message }: ChatMessagePro
|
||||
minute: '2-digit',
|
||||
})
|
||||
|
||||
// Role-specific styling using CSS variables for theme consistency
|
||||
// Role-specific styling
|
||||
const roleConfig = {
|
||||
user: {
|
||||
icon: User,
|
||||
bgColor: 'bg-[var(--color-neo-pending)]',
|
||||
textColor: 'text-[var(--color-neo-text-on-bright)]',
|
||||
borderColor: 'border-[var(--color-neo-border)]',
|
||||
bgColor: 'bg-primary',
|
||||
textColor: 'text-primary-foreground',
|
||||
align: 'justify-end',
|
||||
bubbleAlign: 'items-end',
|
||||
iconBg: 'bg-[var(--color-neo-pending)]',
|
||||
shadow: 'var(--shadow-neo-md)',
|
||||
iconBg: 'bg-primary',
|
||||
iconColor: 'text-primary-foreground',
|
||||
},
|
||||
assistant: {
|
||||
icon: Bot,
|
||||
bgColor: 'bg-[var(--color-neo-card)]',
|
||||
textColor: 'text-[var(--color-neo-text)]',
|
||||
borderColor: 'border-[var(--color-neo-border)]',
|
||||
bgColor: 'bg-muted',
|
||||
textColor: 'text-foreground',
|
||||
align: 'justify-start',
|
||||
bubbleAlign: 'items-start',
|
||||
iconBg: 'bg-[var(--color-neo-progress)]',
|
||||
shadow: 'var(--shadow-neo-md)',
|
||||
iconBg: 'bg-secondary',
|
||||
iconColor: 'text-secondary-foreground',
|
||||
},
|
||||
system: {
|
||||
icon: Info,
|
||||
bgColor: 'bg-[var(--color-neo-done)]',
|
||||
textColor: 'text-[var(--color-neo-text-on-bright)]',
|
||||
borderColor: 'border-[var(--color-neo-border)]',
|
||||
bgColor: 'bg-green-100 dark:bg-green-900/30',
|
||||
textColor: 'text-green-900 dark:text-green-100',
|
||||
align: 'justify-center',
|
||||
bubbleAlign: 'items-center',
|
||||
iconBg: 'bg-[var(--color-neo-done)]',
|
||||
shadow: 'var(--shadow-neo-sm)',
|
||||
iconBg: 'bg-green-500',
|
||||
iconColor: 'text-white',
|
||||
},
|
||||
}
|
||||
|
||||
@@ -66,15 +64,7 @@ export const ChatMessage = memo(function ChatMessage({ message }: ChatMessagePro
|
||||
if (role === 'system') {
|
||||
return (
|
||||
<div className={`flex ${config.align} px-4 py-2`}>
|
||||
<div
|
||||
className={`
|
||||
${config.bgColor}
|
||||
border-2 ${config.borderColor}
|
||||
px-4 py-2
|
||||
text-sm font-mono text-[var(--color-neo-text-on-bright)]
|
||||
`}
|
||||
style={{ boxShadow: 'var(--shadow-neo-sm)' }}
|
||||
>
|
||||
<div className={`${config.bgColor} border border-border rounded-lg px-4 py-2 text-sm font-mono ${config.textColor}`}>
|
||||
<span className="flex items-center gap-2">
|
||||
<Icon size={14} />
|
||||
{content}
|
||||
@@ -90,28 +80,12 @@ export const ChatMessage = memo(function ChatMessage({ message }: ChatMessagePro
|
||||
{/* Message bubble */}
|
||||
<div className="flex items-start gap-2">
|
||||
{role === 'assistant' && (
|
||||
<div
|
||||
className={`
|
||||
${config.iconBg}
|
||||
border-2 border-[var(--color-neo-border)]
|
||||
p-1.5
|
||||
flex-shrink-0
|
||||
`}
|
||||
style={{ boxShadow: 'var(--shadow-neo-sm)' }}
|
||||
>
|
||||
<Icon size={16} className="text-[var(--color-neo-text-on-bright)]" />
|
||||
<div className={`${config.iconBg} p-1.5 rounded flex-shrink-0`}>
|
||||
<Icon size={16} className={config.iconColor} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div
|
||||
className={`
|
||||
${config.bgColor}
|
||||
border-3 ${config.borderColor}
|
||||
px-4 py-3
|
||||
${isStreaming ? 'animate-pulse-neo' : ''}
|
||||
`}
|
||||
style={{ boxShadow: config.shadow }}
|
||||
>
|
||||
<Card className={`${config.bgColor} px-4 py-3 border ${isStreaming ? 'animate-pulse' : ''}`}>
|
||||
{/* Parse content for basic markdown-like formatting */}
|
||||
{content && (
|
||||
<div className={`whitespace-pre-wrap text-sm leading-relaxed ${config.textColor}`}>
|
||||
@@ -152,19 +126,15 @@ export const ChatMessage = memo(function ChatMessage({ message }: ChatMessagePro
|
||||
{attachments && attachments.length > 0 && (
|
||||
<div className={`flex flex-wrap gap-2 ${content ? 'mt-3' : ''}`}>
|
||||
{attachments.map((attachment) => (
|
||||
<div
|
||||
key={attachment.id}
|
||||
className="border-2 border-[var(--color-neo-border)] p-1 bg-[var(--color-neo-card)]"
|
||||
style={{ boxShadow: 'var(--shadow-neo-sm)' }}
|
||||
>
|
||||
<div key={attachment.id} className="border border-border rounded p-1 bg-card">
|
||||
<img
|
||||
src={attachment.previewUrl}
|
||||
alt={attachment.filename}
|
||||
className="max-w-48 max-h-48 object-contain cursor-pointer hover:opacity-90 transition-opacity"
|
||||
className="max-w-48 max-h-48 object-contain cursor-pointer hover:opacity-90 transition-opacity rounded"
|
||||
onClick={() => window.open(attachment.previewUrl, '_blank')}
|
||||
title={`${attachment.filename} (click to enlarge)`}
|
||||
/>
|
||||
<span className="text-xs text-[var(--color-neo-text-secondary)] block mt-1 text-center">
|
||||
<span className="text-xs text-muted-foreground block mt-1 text-center">
|
||||
{attachment.filename}
|
||||
</span>
|
||||
</div>
|
||||
@@ -174,27 +144,19 @@ export const ChatMessage = memo(function ChatMessage({ message }: ChatMessagePro
|
||||
|
||||
{/* Streaming indicator */}
|
||||
{isStreaming && (
|
||||
<span className="inline-block w-2 h-4 bg-[var(--color-neo-accent)] ml-1 animate-pulse" />
|
||||
<span className="inline-block w-2 h-4 bg-primary ml-1 animate-pulse rounded" />
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{role === 'user' && (
|
||||
<div
|
||||
className={`
|
||||
${config.iconBg}
|
||||
border-2 border-[var(--color-neo-border)]
|
||||
p-1.5
|
||||
flex-shrink-0
|
||||
`}
|
||||
style={{ boxShadow: 'var(--shadow-neo-sm)' }}
|
||||
>
|
||||
<Icon size={16} className="text-[var(--color-neo-text-on-bright)]" />
|
||||
<div className={`${config.iconBg} p-1.5 rounded flex-shrink-0`}>
|
||||
<Icon size={16} className={config.iconColor} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Timestamp */}
|
||||
<span className="text-xs text-[var(--color-neo-text-secondary)] font-mono px-2">
|
||||
<span className="text-xs text-muted-foreground font-mono px-2">
|
||||
{timeString}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@@ -1,12 +1,21 @@
|
||||
/**
|
||||
* ConfirmDialog Component
|
||||
*
|
||||
* A reusable confirmation dialog following the neobrutalism design system.
|
||||
* A reusable confirmation dialog using ShadCN Dialog components.
|
||||
* Used to confirm destructive actions like deleting projects.
|
||||
*/
|
||||
|
||||
import type { ReactNode } from 'react'
|
||||
import { AlertTriangle, X } from 'lucide-react'
|
||||
import { AlertTriangle } from 'lucide-react'
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog'
|
||||
import { Button } from '@/components/ui/button'
|
||||
|
||||
interface ConfirmDialogProps {
|
||||
isOpen: boolean
|
||||
@@ -31,74 +40,39 @@ export function ConfirmDialog({
|
||||
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)]">
|
||||
<Dialog open={isOpen} onOpenChange={(open) => !open && onCancel()}>
|
||||
<DialogContent className="sm:max-w-md">
|
||||
<DialogHeader>
|
||||
<div className="flex items-center gap-3">
|
||||
<div
|
||||
className="p-2 border-2 border-[var(--color-neo-border)]"
|
||||
style={{ boxShadow: 'var(--shadow-neo-sm)', backgroundColor: colors.icon }}
|
||||
className={`p-2 rounded-lg ${
|
||||
variant === 'danger'
|
||||
? 'bg-destructive/10 text-destructive'
|
||||
: 'bg-primary/10 text-primary'
|
||||
}`}
|
||||
>
|
||||
<AlertTriangle size={20} className="text-[var(--color-neo-text-on-bright)]" />
|
||||
<AlertTriangle size={20} />
|
||||
</div>
|
||||
<h2 className="font-display font-bold text-lg text-[var(--color-neo-text)]">
|
||||
{title}
|
||||
</h2>
|
||||
<DialogTitle>{title}</DialogTitle>
|
||||
</div>
|
||||
<button
|
||||
onClick={onCancel}
|
||||
className="neo-btn neo-btn-ghost p-2"
|
||||
</DialogHeader>
|
||||
<DialogDescription asChild>
|
||||
<div className="text-muted-foreground">{message}</div>
|
||||
</DialogDescription>
|
||||
<DialogFooter className="gap-2 sm:gap-0">
|
||||
<Button variant="outline" onClick={onCancel} disabled={isLoading}>
|
||||
{cancelLabel}
|
||||
</Button>
|
||||
<Button
|
||||
variant={variant === 'danger' ? 'destructive' : 'default'}
|
||||
onClick={onConfirm}
|
||||
disabled={isLoading}
|
||||
>
|
||||
<X size={20} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="p-6">
|
||||
<div className="text-[var(--color-neo-text-secondary)] mb-6">
|
||||
{message}
|
||||
</div>
|
||||
|
||||
{/* 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>
|
||||
{isLoading ? 'Deleting...' : confirmLabel}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -10,6 +10,8 @@ import { MessageSquare, Trash2, Loader2, AlertCircle } from 'lucide-react'
|
||||
import { useConversations, useDeleteConversation } from '../hooks/useConversations'
|
||||
import { ConfirmDialog } from './ConfirmDialog'
|
||||
import type { AssistantConversation } from '../lib/types'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Card, CardContent, CardHeader } from '@/components/ui/card'
|
||||
|
||||
interface ConversationHistoryProps {
|
||||
projectName: string
|
||||
@@ -116,78 +118,73 @@ export function ConversationHistory({
|
||||
/>
|
||||
|
||||
{/* Dropdown */}
|
||||
<div
|
||||
className="absolute top-full left-0 mt-2 neo-dropdown z-50 w-[320px] max-w-[calc(100vw-2rem)]"
|
||||
style={{ boxShadow: 'var(--shadow-neo)' }}
|
||||
>
|
||||
<Card className="absolute top-full left-0 mt-2 z-50 w-[320px] max-w-[calc(100vw-2rem)] shadow-lg">
|
||||
{/* Header */}
|
||||
<div className="px-3 py-2 border-b-2 border-[var(--color-neo-border)] bg-[var(--color-neo-bg)]">
|
||||
<CardHeader className="p-3 border-b border-border">
|
||||
<h3 className="font-bold text-sm">Conversation History</h3>
|
||||
</div>
|
||||
</CardHeader>
|
||||
|
||||
{/* Content */}
|
||||
{isLoading ? (
|
||||
<div className="p-4 flex items-center justify-center">
|
||||
<Loader2 size={20} className="animate-spin text-[var(--color-neo-text-secondary)]" />
|
||||
</div>
|
||||
) : !conversations || conversations.length === 0 ? (
|
||||
<div className="p-4 text-center text-[var(--color-neo-text-secondary)] text-sm">
|
||||
No conversations yet
|
||||
</div>
|
||||
) : (
|
||||
<div className="max-h-[300px] overflow-auto">
|
||||
{conversations.map((conversation) => {
|
||||
const isCurrent = conversation.id === currentConversationId
|
||||
<CardContent className="p-0">
|
||||
{isLoading ? (
|
||||
<div className="p-4 flex items-center justify-center">
|
||||
<Loader2 size={20} className="animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
) : !conversations || conversations.length === 0 ? (
|
||||
<div className="p-4 text-center text-muted-foreground text-sm">
|
||||
No conversations yet
|
||||
</div>
|
||||
) : (
|
||||
<div className="max-h-[300px] overflow-y-auto">
|
||||
{conversations.map((conversation) => {
|
||||
const isCurrent = conversation.id === currentConversationId
|
||||
|
||||
return (
|
||||
<div
|
||||
key={conversation.id}
|
||||
className={`flex items-center group ${
|
||||
isCurrent
|
||||
? 'bg-[var(--color-neo-pending)] text-[var(--color-neo-text-on-bright)]'
|
||||
: ''
|
||||
}`}
|
||||
>
|
||||
<button
|
||||
onClick={() => handleSelectConversation(conversation.id)}
|
||||
className="flex-1 neo-dropdown-item text-left"
|
||||
disabled={isCurrent}
|
||||
return (
|
||||
<div
|
||||
key={conversation.id}
|
||||
className={`flex items-center group ${
|
||||
isCurrent ? 'bg-primary/10' : 'hover:bg-muted'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-start gap-2">
|
||||
<MessageSquare size={16} className="mt-0.5 flex-shrink-0" />
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="font-medium truncate">
|
||||
{conversation.title || 'Untitled conversation'}
|
||||
</div>
|
||||
<div className={`text-xs flex items-center gap-2 ${
|
||||
isCurrent
|
||||
? 'text-[var(--color-neo-text-on-bright)] opacity-80'
|
||||
: 'text-[var(--color-neo-text-secondary)]'
|
||||
}`}>
|
||||
<span>{conversation.message_count} messages</span>
|
||||
<span>|</span>
|
||||
<span>{formatRelativeTime(conversation.updated_at)}</span>
|
||||
<button
|
||||
onClick={() => handleSelectConversation(conversation.id)}
|
||||
className="flex-1 px-3 py-2 text-left"
|
||||
disabled={isCurrent}
|
||||
>
|
||||
<div className="flex items-start gap-2">
|
||||
<MessageSquare size={16} className="mt-0.5 flex-shrink-0 text-muted-foreground" />
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="font-medium truncate text-foreground">
|
||||
{conversation.title || 'Untitled conversation'}
|
||||
</div>
|
||||
<div className="text-xs flex items-center gap-2 text-muted-foreground">
|
||||
<span>{conversation.message_count} messages</span>
|
||||
<span>|</span>
|
||||
<span>{formatRelativeTime(conversation.updated_at)}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
onClick={(e) => handleDeleteClick(e, conversation)}
|
||||
className={`p-2 mr-2 transition-colors rounded ${
|
||||
isCurrent
|
||||
? 'text-[var(--color-neo-text-on-bright)] opacity-60 hover:opacity-100 hover:bg-[var(--color-neo-danger)]/20'
|
||||
: 'text-[var(--color-neo-text-secondary)] opacity-0 group-hover:opacity-100 hover:text-[var(--color-neo-danger)] hover:bg-[var(--color-neo-danger)]/10'
|
||||
}`}
|
||||
title="Delete conversation"
|
||||
>
|
||||
<Trash2 size={14} />
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={(e) => handleDeleteClick(e, conversation)}
|
||||
className={`h-8 w-8 mr-2 ${
|
||||
isCurrent
|
||||
? 'opacity-60 hover:opacity-100'
|
||||
: 'opacity-0 group-hover:opacity-100'
|
||||
} hover:text-destructive hover:bg-destructive/10`}
|
||||
title="Delete conversation"
|
||||
>
|
||||
<Trash2 size={14} />
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Delete Confirmation Dialog */}
|
||||
<ConfirmDialog
|
||||
@@ -197,7 +194,7 @@ export function ConversationHistory({
|
||||
deleteError ? (
|
||||
<div className="space-y-3">
|
||||
<p>{`Are you sure you want to delete "${conversationToDelete?.title || 'this conversation'}"? This action cannot be undone.`}</p>
|
||||
<div className="flex items-center gap-2 p-2 bg-[var(--color-neo-danger)]/10 border border-[var(--color-neo-danger)] rounded text-sm text-[var(--color-neo-danger)]">
|
||||
<div className="flex items-center gap-2 p-2 bg-destructive/10 border border-destructive rounded text-sm text-destructive">
|
||||
<AlertCircle size={16} className="flex-shrink-0" />
|
||||
<span>{deleteError}</span>
|
||||
</div>
|
||||
|
||||
@@ -12,6 +12,8 @@ import { Terminal } from './Terminal'
|
||||
import { TerminalTabs } from './TerminalTabs'
|
||||
import { listTerminals, createTerminal, renameTerminal, deleteTerminal } from '@/lib/api'
|
||||
import type { TerminalInfo } from '@/lib/types'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
|
||||
const MIN_HEIGHT = 150
|
||||
const MAX_HEIGHT = 600
|
||||
@@ -273,18 +275,18 @@ export function DebugLogViewer({
|
||||
return 'info'
|
||||
}
|
||||
|
||||
// Get color class for log level using theme CSS variables
|
||||
// Get color class for log level
|
||||
const getLogColor = (level: LogLevel): string => {
|
||||
switch (level) {
|
||||
case 'error':
|
||||
return 'text-[var(--color-neo-log-error)]'
|
||||
return 'text-red-500'
|
||||
case 'warn':
|
||||
return 'text-[var(--color-neo-log-warning)]'
|
||||
return 'text-yellow-500'
|
||||
case 'debug':
|
||||
return 'text-[var(--color-neo-log-debug)]'
|
||||
return 'text-blue-400'
|
||||
case 'info':
|
||||
default:
|
||||
return 'text-[var(--color-neo-log-info)]'
|
||||
return 'text-foreground'
|
||||
}
|
||||
}
|
||||
|
||||
@@ -316,89 +318,83 @@ export function DebugLogViewer({
|
||||
className="absolute top-0 left-0 right-0 h-2 cursor-ns-resize group flex items-center justify-center -translate-y-1/2 z-50"
|
||||
onMouseDown={handleResizeStart}
|
||||
>
|
||||
<div className="w-16 h-1.5 bg-[var(--color-neo-border)] rounded-full group-hover:bg-[var(--color-neo-text-secondary)] transition-colors flex items-center justify-center">
|
||||
<GripHorizontal size={12} className="text-[var(--color-neo-text-muted)] group-hover:text-[var(--color-neo-text-secondary)]" />
|
||||
<div className="w-16 h-1.5 bg-border rounded-full group-hover:bg-muted-foreground transition-colors flex items-center justify-center">
|
||||
<GripHorizontal size={12} className="text-muted-foreground group-hover:text-foreground" />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Header bar */}
|
||||
<div
|
||||
className="flex items-center justify-between h-10 px-4 bg-[var(--color-neo-border)] border-t-3 border-[var(--color-neo-text)]"
|
||||
className="flex items-center justify-between h-10 px-4 bg-muted border-t border-border"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
{/* Collapse/expand toggle */}
|
||||
<button
|
||||
onClick={onToggle}
|
||||
className="flex items-center gap-2 hover:bg-[var(--color-neo-hover-subtle)] px-2 py-1 rounded transition-colors cursor-pointer"
|
||||
className="flex items-center gap-2 hover:bg-accent px-2 py-1 rounded transition-colors cursor-pointer"
|
||||
>
|
||||
<TerminalIcon size={16} className="text-[var(--color-neo-done)]" />
|
||||
<span className="font-mono text-sm text-[var(--color-neo-bg)] font-bold">
|
||||
<TerminalIcon size={16} className="text-green-500" />
|
||||
<span className="font-mono text-sm text-foreground font-bold">
|
||||
Debug
|
||||
</span>
|
||||
<span className="px-1.5 py-0.5 text-xs font-mono bg-[var(--color-neo-card)] text-[var(--color-neo-text-muted)] rounded" title="Toggle debug panel">
|
||||
<Badge variant="secondary" className="text-xs font-mono" title="Toggle debug panel">
|
||||
D
|
||||
</span>
|
||||
</Badge>
|
||||
</button>
|
||||
|
||||
{/* Tabs - only visible when open */}
|
||||
{isOpen && (
|
||||
<div className="flex items-center gap-1 ml-4">
|
||||
<button
|
||||
<Button
|
||||
variant={activeTab === 'agent' ? 'secondary' : 'ghost'}
|
||||
size="sm"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
setActiveTab('agent')
|
||||
}}
|
||||
className={`flex items-center gap-1.5 px-3 py-1 text-xs font-mono rounded transition-colors ${
|
||||
activeTab === 'agent'
|
||||
? 'bg-[var(--color-neo-card)] text-[var(--color-neo-text)]'
|
||||
: 'text-[var(--color-neo-text-muted)] hover:text-[var(--color-neo-text)] hover:bg-[var(--color-neo-hover-subtle)]'
|
||||
}`}
|
||||
className="h-7 text-xs font-mono gap-1.5"
|
||||
>
|
||||
<Cpu size={12} />
|
||||
Agent
|
||||
{logs.length > 0 && (
|
||||
<span className="px-1.5 py-0.5 text-[10px] bg-[var(--color-neo-text-secondary)] text-[var(--color-neo-bg)] rounded">
|
||||
<Badge variant="default" className="h-4 px-1.5 text-[10px]">
|
||||
{logs.length}
|
||||
</span>
|
||||
</Badge>
|
||||
)}
|
||||
</button>
|
||||
<button
|
||||
</Button>
|
||||
<Button
|
||||
variant={activeTab === 'devserver' ? 'secondary' : 'ghost'}
|
||||
size="sm"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
setActiveTab('devserver')
|
||||
}}
|
||||
className={`flex items-center gap-1.5 px-3 py-1 text-xs font-mono rounded transition-colors ${
|
||||
activeTab === 'devserver'
|
||||
? 'bg-[var(--color-neo-card)] text-[var(--color-neo-text)]'
|
||||
: 'text-[var(--color-neo-text-muted)] hover:text-[var(--color-neo-text)] hover:bg-[var(--color-neo-hover-subtle)]'
|
||||
}`}
|
||||
className="h-7 text-xs font-mono gap-1.5"
|
||||
>
|
||||
<Server size={12} />
|
||||
Dev Server
|
||||
{devLogs.length > 0 && (
|
||||
<span className="px-1.5 py-0.5 text-[10px] bg-[var(--color-neo-text-secondary)] text-[var(--color-neo-bg)] rounded">
|
||||
<Badge variant="default" className="h-4 px-1.5 text-[10px]">
|
||||
{devLogs.length}
|
||||
</span>
|
||||
</Badge>
|
||||
)}
|
||||
</button>
|
||||
<button
|
||||
</Button>
|
||||
<Button
|
||||
variant={activeTab === 'terminal' ? 'secondary' : 'ghost'}
|
||||
size="sm"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
setActiveTab('terminal')
|
||||
}}
|
||||
className={`flex items-center gap-1.5 px-3 py-1 text-xs font-mono rounded transition-colors ${
|
||||
activeTab === 'terminal'
|
||||
? 'bg-[var(--color-neo-card)] text-[var(--color-neo-text)]'
|
||||
: 'text-[var(--color-neo-text-muted)] hover:text-[var(--color-neo-text)] hover:bg-[var(--color-neo-hover-subtle)]'
|
||||
}`}
|
||||
className="h-7 text-xs font-mono gap-1.5"
|
||||
>
|
||||
<TerminalIcon size={12} />
|
||||
Terminal
|
||||
<span className="px-1.5 py-0.5 text-[10px] bg-[var(--color-neo-text-secondary)] text-[var(--color-neo-text-muted)] rounded" title="Toggle terminal">
|
||||
<Badge variant="outline" className="h-4 px-1.5 text-[10px]" title="Toggle terminal">
|
||||
T
|
||||
</span>
|
||||
</button>
|
||||
</Badge>
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -406,14 +402,14 @@ export function DebugLogViewer({
|
||||
{isOpen && activeTab !== 'terminal' && (
|
||||
<>
|
||||
{getCurrentLogCount() > 0 && (
|
||||
<span className="px-2 py-0.5 text-xs font-mono bg-[var(--color-neo-card)] text-[var(--color-neo-text-secondary)] rounded ml-2">
|
||||
<Badge variant="secondary" className="ml-2 font-mono">
|
||||
{getCurrentLogCount()}
|
||||
</span>
|
||||
</Badge>
|
||||
)}
|
||||
{isAutoScrollPaused() && (
|
||||
<span className="px-2 py-0.5 text-xs font-mono bg-[var(--color-neo-pending)] text-[var(--color-neo-text-on-bright)] rounded">
|
||||
<Badge variant="default" className="bg-yellow-500 text-yellow-950">
|
||||
Paused
|
||||
</span>
|
||||
</Badge>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
@@ -422,22 +418,24 @@ export function DebugLogViewer({
|
||||
<div className="flex items-center gap-2">
|
||||
{/* Clear button - only for log tabs */}
|
||||
{isOpen && activeTab !== 'terminal' && (
|
||||
<button
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
handleClear()
|
||||
}}
|
||||
className="p-1.5 hover:bg-[var(--color-neo-hover-subtle)] rounded transition-colors"
|
||||
className="h-7 w-7"
|
||||
title="Clear logs"
|
||||
>
|
||||
<Trash2 size={14} className="text-[var(--color-neo-text-muted)]" />
|
||||
</button>
|
||||
<Trash2 size={14} className="text-muted-foreground" />
|
||||
</Button>
|
||||
)}
|
||||
<div className="p-1">
|
||||
{isOpen ? (
|
||||
<ChevronDown size={16} className="text-[var(--color-neo-text-muted)]" />
|
||||
<ChevronDown size={16} className="text-muted-foreground" />
|
||||
) : (
|
||||
<ChevronUp size={16} className="text-[var(--color-neo-text-muted)]" />
|
||||
<ChevronUp size={16} className="text-muted-foreground" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
@@ -445,7 +443,7 @@ export function DebugLogViewer({
|
||||
|
||||
{/* Content area */}
|
||||
{isOpen && (
|
||||
<div className="h-[calc(100%-2.5rem)] bg-[var(--color-neo-border)]">
|
||||
<div className="h-[calc(100%-2.5rem)] bg-card">
|
||||
{/* Agent Logs Tab */}
|
||||
{activeTab === 'agent' && (
|
||||
<div
|
||||
@@ -454,7 +452,7 @@ export function DebugLogViewer({
|
||||
className="h-full overflow-y-auto p-2 font-mono text-sm"
|
||||
>
|
||||
{logs.length === 0 ? (
|
||||
<div className="flex items-center justify-center h-full text-[var(--color-neo-text-muted)]">
|
||||
<div className="flex items-center justify-center h-full text-muted-foreground">
|
||||
No logs yet. Start the agent to see output.
|
||||
</div>
|
||||
) : (
|
||||
@@ -467,9 +465,9 @@ export function DebugLogViewer({
|
||||
return (
|
||||
<div
|
||||
key={`${log.timestamp}-${index}`}
|
||||
className="flex gap-2 hover:bg-[var(--color-neo-hover-subtle)] px-1 py-0.5 rounded"
|
||||
className="flex gap-2 hover:bg-muted px-1 py-0.5 rounded"
|
||||
>
|
||||
<span className="text-[var(--color-neo-text-muted)] select-none shrink-0">
|
||||
<span className="text-muted-foreground select-none shrink-0">
|
||||
{timestamp}
|
||||
</span>
|
||||
<span className={`${colorClass} whitespace-pre-wrap break-all`}>
|
||||
@@ -491,7 +489,7 @@ export function DebugLogViewer({
|
||||
className="h-full overflow-y-auto p-2 font-mono text-sm"
|
||||
>
|
||||
{devLogs.length === 0 ? (
|
||||
<div className="flex items-center justify-center h-full text-[var(--color-neo-text-muted)]">
|
||||
<div className="flex items-center justify-center h-full text-muted-foreground">
|
||||
No dev server logs yet.
|
||||
</div>
|
||||
) : (
|
||||
@@ -504,9 +502,9 @@ export function DebugLogViewer({
|
||||
return (
|
||||
<div
|
||||
key={`${log.timestamp}-${index}`}
|
||||
className="flex gap-2 hover:bg-[var(--color-neo-hover-subtle)] px-1 py-0.5 rounded"
|
||||
className="flex gap-2 hover:bg-muted px-1 py-0.5 rounded"
|
||||
>
|
||||
<span className="text-[var(--color-neo-text-muted)] select-none shrink-0">
|
||||
<span className="text-muted-foreground select-none shrink-0">
|
||||
{timestamp}
|
||||
</span>
|
||||
<span className={`${colorClass} whitespace-pre-wrap break-all`}>
|
||||
@@ -538,11 +536,11 @@ export function DebugLogViewer({
|
||||
{/* Terminal content - render all terminals and show/hide to preserve buffers */}
|
||||
<div className="flex-1 min-h-0 relative">
|
||||
{isLoadingTerminals ? (
|
||||
<div className="h-full flex items-center justify-center text-[var(--color-neo-text-muted)] font-mono text-sm">
|
||||
<div className="h-full flex items-center justify-center text-muted-foreground font-mono text-sm">
|
||||
Loading terminals...
|
||||
</div>
|
||||
) : terminals.length === 0 ? (
|
||||
<div className="h-full flex items-center justify-center text-[var(--color-neo-text-muted)] font-mono text-sm">
|
||||
<div className="h-full flex items-center justify-center text-muted-foreground font-mono text-sm">
|
||||
No terminal available
|
||||
</div>
|
||||
) : (
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { AlertTriangle, GitBranch, Check } from 'lucide-react'
|
||||
import type { Feature } from '../lib/types'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
|
||||
interface DependencyBadgeProps {
|
||||
feature: Feature
|
||||
@@ -38,14 +39,13 @@ export function DependencyBadge({ feature, allFeatures = [], compact = false }:
|
||||
if (compact) {
|
||||
// Compact view for card displays
|
||||
return (
|
||||
<div
|
||||
className={`
|
||||
inline-flex items-center gap-1 text-xs px-2 py-0.5 rounded-full font-mono
|
||||
${isBlocked
|
||||
? 'bg-neo-danger/20 text-neo-danger'
|
||||
: 'bg-neo-neutral-200 text-neo-text-secondary'
|
||||
}
|
||||
`}
|
||||
<Badge
|
||||
variant="outline"
|
||||
className={`gap-1 font-mono text-xs ${
|
||||
isBlocked
|
||||
? 'bg-destructive/10 text-destructive border-destructive/30'
|
||||
: 'bg-muted text-muted-foreground'
|
||||
}`}
|
||||
title={isBlocked
|
||||
? `Blocked by ${blockingCount} ${blockingCount === 1 ? 'dependency' : 'dependencies'}`
|
||||
: `${satisfiedCount}/${dependencies.length} dependencies satisfied`
|
||||
@@ -62,7 +62,7 @@ export function DependencyBadge({ feature, allFeatures = [], compact = false }:
|
||||
<span>{satisfiedCount}/{dependencies.length}</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</Badge>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -70,15 +70,15 @@ export function DependencyBadge({ feature, allFeatures = [], compact = false }:
|
||||
return (
|
||||
<div className="flex items-center gap-2">
|
||||
{isBlocked ? (
|
||||
<div className="flex items-center gap-1.5 text-sm text-neo-danger">
|
||||
<div className="flex items-center gap-1.5 text-sm text-destructive">
|
||||
<AlertTriangle size={14} />
|
||||
<span className="font-medium">
|
||||
Blocked by {blockingCount} {blockingCount === 1 ? 'dependency' : 'dependencies'}
|
||||
</span>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center gap-1.5 text-sm text-neo-text-secondary">
|
||||
<Check size={14} className="text-neo-done" />
|
||||
<div className="flex items-center gap-1.5 text-sm text-muted-foreground">
|
||||
<Check size={14} className="text-primary" />
|
||||
<span>
|
||||
All {dependencies.length} {dependencies.length === 1 ? 'dependency' : 'dependencies'} satisfied
|
||||
</span>
|
||||
@@ -102,7 +102,7 @@ export function DependencyIndicator({ feature }: { feature: Feature }) {
|
||||
if (isBlocked) {
|
||||
return (
|
||||
<span
|
||||
className="inline-flex items-center justify-center w-5 h-5 rounded-full bg-neo-danger/20 text-neo-danger"
|
||||
className="inline-flex items-center justify-center w-5 h-5 rounded-full bg-destructive/10 text-destructive"
|
||||
title={`Blocked by ${feature.blocking_dependencies?.length || 0} dependencies`}
|
||||
>
|
||||
<AlertTriangle size={12} />
|
||||
@@ -112,7 +112,7 @@ export function DependencyIndicator({ feature }: { feature: Feature }) {
|
||||
|
||||
return (
|
||||
<span
|
||||
className="inline-flex items-center justify-center w-5 h-5 rounded-full bg-neo-neutral-200 text-neo-text-secondary"
|
||||
className="inline-flex items-center justify-center w-5 h-5 rounded-full bg-muted text-muted-foreground"
|
||||
title={`${dependencies.length} dependencies (all satisfied)`}
|
||||
>
|
||||
<GitBranch size={12} />
|
||||
|
||||
@@ -18,6 +18,8 @@ import dagre from 'dagre'
|
||||
import { CheckCircle2, Circle, Loader2, AlertTriangle, RefreshCw } from 'lucide-react'
|
||||
import type { DependencyGraph as DependencyGraphData, GraphNode, ActiveAgent, AgentMascot, AgentState } from '../lib/types'
|
||||
import { AgentAvatar } from './AgentAvatar'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Card, CardContent } from '@/components/ui/card'
|
||||
import '@xyflow/react/dist/style.css'
|
||||
|
||||
// Node dimensions
|
||||
@@ -69,20 +71,17 @@ class GraphErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryStat
|
||||
render() {
|
||||
if (this.state.hasError) {
|
||||
return (
|
||||
<div className="h-full w-full flex items-center justify-center bg-neo-neutral-100">
|
||||
<div className="h-full w-full flex items-center justify-center bg-muted">
|
||||
<div className="text-center p-6">
|
||||
<AlertTriangle size={48} className="mx-auto mb-4 text-neo-warning" />
|
||||
<div className="text-neo-text font-bold mb-2">Graph rendering error</div>
|
||||
<div className="text-sm text-neo-text-secondary mb-4">
|
||||
<AlertTriangle size={48} className="mx-auto mb-4 text-yellow-500" />
|
||||
<div className="text-foreground font-bold mb-2">Graph rendering error</div>
|
||||
<div className="text-sm text-muted-foreground mb-4">
|
||||
The dependency graph encountered an issue.
|
||||
</div>
|
||||
<button
|
||||
onClick={this.handleReset}
|
||||
className="inline-flex items-center gap-2 px-4 py-2 bg-neo-accent text-white rounded border-2 border-neo-border shadow-neo-sm hover:shadow-neo-md transition-all"
|
||||
>
|
||||
<Button onClick={this.handleReset} className="gap-2">
|
||||
<RefreshCw size={16} />
|
||||
Reload Graph
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
@@ -95,32 +94,39 @@ class GraphErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryStat
|
||||
// Custom node component
|
||||
function FeatureNode({ data }: { data: GraphNode & { onClick?: () => void; agent?: NodeAgentInfo } }) {
|
||||
const statusColors = {
|
||||
pending: 'bg-neo-pending border-neo-border',
|
||||
in_progress: 'bg-neo-progress border-neo-border',
|
||||
done: 'bg-neo-done border-neo-border',
|
||||
blocked: 'bg-neo-danger/20 border-neo-danger',
|
||||
pending: 'bg-yellow-100 border-yellow-300 dark:bg-yellow-900/30 dark:border-yellow-700',
|
||||
in_progress: 'bg-cyan-100 border-cyan-300 dark:bg-cyan-900/30 dark:border-cyan-700',
|
||||
done: 'bg-green-100 border-green-300 dark:bg-green-900/30 dark:border-green-700',
|
||||
blocked: 'bg-red-50 border-red-300 dark:bg-red-900/20 dark:border-red-700',
|
||||
}
|
||||
|
||||
const textColors = {
|
||||
pending: 'text-yellow-900 dark:text-yellow-100',
|
||||
in_progress: 'text-cyan-900 dark:text-cyan-100',
|
||||
done: 'text-green-900 dark:text-green-100',
|
||||
blocked: 'text-red-900 dark:text-red-100',
|
||||
}
|
||||
|
||||
const StatusIcon = () => {
|
||||
switch (data.status) {
|
||||
case 'done':
|
||||
return <CheckCircle2 size={16} className="text-neo-text-on-bright" />
|
||||
return <CheckCircle2 size={16} className={textColors[data.status]} />
|
||||
case 'in_progress':
|
||||
return <Loader2 size={16} className="text-neo-text-on-bright animate-spin" />
|
||||
return <Loader2 size={16} className={`${textColors[data.status]} animate-spin`} />
|
||||
case 'blocked':
|
||||
return <AlertTriangle size={16} className="text-neo-danger" />
|
||||
return <AlertTriangle size={16} className="text-destructive" />
|
||||
default:
|
||||
return <Circle size={16} className="text-neo-text-on-bright" />
|
||||
return <Circle size={16} className={textColors[data.status]} />
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Handle type="target" position={Position.Left} className="!bg-neo-border !w-2 !h-2" />
|
||||
<Handle type="target" position={Position.Left} className="!bg-border !w-2 !h-2" />
|
||||
<div
|
||||
className={`
|
||||
px-4 py-3 rounded-lg border-2 cursor-pointer
|
||||
transition-all hover:shadow-neo-md relative
|
||||
transition-all hover:shadow-md relative
|
||||
${statusColors[data.status]}
|
||||
`}
|
||||
onClick={data.onClick}
|
||||
@@ -129,31 +135,31 @@ function FeatureNode({ data }: { data: GraphNode & { onClick?: () => void; agent
|
||||
{/* Agent avatar badge - positioned at top right */}
|
||||
{data.agent && (
|
||||
<div className="absolute -top-3 -right-3 z-10">
|
||||
<div className="rounded-full border-2 border-neo-border bg-white shadow-neo-sm">
|
||||
<div className="rounded-full border-2 border-border bg-background shadow-sm">
|
||||
<AgentAvatar name={data.agent.name} state={data.agent.state} size="sm" />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<StatusIcon />
|
||||
<span className="text-xs font-mono text-neo-text-on-bright/70">
|
||||
<span className={`text-xs font-mono ${textColors[data.status]} opacity-70`}>
|
||||
#{data.priority}
|
||||
</span>
|
||||
{/* Show agent name inline if present */}
|
||||
{data.agent && (
|
||||
<span className="text-xs font-bold text-neo-text-on-bright ml-auto">
|
||||
<span className={`text-xs font-bold ${textColors[data.status]} ml-auto`}>
|
||||
{data.agent.name}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="font-bold text-sm text-neo-text-on-bright truncate" title={data.name}>
|
||||
<div className={`font-bold text-sm ${textColors[data.status]} truncate`} title={data.name}>
|
||||
{data.name}
|
||||
</div>
|
||||
<div className="text-xs text-neo-text-on-bright/70 truncate" title={data.category}>
|
||||
<div className={`text-xs ${textColors[data.status]} opacity-70 truncate`} title={data.category}>
|
||||
{data.category}
|
||||
</div>
|
||||
</div>
|
||||
<Handle type="source" position={Position.Right} className="!bg-neo-border !w-2 !h-2" />
|
||||
<Handle type="source" position={Position.Right} className="!bg-border !w-2 !h-2" />
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -249,10 +255,10 @@ function DependencyGraphInner({ graphData, onNodeClick, activeAgents = [] }: Dep
|
||||
target: String(edge.target),
|
||||
type: 'smoothstep',
|
||||
animated: false,
|
||||
style: { stroke: 'var(--color-neo-border)', strokeWidth: 2 },
|
||||
style: { stroke: '#a1a1aa', strokeWidth: 2 },
|
||||
markerEnd: {
|
||||
type: MarkerType.ArrowClosed,
|
||||
color: 'var(--color-neo-border)',
|
||||
color: '#a1a1aa',
|
||||
},
|
||||
}))
|
||||
|
||||
@@ -308,22 +314,22 @@ function DependencyGraphInner({ graphData, onNodeClick, activeAgents = [] }: Dep
|
||||
const status = (node.data as unknown as GraphNode).status
|
||||
switch (status) {
|
||||
case 'done':
|
||||
return 'var(--color-neo-done)'
|
||||
return '#22c55e' // green-500
|
||||
case 'in_progress':
|
||||
return 'var(--color-neo-progress)'
|
||||
return '#06b6d4' // cyan-500
|
||||
case 'blocked':
|
||||
return 'var(--color-neo-danger)'
|
||||
return '#ef4444' // red-500
|
||||
default:
|
||||
return 'var(--color-neo-pending)'
|
||||
return '#eab308' // yellow-500
|
||||
}
|
||||
}, [])
|
||||
|
||||
if (graphData.nodes.length === 0) {
|
||||
return (
|
||||
<div className="h-full w-full flex items-center justify-center bg-neo-neutral-100">
|
||||
<div className="h-full w-full flex items-center justify-center bg-muted">
|
||||
<div className="text-center">
|
||||
<div className="text-neo-text-secondary mb-2">No features to display</div>
|
||||
<div className="text-sm text-neo-text-muted">
|
||||
<div className="text-muted-foreground mb-2">No features to display</div>
|
||||
<div className="text-sm text-muted-foreground/70">
|
||||
Create features to see the dependency graph
|
||||
</div>
|
||||
</div>
|
||||
@@ -332,57 +338,49 @@ function DependencyGraphInner({ graphData, onNodeClick, activeAgents = [] }: Dep
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="h-full w-full relative bg-neo-neutral-50">
|
||||
<div className="h-full w-full relative bg-background">
|
||||
{/* Layout toggle */}
|
||||
<div className="absolute top-4 left-4 z-10 flex gap-2">
|
||||
<button
|
||||
<Button
|
||||
variant={direction === 'LR' ? 'default' : 'outline'}
|
||||
size="sm"
|
||||
onClick={() => onLayout('LR')}
|
||||
className={`
|
||||
px-3 py-1.5 text-sm font-medium rounded border-2 border-neo-border transition-all
|
||||
${direction === 'LR'
|
||||
? 'bg-neo-accent text-white shadow-neo-sm'
|
||||
: 'bg-white text-neo-text hover:bg-neo-neutral-100'
|
||||
}
|
||||
`}
|
||||
>
|
||||
Horizontal
|
||||
</button>
|
||||
<button
|
||||
</Button>
|
||||
<Button
|
||||
variant={direction === 'TB' ? 'default' : 'outline'}
|
||||
size="sm"
|
||||
onClick={() => onLayout('TB')}
|
||||
className={`
|
||||
px-3 py-1.5 text-sm font-medium rounded border-2 border-neo-border transition-all
|
||||
${direction === 'TB'
|
||||
? 'bg-neo-accent text-white shadow-neo-sm'
|
||||
: 'bg-white text-neo-text hover:bg-neo-neutral-100'
|
||||
}
|
||||
`}
|
||||
>
|
||||
Vertical
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Legend */}
|
||||
<div className="absolute top-4 right-4 z-10 bg-white border-2 border-neo-border rounded-lg p-3 shadow-neo-sm">
|
||||
<div className="text-xs font-bold mb-2">Status</div>
|
||||
<div className="space-y-1.5">
|
||||
<div className="flex items-center gap-2 text-xs">
|
||||
<div className="w-3 h-3 rounded bg-neo-pending border border-neo-border" />
|
||||
<span>Pending</span>
|
||||
<Card className="absolute top-4 right-4 z-10">
|
||||
<CardContent className="p-3">
|
||||
<div className="text-xs font-bold mb-2">Status</div>
|
||||
<div className="space-y-1.5">
|
||||
<div className="flex items-center gap-2 text-xs">
|
||||
<div className="w-3 h-3 rounded bg-yellow-400 border border-yellow-500" />
|
||||
<span>Pending</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-xs">
|
||||
<div className="w-3 h-3 rounded bg-cyan-400 border border-cyan-500" />
|
||||
<span>In Progress</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-xs">
|
||||
<div className="w-3 h-3 rounded bg-green-400 border border-green-500" />
|
||||
<span>Done</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-xs">
|
||||
<div className="w-3 h-3 rounded bg-red-100 border border-red-400" />
|
||||
<span>Blocked</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-xs">
|
||||
<div className="w-3 h-3 rounded bg-neo-progress border border-neo-border" />
|
||||
<span>In Progress</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-xs">
|
||||
<div className="w-3 h-3 rounded bg-neo-done border border-neo-border" />
|
||||
<span>Done</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-xs">
|
||||
<div className="w-3 h-3 rounded bg-neo-danger/20 border border-neo-danger" />
|
||||
<span>Blocked</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<ReactFlow
|
||||
nodes={nodes}
|
||||
@@ -397,14 +395,14 @@ function DependencyGraphInner({ graphData, onNodeClick, activeAgents = [] }: Dep
|
||||
minZoom={0.1}
|
||||
maxZoom={2}
|
||||
>
|
||||
<Background color="var(--color-neo-neutral-300)" gap={20} size={1} />
|
||||
<Background color="#d4d4d8" gap={20} size={1} />
|
||||
<Controls
|
||||
className="!bg-white !border-2 !border-neo-border !rounded-lg !shadow-neo-sm"
|
||||
className="!bg-card !border !border-border !rounded-lg !shadow-sm"
|
||||
showInteractive={false}
|
||||
/>
|
||||
<MiniMap
|
||||
nodeColor={nodeColor}
|
||||
className="!bg-white !border-2 !border-neo-border !rounded-lg !shadow-neo-sm"
|
||||
className="!bg-card !border !border-border !rounded-lg !shadow-sm"
|
||||
maskColor="rgba(0, 0, 0, 0.1)"
|
||||
/>
|
||||
</ReactFlow>
|
||||
|
||||
@@ -2,6 +2,7 @@ import { Globe, Square, Loader2, ExternalLink, AlertTriangle } from 'lucide-reac
|
||||
import { useMutation, useQueryClient } from '@tanstack/react-query'
|
||||
import type { DevServerStatus } from '../lib/types'
|
||||
import { startDevServer, stopDevServer } from '../lib/api'
|
||||
import { Button } from '@/components/ui/button'
|
||||
|
||||
// Re-export DevServerStatus from lib/types for consumers that import from here
|
||||
export type { DevServerStatus }
|
||||
@@ -86,14 +87,11 @@ export function DevServerControl({ projectName, status, url }: DevServerControlP
|
||||
return (
|
||||
<div className="flex items-center gap-2">
|
||||
{isStopped ? (
|
||||
<button
|
||||
<Button
|
||||
onClick={handleStart}
|
||||
disabled={isLoading}
|
||||
className="neo-btn text-sm py-2 px-3"
|
||||
style={isCrashed ? {
|
||||
backgroundColor: 'var(--color-neo-danger)',
|
||||
color: 'var(--color-neo-text-on-bright)',
|
||||
} : undefined}
|
||||
variant={isCrashed ? "destructive" : "outline"}
|
||||
size="sm"
|
||||
title={isCrashed ? "Dev Server Crashed - Click to Restart" : "Start Dev Server"}
|
||||
aria-label={isCrashed ? "Restart Dev Server (crashed)" : "Start Dev Server"}
|
||||
>
|
||||
@@ -104,16 +102,13 @@ export function DevServerControl({ projectName, status, url }: DevServerControlP
|
||||
) : (
|
||||
<Globe size={18} />
|
||||
)}
|
||||
</button>
|
||||
</Button>
|
||||
) : (
|
||||
<button
|
||||
<Button
|
||||
onClick={handleStop}
|
||||
disabled={isLoading}
|
||||
className="neo-btn text-sm py-2 px-3"
|
||||
style={{
|
||||
backgroundColor: 'var(--color-neo-progress)',
|
||||
color: 'var(--color-neo-text-on-bright)',
|
||||
}}
|
||||
size="sm"
|
||||
className="bg-primary text-primary-foreground hover:bg-primary/90"
|
||||
title="Stop Dev Server"
|
||||
aria-label="Stop Dev Server"
|
||||
>
|
||||
@@ -122,31 +117,31 @@ export function DevServerControl({ projectName, status, url }: DevServerControlP
|
||||
) : (
|
||||
<Square size={18} />
|
||||
)}
|
||||
</button>
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{/* Show URL as clickable link when server is running */}
|
||||
{isRunning && url && (
|
||||
<a
|
||||
href={url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="neo-btn text-sm py-2 px-3 gap-1"
|
||||
style={{
|
||||
backgroundColor: 'var(--color-neo-progress)',
|
||||
color: 'var(--color-neo-text-on-bright)',
|
||||
textDecoration: 'none',
|
||||
}}
|
||||
title={`Open ${url} in new tab`}
|
||||
<Button
|
||||
asChild
|
||||
size="sm"
|
||||
className="bg-primary text-primary-foreground hover:bg-primary/90 gap-1"
|
||||
>
|
||||
<span className="font-mono text-xs">{url}</span>
|
||||
<ExternalLink size={14} />
|
||||
</a>
|
||||
<a
|
||||
href={url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
title={`Open ${url} in new tab`}
|
||||
>
|
||||
<span className="font-mono text-xs">{url}</span>
|
||||
<ExternalLink size={14} />
|
||||
</a>
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{/* Error display */}
|
||||
{(startDevServerMutation.error || stopDevServerMutation.error) && (
|
||||
<span className="text-xs font-mono text-[var(--color-neo-danger)] ml-2">
|
||||
<span className="text-xs font-mono text-destructive ml-2">
|
||||
{String((startDevServerMutation.error || stopDevServerMutation.error)?.message || 'Operation failed')}
|
||||
</span>
|
||||
)}
|
||||
|
||||
@@ -2,6 +2,18 @@ import { useState, useId } from 'react'
|
||||
import { X, Save, Plus, Trash2, Loader2, AlertCircle } from 'lucide-react'
|
||||
import { useUpdateFeature } from '../hooks/useProjects'
|
||||
import type { Feature } from '../lib/types'
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogFooter,
|
||||
} from '@/components/ui/dialog'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Textarea } from '@/components/ui/textarea'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { Alert, AlertDescription } from '@/components/ui/alert'
|
||||
|
||||
interface Step {
|
||||
id: string
|
||||
@@ -83,149 +95,135 @@ export function EditFeatureForm({ feature, projectName, onClose, onSaved }: Edit
|
||||
JSON.stringify(currentSteps) !== JSON.stringify(feature.steps)
|
||||
|
||||
return (
|
||||
<div className="neo-modal-backdrop" onClick={onClose}>
|
||||
<div
|
||||
className="neo-modal w-full max-w-2xl"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between p-6 border-b-3 border-[var(--color-neo-border)]">
|
||||
<h2 className="font-display text-2xl font-bold">
|
||||
Edit Feature
|
||||
</h2>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="neo-btn neo-btn-ghost p-2"
|
||||
>
|
||||
<X size={24} />
|
||||
</button>
|
||||
</div>
|
||||
<Dialog open={true} onOpenChange={(open) => !open && onClose()}>
|
||||
<DialogContent className="sm:max-w-2xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Edit Feature</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
{/* Form */}
|
||||
<form onSubmit={handleSubmit} className="p-6 space-y-4">
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
{/* Error Message */}
|
||||
{error && (
|
||||
<div className="flex items-center gap-3 p-4 bg-[var(--color-neo-error-bg)] text-[var(--color-neo-error-text)] border-3 border-[var(--color-neo-error-border)]">
|
||||
<AlertCircle size={20} />
|
||||
<span>{error}</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setError(null)}
|
||||
className="ml-auto hover:opacity-70 transition-opacity"
|
||||
>
|
||||
<X size={16} />
|
||||
</button>
|
||||
</div>
|
||||
<Alert variant="destructive">
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
<AlertDescription className="flex items-center justify-between">
|
||||
<span>{error}</span>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon-xs"
|
||||
onClick={() => setError(null)}
|
||||
>
|
||||
<X size={14} />
|
||||
</Button>
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{/* Category & Priority Row */}
|
||||
<div className="flex gap-4">
|
||||
<div className="flex-1">
|
||||
<label className="block font-display font-bold mb-2 uppercase text-sm">
|
||||
Category
|
||||
</label>
|
||||
<input
|
||||
<div className="flex-1 space-y-2">
|
||||
<Label htmlFor="category">Category</Label>
|
||||
<Input
|
||||
id="category"
|
||||
type="text"
|
||||
value={category}
|
||||
onChange={(e) => setCategory(e.target.value)}
|
||||
placeholder="e.g., Authentication, UI, API"
|
||||
className="neo-input"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="w-32">
|
||||
<label className="block font-display font-bold mb-2 uppercase text-sm">
|
||||
Priority
|
||||
</label>
|
||||
<input
|
||||
<div className="w-32 space-y-2">
|
||||
<Label htmlFor="priority">Priority</Label>
|
||||
<Input
|
||||
id="priority"
|
||||
type="number"
|
||||
value={priority}
|
||||
onChange={(e) => setPriority(e.target.value)}
|
||||
min="1"
|
||||
className="neo-input"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Name */}
|
||||
<div>
|
||||
<label className="block font-display font-bold mb-2 uppercase text-sm">
|
||||
Feature Name
|
||||
</label>
|
||||
<input
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="name">Feature Name</Label>
|
||||
<Input
|
||||
id="name"
|
||||
type="text"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
placeholder="e.g., User login form"
|
||||
className="neo-input"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<div>
|
||||
<label className="block font-display font-bold mb-2 uppercase text-sm">
|
||||
Description
|
||||
</label>
|
||||
<textarea
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="description">Description</Label>
|
||||
<Textarea
|
||||
id="description"
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
placeholder="Describe what this feature should do..."
|
||||
className="neo-input min-h-[100px] resize-y"
|
||||
className="min-h-[100px] resize-y"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Steps */}
|
||||
<div>
|
||||
<label className="block font-display font-bold mb-2 uppercase text-sm">
|
||||
Test Steps
|
||||
</label>
|
||||
<div className="space-y-2">
|
||||
<Label>Test Steps</Label>
|
||||
<div className="space-y-2">
|
||||
{steps.map((step, index) => (
|
||||
<div key={step.id} className="flex gap-2 items-center">
|
||||
<span
|
||||
className="w-10 h-10 flex-shrink-0 flex items-center justify-center font-mono font-bold text-sm border-3 border-[var(--color-neo-border)] bg-[var(--color-neo-bg)] text-[var(--color-neo-text-secondary)]"
|
||||
style={{ boxShadow: 'var(--shadow-neo-sm)' }}
|
||||
>
|
||||
<span className="w-10 h-10 flex-shrink-0 flex items-center justify-center font-mono font-semibold text-sm border rounded-md bg-muted text-muted-foreground">
|
||||
{index + 1}
|
||||
</span>
|
||||
<input
|
||||
<Input
|
||||
type="text"
|
||||
value={step.value}
|
||||
onChange={(e) => handleStepChange(step.id, e.target.value)}
|
||||
placeholder="Describe this step..."
|
||||
className="neo-input flex-1"
|
||||
className="flex-1"
|
||||
/>
|
||||
{steps.length > 1 && (
|
||||
<button
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => handleRemoveStep(step.id)}
|
||||
className="neo-btn neo-btn-ghost p-2"
|
||||
>
|
||||
<Trash2 size={18} />
|
||||
</button>
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<button
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={handleAddStep}
|
||||
className="neo-btn neo-btn-ghost mt-2 text-sm"
|
||||
>
|
||||
<Plus size={16} />
|
||||
Add Step
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex gap-3 pt-4 border-t-3 border-[var(--color-neo-border)]">
|
||||
<button
|
||||
<DialogFooter className="pt-4 border-t">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={onClose}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={!isValid || !hasChanges || updateFeature.isPending}
|
||||
className="neo-btn neo-btn-success flex-1"
|
||||
>
|
||||
{updateFeature.isPending ? (
|
||||
<Loader2 size={18} className="animate-spin" />
|
||||
@@ -235,17 +233,10 @@ export function EditFeatureForm({ feature, projectName, onClose, onSaved }: Edit
|
||||
Save Changes
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
className="neo-btn neo-btn-ghost"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -11,6 +11,10 @@ import { useExpandChat } from '../hooks/useExpandChat'
|
||||
import { ChatMessage } from './ChatMessage'
|
||||
import { TypingIndicator } from './TypingIndicator'
|
||||
import type { ImageAttachment } from '../lib/types'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Card, CardContent } from '@/components/ui/card'
|
||||
import { Alert, AlertDescription } from '@/components/ui/alert'
|
||||
|
||||
// Image upload validation constants
|
||||
const MAX_FILE_SIZE = 5 * 1024 * 1024 // 5 MB
|
||||
@@ -152,28 +156,28 @@ export function ExpandProjectChat({
|
||||
switch (connectionStatus) {
|
||||
case 'connected':
|
||||
return (
|
||||
<span className="flex items-center gap-1 text-xs text-neo-done">
|
||||
<span className="flex items-center gap-1 text-xs text-green-500">
|
||||
<Wifi size={12} />
|
||||
Connected
|
||||
</span>
|
||||
)
|
||||
case 'connecting':
|
||||
return (
|
||||
<span className="flex items-center gap-1 text-xs text-neo-pending">
|
||||
<span className="flex items-center gap-1 text-xs text-yellow-500">
|
||||
<Wifi size={12} className="animate-pulse" />
|
||||
Connecting...
|
||||
</span>
|
||||
)
|
||||
case 'error':
|
||||
return (
|
||||
<span className="flex items-center gap-1 text-xs text-neo-danger">
|
||||
<span className="flex items-center gap-1 text-xs text-destructive">
|
||||
<WifiOff size={12} />
|
||||
Error
|
||||
</span>
|
||||
)
|
||||
default:
|
||||
return (
|
||||
<span className="flex items-center gap-1 text-xs text-neo-text-secondary">
|
||||
<span className="flex items-center gap-1 text-xs text-muted-foreground">
|
||||
<WifiOff size={12} />
|
||||
Disconnected
|
||||
</span>
|
||||
@@ -182,16 +186,16 @@ export function ExpandProjectChat({
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full bg-neo-bg">
|
||||
<div className="flex flex-col h-full bg-background">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between p-4 border-b-3 border-neo-border bg-neo-card">
|
||||
<div className="flex items-center justify-between p-4 border-b-2 border-border bg-card">
|
||||
<div className="flex items-center gap-3">
|
||||
<h2 className="font-display font-bold text-lg text-neo-text">
|
||||
<h2 className="font-display font-bold text-lg text-foreground">
|
||||
Expand Project: {projectName}
|
||||
</h2>
|
||||
<ConnectionIndicator />
|
||||
{featuresCreated > 0 && (
|
||||
<span className="flex items-center gap-1 text-sm text-neo-done font-bold">
|
||||
<span className="flex items-center gap-1 text-sm text-green-500 font-bold">
|
||||
<Plus size={14} />
|
||||
{featuresCreated} added
|
||||
</span>
|
||||
@@ -200,57 +204,63 @@ export function ExpandProjectChat({
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
{isComplete && (
|
||||
<span className="flex items-center gap-1 text-sm text-neo-done font-bold">
|
||||
<span className="flex items-center gap-1 text-sm text-green-500 font-bold">
|
||||
<CheckCircle2 size={16} />
|
||||
Complete
|
||||
</span>
|
||||
)}
|
||||
|
||||
<button
|
||||
<Button
|
||||
onClick={onCancel}
|
||||
className="neo-btn neo-btn-ghost p-2"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
title="Close"
|
||||
>
|
||||
<X size={20} />
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Error banner */}
|
||||
{error && (
|
||||
<div className="flex items-center gap-2 p-3 bg-neo-error-bg text-neo-error-text border-b-3 border-neo-error-border">
|
||||
<Alert variant="destructive" className="rounded-none border-x-0 border-t-0">
|
||||
<AlertCircle size={16} />
|
||||
<span className="flex-1 text-sm">{error}</span>
|
||||
<button
|
||||
<AlertDescription className="flex-1">{error}</AlertDescription>
|
||||
<Button
|
||||
onClick={() => setError(null)}
|
||||
className="p-1 hover:opacity-70 transition-opacity rounded"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-6 w-6"
|
||||
>
|
||||
<X size={14} />
|
||||
</button>
|
||||
</div>
|
||||
</Button>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{/* Messages area */}
|
||||
<div className="flex-1 overflow-y-auto py-4">
|
||||
{messages.length === 0 && !isLoading && (
|
||||
<div className="flex flex-col items-center justify-center h-full text-center p-8">
|
||||
<div className="neo-card p-6 max-w-md">
|
||||
<h3 className="font-display font-bold text-lg mb-2">
|
||||
Starting Project Expansion
|
||||
</h3>
|
||||
<p className="text-sm text-neo-text-secondary">
|
||||
Connecting to Claude to help you add new features to your project...
|
||||
</p>
|
||||
{connectionStatus === 'error' && (
|
||||
<button
|
||||
onClick={start}
|
||||
className="neo-btn neo-btn-primary mt-4 text-sm"
|
||||
>
|
||||
<RotateCcw size={14} />
|
||||
Retry Connection
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<Card className="p-6 max-w-md">
|
||||
<CardContent className="p-0">
|
||||
<h3 className="font-display font-bold text-lg mb-2">
|
||||
Starting Project Expansion
|
||||
</h3>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Connecting to Claude to help you add new features to your project...
|
||||
</p>
|
||||
{connectionStatus === 'error' && (
|
||||
<Button
|
||||
onClick={start}
|
||||
className="mt-4"
|
||||
size="sm"
|
||||
>
|
||||
<RotateCcw size={14} />
|
||||
Retry Connection
|
||||
</Button>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -268,7 +278,7 @@ export function ExpandProjectChat({
|
||||
{/* Input area */}
|
||||
{!isComplete && (
|
||||
<div
|
||||
className="p-4 border-t-3 border-neo-border bg-neo-card"
|
||||
className="p-4 border-t-2 border-border bg-card"
|
||||
onDrop={handleDrop}
|
||||
onDragOver={handleDragOver}
|
||||
>
|
||||
@@ -278,22 +288,21 @@ export function ExpandProjectChat({
|
||||
{pendingAttachments.map((attachment) => (
|
||||
<div
|
||||
key={attachment.id}
|
||||
className="relative group border-2 border-neo-border p-1 bg-neo-card"
|
||||
style={{ boxShadow: 'var(--shadow-neo-sm)' }}
|
||||
className="relative group border-2 border-border p-1 bg-card rounded shadow-sm"
|
||||
>
|
||||
<img
|
||||
src={attachment.previewUrl}
|
||||
alt={attachment.filename}
|
||||
className="w-16 h-16 object-cover"
|
||||
className="w-16 h-16 object-cover rounded"
|
||||
/>
|
||||
<button
|
||||
onClick={() => handleRemoveAttachment(attachment.id)}
|
||||
className="absolute -top-2 -right-2 bg-neo-danger text-neo-text-on-bright rounded-full p-0.5 border-2 border-neo-border hover:scale-110 transition-transform"
|
||||
className="absolute -top-2 -right-2 bg-destructive text-destructive-foreground rounded-full p-0.5 border-2 border-border hover:scale-110 transition-transform"
|
||||
title="Remove attachment"
|
||||
>
|
||||
<X size={12} />
|
||||
</button>
|
||||
<span className="text-xs truncate block max-w-16 mt-1 text-center">
|
||||
<span className="text-xs truncate block max-w-16 mt-1 text-center text-muted-foreground">
|
||||
{attachment.filename.length > 10
|
||||
? `${attachment.filename.substring(0, 7)}...`
|
||||
: attachment.filename}
|
||||
@@ -315,16 +324,17 @@ export function ExpandProjectChat({
|
||||
/>
|
||||
|
||||
{/* Attach button */}
|
||||
<button
|
||||
<Button
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
disabled={connectionStatus !== 'connected'}
|
||||
className="neo-btn neo-btn-ghost p-3"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
title="Attach image (JPEG, PNG - max 5MB)"
|
||||
>
|
||||
<Paperclip size={18} />
|
||||
</button>
|
||||
</Button>
|
||||
|
||||
<input
|
||||
<Input
|
||||
ref={inputRef}
|
||||
type="text"
|
||||
value={input}
|
||||
@@ -335,24 +345,24 @@ export function ExpandProjectChat({
|
||||
? 'Add a message with your image(s)...'
|
||||
: 'Describe the features you want to add...'
|
||||
}
|
||||
className="neo-input flex-1"
|
||||
className="flex-1"
|
||||
disabled={isLoading || connectionStatus !== 'connected'}
|
||||
/>
|
||||
<button
|
||||
<Button
|
||||
onClick={handleSendMessage}
|
||||
disabled={
|
||||
(!input.trim() && pendingAttachments.length === 0) ||
|
||||
isLoading ||
|
||||
connectionStatus !== 'connected'
|
||||
}
|
||||
className="neo-btn neo-btn-primary px-6"
|
||||
className="px-6"
|
||||
>
|
||||
<Send size={18} />
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Help text */}
|
||||
<p className="text-xs text-neo-text-secondary mt-2">
|
||||
<p className="text-xs text-muted-foreground mt-2">
|
||||
Press Enter to send. Drag & drop or click <Paperclip size={12} className="inline" /> to attach images.
|
||||
</p>
|
||||
</div>
|
||||
@@ -360,7 +370,7 @@ export function ExpandProjectChat({
|
||||
|
||||
{/* Completion footer */}
|
||||
{isComplete && (
|
||||
<div className="p-4 border-t-3 border-neo-border bg-neo-done text-neo-text-on-bright">
|
||||
<div className="p-4 border-t-2 border-border bg-green-500 text-white">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<CheckCircle2 size={20} />
|
||||
@@ -368,12 +378,12 @@ export function ExpandProjectChat({
|
||||
Added {featuresCreated} new feature{featuresCreated !== 1 ? 's' : ''}!
|
||||
</span>
|
||||
</div>
|
||||
<button
|
||||
<Button
|
||||
onClick={() => onComplete(featuresCreated)}
|
||||
className="neo-btn bg-neo-card"
|
||||
variant="secondary"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -30,7 +30,7 @@ export function ExpandProjectModal({
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 bg-[var(--color-neo-bg)]">
|
||||
<div className="fixed inset-0 z-50 bg-background">
|
||||
<ExpandProjectChat
|
||||
projectName={projectName}
|
||||
onComplete={handleComplete}
|
||||
|
||||
@@ -2,26 +2,27 @@ import { CheckCircle2, Circle, Loader2, MessageCircle } from 'lucide-react'
|
||||
import type { Feature, ActiveAgent } from '../lib/types'
|
||||
import { DependencyBadge } from './DependencyBadge'
|
||||
import { AgentAvatar } from './AgentAvatar'
|
||||
import { Card, CardContent } from '@/components/ui/card'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
|
||||
interface FeatureCardProps {
|
||||
feature: Feature
|
||||
onClick: () => void
|
||||
isInProgress?: boolean
|
||||
allFeatures?: Feature[]
|
||||
activeAgent?: ActiveAgent // Agent working on this feature
|
||||
activeAgent?: ActiveAgent
|
||||
}
|
||||
|
||||
// Generate consistent color for category using CSS variable references
|
||||
// These map to the --color-neo-category-* variables defined in globals.css
|
||||
// Generate consistent color for category
|
||||
function getCategoryColor(category: string): string {
|
||||
const colors = [
|
||||
'var(--color-neo-category-pink)',
|
||||
'var(--color-neo-category-cyan)',
|
||||
'var(--color-neo-category-green)',
|
||||
'var(--color-neo-category-yellow)',
|
||||
'var(--color-neo-category-orange)',
|
||||
'var(--color-neo-category-purple)',
|
||||
'var(--color-neo-category-blue)',
|
||||
'bg-pink-500',
|
||||
'bg-cyan-500',
|
||||
'bg-green-500',
|
||||
'bg-yellow-500',
|
||||
'bg-orange-500',
|
||||
'bg-purple-500',
|
||||
'bg-blue-500',
|
||||
]
|
||||
|
||||
let hash = 0
|
||||
@@ -38,86 +39,85 @@ export function FeatureCard({ feature, onClick, isInProgress, allFeatures = [],
|
||||
const hasActiveAgent = !!activeAgent
|
||||
|
||||
return (
|
||||
<button
|
||||
<Card
|
||||
onClick={onClick}
|
||||
className={`
|
||||
w-full text-left neo-card p-4 cursor-pointer relative
|
||||
${isInProgress ? 'animate-pulse-neo' : ''}
|
||||
${feature.passes ? 'border-neo-done' : ''}
|
||||
${isBlocked && !feature.passes ? 'border-neo-danger opacity-80' : ''}
|
||||
${hasActiveAgent ? 'ring-2 ring-neo-progress ring-offset-2' : ''}
|
||||
cursor-pointer transition-all hover:border-primary py-3
|
||||
${isInProgress ? 'animate-pulse' : ''}
|
||||
${feature.passes ? 'border-primary/50' : ''}
|
||||
${isBlocked && !feature.passes ? 'border-destructive/50 opacity-80' : ''}
|
||||
${hasActiveAgent ? 'ring-2 ring-primary ring-offset-2' : ''}
|
||||
`}
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="flex items-start justify-between gap-2 mb-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<span
|
||||
className="neo-badge"
|
||||
style={{ backgroundColor: categoryColor, color: 'var(--color-neo-text-on-bright)' }}
|
||||
>
|
||||
{feature.category}
|
||||
</span>
|
||||
<DependencyBadge feature={feature} allFeatures={allFeatures} compact />
|
||||
</div>
|
||||
<span className="font-mono text-sm text-neo-text-secondary">
|
||||
#{feature.priority}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Name */}
|
||||
<h3 className="font-display font-bold mb-1 line-clamp-2">
|
||||
{feature.name}
|
||||
</h3>
|
||||
|
||||
{/* Description */}
|
||||
<p className="text-sm text-neo-text-secondary line-clamp-2 mb-3">
|
||||
{feature.description}
|
||||
</p>
|
||||
|
||||
{/* Agent working on this feature */}
|
||||
{activeAgent && (
|
||||
<div className="flex items-center gap-2 mb-3 py-2 px-2 rounded bg-[var(--color-neo-progress)]/10 border border-[var(--color-neo-progress)]/30">
|
||||
<AgentAvatar name={activeAgent.agentName} state={activeAgent.state} size="sm" />
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="text-xs font-bold text-neo-progress">
|
||||
{activeAgent.agentName} is working on this!
|
||||
</div>
|
||||
{activeAgent.thought && (
|
||||
<div className="flex items-center gap-1 mt-0.5">
|
||||
<MessageCircle size={10} className="text-neo-text-secondary shrink-0" />
|
||||
<p className="text-[10px] text-neo-text-secondary truncate italic">
|
||||
{activeAgent.thought}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
<CardContent className="p-4 space-y-3">
|
||||
{/* Header */}
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge className={`${categoryColor} text-white`}>
|
||||
{feature.category}
|
||||
</Badge>
|
||||
<DependencyBadge feature={feature} allFeatures={allFeatures} compact />
|
||||
</div>
|
||||
<span className="font-mono text-sm text-muted-foreground">
|
||||
#{feature.priority}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Status */}
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
{isInProgress ? (
|
||||
<>
|
||||
<Loader2 size={16} className="animate-spin text-neo-progress" />
|
||||
<span className="text-neo-progress font-bold">Processing...</span>
|
||||
</>
|
||||
) : feature.passes ? (
|
||||
<>
|
||||
<CheckCircle2 size={16} className="text-neo-done" />
|
||||
<span className="text-neo-done font-bold">Complete</span>
|
||||
</>
|
||||
) : isBlocked ? (
|
||||
<>
|
||||
<Circle size={16} className="text-neo-danger" />
|
||||
<span className="text-neo-danger">Blocked</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Circle size={16} className="text-neo-text-secondary" />
|
||||
<span className="text-neo-text-secondary">Pending</span>
|
||||
</>
|
||||
{/* Name */}
|
||||
<h3 className="font-semibold line-clamp-2">
|
||||
{feature.name}
|
||||
</h3>
|
||||
|
||||
{/* Description */}
|
||||
<p className="text-sm text-muted-foreground line-clamp-2">
|
||||
{feature.description}
|
||||
</p>
|
||||
|
||||
{/* Agent working on this feature */}
|
||||
{activeAgent && (
|
||||
<div className="flex items-center gap-2 py-2 px-2 rounded-md bg-primary/10 border border-primary/30">
|
||||
<AgentAvatar name={activeAgent.agentName} state={activeAgent.state} size="sm" />
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="text-xs font-semibold text-primary">
|
||||
{activeAgent.agentName} is working on this!
|
||||
</div>
|
||||
{activeAgent.thought && (
|
||||
<div className="flex items-center gap-1 mt-0.5">
|
||||
<MessageCircle size={10} className="text-muted-foreground shrink-0" />
|
||||
<p className="text-[10px] text-muted-foreground truncate italic">
|
||||
{activeAgent.thought}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</button>
|
||||
|
||||
{/* Status */}
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
{isInProgress ? (
|
||||
<>
|
||||
<Loader2 size={16} className="animate-spin text-primary" />
|
||||
<span className="text-primary font-medium">Processing...</span>
|
||||
</>
|
||||
) : feature.passes ? (
|
||||
<>
|
||||
<CheckCircle2 size={16} className="text-primary" />
|
||||
<span className="text-primary font-medium">Complete</span>
|
||||
</>
|
||||
) : isBlocked ? (
|
||||
<>
|
||||
<Circle size={16} className="text-destructive" />
|
||||
<span className="text-destructive">Blocked</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Circle size={16} className="text-muted-foreground" />
|
||||
<span className="text-muted-foreground">Pending</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -3,17 +3,28 @@ import { X, CheckCircle2, Circle, SkipForward, Trash2, Loader2, AlertCircle, Pen
|
||||
import { useSkipFeature, useDeleteFeature, useFeatures } from '../hooks/useProjects'
|
||||
import { EditFeatureForm } from './EditFeatureForm'
|
||||
import type { Feature } from '../lib/types'
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogFooter,
|
||||
} from '@/components/ui/dialog'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Alert, AlertDescription } from '@/components/ui/alert'
|
||||
import { Separator } from '@/components/ui/separator'
|
||||
|
||||
// Generate consistent color for category (matches FeatureCard pattern)
|
||||
// Generate consistent color for category
|
||||
function getCategoryColor(category: string): string {
|
||||
const colors = [
|
||||
'#ff006e', // pink (accent)
|
||||
'#00b4d8', // cyan (progress)
|
||||
'#70e000', // green (done)
|
||||
'#ffd60a', // yellow (pending)
|
||||
'#ff5400', // orange (danger)
|
||||
'#8338ec', // purple
|
||||
'#3a86ff', // blue
|
||||
'bg-pink-500',
|
||||
'bg-cyan-500',
|
||||
'bg-green-500',
|
||||
'bg-yellow-500',
|
||||
'bg-orange-500',
|
||||
'bg-purple-500',
|
||||
'bg-blue-500',
|
||||
]
|
||||
|
||||
let hash = 0
|
||||
@@ -90,109 +101,91 @@ export function FeatureModal({ feature, projectName, onClose }: FeatureModalProp
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="neo-modal-backdrop" onClick={onClose}>
|
||||
<div
|
||||
className="neo-modal w-full max-w-2xl p-0"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<Dialog open={true} onOpenChange={(open) => !open && onClose()}>
|
||||
<DialogContent className="sm:max-w-2xl p-0 gap-0">
|
||||
{/* Header */}
|
||||
<div className="flex items-start justify-between p-6 border-b-3 border-[var(--color-neo-border)]">
|
||||
<div>
|
||||
<span
|
||||
className="neo-badge mb-2"
|
||||
style={{ backgroundColor: getCategoryColor(feature.category), color: 'var(--color-neo-text-on-bright)' }}
|
||||
>
|
||||
<DialogHeader className="p-6 pb-4">
|
||||
<div className="flex items-start gap-3">
|
||||
<Badge className={`${getCategoryColor(feature.category)} text-white`}>
|
||||
{feature.category}
|
||||
</span>
|
||||
<h2 className="font-display text-2xl font-bold">
|
||||
{feature.name}
|
||||
</h2>
|
||||
</Badge>
|
||||
</div>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="neo-btn neo-btn-ghost p-2"
|
||||
>
|
||||
<X size={24} />
|
||||
</button>
|
||||
</div>
|
||||
<DialogTitle className="text-xl mt-2">{feature.name}</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<Separator />
|
||||
|
||||
{/* Content */}
|
||||
<div className="p-6 space-y-6">
|
||||
<div className="p-6 space-y-6 max-h-[60vh] overflow-y-auto">
|
||||
{/* Error Message */}
|
||||
{error && (
|
||||
<div className="flex items-center gap-3 p-4 bg-[var(--color-neo-error-bg)] text-[var(--color-neo-error-text)] border-3 border-[var(--color-neo-error-border)]">
|
||||
<AlertCircle size={20} />
|
||||
<span>{error}</span>
|
||||
<button
|
||||
onClick={() => setError(null)}
|
||||
className="ml-auto hover:opacity-70 transition-opacity"
|
||||
>
|
||||
<X size={16} />
|
||||
</button>
|
||||
</div>
|
||||
<Alert variant="destructive">
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
<AlertDescription className="flex items-center justify-between">
|
||||
<span>{error}</span>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon-xs"
|
||||
onClick={() => setError(null)}
|
||||
>
|
||||
<X size={14} />
|
||||
</Button>
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{/* Status */}
|
||||
<div className="flex items-center gap-3 p-4 bg-[var(--color-neo-bg)] border-3 border-[var(--color-neo-border)]">
|
||||
<div className="flex items-center gap-3 p-4 bg-muted rounded-lg">
|
||||
{feature.passes ? (
|
||||
<>
|
||||
<CheckCircle2 size={24} className="text-[var(--color-neo-done)]" />
|
||||
<span className="font-display font-bold text-[var(--color-neo-done)]">
|
||||
COMPLETE
|
||||
</span>
|
||||
<CheckCircle2 size={24} className="text-primary" />
|
||||
<span className="font-semibold text-primary">COMPLETE</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Circle size={24} className="text-[var(--color-neo-text-secondary)]" />
|
||||
<span className="font-display font-bold text-[var(--color-neo-text-secondary)]">
|
||||
PENDING
|
||||
</span>
|
||||
<Circle size={24} className="text-muted-foreground" />
|
||||
<span className="font-semibold text-muted-foreground">PENDING</span>
|
||||
</>
|
||||
)}
|
||||
<span className="ml-auto font-mono text-sm">
|
||||
<span className="ml-auto font-mono text-sm text-muted-foreground">
|
||||
Priority: #{feature.priority}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<div>
|
||||
<h3 className="font-display font-bold mb-2 uppercase text-sm">
|
||||
<h3 className="font-semibold mb-2 text-sm uppercase tracking-wide text-muted-foreground">
|
||||
Description
|
||||
</h3>
|
||||
<p className="text-[var(--color-neo-text-secondary)]">
|
||||
{feature.description}
|
||||
</p>
|
||||
<p className="text-foreground">{feature.description}</p>
|
||||
</div>
|
||||
|
||||
{/* Blocked By Warning */}
|
||||
{blockingDeps.length > 0 && (
|
||||
<div className="p-4 bg-[var(--color-neo-warning-bg)] border-3 border-[var(--color-neo-warning-border)]">
|
||||
<h3 className="font-display font-bold mb-2 uppercase text-sm flex items-center gap-2 text-[var(--color-neo-warning-text)]">
|
||||
<AlertTriangle size={16} />
|
||||
Blocked By
|
||||
</h3>
|
||||
<p className="text-sm text-[var(--color-neo-warning-text)] mb-2">
|
||||
This feature cannot start until the following dependencies are complete:
|
||||
</p>
|
||||
<ul className="space-y-1">
|
||||
{blockingDeps.map(dep => (
|
||||
<li
|
||||
key={dep.id}
|
||||
className="flex items-center gap-2 text-sm"
|
||||
>
|
||||
<Circle size={14} className="text-[var(--color-neo-warning-text)]" />
|
||||
<span className="font-mono text-xs text-[var(--color-neo-warning-text)]">#{dep.id}</span>
|
||||
<span className="text-[var(--color-neo-warning-text)]">{dep.name}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
<Alert variant="destructive" className="border-orange-500 bg-orange-50 dark:bg-orange-950/20">
|
||||
<AlertTriangle className="h-4 w-4 text-orange-600" />
|
||||
<AlertDescription>
|
||||
<h4 className="font-semibold mb-1 text-orange-700 dark:text-orange-400">Blocked By</h4>
|
||||
<p className="text-sm text-orange-600 dark:text-orange-300 mb-2">
|
||||
This feature cannot start until the following dependencies are complete:
|
||||
</p>
|
||||
<ul className="space-y-1">
|
||||
{blockingDeps.map(dep => (
|
||||
<li key={dep.id} className="flex items-center gap-2 text-sm text-orange-600 dark:text-orange-300">
|
||||
<Circle size={14} />
|
||||
<span className="font-mono text-xs">#{dep.id}</span>
|
||||
<span>{dep.name}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{/* Dependencies */}
|
||||
{dependencies.length > 0 && (
|
||||
<div>
|
||||
<h3 className="font-display font-bold mb-2 uppercase text-sm flex items-center gap-2">
|
||||
<h3 className="font-semibold mb-2 text-sm uppercase tracking-wide text-muted-foreground flex items-center gap-2">
|
||||
<Link2 size={16} />
|
||||
Depends On
|
||||
</h3>
|
||||
@@ -200,15 +193,15 @@ export function FeatureModal({ feature, projectName, onClose }: FeatureModalProp
|
||||
{dependencies.map(dep => (
|
||||
<li
|
||||
key={dep.id}
|
||||
className="flex items-center gap-2 p-2 bg-[var(--color-neo-bg)] border-2 border-[var(--color-neo-border)]"
|
||||
className="flex items-center gap-2 p-2 bg-muted rounded-md text-sm"
|
||||
>
|
||||
{dep.passes ? (
|
||||
<CheckCircle2 size={16} className="text-[var(--color-neo-done)]" />
|
||||
<CheckCircle2 size={16} className="text-primary" />
|
||||
) : (
|
||||
<Circle size={16} className="text-[var(--color-neo-text-secondary)]" />
|
||||
<Circle size={16} className="text-muted-foreground" />
|
||||
)}
|
||||
<span className="font-mono text-xs text-[var(--color-neo-text-secondary)]">#{dep.id}</span>
|
||||
<span className={dep.passes ? 'text-[var(--color-neo-done)]' : ''}>{dep.name}</span>
|
||||
<span className="font-mono text-xs text-muted-foreground">#{dep.id}</span>
|
||||
<span className={dep.passes ? 'text-primary' : ''}>{dep.name}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
@@ -218,14 +211,14 @@ export function FeatureModal({ feature, projectName, onClose }: FeatureModalProp
|
||||
{/* Steps */}
|
||||
{feature.steps.length > 0 && (
|
||||
<div>
|
||||
<h3 className="font-display font-bold mb-2 uppercase text-sm">
|
||||
<h3 className="font-semibold mb-2 text-sm uppercase tracking-wide text-muted-foreground">
|
||||
Test Steps
|
||||
</h3>
|
||||
<ol className="list-decimal list-inside space-y-2">
|
||||
{feature.steps.map((step, index) => (
|
||||
<li
|
||||
key={index}
|
||||
className="p-3 bg-[var(--color-neo-bg)] border-3 border-[var(--color-neo-border)]"
|
||||
className="p-3 bg-muted rounded-md text-sm"
|
||||
>
|
||||
{step}
|
||||
</li>
|
||||
@@ -237,69 +230,76 @@ export function FeatureModal({ feature, projectName, onClose }: FeatureModalProp
|
||||
|
||||
{/* Actions */}
|
||||
{!feature.passes && (
|
||||
<div className="p-6 border-t-3 border-[var(--color-neo-border)] bg-[var(--color-neo-bg)]">
|
||||
{showDeleteConfirm ? (
|
||||
<div className="space-y-4">
|
||||
<p className="font-bold text-center">
|
||||
Are you sure you want to delete this feature?
|
||||
</p>
|
||||
<div className="flex gap-3">
|
||||
<button
|
||||
onClick={handleDelete}
|
||||
disabled={deleteFeature.isPending}
|
||||
className="neo-btn neo-btn-danger flex-1"
|
||||
<>
|
||||
<Separator />
|
||||
<DialogFooter className="p-4 bg-muted/50">
|
||||
{showDeleteConfirm ? (
|
||||
<div className="w-full space-y-4">
|
||||
<p className="font-medium text-center">
|
||||
Are you sure you want to delete this feature?
|
||||
</p>
|
||||
<div className="flex gap-3">
|
||||
<Button
|
||||
variant="destructive"
|
||||
onClick={handleDelete}
|
||||
disabled={deleteFeature.isPending}
|
||||
className="flex-1"
|
||||
>
|
||||
{deleteFeature.isPending ? (
|
||||
<Loader2 size={18} className="animate-spin" />
|
||||
) : (
|
||||
'Yes, Delete'
|
||||
)}
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setShowDeleteConfirm(false)}
|
||||
disabled={deleteFeature.isPending}
|
||||
className="flex-1"
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex gap-3 w-full">
|
||||
<Button
|
||||
onClick={() => setShowEdit(true)}
|
||||
disabled={skipFeature.isPending}
|
||||
className="flex-1"
|
||||
>
|
||||
{deleteFeature.isPending ? (
|
||||
<Pencil size={18} />
|
||||
Edit
|
||||
</Button>
|
||||
<Button
|
||||
variant="secondary"
|
||||
onClick={handleSkip}
|
||||
disabled={skipFeature.isPending}
|
||||
className="flex-1"
|
||||
>
|
||||
{skipFeature.isPending ? (
|
||||
<Loader2 size={18} className="animate-spin" />
|
||||
) : (
|
||||
'Yes, Delete'
|
||||
<>
|
||||
<SkipForward size={18} />
|
||||
Skip
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setShowDeleteConfirm(false)}
|
||||
disabled={deleteFeature.isPending}
|
||||
className="neo-btn neo-btn-ghost flex-1"
|
||||
</Button>
|
||||
<Button
|
||||
variant="destructive"
|
||||
size="icon"
|
||||
onClick={() => setShowDeleteConfirm(true)}
|
||||
disabled={skipFeature.isPending}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<Trash2 size={18} />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex gap-3">
|
||||
<button
|
||||
onClick={() => setShowEdit(true)}
|
||||
disabled={skipFeature.isPending}
|
||||
className="neo-btn neo-btn-primary flex-1"
|
||||
>
|
||||
<Pencil size={18} />
|
||||
Edit
|
||||
</button>
|
||||
<button
|
||||
onClick={handleSkip}
|
||||
disabled={skipFeature.isPending}
|
||||
className="neo-btn neo-btn-warning flex-1"
|
||||
>
|
||||
{skipFeature.isPending ? (
|
||||
<Loader2 size={18} className="animate-spin" />
|
||||
) : (
|
||||
<>
|
||||
<SkipForward size={18} />
|
||||
Skip
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setShowDeleteConfirm(true)}
|
||||
disabled={skipFeature.isPending}
|
||||
className="neo-btn neo-btn-danger"
|
||||
>
|
||||
<Trash2 size={18} />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</DialogFooter>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -19,6 +19,9 @@ import {
|
||||
} from 'lucide-react'
|
||||
import * as api from '../lib/api'
|
||||
import type { DirectoryEntry, DriveInfo } from '../lib/types'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Card, CardContent } from '@/components/ui/card'
|
||||
|
||||
interface FolderBrowserProps {
|
||||
onSelect: (path: string) => void
|
||||
@@ -139,37 +142,36 @@ export function FolderBrowser({ onSelect, onCancel, initialPath }: FolderBrowser
|
||||
return (
|
||||
<div className="flex flex-col h-full max-h-[70vh]">
|
||||
{/* Header with breadcrumb navigation */}
|
||||
<div className="flex-shrink-0 p-4 border-b-3 border-[var(--color-neo-border)] bg-[var(--color-neo-card)]">
|
||||
<div className="flex-shrink-0 p-4 border-b bg-card">
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<Folder size={20} className="text-[var(--color-neo-progress)]" />
|
||||
<span className="font-bold text-[var(--color-neo-text)]">Select Project Folder</span>
|
||||
<Folder size={20} className="text-primary" />
|
||||
<span className="font-semibold">Select Project Folder</span>
|
||||
</div>
|
||||
|
||||
{/* Breadcrumb navigation */}
|
||||
<div className="flex items-center gap-1 flex-wrap text-sm">
|
||||
{directoryData?.parent_path && (
|
||||
<button
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon-sm"
|
||||
onClick={handleNavigateUp}
|
||||
className="neo-btn neo-btn-ghost p-1"
|
||||
title="Go up"
|
||||
>
|
||||
<ArrowLeft size={16} />
|
||||
</button>
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{breadcrumbs.map((crumb, index) => (
|
||||
<div key={crumb.path} className="flex items-center">
|
||||
{index > 0 && <ChevronRight size={14} className="text-[var(--color-neo-text-muted)] mx-1" />}
|
||||
<button
|
||||
{index > 0 && <ChevronRight size={14} className="text-muted-foreground mx-1" />}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => handleNavigate(crumb.path)}
|
||||
className={`
|
||||
px-2 py-1 rounded text-[var(--color-neo-text)]
|
||||
hover:bg-[var(--color-neo-bg)]
|
||||
${index === breadcrumbs.length - 1 ? 'font-bold' : ''}
|
||||
`}
|
||||
className={index === breadcrumbs.length - 1 ? 'font-semibold' : ''}
|
||||
>
|
||||
{crumb.name}
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
@@ -177,162 +179,161 @@ export function FolderBrowser({ onSelect, onCancel, initialPath }: FolderBrowser
|
||||
|
||||
{/* Drive selector (Windows only) */}
|
||||
{directoryData?.drives && directoryData.drives.length > 0 && (
|
||||
<div className="flex-shrink-0 p-3 border-b-3 border-[var(--color-neo-border)] bg-[var(--color-neo-bg)]">
|
||||
<div className="flex-shrink-0 p-3 border-b bg-muted/50">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<span className="text-sm font-medium text-[var(--color-neo-text-secondary)]">Drives:</span>
|
||||
<span className="text-sm font-medium text-muted-foreground">Drives:</span>
|
||||
{directoryData.drives.map((drive) => (
|
||||
<button
|
||||
<Button
|
||||
key={drive.letter}
|
||||
variant={currentPath?.startsWith(drive.letter) ? 'default' : 'outline'}
|
||||
size="sm"
|
||||
onClick={() => handleDriveSelect(drive)}
|
||||
className={`
|
||||
neo-btn neo-btn-ghost py-1 px-2 text-sm
|
||||
flex items-center gap-1
|
||||
${currentPath?.startsWith(drive.letter) ? 'bg-[var(--color-neo-progress)] text-[var(--color-neo-text-on-bright)]' : ''}
|
||||
`}
|
||||
>
|
||||
<HardDrive size={14} />
|
||||
{drive.letter}: {drive.label && `(${drive.label})`}
|
||||
</button>
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Directory listing */}
|
||||
<div className="flex-1 overflow-y-auto p-2 bg-[var(--color-neo-card)]">
|
||||
{isLoading ? (
|
||||
<div className="flex items-center justify-center p-8">
|
||||
<Loader2 size={24} className="animate-spin text-[var(--color-neo-progress)]" />
|
||||
</div>
|
||||
) : error ? (
|
||||
<div className="p-4 text-center">
|
||||
<AlertCircle size={32} className="mx-auto mb-2 text-[var(--color-neo-danger)]" />
|
||||
<p className="text-[var(--color-neo-danger)]">
|
||||
{error instanceof Error ? error.message : 'Failed to load directory'}
|
||||
</p>
|
||||
<button onClick={() => refetch()} className="neo-btn neo-btn-ghost mt-2">
|
||||
Retry
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 gap-1">
|
||||
{/* Directory entries - only show directories */}
|
||||
{directoryData?.entries
|
||||
.filter((entry) => entry.is_directory)
|
||||
.map((entry) => (
|
||||
<button
|
||||
key={entry.path}
|
||||
onClick={() => handleEntryClick(entry)}
|
||||
onDoubleClick={() => handleNavigate(entry.path)}
|
||||
className={`
|
||||
w-full text-left p-2 rounded
|
||||
flex items-center gap-2
|
||||
hover:bg-[var(--color-neo-bg)]
|
||||
border-2 border-transparent
|
||||
text-[var(--color-neo-text)]
|
||||
${selectedPath === entry.path ? 'bg-[var(--color-neo-progress)] bg-opacity-10 border-[var(--color-neo-progress)]' : ''}
|
||||
`}
|
||||
>
|
||||
{selectedPath === entry.path ? (
|
||||
<FolderOpen size={18} className="text-[var(--color-neo-progress)] flex-shrink-0" />
|
||||
) : (
|
||||
<Folder size={18} className="text-[var(--color-neo-pending)] flex-shrink-0" />
|
||||
)}
|
||||
<span className="truncate flex-1 text-[var(--color-neo-text)]">{entry.name}</span>
|
||||
{entry.has_children && (
|
||||
<ChevronRight size={14} className="ml-auto text-[var(--color-neo-text-muted)] flex-shrink-0" />
|
||||
)}
|
||||
</button>
|
||||
))}
|
||||
|
||||
{/* Empty state */}
|
||||
{directoryData?.entries.filter((e) => e.is_directory).length === 0 && (
|
||||
<div className="p-4 text-center text-[var(--color-neo-text-secondary)]">
|
||||
<Folder size={32} className="mx-auto mb-2 opacity-50" />
|
||||
<p>No subfolders</p>
|
||||
<p className="text-sm">You can create a new folder or select this directory.</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* New folder creation */}
|
||||
{isCreatingFolder && (
|
||||
<div className="mt-2 p-3 bg-[var(--color-neo-bg)] border-2 border-[var(--color-neo-border)] rounded">
|
||||
<div className="flex items-center gap-2">
|
||||
<FolderPlus size={18} className="text-[var(--color-neo-progress)]" />
|
||||
<input
|
||||
type="text"
|
||||
value={newFolderName}
|
||||
onChange={(e) => setNewFolderName(e.target.value)}
|
||||
placeholder="New folder name"
|
||||
className="neo-input flex-1 py-1"
|
||||
autoFocus
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') handleCreateFolder()
|
||||
if (e.key === 'Escape') {
|
||||
setIsCreatingFolder(false)
|
||||
setNewFolderName('')
|
||||
setCreateError(null)
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<button onClick={handleCreateFolder} className="neo-btn neo-btn-primary py-1 px-3">
|
||||
Create
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
setIsCreatingFolder(false)
|
||||
setNewFolderName('')
|
||||
setCreateError(null)
|
||||
}}
|
||||
className="neo-btn neo-btn-ghost py-1 px-2"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<div className="flex-1 min-h-0 overflow-y-auto bg-card">
|
||||
<div className="p-2">
|
||||
{isLoading ? (
|
||||
<div className="flex items-center justify-center p-8">
|
||||
<Loader2 size={24} className="animate-spin text-primary" />
|
||||
</div>
|
||||
{createError && (
|
||||
<p className="text-sm text-[var(--color-neo-danger)] mt-1">{createError}</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
) : error ? (
|
||||
<div className="p-4 text-center">
|
||||
<AlertCircle size={32} className="mx-auto mb-2 text-destructive" />
|
||||
<p className="text-destructive">
|
||||
{error instanceof Error ? error.message : 'Failed to load directory'}
|
||||
</p>
|
||||
<Button variant="outline" size="sm" onClick={() => refetch()} className="mt-2">
|
||||
Retry
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 gap-1">
|
||||
{/* Directory entries - only show directories */}
|
||||
{directoryData?.entries
|
||||
.filter((entry) => entry.is_directory)
|
||||
.map((entry) => (
|
||||
<button
|
||||
key={entry.path}
|
||||
onClick={() => handleEntryClick(entry)}
|
||||
onDoubleClick={() => handleNavigate(entry.path)}
|
||||
className={`
|
||||
w-full text-left p-2 rounded-md
|
||||
flex items-center gap-2
|
||||
hover:bg-muted
|
||||
border-2 border-transparent transition-colors
|
||||
${selectedPath === entry.path ? 'bg-primary/10 border-primary' : ''}
|
||||
`}
|
||||
>
|
||||
{selectedPath === entry.path ? (
|
||||
<FolderOpen size={18} className="text-primary flex-shrink-0" />
|
||||
) : (
|
||||
<Folder size={18} className="text-muted-foreground flex-shrink-0" />
|
||||
)}
|
||||
<span className="truncate flex-1">{entry.name}</span>
|
||||
{entry.has_children && (
|
||||
<ChevronRight size={14} className="ml-auto text-muted-foreground flex-shrink-0" />
|
||||
)}
|
||||
</button>
|
||||
))}
|
||||
|
||||
{/* Empty state */}
|
||||
{directoryData?.entries.filter((e) => e.is_directory).length === 0 && (
|
||||
<div className="p-4 text-center text-muted-foreground">
|
||||
<Folder size={32} className="mx-auto mb-2 opacity-50" />
|
||||
<p>No subfolders</p>
|
||||
<p className="text-sm">You can create a new folder or select this directory.</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* New folder creation */}
|
||||
{isCreatingFolder && (
|
||||
<Card className="mt-2">
|
||||
<CardContent className="p-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<FolderPlus size={18} className="text-primary" />
|
||||
<Input
|
||||
type="text"
|
||||
value={newFolderName}
|
||||
onChange={(e) => setNewFolderName(e.target.value)}
|
||||
placeholder="New folder name"
|
||||
className="flex-1"
|
||||
autoFocus
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') handleCreateFolder()
|
||||
if (e.key === 'Escape') {
|
||||
setIsCreatingFolder(false)
|
||||
setNewFolderName('')
|
||||
setCreateError(null)
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<Button onClick={handleCreateFolder} size="sm">
|
||||
Create
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
setIsCreatingFolder(false)
|
||||
setNewFolderName('')
|
||||
setCreateError(null)
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</div>
|
||||
{createError && (
|
||||
<p className="text-sm text-destructive mt-1">{createError}</p>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer with selected path and actions */}
|
||||
<div className="flex-shrink-0 p-4 border-t-3 border-[var(--color-neo-border)] bg-[var(--color-neo-card)]">
|
||||
<div className="flex-shrink-0 p-4 border-t bg-card">
|
||||
{/* Selected path display */}
|
||||
<div className="mb-3 p-2 bg-[var(--color-neo-bg)] rounded border-2 border-[var(--color-neo-border)]">
|
||||
<div className="text-xs text-[var(--color-neo-text-secondary)] mb-1">Selected path:</div>
|
||||
<div className="font-mono text-sm truncate text-[var(--color-neo-text)]">{selectedPath || 'No folder selected'}</div>
|
||||
{selectedPath && (
|
||||
<div className="text-xs text-[var(--color-neo-text-secondary)] mt-2 italic">
|
||||
This folder will contain all project files
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<Card className="mb-3">
|
||||
<CardContent className="p-2">
|
||||
<div className="text-xs text-muted-foreground mb-1">Selected path:</div>
|
||||
<div className="font-mono text-sm truncate">{selectedPath || 'No folder selected'}</div>
|
||||
{selectedPath && (
|
||||
<div className="text-xs text-muted-foreground mt-2 italic">
|
||||
This folder will contain all project files
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex items-center justify-between">
|
||||
<button
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setIsCreatingFolder(true)}
|
||||
className="neo-btn neo-btn-ghost"
|
||||
disabled={isCreatingFolder}
|
||||
>
|
||||
<FolderPlus size={16} />
|
||||
New Folder
|
||||
</button>
|
||||
</Button>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<button onClick={onCancel} className="neo-btn neo-btn-ghost">
|
||||
<Button variant="outline" onClick={onCancel}>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={handleSelect}
|
||||
className="neo-btn neo-btn-primary"
|
||||
disabled={!selectedPath}
|
||||
>
|
||||
</Button>
|
||||
<Button onClick={handleSelect} disabled={!selectedPath}>
|
||||
Select This Folder
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { KanbanColumn } from './KanbanColumn'
|
||||
import type { Feature, FeatureListResponse, ActiveAgent } from '../lib/types'
|
||||
import { Card, CardContent } from '@/components/ui/card'
|
||||
|
||||
interface KanbanBoardProps {
|
||||
features: FeatureListResponse | undefined
|
||||
@@ -7,8 +8,8 @@ interface KanbanBoardProps {
|
||||
onAddFeature?: () => void
|
||||
onExpandProject?: () => void
|
||||
activeAgents?: ActiveAgent[]
|
||||
onCreateSpec?: () => void // Callback to start spec creation
|
||||
hasSpec?: boolean // Whether the project has a spec
|
||||
onCreateSpec?: () => void
|
||||
hasSpec?: boolean
|
||||
}
|
||||
|
||||
export function KanbanBoard({ features, onFeatureClick, onAddFeature, onExpandProject, activeAgents = [], onCreateSpec, hasSpec = true }: KanbanBoardProps) {
|
||||
@@ -23,14 +24,16 @@ export function KanbanBoard({ features, onFeatureClick, onAddFeature, onExpandPr
|
||||
return (
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
{['Pending', 'In Progress', 'Done'].map(title => (
|
||||
<div key={title} className="neo-card p-4">
|
||||
<div className="h-8 bg-[var(--color-neo-bg)] animate-pulse mb-4" />
|
||||
<div className="space-y-3">
|
||||
{[1, 2, 3].map(i => (
|
||||
<div key={i} className="h-24 bg-[var(--color-neo-bg)] animate-pulse" />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<Card key={title} className="py-4">
|
||||
<CardContent className="p-4">
|
||||
<div className="h-8 bg-muted animate-pulse rounded mb-4" />
|
||||
<div className="space-y-3">
|
||||
{[1, 2, 3].map(i => (
|
||||
<div key={i} className="h-24 bg-muted animate-pulse rounded" />
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -1,26 +1,29 @@
|
||||
import { FeatureCard } from './FeatureCard'
|
||||
import { Plus, Sparkles, Wand2 } from 'lucide-react'
|
||||
import type { Feature, ActiveAgent } from '../lib/types'
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
|
||||
interface KanbanColumnProps {
|
||||
title: string
|
||||
count: number
|
||||
features: Feature[]
|
||||
allFeatures?: Feature[] // For dependency status calculation
|
||||
activeAgents?: ActiveAgent[] // Active agents for showing which agent is working on a feature
|
||||
allFeatures?: Feature[]
|
||||
activeAgents?: ActiveAgent[]
|
||||
color: 'pending' | 'progress' | 'done'
|
||||
onFeatureClick: (feature: Feature) => void
|
||||
onAddFeature?: () => void
|
||||
onExpandProject?: () => void
|
||||
showExpandButton?: boolean
|
||||
onCreateSpec?: () => void // Callback to start spec creation
|
||||
showCreateSpec?: boolean // Show "Create Spec" button when project has no spec
|
||||
onCreateSpec?: () => void
|
||||
showCreateSpec?: boolean
|
||||
}
|
||||
|
||||
const colorMap = {
|
||||
pending: 'kanban-header-pending',
|
||||
progress: 'kanban-header-progress',
|
||||
done: 'kanban-header-done',
|
||||
pending: 'border-t-4 border-t-muted',
|
||||
progress: 'border-t-4 border-t-primary',
|
||||
done: 'border-t-4 border-t-primary',
|
||||
}
|
||||
|
||||
export function KanbanColumn({
|
||||
@@ -41,81 +44,78 @@ export function KanbanColumn({
|
||||
const agentByFeatureId = new Map(
|
||||
activeAgents.map(agent => [agent.featureId, agent])
|
||||
)
|
||||
return (
|
||||
<div
|
||||
className={`neo-card overflow-hidden kanban-column ${colorMap[color]}`}
|
||||
>
|
||||
{/* Header */}
|
||||
<div
|
||||
className="kanban-header px-4 py-3 border-b border-[var(--color-neo-border)]"
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="font-display text-lg font-semibold flex items-center gap-2 text-[var(--color-neo-text)]">
|
||||
{title}
|
||||
<span className="neo-badge bg-[var(--color-neo-neutral-100)] text-[var(--color-neo-text-secondary)]">{count}</span>
|
||||
</h2>
|
||||
{(onAddFeature || onExpandProject) && (
|
||||
<div className="flex items-center gap-2">
|
||||
{onAddFeature && (
|
||||
<button
|
||||
onClick={onAddFeature}
|
||||
className="neo-btn neo-btn-primary text-sm py-1.5 px-2"
|
||||
title="Add new feature (N)"
|
||||
>
|
||||
<Plus size={16} />
|
||||
</button>
|
||||
)}
|
||||
{onExpandProject && showExpandButton && (
|
||||
<button
|
||||
onClick={onExpandProject}
|
||||
className="neo-btn bg-[var(--color-neo-progress)] text-[var(--color-neo-text-on-bright)] text-sm py-1.5 px-2"
|
||||
title="Expand project with AI (E)"
|
||||
>
|
||||
<Sparkles size={16} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Cards */}
|
||||
<div className="p-4 space-y-3 max-h-[600px] overflow-y-auto bg-[var(--color-neo-bg)]">
|
||||
{features.length === 0 ? (
|
||||
<div className="text-center py-8 text-[var(--color-neo-text-secondary)]">
|
||||
{showCreateSpec && onCreateSpec ? (
|
||||
<div className="space-y-4">
|
||||
<p>No spec created yet</p>
|
||||
<button
|
||||
onClick={onCreateSpec}
|
||||
className="neo-btn neo-btn-primary inline-flex items-center gap-2"
|
||||
>
|
||||
<Wand2 size={18} />
|
||||
Create Spec with AI
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
'No features'
|
||||
return (
|
||||
<Card className={`overflow-hidden ${colorMap[color]} py-0`}>
|
||||
{/* Header */}
|
||||
<CardHeader className="px-4 py-3 border-b flex-row items-center justify-between space-y-0">
|
||||
<CardTitle className="text-lg font-semibold flex items-center gap-2">
|
||||
{title}
|
||||
<Badge variant="secondary">{count}</Badge>
|
||||
</CardTitle>
|
||||
{(onAddFeature || onExpandProject) && (
|
||||
<div className="flex items-center gap-2">
|
||||
{onAddFeature && (
|
||||
<Button
|
||||
onClick={onAddFeature}
|
||||
size="icon-sm"
|
||||
title="Add new feature (N)"
|
||||
>
|
||||
<Plus size={16} />
|
||||
</Button>
|
||||
)}
|
||||
{onExpandProject && showExpandButton && (
|
||||
<Button
|
||||
onClick={onExpandProject}
|
||||
size="icon-sm"
|
||||
variant="secondary"
|
||||
title="Expand project with AI (E)"
|
||||
>
|
||||
<Sparkles size={16} />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
features.map((feature, index) => (
|
||||
<div
|
||||
key={feature.id}
|
||||
className="animate-slide-in"
|
||||
style={{ animationDelay: `${index * 50}ms` }}
|
||||
>
|
||||
<FeatureCard
|
||||
feature={feature}
|
||||
onClick={() => onFeatureClick(feature)}
|
||||
isInProgress={color === 'progress'}
|
||||
allFeatures={allFeatures}
|
||||
activeAgent={agentByFeatureId.get(feature.id)}
|
||||
/>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
|
||||
{/* Cards */}
|
||||
<CardContent className="p-0">
|
||||
<div className="h-[600px] overflow-y-auto">
|
||||
<div className="p-4 space-y-3">
|
||||
{features.length === 0 ? (
|
||||
<div className="text-center py-8 text-muted-foreground">
|
||||
{showCreateSpec && onCreateSpec ? (
|
||||
<div className="space-y-4">
|
||||
<p>No spec created yet</p>
|
||||
<Button onClick={onCreateSpec}>
|
||||
<Wand2 size={18} />
|
||||
Create Spec with AI
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
'No features'
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
features.map((feature, index) => (
|
||||
<div
|
||||
key={feature.id}
|
||||
className="animate-slide-in"
|
||||
style={{ animationDelay: `${index * 50}ms` }}
|
||||
>
|
||||
<FeatureCard
|
||||
feature={feature}
|
||||
onClick={() => onFeatureClick(feature)}
|
||||
isInProgress={color === 'progress'}
|
||||
allFeatures={allFeatures}
|
||||
activeAgent={agentByFeatureId.get(feature.id)}
|
||||
/>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,5 +1,12 @@
|
||||
import { useEffect, useCallback } from 'react'
|
||||
import { X, Keyboard } from 'lucide-react'
|
||||
import { Keyboard } from 'lucide-react'
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
|
||||
interface Shortcut {
|
||||
key: string
|
||||
@@ -20,10 +27,11 @@ const shortcuts: Shortcut[] = [
|
||||
]
|
||||
|
||||
interface KeyboardShortcutsHelpProps {
|
||||
isOpen: boolean
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
export function KeyboardShortcutsHelp({ onClose }: KeyboardShortcutsHelpProps) {
|
||||
export function KeyboardShortcutsHelp({ isOpen, onClose }: KeyboardShortcutsHelpProps) {
|
||||
const handleKeyDown = useCallback(
|
||||
(e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape' || e.key === '?') {
|
||||
@@ -35,59 +43,49 @@ export function KeyboardShortcutsHelp({ onClose }: KeyboardShortcutsHelpProps) {
|
||||
)
|
||||
|
||||
useEffect(() => {
|
||||
window.addEventListener('keydown', handleKeyDown)
|
||||
return () => window.removeEventListener('keydown', handleKeyDown)
|
||||
}, [handleKeyDown])
|
||||
if (isOpen) {
|
||||
window.addEventListener('keydown', handleKeyDown)
|
||||
return () => window.removeEventListener('keydown', handleKeyDown)
|
||||
}
|
||||
}, [isOpen, handleKeyDown])
|
||||
|
||||
return (
|
||||
<div
|
||||
className="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
|
||||
onClick={onClose}
|
||||
>
|
||||
<div
|
||||
className="neo-card p-6 max-w-md w-full mx-4"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<div className="flex items-center gap-2">
|
||||
<Keyboard size={20} className="text-neo-accent" />
|
||||
<h2 className="font-display text-lg font-bold">Keyboard Shortcuts</h2>
|
||||
</div>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="neo-btn p-1.5"
|
||||
aria-label="Close"
|
||||
>
|
||||
<X size={16} />
|
||||
</button>
|
||||
</div>
|
||||
<Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
|
||||
<DialogContent className="sm:max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="flex items-center gap-2">
|
||||
<Keyboard size={20} className="text-primary" />
|
||||
Keyboard Shortcuts
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
{/* Shortcuts list */}
|
||||
<ul className="space-y-2">
|
||||
<ul className="space-y-1">
|
||||
{shortcuts.map((shortcut) => (
|
||||
<li
|
||||
key={shortcut.key}
|
||||
className="flex items-center justify-between py-2 border-b border-neo-border/30 last:border-0"
|
||||
className="flex items-center justify-between py-2 border-b border-border/50 last:border-0"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<kbd className="px-2 py-1 text-sm font-mono bg-neo-bg rounded border border-neo-border shadow-neo-sm min-w-[2rem] text-center">
|
||||
<div className="flex items-center gap-3">
|
||||
<kbd className="px-2 py-1 text-xs font-mono bg-muted rounded border border-border min-w-[2rem] text-center">
|
||||
{shortcut.key}
|
||||
</kbd>
|
||||
<span className="text-neo-text">{shortcut.description}</span>
|
||||
<span className="text-sm">{shortcut.description}</span>
|
||||
</div>
|
||||
{shortcut.context && (
|
||||
<span className="text-xs text-neo-muted">{shortcut.context}</span>
|
||||
<Badge variant="secondary" className="text-xs">
|
||||
{shortcut.context}
|
||||
</Badge>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
{/* Footer */}
|
||||
<p className="text-xs text-neo-muted text-center mt-6">
|
||||
<p className="text-xs text-muted-foreground text-center pt-2">
|
||||
Press ? or Esc to close
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -10,11 +10,25 @@
|
||||
*/
|
||||
|
||||
import { useState } from 'react'
|
||||
import { X, Bot, FileEdit, ArrowRight, ArrowLeft, Loader2, CheckCircle2, Folder } from 'lucide-react'
|
||||
import { Bot, FileEdit, ArrowRight, ArrowLeft, Loader2, CheckCircle2, Folder } from 'lucide-react'
|
||||
import { useCreateProject } from '../hooks/useProjects'
|
||||
import { SpecCreationChat } from './SpecCreationChat'
|
||||
import { FolderBrowser } from './FolderBrowser'
|
||||
import { startAgent } from '../lib/api'
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
} from '@/components/ui/dialog'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { Alert, AlertDescription } from '@/components/ui/alert'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Card, CardContent } from '@/components/ui/card'
|
||||
|
||||
type InitializerStatus = 'idle' | 'starting' | 'error'
|
||||
|
||||
@@ -75,7 +89,7 @@ export function NewProjectModal({
|
||||
}
|
||||
|
||||
const handleFolderSelect = (path: string) => {
|
||||
setProjectPath(path) // Use selected path directly - no subfolder creation
|
||||
setProjectPath(path)
|
||||
changeStep('method')
|
||||
}
|
||||
|
||||
@@ -189,7 +203,7 @@ export function NewProjectModal({
|
||||
// Full-screen chat view
|
||||
if (step === 'chat') {
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 bg-[var(--color-neo-bg)]">
|
||||
<div className="fixed inset-0 z-50 bg-background">
|
||||
<SpecCreationChat
|
||||
projectName={projectName.trim()}
|
||||
onComplete={handleSpecComplete}
|
||||
@@ -206,31 +220,20 @@ export function NewProjectModal({
|
||||
// Folder step uses larger modal
|
||||
if (step === 'folder') {
|
||||
return (
|
||||
<div className="neo-modal-backdrop" onClick={handleClose}>
|
||||
<div
|
||||
className="neo-modal w-full max-w-3xl max-h-[85vh] flex flex-col"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<Dialog open={true} onOpenChange={(open) => !open && handleClose()}>
|
||||
<DialogContent className="sm:max-w-3xl max-h-[85vh] flex flex-col p-0">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between p-4 border-b-3 border-[var(--color-neo-border)]">
|
||||
<DialogHeader className="p-6 pb-4 border-b">
|
||||
<div className="flex items-center gap-3">
|
||||
<Folder size={24} className="text-[var(--color-neo-progress)]" />
|
||||
<Folder size={24} className="text-primary" />
|
||||
<div>
|
||||
<h2 className="font-display font-bold text-xl text-[var(--color-neo-text)]">
|
||||
Select Project Location
|
||||
</h2>
|
||||
<p className="text-sm text-[var(--color-neo-text-secondary)]">
|
||||
Select the folder to use for project <span className="font-bold font-mono">{projectName}</span>. Create a new folder or choose an existing one.
|
||||
</p>
|
||||
<DialogTitle>Select Project Location</DialogTitle>
|
||||
<DialogDescription>
|
||||
Select the folder to use for project <span className="font-semibold font-mono">{projectName}</span>. Create a new folder or choose an existing one.
|
||||
</DialogDescription>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={handleClose}
|
||||
className="neo-btn neo-btn-ghost p-2"
|
||||
>
|
||||
<X size={20} />
|
||||
</button>
|
||||
</div>
|
||||
</DialogHeader>
|
||||
|
||||
{/* Folder Browser */}
|
||||
<div className="flex-1 overflow-hidden">
|
||||
@@ -239,193 +242,151 @@ export function NewProjectModal({
|
||||
onCancel={handleFolderCancel}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="neo-modal-backdrop" onClick={handleClose}>
|
||||
<div
|
||||
className="neo-modal w-full max-w-lg"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between p-4 border-b-3 border-[var(--color-neo-border)]">
|
||||
<h2 className="font-display font-bold text-xl text-[var(--color-neo-text)]">
|
||||
<Dialog open={true} onOpenChange={(open) => !open && handleClose()}>
|
||||
<DialogContent className="sm:max-w-lg">
|
||||
<DialogHeader>
|
||||
<DialogTitle>
|
||||
{step === 'name' && 'Create New Project'}
|
||||
{step === 'method' && 'Choose Setup Method'}
|
||||
{step === 'complete' && 'Project Created!'}
|
||||
</h2>
|
||||
<button
|
||||
onClick={handleClose}
|
||||
className="neo-btn neo-btn-ghost p-2"
|
||||
>
|
||||
<X size={20} />
|
||||
</button>
|
||||
</div>
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
{/* Content */}
|
||||
<div className="p-6">
|
||||
{/* Step 1: Project Name */}
|
||||
{step === 'name' && (
|
||||
<form onSubmit={handleNameSubmit}>
|
||||
<div className="mb-6">
|
||||
<label className="block font-bold mb-2 text-[var(--color-neo-text)]">
|
||||
Project Name
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={projectName}
|
||||
onChange={(e) => setProjectName(e.target.value)}
|
||||
placeholder="my-awesome-app"
|
||||
className="neo-input"
|
||||
pattern="^[a-zA-Z0-9_-]+$"
|
||||
autoFocus
|
||||
/>
|
||||
<p className="text-sm text-[var(--color-neo-text-secondary)] mt-2">
|
||||
Use letters, numbers, hyphens, and underscores only.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="mb-4 p-3 bg-[var(--color-neo-error-bg)] text-[var(--color-neo-error-text)] text-sm border-3 border-[var(--color-neo-error-border)]">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex justify-end">
|
||||
<button
|
||||
type="submit"
|
||||
className="neo-btn neo-btn-primary"
|
||||
disabled={!projectName.trim()}
|
||||
>
|
||||
Next
|
||||
<ArrowRight size={16} />
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
|
||||
{/* Step 2: Spec Method */}
|
||||
{step === 'method' && (
|
||||
<div>
|
||||
<p className="text-[var(--color-neo-text-secondary)] mb-6">
|
||||
How would you like to define your project?
|
||||
{/* Step 1: Project Name */}
|
||||
{step === 'name' && (
|
||||
<form onSubmit={handleNameSubmit} className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="project-name">Project Name</Label>
|
||||
<Input
|
||||
id="project-name"
|
||||
type="text"
|
||||
value={projectName}
|
||||
onChange={(e) => setProjectName(e.target.value)}
|
||||
placeholder="my-awesome-app"
|
||||
pattern="^[a-zA-Z0-9_-]+$"
|
||||
autoFocus
|
||||
/>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Use letters, numbers, hyphens, and underscores only.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
{/* Claude option */}
|
||||
<button
|
||||
onClick={() => handleMethodSelect('claude')}
|
||||
disabled={createProject.isPending}
|
||||
className="
|
||||
w-full text-left p-4
|
||||
hover:translate-x-[-2px] hover:translate-y-[-2px]
|
||||
transition-all duration-150
|
||||
disabled:opacity-50 disabled:cursor-not-allowed
|
||||
neo-card
|
||||
"
|
||||
>
|
||||
{error && (
|
||||
<Alert variant="destructive">
|
||||
<AlertDescription>{error}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<DialogFooter>
|
||||
<Button type="submit" disabled={!projectName.trim()}>
|
||||
Next
|
||||
<ArrowRight size={16} />
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
)}
|
||||
|
||||
{/* Step 2: Spec Method */}
|
||||
{step === 'method' && (
|
||||
<div className="space-y-4">
|
||||
<DialogDescription>
|
||||
How would you like to define your project?
|
||||
</DialogDescription>
|
||||
|
||||
<div className="space-y-3">
|
||||
{/* Claude option */}
|
||||
<Card
|
||||
className="cursor-pointer hover:border-primary transition-colors"
|
||||
onClick={() => !createProject.isPending && handleMethodSelect('claude')}
|
||||
>
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-start gap-4">
|
||||
<div
|
||||
className="p-2 bg-[var(--color-neo-progress)] border-2 border-[var(--color-neo-border)]"
|
||||
style={{ boxShadow: 'var(--shadow-neo-sm)' }}
|
||||
>
|
||||
<Bot size={24} className="text-[var(--color-neo-text-on-bright)]" />
|
||||
<div className="p-2 bg-primary/10 rounded-lg">
|
||||
<Bot size={24} className="text-primary" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-bold text-lg text-[var(--color-neo-text)]">Create with Claude</span>
|
||||
<span className="neo-badge bg-[var(--color-neo-done)] text-[var(--color-neo-text-on-bright)] text-xs">
|
||||
Recommended
|
||||
</span>
|
||||
<span className="font-semibold">Create with Claude</span>
|
||||
<Badge>Recommended</Badge>
|
||||
</div>
|
||||
<p className="text-sm text-[var(--color-neo-text-secondary)] mt-1">
|
||||
<p className="text-sm text-muted-foreground mt-1">
|
||||
Interactive conversation to define features and generate your app specification automatically.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Manual option */}
|
||||
<button
|
||||
onClick={() => handleMethodSelect('manual')}
|
||||
disabled={createProject.isPending}
|
||||
className="
|
||||
w-full text-left p-4
|
||||
hover:translate-x-[-2px] hover:translate-y-[-2px]
|
||||
transition-all duration-150
|
||||
disabled:opacity-50 disabled:cursor-not-allowed
|
||||
neo-card
|
||||
"
|
||||
>
|
||||
{/* Manual option */}
|
||||
<Card
|
||||
className="cursor-pointer hover:border-primary transition-colors"
|
||||
onClick={() => !createProject.isPending && handleMethodSelect('manual')}
|
||||
>
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-start gap-4">
|
||||
<div
|
||||
className="p-2 bg-[var(--color-neo-pending)] border-2 border-[var(--color-neo-border)]"
|
||||
style={{ boxShadow: 'var(--shadow-neo-sm)' }}
|
||||
>
|
||||
<FileEdit size={24} className="text-[var(--color-neo-text-on-bright)]" />
|
||||
<div className="p-2 bg-secondary rounded-lg">
|
||||
<FileEdit size={24} className="text-secondary-foreground" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<span className="font-bold text-lg text-[var(--color-neo-text)]">Edit Templates Manually</span>
|
||||
<p className="text-sm text-[var(--color-neo-text-secondary)] mt-1">
|
||||
<span className="font-semibold">Edit Templates Manually</span>
|
||||
<p className="text-sm text-muted-foreground mt-1">
|
||||
Edit the template files directly. Best for developers who want full control.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="mt-4 p-3 bg-[var(--color-neo-error-bg)] text-[var(--color-neo-error-text)] text-sm border-3 border-[var(--color-neo-error-border)]">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{createProject.isPending && (
|
||||
<div className="mt-4 flex items-center justify-center gap-2 text-[var(--color-neo-text-secondary)]">
|
||||
<Loader2 size={16} className="animate-spin" />
|
||||
<span>Creating project...</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex justify-start mt-6">
|
||||
<button
|
||||
onClick={handleBack}
|
||||
className="neo-btn neo-btn-ghost"
|
||||
disabled={createProject.isPending}
|
||||
>
|
||||
<ArrowLeft size={16} />
|
||||
Back
|
||||
</button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Step 3: Complete */}
|
||||
{step === 'complete' && (
|
||||
<div className="text-center py-8">
|
||||
<div
|
||||
className="inline-flex items-center justify-center w-16 h-16 bg-[var(--color-neo-done)] border-3 border-[var(--color-neo-border)] mb-4"
|
||||
style={{ boxShadow: 'var(--shadow-neo-md)' }}
|
||||
>
|
||||
<CheckCircle2 size={32} className="text-[var(--color-neo-text-on-bright)]" />
|
||||
</div>
|
||||
<h3 className="font-display font-bold text-xl mb-2">
|
||||
{projectName}
|
||||
</h3>
|
||||
<p className="text-[var(--color-neo-text-secondary)]">
|
||||
Your project has been created successfully!
|
||||
</p>
|
||||
<div className="mt-4 flex items-center justify-center gap-2">
|
||||
{error && (
|
||||
<Alert variant="destructive">
|
||||
<AlertDescription>{error}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{createProject.isPending && (
|
||||
<div className="flex items-center justify-center gap-2 text-muted-foreground">
|
||||
<Loader2 size={16} className="animate-spin" />
|
||||
<span className="text-sm">Redirecting...</span>
|
||||
<span>Creating project...</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<DialogFooter className="sm:justify-start">
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={handleBack}
|
||||
disabled={createProject.isPending}
|
||||
>
|
||||
<ArrowLeft size={16} />
|
||||
Back
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Step 3: Complete */}
|
||||
{step === 'complete' && (
|
||||
<div className="text-center py-8">
|
||||
<div className="inline-flex items-center justify-center w-16 h-16 bg-primary/10 rounded-full mb-4">
|
||||
<CheckCircle2 size={32} className="text-primary" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h3 className="font-semibold text-xl mb-2">{projectName}</h3>
|
||||
<p className="text-muted-foreground">
|
||||
Your project has been created successfully!
|
||||
</p>
|
||||
<div className="mt-4 flex items-center justify-center gap-2">
|
||||
<Loader2 size={16} className="animate-spin" />
|
||||
<span className="text-sm text-muted-foreground">Redirecting...</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -2,6 +2,9 @@ import { useState } from 'react'
|
||||
import { ChevronDown, ChevronUp, Code, FlaskConical, Clock, Lock, Sparkles } from 'lucide-react'
|
||||
import { OrchestratorAvatar } from './OrchestratorAvatar'
|
||||
import type { OrchestratorStatus, OrchestratorState } from '../lib/types'
|
||||
import { Card, CardContent } from '@/components/ui/card'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
|
||||
interface OrchestratorStatusCardProps {
|
||||
status: OrchestratorStatus
|
||||
@@ -31,16 +34,16 @@ function getStateText(state: OrchestratorState): string {
|
||||
function getStateColor(state: OrchestratorState): string {
|
||||
switch (state) {
|
||||
case 'complete':
|
||||
return 'text-neo-done'
|
||||
return 'text-primary'
|
||||
case 'spawning':
|
||||
return 'text-[#7C3AED]' // Violet
|
||||
return 'text-violet-600 dark:text-violet-400'
|
||||
case 'scheduling':
|
||||
case 'monitoring':
|
||||
return 'text-neo-progress'
|
||||
return 'text-primary'
|
||||
case 'initializing':
|
||||
return 'text-neo-pending'
|
||||
return 'text-yellow-600 dark:text-yellow-400'
|
||||
default:
|
||||
return 'text-neo-text-secondary'
|
||||
return 'text-muted-foreground'
|
||||
}
|
||||
}
|
||||
|
||||
@@ -62,91 +65,95 @@ export function OrchestratorStatusCard({ status }: OrchestratorStatusCardProps)
|
||||
const [showEvents, setShowEvents] = useState(false)
|
||||
|
||||
return (
|
||||
<div className="neo-card p-4 bg-gradient-to-r from-[#EDE9FE] to-[#F3E8FF] border-[#7C3AED]/30 mb-4">
|
||||
<div className="flex items-start gap-4">
|
||||
{/* Avatar */}
|
||||
<OrchestratorAvatar state={status.state} size="md" />
|
||||
<Card className="mb-4 bg-gradient-to-r from-violet-50 to-purple-50 dark:from-violet-950/30 dark:to-purple-950/30 border-violet-200 dark:border-violet-800/50 py-4">
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-start gap-4">
|
||||
{/* Avatar */}
|
||||
<OrchestratorAvatar state={status.state} size="md" />
|
||||
|
||||
{/* Main content */}
|
||||
<div className="flex-1 min-w-0">
|
||||
{/* Header row */}
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<span className="font-display font-bold text-lg text-[#7C3AED]">
|
||||
Maestro
|
||||
</span>
|
||||
<span className={`text-sm font-medium ${getStateColor(status.state)}`}>
|
||||
{getStateText(status.state)}
|
||||
</span>
|
||||
{/* Main content */}
|
||||
<div className="flex-1 min-w-0">
|
||||
{/* Header row */}
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<span className="font-semibold text-lg text-violet-700 dark:text-violet-300">
|
||||
Maestro
|
||||
</span>
|
||||
<span className={`text-sm font-medium ${getStateColor(status.state)}`}>
|
||||
{getStateText(status.state)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Current message */}
|
||||
<p className="text-sm text-foreground mb-3 line-clamp-2">
|
||||
{status.message}
|
||||
</p>
|
||||
|
||||
{/* Status badges row */}
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
{/* Coding agents badge */}
|
||||
<Badge variant="outline" className="bg-blue-100 text-blue-700 border-blue-300 dark:bg-blue-900/30 dark:text-blue-300 dark:border-blue-700">
|
||||
<Code size={12} />
|
||||
Coding: {status.codingAgents}
|
||||
</Badge>
|
||||
|
||||
{/* Testing agents badge */}
|
||||
<Badge variant="outline" className="bg-purple-100 text-purple-700 border-purple-300 dark:bg-purple-900/30 dark:text-purple-300 dark:border-purple-700">
|
||||
<FlaskConical size={12} />
|
||||
Testing: {status.testingAgents}
|
||||
</Badge>
|
||||
|
||||
{/* Ready queue badge */}
|
||||
<Badge variant="outline" className="bg-green-100 text-green-700 border-green-300 dark:bg-green-900/30 dark:text-green-300 dark:border-green-700">
|
||||
<Clock size={12} />
|
||||
Ready: {status.readyCount}
|
||||
</Badge>
|
||||
|
||||
{/* Blocked badge (only show if > 0) */}
|
||||
{status.blockedCount > 0 && (
|
||||
<Badge variant="outline" className="bg-amber-100 text-amber-700 border-amber-300 dark:bg-amber-900/30 dark:text-amber-300 dark:border-amber-700">
|
||||
<Lock size={12} />
|
||||
Blocked: {status.blockedCount}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Current message */}
|
||||
<p className="text-sm text-neo-text mb-3 line-clamp-2">
|
||||
{status.message}
|
||||
</p>
|
||||
|
||||
{/* Status badges row */}
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
{/* Coding agents badge */}
|
||||
<div className="inline-flex items-center gap-1.5 px-2 py-1 bg-blue-100 text-blue-700 rounded border border-blue-300 text-xs font-bold">
|
||||
<Code size={12} />
|
||||
<span>Coding: {status.codingAgents}</span>
|
||||
</div>
|
||||
|
||||
{/* Testing agents badge */}
|
||||
<div className="inline-flex items-center gap-1.5 px-2 py-1 bg-purple-100 text-purple-700 rounded border border-purple-300 text-xs font-bold">
|
||||
<FlaskConical size={12} />
|
||||
<span>Testing: {status.testingAgents}</span>
|
||||
</div>
|
||||
|
||||
{/* Ready queue badge */}
|
||||
<div className="inline-flex items-center gap-1.5 px-2 py-1 bg-green-100 text-green-700 rounded border border-green-300 text-xs font-bold">
|
||||
<Clock size={12} />
|
||||
<span>Ready: {status.readyCount}</span>
|
||||
</div>
|
||||
|
||||
{/* Blocked badge (only show if > 0) */}
|
||||
{status.blockedCount > 0 && (
|
||||
<div className="inline-flex items-center gap-1.5 px-2 py-1 bg-amber-100 text-amber-700 rounded border border-amber-300 text-xs font-bold">
|
||||
<Lock size={12} />
|
||||
<span>Blocked: {status.blockedCount}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{/* Recent events toggle */}
|
||||
{status.recentEvents.length > 0 && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setShowEvents(!showEvents)}
|
||||
className="text-violet-600 dark:text-violet-400 hover:bg-violet-100 dark:hover:bg-violet-900/30"
|
||||
>
|
||||
<Sparkles size={12} />
|
||||
Activity
|
||||
{showEvents ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Recent events toggle */}
|
||||
{status.recentEvents.length > 0 && (
|
||||
<button
|
||||
onClick={() => setShowEvents(!showEvents)}
|
||||
className="flex items-center gap-1 px-2 py-1 text-xs font-medium text-[#7C3AED] hover:bg-[#7C3AED]/10 rounded transition-colors"
|
||||
>
|
||||
<Sparkles size={12} />
|
||||
<span>Activity</span>
|
||||
{showEvents ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
|
||||
</button>
|
||||
{/* Collapsible recent events */}
|
||||
{showEvents && status.recentEvents.length > 0 && (
|
||||
<div className="mt-3 pt-3 border-t border-violet-200 dark:border-violet-800/50">
|
||||
<div className="space-y-1.5">
|
||||
{status.recentEvents.map((event, idx) => (
|
||||
<div
|
||||
key={`${event.timestamp}-${idx}`}
|
||||
className="flex items-start gap-2 text-xs"
|
||||
>
|
||||
<span className="text-violet-500 dark:text-violet-400 shrink-0 font-mono">
|
||||
{formatRelativeTime(event.timestamp)}
|
||||
</span>
|
||||
<span className="text-foreground">
|
||||
{event.message}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Collapsible recent events */}
|
||||
{showEvents && status.recentEvents.length > 0 && (
|
||||
<div className="mt-3 pt-3 border-t border-[#7C3AED]/20">
|
||||
<div className="space-y-1.5">
|
||||
{status.recentEvents.map((event, idx) => (
|
||||
<div
|
||||
key={`${event.timestamp}-${idx}`}
|
||||
className="flex items-start gap-2 text-xs"
|
||||
>
|
||||
<span className="text-[#A78BFA] shrink-0 font-mono">
|
||||
{formatRelativeTime(event.timestamp)}
|
||||
</span>
|
||||
<span className="text-neo-text">
|
||||
{event.message}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
import { Wifi, WifiOff } from 'lucide-react'
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
|
||||
interface ProgressDashboardProps {
|
||||
passing: number
|
||||
@@ -14,66 +16,68 @@ export function ProgressDashboard({
|
||||
isConnected,
|
||||
}: ProgressDashboardProps) {
|
||||
return (
|
||||
<div className="neo-card p-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h2 className="font-display text-xl font-bold uppercase">
|
||||
<Card>
|
||||
<CardHeader className="flex-row items-center justify-between space-y-0 pb-4">
|
||||
<CardTitle className="text-xl uppercase tracking-wide">
|
||||
Progress
|
||||
</h2>
|
||||
<div className="flex items-center gap-2">
|
||||
</CardTitle>
|
||||
<Badge variant={isConnected ? 'default' : 'destructive'} className="gap-1">
|
||||
{isConnected ? (
|
||||
<>
|
||||
<Wifi size={16} className="text-[var(--color-neo-done)]" />
|
||||
<span className="text-sm text-[var(--color-neo-done)]">Live</span>
|
||||
<Wifi size={14} />
|
||||
Live
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<WifiOff size={16} className="text-[var(--color-neo-danger)]" />
|
||||
<span className="text-sm text-[var(--color-neo-danger)]">Offline</span>
|
||||
<WifiOff size={14} />
|
||||
Offline
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Badge>
|
||||
</CardHeader>
|
||||
|
||||
{/* Large Percentage */}
|
||||
<div className="text-center mb-6">
|
||||
<span className="inline-flex items-baseline">
|
||||
<span className="font-display text-6xl font-bold">
|
||||
{percentage.toFixed(1)}
|
||||
</span>
|
||||
<span className="font-display text-3xl font-bold text-[var(--color-neo-text-secondary)]">
|
||||
%
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Progress Bar */}
|
||||
<div className="neo-progress mb-4">
|
||||
<div
|
||||
className="neo-progress-fill"
|
||||
style={{ width: `${percentage}%` }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Stats */}
|
||||
<div className="flex justify-center gap-8 text-center">
|
||||
<div>
|
||||
<span className="font-mono text-3xl font-bold text-[var(--color-neo-done)]">
|
||||
{passing}
|
||||
</span>
|
||||
<span className="block text-sm text-[var(--color-neo-text-secondary)] uppercase">
|
||||
Passing
|
||||
<CardContent>
|
||||
{/* Large Percentage */}
|
||||
<div className="text-center mb-6">
|
||||
<span className="inline-flex items-baseline">
|
||||
<span className="text-6xl font-bold tabular-nums">
|
||||
{percentage.toFixed(1)}
|
||||
</span>
|
||||
<span className="text-3xl font-semibold text-muted-foreground">
|
||||
%
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-4xl text-[var(--color-neo-text-secondary)]">/</div>
|
||||
<div>
|
||||
<span className="font-mono text-3xl font-bold">
|
||||
{total}
|
||||
</span>
|
||||
<span className="block text-sm text-[var(--color-neo-text-secondary)] uppercase">
|
||||
Total
|
||||
</span>
|
||||
|
||||
{/* Progress Bar */}
|
||||
<div className="h-3 bg-muted rounded-full overflow-hidden mb-6">
|
||||
<div
|
||||
className="h-full bg-primary rounded-full transition-all duration-500 ease-out"
|
||||
style={{ width: `${percentage}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stats */}
|
||||
<div className="flex justify-center gap-8 text-center">
|
||||
<div>
|
||||
<span className="font-mono text-3xl font-bold text-primary">
|
||||
{passing}
|
||||
</span>
|
||||
<span className="block text-sm text-muted-foreground uppercase">
|
||||
Passing
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-4xl text-muted-foreground">/</div>
|
||||
<div>
|
||||
<span className="font-mono text-3xl font-bold">
|
||||
{total}
|
||||
</span>
|
||||
<span className="block text-sm text-muted-foreground uppercase">
|
||||
Total
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -4,6 +4,15 @@ import type { ProjectSummary } from '../lib/types'
|
||||
import { NewProjectModal } from './NewProjectModal'
|
||||
import { ConfirmDialog } from './ConfirmDialog'
|
||||
import { useDeleteProject } from '../hooks/useProjects'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from '@/components/ui/dropdown-menu'
|
||||
|
||||
interface ProjectSelectorProps {
|
||||
projects: ProjectSummary[]
|
||||
@@ -32,8 +41,8 @@ export function ProjectSelector({
|
||||
}
|
||||
|
||||
const handleDeleteClick = (e: React.MouseEvent, projectName: string) => {
|
||||
// Prevent the click from selecting the project
|
||||
e.stopPropagation()
|
||||
e.preventDefault()
|
||||
setProjectToDelete(projectName)
|
||||
}
|
||||
|
||||
@@ -42,13 +51,11 @@ export function ProjectSelector({
|
||||
|
||||
try {
|
||||
await deleteProject.mutateAsync(projectToDelete)
|
||||
// If the deleted project was selected, clear the selection
|
||||
if (selectedProject === projectToDelete) {
|
||||
onSelectProject(null)
|
||||
}
|
||||
setProjectToDelete(null)
|
||||
} catch (error) {
|
||||
// Error is handled by the mutation, just close the dialog
|
||||
console.error('Failed to delete project:', error)
|
||||
setProjectToDelete(null)
|
||||
}
|
||||
@@ -62,106 +69,86 @@ export function ProjectSelector({
|
||||
|
||||
return (
|
||||
<div className="relative">
|
||||
{/* Dropdown Trigger */}
|
||||
<button
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
className="neo-btn bg-[var(--color-neo-card)] text-[var(--color-neo-text)] min-w-[200px] justify-between"
|
||||
disabled={isLoading}
|
||||
>
|
||||
{isLoading ? (
|
||||
<Loader2 size={18} className="animate-spin" />
|
||||
) : selectedProject ? (
|
||||
<>
|
||||
<span className="flex items-center gap-2">
|
||||
<FolderOpen size={18} />
|
||||
{selectedProject}
|
||||
</span>
|
||||
{selectedProjectData && selectedProjectData.stats.total > 0 && (
|
||||
<span className="neo-badge bg-[var(--color-neo-done)] ml-2">
|
||||
{selectedProjectData.stats.percentage}%
|
||||
</span>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<span className="text-[var(--color-neo-text-secondary)]">
|
||||
Select Project
|
||||
</span>
|
||||
)}
|
||||
<ChevronDown size={18} className={`transition-transform ${isOpen ? 'rotate-180' : ''}`} />
|
||||
</button>
|
||||
|
||||
{/* Dropdown Menu */}
|
||||
{isOpen && (
|
||||
<>
|
||||
{/* Backdrop */}
|
||||
<div
|
||||
className="fixed inset-0 z-40"
|
||||
onClick={() => setIsOpen(false)}
|
||||
/>
|
||||
|
||||
{/* Menu */}
|
||||
<div className="absolute top-full left-0 mt-2 w-full neo-dropdown z-50 min-w-[280px]">
|
||||
{projects.length > 0 ? (
|
||||
<div className="max-h-[300px] overflow-auto">
|
||||
{projects.map(project => (
|
||||
<div
|
||||
key={project.name}
|
||||
className={`flex items-center ${
|
||||
project.name === selectedProject
|
||||
? 'bg-[var(--color-neo-pending)] text-[var(--color-neo-text-on-bright)]'
|
||||
: ''
|
||||
}`}
|
||||
>
|
||||
<button
|
||||
onClick={() => {
|
||||
onSelectProject(project.name)
|
||||
setIsOpen(false)
|
||||
}}
|
||||
className="flex-1 neo-dropdown-item flex items-center justify-between"
|
||||
>
|
||||
<span className="flex items-center gap-2">
|
||||
<FolderOpen size={16} />
|
||||
{project.name}
|
||||
</span>
|
||||
{project.stats.total > 0 && (
|
||||
<span className="text-sm font-mono">
|
||||
{project.stats.passing}/{project.stats.total}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
<button
|
||||
onClick={(e) => handleDeleteClick(e, project.name)}
|
||||
className="p-2 mr-2 text-[var(--color-neo-text-secondary)] hover:text-[var(--color-neo-danger)] hover:bg-[var(--color-neo-danger)]/10 transition-colors rounded"
|
||||
title={`Delete ${project.name}`}
|
||||
>
|
||||
<Trash2 size={16} />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<DropdownMenu open={isOpen} onOpenChange={setIsOpen}>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="min-w-[200px] justify-between"
|
||||
disabled={isLoading}
|
||||
>
|
||||
{isLoading ? (
|
||||
<Loader2 size={18} className="animate-spin" />
|
||||
) : selectedProject ? (
|
||||
<>
|
||||
<span className="flex items-center gap-2">
|
||||
<FolderOpen size={18} />
|
||||
{selectedProject}
|
||||
</span>
|
||||
{selectedProjectData && selectedProjectData.stats.total > 0 && (
|
||||
<Badge className="ml-2">{selectedProjectData.stats.percentage}%</Badge>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<div className="p-4 text-center text-[var(--color-neo-text-secondary)]">
|
||||
No projects yet
|
||||
</div>
|
||||
<span className="text-muted-foreground">Select Project</span>
|
||||
)}
|
||||
<ChevronDown size={18} className={`transition-transform ${isOpen ? 'rotate-180' : ''}`} />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
|
||||
{/* Divider */}
|
||||
<div className="border-t-3 border-[var(--color-neo-border)]" />
|
||||
<DropdownMenuContent align="start" className="w-[280px] p-0 flex flex-col">
|
||||
{projects.length > 0 ? (
|
||||
<div className="max-h-[300px] overflow-y-auto p-1">
|
||||
{projects.map(project => (
|
||||
<DropdownMenuItem
|
||||
key={project.name}
|
||||
className={`flex items-center justify-between cursor-pointer ${
|
||||
project.name === selectedProject ? 'bg-primary/10' : ''
|
||||
}`}
|
||||
onSelect={() => {
|
||||
onSelectProject(project.name)
|
||||
}}
|
||||
>
|
||||
<span className="flex items-center gap-2 flex-1">
|
||||
<FolderOpen size={16} />
|
||||
{project.name}
|
||||
{project.stats.total > 0 && (
|
||||
<span className="text-sm font-mono text-muted-foreground ml-auto">
|
||||
{project.stats.passing}/{project.stats.total}
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon-xs"
|
||||
onClick={(e) => handleDeleteClick(e, project.name)}
|
||||
className="text-muted-foreground hover:text-destructive"
|
||||
>
|
||||
<Trash2 size={14} />
|
||||
</Button>
|
||||
</DropdownMenuItem>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="p-4 text-center text-muted-foreground">
|
||||
No projects yet
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Create New */}
|
||||
<button
|
||||
onClick={() => {
|
||||
<DropdownMenuSeparator className="my-0" />
|
||||
|
||||
<div className="p-1">
|
||||
<DropdownMenuItem
|
||||
onSelect={() => {
|
||||
setShowNewProjectModal(true)
|
||||
setIsOpen(false)
|
||||
}}
|
||||
className="w-full neo-dropdown-item flex items-center gap-2 font-bold"
|
||||
className="cursor-pointer font-semibold"
|
||||
>
|
||||
<Plus size={16} />
|
||||
New Project
|
||||
</button>
|
||||
</DropdownMenuItem>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
|
||||
{/* New Project Modal */}
|
||||
<NewProjectModal
|
||||
|
||||
@@ -2,12 +2,16 @@
|
||||
* Question Options Component
|
||||
*
|
||||
* Renders structured questions from AskUserQuestion tool.
|
||||
* Shows clickable option buttons in neobrutalism style.
|
||||
* Shows clickable option buttons.
|
||||
*/
|
||||
|
||||
import { useState } from 'react'
|
||||
import { Check } from 'lucide-react'
|
||||
import type { SpecQuestion } from '../lib/types'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Card, CardContent } from '@/components/ui/card'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
|
||||
interface QuestionOptionsProps {
|
||||
questions: SpecQuestion[]
|
||||
@@ -91,165 +95,126 @@ export function QuestionOptions({
|
||||
return (
|
||||
<div className="space-y-6 p-4">
|
||||
{questions.map((q, questionIdx) => (
|
||||
<div
|
||||
key={questionIdx}
|
||||
className="neo-card p-4 bg-[var(--color-neo-card)]"
|
||||
>
|
||||
{/* Question header */}
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<span className="neo-badge bg-[var(--color-neo-accent)] text-[var(--color-neo-text-on-bright)]">
|
||||
{q.header}
|
||||
</span>
|
||||
<span className="font-bold text-[var(--color-neo-text)]">
|
||||
{q.question}
|
||||
</span>
|
||||
{q.multiSelect && (
|
||||
<span className="text-xs text-[var(--color-neo-text-secondary)] font-mono">
|
||||
(select multiple)
|
||||
<Card key={questionIdx}>
|
||||
<CardContent className="p-4">
|
||||
{/* Question header */}
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<Badge>{q.header}</Badge>
|
||||
<span className="font-bold text-foreground">
|
||||
{q.question}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Options grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
{q.options.map((opt, optIdx) => {
|
||||
const isSelected = isOptionSelected(questionIdx, opt.label, q.multiSelect)
|
||||
|
||||
return (
|
||||
<button
|
||||
key={optIdx}
|
||||
onClick={() => handleOptionClick(questionIdx, opt.label, q.multiSelect)}
|
||||
disabled={disabled}
|
||||
className={`
|
||||
text-left p-4
|
||||
border-3 border-[var(--color-neo-border)]
|
||||
transition-all duration-150
|
||||
${
|
||||
isSelected
|
||||
? 'bg-[var(--color-neo-pending)] translate-x-[1px] translate-y-[1px]'
|
||||
: 'bg-[var(--color-neo-card)] hover:translate-x-[-1px] hover:translate-y-[-1px]'
|
||||
}
|
||||
disabled:opacity-50 disabled:cursor-not-allowed
|
||||
`}
|
||||
style={{
|
||||
boxShadow: isSelected ? 'var(--shadow-neo-sm)' : 'var(--shadow-neo-md)',
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
if (!isSelected && !disabled) {
|
||||
e.currentTarget.style.boxShadow = 'var(--shadow-neo-lg)'
|
||||
}
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
if (!isSelected && !disabled) {
|
||||
e.currentTarget.style.boxShadow = 'var(--shadow-neo-md)'
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div className="flex items-start gap-2">
|
||||
{/* Checkbox/Radio indicator */}
|
||||
<div
|
||||
className={`
|
||||
w-5 h-5 flex-shrink-0 mt-0.5
|
||||
border-2 border-[var(--color-neo-border)]
|
||||
flex items-center justify-center
|
||||
${q.multiSelect ? '' : 'rounded-full'}
|
||||
${isSelected ? 'bg-[var(--color-neo-done)]' : 'bg-[var(--color-neo-card)]'}
|
||||
`}
|
||||
>
|
||||
{isSelected && <Check size={12} strokeWidth={3} />}
|
||||
</div>
|
||||
|
||||
<div className="flex-1">
|
||||
<div className="font-bold text-[var(--color-neo-text)]">
|
||||
{opt.label}
|
||||
</div>
|
||||
<div className="text-sm text-[var(--color-neo-text-secondary)] mt-1">
|
||||
{opt.description}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
|
||||
{/* "Other" option */}
|
||||
<button
|
||||
onClick={() => handleOptionClick(questionIdx, 'Other', q.multiSelect)}
|
||||
disabled={disabled}
|
||||
className={`
|
||||
text-left p-4
|
||||
border-3 border-[var(--color-neo-border)]
|
||||
transition-all duration-150
|
||||
${
|
||||
showCustomInput[String(questionIdx)]
|
||||
? 'bg-[var(--color-neo-pending)] translate-x-[1px] translate-y-[1px]'
|
||||
: 'bg-[var(--color-neo-card)] hover:translate-x-[-1px] hover:translate-y-[-1px]'
|
||||
}
|
||||
disabled:opacity-50 disabled:cursor-not-allowed
|
||||
`}
|
||||
style={{
|
||||
boxShadow: showCustomInput[String(questionIdx)] ? 'var(--shadow-neo-sm)' : 'var(--shadow-neo-md)',
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
if (!showCustomInput[String(questionIdx)] && !disabled) {
|
||||
e.currentTarget.style.boxShadow = 'var(--shadow-neo-lg)'
|
||||
}
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
if (!showCustomInput[String(questionIdx)] && !disabled) {
|
||||
e.currentTarget.style.boxShadow = 'var(--shadow-neo-md)'
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div className="flex items-start gap-2">
|
||||
<div
|
||||
className={`
|
||||
w-5 h-5 flex-shrink-0 mt-0.5
|
||||
border-2 border-[var(--color-neo-border)]
|
||||
flex items-center justify-center
|
||||
${q.multiSelect ? '' : 'rounded-full'}
|
||||
${showCustomInput[String(questionIdx)] ? 'bg-[var(--color-neo-done)]' : 'bg-[var(--color-neo-card)]'}
|
||||
`}
|
||||
>
|
||||
{showCustomInput[String(questionIdx)] && <Check size={12} strokeWidth={3} />}
|
||||
</div>
|
||||
|
||||
<div className="flex-1">
|
||||
<div className="font-bold text-[var(--color-neo-text)]">Other</div>
|
||||
<div className="text-sm text-[var(--color-neo-text-secondary)] mt-1">
|
||||
Provide a custom answer
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Custom input field */}
|
||||
{showCustomInput[String(questionIdx)] && (
|
||||
<div className="mt-4">
|
||||
<input
|
||||
type="text"
|
||||
value={customInputs[String(questionIdx)] || ''}
|
||||
onChange={(e) => handleCustomInputChange(questionIdx, e.target.value)}
|
||||
placeholder="Type your answer..."
|
||||
className="neo-input"
|
||||
autoFocus
|
||||
disabled={disabled}
|
||||
/>
|
||||
{q.multiSelect && (
|
||||
<span className="text-xs text-muted-foreground font-mono">
|
||||
(select multiple)
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Options grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
{q.options.map((opt, optIdx) => {
|
||||
const isSelected = isOptionSelected(questionIdx, opt.label, q.multiSelect)
|
||||
|
||||
return (
|
||||
<button
|
||||
key={optIdx}
|
||||
onClick={() => handleOptionClick(questionIdx, opt.label, q.multiSelect)}
|
||||
disabled={disabled}
|
||||
className={`
|
||||
text-left p-4 rounded-lg border-2 transition-all duration-150
|
||||
${
|
||||
isSelected
|
||||
? 'bg-primary/10 border-primary'
|
||||
: 'bg-card border-border hover:border-primary/50 hover:bg-muted'
|
||||
}
|
||||
disabled:opacity-50 disabled:cursor-not-allowed
|
||||
`}
|
||||
>
|
||||
<div className="flex items-start gap-2">
|
||||
{/* Checkbox/Radio indicator */}
|
||||
<div
|
||||
className={`
|
||||
w-5 h-5 flex-shrink-0 mt-0.5 border-2 flex items-center justify-center
|
||||
${q.multiSelect ? 'rounded' : 'rounded-full'}
|
||||
${isSelected ? 'bg-primary border-primary text-primary-foreground' : 'border-border bg-background'}
|
||||
`}
|
||||
>
|
||||
{isSelected && <Check size={12} strokeWidth={3} />}
|
||||
</div>
|
||||
|
||||
<div className="flex-1">
|
||||
<div className="font-bold text-foreground">
|
||||
{opt.label}
|
||||
</div>
|
||||
<div className="text-sm text-muted-foreground mt-1">
|
||||
{opt.description}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
|
||||
{/* "Other" option */}
|
||||
<button
|
||||
onClick={() => handleOptionClick(questionIdx, 'Other', q.multiSelect)}
|
||||
disabled={disabled}
|
||||
className={`
|
||||
text-left p-4 rounded-lg border-2 transition-all duration-150
|
||||
${
|
||||
showCustomInput[String(questionIdx)]
|
||||
? 'bg-primary/10 border-primary'
|
||||
: 'bg-card border-border hover:border-primary/50 hover:bg-muted'
|
||||
}
|
||||
disabled:opacity-50 disabled:cursor-not-allowed
|
||||
`}
|
||||
>
|
||||
<div className="flex items-start gap-2">
|
||||
<div
|
||||
className={`
|
||||
w-5 h-5 flex-shrink-0 mt-0.5 border-2 flex items-center justify-center
|
||||
${q.multiSelect ? 'rounded' : 'rounded-full'}
|
||||
${showCustomInput[String(questionIdx)] ? 'bg-primary border-primary text-primary-foreground' : 'border-border bg-background'}
|
||||
`}
|
||||
>
|
||||
{showCustomInput[String(questionIdx)] && <Check size={12} strokeWidth={3} />}
|
||||
</div>
|
||||
|
||||
<div className="flex-1">
|
||||
<div className="font-bold text-foreground">Other</div>
|
||||
<div className="text-sm text-muted-foreground mt-1">
|
||||
Provide a custom answer
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Custom input field */}
|
||||
{showCustomInput[String(questionIdx)] && (
|
||||
<div className="mt-4">
|
||||
<Input
|
||||
type="text"
|
||||
value={customInputs[String(questionIdx)] || ''}
|
||||
onChange={(e) => handleCustomInputChange(questionIdx, e.target.value)}
|
||||
placeholder="Type your answer..."
|
||||
autoFocus
|
||||
disabled={disabled}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
|
||||
{/* Submit button */}
|
||||
<div className="flex justify-end">
|
||||
<button
|
||||
<Button
|
||||
onClick={handleSubmit}
|
||||
disabled={disabled || !allQuestionsAnswered}
|
||||
className="neo-btn neo-btn-primary"
|
||||
>
|
||||
Continue
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -2,11 +2,10 @@
|
||||
* Schedule Modal Component
|
||||
*
|
||||
* Modal for managing agent schedules (create, edit, delete).
|
||||
* Follows neobrutalism design patterns from SettingsModal.
|
||||
*/
|
||||
|
||||
import { useState, useEffect, useRef } from 'react'
|
||||
import { Clock, GitBranch, Trash2, X } from 'lucide-react'
|
||||
import { Clock, GitBranch, Trash2 } from 'lucide-react'
|
||||
import {
|
||||
useSchedules,
|
||||
useCreateSchedule,
|
||||
@@ -23,6 +22,20 @@ import {
|
||||
toggleDay,
|
||||
} from '../lib/timeUtils'
|
||||
import type { ScheduleCreate } from '../lib/types'
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogFooter,
|
||||
} from '@/components/ui/dialog'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { Alert, AlertDescription } from '@/components/ui/alert'
|
||||
import { Card, CardContent } from '@/components/ui/card'
|
||||
import { Checkbox } from '@/components/ui/checkbox'
|
||||
import { Separator } from '@/components/ui/separator'
|
||||
|
||||
interface ScheduleModalProps {
|
||||
projectName: string
|
||||
@@ -60,38 +73,6 @@ export function ScheduleModal({ projectName, isOpen, onClose }: ScheduleModalPro
|
||||
}
|
||||
}, [isOpen])
|
||||
|
||||
// Keyboard navigation
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
if (!isOpen) return
|
||||
|
||||
if (e.key === 'Escape') {
|
||||
onClose()
|
||||
}
|
||||
|
||||
if (e.key === 'Tab' && modalRef.current) {
|
||||
const focusableElements = modalRef.current.querySelectorAll<HTMLElement>(
|
||||
'button, input, select, textarea, [tabindex]:not([tabindex="-1"])'
|
||||
)
|
||||
const firstElement = focusableElements[0]
|
||||
const lastElement = focusableElements[focusableElements.length - 1]
|
||||
|
||||
if (e.shiftKey && document.activeElement === firstElement) {
|
||||
e.preventDefault()
|
||||
lastElement?.focus()
|
||||
} else if (!e.shiftKey && document.activeElement === lastElement) {
|
||||
e.preventDefault()
|
||||
firstElement?.focus()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('keydown', handleKeyDown)
|
||||
return () => document.removeEventListener('keydown', handleKeyDown)
|
||||
}, [isOpen, onClose])
|
||||
|
||||
if (!isOpen) return null
|
||||
|
||||
const schedules = schedulesData?.schedules || []
|
||||
|
||||
const handleCreateSchedule = async () => {
|
||||
@@ -114,8 +95,6 @@ export function ScheduleModal({ projectName, isOpen, onClose }: ScheduleModalPro
|
||||
const { time: utcTime, dayShift } = localToUTCWithDayShift(newSchedule.start_time)
|
||||
|
||||
// Adjust days_of_week based on day shift
|
||||
// If UTC is on the next day (dayShift = 1), shift days forward
|
||||
// If UTC is on the previous day (dayShift = -1), shift days backward
|
||||
const adjustedDays = adjustDaysForDayShift(newSchedule.days_of_week, dayShift)
|
||||
|
||||
const scheduleToCreate = {
|
||||
@@ -169,287 +148,256 @@ export function ScheduleModal({ projectName, isOpen, onClose }: ScheduleModalPro
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className="neo-modal-backdrop"
|
||||
onClick={(e) => {
|
||||
if (e.target === e.currentTarget) {
|
||||
onClose()
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div ref={modalRef} className="neo-modal p-6" style={{ maxWidth: '650px', maxHeight: '80vh' }}>
|
||||
<Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
|
||||
<DialogContent ref={modalRef} className="sm:max-w-[650px] max-h-[80vh] flex flex-col p-0">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<div className="flex items-center gap-2">
|
||||
<Clock size={24} className="text-[var(--color-neo-progress)]" />
|
||||
<h2 className="text-xl font-bold text-gray-900 dark:text-white">Agent Schedules</h2>
|
||||
</div>
|
||||
<button
|
||||
ref={firstFocusableRef}
|
||||
onClick={onClose}
|
||||
className="neo-btn neo-btn-ghost p-2"
|
||||
aria-label="Close modal"
|
||||
>
|
||||
<X size={20} />
|
||||
</button>
|
||||
</div>
|
||||
<DialogHeader className="p-6 pb-4">
|
||||
<DialogTitle className="flex items-center gap-2">
|
||||
<Clock size={24} className="text-primary" />
|
||||
Agent Schedules
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
{/* Error display */}
|
||||
{error && (
|
||||
<div className="mb-4 p-3 border-2 border-red-500 bg-red-50 dark:bg-red-900/20 text-red-800 dark:text-red-200 rounded">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
<div className="flex-1 min-h-0 overflow-y-auto px-6">
|
||||
{/* Error display */}
|
||||
{error && (
|
||||
<Alert variant="destructive" className="mb-4">
|
||||
<AlertDescription>{error}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{/* Loading state */}
|
||||
{isLoading && (
|
||||
<div className="text-center py-8 text-gray-600 dark:text-gray-300">
|
||||
Loading schedules...
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Existing schedules */}
|
||||
{!isLoading && schedules.length > 0 && (
|
||||
<div className="space-y-3 mb-6 max-h-[300px] overflow-y-auto">
|
||||
{schedules.map((schedule) => {
|
||||
// Convert UTC time to local and get day shift for display
|
||||
const { time: localTime, dayShift } = utcToLocalWithDayShift(schedule.start_time)
|
||||
const duration = formatDuration(schedule.duration_minutes)
|
||||
// Adjust displayed days: if local is next day (dayShift=1), shift forward
|
||||
// if local is prev day (dayShift=-1), shift backward
|
||||
const displayDays = adjustDaysForDayShift(schedule.days_of_week, dayShift)
|
||||
|
||||
return (
|
||||
<div
|
||||
key={schedule.id}
|
||||
className="neo-card p-4 flex items-start justify-between gap-4"
|
||||
>
|
||||
<div className="flex-1">
|
||||
{/* Time and duration */}
|
||||
<div className="flex items-baseline gap-2 mb-2">
|
||||
<span className="text-lg font-bold text-gray-900 dark:text-white">{localTime}</span>
|
||||
<span className="text-sm text-gray-600 dark:text-gray-300">
|
||||
for {duration}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Days */}
|
||||
<div className="flex gap-1 mb-2">
|
||||
{DAYS.map((day) => {
|
||||
const isActive = isDayActive(displayDays, day.bit)
|
||||
return (
|
||||
<span
|
||||
key={day.label}
|
||||
className={`text-xs px-2 py-1 rounded border-2 ${
|
||||
isActive
|
||||
? 'border-[var(--color-neo-progress)] bg-[var(--color-neo-progress)] text-white font-bold'
|
||||
: 'border-gray-300 dark:border-gray-600 text-gray-400 dark:text-gray-500'
|
||||
}`}
|
||||
>
|
||||
{day.label}
|
||||
</span>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Metadata */}
|
||||
<div className="flex gap-3 text-xs text-gray-600 dark:text-gray-300">
|
||||
{schedule.yolo_mode && (
|
||||
<span className="font-bold text-yellow-600">⚡ YOLO mode</span>
|
||||
)}
|
||||
<span className="flex items-center gap-1">
|
||||
<GitBranch size={12} />
|
||||
{schedule.max_concurrency}x
|
||||
</span>
|
||||
{schedule.model && <span>Model: {schedule.model}</span>}
|
||||
{schedule.crash_count > 0 && (
|
||||
<span className="text-red-600">Crashes: {schedule.crash_count}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex items-center gap-2">
|
||||
{/* Enable/disable toggle */}
|
||||
<button
|
||||
onClick={() => handleToggleSchedule(schedule.id, schedule.enabled)}
|
||||
className={`neo-btn neo-btn-ghost px-3 py-1 text-xs font-bold ${
|
||||
schedule.enabled
|
||||
? 'text-[var(--color-neo-done)]'
|
||||
: 'text-[var(--color-neo-text-secondary)]'
|
||||
}`}
|
||||
disabled={toggleSchedule.isPending}
|
||||
>
|
||||
{schedule.enabled ? 'Enabled' : 'Disabled'}
|
||||
</button>
|
||||
|
||||
{/* Delete button */}
|
||||
<button
|
||||
onClick={() => handleDeleteSchedule(schedule.id)}
|
||||
className="neo-btn neo-btn-ghost p-2 text-red-600 hover:bg-red-50"
|
||||
disabled={deleteSchedule.isPending}
|
||||
aria-label="Delete schedule"
|
||||
>
|
||||
<Trash2 size={16} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Empty state */}
|
||||
{!isLoading && schedules.length === 0 && (
|
||||
<div className="text-center py-6 text-gray-600 dark:text-gray-300 mb-6">
|
||||
<Clock size={48} className="mx-auto mb-2 opacity-50 text-gray-400 dark:text-gray-500" />
|
||||
<p>No schedules configured yet</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Divider */}
|
||||
<div className="border-t-2 border-gray-200 dark:border-gray-700 my-6"></div>
|
||||
|
||||
{/* Add new schedule form */}
|
||||
<div>
|
||||
<h3 className="text-lg font-bold text-gray-900 dark:text-white mb-4">Add New Schedule</h3>
|
||||
|
||||
{/* Time and duration */}
|
||||
<div className="grid grid-cols-2 gap-4 mb-4">
|
||||
<div>
|
||||
<label className="block text-sm font-bold text-gray-700 dark:text-gray-200 mb-2">Start Time (Local)</label>
|
||||
<input
|
||||
type="time"
|
||||
value={newSchedule.start_time}
|
||||
onChange={(e) =>
|
||||
setNewSchedule((prev) => ({ ...prev, start_time: e.target.value }))
|
||||
}
|
||||
className="neo-input w-full"
|
||||
/>
|
||||
{/* Loading state */}
|
||||
{isLoading && (
|
||||
<div className="text-center py-8 text-muted-foreground">
|
||||
Loading schedules...
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-bold text-gray-700 dark:text-gray-200 mb-2">Duration (minutes)</label>
|
||||
<input
|
||||
type="number"
|
||||
min="1"
|
||||
max="1440"
|
||||
value={newSchedule.duration_minutes}
|
||||
onChange={(e) => {
|
||||
const parsed = parseInt(e.target.value, 10)
|
||||
const value = isNaN(parsed) ? 1 : Math.max(1, Math.min(1440, parsed))
|
||||
setNewSchedule((prev) => ({
|
||||
...prev,
|
||||
duration_minutes: value,
|
||||
}))
|
||||
}}
|
||||
className="neo-input w-full"
|
||||
/>
|
||||
<div className="text-xs text-gray-600 dark:text-gray-400 mt-1">
|
||||
{formatDuration(newSchedule.duration_minutes)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Existing schedules */}
|
||||
{!isLoading && schedules.length > 0 && (
|
||||
<div className="space-y-3 mb-6">
|
||||
{schedules.map((schedule) => {
|
||||
// Convert UTC time to local and get day shift for display
|
||||
const { time: localTime, dayShift } = utcToLocalWithDayShift(schedule.start_time)
|
||||
const duration = formatDuration(schedule.duration_minutes)
|
||||
const displayDays = adjustDaysForDayShift(schedule.days_of_week, dayShift)
|
||||
|
||||
{/* Days of week */}
|
||||
<div className="mb-4">
|
||||
<label className="block text-sm font-bold text-gray-700 dark:text-gray-200 mb-2">Days</label>
|
||||
<div className="flex gap-2">
|
||||
{DAYS.map((day) => {
|
||||
const isActive = isDayActive(newSchedule.days_of_week, day.bit)
|
||||
return (
|
||||
<button
|
||||
key={day.label}
|
||||
onClick={() => handleToggleDay(day.bit)}
|
||||
className={`neo-btn px-3 py-2 text-sm ${
|
||||
isActive
|
||||
? 'bg-[var(--color-neo-progress)] text-white border-[var(--color-neo-progress)]'
|
||||
: 'neo-btn-ghost'
|
||||
}`}
|
||||
>
|
||||
{day.label}
|
||||
</button>
|
||||
<Card key={schedule.id}>
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div className="flex-1">
|
||||
{/* Time and duration */}
|
||||
<div className="flex items-baseline gap-2 mb-2">
|
||||
<span className="text-lg font-semibold">{localTime}</span>
|
||||
<span className="text-sm text-muted-foreground">
|
||||
for {duration}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Days */}
|
||||
<div className="flex gap-1 mb-2">
|
||||
{DAYS.map((day) => {
|
||||
const isActive = isDayActive(displayDays, day.bit)
|
||||
return (
|
||||
<span
|
||||
key={day.label}
|
||||
className={`text-xs px-2 py-1 rounded border ${
|
||||
isActive
|
||||
? 'border-primary bg-primary text-primary-foreground font-medium'
|
||||
: 'border-border text-muted-foreground'
|
||||
}`}
|
||||
>
|
||||
{day.label}
|
||||
</span>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Metadata */}
|
||||
<div className="flex gap-3 text-xs text-muted-foreground">
|
||||
{schedule.yolo_mode && (
|
||||
<span className="font-semibold text-yellow-600">YOLO mode</span>
|
||||
)}
|
||||
<span className="flex items-center gap-1">
|
||||
<GitBranch size={12} />
|
||||
{schedule.max_concurrency}x
|
||||
</span>
|
||||
{schedule.model && <span>Model: {schedule.model}</span>}
|
||||
{schedule.crash_count > 0 && (
|
||||
<span className="text-destructive">Crashes: {schedule.crash_count}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex items-center gap-2">
|
||||
{/* Enable/disable toggle */}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => handleToggleSchedule(schedule.id, schedule.enabled)}
|
||||
disabled={toggleSchedule.isPending}
|
||||
className={schedule.enabled ? 'text-primary' : 'text-muted-foreground'}
|
||||
>
|
||||
{schedule.enabled ? 'Enabled' : 'Disabled'}
|
||||
</Button>
|
||||
|
||||
{/* Delete button */}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon-sm"
|
||||
onClick={() => handleDeleteSchedule(schedule.id)}
|
||||
disabled={deleteSchedule.isPending}
|
||||
className="text-destructive hover:text-destructive"
|
||||
>
|
||||
<Trash2 size={16} />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* YOLO mode toggle */}
|
||||
<div className="mb-4">
|
||||
<label className="flex items-center gap-2 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
{/* Empty state */}
|
||||
{!isLoading && schedules.length === 0 && (
|
||||
<div className="text-center py-6 text-muted-foreground mb-6">
|
||||
<Clock size={48} className="mx-auto mb-2 opacity-50" />
|
||||
<p>No schedules configured yet</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Separator className="my-6" />
|
||||
|
||||
{/* Add new schedule form */}
|
||||
<div className="pb-6">
|
||||
<h3 className="text-lg font-semibold mb-4">Add New Schedule</h3>
|
||||
|
||||
{/* Time and duration */}
|
||||
<div className="grid grid-cols-2 gap-4 mb-4">
|
||||
<div className="space-y-2">
|
||||
<Label>Start Time (Local)</Label>
|
||||
<Input
|
||||
type="time"
|
||||
value={newSchedule.start_time}
|
||||
onChange={(e) =>
|
||||
setNewSchedule((prev) => ({ ...prev, start_time: e.target.value }))
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>Duration (minutes)</Label>
|
||||
<Input
|
||||
type="number"
|
||||
min="1"
|
||||
max="1440"
|
||||
value={newSchedule.duration_minutes}
|
||||
onChange={(e) => {
|
||||
const parsed = parseInt(e.target.value, 10)
|
||||
const value = isNaN(parsed) ? 1 : Math.max(1, Math.min(1440, parsed))
|
||||
setNewSchedule((prev) => ({
|
||||
...prev,
|
||||
duration_minutes: value,
|
||||
}))
|
||||
}}
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{formatDuration(newSchedule.duration_minutes)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Days of week */}
|
||||
<div className="mb-4 space-y-2">
|
||||
<Label>Days</Label>
|
||||
<div className="flex gap-2">
|
||||
{DAYS.map((day) => {
|
||||
const isActive = isDayActive(newSchedule.days_of_week, day.bit)
|
||||
return (
|
||||
<Button
|
||||
key={day.label}
|
||||
variant={isActive ? 'default' : 'outline'}
|
||||
size="sm"
|
||||
onClick={() => handleToggleDay(day.bit)}
|
||||
>
|
||||
{day.label}
|
||||
</Button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* YOLO mode toggle */}
|
||||
<div className="mb-4 flex items-center space-x-2">
|
||||
<Checkbox
|
||||
id="yolo-mode"
|
||||
checked={newSchedule.yolo_mode}
|
||||
onChange={(e) =>
|
||||
setNewSchedule((prev) => ({ ...prev, yolo_mode: e.target.checked }))
|
||||
onCheckedChange={(checked) =>
|
||||
setNewSchedule((prev) => ({ ...prev, yolo_mode: checked === true }))
|
||||
}
|
||||
className="w-4 h-4"
|
||||
/>
|
||||
<span className="text-sm font-bold text-gray-700 dark:text-gray-200">YOLO Mode (skip testing)</span>
|
||||
</label>
|
||||
</div>
|
||||
<Label htmlFor="yolo-mode" className="font-normal">
|
||||
YOLO Mode (skip testing)
|
||||
</Label>
|
||||
</div>
|
||||
|
||||
{/* Concurrency slider */}
|
||||
<div className="mb-4">
|
||||
<label className="block text-sm font-bold text-gray-700 dark:text-gray-200 mb-2">
|
||||
Concurrent Agents (1-5)
|
||||
</label>
|
||||
<div className="flex items-center gap-3">
|
||||
<GitBranch
|
||||
size={16}
|
||||
className={newSchedule.max_concurrency > 1 ? 'text-[var(--color-neo-primary)]' : 'text-gray-400'}
|
||||
/>
|
||||
<input
|
||||
type="range"
|
||||
min={1}
|
||||
max={5}
|
||||
value={newSchedule.max_concurrency}
|
||||
{/* Concurrency slider */}
|
||||
<div className="mb-4 space-y-2">
|
||||
<Label>Concurrent Agents (1-5)</Label>
|
||||
<div className="flex items-center gap-3">
|
||||
<GitBranch
|
||||
size={16}
|
||||
className={newSchedule.max_concurrency > 1 ? 'text-primary' : 'text-muted-foreground'}
|
||||
/>
|
||||
<input
|
||||
type="range"
|
||||
min={1}
|
||||
max={5}
|
||||
value={newSchedule.max_concurrency}
|
||||
onChange={(e) =>
|
||||
setNewSchedule((prev) => ({ ...prev, max_concurrency: Number(e.target.value) }))
|
||||
}
|
||||
className="flex-1 h-2 accent-primary cursor-pointer"
|
||||
/>
|
||||
<span className="text-sm font-medium min-w-[2rem] text-center">
|
||||
{newSchedule.max_concurrency}x
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Run {newSchedule.max_concurrency} agent{newSchedule.max_concurrency > 1 ? 's' : ''} in parallel for faster feature completion
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Model selection (optional) */}
|
||||
<div className="mb-4 space-y-2">
|
||||
<Label>Model (optional, defaults to global setting)</Label>
|
||||
<Input
|
||||
placeholder="e.g., claude-3-5-sonnet-20241022"
|
||||
value={newSchedule.model || ''}
|
||||
onChange={(e) =>
|
||||
setNewSchedule((prev) => ({ ...prev, max_concurrency: Number(e.target.value) }))
|
||||
setNewSchedule((prev) => ({ ...prev, model: e.target.value || null }))
|
||||
}
|
||||
className="flex-1 h-2 accent-[var(--color-neo-primary)] cursor-pointer"
|
||||
title={`${newSchedule.max_concurrency} concurrent agent${newSchedule.max_concurrency > 1 ? 's' : ''}`}
|
||||
aria-label="Set number of concurrent agents"
|
||||
/>
|
||||
<span className="text-sm font-bold min-w-[2rem] text-center text-gray-900 dark:text-white">
|
||||
{newSchedule.max_concurrency}x
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-xs text-gray-600 dark:text-gray-400 mt-1">
|
||||
Run {newSchedule.max_concurrency} agent{newSchedule.max_concurrency > 1 ? 's' : ''} in parallel for faster feature completion
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Model selection (optional) */}
|
||||
<div className="mb-6">
|
||||
<label className="block text-sm font-bold text-gray-700 dark:text-gray-200 mb-2">
|
||||
Model (optional, defaults to global setting)
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="e.g., claude-3-5-sonnet-20241022"
|
||||
value={newSchedule.model || ''}
|
||||
onChange={(e) =>
|
||||
setNewSchedule((prev) => ({ ...prev, model: e.target.value || null }))
|
||||
}
|
||||
className="neo-input w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex justify-end gap-3">
|
||||
<button onClick={onClose} className="neo-btn neo-btn-ghost">
|
||||
Close
|
||||
</button>
|
||||
<button
|
||||
onClick={handleCreateSchedule}
|
||||
disabled={createSchedule.isPending || newSchedule.days_of_week === 0}
|
||||
className="neo-btn neo-btn-primary"
|
||||
>
|
||||
{createSchedule.isPending ? 'Creating...' : 'Create Schedule'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<DialogFooter className="p-6 pt-4 border-t">
|
||||
<Button variant="outline" onClick={onClose}>
|
||||
Close
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleCreateSchedule}
|
||||
disabled={createSchedule.isPending || newSchedule.days_of_week === 0}
|
||||
>
|
||||
{createSchedule.isPending ? 'Creating...' : 'Create Schedule'}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,62 +1,25 @@
|
||||
import { useEffect, useRef } from 'react'
|
||||
import { X, Loader2, AlertCircle } from 'lucide-react'
|
||||
import { Loader2, AlertCircle } from 'lucide-react'
|
||||
import { useSettings, useUpdateSettings, useAvailableModels } from '../hooks/useProjects'
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog'
|
||||
import { Switch } from '@/components/ui/switch'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { Alert, AlertDescription } from '@/components/ui/alert'
|
||||
import { Button } from '@/components/ui/button'
|
||||
|
||||
interface SettingsModalProps {
|
||||
isOpen: boolean
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
export function SettingsModal({ onClose }: SettingsModalProps) {
|
||||
export function SettingsModal({ isOpen, onClose }: SettingsModalProps) {
|
||||
const { data: settings, isLoading, isError, refetch } = useSettings()
|
||||
const { data: modelsData } = useAvailableModels()
|
||||
const updateSettings = useUpdateSettings()
|
||||
const modalRef = useRef<HTMLDivElement>(null)
|
||||
const closeButtonRef = useRef<HTMLButtonElement>(null)
|
||||
|
||||
// Focus trap - keep focus within modal
|
||||
useEffect(() => {
|
||||
const modal = modalRef.current
|
||||
if (!modal) return
|
||||
|
||||
// Focus the close button when modal opens
|
||||
closeButtonRef.current?.focus()
|
||||
|
||||
const focusableElements = modal.querySelectorAll<HTMLElement>(
|
||||
'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
|
||||
)
|
||||
const firstElement = focusableElements[0]
|
||||
const lastElement = focusableElements[focusableElements.length - 1]
|
||||
|
||||
const handleTabKey = (e: KeyboardEvent) => {
|
||||
if (e.key !== 'Tab') return
|
||||
|
||||
if (e.shiftKey) {
|
||||
if (document.activeElement === firstElement) {
|
||||
e.preventDefault()
|
||||
lastElement?.focus()
|
||||
}
|
||||
} else {
|
||||
if (document.activeElement === lastElement) {
|
||||
e.preventDefault()
|
||||
firstElement?.focus()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const handleEscape = (e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape') {
|
||||
onClose()
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('keydown', handleTabKey)
|
||||
document.addEventListener('keydown', handleEscape)
|
||||
|
||||
return () => {
|
||||
document.removeEventListener('keydown', handleTabKey)
|
||||
document.removeEventListener('keydown', handleEscape)
|
||||
}
|
||||
}, [onClose])
|
||||
|
||||
const handleYoloToggle = () => {
|
||||
if (settings && !updateSettings.isPending) {
|
||||
@@ -80,36 +43,14 @@ export function SettingsModal({ onClose }: SettingsModalProps) {
|
||||
const isSaving = updateSettings.isPending
|
||||
|
||||
return (
|
||||
<div
|
||||
className="neo-modal-backdrop"
|
||||
onClick={onClose}
|
||||
role="presentation"
|
||||
>
|
||||
<div
|
||||
ref={modalRef}
|
||||
className="neo-modal w-full max-w-sm p-6"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
role="dialog"
|
||||
aria-labelledby="settings-title"
|
||||
aria-modal="true"
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h2 id="settings-title" className="font-display text-xl font-bold">
|
||||
<Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
|
||||
<DialogContent className="sm:max-w-sm">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="flex items-center gap-2">
|
||||
Settings
|
||||
{isSaving && (
|
||||
<Loader2 className="inline-block ml-2 animate-spin" size={16} />
|
||||
)}
|
||||
</h2>
|
||||
<button
|
||||
ref={closeButtonRef}
|
||||
onClick={onClose}
|
||||
className="neo-btn neo-btn-ghost p-2"
|
||||
aria-label="Close settings"
|
||||
>
|
||||
<X size={20} />
|
||||
</button>
|
||||
</div>
|
||||
{isSaving && <Loader2 className="animate-spin" size={16} />}
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
{/* Loading State */}
|
||||
{isLoading && (
|
||||
@@ -121,82 +62,55 @@ export function SettingsModal({ onClose }: SettingsModalProps) {
|
||||
|
||||
{/* Error State */}
|
||||
{isError && (
|
||||
<div className="p-4 bg-[var(--color-neo-error-bg)] text-[var(--color-neo-error-text)] border-3 border-[var(--color-neo-error-border)] mb-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<AlertCircle size={18} />
|
||||
<span>Failed to load settings</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => refetch()}
|
||||
className="mt-2 underline text-sm hover:opacity-70 transition-opacity"
|
||||
>
|
||||
Retry
|
||||
</button>
|
||||
</div>
|
||||
<Alert variant="destructive">
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
<AlertDescription>
|
||||
Failed to load settings
|
||||
<Button
|
||||
variant="link"
|
||||
onClick={() => refetch()}
|
||||
className="ml-2 p-0 h-auto"
|
||||
>
|
||||
Retry
|
||||
</Button>
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{/* Settings Content */}
|
||||
{settings && !isLoading && (
|
||||
<div className="space-y-6">
|
||||
{/* YOLO Mode Toggle */}
|
||||
<div>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<label
|
||||
id="yolo-label"
|
||||
className="font-display font-bold text-base"
|
||||
>
|
||||
YOLO Mode
|
||||
</label>
|
||||
<p className="text-sm text-[var(--color-neo-text-secondary)] mt-1">
|
||||
Skip testing for rapid prototyping
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={handleYoloToggle}
|
||||
disabled={isSaving}
|
||||
className={`relative w-14 h-8 rounded-none border-3 border-[var(--color-neo-border)] transition-colors ${
|
||||
settings.yolo_mode
|
||||
? 'bg-[var(--color-neo-pending)]'
|
||||
: 'bg-[var(--color-neo-card)]'
|
||||
} ${isSaving ? 'opacity-50 cursor-not-allowed' : ''}`}
|
||||
role="switch"
|
||||
aria-checked={settings.yolo_mode}
|
||||
aria-labelledby="yolo-label"
|
||||
>
|
||||
<span
|
||||
className={`absolute top-1 w-5 h-5 bg-[var(--color-neo-border)] transition-transform ${
|
||||
settings.yolo_mode ? 'left-7' : 'left-1'
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="space-y-0.5">
|
||||
<Label htmlFor="yolo-mode" className="font-medium">
|
||||
YOLO Mode
|
||||
</Label>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Skip testing for rapid prototyping
|
||||
</p>
|
||||
</div>
|
||||
<Switch
|
||||
id="yolo-mode"
|
||||
checked={settings.yolo_mode}
|
||||
onCheckedChange={handleYoloToggle}
|
||||
disabled={isSaving}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Model Selection - Radio Group */}
|
||||
<div>
|
||||
<label
|
||||
id="model-label"
|
||||
className="font-display font-bold text-base block mb-2"
|
||||
>
|
||||
Model
|
||||
</label>
|
||||
<div
|
||||
className="flex border-3 border-[var(--color-neo-border)]"
|
||||
role="radiogroup"
|
||||
aria-labelledby="model-label"
|
||||
>
|
||||
{/* Model Selection */}
|
||||
<div className="space-y-2">
|
||||
<Label className="font-medium">Model</Label>
|
||||
<div className="flex rounded-lg border overflow-hidden">
|
||||
{models.map((model) => (
|
||||
<button
|
||||
key={model.id}
|
||||
onClick={() => handleModelChange(model.id)}
|
||||
disabled={isSaving}
|
||||
role="radio"
|
||||
aria-checked={settings.model === model.id}
|
||||
className={`flex-1 py-3 px-4 font-display font-bold text-sm transition-colors ${
|
||||
className={`flex-1 py-2 px-3 text-sm font-medium transition-colors ${
|
||||
settings.model === model.id
|
||||
? 'bg-[var(--color-neo-accent)] text-[var(--color-neo-text-on-bright)]'
|
||||
: 'bg-[var(--color-neo-card)] text-[var(--color-neo-text)] hover:bg-[var(--color-neo-hover-subtle)]'
|
||||
? 'bg-primary text-primary-foreground'
|
||||
: 'bg-background text-foreground hover:bg-muted'
|
||||
} ${isSaving ? 'opacity-50 cursor-not-allowed' : ''}`}
|
||||
>
|
||||
{model.name}
|
||||
@@ -206,32 +120,21 @@ export function SettingsModal({ onClose }: SettingsModalProps) {
|
||||
</div>
|
||||
|
||||
{/* Regression Agents */}
|
||||
<div>
|
||||
<label
|
||||
id="testing-ratio-label"
|
||||
className="font-display font-bold text-base block mb-1"
|
||||
>
|
||||
Regression Agents
|
||||
</label>
|
||||
<p className="text-sm text-[var(--color-neo-text-secondary)] mb-2">
|
||||
<div className="space-y-2">
|
||||
<Label className="font-medium">Regression Agents</Label>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Number of regression testing agents (0 = disabled)
|
||||
</p>
|
||||
<div
|
||||
className="flex border-3 border-[var(--color-neo-border)]"
|
||||
role="radiogroup"
|
||||
aria-labelledby="testing-ratio-label"
|
||||
>
|
||||
<div className="flex rounded-lg border overflow-hidden">
|
||||
{[0, 1, 2, 3].map((ratio) => (
|
||||
<button
|
||||
key={ratio}
|
||||
onClick={() => handleTestingRatioChange(ratio)}
|
||||
disabled={isSaving}
|
||||
role="radio"
|
||||
aria-checked={settings.testing_agent_ratio === ratio}
|
||||
className={`flex-1 py-2 px-3 font-display font-bold text-sm transition-colors ${
|
||||
className={`flex-1 py-2 px-3 text-sm font-medium transition-colors ${
|
||||
settings.testing_agent_ratio === ratio
|
||||
? 'bg-[var(--color-neo-progress)] text-[var(--color-neo-text)]'
|
||||
: 'bg-[var(--color-neo-card)] text-[var(--color-neo-text)] hover:bg-[var(--color-neo-hover-subtle)]'
|
||||
? 'bg-primary text-primary-foreground'
|
||||
: 'bg-background text-foreground hover:bg-muted'
|
||||
} ${isSaving ? 'opacity-50 cursor-not-allowed' : ''}`}
|
||||
>
|
||||
{ratio}
|
||||
@@ -242,13 +145,15 @@ export function SettingsModal({ onClose }: SettingsModalProps) {
|
||||
|
||||
{/* Update Error */}
|
||||
{updateSettings.isError && (
|
||||
<div className="p-3 bg-[var(--color-neo-error-bg)] border-3 border-[var(--color-neo-error-border)] text-[var(--color-neo-error-text)] text-sm">
|
||||
Failed to save settings. Please try again.
|
||||
</div>
|
||||
<Alert variant="destructive">
|
||||
<AlertDescription>
|
||||
Failed to save settings. Please try again.
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,6 +1,9 @@
|
||||
import { useEffect, useCallback } from 'react'
|
||||
import { CheckCircle2, XCircle, Loader2, ExternalLink } from 'lucide-react'
|
||||
import { useSetupStatus, useHealthCheck } from '../hooks/useProjects'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Card, CardContent } from '@/components/ui/card'
|
||||
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
|
||||
|
||||
interface SetupWizardProps {
|
||||
onComplete: () => void
|
||||
@@ -26,98 +29,100 @@ export function SetupWizard({ onComplete }: SetupWizardProps) {
|
||||
}, [checkAndComplete])
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-[var(--color-neo-bg)] flex items-center justify-center p-4">
|
||||
<div className="neo-card w-full max-w-lg p-8">
|
||||
<h1 className="font-display text-3xl font-bold text-center mb-2">
|
||||
Setup Wizard
|
||||
</h1>
|
||||
<p className="text-center text-[var(--color-neo-text-secondary)] mb-8">
|
||||
Let's make sure everything is ready to go
|
||||
</p>
|
||||
<div className="min-h-screen bg-background flex items-center justify-center p-4">
|
||||
<Card className="w-full max-w-lg">
|
||||
<CardContent className="p-8">
|
||||
<h1 className="font-display text-3xl font-bold text-center mb-2">
|
||||
Setup Wizard
|
||||
</h1>
|
||||
<p className="text-center text-muted-foreground mb-8">
|
||||
Let's make sure everything is ready to go
|
||||
</p>
|
||||
|
||||
<div className="space-y-4">
|
||||
{/* API Health */}
|
||||
<SetupItem
|
||||
label="Backend Server"
|
||||
description="FastAPI server is running"
|
||||
status={healthError ? 'error' : isApiHealthy ? 'success' : 'loading'}
|
||||
/>
|
||||
<div className="space-y-4">
|
||||
{/* API Health */}
|
||||
<SetupItem
|
||||
label="Backend Server"
|
||||
description="FastAPI server is running"
|
||||
status={healthError ? 'error' : isApiHealthy ? 'success' : 'loading'}
|
||||
/>
|
||||
|
||||
{/* Claude CLI */}
|
||||
<SetupItem
|
||||
label="Claude CLI"
|
||||
description="Claude Code CLI is installed"
|
||||
status={
|
||||
setupLoading
|
||||
? 'loading'
|
||||
: setupError
|
||||
? 'error'
|
||||
: setupStatus?.claude_cli
|
||||
? 'success'
|
||||
: 'error'
|
||||
}
|
||||
helpLink="https://docs.anthropic.com/claude/claude-code"
|
||||
helpText="Install Claude Code"
|
||||
/>
|
||||
{/* Claude CLI */}
|
||||
<SetupItem
|
||||
label="Claude CLI"
|
||||
description="Claude Code CLI is installed"
|
||||
status={
|
||||
setupLoading
|
||||
? 'loading'
|
||||
: setupError
|
||||
? 'error'
|
||||
: setupStatus?.claude_cli
|
||||
? 'success'
|
||||
: 'error'
|
||||
}
|
||||
helpLink="https://docs.anthropic.com/claude/claude-code"
|
||||
helpText="Install Claude Code"
|
||||
/>
|
||||
|
||||
{/* Credentials */}
|
||||
<SetupItem
|
||||
label="Anthropic Credentials"
|
||||
description="API credentials are configured"
|
||||
status={
|
||||
setupLoading
|
||||
? 'loading'
|
||||
: setupError
|
||||
? 'error'
|
||||
: setupStatus?.credentials
|
||||
? 'success'
|
||||
: 'error'
|
||||
}
|
||||
helpLink="https://console.anthropic.com/account/keys"
|
||||
helpText="Get API Key"
|
||||
/>
|
||||
{/* Credentials */}
|
||||
<SetupItem
|
||||
label="Anthropic Credentials"
|
||||
description="API credentials are configured"
|
||||
status={
|
||||
setupLoading
|
||||
? 'loading'
|
||||
: setupError
|
||||
? 'error'
|
||||
: setupStatus?.credentials
|
||||
? 'success'
|
||||
: 'error'
|
||||
}
|
||||
helpLink="https://console.anthropic.com/account/keys"
|
||||
helpText="Get API Key"
|
||||
/>
|
||||
|
||||
{/* Node.js */}
|
||||
<SetupItem
|
||||
label="Node.js"
|
||||
description="Node.js is installed (for UI dev)"
|
||||
status={
|
||||
setupLoading
|
||||
? 'loading'
|
||||
: setupError
|
||||
? 'error'
|
||||
: setupStatus?.node
|
||||
? 'success'
|
||||
: 'warning'
|
||||
}
|
||||
helpLink="https://nodejs.org"
|
||||
helpText="Install Node.js"
|
||||
optional
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Continue Button */}
|
||||
{isReady && (
|
||||
<button
|
||||
onClick={onComplete}
|
||||
className="neo-btn neo-btn-success w-full mt-8"
|
||||
>
|
||||
Continue to Dashboard
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* Error Message */}
|
||||
{(healthError || setupError) && (
|
||||
<div className="mt-6 p-4 bg-[var(--color-neo-error-bg)] text-[var(--color-neo-error-text)] border-3 border-[var(--color-neo-error-border)]">
|
||||
<p className="font-bold mb-2">Setup Error</p>
|
||||
<p className="text-sm">
|
||||
{healthError
|
||||
? 'Cannot connect to the backend server. Make sure to run start_ui.py first.'
|
||||
: 'Failed to check setup status.'}
|
||||
</p>
|
||||
{/* Node.js */}
|
||||
<SetupItem
|
||||
label="Node.js"
|
||||
description="Node.js is installed (for UI dev)"
|
||||
status={
|
||||
setupLoading
|
||||
? 'loading'
|
||||
: setupError
|
||||
? 'error'
|
||||
: setupStatus?.node
|
||||
? 'success'
|
||||
: 'warning'
|
||||
}
|
||||
helpLink="https://nodejs.org"
|
||||
helpText="Install Node.js"
|
||||
optional
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Continue Button */}
|
||||
{isReady && (
|
||||
<Button
|
||||
onClick={onComplete}
|
||||
className="w-full mt-8 bg-green-500 hover:bg-green-600 text-white"
|
||||
>
|
||||
Continue to Dashboard
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{/* Error Message */}
|
||||
{(healthError || setupError) && (
|
||||
<Alert variant="destructive" className="mt-6">
|
||||
<AlertTitle>Setup Error</AlertTitle>
|
||||
<AlertDescription>
|
||||
{healthError
|
||||
? 'Cannot connect to the backend server. Make sure to run start_ui.py first.'
|
||||
: 'Failed to check setup status.'}
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -140,31 +145,31 @@ function SetupItem({
|
||||
optional,
|
||||
}: SetupItemProps) {
|
||||
return (
|
||||
<div className="flex items-start gap-4 p-4 bg-[var(--color-neo-bg)] border-3 border-[var(--color-neo-border)]">
|
||||
<div className="flex items-start gap-4 p-4 bg-background border-2 border-border rounded-lg">
|
||||
{/* Status Icon */}
|
||||
<div className="flex-shrink-0 mt-1">
|
||||
{status === 'success' ? (
|
||||
<CheckCircle2 size={24} className="text-[var(--color-neo-done)]" />
|
||||
<CheckCircle2 size={24} className="text-green-500" />
|
||||
) : status === 'error' ? (
|
||||
<XCircle size={24} className="text-[var(--color-neo-danger)]" />
|
||||
<XCircle size={24} className="text-destructive" />
|
||||
) : status === 'warning' ? (
|
||||
<XCircle size={24} className="text-[var(--color-neo-pending)]" />
|
||||
<XCircle size={24} className="text-yellow-500" />
|
||||
) : (
|
||||
<Loader2 size={24} className="animate-spin text-[var(--color-neo-progress)]" />
|
||||
<Loader2 size={24} className="animate-spin text-primary" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-display font-bold">{label}</span>
|
||||
<span className="font-display font-bold text-foreground">{label}</span>
|
||||
{optional && (
|
||||
<span className="text-xs text-[var(--color-neo-text-secondary)]">
|
||||
<span className="text-xs text-muted-foreground">
|
||||
(optional)
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-sm text-[var(--color-neo-text-secondary)]">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{description}
|
||||
</p>
|
||||
{(status === 'error' || status === 'warning') && helpLink && (
|
||||
@@ -172,7 +177,7 @@ function SetupItem({
|
||||
href={helpLink}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center gap-1 mt-2 text-sm text-[var(--color-neo-accent)] hover:underline"
|
||||
className="inline-flex items-center gap-1 mt-2 text-sm text-primary hover:underline"
|
||||
>
|
||||
{helpText} <ExternalLink size={12} />
|
||||
</a>
|
||||
|
||||
@@ -12,6 +12,10 @@ import { ChatMessage } from './ChatMessage'
|
||||
import { QuestionOptions } from './QuestionOptions'
|
||||
import { TypingIndicator } from './TypingIndicator'
|
||||
import type { ImageAttachment } from '../lib/types'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Textarea } from '@/components/ui/textarea'
|
||||
import { Card, CardContent } from '@/components/ui/card'
|
||||
import { Alert, AlertDescription } from '@/components/ui/alert'
|
||||
|
||||
// Image upload validation constants
|
||||
const MAX_FILE_SIZE = 5 * 1024 * 1024 // 5 MB
|
||||
@@ -193,28 +197,28 @@ export function SpecCreationChat({
|
||||
switch (connectionStatus) {
|
||||
case 'connected':
|
||||
return (
|
||||
<span className="flex items-center gap-1 text-xs text-[var(--color-neo-done)]">
|
||||
<span className="flex items-center gap-1 text-xs text-green-500">
|
||||
<Wifi size={12} />
|
||||
Connected
|
||||
</span>
|
||||
)
|
||||
case 'connecting':
|
||||
return (
|
||||
<span className="flex items-center gap-1 text-xs text-[var(--color-neo-pending)]">
|
||||
<span className="flex items-center gap-1 text-xs text-yellow-500">
|
||||
<Wifi size={12} className="animate-pulse" />
|
||||
Connecting...
|
||||
</span>
|
||||
)
|
||||
case 'error':
|
||||
return (
|
||||
<span className="flex items-center gap-1 text-xs text-[var(--color-neo-danger)]">
|
||||
<span className="flex items-center gap-1 text-xs text-destructive">
|
||||
<WifiOff size={12} />
|
||||
Error
|
||||
</span>
|
||||
)
|
||||
default:
|
||||
return (
|
||||
<span className="flex items-center gap-1 text-xs text-[var(--color-neo-text-secondary)]">
|
||||
<span className="flex items-center gap-1 text-xs text-muted-foreground">
|
||||
<WifiOff size={12} />
|
||||
Disconnected
|
||||
</span>
|
||||
@@ -223,11 +227,11 @@ export function SpecCreationChat({
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full bg-[var(--color-neo-bg)]">
|
||||
<div className="flex flex-col h-full bg-background">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between p-4 border-b-3 border-[var(--color-neo-border)] bg-[var(--color-neo-card)]">
|
||||
<div className="flex items-center justify-between p-4 border-b-2 border-border bg-card">
|
||||
<div className="flex items-center gap-3">
|
||||
<h2 className="font-display font-bold text-lg text-[var(--color-neo-text)]">
|
||||
<h2 className="font-display font-bold text-lg text-foreground">
|
||||
Create Spec: {projectName}
|
||||
</h2>
|
||||
<ConnectionIndicator />
|
||||
@@ -235,14 +239,14 @@ export function SpecCreationChat({
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
{isComplete && (
|
||||
<span className="flex items-center gap-1 text-sm text-[var(--color-neo-done)] font-bold">
|
||||
<span className="flex items-center gap-1 text-sm text-green-500 font-bold">
|
||||
<CheckCircle2 size={16} />
|
||||
Complete
|
||||
</span>
|
||||
)}
|
||||
|
||||
{/* Load Sample Prompt */}
|
||||
<button
|
||||
<Button
|
||||
onClick={() => {
|
||||
setInput(SAMPLE_PROMPT)
|
||||
// Also resize the textarea to fit content
|
||||
@@ -251,68 +255,76 @@ export function SpecCreationChat({
|
||||
inputRef.current.style.height = `${Math.min(inputRef.current.scrollHeight, 200)}px`
|
||||
}
|
||||
}}
|
||||
className="neo-btn neo-btn-ghost text-sm py-2"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
title="Load sample prompt (Simple Todo app)"
|
||||
>
|
||||
<FileText size={16} />
|
||||
Load Sample
|
||||
</button>
|
||||
</Button>
|
||||
|
||||
{/* Exit to Project - always visible escape hatch */}
|
||||
<button
|
||||
<Button
|
||||
onClick={onExitToProject}
|
||||
className="neo-btn neo-btn-ghost text-sm py-2"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
title="Exit chat and go to project (you can start the agent manually)"
|
||||
>
|
||||
<ExternalLink size={16} />
|
||||
Exit to Project
|
||||
</button>
|
||||
</Button>
|
||||
|
||||
<button
|
||||
<Button
|
||||
onClick={onCancel}
|
||||
className="neo-btn neo-btn-ghost p-2"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
title="Cancel"
|
||||
>
|
||||
<X size={20} />
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Error banner */}
|
||||
{error && (
|
||||
<div className="flex items-center gap-2 p-3 bg-[var(--color-neo-error-bg)] text-[var(--color-neo-error-text)] border-b-3 border-[var(--color-neo-error-border)]">
|
||||
<Alert variant="destructive" className="rounded-none border-x-0 border-t-0">
|
||||
<AlertCircle size={16} />
|
||||
<span className="flex-1 text-sm">{error}</span>
|
||||
<button
|
||||
<AlertDescription className="flex-1">{error}</AlertDescription>
|
||||
<Button
|
||||
onClick={() => setError(null)}
|
||||
className="p-1 hover:opacity-70 transition-opacity rounded"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-6 w-6"
|
||||
>
|
||||
<X size={14} />
|
||||
</button>
|
||||
</div>
|
||||
</Button>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{/* Messages area */}
|
||||
<div className="flex-1 overflow-y-auto py-4">
|
||||
{messages.length === 0 && !isLoading && (
|
||||
<div className="flex flex-col items-center justify-center h-full text-center p-8">
|
||||
<div className="neo-card p-6 max-w-md">
|
||||
<h3 className="font-display font-bold text-lg mb-2">
|
||||
Starting Spec Creation
|
||||
</h3>
|
||||
<p className="text-sm text-[var(--color-neo-text-secondary)]">
|
||||
Connecting to Claude to help you create your app specification...
|
||||
</p>
|
||||
{connectionStatus === 'error' && (
|
||||
<button
|
||||
onClick={start}
|
||||
className="neo-btn neo-btn-primary mt-4 text-sm"
|
||||
>
|
||||
<RotateCcw size={14} />
|
||||
Retry Connection
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<Card className="p-6 max-w-md">
|
||||
<CardContent className="p-0">
|
||||
<h3 className="font-display font-bold text-lg mb-2">
|
||||
Starting Spec Creation
|
||||
</h3>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Connecting to Claude to help you create your app specification...
|
||||
</p>
|
||||
{connectionStatus === 'error' && (
|
||||
<Button
|
||||
onClick={start}
|
||||
className="mt-4"
|
||||
size="sm"
|
||||
>
|
||||
<RotateCcw size={14} />
|
||||
Retry Connection
|
||||
</Button>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -339,7 +351,7 @@ export function SpecCreationChat({
|
||||
{/* Input area */}
|
||||
{!isComplete && (
|
||||
<div
|
||||
className="p-4 border-t-3 border-[var(--color-neo-border)] bg-[var(--color-neo-card)]"
|
||||
className="p-4 border-t-2 border-border bg-card"
|
||||
onDrop={handleDrop}
|
||||
onDragOver={handleDragOver}
|
||||
>
|
||||
@@ -349,22 +361,21 @@ export function SpecCreationChat({
|
||||
{pendingAttachments.map((attachment) => (
|
||||
<div
|
||||
key={attachment.id}
|
||||
className="relative group border-2 border-[var(--color-neo-border)] p-1 bg-[var(--color-neo-card)]"
|
||||
style={{ boxShadow: 'var(--shadow-neo-sm)' }}
|
||||
className="relative group border-2 border-border p-1 bg-card rounded shadow-sm"
|
||||
>
|
||||
<img
|
||||
src={attachment.previewUrl}
|
||||
alt={attachment.filename}
|
||||
className="w-16 h-16 object-cover"
|
||||
className="w-16 h-16 object-cover rounded"
|
||||
/>
|
||||
<button
|
||||
onClick={() => handleRemoveAttachment(attachment.id)}
|
||||
className="absolute -top-2 -right-2 bg-[var(--color-neo-danger)] text-[var(--color-neo-text-on-bright)] rounded-full p-0.5 border-2 border-[var(--color-neo-border)] hover:scale-110 transition-transform"
|
||||
className="absolute -top-2 -right-2 bg-destructive text-destructive-foreground rounded-full p-0.5 border-2 border-border hover:scale-110 transition-transform"
|
||||
title="Remove attachment"
|
||||
>
|
||||
<X size={12} />
|
||||
</button>
|
||||
<span className="text-xs truncate block max-w-16 mt-1 text-center">
|
||||
<span className="text-xs truncate block max-w-16 mt-1 text-center text-muted-foreground">
|
||||
{attachment.filename.length > 10
|
||||
? `${attachment.filename.substring(0, 7)}...`
|
||||
: attachment.filename}
|
||||
@@ -386,16 +397,17 @@ export function SpecCreationChat({
|
||||
/>
|
||||
|
||||
{/* Attach button */}
|
||||
<button
|
||||
<Button
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
disabled={connectionStatus !== 'connected'}
|
||||
className="neo-btn neo-btn-ghost p-3"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
title="Attach image (JPEG, PNG - max 5MB)"
|
||||
>
|
||||
<Paperclip size={18} />
|
||||
</button>
|
||||
</Button>
|
||||
|
||||
<textarea
|
||||
<Textarea
|
||||
ref={inputRef}
|
||||
value={input}
|
||||
onChange={(e) => {
|
||||
@@ -412,25 +424,25 @@ export function SpecCreationChat({
|
||||
? 'Add a message with your image(s)...'
|
||||
: 'Type your response... (or /exit to go to project)'
|
||||
}
|
||||
className="neo-input flex-1 resize-none min-h-[46px] max-h-[200px] overflow-y-auto"
|
||||
className="flex-1 resize-none min-h-[46px] max-h-[200px] overflow-y-auto"
|
||||
disabled={(isLoading && !currentQuestions) || connectionStatus !== 'connected'}
|
||||
rows={1}
|
||||
/>
|
||||
<button
|
||||
<Button
|
||||
onClick={handleSendMessage}
|
||||
disabled={
|
||||
(!input.trim() && pendingAttachments.length === 0) ||
|
||||
(isLoading && !currentQuestions) ||
|
||||
connectionStatus !== 'connected'
|
||||
}
|
||||
className="neo-btn neo-btn-primary px-6"
|
||||
className="px-6"
|
||||
>
|
||||
<Send size={18} />
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Help text */}
|
||||
<p className="text-xs text-[var(--color-neo-text-secondary)] mt-2">
|
||||
<p className="text-xs text-muted-foreground mt-2">
|
||||
Press Enter to send, Shift+Enter for new line. Drag & drop or click <Paperclip size={12} className="inline" /> to attach images (JPEG/PNG, max 5MB).
|
||||
</p>
|
||||
</div>
|
||||
@@ -438,64 +450,63 @@ export function SpecCreationChat({
|
||||
|
||||
{/* Completion footer */}
|
||||
{isComplete && (
|
||||
<div className={`p-4 border-t-3 border-[var(--color-neo-border)] ${
|
||||
initializerStatus === 'error' ? 'bg-[var(--color-neo-danger)]' : 'bg-[var(--color-neo-done)]'
|
||||
<div className={`p-4 border-t-2 border-border ${
|
||||
initializerStatus === 'error' ? 'bg-destructive' : 'bg-green-500'
|
||||
}`}>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
{initializerStatus === 'starting' ? (
|
||||
<>
|
||||
<Loader2 size={20} className="animate-spin text-[var(--color-neo-text-on-bright)]" />
|
||||
<span className="font-bold text-[var(--color-neo-text-on-bright)]">
|
||||
<Loader2 size={20} className="animate-spin text-white" />
|
||||
<span className="font-bold text-white">
|
||||
Starting agent{yoloEnabled ? ' (YOLO mode)' : ''}...
|
||||
</span>
|
||||
</>
|
||||
) : initializerStatus === 'error' ? (
|
||||
<>
|
||||
<AlertCircle size={20} className="text-[var(--color-neo-text-on-bright)]" />
|
||||
<span className="font-bold text-[var(--color-neo-text-on-bright)]">
|
||||
<AlertCircle size={20} className="text-white" />
|
||||
<span className="font-bold text-white">
|
||||
{initializerError || 'Failed to start agent'}
|
||||
</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<CheckCircle2 size={20} className="text-[var(--color-neo-text-on-bright)]" />
|
||||
<span className="font-bold text-[var(--color-neo-text-on-bright)]">Specification created successfully!</span>
|
||||
<CheckCircle2 size={20} className="text-white" />
|
||||
<span className="font-bold text-white">Specification created successfully!</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{initializerStatus === 'error' && onRetryInitializer && (
|
||||
<button
|
||||
<Button
|
||||
onClick={onRetryInitializer}
|
||||
className="neo-btn bg-[var(--color-neo-card)]"
|
||||
variant="secondary"
|
||||
>
|
||||
<RotateCcw size={14} />
|
||||
Retry
|
||||
</button>
|
||||
</Button>
|
||||
)}
|
||||
{initializerStatus === 'idle' && (
|
||||
<>
|
||||
{/* YOLO Mode Toggle */}
|
||||
<button
|
||||
<Button
|
||||
onClick={() => setYoloEnabled(!yoloEnabled)}
|
||||
className={`neo-btn text-sm py-2 px-3 ${
|
||||
yoloEnabled ? 'neo-btn-warning' : 'bg-[var(--color-neo-card)]'
|
||||
}`}
|
||||
variant={yoloEnabled ? "default" : "secondary"}
|
||||
size="sm"
|
||||
className={yoloEnabled ? 'bg-yellow-500 hover:bg-yellow-600 text-yellow-900' : ''}
|
||||
title="YOLO Mode: Skip testing for rapid prototyping"
|
||||
>
|
||||
<Zap size={16} className={yoloEnabled ? 'text-yellow-900' : ''} />
|
||||
<span className={yoloEnabled ? 'text-yellow-900 font-bold' : ''}>
|
||||
<Zap size={16} />
|
||||
<span className={yoloEnabled ? 'font-bold' : ''}>
|
||||
YOLO
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => onComplete('', yoloEnabled)}
|
||||
className="neo-btn neo-btn-primary"
|
||||
>
|
||||
Continue to Project
|
||||
<ArrowRight size={16} />
|
||||
</button>
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -40,29 +40,29 @@ interface TerminalExitMessage {
|
||||
|
||||
type TerminalServerMessage = TerminalOutputMessage | TerminalExitMessage
|
||||
|
||||
// Neobrutalism theme colors for xterm
|
||||
// Clean terminal theme colors
|
||||
const TERMINAL_THEME = {
|
||||
background: '#1a1a1a',
|
||||
foreground: '#ffffff',
|
||||
cursor: '#ff006e', // --color-neo-accent
|
||||
cursorAccent: '#1a1a1a',
|
||||
selectionBackground: 'rgba(255, 0, 110, 0.3)',
|
||||
background: '#09090b', // zinc-950
|
||||
foreground: '#fafafa', // zinc-50
|
||||
cursor: '#3b82f6', // blue-500
|
||||
cursorAccent: '#09090b',
|
||||
selectionBackground: 'rgba(59, 130, 246, 0.3)',
|
||||
selectionForeground: '#ffffff',
|
||||
black: '#1a1a1a',
|
||||
red: '#ff5400',
|
||||
green: '#70e000',
|
||||
yellow: '#ffd60a',
|
||||
blue: '#00b4d8',
|
||||
magenta: '#ff006e',
|
||||
cyan: '#00b4d8',
|
||||
white: '#ffffff',
|
||||
brightBlack: '#4a4a4a',
|
||||
brightRed: '#ff7733',
|
||||
brightGreen: '#8fff00',
|
||||
brightYellow: '#ffe44d',
|
||||
brightBlue: '#33c7e6',
|
||||
brightMagenta: '#ff4d94',
|
||||
brightCyan: '#33c7e6',
|
||||
black: '#09090b',
|
||||
red: '#ef4444',
|
||||
green: '#22c55e',
|
||||
yellow: '#eab308',
|
||||
blue: '#3b82f6',
|
||||
magenta: '#a855f7',
|
||||
cyan: '#06b6d4',
|
||||
white: '#fafafa',
|
||||
brightBlack: '#52525b',
|
||||
brightRed: '#f87171',
|
||||
brightGreen: '#4ade80',
|
||||
brightYellow: '#facc15',
|
||||
brightBlue: '#60a5fa',
|
||||
brightMagenta: '#c084fc',
|
||||
brightCyan: '#22d3ee',
|
||||
brightWhite: '#ffffff',
|
||||
}
|
||||
|
||||
@@ -552,17 +552,17 @@ export function Terminal({ projectName, terminalId, isActive }: TerminalProps) {
|
||||
}, [projectName, terminalId, isActive])
|
||||
|
||||
return (
|
||||
<div className="relative h-full w-full bg-[#1a1a1a]">
|
||||
<div className="relative h-full w-full bg-zinc-950">
|
||||
{/* Connection status indicator */}
|
||||
<div className="absolute top-2 right-2 z-10 flex items-center gap-2">
|
||||
<div
|
||||
className={`w-2 h-2 rounded-full ${
|
||||
isConnected ? 'bg-neo-done' : 'bg-neo-danger'
|
||||
isConnected ? 'bg-green-500' : 'bg-destructive'
|
||||
}`}
|
||||
title={isConnected ? 'Connected' : 'Disconnected'}
|
||||
/>
|
||||
{!isConnected && !hasExited && (
|
||||
<span className="text-xs font-mono text-gray-500">Connecting...</span>
|
||||
<span className="text-xs font-mono text-muted-foreground">Connecting...</span>
|
||||
)}
|
||||
{hasExited && exitCode !== null && (
|
||||
<span className="text-xs font-mono text-yellow-500">
|
||||
|
||||
@@ -8,6 +8,8 @@
|
||||
import { useState, useRef, useEffect, useCallback } from 'react'
|
||||
import { Plus, X } from 'lucide-react'
|
||||
import type { TerminalInfo } from '@/lib/types'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
|
||||
interface TerminalTabsProps {
|
||||
terminals: TerminalInfo[]
|
||||
@@ -154,18 +156,18 @@ export function TerminalTabs({
|
||||
)
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-1 px-2 py-1 bg-[#2a2a2a] border-b-2 border-black overflow-x-auto">
|
||||
<div className="flex items-center gap-1 px-2 py-1 bg-zinc-900 border-b border-border overflow-x-auto">
|
||||
{/* Terminal tabs */}
|
||||
{terminals.map((terminal) => (
|
||||
<div
|
||||
key={terminal.id}
|
||||
className={`
|
||||
group flex items-center gap-1 px-3 py-1 border-2 border-black cursor-pointer
|
||||
group flex items-center gap-1 px-3 py-1 rounded cursor-pointer
|
||||
transition-colors duration-100 select-none min-w-0
|
||||
${
|
||||
activeTerminalId === terminal.id
|
||||
? 'bg-neo-progress text-black'
|
||||
: 'bg-[#3a3a3a] text-white hover:bg-[var(--color-neo-hover-subtle)]'
|
||||
? 'bg-primary text-primary-foreground'
|
||||
: 'bg-zinc-800 text-zinc-300 hover:bg-zinc-700'
|
||||
}
|
||||
`}
|
||||
onClick={() => onSelect(terminal.id)}
|
||||
@@ -173,14 +175,14 @@ export function TerminalTabs({
|
||||
onContextMenu={(e) => handleContextMenu(e, terminal.id)}
|
||||
>
|
||||
{editingId === terminal.id ? (
|
||||
<input
|
||||
<Input
|
||||
ref={inputRef}
|
||||
type="text"
|
||||
value={editValue}
|
||||
onChange={(e) => setEditValue(e.target.value)}
|
||||
onBlur={submitEdit}
|
||||
onKeyDown={handleKeyDown}
|
||||
className="bg-neo-card text-neo-text px-1 py-0 text-sm font-mono border-2 border-black w-24 outline-none"
|
||||
className="h-6 px-1 py-0 text-sm font-mono w-24"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
/>
|
||||
) : (
|
||||
@@ -210,31 +212,33 @@ export function TerminalTabs({
|
||||
))}
|
||||
|
||||
{/* Add new terminal button */}
|
||||
<button
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={onCreate}
|
||||
className="flex items-center justify-center w-8 h-8 border-2 border-black bg-[#3a3a3a] text-white hover:bg-[var(--color-neo-hover-subtle)] transition-colors"
|
||||
className="h-8 w-8 bg-zinc-800 text-zinc-300 hover:bg-zinc-700"
|
||||
title="New terminal"
|
||||
>
|
||||
<Plus className="w-4 h-4" />
|
||||
</button>
|
||||
</Button>
|
||||
|
||||
{/* Context menu */}
|
||||
{contextMenu.visible && (
|
||||
<div
|
||||
ref={contextMenuRef}
|
||||
className="fixed z-50 bg-neo-card border-2 border-[var(--color-neo-border)] py-1 min-w-[120px]"
|
||||
style={{ left: contextMenu.x, top: contextMenu.y, boxShadow: 'var(--shadow-neo-md)' }}
|
||||
className="fixed z-50 bg-popover border border-border rounded-md py-1 min-w-[120px] shadow-md"
|
||||
style={{ left: contextMenu.x, top: contextMenu.y }}
|
||||
>
|
||||
<button
|
||||
onClick={handleContextMenuRename}
|
||||
className="w-full px-3 py-1 text-left text-sm font-mono hover:bg-neo-progress hover:text-black transition-colors"
|
||||
className="w-full px-3 py-1.5 text-left text-sm font-mono hover:bg-accent transition-colors"
|
||||
>
|
||||
Rename
|
||||
</button>
|
||||
{terminals.length > 1 && (
|
||||
<button
|
||||
onClick={handleContextMenuClose}
|
||||
className="w-full px-3 py-1 text-left text-sm font-mono hover:bg-neo-danger hover:text-white transition-colors"
|
||||
className="w-full px-3 py-1.5 text-left text-sm font-mono text-destructive hover:bg-destructive hover:text-destructive-foreground transition-colors"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
* Typing Indicator Component
|
||||
*
|
||||
* Shows animated dots to indicate Claude is typing/thinking.
|
||||
* Styled in neobrutalism aesthetic.
|
||||
*/
|
||||
|
||||
export function TypingIndicator() {
|
||||
@@ -10,19 +9,19 @@ export function TypingIndicator() {
|
||||
<div className="flex items-center gap-2 p-4">
|
||||
<div className="flex items-center gap-1">
|
||||
<span
|
||||
className="w-2 h-2 bg-[var(--color-neo-progress)] rounded-full animate-bounce"
|
||||
className="w-2 h-2 bg-primary rounded-full animate-bounce"
|
||||
style={{ animationDelay: '0ms' }}
|
||||
/>
|
||||
<span
|
||||
className="w-2 h-2 bg-[var(--color-neo-progress)] rounded-full animate-bounce"
|
||||
className="w-2 h-2 bg-primary rounded-full animate-bounce"
|
||||
style={{ animationDelay: '150ms' }}
|
||||
/>
|
||||
<span
|
||||
className="w-2 h-2 bg-[var(--color-neo-progress)] rounded-full animate-bounce"
|
||||
className="w-2 h-2 bg-primary rounded-full animate-bounce"
|
||||
style={{ animationDelay: '300ms' }}
|
||||
/>
|
||||
</div>
|
||||
<span className="text-sm font-mono animate-shimmer">
|
||||
<span className="text-sm font-mono text-muted-foreground">
|
||||
Claude is thinking...
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import { LayoutGrid, GitBranch } from 'lucide-react'
|
||||
import { Button } from '@/components/ui/button'
|
||||
|
||||
export type ViewMode = 'kanban' | 'graph'
|
||||
|
||||
@@ -12,35 +13,25 @@ interface ViewToggleProps {
|
||||
*/
|
||||
export function ViewToggle({ viewMode, onViewModeChange }: ViewToggleProps) {
|
||||
return (
|
||||
<div className="inline-flex rounded-lg border-2 border-neo-border p-1 bg-white shadow-neo-sm">
|
||||
<button
|
||||
<div className="inline-flex rounded-lg border p-1 bg-background">
|
||||
<Button
|
||||
variant={viewMode === 'kanban' ? 'default' : 'ghost'}
|
||||
size="sm"
|
||||
onClick={() => onViewModeChange('kanban')}
|
||||
className={`
|
||||
flex items-center gap-1.5 px-3 py-1.5 rounded-md font-medium text-sm transition-all
|
||||
${viewMode === 'kanban'
|
||||
? 'bg-neo-accent text-white shadow-neo-sm'
|
||||
: 'text-neo-text hover:bg-neo-neutral-100'
|
||||
}
|
||||
`}
|
||||
title="Kanban View"
|
||||
>
|
||||
<LayoutGrid size={16} />
|
||||
<span>Kanban</span>
|
||||
</button>
|
||||
<button
|
||||
Kanban
|
||||
</Button>
|
||||
<Button
|
||||
variant={viewMode === 'graph' ? 'default' : 'ghost'}
|
||||
size="sm"
|
||||
onClick={() => onViewModeChange('graph')}
|
||||
className={`
|
||||
flex items-center gap-1.5 px-3 py-1.5 rounded-md font-medium text-sm transition-all
|
||||
${viewMode === 'graph'
|
||||
? 'bg-neo-accent text-white shadow-neo-sm'
|
||||
: 'text-neo-text hover:bg-neo-neutral-100'
|
||||
}
|
||||
`}
|
||||
title="Dependency Graph View"
|
||||
>
|
||||
<GitBranch size={16} />
|
||||
<span>Graph</span>
|
||||
</button>
|
||||
Graph
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
66
ui/src/components/ui/alert.tsx
Normal file
66
ui/src/components/ui/alert.tsx
Normal file
@@ -0,0 +1,66 @@
|
||||
import * as React from "react"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const alertVariants = cva(
|
||||
"relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-card text-card-foreground",
|
||||
destructive:
|
||||
"text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
function Alert({
|
||||
className,
|
||||
variant,
|
||||
...props
|
||||
}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
|
||||
return (
|
||||
<div
|
||||
data-slot="alert"
|
||||
role="alert"
|
||||
className={cn(alertVariants({ variant }), className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="alert-title"
|
||||
className={cn(
|
||||
"col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function AlertDescription({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="alert-description"
|
||||
className={cn(
|
||||
"text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Alert, AlertTitle, AlertDescription }
|
||||
48
ui/src/components/ui/badge.tsx
Normal file
48
ui/src/components/ui/badge.tsx
Normal file
@@ -0,0 +1,48 @@
|
||||
import * as React from "react"
|
||||
import { Slot } from "@radix-ui/react-slot"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const badgeVariants = cva(
|
||||
"inline-flex items-center justify-center rounded-full border border-transparent px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
|
||||
secondary:
|
||||
"bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
|
||||
destructive:
|
||||
"bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
|
||||
outline:
|
||||
"border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
|
||||
ghost: "[a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
|
||||
link: "text-primary underline-offset-4 [a&]:hover:underline",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
function Badge({
|
||||
className,
|
||||
variant = "default",
|
||||
asChild = false,
|
||||
...props
|
||||
}: React.ComponentProps<"span"> &
|
||||
VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
|
||||
const Comp = asChild ? Slot : "span"
|
||||
|
||||
return (
|
||||
<Comp
|
||||
data-slot="badge"
|
||||
data-variant={variant}
|
||||
className={cn(badgeVariants({ variant }), className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Badge, badgeVariants }
|
||||
64
ui/src/components/ui/button.tsx
Normal file
64
ui/src/components/ui/button.tsx
Normal file
@@ -0,0 +1,64 @@
|
||||
import * as React from "react"
|
||||
import { Slot } from "@radix-ui/react-slot"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const buttonVariants = cva(
|
||||
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-primary text-primary-foreground hover:bg-primary/90",
|
||||
destructive:
|
||||
"bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
|
||||
outline:
|
||||
"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
|
||||
secondary:
|
||||
"bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
||||
ghost:
|
||||
"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
|
||||
link: "text-primary underline-offset-4 hover:underline",
|
||||
},
|
||||
size: {
|
||||
default: "h-9 px-4 py-2 has-[>svg]:px-3",
|
||||
xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
|
||||
sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
|
||||
lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
|
||||
icon: "size-9",
|
||||
"icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
|
||||
"icon-sm": "size-8",
|
||||
"icon-lg": "size-10",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
size: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
function Button({
|
||||
className,
|
||||
variant = "default",
|
||||
size = "default",
|
||||
asChild = false,
|
||||
...props
|
||||
}: React.ComponentProps<"button"> &
|
||||
VariantProps<typeof buttonVariants> & {
|
||||
asChild?: boolean
|
||||
}) {
|
||||
const Comp = asChild ? Slot : "button"
|
||||
|
||||
return (
|
||||
<Comp
|
||||
data-slot="button"
|
||||
data-variant={variant}
|
||||
data-size={size}
|
||||
className={cn(buttonVariants({ variant, size, className }))}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Button, buttonVariants }
|
||||
92
ui/src/components/ui/card.tsx
Normal file
92
ui/src/components/ui/card.tsx
Normal file
@@ -0,0 +1,92 @@
|
||||
import * as React from "react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Card({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card"
|
||||
className={cn(
|
||||
"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-header"
|
||||
className={cn(
|
||||
"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-title"
|
||||
className={cn("leading-none font-semibold", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-description"
|
||||
className={cn("text-muted-foreground text-sm", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardAction({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-action"
|
||||
className={cn(
|
||||
"col-start-2 row-span-2 row-start-1 self-start justify-self-end",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardContent({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-content"
|
||||
className={cn("px-6", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-footer"
|
||||
className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Card,
|
||||
CardHeader,
|
||||
CardFooter,
|
||||
CardTitle,
|
||||
CardAction,
|
||||
CardDescription,
|
||||
CardContent,
|
||||
}
|
||||
30
ui/src/components/ui/checkbox.tsx
Normal file
30
ui/src/components/ui/checkbox.tsx
Normal file
@@ -0,0 +1,30 @@
|
||||
import * as React from "react"
|
||||
import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
|
||||
import { CheckIcon } from "lucide-react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Checkbox({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
|
||||
return (
|
||||
<CheckboxPrimitive.Root
|
||||
data-slot="checkbox"
|
||||
className={cn(
|
||||
"peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<CheckboxPrimitive.Indicator
|
||||
data-slot="checkbox-indicator"
|
||||
className="grid place-content-center text-current transition-none"
|
||||
>
|
||||
<CheckIcon className="size-3.5" />
|
||||
</CheckboxPrimitive.Indicator>
|
||||
</CheckboxPrimitive.Root>
|
||||
)
|
||||
}
|
||||
|
||||
export { Checkbox }
|
||||
156
ui/src/components/ui/dialog.tsx
Normal file
156
ui/src/components/ui/dialog.tsx
Normal file
@@ -0,0 +1,156 @@
|
||||
import * as React from "react"
|
||||
import * as DialogPrimitive from "@radix-ui/react-dialog"
|
||||
import { XIcon } from "lucide-react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { Button } from "@/components/ui/button"
|
||||
|
||||
function Dialog({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Root>) {
|
||||
return <DialogPrimitive.Root data-slot="dialog" {...props} />
|
||||
}
|
||||
|
||||
function DialogTrigger({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
|
||||
return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
|
||||
}
|
||||
|
||||
function DialogPortal({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
|
||||
return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
|
||||
}
|
||||
|
||||
function DialogClose({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Close>) {
|
||||
return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
|
||||
}
|
||||
|
||||
function DialogOverlay({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
|
||||
return (
|
||||
<DialogPrimitive.Overlay
|
||||
data-slot="dialog-overlay"
|
||||
className={cn(
|
||||
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DialogContent({
|
||||
className,
|
||||
children,
|
||||
showCloseButton = true,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Content> & {
|
||||
showCloseButton?: boolean
|
||||
}) {
|
||||
return (
|
||||
<DialogPortal data-slot="dialog-portal">
|
||||
<DialogOverlay />
|
||||
<DialogPrimitive.Content
|
||||
data-slot="dialog-content"
|
||||
className={cn(
|
||||
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 outline-none sm:max-w-lg",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
{showCloseButton && (
|
||||
<DialogPrimitive.Close
|
||||
data-slot="dialog-close"
|
||||
className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
|
||||
>
|
||||
<XIcon />
|
||||
<span className="sr-only">Close</span>
|
||||
</DialogPrimitive.Close>
|
||||
)}
|
||||
</DialogPrimitive.Content>
|
||||
</DialogPortal>
|
||||
)
|
||||
}
|
||||
|
||||
function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="dialog-header"
|
||||
className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DialogFooter({
|
||||
className,
|
||||
showCloseButton = false,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<"div"> & {
|
||||
showCloseButton?: boolean
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
data-slot="dialog-footer"
|
||||
className={cn(
|
||||
"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
{showCloseButton && (
|
||||
<DialogPrimitive.Close asChild>
|
||||
<Button variant="outline">Close</Button>
|
||||
</DialogPrimitive.Close>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function DialogTitle({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Title>) {
|
||||
return (
|
||||
<DialogPrimitive.Title
|
||||
data-slot="dialog-title"
|
||||
className={cn("text-lg leading-none font-semibold", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DialogDescription({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Description>) {
|
||||
return (
|
||||
<DialogPrimitive.Description
|
||||
data-slot="dialog-description"
|
||||
className={cn("text-muted-foreground text-sm", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Dialog,
|
||||
DialogClose,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogOverlay,
|
||||
DialogPortal,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
}
|
||||
257
ui/src/components/ui/dropdown-menu.tsx
Normal file
257
ui/src/components/ui/dropdown-menu.tsx
Normal file
@@ -0,0 +1,257 @@
|
||||
import * as React from "react"
|
||||
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
|
||||
import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function DropdownMenu({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
|
||||
return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
|
||||
}
|
||||
|
||||
function DropdownMenuPortal({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuTrigger({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.Trigger
|
||||
data-slot="dropdown-menu-trigger"
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuContent({
|
||||
className,
|
||||
sideOffset = 4,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.Portal>
|
||||
<DropdownMenuPrimitive.Content
|
||||
data-slot="dropdown-menu-content"
|
||||
sideOffset={sideOffset}
|
||||
className={cn(
|
||||
"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
|
||||
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
</DropdownMenuPrimitive.Portal>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuGroup({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuItem({
|
||||
className,
|
||||
inset,
|
||||
variant = "default",
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
|
||||
inset?: boolean
|
||||
variant?: "default" | "destructive"
|
||||
}) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.Item
|
||||
data-slot="dropdown-menu-item"
|
||||
data-inset={inset}
|
||||
data-variant={variant}
|
||||
className={cn(
|
||||
"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuCheckboxItem({
|
||||
className,
|
||||
children,
|
||||
checked,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.CheckboxItem
|
||||
data-slot="dropdown-menu-checkbox-item"
|
||||
className={cn(
|
||||
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
checked={checked}
|
||||
{...props}
|
||||
>
|
||||
<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
|
||||
<DropdownMenuPrimitive.ItemIndicator>
|
||||
<CheckIcon className="size-4" />
|
||||
</DropdownMenuPrimitive.ItemIndicator>
|
||||
</span>
|
||||
{children}
|
||||
</DropdownMenuPrimitive.CheckboxItem>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuRadioGroup({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.RadioGroup
|
||||
data-slot="dropdown-menu-radio-group"
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuRadioItem({
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.RadioItem
|
||||
data-slot="dropdown-menu-radio-item"
|
||||
className={cn(
|
||||
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
|
||||
<DropdownMenuPrimitive.ItemIndicator>
|
||||
<CircleIcon className="size-2 fill-current" />
|
||||
</DropdownMenuPrimitive.ItemIndicator>
|
||||
</span>
|
||||
{children}
|
||||
</DropdownMenuPrimitive.RadioItem>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuLabel({
|
||||
className,
|
||||
inset,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
|
||||
inset?: boolean
|
||||
}) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.Label
|
||||
data-slot="dropdown-menu-label"
|
||||
data-inset={inset}
|
||||
className={cn(
|
||||
"px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuSeparator({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.Separator
|
||||
data-slot="dropdown-menu-separator"
|
||||
className={cn("bg-border -mx-1 my-1 h-px", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuShortcut({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"span">) {
|
||||
return (
|
||||
<span
|
||||
data-slot="dropdown-menu-shortcut"
|
||||
className={cn(
|
||||
"text-muted-foreground ml-auto text-xs tracking-widest",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuSub({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
|
||||
return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
|
||||
}
|
||||
|
||||
function DropdownMenuSubTrigger({
|
||||
className,
|
||||
inset,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
|
||||
inset?: boolean
|
||||
}) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.SubTrigger
|
||||
data-slot="dropdown-menu-sub-trigger"
|
||||
data-inset={inset}
|
||||
className={cn(
|
||||
"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<ChevronRightIcon className="ml-auto size-4" />
|
||||
</DropdownMenuPrimitive.SubTrigger>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuSubContent({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.SubContent
|
||||
data-slot="dropdown-menu-sub-content"
|
||||
className={cn(
|
||||
"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg",
|
||||
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
DropdownMenu,
|
||||
DropdownMenuPortal,
|
||||
DropdownMenuTrigger,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuGroup,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuCheckboxItem,
|
||||
DropdownMenuRadioGroup,
|
||||
DropdownMenuRadioItem,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuShortcut,
|
||||
DropdownMenuSub,
|
||||
DropdownMenuSubTrigger,
|
||||
DropdownMenuSubContent,
|
||||
}
|
||||
21
ui/src/components/ui/input.tsx
Normal file
21
ui/src/components/ui/input.tsx
Normal file
@@ -0,0 +1,21 @@
|
||||
import * as React from "react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Input({ className, type, ...props }: React.ComponentProps<"input">) {
|
||||
return (
|
||||
<input
|
||||
type={type}
|
||||
data-slot="input"
|
||||
className={cn(
|
||||
"file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
|
||||
"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
|
||||
"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Input }
|
||||
22
ui/src/components/ui/label.tsx
Normal file
22
ui/src/components/ui/label.tsx
Normal file
@@ -0,0 +1,22 @@
|
||||
import * as React from "react"
|
||||
import * as LabelPrimitive from "@radix-ui/react-label"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Label({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof LabelPrimitive.Root>) {
|
||||
return (
|
||||
<LabelPrimitive.Root
|
||||
data-slot="label"
|
||||
className={cn(
|
||||
"flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Label }
|
||||
87
ui/src/components/ui/popover.tsx
Normal file
87
ui/src/components/ui/popover.tsx
Normal file
@@ -0,0 +1,87 @@
|
||||
import * as React from "react"
|
||||
import * as PopoverPrimitive from "@radix-ui/react-popover"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Popover({
|
||||
...props
|
||||
}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
|
||||
return <PopoverPrimitive.Root data-slot="popover" {...props} />
|
||||
}
|
||||
|
||||
function PopoverTrigger({
|
||||
...props
|
||||
}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
|
||||
return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
|
||||
}
|
||||
|
||||
function PopoverContent({
|
||||
className,
|
||||
align = "center",
|
||||
sideOffset = 4,
|
||||
...props
|
||||
}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
|
||||
return (
|
||||
<PopoverPrimitive.Portal>
|
||||
<PopoverPrimitive.Content
|
||||
data-slot="popover-content"
|
||||
align={align}
|
||||
sideOffset={sideOffset}
|
||||
className={cn(
|
||||
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
</PopoverPrimitive.Portal>
|
||||
)
|
||||
}
|
||||
|
||||
function PopoverAnchor({
|
||||
...props
|
||||
}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
|
||||
return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
|
||||
}
|
||||
|
||||
function PopoverHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="popover-header"
|
||||
className={cn("flex flex-col gap-1 text-sm", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function PopoverTitle({ className, ...props }: React.ComponentProps<"h2">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="popover-title"
|
||||
className={cn("font-medium", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function PopoverDescription({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"p">) {
|
||||
return (
|
||||
<p
|
||||
data-slot="popover-description"
|
||||
className={cn("text-muted-foreground", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Popover,
|
||||
PopoverTrigger,
|
||||
PopoverContent,
|
||||
PopoverAnchor,
|
||||
PopoverHeader,
|
||||
PopoverTitle,
|
||||
PopoverDescription,
|
||||
}
|
||||
45
ui/src/components/ui/radio-group.tsx
Normal file
45
ui/src/components/ui/radio-group.tsx
Normal file
@@ -0,0 +1,45 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
|
||||
import { CircleIcon } from "lucide-react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function RadioGroup({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
|
||||
return (
|
||||
<RadioGroupPrimitive.Root
|
||||
data-slot="radio-group"
|
||||
className={cn("grid gap-3", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function RadioGroupItem({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
|
||||
return (
|
||||
<RadioGroupPrimitive.Item
|
||||
data-slot="radio-group-item"
|
||||
className={cn(
|
||||
"border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<RadioGroupPrimitive.Indicator
|
||||
data-slot="radio-group-indicator"
|
||||
className="relative flex items-center justify-center"
|
||||
>
|
||||
<CircleIcon className="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
|
||||
</RadioGroupPrimitive.Indicator>
|
||||
</RadioGroupPrimitive.Item>
|
||||
)
|
||||
}
|
||||
|
||||
export { RadioGroup, RadioGroupItem }
|
||||
56
ui/src/components/ui/scroll-area.tsx
Normal file
56
ui/src/components/ui/scroll-area.tsx
Normal file
@@ -0,0 +1,56 @@
|
||||
import * as React from "react"
|
||||
import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function ScrollArea({
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
|
||||
return (
|
||||
<ScrollAreaPrimitive.Root
|
||||
data-slot="scroll-area"
|
||||
className={cn("relative", className)}
|
||||
{...props}
|
||||
>
|
||||
<ScrollAreaPrimitive.Viewport
|
||||
data-slot="scroll-area-viewport"
|
||||
className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
|
||||
>
|
||||
{children}
|
||||
</ScrollAreaPrimitive.Viewport>
|
||||
<ScrollBar />
|
||||
<ScrollAreaPrimitive.Corner />
|
||||
</ScrollAreaPrimitive.Root>
|
||||
)
|
||||
}
|
||||
|
||||
function ScrollBar({
|
||||
className,
|
||||
orientation = "vertical",
|
||||
...props
|
||||
}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
|
||||
return (
|
||||
<ScrollAreaPrimitive.ScrollAreaScrollbar
|
||||
data-slot="scroll-area-scrollbar"
|
||||
orientation={orientation}
|
||||
className={cn(
|
||||
"flex touch-none p-px transition-colors select-none",
|
||||
orientation === "vertical" &&
|
||||
"h-full w-2.5 border-l border-l-transparent",
|
||||
orientation === "horizontal" &&
|
||||
"h-2.5 flex-col border-t border-t-transparent",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<ScrollAreaPrimitive.ScrollAreaThumb
|
||||
data-slot="scroll-area-thumb"
|
||||
className="bg-border relative flex-1 rounded-full"
|
||||
/>
|
||||
</ScrollAreaPrimitive.ScrollAreaScrollbar>
|
||||
)
|
||||
}
|
||||
|
||||
export { ScrollArea, ScrollBar }
|
||||
190
ui/src/components/ui/select.tsx
Normal file
190
ui/src/components/ui/select.tsx
Normal file
@@ -0,0 +1,190 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as SelectPrimitive from "@radix-ui/react-select"
|
||||
import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Select({
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Root>) {
|
||||
return <SelectPrimitive.Root data-slot="select" {...props} />
|
||||
}
|
||||
|
||||
function SelectGroup({
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Group>) {
|
||||
return <SelectPrimitive.Group data-slot="select-group" {...props} />
|
||||
}
|
||||
|
||||
function SelectValue({
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Value>) {
|
||||
return <SelectPrimitive.Value data-slot="select-value" {...props} />
|
||||
}
|
||||
|
||||
function SelectTrigger({
|
||||
className,
|
||||
size = "default",
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
|
||||
size?: "sm" | "default"
|
||||
}) {
|
||||
return (
|
||||
<SelectPrimitive.Trigger
|
||||
data-slot="select-trigger"
|
||||
data-size={size}
|
||||
className={cn(
|
||||
"border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<SelectPrimitive.Icon asChild>
|
||||
<ChevronDownIcon className="size-4 opacity-50" />
|
||||
</SelectPrimitive.Icon>
|
||||
</SelectPrimitive.Trigger>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectContent({
|
||||
className,
|
||||
children,
|
||||
position = "item-aligned",
|
||||
align = "center",
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Content>) {
|
||||
return (
|
||||
<SelectPrimitive.Portal>
|
||||
<SelectPrimitive.Content
|
||||
data-slot="select-content"
|
||||
className={cn(
|
||||
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
|
||||
position === "popper" &&
|
||||
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
|
||||
className
|
||||
)}
|
||||
position={position}
|
||||
align={align}
|
||||
{...props}
|
||||
>
|
||||
<SelectScrollUpButton />
|
||||
<SelectPrimitive.Viewport
|
||||
className={cn(
|
||||
"p-1",
|
||||
position === "popper" &&
|
||||
"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</SelectPrimitive.Viewport>
|
||||
<SelectScrollDownButton />
|
||||
</SelectPrimitive.Content>
|
||||
</SelectPrimitive.Portal>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectLabel({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Label>) {
|
||||
return (
|
||||
<SelectPrimitive.Label
|
||||
data-slot="select-label"
|
||||
className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectItem({
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Item>) {
|
||||
return (
|
||||
<SelectPrimitive.Item
|
||||
data-slot="select-item"
|
||||
className={cn(
|
||||
"focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<span
|
||||
data-slot="select-item-indicator"
|
||||
className="absolute right-2 flex size-3.5 items-center justify-center"
|
||||
>
|
||||
<SelectPrimitive.ItemIndicator>
|
||||
<CheckIcon className="size-4" />
|
||||
</SelectPrimitive.ItemIndicator>
|
||||
</span>
|
||||
<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
|
||||
</SelectPrimitive.Item>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectSeparator({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
|
||||
return (
|
||||
<SelectPrimitive.Separator
|
||||
data-slot="select-separator"
|
||||
className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectScrollUpButton({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
|
||||
return (
|
||||
<SelectPrimitive.ScrollUpButton
|
||||
data-slot="select-scroll-up-button"
|
||||
className={cn(
|
||||
"flex cursor-default items-center justify-center py-1",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<ChevronUpIcon className="size-4" />
|
||||
</SelectPrimitive.ScrollUpButton>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectScrollDownButton({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
|
||||
return (
|
||||
<SelectPrimitive.ScrollDownButton
|
||||
data-slot="select-scroll-down-button"
|
||||
className={cn(
|
||||
"flex cursor-default items-center justify-center py-1",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<ChevronDownIcon className="size-4" />
|
||||
</SelectPrimitive.ScrollDownButton>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectGroup,
|
||||
SelectItem,
|
||||
SelectLabel,
|
||||
SelectScrollDownButton,
|
||||
SelectScrollUpButton,
|
||||
SelectSeparator,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
}
|
||||
28
ui/src/components/ui/separator.tsx
Normal file
28
ui/src/components/ui/separator.tsx
Normal file
@@ -0,0 +1,28 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as SeparatorPrimitive from "@radix-ui/react-separator"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Separator({
|
||||
className,
|
||||
orientation = "horizontal",
|
||||
decorative = true,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
|
||||
return (
|
||||
<SeparatorPrimitive.Root
|
||||
data-slot="separator"
|
||||
decorative={decorative}
|
||||
orientation={orientation}
|
||||
className={cn(
|
||||
"bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Separator }
|
||||
35
ui/src/components/ui/switch.tsx
Normal file
35
ui/src/components/ui/switch.tsx
Normal file
@@ -0,0 +1,35 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as SwitchPrimitive from "@radix-ui/react-switch"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Switch({
|
||||
className,
|
||||
size = "default",
|
||||
...props
|
||||
}: React.ComponentProps<typeof SwitchPrimitive.Root> & {
|
||||
size?: "sm" | "default"
|
||||
}) {
|
||||
return (
|
||||
<SwitchPrimitive.Root
|
||||
data-slot="switch"
|
||||
data-size={size}
|
||||
className={cn(
|
||||
"peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 group/switch inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-[1.15rem] data-[size=default]:w-8 data-[size=sm]:h-3.5 data-[size=sm]:w-6",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<SwitchPrimitive.Thumb
|
||||
data-slot="switch-thumb"
|
||||
className={cn(
|
||||
"bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block rounded-full ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
|
||||
)}
|
||||
/>
|
||||
</SwitchPrimitive.Root>
|
||||
)
|
||||
}
|
||||
|
||||
export { Switch }
|
||||
89
ui/src/components/ui/tabs.tsx
Normal file
89
ui/src/components/ui/tabs.tsx
Normal file
@@ -0,0 +1,89 @@
|
||||
import * as React from "react"
|
||||
import * as TabsPrimitive from "@radix-ui/react-tabs"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Tabs({
|
||||
className,
|
||||
orientation = "horizontal",
|
||||
...props
|
||||
}: React.ComponentProps<typeof TabsPrimitive.Root>) {
|
||||
return (
|
||||
<TabsPrimitive.Root
|
||||
data-slot="tabs"
|
||||
data-orientation={orientation}
|
||||
orientation={orientation}
|
||||
className={cn(
|
||||
"group/tabs flex gap-2 data-[orientation=horizontal]:flex-col",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
const tabsListVariants = cva(
|
||||
"rounded-lg p-[3px] group-data-[orientation=horizontal]/tabs:h-9 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-muted",
|
||||
line: "gap-1 bg-transparent",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
function TabsList({
|
||||
className,
|
||||
variant = "default",
|
||||
...props
|
||||
}: React.ComponentProps<typeof TabsPrimitive.List> &
|
||||
VariantProps<typeof tabsListVariants>) {
|
||||
return (
|
||||
<TabsPrimitive.List
|
||||
data-slot="tabs-list"
|
||||
data-variant={variant}
|
||||
className={cn(tabsListVariants({ variant }), className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function TabsTrigger({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
|
||||
return (
|
||||
<TabsPrimitive.Trigger
|
||||
data-slot="tabs-trigger"
|
||||
className={cn(
|
||||
"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
"group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent",
|
||||
"data-[state=active]:bg-background dark:data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 data-[state=active]:text-foreground",
|
||||
"after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function TabsContent({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof TabsPrimitive.Content>) {
|
||||
return (
|
||||
<TabsPrimitive.Content
|
||||
data-slot="tabs-content"
|
||||
className={cn("flex-1 outline-none", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }
|
||||
18
ui/src/components/ui/textarea.tsx
Normal file
18
ui/src/components/ui/textarea.tsx
Normal file
@@ -0,0 +1,18 @@
|
||||
import * as React from "react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
|
||||
return (
|
||||
<textarea
|
||||
data-slot="textarea"
|
||||
className={cn(
|
||||
"border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Textarea }
|
||||
47
ui/src/components/ui/toggle.tsx
Normal file
47
ui/src/components/ui/toggle.tsx
Normal file
@@ -0,0 +1,47 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as TogglePrimitive from "@radix-ui/react-toggle"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const toggleVariants = cva(
|
||||
"inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-transparent",
|
||||
outline:
|
||||
"border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground",
|
||||
},
|
||||
size: {
|
||||
default: "h-9 px-2 min-w-9",
|
||||
sm: "h-8 px-1.5 min-w-8",
|
||||
lg: "h-10 px-2.5 min-w-10",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
size: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
function Toggle({
|
||||
className,
|
||||
variant,
|
||||
size,
|
||||
...props
|
||||
}: React.ComponentProps<typeof TogglePrimitive.Root> &
|
||||
VariantProps<typeof toggleVariants>) {
|
||||
return (
|
||||
<TogglePrimitive.Root
|
||||
data-slot="toggle"
|
||||
className={cn(toggleVariants({ variant, size, className }))}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Toggle, toggleVariants }
|
||||
61
ui/src/components/ui/tooltip.tsx
Normal file
61
ui/src/components/ui/tooltip.tsx
Normal file
@@ -0,0 +1,61 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as TooltipPrimitive from "@radix-ui/react-tooltip"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function TooltipProvider({
|
||||
delayDuration = 0,
|
||||
...props
|
||||
}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
|
||||
return (
|
||||
<TooltipPrimitive.Provider
|
||||
data-slot="tooltip-provider"
|
||||
delayDuration={delayDuration}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function Tooltip({
|
||||
...props
|
||||
}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
|
||||
return (
|
||||
<TooltipProvider>
|
||||
<TooltipPrimitive.Root data-slot="tooltip" {...props} />
|
||||
</TooltipProvider>
|
||||
)
|
||||
}
|
||||
|
||||
function TooltipTrigger({
|
||||
...props
|
||||
}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
|
||||
return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
|
||||
}
|
||||
|
||||
function TooltipContent({
|
||||
className,
|
||||
sideOffset = 0,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
|
||||
return (
|
||||
<TooltipPrimitive.Portal>
|
||||
<TooltipPrimitive.Content
|
||||
data-slot="tooltip-content"
|
||||
sideOffset={sideOffset}
|
||||
className={cn(
|
||||
"bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
|
||||
</TooltipPrimitive.Content>
|
||||
</TooltipPrimitive.Portal>
|
||||
)
|
||||
}
|
||||
|
||||
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
|
||||
6
ui/src/lib/utils.ts
Normal file
6
ui/src/lib/utils.ts
Normal file
@@ -0,0 +1,6 @@
|
||||
import { clsx, type ClassValue } from "clsx"
|
||||
import { twMerge } from "tailwind-merge"
|
||||
|
||||
export function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs))
|
||||
}
|
||||
@@ -3,7 +3,7 @@ import { createRoot } from 'react-dom/client'
|
||||
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
|
||||
import App from './App'
|
||||
import './styles/globals.css'
|
||||
import './styles/custom-theme.css' // Custom theme overrides (safe from upstream conflicts)
|
||||
// Note: Custom theme removed - using shadcn/ui theming instead
|
||||
|
||||
const queryClient = new QueryClient({
|
||||
defaultOptions: {
|
||||
|
||||
@@ -1,436 +0,0 @@
|
||||
/*
|
||||
* Clean Twitter-Style Theme
|
||||
* =========================
|
||||
* Based on user's exact design system values
|
||||
*/
|
||||
|
||||
:root {
|
||||
/* Core colors */
|
||||
--color-neo-bg: oklch(1.0000 0 0);
|
||||
--color-neo-card: oklch(0.9784 0.0011 197.1387);
|
||||
--color-neo-text: oklch(0.1884 0.0128 248.5103);
|
||||
--color-neo-text-secondary: oklch(0.1884 0.0128 248.5103);
|
||||
--color-neo-text-muted: oklch(0.5637 0.0078 247.9662);
|
||||
--color-neo-text-on-bright: oklch(1.0000 0 0);
|
||||
|
||||
/* Primary accent - Twitter blue */
|
||||
--color-neo-accent: oklch(0.6723 0.1606 244.9955);
|
||||
|
||||
/* Status colors - all use accent blue except danger */
|
||||
--color-neo-pending: oklch(0.6723 0.1606 244.9955);
|
||||
--color-neo-progress: oklch(0.6723 0.1606 244.9955);
|
||||
--color-neo-done: oklch(0.6723 0.1606 244.9955);
|
||||
--color-neo-danger: oklch(0.6188 0.2376 25.7658);
|
||||
|
||||
/* Borders and neutrals */
|
||||
--color-neo-border: oklch(0.9317 0.0118 231.6594);
|
||||
--color-neo-neutral-50: oklch(0.9809 0.0025 228.7836);
|
||||
--color-neo-neutral-100: oklch(0.9392 0.0166 250.8453);
|
||||
--color-neo-neutral-200: oklch(0.9222 0.0013 286.3737);
|
||||
--color-neo-neutral-300: oklch(0.9317 0.0118 231.6594);
|
||||
|
||||
/* No shadows */
|
||||
--shadow-neo-sm: none;
|
||||
--shadow-neo-md: none;
|
||||
--shadow-neo-lg: none;
|
||||
--shadow-neo-xl: none;
|
||||
--shadow-neo-left: none;
|
||||
--shadow-neo-inset: none;
|
||||
|
||||
/* Typography */
|
||||
--font-neo-sans: Open Sans, sans-serif;
|
||||
--font-neo-mono: Menlo, monospace;
|
||||
|
||||
/* Radius - 1.3rem base */
|
||||
--radius-neo-sm: calc(1.3rem - 4px);
|
||||
--radius-neo-md: calc(1.3rem - 2px);
|
||||
--radius-neo-lg: 1.3rem;
|
||||
--radius-neo-xl: calc(1.3rem + 4px);
|
||||
}
|
||||
|
||||
.dark {
|
||||
/* Core colors - dark mode (Twitter dark style) */
|
||||
--color-neo-bg: oklch(0.08 0 0);
|
||||
--color-neo-card: oklch(0.16 0.005 250);
|
||||
--color-neo-text: oklch(0.95 0 0);
|
||||
--color-neo-text-secondary: oklch(0.75 0 0);
|
||||
--color-neo-text-muted: oklch(0.55 0 0);
|
||||
--color-neo-text-on-bright: oklch(1.0 0 0);
|
||||
|
||||
/* Primary accent */
|
||||
--color-neo-accent: oklch(0.6692 0.1607 245.0110);
|
||||
|
||||
/* Status colors - all use accent blue except danger */
|
||||
--color-neo-pending: oklch(0.6692 0.1607 245.0110);
|
||||
--color-neo-progress: oklch(0.6692 0.1607 245.0110);
|
||||
--color-neo-done: oklch(0.6692 0.1607 245.0110);
|
||||
--color-neo-danger: oklch(0.6188 0.2376 25.7658);
|
||||
|
||||
/* Borders and neutrals - better contrast */
|
||||
--color-neo-border: oklch(0.30 0 0);
|
||||
--color-neo-neutral-50: oklch(0.20 0 0);
|
||||
--color-neo-neutral-100: oklch(0.25 0.01 250);
|
||||
--color-neo-neutral-200: oklch(0.22 0 0);
|
||||
--color-neo-neutral-300: oklch(0.30 0 0);
|
||||
|
||||
/* No shadows */
|
||||
--shadow-neo-sm: none;
|
||||
--shadow-neo-md: none;
|
||||
--shadow-neo-lg: none;
|
||||
--shadow-neo-xl: none;
|
||||
--shadow-neo-left: none;
|
||||
--shadow-neo-inset: none;
|
||||
}
|
||||
|
||||
/* ===== GLOBAL OVERRIDES ===== */
|
||||
|
||||
* {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* ===== CARDS ===== */
|
||||
.neo-card,
|
||||
[class*="neo-card"] {
|
||||
border: 1px solid var(--color-neo-border) !important;
|
||||
box-shadow: none !important;
|
||||
transform: none !important;
|
||||
border-radius: var(--radius-neo-lg) !important;
|
||||
background-color: var(--color-neo-card) !important;
|
||||
}
|
||||
|
||||
.neo-card:hover,
|
||||
[class*="neo-card"]:hover {
|
||||
transform: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* ===== BUTTONS ===== */
|
||||
.neo-btn,
|
||||
[class*="neo-btn"],
|
||||
button {
|
||||
border-width: 1px !important;
|
||||
box-shadow: none !important;
|
||||
text-transform: none !important;
|
||||
font-weight: 500 !important;
|
||||
transform: none !important;
|
||||
border-radius: var(--radius-neo-lg) !important;
|
||||
font-family: var(--font-neo-sans) !important;
|
||||
}
|
||||
|
||||
.neo-btn:hover,
|
||||
[class*="neo-btn"]:hover,
|
||||
button:hover {
|
||||
transform: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.neo-btn:active,
|
||||
[class*="neo-btn"]:active {
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
/* Primary button */
|
||||
.neo-btn-primary {
|
||||
background-color: var(--color-neo-accent) !important;
|
||||
border-color: var(--color-neo-accent) !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
/* Success button - use accent blue instead of green */
|
||||
.neo-btn-success {
|
||||
background-color: var(--color-neo-accent) !important;
|
||||
border-color: var(--color-neo-accent) !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
/* Danger button - subtle red */
|
||||
.neo-btn-danger {
|
||||
background-color: var(--color-neo-danger) !important;
|
||||
border-color: var(--color-neo-danger) !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
/* ===== INPUTS ===== */
|
||||
.neo-input,
|
||||
.neo-textarea,
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
border: 1px solid var(--color-neo-border) !important;
|
||||
box-shadow: none !important;
|
||||
border-radius: var(--radius-neo-md) !important;
|
||||
background-color: var(--color-neo-neutral-50) !important;
|
||||
}
|
||||
|
||||
.neo-input:focus,
|
||||
.neo-textarea:focus,
|
||||
input:focus,
|
||||
textarea:focus,
|
||||
select:focus {
|
||||
box-shadow: none !important;
|
||||
border-color: var(--color-neo-accent) !important;
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
/* ===== KEYBOARD ACCESSIBILITY ===== */
|
||||
/* Focus-visible styles for keyboard navigation */
|
||||
.neo-btn:focus-visible,
|
||||
[class*="neo-btn"]:focus-visible,
|
||||
button:focus-visible {
|
||||
outline: 2px solid var(--color-neo-accent) !important;
|
||||
outline-offset: 2px !important;
|
||||
}
|
||||
|
||||
.neo-input:focus-visible,
|
||||
.neo-textarea:focus-visible,
|
||||
input:focus-visible,
|
||||
textarea:focus-visible,
|
||||
select:focus-visible {
|
||||
outline: 2px solid var(--color-neo-accent) !important;
|
||||
outline-offset: 2px !important;
|
||||
border-color: var(--color-neo-accent) !important;
|
||||
}
|
||||
|
||||
a:focus-visible,
|
||||
[role="button"]:focus-visible,
|
||||
[tabindex]:focus-visible {
|
||||
outline: 2px solid var(--color-neo-accent) !important;
|
||||
outline-offset: 2px !important;
|
||||
}
|
||||
|
||||
/* ===== BADGES ===== */
|
||||
.neo-badge,
|
||||
[class*="neo-badge"] {
|
||||
border: 1px solid var(--color-neo-border) !important;
|
||||
box-shadow: none !important;
|
||||
border-radius: var(--radius-neo-lg) !important;
|
||||
font-weight: 500 !important;
|
||||
text-transform: none !important;
|
||||
}
|
||||
|
||||
/* ===== PROGRESS BAR ===== */
|
||||
.neo-progress {
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
border-radius: var(--radius-neo-lg) !important;
|
||||
background-color: var(--color-neo-neutral-100) !important;
|
||||
overflow: hidden !important;
|
||||
height: 0.75rem !important;
|
||||
}
|
||||
|
||||
.neo-progress-fill {
|
||||
background-color: var(--color-neo-accent) !important;
|
||||
border-radius: var(--radius-neo-lg) !important;
|
||||
}
|
||||
|
||||
.neo-progress-fill::after {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* ===== KANBAN COLUMNS ===== */
|
||||
.kanban-column {
|
||||
border: 1px solid var(--color-neo-border) !important;
|
||||
border-radius: var(--radius-neo-lg) !important;
|
||||
overflow: hidden;
|
||||
background-color: var(--color-neo-bg) !important;
|
||||
border-left: none !important;
|
||||
}
|
||||
|
||||
/* Left accent border on the whole column */
|
||||
.kanban-column.kanban-header-pending {
|
||||
border-left: 3px solid var(--color-neo-accent) !important;
|
||||
}
|
||||
|
||||
.kanban-column.kanban-header-progress {
|
||||
border-left: 3px solid var(--color-neo-accent) !important;
|
||||
}
|
||||
|
||||
.kanban-column.kanban-header-done {
|
||||
border-left: 3px solid var(--color-neo-accent) !important;
|
||||
}
|
||||
|
||||
.kanban-header {
|
||||
background-color: var(--color-neo-card) !important;
|
||||
border-bottom: 1px solid var(--color-neo-border) !important;
|
||||
border-left: none !important;
|
||||
}
|
||||
|
||||
/* ===== MODALS & DROPDOWNS ===== */
|
||||
.neo-modal,
|
||||
[class*="neo-modal"],
|
||||
[role="dialog"] {
|
||||
border: 1px solid var(--color-neo-border) !important;
|
||||
border-radius: var(--radius-neo-xl) !important;
|
||||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1) !important;
|
||||
}
|
||||
|
||||
.neo-dropdown,
|
||||
[class*="dropdown"],
|
||||
[role="menu"],
|
||||
[data-radix-popper-content-wrapper] {
|
||||
border: 1px solid var(--color-neo-border) !important;
|
||||
border-radius: var(--radius-neo-lg) !important;
|
||||
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08) !important;
|
||||
}
|
||||
|
||||
/* ===== STATUS BADGES ===== */
|
||||
[class*="bg-neo-pending"],
|
||||
.bg-\[var\(--color-neo-pending\)\] {
|
||||
background-color: var(--color-neo-neutral-100) !important;
|
||||
color: var(--color-neo-text-secondary) !important;
|
||||
}
|
||||
|
||||
[class*="bg-neo-progress"],
|
||||
.bg-\[var\(--color-neo-progress\)\] {
|
||||
background-color: oklch(0.9392 0.0166 250.8453) !important;
|
||||
color: var(--color-neo-accent) !important;
|
||||
}
|
||||
|
||||
[class*="bg-neo-done"],
|
||||
.bg-\[var\(--color-neo-done\)\] {
|
||||
background-color: oklch(0.9392 0.0166 250.8453) !important;
|
||||
color: var(--color-neo-accent) !important;
|
||||
}
|
||||
|
||||
/* ===== REMOVE NEO EFFECTS ===== */
|
||||
[class*="shadow-neo"],
|
||||
[class*="shadow-"] {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* Only disable hover transforms, not layout utilities like -translate-x-1/2 */
|
||||
[class*="hover:translate"],
|
||||
[class*="hover:-translate"] {
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
/* ===== TEXT STYLING ===== */
|
||||
h1, h2, h3, h4, h5, h6,
|
||||
[class*="heading"],
|
||||
[class*="title"],
|
||||
[class*="font-display"] {
|
||||
text-transform: none !important;
|
||||
font-family: var(--font-neo-sans) !important;
|
||||
}
|
||||
|
||||
.uppercase {
|
||||
text-transform: none !important;
|
||||
}
|
||||
|
||||
strong, b,
|
||||
[class*="font-bold"],
|
||||
[class*="font-black"] {
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
/* ===== SPECIFIC ELEMENT FIXES ===== */
|
||||
|
||||
/* Green badges should use accent color */
|
||||
[class*="bg-green"],
|
||||
[class*="bg-emerald"],
|
||||
[class*="bg-lime"] {
|
||||
background-color: oklch(0.9392 0.0166 250.8453) !important;
|
||||
color: var(--color-neo-accent) !important;
|
||||
}
|
||||
|
||||
/* Category badges */
|
||||
[class*="FUNCTIONAL"],
|
||||
[class*="functional"] {
|
||||
background-color: oklch(0.9392 0.0166 250.8453) !important;
|
||||
color: var(--color-neo-accent) !important;
|
||||
}
|
||||
|
||||
/* Live/Status indicators - use accent instead of green */
|
||||
.text-\[var\(--color-neo-done\)\] {
|
||||
color: var(--color-neo-accent) !important;
|
||||
}
|
||||
|
||||
/* Override any remaining borders to be thin */
|
||||
[class*="border-3"],
|
||||
[class*="border-b-3"] {
|
||||
border-width: 1px !important;
|
||||
}
|
||||
|
||||
/* ===== DARK MODE SPECIFIC FIXES ===== */
|
||||
|
||||
.dark .neo-card,
|
||||
.dark [class*="neo-card"] {
|
||||
background-color: var(--color-neo-card) !important;
|
||||
border-color: var(--color-neo-border) !important;
|
||||
}
|
||||
|
||||
.dark .kanban-column {
|
||||
background-color: var(--color-neo-card) !important;
|
||||
}
|
||||
|
||||
.dark .kanban-header {
|
||||
background-color: var(--color-neo-neutral-50) !important;
|
||||
}
|
||||
|
||||
/* Feature cards in dark mode */
|
||||
.dark .neo-card .neo-card {
|
||||
background-color: var(--color-neo-neutral-50) !important;
|
||||
}
|
||||
|
||||
/* Badges in dark mode - lighter background for visibility */
|
||||
.dark .neo-badge,
|
||||
.dark [class*="neo-badge"] {
|
||||
background-color: var(--color-neo-neutral-100) !important;
|
||||
color: var(--color-neo-text) !important;
|
||||
border-color: var(--color-neo-border) !important;
|
||||
}
|
||||
|
||||
/* Status badges in dark mode */
|
||||
.dark [class*="bg-neo-done"],
|
||||
.dark .bg-\[var\(--color-neo-done\)\] {
|
||||
background-color: oklch(0.25 0.05 245) !important;
|
||||
color: var(--color-neo-accent) !important;
|
||||
}
|
||||
|
||||
.dark [class*="bg-neo-progress"],
|
||||
.dark .bg-\[var\(--color-neo-progress\)\] {
|
||||
background-color: oklch(0.25 0.05 245) !important;
|
||||
color: var(--color-neo-accent) !important;
|
||||
}
|
||||
|
||||
/* Green badges in dark mode */
|
||||
.dark [class*="bg-green"],
|
||||
.dark [class*="bg-emerald"],
|
||||
.dark [class*="bg-lime"] {
|
||||
background-color: oklch(0.25 0.05 245) !important;
|
||||
color: var(--color-neo-accent) !important;
|
||||
}
|
||||
|
||||
/* Category badges in dark mode */
|
||||
.dark [class*="FUNCTIONAL"],
|
||||
.dark [class*="functional"] {
|
||||
background-color: oklch(0.25 0.05 245) !important;
|
||||
color: var(--color-neo-accent) !important;
|
||||
}
|
||||
|
||||
/* Buttons in dark mode - better visibility */
|
||||
.dark .neo-btn,
|
||||
.dark button {
|
||||
border-color: var(--color-neo-border) !important;
|
||||
}
|
||||
|
||||
.dark .neo-btn-primary,
|
||||
.dark .neo-btn-success {
|
||||
background-color: var(--color-neo-accent) !important;
|
||||
border-color: var(--color-neo-accent) !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
/* Toggle buttons - fix "Graph" visibility */
|
||||
.dark [class*="text-neo-text"] {
|
||||
color: var(--color-neo-text) !important;
|
||||
}
|
||||
|
||||
/* Inputs in dark mode */
|
||||
.dark input,
|
||||
.dark textarea,
|
||||
.dark select {
|
||||
background-color: var(--color-neo-neutral-50) !important;
|
||||
border-color: var(--color-neo-border) !important;
|
||||
color: var(--color-neo-text) !important;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
30
ui/tsconfig.app.json
Normal file
30
ui/tsconfig.app.json
Normal file
@@ -0,0 +1,30 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2020",
|
||||
"useDefineForClassFields": true,
|
||||
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||
"module": "ESNext",
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"isolatedModules": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx",
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
|
||||
/* Paths */
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
}
|
||||
},
|
||||
"include": ["src"]
|
||||
}
|
||||
@@ -1,30 +1,17 @@
|
||||
{
|
||||
"files": [],
|
||||
"references": [
|
||||
{
|
||||
"path": "./tsconfig.app.json"
|
||||
},
|
||||
{
|
||||
"path": "./tsconfig.node.json"
|
||||
}
|
||||
],
|
||||
"compilerOptions": {
|
||||
"target": "ES2020",
|
||||
"useDefineForClassFields": true,
|
||||
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||
"module": "ESNext",
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"isolatedModules": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx",
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
|
||||
/* Paths */
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
}
|
||||
},
|
||||
"include": ["src"]
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user