daonanchao/vibe-kanban
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Task attempt 4e0e57ea-d98b-44d2-b0a5-2c7ef9114a47 - Final changes

Browse Source
This commit is contained in:
Louis Knight-Webb
2025-06-20 16:20:22 +01:00
parent 2c4a7f7f4b
commit 3027a3de5c
11 changed files with 157 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/components/projects/project-detail.tsx
View File

@@ -125,7 +125,7 @@ export function ProjectDetail({ projectId, onBack }: ProjectDetailProps) {
<Button
variant="outline"
onClick={handleDelete}
className="text-red-600 hover:text-red-700 hover:bg-red-50"
className="text-destructive hover:text-destructive-foreground hover:bg-destructive/10"
>
<Trash2 className="mr-2 h-4 w-4" />
Delete

2
frontend/src/components/projects/project-list.tsx
View File

@@ -168,7 +168,7 @@ export function ProjectList() {
e.stopPropagation()
handleDelete(project.id, project.name)
}}
className="text-red-600"
className="text-destructive"
>
<Trash2 className="mr-2 h-4 w-4" />
Delete

4
frontend/src/components/tasks/TaskCard.tsx
View File

@@ -53,7 +53,7 @@ export function TaskCard({ task, index, status, onEdit, onDelete, onViewDetails
<Button
variant="ghost"
size="sm"
className="h-6 w-6 p-0 hover:bg-gray-100"
className="h-6 w-6 p-0 hover:bg-muted"
>
<MoreHorizontal className="h-3 w-3" />
</Button>
@@ -65,7 +65,7 @@ export function TaskCard({ task, index, status, onEdit, onDelete, onViewDetails
</DropdownMenuItem>
<DropdownMenuItem
onClick={() => onDelete(task.id)}
className="text-red-600"
className="text-destructive"
>
<Trash2 className="h-4 w-4 mr-2" />
Delete

47
frontend/src/components/tasks/TaskDetailsDialog.tsx
View File

@@ -61,23 +61,23 @@ const statusLabels: Record<TaskStatus, string> = {
const getAttemptStatusDisplay = (status: TaskAttemptStatus): { label: string; className: string } => {
switch (status) {
case "init":
return { label: "Init", className: "bg-gray-100 text-gray-800" };
return { label: "Init", className: "bg-status-init text-status-init-foreground" };
case "setuprunning":
return { label: "Setup Running", className: "bg-blue-100 text-blue-800" };
return { label: "Setup Running", className: "bg-status-running text-status-running-foreground" };
case "setupcomplete":
return { label: "Setup Complete", className: "bg-green-100 text-green-800" };
return { label: "Setup Complete", className: "bg-status-complete text-status-complete-foreground" };
case "setupfailed":
return { label: "Setup Failed", className: "bg-red-100 text-red-800" };
return { label: "Setup Failed", className: "bg-status-failed text-status-failed-foreground" };
case "executorrunning":
return { label: "Executor Running", className: "bg-blue-100 text-blue-800" };
return { label: "Executor Running", className: "bg-status-running text-status-running-foreground" };
case "executorcomplete":
return { label: "Executor Complete", className: "bg-green-100 text-green-800" };
return { label: "Executor Complete", className: "bg-status-complete text-status-complete-foreground" };
case "executorfailed":
return { label: "Executor Failed", className: "bg-red-100 text-red-800" };
return { label: "Executor Failed", className: "bg-status-failed text-status-failed-foreground" };
case "paused":
return { label: "Paused", className: "bg-yellow-100 text-yellow-800" };
return { label: "Paused", className: "bg-status-paused text-status-paused-foreground" };
default:
return { label: "Unknown", className: "bg-gray-100 text-gray-800" };
return { label: "Unknown", className: "bg-status-init text-status-init-foreground" };
}
};
@@ -371,13 +371,13 @@ export function TaskDetailsDialog({
placeholder="Enter task description..."
/>
) : (
<div className="mt-1 p-3 bg-gray-50 rounded-md min-h-[60px]">
<div className="mt-1 p-3 bg-muted rounded-md min-h-[60px]">
{task?.description ? (
<p className="text-sm text-gray-700 whitespace-pre-wrap">
<p className="text-sm text-foreground whitespace-pre-wrap">
{task.description}
</p>
) : (
<p className="text-sm text-gray-500 italic">
<p className="text-sm text-muted-foreground italic">
No description provided
</p>
)}
@@ -399,11 +399,11 @@ export function TaskDetailsDialog({
<div className="space-y-4">
{selectedAttempt.stdout && (
<div>
<Label className="text-sm font-medium mb-2 block text-green-400">
STDOUT
<Label className="text-sm font-medium mb-2 block text-console-success">
STDOUT
</Label>
<div
className="bg-black border border-green-400 rounded-md p-4 font-mono text-sm text-green-400 max-h-96 overflow-y-auto whitespace-pre-wrap shadow-inner"
className="bg-console text-console-success border border-console-success rounded-md p-4 font-mono text-sm max-h-96 overflow-y-auto whitespace-pre-wrap shadow-inner"
style={{
fontFamily:
'ui-monospace, SFMono-Regular, "SF Mono", Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
@@ -415,13 +415,12 @@ export function TaskDetailsDialog({
)}
{selectedAttempt.stderr && (
<div>
<Label className="text-sm font-medium mb-2 block text-red-400">
<Label className="text-sm font-medium mb-2 block text-console-error">
STDERR
</Label>
<div
className="bg-black border border-red-400 rounded-md p-4 font-mono text-sm text-red-400 max-h-96 overflow-y-auto whitespace-pre-wrap shadow-inner"
className="bg-console text-console-error border border-console-error rounded-md p-4 font-mono text-sm max-h-96 overflow-y-auto whitespace-pre-wrap shadow-inner"
style={{
textShadow: "0 0 2px #ff0000",
fontFamily:
'ui-monospace, SFMono-Regular, "SF Mono", Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
}}
@@ -470,14 +469,14 @@ export function TaskDetailsDialog({
<div
className={`mt-1 px-2 py-1 rounded-full text-xs font-medium w-fit ${
task?.status === "todo"
? "bg-gray-100 text-gray-800"
? "bg-neutral text-neutral-foreground"
: task?.status === "inprogress"
? "bg-blue-100 text-blue-800"
? "bg-info text-info-foreground"
: task?.status === "inreview"
? "bg-yellow-100 text-yellow-800"
? "bg-warning text-warning-foreground"
: task?.status === "done"
? "bg-green-100 text-green-800"
: "bg-red-100 text-red-800"
? "bg-success text-success-foreground"
: "bg-destructive text-destructive-foreground"
}`}
>
{task ? statusLabels[task.status] : ""}
@@ -651,7 +650,7 @@ export function TaskDetailsDialog({
{attemptActivities.map((activity) => (
<div
key={activity.id}
className="border-l-2 border-gray-200 pl-3 pb-2"
className="border-l-2 border-border pl-3 pb-2"
>
<div className="flex items-center justify-between">
<span

10
frontend/src/components/tasks/TaskKanbanBoard.tsx
View File

@@ -29,11 +29,11 @@ const statusLabels: Record<TaskStatus, string> = {
}
const statusBoardColors: Record<TaskStatus, string> = {
todo: '#64748b',
inprogress: '#3b82f6',
inreview: '#f59e0b',
done: '#22c55e',
cancelled: '#ef4444'
todo: 'hsl(var(--neutral))',
inprogress: 'hsl(var(--info))',
inreview: 'hsl(var(--warning))',
done: 'hsl(var(--success))',
cancelled: 'hsl(var(--destructive))'
}
export function TaskKanbanBoard({ tasks, onDragEnd, onEditTask, onDeleteTask, onViewTaskDetails }: TaskKanbanBoardProps) {

10
frontend/src/components/ui/file-search-textarea.tsx
View File

@@ -197,16 +197,16 @@ export function FileSearchTextarea({
{showDropdown && (
<div
ref={dropdownRef}
className="absolute z-50 bg-white border border-gray-200 rounded-md shadow-lg max-h-60 overflow-y-auto min-w-64"
className="absolute z-50 bg-background border border-border rounded-md shadow-lg max-h-60 overflow-y-auto min-w-64"
style={{
top: dropdownPosition.top,
left: dropdownPosition.left,
}}
>
{isLoading ? (
<div className="p-2 text-sm text-gray-500">Searching...</div>
<div className="p-2 text-sm text-muted-foreground">Searching...</div>
) : searchResults.length === 0 ? (
<div className="p-2 text-sm text-gray-500">No files found</div>
<div className="p-2 text-sm text-muted-foreground">No files found</div>
) : (
<div className="py-1">
{searchResults.map((file, index) => (
@@ -215,12 +215,12 @@ export function FileSearchTextarea({
className={`px-3 py-2 cursor-pointer text-sm ${
index === selectedIndex
? 'bg-blue-50 text-blue-900'
: 'hover:bg-gray-50'
: 'hover:bg-muted'
}`}
onClick={() => selectFile(file)}
>
<div className="font-medium truncate">{file.name}</div>
<div className="text-xs text-gray-500 truncate">{file.path}</div>
<div className="text-xs text-muted-foreground truncate">{file.path}</div>
</div>
))}
</div>

56
frontend/src/index.css
View File

@@ -24,6 +24,34 @@
--input: 214.3 31.8% 91.4%;
--ring: 222.2 84% 4.9%;
--radius: 0.5rem;
/* Status colors */
--success: 142.1 76.2% 36.3%;
--success-foreground: 138.5 76.5% 96.7%;
--warning: 32.2 95% 44.1%;
--warning-foreground: 26 83.3% 14.1%;
--info: 217.2 91.2% 59.8%;
--info-foreground: 222.2 84% 4.9%;
--neutral: 210 40% 96%;
--neutral-foreground: 222.2 84% 4.9%;
/* Status indicator colors */
--status-init: 210 40% 96%;
--status-init-foreground: 222.2 84% 4.9%;
--status-running: 217.2 91.2% 59.8%;
--status-running-foreground: 222.2 84% 4.9%;
--status-complete: 142.1 76.2% 36.3%;
--status-complete-foreground: 138.5 76.5% 96.7%;
--status-failed: 0 84.2% 60.2%;
--status-failed-foreground: 210 40% 98%;
--status-paused: 32.2 95% 44.1%;
--status-paused-foreground: 26 83.3% 14.1%;
/* Console/terminal colors */
--console-background: 222.2 84% 4.9%;
--console-foreground: 210 40% 98%;
--console-success: 138.5 76.5% 47.7%;
--console-error: 0 84.2% 60.2%;
}
.dark {
@@ -46,6 +74,34 @@
--border: 217.2 32.6% 17.5%;
--input: 217.2 32.6% 17.5%;
--ring: 212.7 26.8% 83.9%;
/* Status colors */
--success: 138.5 76.5% 47.7%;
--success-foreground: 138.5 76.5% 96.7%;
--warning: 32.2 95% 44.1%;
--warning-foreground: 26 83.3% 14.1%;
--info: 217.2 91.2% 59.8%;
--info-foreground: 222.2 84% 4.9%;
--neutral: 217.2 32.6% 17.5%;
--neutral-foreground: 210 40% 98%;
/* Status indicator colors */
--status-init: 217.2 32.6% 17.5%;
--status-init-foreground: 210 40% 98%;
--status-running: 217.2 91.2% 59.8%;
--status-running-foreground: 222.2 84% 4.9%;
--status-complete: 138.5 76.5% 47.7%;
--status-complete-foreground: 138.5 76.5% 96.7%;
--status-failed: 0 62.8% 30.6%;
--status-failed-foreground: 210 40% 98%;
--status-paused: 32.2 95% 44.1%;
--status-paused-foreground: 26 83.3% 14.1%;
/* Console/terminal colors */
--console-background: 0 0% 0%;
--console-foreground: 138.5 76.5% 47.7%;
--console-success: 138.5 76.5% 47.7%;
--console-error: 0 84.2% 60.2%;
}
}

2
frontend/src/pages/project-tasks.tsx
View File

@@ -253,7 +253,7 @@ export function ProjectTasks() {
}
if (error) {
return <div className="text-center py-8 text-red-600">{error}</div>;
return <div className="text-center py-8 text-destructive">{error}</div>;
}
return (

10
frontend/src/pages/task-attempt-compare.tsx
View File

@@ -168,7 +168,7 @@ export function TaskAttemptComparePage() {
return `${baseClass} bg-red-50 text-red-800 border-l-2 border-red-400`;
case 'Equal':
default:
return `${baseClass} text-gray-700`;
return `${baseClass} text-muted-foreground`;
}
};
@@ -323,7 +323,7 @@ export function TaskAttemptComparePage() {
return (
<div className="min-h-screen bg-background flex items-center justify-center">
<div className="text-center">
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900 mx-auto mb-4"></div>
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-foreground mx-auto mb-4"></div>
<p className="text-muted-foreground">Loading diff...</p>
</div>
</div>
@@ -334,7 +334,7 @@ export function TaskAttemptComparePage() {
return (
<div className="min-h-screen bg-background flex items-center justify-center">
<div className="text-center">
<p className="text-red-600 mb-4">{error}</p>
<p className="text-destructive mb-4">{error}</p>
<Button onClick={handleBackClick} variant="outline">
<ArrowLeft className="mr-2 h-4 w-4" />
Back to Task
@@ -439,8 +439,8 @@ export function TaskAttemptComparePage() {
<div className="space-y-6">
{diff.files.map((file, fileIndex) => (
<div key={fileIndex} className="border rounded-lg overflow-hidden">
<div className="bg-gray-50 px-3 py-2 border-b">
<p className="text-sm font-medium text-gray-700 font-mono">
<div className="bg-muted px-3 py-2 border-b">
<p className="text-sm font-medium text-muted-foreground font-mono">
{file.path}
</p>
</div>

49
frontend/src/pages/task-details.tsx
View File

@@ -47,23 +47,23 @@ const statusLabels: Record<TaskStatus, string> = {
const getAttemptStatusDisplay = (status: TaskAttemptStatus): { label: string; className: string } => {
switch (status) {
case "init":
return { label: "Init", className: "bg-gray-100 text-gray-800" };
return { label: "Init", className: "bg-status-init text-status-init-foreground" };
case "setuprunning":
return { label: "Setup Running", className: "bg-blue-100 text-blue-800" };
return { label: "Setup Running", className: "bg-status-running text-status-running-foreground" };
case "setupcomplete":
return { label: "Setup Complete", className: "bg-green-100 text-green-800" };
return { label: "Setup Complete", className: "bg-status-complete text-status-complete-foreground" };
case "setupfailed":
return { label: "Setup Failed", className: "bg-red-100 text-red-800" };
return { label: "Setup Failed", className: "bg-status-failed text-status-failed-foreground" };
case "executorrunning":
return { label: "Executor Running", className: "bg-blue-100 text-blue-800" };
return { label: "Executor Running", className: "bg-status-running text-status-running-foreground" };
case "executorcomplete":
return { label: "Executor Complete", className: "bg-green-100 text-green-800" };
return { label: "Executor Complete", className: "bg-status-complete text-status-complete-foreground" };
case "executorfailed":
return { label: "Executor Failed", className: "bg-red-100 text-red-800" };
return { label: "Executor Failed", className: "bg-status-failed text-status-failed-foreground" };
case "paused":
return { label: "Paused", className: "bg-yellow-100 text-yellow-800" };
return { label: "Paused", className: "bg-status-paused text-status-paused-foreground" };
default:
return { label: "Unknown", className: "bg-gray-100 text-gray-800" };
return { label: "Unknown", className: "bg-status-init text-status-init-foreground" };
}
};
@@ -419,7 +419,7 @@ export function TaskDetailsPage() {
return (
<div className="min-h-screen bg-background flex items-center justify-center">
<div className="text-center">
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900 mx-auto mb-4"></div>
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-foreground mx-auto mb-4"></div>
<p className="text-muted-foreground">Loading task...</p>
</div>
</div>
@@ -430,7 +430,7 @@ export function TaskDetailsPage() {
return (
<div className="min-h-screen bg-background flex items-center justify-center">
<div className="text-center">
<p className="text-red-600 mb-4">{error}</p>
<p className="text-destructive mb-4">{error}</p>
<Button onClick={handleBackClick} variant="outline">
<ArrowLeft className="mr-2 h-4 w-4" />
Back to Tasks
@@ -489,13 +489,13 @@ export function TaskDetailsPage() {
<div>
<Label className="text-sm font-medium">Description</Label>
<div className="mt-1 p-3 bg-gray-50 rounded-md min-h-[60px]">
<div className="mt-1 p-3 bg-muted rounded-md min-h-[60px]">
{task.description ? (
<p className="text-sm text-gray-700 whitespace-pre-wrap">
<p className="text-sm text-foreground whitespace-pre-wrap">
{task.description}
</p>
) : (
<p className="text-sm text-gray-500 italic">
<p className="text-sm text-muted-foreground italic">
No description provided
</p>
)}
@@ -516,11 +516,11 @@ export function TaskDetailsPage() {
<div className="space-y-4">
{selectedAttempt.stdout && (
<div>
<Label className="text-sm font-medium mb-2 block text-green-400">
<Label className="text-sm font-medium mb-2 block text-console-success">
STDOUT
</Label>
<div
className="bg-black border border-green-400 rounded-md p-4 font-mono text-sm text-green-400 max-h-96 overflow-y-auto whitespace-pre-wrap shadow-inner"
className="bg-console text-console-success border border-console-success rounded-md p-4 font-mono text-sm max-h-96 overflow-y-auto whitespace-pre-wrap shadow-inner"
style={{
fontFamily:
'ui-monospace, SFMono-Regular, "SF Mono", Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
@@ -532,13 +532,12 @@ export function TaskDetailsPage() {
)}
{selectedAttempt.stderr && (
<div>
<Label className="text-sm font-medium mb-2 block text-red-400">
<Label className="text-sm font-medium mb-2 block text-console-error">
STDERR
</Label>
<div
className="bg-black border border-red-400 rounded-md p-4 font-mono text-sm text-red-400 max-h-96 overflow-y-auto whitespace-pre-wrap shadow-inner"
className="bg-console text-console-error border border-console-error rounded-md p-4 font-mono text-sm max-h-96 overflow-y-auto whitespace-pre-wrap shadow-inner"
style={{
textShadow: "0 0 2px #ff0000",
fontFamily:
'ui-monospace, SFMono-Regular, "SF Mono", Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
}}
@@ -566,14 +565,14 @@ export function TaskDetailsPage() {
<div
className={`mt-1 px-2 py-1 rounded-full text-xs font-medium w-fit ${
task.status === "todo"
? "bg-gray-100 text-gray-800"
? "bg-neutral text-neutral-foreground"
: task.status === "inprogress"
? "bg-blue-100 text-blue-800"
? "bg-info text-info-foreground"
: task.status === "inreview"
? "bg-yellow-100 text-yellow-800"
? "bg-warning text-warning-foreground"
: task.status === "done"
? "bg-green-100 text-green-800"
: "bg-red-100 text-red-800"
? "bg-success text-success-foreground"
: "bg-destructive text-destructive-foreground"
}`}
>
{statusLabels[task.status]}
@@ -767,7 +766,7 @@ export function TaskDetailsPage() {
{attemptActivities.map((activity) => (
<div
key={activity.id}
className="border-l-2 border-gray-200 pl-3 pb-2"
className="border-l-2 border-border pl-3 pb-2"
>
<div className="flex items-center justify-between">
<span

34
frontend/tailwind.config.js
View File

@@ -51,6 +51,40 @@ module.exports = {
DEFAULT: "hsl(var(--card))",
foreground: "hsl(var(--card-foreground))",
},
success: {
DEFAULT: "hsl(var(--success))",
foreground: "hsl(var(--success-foreground))",
},
warning: {
DEFAULT: "hsl(var(--warning))",
foreground: "hsl(var(--warning-foreground))",
},
info: {
DEFAULT: "hsl(var(--info))",
foreground: "hsl(var(--info-foreground))",
},
neutral: {
DEFAULT: "hsl(var(--neutral))",
foreground: "hsl(var(--neutral-foreground))",
},
status: {
init: "hsl(var(--status-init))",
"init-foreground": "hsl(var(--status-init-foreground))",
running: "hsl(var(--status-running))",
"running-foreground": "hsl(var(--status-running-foreground))",
complete: "hsl(var(--status-complete))",
"complete-foreground": "hsl(var(--status-complete-foreground))",
failed: "hsl(var(--status-failed))",
"failed-foreground": "hsl(var(--status-failed-foreground))",
paused: "hsl(var(--status-paused))",
"paused-foreground": "hsl(var(--status-paused-foreground))",
},
console: {
DEFAULT: "hsl(var(--console-background))",
foreground: "hsl(var(--console-foreground))",
success: "hsl(var(--console-success))",
error: "hsl(var(--console-error))",
},
},
borderRadius: {
lg: "var(--radius)",