From 5d2596285be704819935cab854b31a1cb186b160 Mon Sep 17 00:00:00 2001
From: Cita <juricek.chen@gmail.com>
Date: Wed, 25 Mar 2026 20:37:53 +0800
Subject: [PATCH] fix: truncate collapsed route group regex badge (#279)

Co-authored-by: apple <apple@appledeMacBook-Pro.local>
---
 src/web/pages/token-routes/RouteCard.test.tsx | 87 +++++++++++++++++++
 src/web/pages/token-routes/RouteCard.tsx      | 16 +++-
 2 files changed, 102 insertions(+), 1 deletion(-)
 create mode 100644 src/web/pages/token-routes/RouteCard.test.tsx

diff --git a/src/web/pages/token-routes/RouteCard.test.tsx b/src/web/pages/token-routes/RouteCard.test.tsx
new file mode 100644
index 0000000..a9c4907
--- /dev/null
+++ b/src/web/pages/token-routes/RouteCard.test.tsx
@@ -0,0 +1,87 @@
+import { describe, expect, it, vi } from 'vitest';
+import { create, type ReactTestInstance } from 'react-test-renderer';
+import RouteCard from './RouteCard.js';
+import type { RouteSummaryRow } from './types.js';
+
+function collectText(node: ReactTestInstance): string {
+  return (node.children || []).map((child) => {
+    if (typeof child === 'string') return child;
+    return collectText(child);
+  }).join('');
+}
+
+const LONG_REGEX_PATTERN = 're:(?:.*|.*/)(minimax-m2.1)$';
+
+function buildRoute(overrides: Partial<RouteSummaryRow> = {}): RouteSummaryRow {
+  return {
+    id: 42,
+    modelPattern: LONG_REGEX_PATTERN,
+    displayName: 'm.',
+    displayIcon: null,
+    modelMapping: null,
+    routingStrategy: 'weighted',
+    enabled: true,
+    channelCount: 4,
+    enabledChannelCount: 4,
+    siteNames: ['site-a'],
+    decisionSnapshot: null,
+    decisionRefreshedAt: null,
+    ...overrides,
+  };
+}
+
+describe('RouteCard', () => {
+  it('truncates the collapsed regex badge while keeping the group name primary', () => {
+    const root = create(
+      <RouteCard
+        route={buildRoute()}
+        brand={null}
+        expanded={false}
+        onToggleExpand={vi.fn()}
+        onEdit={vi.fn()}
+        onDelete={vi.fn()}
+        onToggleEnabled={vi.fn()}
+        onRoutingStrategyChange={vi.fn()}
+        updatingRoutingStrategy={false}
+        channels={undefined}
+        loadingChannels={false}
+        routeDecision={null}
+        loadingDecision={false}
+        candidateView={{ routeCandidates: [], accountOptions: [], tokenOptionsByAccountId: {} }}
+        channelTokenDraft={{}}
+        updatingChannel={{}}
+        savingPriority={false}
+        onTokenDraftChange={vi.fn()}
+        onSaveToken={vi.fn()}
+        onDeleteChannel={vi.fn()}
+        onToggleChannelEnabled={vi.fn()}
+        onChannelDragEnd={vi.fn()}
+        missingTokenSiteItems={[]}
+        missingTokenGroupItems={[]}
+        onCreateTokenForMissing={vi.fn()}
+        onAddChannel={vi.fn()}
+        onSiteBlockModel={vi.fn()}
+        expandedSourceGroupMap={{}}
+        onToggleSourceGroup={vi.fn()}
+      />,
+    );
+
+    expect(collectText(root.root)).toContain('m.');
+
+    const regexBadge = root.root.find((node) => (
+      node.type === 'span'
+      && typeof node.props.className === 'string'
+      && node.props.className.includes('badge-muted')
+      && collectText(node) === LONG_REGEX_PATTERN
+    ));
+
+    expect(regexBadge.props.style).toMatchObject({
+      maxWidth: 180,
+      minWidth: 0,
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap',
+      flexShrink: 1,
+    });
+  });
+});
diff --git a/src/web/pages/token-routes/RouteCard.tsx b/src/web/pages/token-routes/RouteCard.tsx
index e2b098a..5a6c70f 100644
--- a/src/web/pages/token-routes/RouteCard.tsx
+++ b/src/web/pages/token-routes/RouteCard.tsx
@@ -205,7 +205,21 @@ function RouteCardInner({
           </code>
 
           {route.displayName && route.displayName.trim() !== route.modelPattern ? (
-            <span className="badge badge-muted" style={{ fontSize: 10, flexShrink: 0 }}>{route.modelPattern}</span>
+            <span
+              className="badge badge-muted"
+              title={route.modelPattern}
+              style={{
+                fontSize: 10,
+                flexShrink: 1,
+                minWidth: 0,
+                maxWidth: 180,
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                whiteSpace: 'nowrap',
+              }}
+            >
+              {route.modelPattern}
+            </span>
           ) : null}
 
           {readOnlyRoute ? (