polish: hand-tune Cost tab table column widths

CHANGELOG.md

@@ -7,6 +7,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+<<<<<<< HEAD
 ### Added
 - **Auto-reindex after ingest.** `run_ingest` now refreshes the search, tag, and Q&A indexes for every project that gained new messages, so users no longer have to POST to `/api/search/reindex`, `/api/tags/reindex`, `/api/qa/reindex` after ingest. Each service is invoked in its own try/except — a beta-service failure (tags or Q&A) cannot break ingest, and search itself fails soft. Gated by a new `auto_reindex_on_ingest` setting (default `True`, env `AUTO_REINDEX_ON_INGEST`) for power users who want to disable it. Per-project re-index, not full `reindex_all` — only the touched projects are touched.
 
@@ -26,6 +27,20 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
     and force a fresh build. `is_reindexing` and `config` are overlaid on
     the cached payload per request so live config edits aren't masked.
 - **`tool_count_distribution` split off `/api/dashboard-data`** onto its own `GET /api/tool-distribution` endpoint (mirrors the §D1 pattern that previously moved `command_details` to `/api/commands`). On chimera the dashboard payload drops from **846,774 → 846,274 bytes** (`wc -c` on real curls); the bucket map itself is 501 bytes / 66 buckets there. On busier projects with hundreds of distinct tool counts the saving is materially larger. The Overview tab's `CommandToolDistChart` now lazy-fetches the map after mount, so the chart renders an empty state for ~1 RTT instead of blocking initial paint.
+- **Cost-tab table column widths hand-tuned** so cells no longer look cramped:
+  - `CommandCostList`: `When` 8rem → 7rem (timestamps fit cleanly), `%Total` /
+    `Tools` / `Steps` 4rem → 5rem so headers don't wedge against their sort
+    chevrons; `Prompt` keeps the slack as the only flex column.
+  - `OutlierCommandsTable`: `When` 7rem → 8rem to match the sibling commands
+    table; `Cost` 5rem → 6rem so `$1,234.56` has breathing room.
+  - `SessionEfficiencyTable`: `Edit` / `Read` / `Search` / `Bash` 4rem → 5rem
+    (`Search` + chevron previously overflowed `w-16`); `Idle Total` / `Idle Max`
+    5rem → 6rem so the two-word headers stay on one line; `Class` 8rem → 9rem
+    for the `research-heavy` badge.
+  - `SessionCompareView`: numeric columns (`A`, `B`, `Δ`) get fixed 10rem widths
+    so the metric-label column gets the slack, and the loading skeleton matches.
+- **All four cost-table headers** now wrap with `whitespace-nowrap` to guarantee
+  single-line headers at the 1280px breakpoint.
 
 ## [0.3.5] - 2026-04-25
 

stackunderflow-ui/src/components/cost/CommandCostList.tsx

@@ -300,29 +300,29 @@ export default function CommandCostList({ data, onOpen, initialSort }: CommandCo
         <div className="overflow-x-auto">
           <table className="w-full text-sm">
             <thead>
-              <tr className="border-b border-gray-200 dark:border-gray-800 text-gray-600 dark:text-gray-400 text-xs uppercase tracking-wider">
+              <tr className="border-b border-gray-200 dark:border-gray-800 text-gray-600 dark:text-gray-400 text-xs uppercase tracking-wider whitespace-nowrap">
                 <th scope="col" className="w-8" aria-label="expand" />
                 <th scope="col" className="px-3 py-2 text-left">Prompt</th>
                 <SortHeader
                   label="When" sortKey="when" activeKey={sortKey} dir={sortDir}
-                  onSort={setSort} align="left" className="w-32"
+                  onSort={setSort} align="left" className="w-28"
                 />
                 <SortHeader
                   label="Cost" sortKey="cost" activeKey={sortKey} dir={sortDir}
                   onSort={setSort} className="w-20"
                 />
-                <th scope="col" className="px-3 py-2 text-right w-16">%Total</th>
+                <th scope="col" className="px-3 py-2 text-right w-20">%Total</th>
                 <SortHeader
                   label="Tokens" sortKey="tokens" activeKey={sortKey} dir={sortDir}
                   onSort={setSort} className="w-20"
                 />
                 <SortHeader
                   label="Tools" sortKey="tools" activeKey={sortKey} dir={sortDir}
-                  onSort={setSort} className="w-16"
+                  onSort={setSort} className="w-20"
                 />
                 <SortHeader
                   label="Steps" sortKey="steps" activeKey={sortKey} dir={sortDir}
-                  onSort={setSort} className="w-16"
+                  onSort={setSort} className="w-20"
                 />
               </tr>
             </thead>

stackunderflow-ui/src/components/cost/OutlierCommandsTable.tsx

@@ -304,7 +304,7 @@ function OutlierSection({
           <div className="overflow-x-auto">
             <table className="w-full text-sm" data-testid={`${testIdPrefix}-table`}>
               <thead>
-                <tr className="border-b border-gray-200 dark:border-gray-800 text-gray-600 dark:text-gray-400 text-xs uppercase tracking-wider">
+                <tr className="border-b border-gray-200 dark:border-gray-800 text-gray-600 dark:text-gray-400 text-xs uppercase tracking-wider whitespace-nowrap">
                   <th className="w-6 px-2 py-2" aria-hidden="true" />
                   <th className="px-3 py-2 text-left">Prompt</th>
                   <SortHeader
@@ -313,7 +313,7 @@ function OutlierSection({
                     activeKey={activeKey}
                     dir={sortDir}
                     onClick={() => setSort('timestamp' as SortableKey)}
-                    className="w-28"
+                    className="w-32"
                   />
                   <SortHeader
                     label={countLabel}
@@ -331,7 +331,7 @@ function OutlierSection({
                     dir={sortDir}
                     onClick={() => setSort('cost' as SortableKey)}
                     align="right"
-                    className="w-20"
+                    className="w-24"
                   />
                 </tr>
               </thead>

stackunderflow-ui/src/components/cost/SessionCompareView.tsx

@@ -251,11 +251,11 @@ export default function SessionCompareView({
         <div className="bg-gray-100/50 dark:bg-gray-800/30 rounded border border-gray-200 dark:border-gray-800 overflow-hidden">
           <table className="w-full text-sm">
             <thead>
-              <tr className="border-b border-gray-200 dark:border-gray-800 text-gray-600 dark:text-gray-400 text-xs uppercase tracking-wider">
+              <tr className="border-b border-gray-200 dark:border-gray-800 text-gray-600 dark:text-gray-400 text-xs uppercase tracking-wider whitespace-nowrap">
                 <th className="px-3 py-2 text-left">Metric</th>
-                <th className="px-3 py-2 text-right">A</th>
-                <th className="px-3 py-2 text-right">B</th>
-                <th className="px-3 py-2 text-right">Δ</th>
+                <th className="px-3 py-2 text-right w-40">A</th>
+                <th className="px-3 py-2 text-right w-40">B</th>
+                <th className="px-3 py-2 text-right w-40">Δ</th>
               </tr>
             </thead>
             <tbody>
@@ -318,15 +318,15 @@ export default function SessionCompareView({
         <div className="overflow-x-auto">
           <table className="w-full text-sm">
             <thead>
-              <tr className="border-b border-gray-200 dark:border-gray-800 text-gray-600 dark:text-gray-400 text-xs uppercase tracking-wider">
+              <tr className="border-b border-gray-200 dark:border-gray-800 text-gray-600 dark:text-gray-400 text-xs uppercase tracking-wider whitespace-nowrap">
                 <th className="px-3 py-2 text-left">Metric</th>
-                <th className="px-3 py-2 text-right">
+                <th className="px-3 py-2 text-right w-40">
                   <span className="font-mono text-indigo-700 dark:text-indigo-300">A · {shortSession(data.a.session_id)}</span>
                 </th>
-                <th className="px-3 py-2 text-right">
+                <th className="px-3 py-2 text-right w-40">
                   <span className="font-mono text-indigo-700 dark:text-indigo-300">B · {shortSession(data.b.session_id)}</span>
                 </th>
-                <th className="px-3 py-2 text-right">Δ (B − A)</th>
+                <th className="px-3 py-2 text-right w-40">Δ (B − A)</th>
               </tr>
             </thead>
             <tbody>

stackunderflow-ui/src/components/cost/SessionEfficiencyTable.tsx

@@ -255,7 +255,7 @@ export default function SessionEfficiencyTable({ data }: SessionEfficiencyTableP
         <div className="overflow-x-auto">
           <table className="w-full text-sm">
             <thead>
-              <tr className="border-b border-gray-200 dark:border-gray-800 text-gray-600 dark:text-gray-400 text-xs uppercase tracking-wider">
+              <tr className="border-b border-gray-200 dark:border-gray-800 text-gray-600 dark:text-gray-400 text-xs uppercase tracking-wider whitespace-nowrap">
                 <SortHeader
                   label="Session"
                   sortKey="session_id"
@@ -270,7 +270,7 @@ export default function SessionEfficiencyTable({ data }: SessionEfficiencyTableP
                   activeKey={sortKeyStr}
                   dir={sortDir}
                   onClick={() => setSort('classification')}
-                  className="px-3 py-2 w-32"
+                  className="px-3 py-2 w-36"
                 />
                 <SortHeader
                   label="Edit"
@@ -279,7 +279,7 @@ export default function SessionEfficiencyTable({ data }: SessionEfficiencyTableP
                   dir={sortDir}
                   onClick={() => setSort('edit_ratio')}
                   align="right"
-                  className="px-3 py-2 w-16"
+                  className="px-3 py-2 w-20"
                 />
                 <SortHeader
                   label="Read"
@@ -288,7 +288,7 @@ export default function SessionEfficiencyTable({ data }: SessionEfficiencyTableP
                   dir={sortDir}
                   onClick={() => setSort('read_ratio')}
                   align="right"
-                  className="px-3 py-2 w-16"
+                  className="px-3 py-2 w-20"
                 />
                 <SortHeader
                   label="Search"
@@ -297,7 +297,7 @@ export default function SessionEfficiencyTable({ data }: SessionEfficiencyTableP
                   dir={sortDir}
                   onClick={() => setSort('search_ratio')}
                   align="right"
-                  className="px-3 py-2 w-16"
+                  className="px-3 py-2 w-20"
                 />
                 <SortHeader
                   label="Bash"
@@ -306,7 +306,7 @@ export default function SessionEfficiencyTable({ data }: SessionEfficiencyTableP
                   dir={sortDir}
                   onClick={() => setSort('bash_ratio')}
                   align="right"
-                  className="px-3 py-2 w-16"
+                  className="px-3 py-2 w-20"
                 />
                 <SortHeader
                   label="Idle Total"
@@ -315,7 +315,7 @@ export default function SessionEfficiencyTable({ data }: SessionEfficiencyTableP
                   dir={sortDir}
                   onClick={() => setSort('idle_gap_total_s')}
                   align="right"
-                  className="px-3 py-2 w-20"
+                  className="px-3 py-2 w-24"
                 />
                 <SortHeader
                   label="Idle Max"
@@ -324,7 +324,7 @@ export default function SessionEfficiencyTable({ data }: SessionEfficiencyTableP
                   dir={sortDir}
                   onClick={() => setSort('idle_gap_max_s')}
                   align="right"
-                  className="px-3 py-2 w-20"
+                  className="px-3 py-2 w-24"
                 />
               </tr>
             </thead>

stackunderflow/static/react/index.html

@@ -5,8 +5,8 @@
     <link rel="icon" type="image/x-icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>StackUnderflow</title>
-    <script type="module" crossorigin src="/assets/index-Dm53Cml-.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-qtmhGLlT.css">
+    <script type="module" crossorigin src="/assets/index-Cup01TTP.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-5QqSjPeR.css">
   </head>
   <body class="bg-white text-gray-900 dark:bg-gray-950 dark:text-gray-200">
     <div id="root"></div>