fix(webapp): history status icons move left of the title with a reserved slot

Every chat row keeps the leading slot so titles align; watching spins
like thinking (the hover title says which) and the short status text
stays on hover.

Author: kathiekiwi

apps/webapp/app/components/dashboard-agent/DashboardAgentHistory.tsx

@@ -1,4 +1,4 @@
-import { EyeIcon, MagnifyingGlassIcon, TrashIcon } from "@heroicons/react/20/solid";
+import { MagnifyingGlassIcon, TrashIcon } from "@heroicons/react/20/solid";
 import { useState } from "react";
 import { Button } from "~/components/primitives/Buttons";
 import { DateTime } from "~/components/primitives/DateTime";
@@ -52,13 +52,9 @@ function ProcessIcon({ process }: { process: ChatProcess }) {
     <span title={label} aria-label={label} role="img" className="shrink-0 text-text-dimmed">
       {process === "investigating" ? (
         <MagnifyingGlassIcon className="size-3.5" />
-      ) : process === "watching" ? (
-        // A watch is passive — an eye, not a spinner, so it can't be read as
-        // "the agent is busy in this chat".
-        <EyeIcon className="size-3.5" />
       ) : (
-        // Same spinner the transcript's progress line uses — a spinner means
-        // "the agent is working right now".
+        // Thinking and watching both spin — "something is going on here"; the
+        // hover title says which.
         <Spinner className="size-3.5" />
       )}
     </span>
@@ -114,7 +110,9 @@ export function DashboardAgentHistory({
                   key={chat.id}
                   label={chat.title}
                   unread={chat.hasUnreadWake ?? false}
-                  status={process ? <ProcessIcon process={process} /> : undefined}
+                  // null keeps the leading slot so every title starts at the
+                  // same x whether or not this chat has a status.
+                  status={process ? <ProcessIcon process={process} /> : null}
                   meta={
                     chat.lastMessageAt ? (
                       <DateTime date={chat.lastMessageAt} showTooltip={false} />

apps/webapp/app/components/dashboard-agent/list-row.tsx

@@ -67,14 +67,18 @@ export function AgentListRow({
           unread && "text-text-bright"
         )}
       >
+        {/* Fixed leading slot so every label starts at the same x, with or
+            without a status icon. */}
+        {status !== undefined ? (
+          <span className="flex w-4 shrink-0 items-center justify-center">{status}</span>
+        ) : null}
         {unread ? (
           <>
             <span aria-hidden className="size-2 shrink-0 rounded-full bg-indigo-500" />
             <span className="sr-only">Unread.</span>
           </>
         ) : null}
         <span className="line-clamp-1 min-w-0 flex-1">{label}</span>
-        {status}
         {meta ? <span className="shrink-0 text-xs text-text-faint">{meta}</span> : null}
       </button>
       {action}