From 2bdb4904d69d96baaa39299ebf17706c344a1d26 Mon Sep 17 00:00:00 2001
From: Vassiliy Yegorov <va@egorovanet.ru>
Date: Sun, 5 Jul 2026 12:20:33 +0700
Subject: [PATCH] Add stacked account display and fixed live progress row
 sizing

Improve account display by showing source/destination in a stacked format
when they differ, and add fixed sizing for live progress rows to prevent
resizing during scans. Also update the table header to use a single
"Account" column.
---
 web/src/app.css              | 27 +++++++++++++++++++++++++++
 web/src/pages/TaskDetail.tsx | 15 +++++++++------
 2 files changed, 36 insertions(+), 6 deletions(-)

diff --git a/web/src/app.css b/web/src/app.css
index 1025aa9..7ba5e4b 100644
--- a/web/src/app.css
+++ b/web/src/app.css
@@ -255,11 +255,36 @@
 }
 
 /* per-account live progress */
+/* merged Source/Destination "Account" cell: single line when src == dst,
+   stacked (src over dst) when they differ. */
+.acct-ident {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.acct-dst {
+  color: var(--fg-dim);
+  font-size: 12px;
+}
+
 .acct-progress {
   display: flex;
   flex-direction: column;
   gap: 4px;
   min-width: 160px;
+  /* reserve room for the bar + two meta lines so toggling the scan line
+     during a run doesn't change the row height */
+  min-height: 40px;
+}
+
+/* Running rows get a fixed wide size up front so live progress updates
+   (which change text length and can wrap) never resize the row mid-scan.
+   The size reverts only when the run finishes and the class drops. */
+.progress-cell--live {
+  min-width: 340px;
+  height: 48px;
+  vertical-align: top;
 }
 
 .pbar {
@@ -283,6 +308,8 @@
   font-size: 10px;
   color: var(--fg-dim);
   letter-spacing: 0.04em;
+  /* keep progress text on one line so its length never reflows the row */
+  white-space: nowrap;
 }
 
 .pscan {
diff --git a/web/src/pages/TaskDetail.tsx b/web/src/pages/TaskDetail.tsx
index b0b3f00..ff7bf3f 100644
--- a/web/src/pages/TaskDetail.tsx
+++ b/web/src/pages/TaskDetail.tsx
@@ -538,8 +538,7 @@ export function TaskDetail({ id }: { id: number }) {
           <table className="tbl">
             <thead>
               <tr>
-                <th>Source</th>
-                <th>Destination</th>
+                <th>Account</th>
                 <th>Src test</th>
                 <th>Dst test</th>
                 <th>Status</th>
@@ -553,20 +552,24 @@ export function TaskDetail({ id }: { id: number }) {
             <tbody>
               {accounts.length === 0 ? (
                 <tr className="empty-row">
-                  <td colSpan={10}>no accounts yet — add one or import a CSV above</td>
+                  <td colSpan={9}>no accounts yet — add one or import a CSV above</td>
                 </tr>
               ) : (
                 accounts.map((a) => (
                   <tr key={a.id}>
                     <td>
-                      {a.src_login}
+                      <div className="acct-ident">
+                        <span>{a.src_login}</span>
+                        {a.dst_login !== a.src_login && (
+                          <span className="acct-dst">→ {a.dst_login}</span>
+                        )}
+                      </div>
                       {a.last_error && (
                         <div className="acct-error" title={a.last_error}>
                           {a.last_error}
                         </div>
                       )}
                     </td>
-                    <td>{a.dst_login}</td>
                     <td>
                       <StatusBadge status={a.test_src_status} />
                     </td>
@@ -576,7 +579,7 @@ export function TaskDetail({ id }: { id: number }) {
                     <td>
                       <StatusBadge status={a.status} />
                     </td>
-                    <td className="progress-cell">
+                    <td className={`progress-cell${a.status === 'running' ? ' progress-cell--live' : ''}`}>
                       {(() => {
                         const lv = live[a.id]
                         if (!lv || !lv.total) return <span className="muted-note">—</span>