From 7f086c8685cf1ec3f4dd44bedc96fbd5c6928164 Mon Sep 17 00:00:00 2001
From: Tam Nhu Tran <kaitran.ntt@gmail.com>
Date: Thu, 30 Apr 2026 16:59:02 -0400
Subject: [PATCH] fix(ui): drop dedicated stage column; render stage chip
 inline in message
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adding a separate STAGE column squeezed MESSAGE to 0px at the
default 22/52/26 panel split — fixed columns + gaps totalled more
than the list panel's available width.

Render the stage chip inline at the start of the MESSAGE column when
present, restoring the original 7-column grid. The bot's earlier
"extra cell mismatch" complaint is still satisfied because there's
no longer a row-only cell missing from the header.

Also tighten three fixed columns to give MESSAGE more breathing room
even on narrower saved panel layouts:
- Module 140 -> 120
- Latency 72 -> 64
- Request 112 -> 100
---
 ui/src/components/logs/logs-entry-list.tsx | 11 +++----
 ui/src/components/logs/logs-row.tsx        | 38 ++++++++++------------
 ui/src/components/logs/logs-trace-row.tsx  |  8 ++---
 3 files changed, 26 insertions(+), 31 deletions(-)

diff --git a/ui/src/components/logs/logs-entry-list.tsx b/ui/src/components/logs/logs-entry-list.tsx
index f8fe46dc..e88eb2f5 100644
--- a/ui/src/components/logs/logs-entry-list.tsx
+++ b/ui/src/components/logs/logs-entry-list.tsx
@@ -25,12 +25,12 @@ export interface LogsEntryListProps {
 }
 
 // Column layout shared by the header and every row variant:
-//   chevron(16) · time(88) · level(64) · stage(72) · module(140) · message(flex) · latency(72) · request(112)
-// The dedicated `stage` column is rendered as an empty span on rows that
-// have no stage hint so column edges align across leaf, trace head, and
-// trace child rows alike.
+//   chevron(16) · time(88) · level(64) · module(120) · message(flex) · latency(64) · request(100)
+// Stage chips render inline at the start of the MESSAGE column rather
+// than as a dedicated column. Fixed columns kept lean so MESSAGE has
+// breathing room at common saved-layout list-panel widths (~600px).
 const COLS_TEMPLATE =
-  'grid grid-cols-[16px_88px_64px_72px_140px_minmax(0,1fr)_72px_112px] items-center gap-3 px-3';
+  'grid grid-cols-[16px_88px_64px_120px_minmax(0,1fr)_64px_100px] items-center gap-3 px-3';
 
 export function LogsEntryList({
   entries,
@@ -152,7 +152,6 @@ export function LogsEntryList({
         <span role="columnheader" aria-hidden="true" />
         <span role="columnheader">Time</span>
         <span role="columnheader">Level</span>
-        <span role="columnheader">Stage</span>
         <span role="columnheader">Module</span>
         <span role="columnheader">Message</span>
         <span role="columnheader" className="text-right">
diff --git a/ui/src/components/logs/logs-row.tsx b/ui/src/components/logs/logs-row.tsx
index c6675c39..62f2fd98 100644
--- a/ui/src/components/logs/logs-row.tsx
+++ b/ui/src/components/logs/logs-row.tsx
@@ -110,31 +110,29 @@ function LogsRowImpl({
       <span role="cell" className="flex w-[64px] shrink-0 items-center">
         <LogLevelBadge level={entry.level} />
       </span>
-      {/* Always reserve the stage column so leaf, trace head, and trace
-          child rows all align under the same column edges in the header
-          grid template. Children with `stageHint` show a chip; rows
-          without one render an empty span at the same width. */}
-      {stageHint ? (
-        <span
-          role="cell"
-          className="w-[72px] shrink-0 truncate rounded border border-border bg-muted/30 px-1.5 py-0.5 text-[11px] uppercase tracking-wide text-muted-foreground"
-        >
-          {stageHint}
-        </span>
-      ) : (
-        <span role="cell" className="w-[72px] shrink-0" aria-hidden="true" />
-      )}
       <span
         role="cell"
-        className="w-[140px] shrink-0 truncate text-[12px] font-medium text-foreground/80"
+        className="w-[120px] shrink-0 truncate text-[12px] font-medium text-foreground/80"
       >
         {moduleLabel}
       </span>
-      <span role="cell" className="min-w-0 flex-1 truncate text-[13px] text-foreground/90">
-        {entry.message}
+      <span
+        role="cell"
+        className="flex min-w-0 flex-1 items-center gap-2 truncate text-[13px] text-foreground/90"
+      >
+        {/* Stage chip renders inline at the start of the message column
+            when a hint is available. Keeps the 7-column grid intact —
+            adding a dedicated stage column squeezed message to 0px at
+            common list-panel widths. */}
+        {stageHint ? (
+          <span className="inline-flex shrink-0 items-center rounded border border-border bg-muted/30 px-1.5 py-0.5 text-[11px] uppercase tracking-wide text-muted-foreground">
+            {stageHint}
+          </span>
+        ) : null}
+        <span className="min-w-0 truncate">{entry.message}</span>
         {repeatCount && repeatCount > 1 ? (
           <span
-            className="ml-2 inline-flex items-center rounded bg-muted px-1.5 py-0.5 text-[11px] font-medium text-muted-foreground"
+            className="ml-1 inline-flex shrink-0 items-center rounded bg-muted px-1.5 py-0.5 text-[11px] font-medium text-muted-foreground"
             title={`${repeatCount} consecutive identical entries`}
           >
             ×{repeatCount}
@@ -144,7 +142,7 @@ function LogsRowImpl({
       <span
         role="cell"
         className={cn(
-          'hidden w-[72px] shrink-0 truncate text-right text-[12px] text-muted-foreground sm:inline-block',
+          'hidden w-[64px] shrink-0 truncate text-right text-[12px] text-muted-foreground sm:inline-block',
           MONO_NUMERIC
         )}
       >
@@ -153,7 +151,7 @@ function LogsRowImpl({
       <span
         role="cell"
         className={cn(
-          'hidden w-[112px] shrink-0 items-center justify-end gap-1 text-right text-[12px] text-muted-foreground/80 lg:inline-flex',
+          'hidden w-[100px] shrink-0 items-center justify-end gap-1 text-right text-[12px] text-muted-foreground/80 lg:inline-flex',
           MONO_NUMERIC
         )}
       >
diff --git a/ui/src/components/logs/logs-trace-row.tsx b/ui/src/components/logs/logs-trace-row.tsx
index a6f14bf9..e5cc6e4c 100644
--- a/ui/src/components/logs/logs-trace-row.tsx
+++ b/ui/src/components/logs/logs-trace-row.tsx
@@ -79,11 +79,9 @@ function LogsTraceRowImpl({
         <span role="cell" className="flex w-[64px] shrink-0 items-center">
           <LogLevelBadge level={group.maxLevel} />
         </span>
-        {/* Empty stage column for grid alignment with header + leaf rows. */}
-        <span role="cell" className="w-[72px] shrink-0" aria-hidden="true" />
         <span
           role="cell"
-          className="flex w-[140px] shrink-0 items-center gap-1.5 truncate text-[12px] font-medium text-foreground/80"
+          className="flex w-[120px] shrink-0 items-center gap-1.5 truncate text-[12px] font-medium text-foreground/80"
         >
           <GitBranch className="h-3 w-3 text-muted-foreground" aria-hidden="true" />
           {group.module}
@@ -94,7 +92,7 @@ function LogsTraceRowImpl({
         <span
           role="cell"
           className={cn(
-            'hidden w-[72px] shrink-0 truncate text-right text-[12px] text-muted-foreground sm:inline-block',
+            'hidden w-[64px] shrink-0 truncate text-right text-[12px] text-muted-foreground sm:inline-block',
             MONO_NUMERIC
           )}
         >
@@ -103,7 +101,7 @@ function LogsTraceRowImpl({
         <span
           role="cell"
           className={cn(
-            'hidden w-[112px] shrink-0 truncate text-right text-[12px] text-muted-foreground lg:inline-block',
+            'hidden w-[100px] shrink-0 truncate text-right text-[12px] text-muted-foreground lg:inline-block',
             MONO_NUMERIC
           )}
         >