From 0f452219728a188a67f6ce809399317868e8eae2 Mon Sep 17 00:00:00 2001
From: scotttong <scott.tong@gmail.com>
Date: Fri, 5 Jun 2026 17:11:42 -0700
Subject: [PATCH] PAP-86: align model & timestamp columns in All Agents list
 view

Give list-view rows a fixed, truncating title width (w-56) instead of a
content-sized min-w-[7rem]. With a constant title width the meta group
(w-44 model + w-24 timestamp) starts at the same x on every row, so the
columns form true vertical lines. Add a hover title on EntityRow's name
so truncated names still show in full.

Org view is left as-is: it is a depth-indented tree with a conditional
live-run indicator, so columns cannot align across levels and the board
feedback was scoped to the list view.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 ui/src/components/EntityRow.tsx |  2 +-
 ui/src/pages/Agents.test.tsx    | 33 +++++++++++++++++++++++++++++++++
 ui/src/pages/Agents.tsx         |  6 +++++-
 3 files changed, 39 insertions(+), 2 deletions(-)

diff --git a/ui/src/components/EntityRow.tsx b/ui/src/components/EntityRow.tsx
index 5b15837b0c2..bc88e971ec9 100644
--- a/ui/src/components/EntityRow.tsx
+++ b/ui/src/components/EntityRow.tsx
@@ -54,7 +54,7 @@ export function EntityRow({
               {identifier}
             </span>
           )}
-          <span className="truncate">{title}</span>
+          <span className="truncate" title={title}>{title}</span>
         </div>
         {(subtitle || reserveSubtitleSpace) && (
           <p
diff --git a/ui/src/pages/Agents.test.tsx b/ui/src/pages/Agents.test.tsx
index f8232049e90..caecb777b6b 100644
--- a/ui/src/pages/Agents.test.tsx
+++ b/ui/src/pages/Agents.test.tsx
@@ -191,4 +191,37 @@ describe("Agents", () => {
     expect(heartbeatCell).not.toBeNull();
     expect(heartbeatCell?.textContent).not.toContain("\n");
   });
+
+  it("gives list-view rows a fixed-width title so meta columns align (PAP-86)", async () => {
+    root = createRoot(container);
+    await act(async () => {
+      root!.render(
+        <QueryClientProvider client={queryClient}>
+          <ToastProvider>
+            <Agents />
+          </ToastProvider>
+        </QueryClientProvider>,
+      );
+    });
+    await flushReact();
+    await flushReact();
+
+    // Switch from the default org view to the list view.
+    const listToggle = Array.from(container.querySelectorAll("button")).find(
+      (btn) => btn.querySelector("svg.lucide-list"),
+    );
+    expect(listToggle).toBeDefined();
+    await act(async () => {
+      listToggle!.click();
+    });
+    await flushReact();
+
+    // The title cell carries a constant width (`w-56`), not a content-sized
+    // `min-w-[7rem]`, so the `meta` group starts at the same x on every row and
+    // the model + timestamp columns line up vertically.
+    const titleCell = container.querySelector(".w-56");
+    expect(titleCell).not.toBeNull();
+    expect(titleCell?.textContent).toContain("Alpha");
+    expect(container.querySelector(".min-w-\\[7rem\\]")).toBeNull();
+  });
 });
diff --git a/ui/src/pages/Agents.tsx b/ui/src/pages/Agents.tsx
index cb0c3799c71..285b636c65e 100644
--- a/ui/src/pages/Agents.tsx
+++ b/ui/src/pages/Agents.tsx
@@ -215,7 +215,11 @@ export function Agents() {
               <EntityRow
                 key={agent.id}
                 title={agent.name}
-                titleClassName="min-w-[7rem]"
+                // Fixed (truncating) title width so the `meta` group starts at a
+                // constant x on every row — that's what makes the model + timestamp
+                // columns line up vertically (PAP-86). Agent names vary in width, so
+                // a content-sized title (`min-w-[7rem]`) shifted meta's start per row.
+                titleClassName="w-56"
                 subtitle={`${roleLabels[agent.role] ?? agent.role}${agent.title ? ` - ${agent.title}` : ""}`}
                 to={agentUrl(agent)}
                 className={cn(