feat(app): float composer trackers as pills over the transcript (#3482)

The subagents track and the task list were stacked cards above the
composer. Each one pushed the composer further down the pane and painted
an opaque band the timeline stopped at, and both spent a full row on a
count that fits in a pill.

Both are now pills that open a panel — a popover on wide screens, a sheet
on compact ones, from the existing menu engine rather than a fourth
floating-panel implementation. The row frame is shared, so a subagent row
and a task row sit on the same rail whatever their contents.

The bar mounts inside the transcript's animated container and pins itself
to the bottom edge, so scrolled content passes under the pills instead of
stopping above them. It stays a child of that container rather than a
sibling floating over the composer: on Android a view outside its parent's
bounds paints but takes no touches, and every pill is pressable. The
container carries the same keyboard transform the composer does, so the
pills track the composer's top edge when the keyboard moves.

The tracker state moves out of the composer with it. None of it was
composer state; it lived there because that is where it used to render.

packages/app/src/components/task-list-row.test.tsx

@@ -85,10 +85,12 @@ describe("TaskListRow", () => {
     container.remove();
   });
 
-  it("keeps pending tasks muted", () => {
+  it("keeps a pending task's ring quieter than its label, so it does not read as a checkbox", () => {
     act(() => root.render(<TaskListRow task={pendingTask} />));
 
-    expect(container.querySelector('[data-icon="Circle"]')?.getAttribute("color")).toBe("#muted");
+    expect(container.querySelector('[data-icon="Circle"]')?.getAttribute("color")).toBe(
+      "#extra-muted",
+    );
     expect(container.querySelector("[data-color]")?.getAttribute("data-color")).toBe("#muted");
   });
 

packages/app/src/components/task-list-row.tsx

@@ -10,7 +10,6 @@ const ThemedCircleCheck = withUnistyles(CircleCheck);
 const ThemedCircleDot = withUnistyles(CircleDot);
 
 const extraMutedIcon = (theme: Theme) => ({ color: theme.colors.foregroundExtraMuted });
-const mutedIcon = (theme: Theme) => ({ color: theme.colors.foregroundMuted });
 const runningIcon = (theme: Theme) => ({ color: theme.colors.statusDotRunning });
 
 function TaskStatusIcon({ isCompleted, isRunning }: { isCompleted: boolean; isRunning: boolean }) {
@@ -20,7 +19,10 @@ function TaskStatusIcon({ isCompleted, isRunning }: { isCompleted: boolean; isRu
   if (isRunning) {
     return <ThemedCircleDot size={16} uniProps={runningIcon} />;
   }
-  return <ThemedCircle size={16} uniProps={mutedIcon} />;
+  // A pending task's ring is a status mark, not a checkbox. At the muted step it carries the
+  // weight of an enabled control and invites a click that does nothing, so it sits one step back
+  // from the text it marks.
+  return <ThemedCircle size={16} uniProps={extraMutedIcon} />;
 }
 
 export const TaskListRow = memo(function TaskListRow({ task }: { task: TodoEntry }) {
@@ -47,8 +49,14 @@ const styles = StyleSheet.create((theme) => ({
     alignItems: "center",
     gap: theme.spacing[2],
   },
+  // Grows and shrinks, but keeps an `auto` basis: a zero-basis label reports no intrinsic width,
+  // and a container that sizes itself to its content — the composer track panel — measures the
+  // row as empty and truncates it against a surface that had room to spare.
   text: {
-    flex: 1,
+    flexGrow: 1,
+    flexShrink: 1,
+    flexBasis: "auto",
+    minWidth: 0,
     color: theme.colors.foregroundMuted,
     fontSize: theme.fontSize.sm,
   },