From 0cc885a07b8568b7ab4ecd68307aeec278bc00d4 Mon Sep 17 00:00:00 2001
From: fylorn <249551762+fylorn@users.noreply.github.com>
Date: Fri, 9 Oct 2026 16:31:40 +0800
Subject: [PATCH 1/2] Traffic: cap the name columns; long names are cut and
 shown in full on hover

A long upstream name widened the request table without limit (330px for a
44-character name; the whole table went from 864 to 1193px at the default
window), pushing the cost column out of view.

- Upstream, model and key cells have one cap each, in `NAME_PX` (virtual.ts):
  model 208px (unchanged), upstream 160px including the logo, key 160px
  including the app logo and the remote mark (unchanged). Overflowing names
  are cut with an ellipsis; local answers and "not sent" phrases still wrap.
- The width estimates that pick which cells the 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
  (the first name gives up the last ellipsis's room instead of widening the
  column by 12px).
- `Tip clip`: a lazy tooltip that opens only when its text is actually cut,
  with the full text wrapping anywhere. 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. The key
  cell keeps its tooltip, whose first line already holds the full name.

With very long names in all three columns the table is now 1035px (zh) /
1053px (en) instead of 1193 / 1190; normal data is unchanged (864px).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/traffic/PanelHeader.tsx          | 11 ++++-
 src/traffic/RequestTable.tsx         | 62 +++++++++++++++++++++-------
 src/traffic/SessionPanel.tsx         | 19 +++++++--
 src/traffic/SessionRow.tsx           | 36 +++++++++-------
 src/traffic/cells.tsx                |  6 ++-
 src/traffic/drawer/RequestDrawer.tsx | 16 ++++---
 src/traffic/virtual.test.ts          | 34 ++++++++++++++-
 src/traffic/virtual.ts               | 30 ++++++++++++++
 src/ui/tip.test.ts                   | 25 +++++++++++
 src/ui/tip.tsx                       | 36 +++++++++++++---
 10 files changed, 226 insertions(+), 49 deletions(-)
 create mode 100644 src/ui/tip.test.ts

diff --git a/src/traffic/PanelHeader.tsx b/src/traffic/PanelHeader.tsx
index 30c5166d..ebb3ea8c 100644
--- a/src/traffic/PanelHeader.tsx
+++ b/src/traffic/PanelHeader.tsx
@@ -5,6 +5,7 @@ import { commonText } from "@/i18n/common.i18n";
 import { cn } from "@/lib/utils";
 import { Button } from "@/ui/button";
 import { Skeleton } from "@/ui/skeleton";
+import { Tip } from "@/ui/tip";
 
 /**
  * 右侧浮层（请求详情、会话详情）顶上那一块：标题一行，下面一行要点，可选的一排
@@ -17,7 +18,7 @@ import { Skeleton } from "@/ui/skeleton";
  * right-3` 的方块，和这一行的基线对不上；放进来之后它跟着标题走。
  *
  * 标题截断、关闭钮 `shrink-0`：标题一长，浏览器会去挤按钮，按钮挤无可挤就把
- * 「关闭」折成两行。
+ * 「关闭」折成两行。截断了的标题（请求详情的标题是模型名）悬停看全。
  *
  * `tabs`：一排 `variant="line"` 的标签，贴着底边那条线 —— 和页头的标签同一个
  * 做法（`PageHeader`），选中的那条下划线压在分隔线上。
@@ -47,7 +48,13 @@ export function PanelHeader({
       className={cn("shrink-0 border-b border-border px-4 pt-3", tabs ? "pb-0" : "pb-3", className)}
     >
       <div className="flex min-h-7 items-center gap-2">
-        <h2 className="min-w-0 truncate tw-title text-foreground">{title}</h2>
+        {typeof title === "string" ? (
+          <Tip clip text={title}>
+            <h2 className="min-w-0 truncate tw-title text-foreground">{title}</h2>
+          </Tip>
+        ) : (
+          <h2 className="min-w-0 truncate tw-title text-foreground">{title}</h2>
+        )}
         {meta && <span className="shrink-0 tw-num tw-label whitespace-nowrap text-muted-foreground">{meta}</span>}
         <span className="flex-1" />
         <Button
diff --git a/src/traffic/RequestTable.tsx b/src/traffic/RequestTable.tsx
index 681c730d..b277baa1 100644
--- a/src/traffic/RequestTable.tsx
+++ b/src/traffic/RequestTable.tsx
@@ -39,7 +39,18 @@ import { sessionsText } from "./Sessions.i18n";
 import { RowActions, TableMenus, type MenuTarget } from "./TableMenus";
 import { trafficText } from "./Traffic.i18n";
 import { useViaConfig } from "./useModelVia";
-import { indexAt, itemsOf, offsetsOf, textWidth, widest, type Col, type Item, type Widths } from "./virtual";
+import {
+  capped,
+  indexAt,
+  itemsOf,
+  NAME_PX,
+  offsetsOf,
+  textWidth,
+  widest,
+  type Col,
+  type Item,
+  type Widths,
+} from "./virtual";
 
 type Text = (typeof trafficText)["zh"];
 
@@ -296,7 +307,8 @@ function Th({
  * 哪几格最宽是按字数估的（`useSizers`），每列取前三名，估差一点也落在里面；画的是和
  * 行里一样的那一格（同一个组件），量出来的宽度就是真的。组头的字是中粗，请求行是常规；
  * 组里的请求行第一格往里缩了 22px（`pl-7`），这里照样缩。上游那一格会折行，量它最窄
- * 能收到多窄时也要能折。
+ * 能收到多窄时也要能折。名字类的几格自己封了顶（`NAME_PX`），垫在这里也一样：一个
+ * 长名字撑开的最多是上限那么宽。
  */
 function Sizer({
   col,
@@ -375,14 +387,19 @@ function useSizers(items: Item[], t: Text, ts: (typeof sessionsText)["zh"], toda
   }, [items, cache, t, ts, today, via]);
 }
 
-/** 请求行各列大约多宽：和 `requestCell` 写的是同样的字；图标、徽标的边距按一两个字宽算 */
+/**
+ * 请求行各列大约多宽：和 `requestCell` 写的是同样的字；图标、徽标的边距按一两个字宽算。
+ * 名字按画出来的宽度封顶（`capped`，上限见 `NAME_PX`）
+ */
 function requestWidths(r: RequestRow, t: Text, today: number, via: ViaConfig | null): Widths {
   const sent = notSent(r);
   const mark = rowMark(r, via);
+  const phrase = r.local || sent;
   const text = sent ? notSentText(sent) : r.local || r.provider ? upstreamText(r) : "—";
-  const name = textWidth(text) + 3;
-  // 本地应答、没有发往上游的那一句可以在词间折行（见 `UpstreamCell`）：最窄是最长的那个词
-  const nameMin = r.local || sent ? Math.max(...text.split(/\s+/).map(textWidth)) + 3 : name;
+  // 上游的名字和标志一起封顶；本地应答、没有发往上游的那一句是说明，不截断
+  const name = (phrase ? textWidth(text) : capped(textWidth(text), NAME_PX.upstream, 22)) + 3;
+  // 那一句可以在词间折行（见 `UpstreamCell`）：最窄是最长的那个词
+  const nameMin = phrase ? Math.max(...text.split(/\s+/).map(textWidth)) + 3 : name;
   const badges = [
     ...(mark ? [textWidth(t.pinned) + 1] : []),
     ...(r.secrets && r.secrets.items.length > 0
@@ -398,8 +415,9 @@ function requestWidths(r: RequestRow, t: Text, today: number, via: ViaConfig | n
   return {
     status: 2 + textWidth(statusText(r, t)),
     time: textWidth(when(r.atMs, today)),
-    client: Math.min(textWidth(r.client), 24) + (r.peer ? 2 : 0),
-    model: Math.min(textWidth(r.model ?? "—"), 32),
+    // 来源的记号在同一个限宽的块里（见 `KeyCell`）
+    client: capped(textWidth(r.client), NAME_PX.client, r.peer ? 18 : 0) + (r.peer ? 3 : 0),
+    model: capped(textWidth(r.model ?? "—"), NAME_PX.model),
     upstream: badges.reduce((a, b) => a + b + 1, name),
     upstreamMin: Math.max(nameMin, ...badges),
     // 在跑的：首 token 加上一个时钟（「0:42」）
@@ -887,9 +905,11 @@ function requestCell(col: Col, r: RequestRow, c: { hints: boolean; via: ViaConfi
     case "model":
       return (
         // 截断要套在里面一层：`max-width` 加在 td 上会被表格自己的列宽算法吃掉，长名字照样把这一列撑开
-        <div className="max-w-[13rem] truncate" title={r.model}>
-          {r.model ?? "—"}
-        </div>
+        <Tip clip text={r.model}>
+          <div className="truncate" style={{ maxWidth: NAME_PX.model }}>
+            {r.model ?? "—"}
+          </div>
+        </Tip>
       );
     case "upstream":
       return <UpstreamCell r={r} via={c.via} />;
@@ -1129,8 +1149,14 @@ function UpstreamCell({ r, via }: { r: RequestRow; via: ViaConfig | null }) {
   const mark = rowMark(r, via);
   return (
     <div className="flex flex-wrap items-center gap-x-1.5 gap-y-0.5">
-      {/* 本地应答的那一句（英文两个词）可以在词间折行：它不是一个名字，别让它定这一列的最小宽度 */}
-      <span className={cn("flex items-center gap-1.5", !r.local && !sent && "whitespace-nowrap")}>
+      {/*
+        本地应答的那一句（英文两个词）可以在词间折行：它不是一个名字，别让它定这一列的最小宽度。
+        上游的名字不折行，**连同标志封顶**（`NAME_PX`）：再长的截断，悬停看全
+      */}
+      <span
+        className={cn("flex items-center gap-1.5", !r.local && !sent && "whitespace-nowrap")}
+        style={r.local || sent ? undefined : { maxWidth: NAME_PX.upstream }}
+      >
         {/* 被规则拒绝、选中的上游一个都接不了的请求没有发往任何上游：上游是空的，
             这一格说是哪一种，图形和路由图上的拒绝一致。和本地应答一样是一句话、不是
             名字，可以在词间折行 */}
@@ -1146,7 +1172,15 @@ function UpstreamCell({ r, via }: { r: RequestRow; via: ViaConfig | null }) {
             ) : (
               <UpstreamLogo name={r.provider} className="opacity-70" />
             )}
-            {r.local || r.provider ? <span>{upstreamText(r)}</span> : <span className="text-muted-foreground">—</span>}
+            {r.local ? (
+              <span>{upstreamText(r)}</span>
+            ) : r.provider ? (
+              <Tip clip text={r.provider}>
+                <span className="min-w-0 truncate">{r.provider}</span>
+              </Tip>
+            ) : (
+              <span className="text-muted-foreground">—</span>
+            )}
           </>
         )}
       </span>
diff --git a/src/traffic/SessionPanel.tsx b/src/traffic/SessionPanel.tsx
index d8711d17..55f52123 100644
--- a/src/traffic/SessionPanel.tsx
+++ b/src/traffic/SessionPanel.tsx
@@ -162,14 +162,23 @@ export function SessionPanel({
           </TabsList>
         }
       >
+        {/* 名字太长时截断（这一行宽不过浮层），悬停看全 */}
         {providers.length > 0 && (
           <span className="inline-flex min-w-0 items-center gap-1.5">
             <UpstreamLogo name={providers[0] ?? ""} className="opacity-70" />
-            <span className="truncate">{providers.join(" · ")}</span>
+            <Tip clip text={providers.join(" · ")}>
+              <span className="truncate">{providers.join(" · ")}</span>
+            </Tip>
           </span>
         )}
-        {client && <span className="min-w-0 truncate">{client}</span>}
-        <span className="min-w-0 truncate">{n.models.join(t.modelSep)}</span>
+        {client && (
+          <Tip clip text={client}>
+            <span className="min-w-0 truncate">{client}</span>
+          </Tip>
+        )}
+        <Tip clip text={n.models.join(t.modelSep)}>
+          <span className="min-w-0 truncate">{n.models.join(t.modelSep)}</span>
+        </Tip>
       </PanelHeader>
       <div className="relative min-h-0 flex-1">
         <TabsContent value="summary" forceMount className={PANE}>
@@ -391,7 +400,9 @@ function Waterfall({ steps, onOpen }: { steps: Step[]; onOpen: (id: number) => v
               onClick={() => onOpen(x.id)}
             >
               <span className="w-6 shrink-0 text-right tw-label text-muted-foreground">{i + 1}</span>
-              <span className="w-32 shrink-0 truncate text-left text-muted-foreground">{x.model}</span>
+              <Tip clip text={x.model}>
+                <span className="w-32 shrink-0 truncate text-left text-muted-foreground">{x.model}</span>
+              </Tip>
               <Meter value={x.cost ?? 0} max={max} color="var(--chart-2)" className="min-w-8 flex-1" />
               {/* 两格的宽度按最长的那个词定：英文的「In progress」「Canceled」，Windows 上字大 1px 也放得下 */}
               <span className="w-24 shrink-0 text-right">
diff --git a/src/traffic/SessionRow.tsx b/src/traffic/SessionRow.tsx
index cd9ba042..146297f6 100644
--- a/src/traffic/SessionRow.tsx
+++ b/src/traffic/SessionRow.tsx
@@ -18,7 +18,7 @@ import { sessionsText } from "./Sessions.i18n";
 import { compact as short, span as dur, whenMinute as when } from "@/format";
 import { RowActions } from "./TableMenus";
 import { tallyOf, type Cursor, type Group, type Tally } from "./grouping";
-import { textWidth, type Col, type Widths } from "./virtual";
+import { capped, NAME_PX, textWidth, type Col, type Widths } from "./virtual";
 
 type Text = (typeof sessionsText)["zh"];
 
@@ -212,10 +212,11 @@ function sessionCell(col: Col, f: Facts, { t, open, selected, hints, onToggle }:
         />
       );
     case "model":
-      return <Names items={n.models} sep={t.modelSep} />;
+      return <Names items={n.models} sep={t.modelSep} max={NAME_PX.model} />;
+    // 标志和名字一起封顶，和请求行的上游那一格一样
     case "upstream":
       return (
-        <span className="flex items-center gap-1.5">
+        <span className="flex items-center gap-1.5" style={{ maxWidth: NAME_PX.upstream }}>
           {providers[0] !== undefined && !first?.local && <UpstreamLogo name={providers[0]} className="opacity-70" />}
           <Names items={providers} sep=" · " />
         </span>
@@ -244,17 +245,18 @@ export function SessionSizerCell({ col, g, hints }: { col: Col; g: Group; hints:
 
 /**
  * 组头各列大约多宽，挑表头里垫哪几格用（见 `widest`）。和 `sessionCell` 写的是同样的字；
- * 图标、展开钮按两三个字宽算。
+ * 图标、展开钮按两三个字宽算。名字和请求行一样按画出来的宽度封顶（`NAME_PX`）。
  */
 export function sessionWidths(g: Group, t: Text): Widths {
   const { s, first, n, providers } = sessionFacts(g);
-  const names = (xs: string[]) => (xs[0] === undefined ? 0 : Math.min(textWidth(xs[0]), 32) + (xs.length > 1 ? 2 : 0));
-  const upstream = names(providers) + 3;
+  // 第一个名字，有其余的再加上留给它们的一个省略号（`Names`）
+  const names = (xs: string[]) => (xs[0] === undefined ? 0 : textWidth(xs[0]) + (xs.length > 1 ? 2 : 0));
+  const upstream = capped(names(providers), NAME_PX.upstream, 22) + 3;
   return {
     status: 3 + textWidth(t.turnCount(n.turns)) + (n.failed > 0 ? 2 + String(n.failed).length : 0),
     time: textWidth(when(n.started)) + (n.running > 0 ? 2 : 0),
-    client: Math.min(textWidth(s?.client ?? first?.client ?? ""), 24) + (first?.peer ? 2 : 0),
-    model: names(n.models),
+    client: capped(textWidth(s?.client ?? first?.client ?? ""), NAME_PX.client, first?.peer ? 18 : 0) + (first?.peer ? 3 : 0),
+    model: capped(names(n.models), NAME_PX.model),
     upstream,
     upstreamMin: upstream,
     latency: textWidth(dur(n.ended - n.started)),
@@ -267,10 +269,12 @@ export function sessionWidths(g: Group, t: Text): Widths {
  * 组头里的一串名字（模型、上游）。**决定列宽的只有第一项。**
  *
  * 一次任务用过三个模型、走过四个上游很常见，连起来写有两三百像素 ——
- * 让它撑列宽，费用就被挤出视野。所以第一项完整显示（和请求行的模型
- * 一样最多 13rem）；分隔符和其余的那段宽度记作 0（`w-0 flex-1`），这一列
- * 有多宽就显示多少，最少留出一个省略号：窄的时候是「claude-sonnet-5…」，
- * 宽的时候整串都在。悬停看全。
+ * 让它撑列宽，费用就被挤出视野。所以第一项完整显示；分隔符和其余的那段
+ * 宽度记作 0（`w-0 flex-1`），这一列有多宽就显示多少，最少留出一个省略号：
+ * 窄的时候是「claude-sonnet-5…」，宽的时候整串都在。截断了的悬停看全。
+ *
+ * **整块和请求行同一个上限**（`max`，或者外面那一块的，见 `NAME_PX`）：第一项
+ * 本身就超长时，它让出最后那个省略号的位置，组头不比请求行宽。
  *
  * **分隔符跟着后面那段，不跟着第一项。**跟着第一项的话，第一个模型正好是
  * 全表最长的那个时，组头比请求行宽出一个分隔符，归组之后整张表被撑出视野。
@@ -278,13 +282,13 @@ export function sessionWidths(g: Group, t: Text): Widths {
  * `whitespace-pre` 是为了留住「 · 」两边的空格 —— 两段各是一个块，
  * 行尾和行首的空格会被吞掉。
  */
-function Names({ items, sep }: { items: string[]; sep: string }) {
+function Names({ items, sep, max }: { items: string[]; sep: string; max?: number }) {
   const [first, ...rest] = items;
   if (first === undefined) return null;
   return (
-    <Tip lazy text={items.join(sep)}>
-      <div className="flex min-w-0 flex-1">
-        <span className="max-w-[13rem] shrink-0 overflow-hidden text-ellipsis whitespace-pre">{first}</span>
+    <Tip clip text={items.join(sep)}>
+      <div className="flex min-w-0 flex-1" style={max === undefined ? undefined : { maxWidth: max }}>
+        <span className="min-w-0 overflow-hidden text-ellipsis whitespace-pre">{first}</span>
         {rest.length > 0 && (
           <span className="w-0 min-w-3 flex-1 overflow-hidden text-ellipsis whitespace-pre">
             {sep + rest.join(sep)}
diff --git a/src/traffic/cells.tsx b/src/traffic/cells.tsx
index 5f5695e6..a6c8bf93 100644
--- a/src/traffic/cells.tsx
+++ b/src/traffic/cells.tsx
@@ -10,6 +10,7 @@ import { ClientLogo } from "@/ui/logos";
 import { Tip } from "@/ui/tip";
 import { coreNow, onTick, stopwatch } from "./clock";
 import { trafficText } from "./Traffic.i18n";
+import { NAME_PX } from "./virtual";
 
 /**
  * 请求行和组头共用的几样：行的底色、压暗的格子、密钥那一格、悬停里的几行字、复制、
@@ -40,6 +41,9 @@ export const MENU_REVEAL =
  *
  * `hints`：表里有哪一行带着推测出的应用。有的话没有应用的行也留出标志的位置，
  * 名字才对得齐。
+ *
+ * **整块封顶**（`NAME_PX`）：名字再长也只截断名字，标志和来源记号留着；悬停第一行就是
+ * 完整的名字（连同打码的值）。
  */
 export function KeyCell({
   client,
@@ -62,7 +66,7 @@ export function KeyCell({
   ];
   return (
     <Tip lazy text={<Lines lines={tip} />}>
-      <span className="flex max-w-40 items-center gap-1.5">
+      <span className="flex items-center gap-1.5" style={{ maxWidth: NAME_PX.client }}>
         {hints &&
           (hint ? (
             <ClientLogo id={hint} name={appLabel(hint)} className="opacity-70" />
diff --git a/src/traffic/drawer/RequestDrawer.tsx b/src/traffic/drawer/RequestDrawer.tsx
index 6fa7d74c..9869a7d4 100644
--- a/src/traffic/drawer/RequestDrawer.tsx
+++ b/src/traffic/drawer/RequestDrawer.tsx
@@ -11,7 +11,8 @@ import { Skeleton } from "@/ui/skeleton";
 import { ErrorState } from "@/ui/states";
 import { StatusLabel, type StatusTone } from "@/ui/status-dot";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/ui/tabs";
-import { KeyLabel } from "@/KeyLabel";
+import { Tip } from "@/ui/tip";
+import { KeyLabel, keyText } from "@/KeyLabel";
 import { notSentText, probeLabel } from "@/labels";
 import { notSent } from "@/requestRouting";
 import type { CoreEvent, HistoryRow, RequestDetail } from "@/types";
@@ -188,13 +189,18 @@ function Detail({ id, onClose }: { id: number; onClose: () => void }) {
           (r.local || r.provider) && (
             <span className="inline-flex min-w-0 items-center gap-1.5">
               {!r.local && <UpstreamLogo name={r.provider} className="opacity-70" />}
-              <span className="truncate">{r.local ? t.answeredLocally : r.provider}</span>
+              {/* 名字太长时截断（这一行宽不过浮层），悬停看全 */}
+              <Tip clip text={r.local ? t.answeredLocally : r.provider}>
+                <span className="truncate">{r.local ? t.answeredLocally : r.provider}</span>
+              </Tip>
             </span>
           )
         )}
-        <span className="min-w-0 truncate">
-          <KeyLabel name={r.client} masked={r.key_masked} />
-        </span>
+        <Tip clip text={keyText(r.client, r.key_masked)}>
+          <span className="min-w-0 truncate">
+            <KeyLabel name={r.client} masked={r.key_masked} />
+          </span>
+        </Tip>
       </PanelHeader>
 
       <div className="min-h-0 flex-1 overflow-y-auto px-4 pt-4 pb-6 tw-body">
diff --git a/src/traffic/virtual.test.ts b/src/traffic/virtual.test.ts
index b8a5fd41..627de2a7 100644
--- a/src/traffic/virtual.test.ts
+++ b/src/traffic/virtual.test.ts
@@ -1,7 +1,7 @@
 import { describe, expect, it } from "vitest";
 import type { RequestRow } from "@/types";
 import { lines, type Group } from "./grouping";
-import { indexAt, itemsOf, offsetsOf, textWidth, widest } from "./virtual";
+import { capped, indexAt, itemsOf, NAME_PX, offsetsOf, textWidth, widest } from "./virtual";
 
 const row = (id: number, atMs: number, session?: string): RequestRow => ({
   id,
@@ -83,3 +83,35 @@ describe("最宽的几项", () => {
     expect(textWidth("3 轮")).toBe(4);
   });
 });
+
+describe("名字封顶", () => {
+  it("没到上限的照字数算，超过的按上限算：上限是像素，一格约 6.5px，宁可估宽", () => {
+    expect(capped(textWidth("claude-sonnet-5"), NAME_PX.model)).toBe(15);
+    expect(capped(400, NAME_PX.model)).toBe(32);
+    expect(capped(textWidth("公司内部的 Claude 中转（北京机房备用线路二号）"), NAME_PX.upstream, 22)).toBe(22);
+    // 旁边的标志、记号占掉的那截从上限里扣
+    expect(capped(400, 160, 18)).toBe(22);
+    expect(capped(400, 160)).toBe(25);
+  });
+
+  it("常见的名字不截断：估宽在上限以内", () => {
+    for (const m of ["claude-sonnet-4-5-20250929", "qwen3-coder-480b-a35b-instruct", "gpt-5.1-codex-max"])
+      expect(capped(textWidth(m), NAME_PX.model)).toBe(textWidth(m));
+    for (const u of ["bedrock-us-east-1", "azure-openai-eastus2", "阿里云百炼"])
+      expect(capped(textWidth(u), NAME_PX.upstream, 22)).toBe(textWidth(u));
+  });
+
+  it("挑表头里垫哪几格时，一个短名字带着一排徽标胜过三个超长的名字", () => {
+    // 上游那一格 = 名字（封顶）+ 徽标。三个超长名字、没有徽标；一个短名字带两枚徽标
+    const rows = [
+      { name: "x".repeat(60), badges: 0 },
+      { name: "y".repeat(80), badges: 0 },
+      { name: "z".repeat(70), badges: 0 },
+      { name: "openrouter", badges: 2 },
+    ];
+    const w = (i: number) => capped(textWidth(rows[i]!.name), NAME_PX.upstream, 22) + rows[i]!.badges * 10;
+    expect(widest(rows.length, 3, w)[0]).toBe(3);
+    // 不封顶的话它根本挑不进去
+    expect(widest(rows.length, 3, (i) => textWidth(rows[i]!.name) + rows[i]!.badges * 10)).not.toContain(3);
+  });
+});
diff --git a/src/traffic/virtual.ts b/src/traffic/virtual.ts
index 8bd818a0..67565728 100644
--- a/src/traffic/virtual.ts
+++ b/src/traffic/virtual.ts
@@ -99,3 +99,33 @@ export function textWidth(s: string): number {
   for (const ch of s) n += ch.codePointAt(0)! >= 0x2e80 ? 2 : 1;
   return n;
 }
+
+/**
+ * 写名字的三列一格最多多宽（像素，不含格子的内边距）。**再长的截断，悬停看全**：名字是
+ * 用户起的、上游给的，一个长名字不能把整张表撑宽 —— 默认窗口下常见的名字刚好放满，多出
+ * 来的每一像素都把最右边的费用往视野外推。
+ *
+ * 按 13px 正文量过常见的名字定的：
+ * - 模型 208（13rem）：日常的模型名都在 190 以内（`claude-sonnet-4-5-20250929` 186），带
+ *   厂商前缀、日期的长名（`deepseek-ai/DeepSeek-V3.1-Terminus` 231、Bedrock 的推理配置
+ *   300 上下）截断。
+ * - 上游 160（10rem）：标志 16 + 间距 6 + 名字 138。常见的上游名在 100 以内，带区域、
+ *   用途的（`bedrock-us-east-1` 113、`azure-openai-eastus2` 134）也放得下。
+ * - 密钥 160（10rem）：应用的标志、名字、来源记号一共。密钥名通常在 100 以内。
+ */
+export const NAME_PX = { model: 208, upstream: 160, client: 160 } as const;
+
+/** `textWidth` 的一格大约多宽：13px 的正文里一个中文字是两格 */
+const UNIT_PX = 6.5;
+
+/**
+ * 限宽的那一块里的字大约占几个字宽（`textWidth` 估的 `n`）：超过上限的按上限算 —— 画出来
+ * 就是那么宽。`beside` 是同一块里字旁边还有多宽（标志、间距），像素。
+ *
+ * **只用来挑表头里垫哪几格**（见 `widest`）：不封顶的话，挑出来的会是三个超长的名字，
+ * 画出来都只有上限那么宽，而真正最宽的那一格（一个短名字带着一排徽标）没垫进去，滚到
+ * 它时列宽跳一下。上限宁可估宽一点：比上限还长的那些画出来一样宽，挑哪个都一样。
+ */
+export function capped(n: number, maxPx: number, beside = 0): number {
+  return Math.min(n, Math.ceil((maxPx - beside) / UNIT_PX));
+}
diff --git a/src/ui/tip.test.ts b/src/ui/tip.test.ts
new file mode 100644
index 00000000..8520449d
--- /dev/null
+++ b/src/ui/tip.test.ts
@@ -0,0 +1,25 @@
+import { describe, expect, it } from "vitest";
+import { clipped } from "./tip";
+
+/** 量得出宽度的一块：`scrollWidth` 是字要多宽，`clientWidth` 是给了多宽 */
+const box = (scrollWidth: number, clientWidth: number, children: Element[] = []): Element =>
+  ({ scrollWidth, clientWidth, querySelectorAll: () => children }) as unknown as Element;
+
+describe("截没截断", () => {
+  it("这一块放不下自己的字", () => {
+    expect(clipped(box(320, 208))).toBe(true);
+    expect(clipped(box(186, 208))).toBe(false);
+    expect(clipped(box(208, 208))).toBe(false);
+  });
+
+  it("这一块放得下，里面有一段被截了（组头那一串名字：第一项截断，或者其余那段）", () => {
+    expect(clipped(box(208, 208, [box(300, 196), box(12, 12)]))).toBe(true);
+    expect(clipped(box(208, 208, [box(80, 80), box(140, 12)]))).toBe(true);
+    expect(clipped(box(208, 208, [box(80, 80), box(60, 128)]))).toBe(false);
+  });
+
+  it("行内元素、还没挂上的量不出宽度，记作放得下", () => {
+    expect(clipped(box(0, 0))).toBe(false);
+    expect(clipped(null)).toBe(false);
+  });
+});
diff --git a/src/ui/tip.tsx b/src/ui/tip.tsx
index e339235c..dc076792 100644
--- a/src/ui/tip.tsx
+++ b/src/ui/tip.tsx
@@ -1,4 +1,4 @@
-import { useState, type ReactNode } from "react";
+import { useRef, useState, type PointerEvent, type ReactNode } from "react";
 import { Slot } from "radix-ui";
 import {
   Tooltip,
@@ -24,31 +24,55 @@ import {
  * 的地方用**（流量表每一格里的字）：每个 Tooltip 自带一套状态、定位和事件，一行五
  * 六个、几十行一起挂，切页和滚动都要多花一截。挂上的那一下子元素会重新挂一次，
  * 所以只给不能交互的子元素用 —— 按钮在按下的半途被换掉，这一下点击就丢了。
+ *
+ * `clip`：**只在字被截断时才出来**，给截断的名字用（`truncate` 的那一块，或者它里面的
+ * 哪一段）。没截断时气泡里的字和格子里一模一样，鼠标扫过一列就是一路白弹。截没截断在
+ * 悬停的那一下量（`clipped`），窗口变宽、变窄都跟着；含 `lazy`。长名字里常常没有可以
+ * 折行的地方，气泡里在任意处折。
  */
 export function Tip({
   text,
   children,
   side = "top",
   lazy = false,
+  clip = false,
 }: {
   text: ReactNode;
   children: ReactNode;
   side?: "top" | "right" | "bottom" | "left";
   lazy?: boolean;
+  clip?: boolean;
 }) {
-  const [armed, setArmed] = useState(!lazy);
+  const [armed, setArmed] = useState(!lazy && !clip);
+  const [open, setOpen] = useState(false);
+  // 触发的那一块（`asChild`，不一定是按钮）：量它截没截断
+  const trigger = useRef<Element | null>(null);
   // 挂上之后要再动一下鼠标才开始计时（Tooltip 按 pointermove 起算），移进来时鼠标本来就在动
-  if (!armed) return <Slot.Root onPointerEnter={() => setArmed(true)}>{children}</Slot.Root>;
+  if (!armed) {
+    const arm = (e: PointerEvent) => {
+      if (!clip || clipped(e.currentTarget)) setArmed(true);
+    };
+    return <Slot.Root onPointerEnter={arm}>{children}</Slot.Root>;
+  }
   return (
-    <Tooltip>
-      <TooltipTrigger asChild>{children}</TooltipTrigger>
-      <TooltipContent side={side} collisionPadding={8}>
+    <Tooltip {...(clip && { open, onOpenChange: (o: boolean) => setOpen(o && clipped(trigger.current)) })}>
+      <TooltipTrigger asChild ref={(el) => void (trigger.current = el)}>
+        {children}
+      </TooltipTrigger>
+      <TooltipContent side={side} collisionPadding={8} className={clip ? "wrap-anywhere" : undefined}>
         {text}
       </TooltipContent>
     </Tooltip>
   );
 }
 
+/** 这一块、或者它里面的哪一块放不下自己的字（`truncate` 截掉了一截）。行内元素量不出宽度，记作放得下 */
+export function clipped(el: Element | null): boolean {
+  if (!el) return false;
+  const cut = (x: Element) => x.scrollWidth > x.clientWidth;
+  return cut(el) || Array.from(el.querySelectorAll("*")).some(cut);
+}
+
 /**
  * 挂在应用根上。
  *

From 455cfda70565e7eb08b92f0d8987c566363dc783 Mon Sep 17 00:00:00 2001
From: fylorn <249551762+fylorn@users.noreply.github.com>
Date: Fri, 9 Oct 2026 16:48:38 +0800
Subject: [PATCH 2/2] =?UTF-8?q?Row=20menus:=20cap=20the=20name=20in=20"Sho?=
 =?UTF-8?q?w=20only=20upstream=20/=20key=20=E2=80=A6";=20full=20name=20on?=
 =?UTF-8?q?=20hover?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A very long upstream or key name widened the traffic table's row menu (both
the right-click menu and the "…" dropdown) to fit the whole name.

Menu items can now name the part of their label that is a user-given name
(`name` in `MenuItems`). Only that part is capped (192px) and cut with an
ellipsis, so the verb stays visible ("Show only upstream acme-claude-rel…");
when it is cut, hovering shows the full name (`Tip clip`). The item's text
content is still the whole label, so screen readers, typeahead and the filter
it applies use the full name. The traffic table's "Show only upstream" and
"Show only key" items 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.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/traffic/RequestTable.tsx | 14 +++++++++--
 src/ui/row-menu.test.ts      | 16 +++++++++++++
 src/ui/row-menu.tsx          | 45 ++++++++++++++++++++++++++++++++----
 3 files changed, 69 insertions(+), 6 deletions(-)
 create mode 100644 src/ui/row-menu.test.ts

diff --git a/src/traffic/RequestTable.tsx b/src/traffic/RequestTable.tsx
index b277baa1..b6e24ace 100644
--- a/src/traffic/RequestTable.tsx
+++ b/src/traffic/RequestTable.tsx
@@ -855,12 +855,22 @@ function requestItems(
     // 没有发往任何上游的那几行上游是空的，没有可筛的
     ...(r.provider
       ? ([
-          { kind: "item", label: t.onlyUpstream(r.provider), onSelect: () => onFilter((f) => ({ ...f, provider: r.provider })) },
+          {
+            kind: "item",
+            label: t.onlyUpstream(r.provider),
+            name: r.provider,
+            onSelect: () => onFilter((f) => ({ ...f, provider: r.provider })),
+          },
         ] as const)
       : []),
     ...(showClient
       ? ([
-          { kind: "item", label: t.onlyClient(r.client), onSelect: () => onFilter((f) => ({ ...f, client: r.client })) },
+          {
+            kind: "item",
+            label: t.onlyClient(r.client),
+            name: r.client,
+            onSelect: () => onFilter((f) => ({ ...f, client: r.client })),
+          },
         ] as const)
       : []),
     { kind: "sep" },
diff --git a/src/ui/row-menu.test.ts b/src/ui/row-menu.test.ts
new file mode 100644
index 00000000..596805ae
--- /dev/null
+++ b/src/ui/row-menu.test.ts
@@ -0,0 +1,16 @@
+import { describe, expect, it } from "vitest";
+import { nameIn } from "./row-menu";
+
+describe("菜单条目里的名字", () => {
+  it("拆成名字前、名字、名字后：只截断名字，动词留着", () => {
+    expect(nameIn("仅显示上游 公司内部的 Claude 中转", "公司内部的 Claude 中转")).toEqual(["仅显示上游 ", "公司内部的 Claude 中转", ""]);
+    expect(nameIn("Show only key ci-pipeline", "ci-pipeline")).toEqual(["Show only key ", "ci-pipeline", ""]);
+    expect(nameIn("Requests of ci (last 24 h)", "ci")).toEqual(["Requests of ", "ci", " (last 24 h)"]);
+  });
+
+  it("没给名字、字里找不到它：不拆，原样写整句", () => {
+    expect(nameIn("复制 ID")).toBe(null);
+    expect(nameIn("复制 ID", "")).toBe(null);
+    expect(nameIn("仅显示上游 relay", "openrouter")).toBe(null);
+  });
+});
diff --git a/src/ui/row-menu.tsx b/src/ui/row-menu.tsx
index af16c53f..79c7122a 100644
--- a/src/ui/row-menu.tsx
+++ b/src/ui/row-menu.tsx
@@ -25,6 +25,7 @@ import {
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
 } from "@/ui/dropdown-menu";
+import { Tip } from "@/ui/tip";
 
 /** 子菜单里的一项：单选的那种，当前选中的打勾 */
 export interface MenuChoice {
@@ -33,10 +34,15 @@ export interface MenuChoice {
   onSelect: () => void;
 }
 
-/** 一份菜单：条目、子菜单或分隔线。**右键和行尾按钮共用同一份** */
+/**
+ * 一份菜单：条目、子菜单或分隔线。**右键和行尾按钮共用同一份**
+ *
+ * `name`：条目里带着的那个名字（「仅显示上游 X」的 X，`label` 里原样有它）。名字是用户
+ * 起的，可以很长：只截断名字，前后的字留着，菜单不被撑宽；截断了悬停看全。
+ */
 export type MenuItems = (
   | { kind: "sep" }
-  | { kind: "item"; label: string; onSelect: () => void; danger?: boolean; disabled?: boolean }
+  | { kind: "item"; label: string; name?: string; onSelect: () => void; danger?: boolean; disabled?: boolean }
   | { kind: "sub"; label: string; choices: MenuChoice[] }
 )[];
 
@@ -113,7 +119,7 @@ export function RowContextMenuContent({ items }: { items: MenuItems }) {
               disabled={it.disabled}
               variant={it.danger ? "destructive" : "default"}
             >
-              {it.label}
+              <MenuLabel label={it.label} name={it.name} />
             </ContextMenuItem>
           ),
         )}
@@ -151,7 +157,7 @@ export function RowDropdownMenuContent({
               disabled={it.disabled}
               variant={it.danger ? "destructive" : "default"}
             >
-              {it.label}
+              <MenuLabel label={it.label} name={it.name} />
             </DropdownMenuItem>
           ),
         )}
@@ -159,3 +165,34 @@ export function RowDropdownMenuContent({
     </DropdownMenuContent>
   );
 }
+
+/** 条目里的名字最宽多宽：常见的上游、密钥名都在 150 以内，再长的截断 */
+const NAME_MAX_PX = 192;
+
+/**
+ * 一个条目的字。带着名字的，名字单独封顶（`NAME_MAX_PX`）、截断了悬停看全；前后的字
+ * 不截，「仅显示上游」一直看得见。整句还在格子里（读屏、按首字母跳都按整句）。
+ */
+function MenuLabel({ label, name }: { label: string; name?: string }) {
+  const parts = nameIn(label, name);
+  if (!parts) return <>{label}</>;
+  const [before, n, after] = parts;
+  return (
+    <span className="flex min-w-0">
+      <span className="shrink-0 whitespace-pre">{before}</span>
+      <Tip clip text={n}>
+        <span className="min-w-0 truncate" style={{ maxWidth: NAME_MAX_PX }}>
+          {n}
+        </span>
+      </Tip>
+      <span className="shrink-0 whitespace-pre">{after}</span>
+    </span>
+  );
+}
+
+/** 条目的字拆成名字前、名字、名字后。没给名字、字里找不到它：不拆 */
+export function nameIn(label: string, name?: string): [string, string, string] | null {
+  const at = name ? label.indexOf(name) : -1;
+  if (!name || at < 0) return null;
+  return [label.slice(0, at), name, label.slice(at + name.length)];
+}