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 @@...@@ -1,4 +1,4 @@
1import { ListTodoIcon } from "lucide-react";1import { CheckIcon, CircleDotIcon, CircleIcon, ListTodoIcon } from "lucide-react";
2import { memo, type ComponentProps } from "react";2import { memo, type ComponentProps } from "react";
33
4import { formatDuration } from "../../session-logic";4import { formatDuration } from "../../session-logic";
...@@ -90,7 +90,7 @@ function TaskSummary({...@@ -90,7 +90,7 @@ function TaskSummary({
90 className={progress.completedSteps >= progress.totalSteps ? "text-success" : undefined}90 className={progress.completedSteps >= progress.totalSteps ? "text-success" : undefined}
91 data-composer-task-progress="true"91 data-composer-task-progress="true"
92 >92 >
93 {progress.completedSteps}/{progress.totalSteps} complete93 {progress.completedSteps}/{progress.totalSteps}
94 </ComposerBanner.Count>94 </ComposerBanner.Count>
95 <TaskSegments className="hidden w-20 sm:flex" steps={steps} />95 <TaskSegments className="hidden w-20 sm:flex" steps={steps} />
96 <ComposerBanner.ToggleIcon expanded={expanded} />96 <ComposerBanner.ToggleIcon expanded={expanded} />
...@@ -166,10 +166,10 @@ export const ComposerTasksContent = memo(function ComposerTasksContent({...@@ -166,10 +166,10 @@ export const ComposerTasksContent = memo(function ComposerTasksContent({
166 data-composer-tasks-list="true"166 data-composer-tasks-list="true"
167 >167 >
168 {keyedTaskSteps(steps).map(({ key, step }) => (168 {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">
170 <ComposerBanner.Icon170 <ComposerBanner.Icon
171 className={cn(171 className={cn(
172 "font-mono text-[10px]",172 "h-4",
173 step.status === "completed"173 step.status === "completed"
174 ? "text-success"174 ? "text-success"
175 : step.status === "inProgress"175 : step.status === "inProgress"
...@@ -177,10 +177,17 @@ export const ComposerTasksContent = memo(function ComposerTasksContent({...@@ -177,10 +177,17 @@ export const ComposerTasksContent = memo(function ComposerTasksContent({
177 : "text-muted-foreground/40",177 : "text-muted-foreground/40",
178 )}178 )}
179 >179 >
180 {step.status === "completed" ? "✓" : step.status === "inProgress" ? "●" : "○"}180 {step.status === "completed" ? (
181 <CheckIcon />
182 ) : step.status === "inProgress" ? (
183 <CircleDotIcon />
184 ) : (
185 <CircleIcon />
186 )}
181 </ComposerBanner.Icon>187 </ComposerBanner.Icon>
182 <ComposerBanner.Content188 <ComposerBanner.Content
183 className={cn(189 className={cn(
190 "block wrap-anywhere",
184 step.status === "completed"191 step.status === "completed"
185 ? "text-muted-foreground/55"192 ? "text-muted-foreground/55"
186 : step.status === "inProgress"193 : step.status === "inProgress"
...@@ -188,14 +195,12 @@ export const ComposerTasksContent = memo(function ComposerTasksContent({...@@ -188,14 +195,12 @@ export const ComposerTasksContent = memo(function ComposerTasksContent({
188 : "text-muted-foreground/70",195 : "text-muted-foreground/70",
189 )}196 )}
190 >197 >
198 <span className="sr-only">{taskStatusLabels[step.status]}: </span>
191 {step.step}199 {step.step}
192 </ComposerBanner.Content>200 </ComposerBanner.Content>
193 <ComposerBanner.Actions>201 <ComposerBanner.Actions>
194 <span className="text-[10px] text-muted-foreground">
195 {taskStatusLabels[step.status]}
196 </span>
197 <span202 <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"
199 data-composer-task-duration="true"204 data-composer-task-duration="true"
200 >205 >
201 {step.durationMs !== undefined206 {step.durationMs !== undefined