0.2.77

admin-ui/src/pages/Logs.tsx

@@ -47,6 +47,13 @@ import type { LogEvent, LogResponse } from '../api/types';
  *    because density is the reason this page is worth watching; a failure or a real
  *    application event earns a second. That means the virtual window is driven by a prefix
  *    sum of row heights rather than by multiplication, computed once per filter change.
+ *    Which height a row gets and what it prints are one decision, made once, in
+ *    `lib/logmodel`'s `secondary` — the table renders that field and nothing else under
+ *    the summary. They were two, and they disagreed: every authenticated request line
+ *    carries the viewer and the television, so a context line was drawn on rows the height
+ *    rule had already ruled out, centred inside a box too short for it and sliced top and
+ *    bottom. A request's identity now sits at the end of its own line instead, which keeps
+ *    both the density and the fact.
  *  - **Pause holds the view, not the connection.** Draining continues while paused and the
  *    arrivals are held in a buffer, so the cursor keeps up with the server's ring buffer
  *    and resuming is a flush rather than a stampede — the previous behaviour let the ring
@@ -56,8 +63,20 @@ import type { LogEvent, LogResponse } from '../api/types';
 
 const RETAIN = 20_000;
 const POLL_MS = 5_000;
-const ROW_COMPACT = 30;
-const ROW_TALL = 48;
+/* Row geometry, and it is arithmetic rather than a pair of round numbers: a row is
+ * absolutely positioned at a height this file decides, so anything the stylesheet draws
+ * that these figures do not account for is text clipped by a rule nobody can see from the
+ * CSS. Every first-line cell in `.logrow` is given exactly ROW_LINE, the secondary line
+ * exactly ROW_SECOND, and the padding and hairline below are the same on both heights —
+ * which is what makes the columns line up whether an event printed one line or two.
+ * Changing any figure here means changing its twin in `styles.css`. */
+const ROW_PAD = 7;
+const ROW_LINE = 16;
+const ROW_SECOND = 15;
+const ROW_SECOND_GAP = 2;
+const ROW_RULE = 1;
+const ROW_COMPACT = ROW_PAD + ROW_LINE + ROW_PAD + ROW_RULE;
+const ROW_TALL = ROW_COMPACT + ROW_SECOND_GAP + ROW_SECOND;
 const DAY_HEIGHT = 26;
 const HEADER_HEIGHT = 31;
 const OVERSCAN = 10;
@@ -175,7 +194,7 @@ const LogRow = memo(function LogRow({
       <button
         type="button"
         className="logrow-summary"
-        title={view.detail || view.summary}
+        title={[view.summary, view.trail, view.secondary].filter(Boolean).join(' — ')}
         onClick={() => onInspect(event.sequence)}
       >
         <span className="logrow-line">
@@ -185,11 +204,14 @@ const LogRow = memo(function LogRow({
             </b>
           ) : null}
           <span className="logrow-text">{view.summary}</span>
+          {view.trail ? <span className="logrow-trail">{view.trail}</span> : null}
         </span>
-        {view.detail ? (
-          <span className="logrow-error">↳ {view.detail}</span>
-        ) : view.context ? (
-          <span className="logrow-context">{view.context}</span>
+        {/* Printed if and only if the row was measured for it — see `secondary` in
+            lib/logmodel. */}
+        {view.secondary ? (
+          <span className="logrow-second" data-tone={view.secondaryTone}>
+            {view.secondaryTone === 'error' ? `↳ ${view.secondary}` : view.secondary}
+          </span>
         ) : null}
       </button>