Traffic: cap the name columns; long names are cut and shown in full on hover

[fylorn]

Problem

A long upstream name widened the request table without limit: a 44-character upstream name made that column 330px and the whole table 1193px at the default window (864px available), pushing the cost column out of view. The model column already had a cap (13rem) but used the native title, and the session header rows could exceed it.

Change

• One cap per name column, in NAME_PX (src/traffic/virtual.ts), applied as max-width on the inner block (a max-width on the td is ignored by table layout):

  • model 208px (13rem, unchanged): everyday model ids measure 36–186px at 13px (claude-sonnet-4-5-20250929 is 186); vendor-prefixed / dated ids (deepseek-ai/DeepSeek-V3.1-Terminus 231, Bedrock inference profiles ~300) are cut.
  • upstream 160px including the 16px logo and 6px gap (name 138px): everyday upstream names are under 100px; region / purpose names (bedrock-us-east-1 113, azure-openai-eastus2 134) still fit.
  • key 160px including the app logo and the remote mark (unchanged); key names are usually under 100px.

  At the default window, normal content already fills the table to the pixel, so the caps are kept just above what common names need.

• Sizers respect the caps. The width estimates that choose which cells the invisible header sizers render are capped the same way (capped), so a short name with badges is still measured when several over-long names are around, and columns do not jump while scrolling.

• Session header rows: the model and upstream lists stay within the same caps. When the first name is itself over-long it gives up the room for the trailing ellipsis instead of widening the column by 12px.

• Tip clip (src/ui/tip.tsx): a lazy tooltip that opens only when its text is actually cut (clipped(): the trigger or one of its descendants has scrollWidth > clientWidth, measured on hover). The full text wraps anywhere, because long names often have no break points. It is used on the model and upstream names (replacing the native title on the model), the session header lists, the session panel header and waterfall, and the request drawer header (title, upstream, key). The key cell keeps its existing tooltip; its first line already holds the full name.

• The copy and filter actions still read the row data, so they always use the full text.

• Row menus (right-click and the "…" dropdown share @/ui/row-menu): a menu item can name the part of its label that is a user-given name (name in MenuItems). Only that part is capped (192px) and cut, so the verb stays visible ("Show only upstream acme-claude-rel…"); when it is cut, hovering shows the full name. The item's text content is still the whole label (screen readers, typeahead). "Show only upstream" and "Show only key" use it; the session header menu has no names. With the long-name fixture the menu is 281px (zh) / 338px (en) instead of about 385 / 429px.

Measurements (headless Chromium, same in system WKWebView within 0.3px)

New harness fixture ?long: very long upstream, model and key names on the newest rows and on one session.

	before	after
table, normal data, 1100×720 zh / en	864 / 866	864 / 866 (unchanged)
table, long names, 1100×720 zh flat	1193	1035
table, long names, 1100×720 en flat	1190	1053
table, long names, zh grouped (2 open)	1202	1043
upstream column with a long name	330	172

Checked

• Flat and grouped views at 1100×720 and 820×560, zh / en, light / dark; the request drawer and the session panel with long names.
• Tooltips: cut names show the full text; names that fit show no tooltip. Normal data has no false positives (fractional widths included) in Chromium or WKWebView.
• Column widths stay the same while scrolling the windowed table from the top to the bottom and back.
• Keyboard cursor probe (cursor-probe.js, 230 keys down and up from three horizontal positions): the same result as on unmodified dev.
• ?live fresh-row animation, no console errors.
• Row menus with long names (zh / en, light / dark, right-click and "…"): the verb stays visible, the tooltip shows the full name, arrow keys still move through the items, and choosing "Show only upstream" filters by the full name.
• pnpm typecheck, pnpm test (94 files, 961 tests), pnpm build.

🤖 Generated with Claude Code