Skip to content

Commit 9a749db

Browse files
ObservedObserverObservedObserver
committed
fix: ui state & styles
1 parent f5c9054 commit 9a749db

File tree

17 files changed

+1004
-110
lines changed

17 files changed

+1004
-110
lines changed

‎async-code-web/app/globals.css‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -120,3 +120,19 @@
120120
@apply bg-background text-foreground;
121121
}
122122
}
123+
124+
.cm-editor.cm-merge-b .cm-deletedChunk {
125+
background-color: rgba(255, 0, 0, 0.1);
126+
}
127+
128+
.cm-editor.cm-merge-b .cm-deletedText {
129+
background-color: rgba(255, 0, 0, 0.2);
130+
}
131+
132+
.cm-editor.cm-merge-b .cm-changedLine {
133+
background-color: rgba(0, 255, 0, 0.1);
134+
}
135+
136+
.cm-editor.cm-merge-b {
137+
background-color: transparent !important;
138+
}

‎async-code-web/app/page.tsx‎

Lines changed: 49 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,16 @@ import { Label } from "@/components/ui/label";
1212
import { Separator } from "@/components/ui/separator";
1313
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
1414
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
15+
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
1516
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
1617
import { ProtectedRoute } from "@/components/protected-route";
18+
import { TaskStatusBadge } from "@/components/task-status-badge";
1719
import { useAuth } from "@/contexts/auth-context";
1820
import { ApiService } from "@/lib/api-service";
21+
import { SupabaseService } from "@/lib/supabase-service";
1922
import { Project, Task } from "@/types";
23+
import { ClaudeIcon } from "@/components/icon/claude";
24+
import { OpenAIIcon } from "@/components/icon/openai";
2025

2126
interface TaskWithProject extends Task {
2227
project?: Project
@@ -74,12 +79,12 @@ export default function Home() {
7479
const interval = setInterval(async () => {
7580
try {
7681
const updatedTasks = await Promise.all(
77-
runningTasks.map(task => ApiService.getTaskStatus(user.id, task.id))
82+
runningTasks.map(task => SupabaseService.getTask(task.id))
7883
);
7984

8085
setTasks(prevTasks =>
8186
prevTasks.map(task => {
82-
const updated = updatedTasks.find(t => t.id === task.id);
87+
const updated = updatedTasks.find(t => t && t.id === task.id);
8388
if (updated) {
8489
// Check for status changes to show notifications
8590
if (task.status !== updated.status) {
@@ -121,7 +126,7 @@ export default function Home() {
121126
if (!user?.id) return;
122127

123128
try {
124-
const taskData = await ApiService.getTasks(user.id);
129+
const taskData = await SupabaseService.getTasks();
125130
setTasks(taskData);
126131
} catch (error) {
127132
console.error('Error loading tasks:', error);
@@ -217,6 +222,14 @@ export default function Home() {
217222
}
218223
};
219224

225+
const getAgentIcon = (agent: string) => {
226+
switch (agent) {
227+
case "claude": return <ClaudeIcon className="w-3 h-3" />;
228+
case "codex": return <OpenAIIcon className="w-3 h-3" />;
229+
default: return null;
230+
}
231+
};
232+
220233
return (
221234
<ProtectedRoute>
222235
<div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100">
@@ -245,8 +258,8 @@ export default function Home() {
245258
<Code2 className="w-4 h-4 text-white" />
246259
</div>
247260
<div>
248-
<h1 className="text-xl font-semibold text-slate-900">AI Code Automation</h1>
249-
<p className="text-sm text-slate-500">Claude Code & Codex CLI Integration</p>
261+
<h1 className="text-xl font-semibold text-slate-900">Async Code</h1>
262+
<p className="text-sm text-slate-500">Manage parallel AI code agents (Codex & Claude)</p>
250263
</div>
251264
</div>
252265
<div className="flex items-center gap-4">
@@ -266,10 +279,14 @@ export default function Home() {
266279

267280
<DropdownMenu>
268281
<DropdownMenuTrigger asChild>
269-
<Button variant="outline" className="gap-2">
270-
<User className="w-4 h-4" />
271-
{user?.email?.split('@')[0] || 'User'}
272-
</Button>
282+
<Avatar className="cursor-pointer">
283+
<AvatarFallback>
284+
{user?.email ?
285+
user.email.split('@')[0].slice(0, 2).toUpperCase() :
286+
'U'
287+
}
288+
</AvatarFallback>
289+
</Avatar>
273290
</DropdownMenuTrigger>
274291
<DropdownMenuContent align="end" className="w-56">
275292
<div className="p-2">
@@ -289,7 +306,7 @@ export default function Home() {
289306
</header>
290307

291308
{/* Main Content */}
292-
<main className="container mx-auto px-6 py-8 max-w-6xl">
309+
<main className="container mx-auto px-6 py-8 max-w-8xl">
293310
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
294311
{/* Left Column - Task Creation */}
295312
<div className="lg:col-span-2 space-y-6">
@@ -390,23 +407,29 @@ export default function Home() {
390407
<div className="space-y-2">
391408
<Label htmlFor="model" className="flex items-center gap-2">
392409
<Code2 className="w-3 h-3" />
393-
AI Model
410+
Code Agent
394411
</Label>
395412
<Select value={model} onValueChange={setModel}>
396413
<SelectTrigger id="model" className="w-full">
397414
<SelectValue placeholder="Select an AI model" />
398415
</SelectTrigger>
399416
<SelectContent>
400417
<SelectItem value="claude">
401-
<div className="flex flex-col items-start">
402-
<span className="font-medium">Claude Code</span>
403-
<span className="text-xs text-slate-500">Anthropic's advanced coding model</span>
418+
<div className="flex items-center gap-3">
419+
<ClaudeIcon className="w-4 h-4 flex-shrink-0" />
420+
<div className="flex items-center gap-2">
421+
<span className="font-medium">Claude Code</span>
422+
<span className="text-xs text-slate-500">• Anthropic's agentic coding tool</span>
423+
</div>
404424
</div>
405425
</SelectItem>
406426
<SelectItem value="codex">
407-
<div className="flex flex-col items-start">
408-
<span className="font-medium">Codex CLI</span>
409-
<span className="text-xs text-slate-500">OpenAI's lightweight coding agent</span>
427+
<div className="flex items-center gap-3">
428+
<OpenAIIcon className="w-4 h-4 flex-shrink-0" />
429+
<div className="flex items-center gap-2">
430+
<span className="font-medium">Codex</span>
431+
<span className="text-xs text-slate-500">• OpenAI's lightweight coding agent</span>
432+
</div>
410433
</div>
411434
</SelectItem>
412435
</SelectContent>
@@ -415,15 +438,14 @@ export default function Home() {
415438
</div>
416439
</div>
417440

418-
<div className="flex justify-end pt-2">
441+
<div className="flex justify-start pt-2">
419442
<Button
420443
onClick={handleStartTask}
421444
disabled={isLoading || !selectedProject || !prompt.trim() || !githubToken.trim()}
422-
size="lg"
423-
className="gap-2 min-w-[140px]"
445+
className="gap-2 rounded-full min-w-[100px]"
424446
>
425447
<Code2 className="w-4 h-4" />
426-
{isLoading ? 'Starting...' : 'Start Coding'}
448+
{isLoading ? 'Coding...' : 'Code'}
427449
</Button>
428450
</div>
429451
</CardContent>
@@ -477,7 +499,7 @@ export default function Home() {
477499
Track all your automation tasks
478500
</CardDescription>
479501
</CardHeader>
480-
<CardContent className="space-y-3">
502+
<CardContent className="space-y-3 max-h-[500px] overflow-y-auto">
481503
{tasks.length === 0 ? (
482504
<div className="text-center py-8 text-slate-500">
483505
<Code2 className="w-8 h-8 mx-auto mb-2 opacity-50" />
@@ -489,22 +511,19 @@ export default function Home() {
489511
<div key={task.id} className="flex items-center justify-between p-3 bg-slate-50 rounded-lg hover:bg-slate-100 transition-colors">
490512
<div className="flex-1 min-w-0">
491513
<div className="flex items-center gap-2 mb-1">
492-
<Badge variant={getStatusVariant(task.status || '')} className="gap-1">
493-
{getStatusIcon(task.status || '')}
494-
{task.status}
495-
</Badge>
496-
<span className="text-xs text-slate-500">
497-
#{task.id} • {task.agent?.toUpperCase()}
514+
<TaskStatusBadge status={task.status || ''} />
515+
<span className="text-xs text-slate-500 flex items-center gap-1">
516+
#{task.id} • {getAgentIcon(task.agent || '')} {task.agent?.toUpperCase()}
498517
</span>
499518
</div>
500519
<p className="text-sm font-medium text-slate-900 truncate">
501-
{(task.chat_messages as any[])?.[0]?.content?.substring(0, 50) || 'No prompt'}...
520+
{(task.chat_messages as any[])?.[0]?.content?.substring(0, 50) || ''}...
502521
</p>
503522
<div className="flex items-center gap-2 text-xs text-slate-500 mt-1">
504523
{task.project ? (
505524
<>
506525
<FolderGit2 className="w-3 h-3" />
507-
{task.project.name}
526+
{task.project.repo_name}
508527
</>
509528
) : (
510529
<>
@@ -537,32 +556,6 @@ export default function Home() {
537556
</CardContent>
538557
</Card>
539558

540-
{/* Quick Actions */}
541-
<Card>
542-
<CardHeader>
543-
<CardTitle className="text-lg">Quick Actions</CardTitle>
544-
</CardHeader>
545-
<CardContent className="p-2">
546-
<Link href="/projects">
547-
<Button variant="outline" className="mb-2 w-full justify-start gap-3 h-12 px-4">
548-
<FolderGit2 className="w-5 h-5" />
549-
<span className="font-medium">Manage Projects</span>
550-
</Button>
551-
</Link>
552-
<Link href="/settings">
553-
<Button variant="outline" className="mb-2 w-full justify-start gap-3 h-12 px-4">
554-
<Settings className="w-5 h-5" />
555-
<span className="font-medium">Settings</span>
556-
</Button>
557-
</Link>
558-
<Link href="/projects">
559-
<Button variant="outline" className="mb-2 w-full justify-start gap-3 h-12 px-4">
560-
<Plus className="w-5 h-5" />
561-
<span className="font-medium">New Project</span>
562-
</Button>
563-
</Link>
564-
</CardContent>
565-
</Card>
566559
</div>
567560
</div>
568561
</main>

0 commit comments

Comments
 (0)