feat(HAI-011): complete Step 1+2 — add progress indicator to TaskCard with styles

This commit is contained in:
Dustin Byrne
2026-03-25 20:59:22 -04:00
parent 58bc6a0677
commit 1d1fc8dbe1
2 changed files with 47 additions and 0 deletions

View File

@@ -77,6 +77,24 @@ export function TaskCard({ task, queued, onOpenDetail, addToast }: TaskCardProps
<div className="card-title">
{task.title || (task.description ? task.description.slice(0, 60) + (task.description.length > 60 ? "…" : "") : task.id)}
</div>
{task.steps.length > 0 && (() => {
const completedSteps = task.steps.filter(s => s.status === "done").length;
const totalSteps = task.steps.length;
return (
<div className="card-progress">
<div className="card-progress-bar">
<div
className="card-progress-fill"
style={{
width: `${(completedSteps / totalSteps) * 100}%`,
backgroundColor: COLUMN_TEXT_COLOR_MAP[task.column],
}}
/>
</div>
<span className="card-progress-label">{completedSteps}/{totalSteps}</span>
</div>
);
})()}
{((task.dependencies && task.dependencies.length > 0) || queued) && (
<div className="card-meta">
{task.dependencies && task.dependencies.length > 0 && (