diff --git a/apps/web/src/components/chat/ComposerTasksBadge.tsx b/apps/web/src/components/chat/ComposerTasksBadge.tsx
index 2eca3e23739a44c3b3cd1b99fd6e3086d19a87bc..19cba9048a4fa36380d5182e2208e05e0813dc70 100644
--- a/apps/web/src/components/chat/ComposerTasksBadge.tsx
+++ b/apps/web/src/components/chat/ComposerTasksBadge.tsx
@@ -1,4 +1,4 @@
-import { ListTodoIcon } from "lucide-react";
+import { CheckIcon, CircleDotIcon, CircleIcon, ListTodoIcon } from "lucide-react";
 import { memo, type ComponentProps } from "react";
 
 import { formatDuration } from "../../session-logic";
@@ -90,7 +90,7 @@ function TaskSummary({
           className={progress.completedSteps >= progress.totalSteps ? "text-success" : undefined}
           data-composer-task-progress="true"
         >
-          {progress.completedSteps}/{progress.totalSteps} complete
+          {progress.completedSteps}/{progress.totalSteps}
         </ComposerBanner.Count>
         <TaskSegments className="hidden w-20 sm:flex" steps={steps} />
         <ComposerBanner.ToggleIcon expanded={expanded} />
@@ -166,10 +166,10 @@ export const ComposerTasksContent = memo(function ComposerTasksContent({
             data-composer-tasks-list="true"
           >
             {keyedTaskSteps(steps).map(({ key, step }) => (
-              <ComposerBanner.Row key={key} render={<li />}>
+              <ComposerBanner.Row key={key} render={<li />} className="items-start py-1 pe-2">
                 <ComposerBanner.Icon
                   className={cn(
-                    "font-mono text-[10px]",
+                    "h-4",
                     step.status === "completed"
                       ? "text-success"
                       : step.status === "inProgress"
@@ -177,10 +177,17 @@ export const ComposerTasksContent = memo(function ComposerTasksContent({
                         : "text-muted-foreground/40",
                   )}
                 >
-                  {step.status === "completed" ? "✓" : step.status === "inProgress" ? "●" : "○"}
+                  {step.status === "completed" ? (
+                    <CheckIcon />
+                  ) : step.status === "inProgress" ? (
+                    <CircleDotIcon />
+                  ) : (
+                    <CircleIcon />
+                  )}
                 </ComposerBanner.Icon>
                 <ComposerBanner.Content
                   className={cn(
+                    "block wrap-anywhere",
                     step.status === "completed"
                       ? "text-muted-foreground/55"
                       : step.status === "inProgress"
@@ -188,14 +195,12 @@ export const ComposerTasksContent = memo(function ComposerTasksContent({
                         : "text-muted-foreground/70",
                   )}
                 >
+                  <span className="sr-only">{taskStatusLabels[step.status]}: </span>
                   {step.step}
                 </ComposerBanner.Content>
                 <ComposerBanner.Actions>
-                  <span className="text-[10px] text-muted-foreground">
-                    {taskStatusLabels[step.status]}
-                  </span>
                   <span
-                    className="w-10 text-right text-[10px] text-muted-foreground/45 tabular-nums"
+                    className="w-12 text-right text-[10px]/4 text-muted-foreground/45 tabular-nums"
                     data-composer-task-duration="true"
                   >
                     {step.durationMs !== undefined