authorgravatar for maria@kuuro.netmaria <maria@kuuro.net> 2026-09-16 21:49:59-03:00
committergravatar for noreply@github.comGitHub <noreply@github.com> 2026-09-16 21:49:59-03:00
log892b86da124b6f672622e3002faaa93e6a5bed00
treecf04a187c3af8b1848f89b3be77943fb21b4f2f5
parente47a11e1e65dcb7dc58630178c3f23fee7c156ec
signature Signed by PGP key B5690EEEBB952194

fix(web): align composer task rows (#12165)

1 files changed, 14 insertions(+), 9 deletions(-)

apps/web/src/components/chat/ComposerTasksBadge.tsx+14-9
......@@ -1,4 +1,4 @@
1import { ListTodoIcon } from "lucide-react";
1import { CheckIcon, CircleDotIcon, CircleIcon, ListTodoIcon } from "lucide-react";
22import { memo, type ComponentProps } from "react";
33
44import { formatDuration } from "../../session-logic";
......@@ -90,7 +90,7 @@ function TaskSummary({
9090 className={progress.completedSteps >= progress.totalSteps ? "text-success" : undefined}
9191 data-composer-task-progress="true"
9292 >
93 {progress.completedSteps}/{progress.totalSteps} complete
93 {progress.completedSteps}/{progress.totalSteps}
9494 </ComposerBanner.Count>
9595 <TaskSegments className="hidden w-20 sm:flex" steps={steps} />
9696 <ComposerBanner.ToggleIcon expanded={expanded} />
......@@ -166,10 +166,10 @@ export const ComposerTasksContent = memo(function ComposerTasksContent({
166166 data-composer-tasks-list="true"
167167 >
168168 {keyedTaskSteps(steps).map(({ key, step }) => (
169 <ComposerBanner.Row key={key} render={<li />}>
169 <ComposerBanner.Row key={key} render={<li />} className="items-start py-1 pe-2">
170170 <ComposerBanner.Icon
171171 className={cn(
172 "font-mono text-[10px]",
172 "h-4",
173173 step.status === "completed"
174174 ? "text-success"
175175 : step.status === "inProgress"
......@@ -177,10 +177,17 @@ export const ComposerTasksContent = memo(function ComposerTasksContent({
177177 : "text-muted-foreground/40",
178178 )}
179179 >
180 {step.status === "completed" ? "✓" : step.status === "inProgress" ? "●" : "○"}
180 {step.status === "completed" ? (
181 <CheckIcon />
182 ) : step.status === "inProgress" ? (
183 <CircleDotIcon />
184 ) : (
185 <CircleIcon />
186 )}
181187 </ComposerBanner.Icon>
182188 <ComposerBanner.Content
183189 className={cn(
190 "block wrap-anywhere",
184191 step.status === "completed"
185192 ? "text-muted-foreground/55"
186193 : step.status === "inProgress"
......@@ -188,14 +195,12 @@ export const ComposerTasksContent = memo(function ComposerTasksContent({
188195 : "text-muted-foreground/70",
189196 )}
190197 >
198 <span className="sr-only">{taskStatusLabels[step.status]}: </span>
191199 {step.step}
192200 </ComposerBanner.Content>
193201 <ComposerBanner.Actions>
194 <span className="text-[10px] text-muted-foreground">
195 {taskStatusLabels[step.status]}
196 </span>
197202 <span
198 className="w-10 text-right text-[10px] text-muted-foreground/45 tabular-nums"
203 className="w-12 text-right text-[10px]/4 text-muted-foreground/45 tabular-nums"
199204 data-composer-task-duration="true"
200205 >
201206 {step.durationMs !== undefined