fix: resolve model displayName from providers for playground history

Map model IDs to display names using loaded provider data so both old
and new history records show friendly names (e.g. GLM 5.1 not glm-5.1).

Author: idemerge

frontend/src/components/PlaygroundHistorySidebar.test.tsx

@@ -63,7 +63,7 @@ describe('PlaygroundHistorySidebar', () => {
     it('displays model name and prompt snippet', () => {
       const items = [makeItem({ modelName: 'claude-3', promptSnippet: 'Test prompt' })];
       render(<PlaygroundHistorySidebar {...defaultProps} items={items} />);
-      expect(screen.getByText('claude-3')).toBeInTheDocument();
+      expect(screen.getByText('OpenAI/claude-3')).toBeInTheDocument();
       expect(screen.getByText('Test prompt')).toBeInTheDocument();
     });
 
@@ -99,7 +99,7 @@ describe('PlaygroundHistorySidebar', () => {
       const items = [makeItem({ id: 'click-test' })];
       render(<PlaygroundHistorySidebar {...defaultProps} items={items} onSelect={onSelect} />);
 
-      const item = screen.getByText('gpt-4').closest('[role="button"]')!;
+      const item = screen.getByText('OpenAI/gpt-4').closest('[role="button"]')!;
       fireEvent.click(item);
       expect(onSelect).toHaveBeenCalledWith('click-test');
     });
@@ -109,7 +109,7 @@ describe('PlaygroundHistorySidebar', () => {
       const items = [makeItem({ id: 'key-test' })];
       render(<PlaygroundHistorySidebar {...defaultProps} items={items} onSelect={onSelect} />);
 
-      const item = screen.getByText('gpt-4').closest('[role="button"]')!;
+      const item = screen.getByText('OpenAI/gpt-4').closest('[role="button"]')!;
       fireEvent.keyDown(item, { key: 'Enter' });
       expect(onSelect).toHaveBeenCalledWith('key-test');
     });
@@ -119,7 +119,7 @@ describe('PlaygroundHistorySidebar', () => {
       const items = [makeItem({ id: 'space-test' })];
       render(<PlaygroundHistorySidebar {...defaultProps} items={items} onSelect={onSelect} />);
 
-      const item = screen.getByText('gpt-4').closest('[role="button"]')!;
+      const item = screen.getByText('OpenAI/gpt-4').closest('[role="button"]')!;
       fireEvent.keyDown(item, { key: ' ' });
       expect(onSelect).toHaveBeenCalledWith('space-test');
     });
@@ -152,7 +152,7 @@ describe('PlaygroundHistorySidebar', () => {
       const items = [makeItem({ id: 'sel-1' }), makeItem({ id: 'sel-2', modelName: 'gpt-3.5' })];
       render(<PlaygroundHistorySidebar {...defaultProps} items={items} selectedId="sel-1" />);
 
-      const selectedItem = screen.getByText('gpt-4').closest('[role="button"]')!;
+      const selectedItem = screen.getByText('OpenAI/gpt-4').closest('[role="button"]')!;
       expect(selectedItem.className).toContain('border-accent-blue');
     });
   });
@@ -164,7 +164,7 @@ describe('PlaygroundHistorySidebar', () => {
       const items = [makeItem()];
       render(<PlaygroundHistorySidebar {...defaultProps} items={items} />);
 
-      const itemContainer = screen.getByText('gpt-4').closest('[role="button"]')!;
+      const itemContainer = screen.getByText('OpenAI/gpt-4').closest('[role="button"]')!;
       expect(itemContainer.tagName).not.toBe('BUTTON');
       // Should be a div with role="button"
       expect(itemContainer.tagName).toBe('DIV');
@@ -198,7 +198,7 @@ describe('PlaygroundHistorySidebar', () => {
       const items = [makeItem()];
       render(<PlaygroundHistorySidebar {...defaultProps} items={items} />);
 
-      const itemContainer = screen.getByText('gpt-4').closest('[role="button"]')!;
+      const itemContainer = screen.getByText('OpenAI/gpt-4').closest('[role="button"]')!;
       expect(itemContainer.getAttribute('tabindex')).toBe('0');
     });
   });

frontend/src/components/PlaygroundPage.tsx

@@ -96,6 +96,28 @@ export function PlaygroundPage() {
     clearAll,
   } = usePlaygroundHistory();
 
+  // Build model ID → displayName lookup from loaded providers
+  const modelDisplayNames = useMemo(() => {
+    const map: Record<string, string> = {};
+    for (const p of providers) {
+      for (const m of p.models ?? []) {
+        if (m.displayName) map[m.name] = m.displayName;
+      }
+    }
+    return map;
+  }, [providers]);
+
+  // Enrich history items with display names
+  const enrichedHistoryItems = useMemo(
+    () =>
+      historyItems.map((it) => {
+        const raw = it.modelName.includes('/') ? it.modelName.split('/').pop()! : it.modelName;
+        const display = modelDisplayNames[raw] || it.modelName;
+        return display !== it.modelName ? { ...it, modelName: display } : it;
+      }),
+    [historyItems, modelDisplayNames],
+  );
+
   const [providerId, setProviderIdRaw] = useState<string | null>(
     () => searchParams.get('provider') || getStoredProvider(),
   );
@@ -816,7 +838,7 @@ export function PlaygroundPage() {
       {/* History Sidebar */}
       {historyOpen && (
         <PlaygroundHistorySidebar
-          items={historyItems}
+          items={enrichedHistoryItems}
           loading={historyLoading}
           onSelect={handleSelectHistory}
           onDelete={deleteEntry}