Merge pull request #81 from thanhtunguet/main

Add diagram-based view mode for model alias mapping

src/components/common/ConfirmationModal.tsx

@@ -43,7 +43,11 @@ export function ConfirmationModal() {
 
   return (
     <Modal open={isOpen} onClose={handleCancel} title={title} closeDisabled={isLoading}>
-      <p style={{ margin: '1rem 0' }}>{message}</p>
+      {typeof message === 'string' ? (
+        <p style={{ margin: '1rem 0' }}>{message}</p>
+      ) : (
+        <div style={{ margin: '1rem 0' }}>{message}</div>
+      )}
       <div style={{ display: 'flex', justifyContent: 'flex-end', gap: '1rem', marginTop: '2rem' }}>
         <Button variant="ghost" onClick={handleCancel} disabled={isLoading}>
           {cancelText || t('common.cancel')}

src/components/modelAlias/ModelMappingDiagram.module.scss

@@ -0,0 +1,323 @@
+@use '../../styles/variables' as *;
+
+.container {
+  display: flex;
+  position: relative;
+  width: 100%;
+  min-height: 300px;
+  justify-content: space-between;
+  padding: 20px 0;
+  user-select: none;
+}
+
+// SVG layer for connection lines (behind columns so links are visible)
+.connections {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 1;
+  overflow: visible;
+
+  path {
+    fill: none;
+    stroke-width: 2;
+  }
+}
+
+.column {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  z-index: 2;
+  flex: 0 0 auto;
+
+  &.providers {
+    align-items: flex-end;
+    min-width: 140px;
+  }
+
+  &.sources {
+    align-items: flex-start;
+    min-width: 200px;
+  }
+
+  &.aliases {
+    align-items: flex-start;
+    min-width: 200px;
+  }
+}
+
+.columnHeader {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-secondary);
+  text-transform: uppercase;
+  margin-bottom: 8px;
+  padding: 0 4px;
+}
+
+.item {
+  background: var(--bg-primary);
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  padding: 10px 14px;
+  font-size: 13px;
+  color: var(--text-primary);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  max-width: 280px;
+  position: relative;
+  transition: all 0.2s ease;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+
+  &:hover {
+    border-color: var(--primary-color);
+    transform: translateY(-1px);
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
+    z-index: 10;
+  }
+
+  &.dropTarget {
+    background-color: var(--bg-secondary);
+    border-color: var(--primary-color);
+    border-width: 2px;
+  }
+}
+
+// Mindmap-style provider branch (root node)
+.providerItem {
+  border-left: 3px solid transparent;
+  padding-left: 8px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+
+  .providerLabel {
+    font-weight: 600;
+    font-size: 13px;
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .collapseBtn {
+    flex-shrink: 0;
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    background: var(--bg-secondary);
+    border-radius: 4px;
+    cursor: pointer;
+    color: var(--text-secondary);
+    transition: background-color 0.15s, color 0.15s;
+
+    &:hover {
+      background: var(--border-color);
+      color: var(--text-primary);
+    }
+  }
+
+  .chevronDown,
+  .chevronRight {
+    display: inline-block;
+    width: 0;
+    height: 0;
+    border-style: solid;
+  }
+
+  .chevronDown {
+    border-width: 5px 4px 0 4px;
+    border-color: currentColor transparent transparent transparent;
+  }
+
+  .chevronRight {
+    border-width: 4px 0 4px 5px;
+    border-color: transparent transparent transparent currentColor;
+  }
+}
+
+.sourceItem,
+.aliasItem {
+  cursor: grab;
+
+  &:active {
+    cursor: grabbing;
+  }
+
+  &.dragging {
+    opacity: 0.5;
+    border-style: dashed;
+  }
+}
+
+.dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  position: absolute;
+  top: 50%;
+  margin-top: -3px;
+  flex-shrink: 0;
+
+  &.dotLeft {
+    left: -3px;
+    background: var(--text-tertiary);
+  }
+}
+
+.sourceItem .dot {
+  right: -3px;
+}
+
+.providerBadge {
+  font-size: 11px;
+  padding: 2px 6px;
+  border-radius: 4px;
+  background: var(--bg-secondary);
+  color: var(--text-secondary);
+  margin-right: 8px;
+  font-weight: 500;
+}
+
+.itemName {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.itemCount {
+  font-size: 11px;
+  color: var(--text-tertiary);
+  margin-left: 8px;
+  background: var(--bg-secondary);
+  padding: 1px 6px;
+  border-radius: 10px;
+}
+
+.contextMenu {
+  position: fixed;
+  background: var(--bg-primary);
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  z-index: 9999;
+  min-width: 120px;
+  overflow: hidden;
+  padding: 4px 0;
+
+  .menuItem {
+    padding: 8px 12px;
+    font-size: 13px;
+    color: var(--text-primary);
+    cursor: pointer;
+    transition: background-color 0.1s;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    &:hover {
+      background-color: var(--bg-secondary);
+    }
+
+    &.danger {
+      color: var(--error-color);
+
+      &:hover {
+        background-color: var(--bg-error-light);
+      }
+    }
+  }
+
+  .menuDivider {
+    height: 1px;
+    margin: 4px 0;
+    background: var(--border-color);
+    padding: 0;
+    cursor: default;
+    pointer-events: none;
+  }
+}
+
+.settingsEmpty {
+  color: var(--text-tertiary);
+  font-size: 13px;
+  text-align: center;
+  padding: $spacing-lg 0;
+}
+
+.settingsList {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-sm;
+}
+
+.settingsRow {
+  display: grid;
+  grid-template-columns: minmax(200px, 1fr) auto;
+  gap: $spacing-md;
+  align-items: center;
+  padding: $spacing-sm $spacing-md;
+  border: 1px solid var(--border-color);
+  border-radius: $radius-md;
+  background: var(--bg-secondary);
+
+  @media (max-width: 768px) {
+    grid-template-columns: 1fr;
+    align-items: flex-start;
+  }
+}
+
+.settingsNames {
+  display: flex;
+  align-items: center;
+  gap: $spacing-xs;
+  font-size: 13px;
+  color: var(--text-primary);
+  min-width: 0;
+}
+
+.settingsSource,
+.settingsAlias {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 220px;
+}
+
+.settingsArrow {
+  color: var(--text-tertiary);
+}
+
+.settingsActions {
+  display: flex;
+  align-items: center;
+  gap: $spacing-sm;
+}
+
+.settingsLabel {
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+.settingsDelete {
+  border: 0;
+  background: transparent;
+  color: var(--error-color);
+  padding: 6px;
+  border-radius: 6px;
+  cursor: pointer;
+
+  &:hover {
+    background: var(--bg-error-light);
+  }
+}

src/components/modelAlias/ModelMappingDiagram.tsx

@@ -0,0 +1,567 @@
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, type DragEvent, type MouseEvent as ReactMouseEvent } from 'react';
+import { useTranslation } from 'react-i18next';
+import type { OAuthModelAliasEntry } from '@/types';
+import { useThemeStore } from '@/stores';
+import { AliasColumn, ProviderColumn, SourceColumn } from './ModelMappingDiagramColumns';
+import { DiagramContextMenu } from './ModelMappingDiagramContextMenu';
+import {
+  AddAliasModal,
+  RenameAliasModal,
+  SettingsAliasModal,
+  SettingsSourceModal
+} from './ModelMappingDiagramModals';
+import type {
+  AliasNode,
+  AuthFileModelItem,
+  ContextMenuState,
+  DiagramLine,
+  SourceNode
+} from './ModelMappingDiagramTypes';
+import styles from './ModelMappingDiagram.module.scss';
+
+export interface ModelMappingDiagramProps {
+  modelAlias: Record<string, OAuthModelAliasEntry[]>;
+  allProviderModels?: Record<string, AuthFileModelItem[]>;
+  onUpdate?: (provider: string, sourceModel: string, newAlias: string) => void;
+  onDeleteLink?: (provider: string, sourceModel: string, alias: string) => void;
+  onToggleFork?: (provider: string, sourceModel: string, alias: string, fork: boolean) => void;
+  onRenameAlias?: (oldAlias: string, newAlias: string) => void;
+  onDeleteAlias?: (alias: string) => void;
+  onEditProvider?: (provider: string) => void;
+  onDeleteProvider?: (provider: string) => void;
+  className?: string;
+}
+
+const PROVIDER_COLORS = [
+  '#3b82f6', '#10b981', '#f59e0b', '#ef4444', 
+  '#8b5cf6', '#ec4899', '#06b6d4', '#84cc16'
+];
+
+function getProviderColor(provider: string): string {
+  const hash = provider.split('').reduce((acc, c) => acc + c.charCodeAt(0), 0);
+  return PROVIDER_COLORS[hash % PROVIDER_COLORS.length];
+}
+
+export interface ModelMappingDiagramRef {
+  collapseAll: () => void;
+  refreshLayout: () => void;
+}
+
+export const ModelMappingDiagram = forwardRef<ModelMappingDiagramRef, ModelMappingDiagramProps>(function ModelMappingDiagram({ 
+  modelAlias, 
+  allProviderModels = {}, 
+  onUpdate,
+  onDeleteLink,
+  onToggleFork,
+  onRenameAlias,
+  onDeleteAlias,
+  onEditProvider,
+  onDeleteProvider,
+  className
+}, ref) {
+  const { t } = useTranslation();
+  const resolvedTheme = useThemeStore((state) => state.resolvedTheme);
+  const isDark = resolvedTheme === 'dark';
+  
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [lines, setLines] = useState<DiagramLine[]>([]);
+  const [draggedSource, setDraggedSource] = useState<SourceNode | null>(null);
+  const [draggedAlias, setDraggedAlias] = useState<string | null>(null);
+  const [dropTargetAlias, setDropTargetAlias] = useState<string | null>(null);
+  const [dropTargetSource, setDropTargetSource] = useState<string | null>(null);
+  const [extraAliases, setExtraAliases] = useState<string[]>([]);
+  const [contextMenu, setContextMenu] = useState<ContextMenuState | null>(null);
+  const [collapsedProviders, setCollapsedProviders] = useState<Set<string>>(new Set());
+  const [renameState, setRenameState] = useState<{ oldAlias: string } | null>(null);
+  const [renameValue, setRenameValue] = useState('');
+  const [renameError, setRenameError] = useState('');
+  const [addAliasOpen, setAddAliasOpen] = useState(false);
+  const [addAliasValue, setAddAliasValue] = useState('');
+  const [addAliasError, setAddAliasError] = useState('');
+  const [settingsAlias, setSettingsAlias] = useState<string | null>(null);
+  const [settingsSourceId, setSettingsSourceId] = useState<string | null>(null);
+
+  // Parse data: each source model (provider+name) and each alias is distinct by id; 1 source -> many aliases.
+  const { aliasNodes, providerNodes } = useMemo(() => {
+    const sourceMap = new Map<
+      string,
+      { provider: string; name: string; aliases: Map<string, boolean> }
+    >();
+    const aliasSet = new Set<string>();
+
+    // 1. Existing mappings: group by (provider, name), each source has a set of aliases
+    Object.entries(modelAlias).forEach(([provider, mappings]) => {
+      (mappings ?? []).forEach((m) => {
+        const name = (m?.name || '').trim();
+        const alias = (m?.alias || '').trim();
+        if (!name || !alias) return;
+
+        const pk = `${provider.toLowerCase()}::${name.toLowerCase()}`;
+        if (!sourceMap.has(pk)) {
+          sourceMap.set(pk, { provider, name, aliases: new Map() });
+        }
+        sourceMap.get(pk)!.aliases.set(alias, m?.fork === true);
+        aliasSet.add(alias);
+      });
+    });
+
+    // 2. Unmapped models from allProviderModels (no mapping yet)
+    Object.entries(allProviderModels).forEach(([provider, models]) => {
+      (models ?? []).forEach((m) => {
+        const name = (m.id || '').trim();
+        if (!name) return;
+        const pk = `${provider.toLowerCase()}::${name.toLowerCase()}`;
+        if (sourceMap.has(pk)) {
+          // Already in sourceMap from mappings; keep provider from mapping for correct grouping.
+          return;
+        }
+        sourceMap.set(pk, { provider, name, aliases: new Map() });
+      });
+    });
+
+    // 3. Source nodes: distinct by id = provider::name
+    const sources: SourceNode[] = Array.from(sourceMap.entries())
+      .map(([id, v]) => ({
+        id,
+        provider: v.provider,
+        name: v.name,
+        aliases: Array.from(v.aliases.entries()).map(([alias, fork]) => ({ alias, fork }))
+      }))
+      .sort((a, b) => {
+        if (a.provider !== b.provider) return a.provider.localeCompare(b.provider);
+        return a.name.localeCompare(b.name);
+      });
+
+    // 4. Extra aliases (no mapping yet)
+    extraAliases.forEach((alias) => aliasSet.add(alias));
+
+    // 5. Alias nodes: distinct by id = alias; sources = SourceNodes that have this alias in their aliases
+    const aliasNodesList: AliasNode[] = Array.from(aliasSet)
+      .map((alias) => ({
+        id: alias,
+        alias,
+        sources: sources.filter((s) => s.aliases.some((entry) => entry.alias === alias))
+      }))
+      .sort((a, b) => {
+        if (b.sources.length !== a.sources.length) return b.sources.length - a.sources.length;
+        return a.alias.localeCompare(b.alias);
+      });
+
+    // 6. Group sources by provider
+    const providerMap = new Map<string, SourceNode[]>();
+    sources.forEach((s) => {
+      if (!providerMap.has(s.provider)) providerMap.set(s.provider, []);
+      providerMap.get(s.provider)!.push(s);
+    });
+    const providerNodesList = Array.from(providerMap.entries())
+      .map(([provider, providerSources]) => ({ provider, sources: providerSources }))
+      .sort((a, b) => a.provider.localeCompare(b.provider));
+
+    return { aliasNodes: aliasNodesList, providerNodes: providerNodesList };
+  }, [modelAlias, allProviderModels, extraAliases]);
+
+  // Track element positions
+  const providerRefs = useRef<Map<string, HTMLDivElement>>(new Map());
+  const sourceRefs = useRef<Map<string, HTMLDivElement>>(new Map());
+  const aliasRefs = useRef<Map<string, HTMLDivElement>>(new Map());
+
+  const toggleProviderCollapse = (provider: string) => {
+    setCollapsedProviders((prev) => {
+      const next = new Set(prev);
+      if (next.has(provider)) next.delete(provider);
+      else next.add(provider);
+      return next;
+    });
+  };
+
+  // Calculate lines: provider→source, source→alias (when expanded); midpoint + linkData for source→alias
+  const updateLines = useCallback(() => {
+    if (!containerRef.current) return;
+    const containerRect = containerRef.current.getBoundingClientRect();
+    const newLines: { path: string; color: string; id: string }[] = [];
+
+    const bezier = (
+      x1: number, y1: number,
+      x2: number, y2: number
+    ) => {
+      const cpx1 = x1 + (x2 - x1) * 0.5;
+      const cpx2 = x2 - (x2 - x1) * 0.5;
+      return `M ${x1} ${y1} C ${cpx1} ${y1}, ${cpx2} ${y2}, ${x2} ${y2}`;
+    };
+
+    providerNodes.forEach(({ provider, sources }) => {
+      const collapsed = collapsedProviders.has(provider);
+      if (collapsed) return;
+
+      const providerEl = providerRefs.current.get(provider);
+      if (!providerEl) return;
+      const providerRect = providerEl.getBoundingClientRect();
+      const px = providerRect.right - containerRect.left;
+      const py = providerRect.top + providerRect.height / 2 - containerRect.top;
+      const color = getProviderColor(provider);
+
+      // Provider → Source (branch link, no dot)
+      sources.forEach((source) => {
+        const sourceEl = sourceRefs.current.get(source.id);
+        if (!sourceEl) return;
+        const sourceRect = sourceEl.getBoundingClientRect();
+        const sx = sourceRect.left - containerRect.left;
+        const sy = sourceRect.top + sourceRect.height / 2 - containerRect.top;
+        newLines.push({
+          id: `provider-${provider}-source-${source.id}`,
+          path: bezier(px, py, sx, sy),
+          color
+        });
+      });
+      // Source → Alias: one line per alias
+      sources.forEach((source) => {
+        if (!source.aliases || source.aliases.length === 0) return;
+        
+        source.aliases.forEach((aliasEntry) => {
+          const sourceEl = sourceRefs.current.get(source.id);
+          const aliasEl = aliasRefs.current.get(aliasEntry.alias);
+          if (!sourceEl || !aliasEl) return;
+          
+          const sourceRect = sourceEl.getBoundingClientRect();
+          const aliasRect = aliasEl.getBoundingClientRect();
+          
+          // Calculate coordinates relative to the container
+          const x1 = sourceRect.right - containerRect.left;
+          const y1 = sourceRect.top + sourceRect.height / 2 - containerRect.top;
+          const x2 = aliasRect.left - containerRect.left;
+          const y2 = aliasRect.top + aliasRect.height / 2 - containerRect.top;
+          
+          newLines.push({
+            id: `${source.id}-${aliasEntry.alias}`,
+            path: bezier(x1, y1, x2, y2),
+            color
+          });
+        });
+      });
+    });
+
+    setLines(newLines);
+  }, [providerNodes, collapsedProviders]);
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      collapseAll: () => setCollapsedProviders(new Set(providerNodes.map((p) => p.provider))),
+      refreshLayout: () => updateLines()
+    }),
+    [providerNodes, updateLines]
+  );
+
+  useLayoutEffect(() => {
+    // updateLines is called after layout is calculated, ensuring elements are in place.
+    updateLines();
+    const raf = requestAnimationFrame(updateLines);
+    window.addEventListener('resize', updateLines);
+    return () => {
+      cancelAnimationFrame(raf);
+      window.removeEventListener('resize', updateLines);
+    };
+  }, [updateLines, aliasNodes]);
+
+  useEffect(() => {
+    if (!containerRef.current || typeof ResizeObserver === 'undefined') return;
+    const observer = new ResizeObserver(() => updateLines());
+    observer.observe(containerRef.current);
+    return () => observer.disconnect();
+  }, [updateLines]);
+
+  // Drag and Drop handlers
+  // 1. Source -> Alias
+  const handleDragStart = (e: DragEvent, source: SourceNode) => {
+    setDraggedSource(source);
+    e.dataTransfer.effectAllowed = 'link';
+  };
+
+  const handleDragOver = (e: DragEvent, alias: string) => {
+    e.preventDefault(); // Allow drop
+    if (draggedSource && !draggedSource.aliases.some((entry) => entry.alias === alias)) {
+      setDropTargetAlias(alias);
+    }
+  };
+
+  const handleDragLeave = () => {
+    setDropTargetAlias(null);
+  };
+
+  const handleDrop = (e: DragEvent, alias: string) => {
+    e.preventDefault();
+    if (draggedSource && !draggedSource.aliases.some((entry) => entry.alias === alias) && onUpdate) {
+      onUpdate(draggedSource.provider, draggedSource.name, alias);
+    }
+    setDraggedSource(null);
+    setDropTargetAlias(null);
+  };
+
+  // 2. Alias -> Source
+  const handleDragStartAlias = (e: DragEvent, alias: string) => {
+    setDraggedAlias(alias);
+    e.dataTransfer.effectAllowed = 'link';
+  };
+
+  const handleDragOverSource = (e: DragEvent, source: SourceNode) => {
+    e.preventDefault();
+    if (draggedAlias && !source.aliases.some((entry) => entry.alias === draggedAlias)) {
+      setDropTargetSource(source.id);
+    }
+  };
+
+  const handleDragLeaveSource = () => {
+    setDropTargetSource(null);
+  };
+
+  const handleDropOnSource = (e: DragEvent, source: SourceNode) => {
+    e.preventDefault();
+    if (draggedAlias && !source.aliases.some((entry) => entry.alias === draggedAlias) && onUpdate) {
+      onUpdate(source.provider, source.name, draggedAlias);
+    }
+    setDraggedAlias(null);
+    setDropTargetSource(null);
+  };
+
+  const handleContextMenu = (
+    e: ReactMouseEvent,
+    type: 'alias' | 'background' | 'provider' | 'source',
+    data?: string
+  ) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setContextMenu({
+      x: e.clientX,
+      y: e.clientY,
+      type,
+      data
+    });
+  };
+
+  const closeContextMenu = () => setContextMenu(null);
+
+  const resolveSourceById = useCallback(
+    (id: string | null) => {
+      if (!id) return null;
+      for (const { sources } of providerNodes) {
+        const found = sources.find((source) => source.id === id);
+        if (found) return found;
+      }
+      return null;
+    },
+    [providerNodes]
+  );
+
+  const handleUnlinkSource = (provider: string, sourceModel: string, alias: string) => {
+    if (onDeleteLink) onDeleteLink(provider, sourceModel, alias);
+  };
+
+  const handleToggleFork = (
+    provider: string,
+    sourceModel: string,
+    alias: string,
+    value: boolean
+  ) => {
+    if (onToggleFork) onToggleFork(provider, sourceModel, alias, value);
+  };
+
+  const handleAddAlias = () => {
+    closeContextMenu();
+    setAddAliasOpen(true);
+    setAddAliasValue('');
+    setAddAliasError('');
+  };
+
+  const handleAddAliasSubmit = () => {
+    const trimmed = addAliasValue.trim();
+    if (!trimmed) {
+      setAddAliasError(t('oauth_model_alias.diagram_please_enter_alias'));
+      return;
+    }
+    if (aliasNodes.some(a => a.alias === trimmed)) {
+      setAddAliasError(t('oauth_model_alias.diagram_alias_exists'));
+      return;
+    }
+    setExtraAliases(prev => [...prev, trimmed]);
+    setAddAliasOpen(false);
+  };
+
+  const handleRenameClick = (oldAlias: string) => {
+    closeContextMenu();
+    setRenameState({ oldAlias });
+    setRenameValue(oldAlias);
+    setRenameError('');
+  };
+
+  const handleRenameSubmit = () => {
+    const trimmed = renameValue.trim();
+    if (!trimmed) {
+      setRenameError(t('oauth_model_alias.diagram_please_enter_alias'));
+      return;
+    }
+    if (trimmed === renameState?.oldAlias) {
+      setRenameState(null);
+      return;
+    }
+    if (aliasNodes.some(a => a.alias === trimmed)) {
+      setRenameError(t('oauth_model_alias.diagram_alias_exists'));
+      return;
+    }
+    if (onRenameAlias && renameState) onRenameAlias(renameState.oldAlias, trimmed);
+    if (extraAliases.includes(renameState?.oldAlias ?? '')) {
+      setExtraAliases(prev => prev.map(a => a === renameState?.oldAlias ? trimmed : a));
+    }
+    setRenameState(null);
+  };
+
+  const handleDeleteClick = (alias: string) => {
+    closeContextMenu();
+    const node = aliasNodes.find(n => n.alias === alias);
+    if (!node) return;
+
+    if (node.sources.length === 0) {
+      setExtraAliases(prev => prev.filter(a => a !== alias));
+    } else {
+      if (onDeleteAlias) onDeleteAlias(alias);
+    }
+  };
+
+
+  return (
+    <div 
+      className={`${styles.container} ${className}`} 
+      ref={containerRef}
+      onContextMenu={(e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        handleContextMenu(e, 'background');
+      }}
+    >
+      <svg className={styles.connections}>
+        {lines.map((line) => (
+          <path
+            key={line.id}
+            d={line.path}
+            stroke={line.color}
+            strokeOpacity={isDark ? 0.4 : 0.3}
+          />
+        ))}
+      </svg>
+
+      <ProviderColumn
+        providerNodes={providerNodes}
+        collapsedProviders={collapsedProviders}
+        getProviderColor={getProviderColor}
+        providerRefs={providerRefs}
+        onToggleCollapse={toggleProviderCollapse}
+        onContextMenu={(e, type, data) => handleContextMenu(e, type, data)}
+        label={t('oauth_model_alias.diagram_providers')}
+        expandLabel={t('oauth_model_alias.diagram_expand')}
+        collapseLabel={t('oauth_model_alias.diagram_collapse')}
+      />
+      <SourceColumn
+        providerNodes={providerNodes}
+        collapsedProviders={collapsedProviders}
+        sourceRefs={sourceRefs}
+        getProviderColor={getProviderColor}
+        draggedSource={draggedSource}
+        dropTargetSource={dropTargetSource}
+        draggable={!!onUpdate}
+        onDragStart={handleDragStart}
+        onDragEnd={() => {
+          setDraggedSource(null);
+          setDropTargetAlias(null);
+        }}
+        onDragOver={handleDragOverSource}
+        onDragLeave={handleDragLeaveSource}
+        onDrop={handleDropOnSource}
+        onContextMenu={(e, type, data) => handleContextMenu(e, type, data)}
+        label={t('oauth_model_alias.diagram_source_models')}
+      />
+      <AliasColumn
+        aliasNodes={aliasNodes}
+        aliasRefs={aliasRefs}
+        dropTargetAlias={dropTargetAlias}
+        draggedAlias={draggedAlias}
+        draggable={!!onUpdate}
+        onDragStart={handleDragStartAlias}
+        onDragEnd={() => {
+          setDraggedAlias(null);
+          setDropTargetSource(null);
+        }}
+        onDragOver={handleDragOver}
+        onDragLeave={handleDragLeave}
+        onDrop={handleDrop}
+        onContextMenu={(e, type, data) => handleContextMenu(e, type, data)}
+        label={t('oauth_model_alias.diagram_aliases')}
+      />
+
+      <DiagramContextMenu
+        contextMenu={contextMenu}
+        t={t}
+        onRequestClose={() => setContextMenu(null)}
+        onAddAlias={handleAddAlias}
+        onRenameAlias={handleRenameClick}
+        onOpenAliasSettings={(alias) => {
+          setContextMenu(null);
+          setSettingsAlias(alias);
+        }}
+        onDeleteAlias={handleDeleteClick}
+        onEditProvider={(provider) => {
+          setContextMenu(null);
+          onEditProvider?.(provider);
+        }}
+        onDeleteProvider={(provider) => {
+          setContextMenu(null);
+          onDeleteProvider?.(provider);
+        }}
+        onOpenSourceSettings={(sourceId) => {
+          setContextMenu(null);
+          setSettingsSourceId(sourceId);
+        }}
+      />
+
+      <RenameAliasModal
+        open={!!renameState}
+        t={t}
+        value={renameValue}
+        error={renameError}
+        onChange={(value) => {
+          setRenameValue(value);
+          setRenameError('');
+        }}
+        onClose={() => setRenameState(null)}
+        onSubmit={handleRenameSubmit}
+      />
+      <AddAliasModal
+        open={addAliasOpen}
+        t={t}
+        value={addAliasValue}
+        error={addAliasError}
+        onChange={(value) => {
+          setAddAliasValue(value);
+          setAddAliasError('');
+        }}
+        onClose={() => setAddAliasOpen(false)}
+        onSubmit={handleAddAliasSubmit}
+      />
+      <SettingsAliasModal
+        open={Boolean(settingsAlias)}
+        t={t}
+        alias={settingsAlias}
+        aliasNodes={aliasNodes}
+        onClose={() => setSettingsAlias(null)}
+        onToggleFork={handleToggleFork}
+        onUnlink={handleUnlinkSource}
+      />
+      <SettingsSourceModal
+        open={Boolean(settingsSourceId)}
+        t={t}
+        source={resolveSourceById(settingsSourceId)}
+        onClose={() => setSettingsSourceId(null)}
+        onToggleFork={handleToggleFork}
+        onUnlink={handleUnlinkSource}
+      />
+    </div>
+  );
+});

src/components/modelAlias/ModelMappingDiagramColumns.tsx

@@ -0,0 +1,229 @@
+import type { DragEvent, MouseEvent as ReactMouseEvent, RefObject } from 'react';
+import type { AliasNode, ProviderNode, SourceNode } from './ModelMappingDiagramTypes';
+import styles from './ModelMappingDiagram.module.scss';
+
+interface ProviderColumnProps {
+  providerNodes: ProviderNode[];
+  collapsedProviders: Set<string>;
+  getProviderColor: (provider: string) => string;
+  providerRefs: RefObject<Map<string, HTMLDivElement>>;
+  onToggleCollapse: (provider: string) => void;
+  onContextMenu: (e: ReactMouseEvent, type: 'provider' | 'background', data?: string) => void;
+  label: string;
+  expandLabel: string;
+  collapseLabel: string;
+}
+
+export function ProviderColumn({
+  providerNodes,
+  collapsedProviders,
+  getProviderColor,
+  providerRefs,
+  onToggleCollapse,
+  onContextMenu,
+  label,
+  expandLabel,
+  collapseLabel
+}: ProviderColumnProps) {
+  return (
+    <div
+      className={`${styles.column} ${styles.providers}`}
+      onContextMenu={(e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        onContextMenu(e, 'background');
+      }}
+    >
+      <div className={styles.columnHeader}>{label}</div>
+      {providerNodes.map(({ provider, sources }) => {
+        const collapsed = collapsedProviders.has(provider);
+        return (
+          <div
+            key={provider}
+            ref={(el) => {
+              if (el) providerRefs.current?.set(provider, el);
+              else providerRefs.current?.delete(provider);
+            }}
+            className={`${styles.item} ${styles.providerItem}`}
+            style={{ borderLeftColor: getProviderColor(provider) }}
+            onContextMenu={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              onContextMenu(e, 'provider', provider);
+            }}
+          >
+            <button
+              type="button"
+              className={styles.collapseBtn}
+              onClick={() => onToggleCollapse(provider)}
+              aria-label={collapsed ? expandLabel : collapseLabel}
+              title={collapsed ? expandLabel : collapseLabel}
+            >
+              <span className={collapsed ? styles.chevronRight : styles.chevronDown} />
+            </button>
+            <span className={styles.providerLabel} style={{ color: getProviderColor(provider) }}>
+              {provider}
+            </span>
+            <span className={styles.itemCount}>{sources.length}</span>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+interface SourceColumnProps {
+  providerNodes: ProviderNode[];
+  collapsedProviders: Set<string>;
+  sourceRefs: RefObject<Map<string, HTMLDivElement>>;
+  getProviderColor: (provider: string) => string;
+  draggedSource: SourceNode | null;
+  dropTargetSource: string | null;
+  draggable: boolean;
+  onDragStart: (e: DragEvent, source: SourceNode) => void;
+  onDragEnd: () => void;
+  onDragOver: (e: DragEvent, source: SourceNode) => void;
+  onDragLeave: () => void;
+  onDrop: (e: DragEvent, source: SourceNode) => void;
+  onContextMenu: (e: ReactMouseEvent, type: 'source' | 'background', data?: string) => void;
+  label: string;
+}
+
+export function SourceColumn({
+  providerNodes,
+  collapsedProviders,
+  sourceRefs,
+  getProviderColor,
+  draggedSource,
+  dropTargetSource,
+  draggable,
+  onDragStart,
+  onDragEnd,
+  onDragOver,
+  onDragLeave,
+  onDrop,
+  onContextMenu,
+  label
+}: SourceColumnProps) {
+  return (
+    <div
+      className={`${styles.column} ${styles.sources}`}
+      onContextMenu={(e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        onContextMenu(e, 'background');
+      }}
+    >
+      <div className={styles.columnHeader}>{label}</div>
+      {providerNodes.flatMap(({ provider, sources }) => {
+        if (collapsedProviders.has(provider)) return [];
+        return sources.map((source) => (
+          <div
+            key={source.id}
+            ref={(el) => {
+              if (el) sourceRefs.current?.set(source.id, el);
+              else sourceRefs.current?.delete(source.id);
+            }}
+            className={`${styles.item} ${styles.sourceItem} ${
+              draggedSource?.id === source.id ? styles.dragging : ''
+            } ${dropTargetSource === source.id ? styles.dropTarget : ''}`}
+            draggable={draggable}
+            onDragStart={(e) => onDragStart(e, source)}
+            onDragEnd={onDragEnd}
+            onDragOver={(e) => onDragOver(e, source)}
+            onDragLeave={onDragLeave}
+            onDrop={(e) => onDrop(e, source)}
+            onContextMenu={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              onContextMenu(e, 'source', source.id);
+            }}
+          >
+            <span className={styles.itemName} title={source.name}>
+              {source.name}
+            </span>
+            <div
+              className={styles.dot}
+              style={{
+                background: getProviderColor(source.provider),
+                opacity: source.aliases.length > 0 ? 1 : 0.3
+              }}
+            />
+          </div>
+        ));
+      })}
+    </div>
+  );
+}
+
+interface AliasColumnProps {
+  aliasNodes: AliasNode[];
+  aliasRefs: RefObject<Map<string, HTMLDivElement>>;
+  dropTargetAlias: string | null;
+  draggedAlias: string | null;
+  draggable: boolean;
+  onDragStart: (e: DragEvent, alias: string) => void;
+  onDragEnd: () => void;
+  onDragOver: (e: DragEvent, alias: string) => void;
+  onDragLeave: () => void;
+  onDrop: (e: DragEvent, alias: string) => void;
+  onContextMenu: (e: ReactMouseEvent, type: 'alias' | 'background', data?: string) => void;
+  label: string;
+}
+
+export function AliasColumn({
+  aliasNodes,
+  aliasRefs,
+  dropTargetAlias,
+  draggedAlias,
+  draggable,
+  onDragStart,
+  onDragEnd,
+  onDragOver,
+  onDragLeave,
+  onDrop,
+  onContextMenu,
+  label
+}: AliasColumnProps) {
+  return (
+    <div
+      className={`${styles.column} ${styles.aliases}`}
+      onContextMenu={(e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        onContextMenu(e, 'background');
+      }}
+    >
+      <div className={styles.columnHeader}>{label}</div>
+      {aliasNodes.map((node) => (
+        <div
+          key={node.id}
+          ref={(el) => {
+            if (el) aliasRefs.current?.set(node.id, el);
+            else aliasRefs.current?.delete(node.id);
+          }}
+          className={`${styles.item} ${styles.aliasItem} ${
+            dropTargetAlias === node.alias ? styles.dropTarget : ''
+          } ${draggedAlias === node.alias ? styles.dragging : ''}`}
+          draggable={draggable}
+          onDragStart={(e) => onDragStart(e, node.alias)}
+          onDragEnd={onDragEnd}
+          onDragOver={(e) => onDragOver(e, node.alias)}
+          onDragLeave={onDragLeave}
+          onDrop={(e) => onDrop(e, node.alias)}
+          onContextMenu={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            onContextMenu(e, 'alias', node.alias);
+          }}
+        >
+          <div className={`${styles.dot} ${styles.dotLeft}`} />
+          <span className={styles.itemName} title={node.alias}>
+            {node.alias}
+          </span>
+          <span className={styles.itemCount}>{node.sources.length}</span>
+        </div>
+      ))}
+    </div>
+  );
+}

src/components/modelAlias/ModelMappingDiagramContextMenu.tsx

@@ -0,0 +1,111 @@
+import { useEffect, useRef } from 'react';
+import { createPortal } from 'react-dom';
+import type { TFunction } from 'i18next';
+import type { ContextMenuState } from './ModelMappingDiagramTypes';
+import styles from './ModelMappingDiagram.module.scss';
+
+interface DiagramContextMenuProps {
+  contextMenu: ContextMenuState | null;
+  t: TFunction;
+  onRequestClose: () => void;
+  onAddAlias: () => void;
+  onRenameAlias: (alias: string) => void;
+  onOpenAliasSettings: (alias: string) => void;
+  onDeleteAlias: (alias: string) => void;
+  onEditProvider: (provider: string) => void;
+  onDeleteProvider: (provider: string) => void;
+  onOpenSourceSettings: (sourceId: string) => void;
+}
+
+export function DiagramContextMenu({
+  contextMenu,
+  t,
+  onRequestClose,
+  onAddAlias,
+  onRenameAlias,
+  onOpenAliasSettings,
+  onDeleteAlias,
+  onEditProvider,
+  onDeleteProvider,
+  onOpenSourceSettings
+}: DiagramContextMenuProps) {
+  const menuRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    if (!contextMenu) return;
+    const handleClick = (event: globalThis.MouseEvent) => {
+      if (!menuRef.current?.contains(event.target as Node)) {
+        onRequestClose();
+      }
+    };
+    document.addEventListener('mousedown', handleClick);
+    return () => document.removeEventListener('mousedown', handleClick);
+  }, [contextMenu, onRequestClose]);
+
+  if (!contextMenu) return null;
+
+  const { type, data } = contextMenu;
+
+  const renderBackground = () => (
+    <div className={styles.menuItem} onClick={onAddAlias}>
+      <span>{t('oauth_model_alias.diagram_add_alias')}</span>
+    </div>
+  );
+
+  const renderAlias = () => {
+    if (!data) return null;
+    return (
+      <>
+        <div className={styles.menuItem} onClick={() => onRenameAlias(data)}>
+          <span>{t('oauth_model_alias.diagram_rename')}</span>
+        </div>
+        <div className={styles.menuItem} onClick={() => onOpenAliasSettings(data)}>
+          <span>{t('oauth_model_alias.diagram_settings')}</span>
+        </div>
+        <div className={styles.menuDivider} />
+        <div className={`${styles.menuItem} ${styles.danger}`} onClick={() => onDeleteAlias(data)}>
+          <span>{t('oauth_model_alias.diagram_delete_alias')}</span>
+        </div>
+      </>
+    );
+  };
+
+  const renderProvider = () => {
+    if (!data) return null;
+    return (
+      <>
+        <div className={styles.menuItem} onClick={() => onEditProvider(data)}>
+          <span>{t('common.edit')}</span>
+        </div>
+        <div className={styles.menuDivider} />
+        <div className={`${styles.menuItem} ${styles.danger}`} onClick={() => onDeleteProvider(data)}>
+          <span>{t('oauth_model_alias.delete')}</span>
+        </div>
+      </>
+    );
+  };
+
+  const renderSource = () => {
+    if (!data) return null;
+    return (
+      <div className={styles.menuItem} onClick={() => onOpenSourceSettings(data)}>
+        <span>{t('oauth_model_alias.diagram_settings')}</span>
+      </div>
+    );
+  };
+
+  return createPortal(
+    <div
+      ref={menuRef}
+      className={styles.contextMenu}
+      style={{ top: contextMenu.y, left: contextMenu.x }}
+      onClick={(e) => e.stopPropagation()}
+    >
+      {type === 'background' && renderBackground()}
+      {type === 'alias' && renderAlias()}
+      {type === 'provider' && renderProvider()}
+      {type === 'source' && renderSource()}
+    </div>,
+    document.body
+  );
+}

src/components/modelAlias/ModelMappingDiagramModals.tsx

@@ -0,0 +1,267 @@
+import type { KeyboardEvent } from 'react';
+import type { TFunction } from 'i18next';
+import { Modal } from '@/components/ui/Modal';
+import { Input } from '@/components/ui/Input';
+import { Button } from '@/components/ui/Button';
+import { ToggleSwitch } from '@/components/ui/ToggleSwitch';
+import { IconTrash2 } from '@/components/ui/icons';
+import type { AliasNode, SourceNode } from './ModelMappingDiagramTypes';
+import styles from './ModelMappingDiagram.module.scss';
+
+interface RenameAliasModalProps {
+  open: boolean;
+  t: TFunction;
+  value: string;
+  error: string;
+  onChange: (value: string) => void;
+  onClose: () => void;
+  onSubmit: () => void;
+}
+
+export function RenameAliasModal({
+  open,
+  t,
+  value,
+  error,
+  onChange,
+  onClose,
+  onSubmit
+}: RenameAliasModalProps) {
+  return (
+    <Modal
+      open={open}
+      onClose={onClose}
+      title={t('oauth_model_alias.diagram_rename_alias_title')}
+      width={400}
+      footer={
+        <>
+          <Button variant="secondary" onClick={onClose}>
+            {t('common.cancel')}
+          </Button>
+          <Button onClick={onSubmit}>{t('oauth_model_alias.diagram_rename_btn')}</Button>
+        </>
+      }
+    >
+      <Input
+        label={t('oauth_model_alias.diagram_rename_alias_label')}
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {
+          if (e.key === 'Enter') onSubmit();
+        }}
+        error={error}
+        placeholder={t('oauth_model_alias.diagram_rename_placeholder')}
+        autoFocus
+      />
+    </Modal>
+  );
+}
+
+interface AddAliasModalProps {
+  open: boolean;
+  t: TFunction;
+  value: string;
+  error: string;
+  onChange: (value: string) => void;
+  onClose: () => void;
+  onSubmit: () => void;
+}
+
+export function AddAliasModal({
+  open,
+  t,
+  value,
+  error,
+  onChange,
+  onClose,
+  onSubmit
+}: AddAliasModalProps) {
+  return (
+    <Modal
+      open={open}
+      onClose={onClose}
+      title={t('oauth_model_alias.diagram_add_alias_title')}
+      width={400}
+      footer={
+        <>
+          <Button variant="secondary" onClick={onClose}>
+            {t('common.cancel')}
+          </Button>
+          <Button onClick={onSubmit}>{t('oauth_model_alias.diagram_add_btn')}</Button>
+        </>
+      }
+    >
+      <Input
+        label={t('oauth_model_alias.diagram_add_alias_label')}
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {
+          if (e.key === 'Enter') onSubmit();
+        }}
+        error={error}
+        placeholder={t('oauth_model_alias.diagram_add_placeholder')}
+        autoFocus
+      />
+    </Modal>
+  );
+}
+
+interface SettingsAliasModalProps {
+  open: boolean;
+  t: TFunction;
+  alias: string | null;
+  aliasNodes: AliasNode[];
+  onClose: () => void;
+  onToggleFork: (provider: string, sourceModel: string, alias: string, fork: boolean) => void;
+  onUnlink: (provider: string, sourceModel: string, alias: string) => void;
+}
+
+export function SettingsAliasModal({
+  open,
+  t,
+  alias,
+  aliasNodes,
+  onClose,
+  onToggleFork,
+  onUnlink
+}: SettingsAliasModalProps) {
+  return (
+    <Modal
+      open={open}
+      onClose={onClose}
+      title={t('oauth_model_alias.diagram_settings_title', { alias: alias ?? '' })}
+      width={720}
+      footer={
+        <Button variant="secondary" onClick={onClose}>
+          {t('common.close')}
+        </Button>
+      }
+    >
+      {alias ? (
+        (() => {
+          const node = aliasNodes.find((n) => n.alias === alias);
+          if (!node || node.sources.length === 0) {
+            return <div className={styles.settingsEmpty}>{t('oauth_model_alias.diagram_settings_empty')}</div>;
+          }
+          return (
+            <div className={styles.settingsList}>
+              {node.sources.map((source) => {
+                const entry = source.aliases.find((item) => item.alias === alias);
+                const forkEnabled = entry?.fork === true;
+                return (
+                  <div key={source.id} className={styles.settingsRow}>
+                    <div className={styles.settingsNames}>
+                      <span className={styles.settingsSource}>{source.name}</span>
+                      <span className={styles.settingsArrow}>→</span>
+                      <span className={styles.settingsAlias}>{alias}</span>
+                    </div>
+                    <div className={styles.settingsActions}>
+                      <span className={styles.settingsLabel}>
+                        {t('oauth_model_alias.alias_fork_label')}
+                      </span>
+                      <ToggleSwitch
+                        checked={forkEnabled}
+                        onChange={(value) => onToggleFork(source.provider, source.name, alias, value)}
+                        ariaLabel={t('oauth_model_alias.alias_fork_label')}
+                      />
+                      <button
+                        type="button"
+                        className={styles.settingsDelete}
+                        onClick={() => onUnlink(source.provider, source.name, alias)}
+                        aria-label={t('oauth_model_alias.diagram_delete_link', {
+                          provider: source.provider,
+                          name: source.name
+                        })}
+                        title={t('oauth_model_alias.diagram_delete_link', {
+                          provider: source.provider,
+                          name: source.name
+                        })}
+                      >
+                        <IconTrash2 size={14} />
+                      </button>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          );
+        })()
+      ) : null}
+    </Modal>
+  );
+}
+
+interface SettingsSourceModalProps {
+  open: boolean;
+  t: TFunction;
+  source: SourceNode | null;
+  onClose: () => void;
+  onToggleFork: (provider: string, sourceModel: string, alias: string, fork: boolean) => void;
+  onUnlink: (provider: string, sourceModel: string, alias: string) => void;
+}
+
+export function SettingsSourceModal({
+  open,
+  t,
+  source,
+  onClose,
+  onToggleFork,
+  onUnlink
+}: SettingsSourceModalProps) {
+  return (
+    <Modal
+      open={open}
+      onClose={onClose}
+      title={t('oauth_model_alias.diagram_settings_source_title')}
+      width={720}
+      footer={
+        <Button variant="secondary" onClick={onClose}>
+          {t('common.close')}
+        </Button>
+      }
+    >
+      {source ? (
+        source.aliases.length === 0 ? (
+          <div className={styles.settingsEmpty}>{t('oauth_model_alias.diagram_settings_empty')}</div>
+        ) : (
+          <div className={styles.settingsList}>
+            {source.aliases.map((entry) => (
+              <div key={`${source.id}-${entry.alias}`} className={styles.settingsRow}>
+                <div className={styles.settingsNames}>
+                  <span className={styles.settingsSource}>{source.name}</span>
+                  <span className={styles.settingsArrow}>→</span>
+                  <span className={styles.settingsAlias}>{entry.alias}</span>
+                </div>
+                <div className={styles.settingsActions}>
+                  <span className={styles.settingsLabel}>
+                    {t('oauth_model_alias.alias_fork_label')}
+                  </span>
+                  <ToggleSwitch
+                    checked={entry.fork === true}
+                    onChange={(value) => onToggleFork(source.provider, source.name, entry.alias, value)}
+                    ariaLabel={t('oauth_model_alias.alias_fork_label')}
+                  />
+                  <button
+                    type="button"
+                    className={styles.settingsDelete}
+                    onClick={() => onUnlink(source.provider, source.name, entry.alias)}
+                    aria-label={t('oauth_model_alias.diagram_delete_link', {
+                      provider: source.provider,
+                      name: source.name
+                    })}
+                    title={t('oauth_model_alias.diagram_delete_link', {
+                      provider: source.provider,
+                      name: source.name
+                    })}
+                  >
+                    <IconTrash2 size={14} />
+                  </button>
+                </div>
+              </div>
+            ))}
+          </div>
+        )
+      ) : null}
+    </Modal>
+  );
+}

src/components/modelAlias/ModelMappingDiagramTypes.ts

@@ -0,0 +1,33 @@
+export interface AuthFileModelItem {
+  id: string;
+  display_name?: string;
+  type?: string;
+  owned_by?: string;
+}
+
+export interface SourceNode {
+  id: string; // unique: provider::name
+  provider: string;
+  name: string;
+  aliases: { alias: string; fork: boolean }[]; // all aliases this source maps to
+}
+
+export interface AliasNode {
+  id: string; // alias
+  alias: string;
+  sources: SourceNode[];
+}
+
+export interface ProviderNode {
+  provider: string;
+  sources: SourceNode[];
+}
+
+export interface ContextMenuState {
+  x: number;
+  y: number;
+  type: 'alias' | 'background' | 'provider' | 'source';
+  data?: string;
+}
+
+export type DiagramLine = { path: string; color: string; id: string };

src/components/modelAlias/index.ts

@@ -0,0 +1,2 @@
+export { ModelMappingDiagram } from './ModelMappingDiagram';
+export type { ModelMappingDiagramProps, ModelMappingDiagramRef } from './ModelMappingDiagram';

src/components/ui/Modal.tsx

@@ -8,6 +8,7 @@ interface ModalProps {
   onClose: () => void;
   footer?: ReactNode;
   width?: number | string;
+  className?: string;
   closeDisabled?: boolean;
 }
 
@@ -39,6 +40,7 @@ export function Modal({
   onClose,
   footer,
   width = 520,
+  className,
   closeDisabled = false,
   children
 }: PropsWithChildren<ModalProps>) {
@@ -110,7 +112,7 @@ export function Modal({
   if (!open && !isVisible) return null;
 
   const overlayClass = `modal-overlay ${isClosing ? 'modal-overlay-closing' : 'modal-overlay-entering'}`;
-  const modalClass = `modal ${isClosing ? 'modal-closing' : 'modal-entering'}`;
+  const modalClass = `modal ${isClosing ? 'modal-closing' : 'modal-entering'}${className ? ` ${className}` : ''}`;
 
   const modalContent = (
     <div className={overlayClass}>

src/i18n/locales/en.json

@@ -544,11 +544,42 @@
     "save_failed": "Failed to update model aliases",
     "delete": "Delete Provider",
     "delete_confirm": "Delete model aliases for {{provider}}?",
+    "delete_link_title": "Unlink mapping",
+    "delete_link_confirm": "Unlink mapping from <code>{{sourceModel}}</code> ({{provider}}) to alias <code>{{alias}}</code>?",
+    "delete_alias_title": "Delete Alias",
+    "delete_alias_confirm": "Delete alias <code>{{alias}}</code> and unmap all associated models?",
     "delete_success": "Model aliases removed",
     "delete_failed": "Failed to delete model aliases",
     "no_models": "No model aliases",
     "model_count": "{{count}} aliases",
     "list_empty_all": "No model aliases yet—use “Add Alias” to create one.",
+    "chart_title": "All mappings overview",
+    "diagram_providers": "Providers",
+    "diagram_source_models": "Source Models",
+    "diagram_aliases": "Aliases",
+    "diagram_expand": "Expand",
+    "diagram_collapse": "Collapse",
+    "diagram_add_alias": "Add Alias",
+    "diagram_rename": "Rename",
+    "diagram_rename_alias_title": "Rename alias",
+    "diagram_rename_alias_label": "New alias name",
+    "diagram_rename_placeholder": "Enter alias name...",
+    "diagram_delete_link": "Unlink from {{provider}} / {{name}}",
+    "diagram_delete_alias": "Delete alias",
+    "diagram_please_enter_alias": "Please enter an alias name.",
+    "diagram_alias_exists": "This alias already exists.",
+    "diagram_add_alias_title": "Add alias",
+    "diagram_add_alias_label": "Alias name",
+    "diagram_add_placeholder": "Enter new alias name...",
+    "diagram_rename_btn": "Rename",
+    "diagram_add_btn": "Add",
+    "diagram_settings": "Settings",
+    "diagram_settings_title": "Alias settings — {{alias}}",
+    "diagram_settings_source_title": "Source model settings",
+    "diagram_settings_empty": "No mappings for this alias yet.",
+    "view_mode": "View mode",
+    "view_mode_diagram": "Diagram",
+    "view_mode_list": "List",
     "provider_required": "Please enter a provider first",
     "upgrade_required": "This feature requires a newer CLI Proxy API (CPA) version. Please upgrade.",
     "upgrade_required_title": "Please upgrade CLI Proxy API",

src/i18n/locales/zh-CN.json

@@ -544,11 +544,42 @@
     "save_failed": "更新模型别名失败",
     "delete": "删除提供商",
     "delete_confirm": "确定要删除 {{provider}} 的模型别名吗？",
+    "delete_link_title": "取消链接",
+    "delete_link_confirm": "确定取消 <code>{{sourceModel}}</code>（{{provider}}）到别名 <code>{{alias}}</code> 的映射？",
+    "delete_alias_title": "删除别名",
+    "delete_alias_confirm": "确定删除别名 <code>{{alias}}</code> 并取消所有关联模型的映射？",
     "delete_success": "已删除该提供商的模型别名",
     "delete_failed": "删除模型别名失败",
     "no_models": "未配置模型别名",
     "model_count": "{{count}} 条别名",
     "list_empty_all": "暂无任何提供商的模型别名，点击“新增别名”创建。",
+    "chart_title": "全部映射概览",
+    "diagram_providers": "提供商",
+    "diagram_source_models": "源模型",
+    "diagram_aliases": "别名",
+    "diagram_expand": "展开",
+    "diagram_collapse": "收起",
+    "diagram_add_alias": "添加别名",
+    "diagram_rename": "重命名",
+    "diagram_rename_alias_title": "重命名别名",
+    "diagram_rename_alias_label": "新别名名称",
+    "diagram_rename_placeholder": "输入别名名称...",
+    "diagram_delete_link": "取消链接 {{provider}} / {{name}}",
+    "diagram_delete_alias": "删除别名",
+    "diagram_please_enter_alias": "请输入别名名称。",
+    "diagram_alias_exists": "该别名已存在。",
+    "diagram_add_alias_title": "添加别名",
+    "diagram_add_alias_label": "别名名称",
+    "diagram_add_placeholder": "输入新别名名称...",
+    "diagram_rename_btn": "重命名",
+    "diagram_add_btn": "添加",
+    "diagram_settings": "设置",
+    "diagram_settings_title": "别名设置 — {{alias}}",
+    "diagram_settings_source_title": "源模型设置",
+    "diagram_settings_empty": "该别名暂无映射。",
+    "view_mode": "视图模式",
+    "view_mode_diagram": "Diagram",
+    "view_mode_list": "List",
     "provider_required": "请先填写提供商名称",
     "upgrade_required": "当前 CPA 版本不支持模型别名功能，请升级 CPA 版本",
     "upgrade_required_title": "需要升级 CPA 版本",

src/pages/AuthFilesPage.module.scss

@@ -843,6 +843,49 @@
   }
 }
 
+// OAuth 模型别名 - 映射概览
+.aliasChartSection {
+  margin-bottom: $spacing-lg;
+  padding-bottom: $spacing-lg;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.aliasChartHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: $spacing-sm;
+  margin-bottom: $spacing-sm;
+}
+
+.aliasChartTitle {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-secondary);
+}
+
+.aliasChart {
+  width: 100%;
+  min-height: 120px;
+}
+
+.cardExtraButtons {
+  display: flex;
+  gap: $spacing-sm;
+  align-items: center;
+}
+
+.viewModeSwitch {
+  display: inline-flex;
+  align-items: center;
+  gap: $spacing-xs;
+  padding: 2px;
+  border-radius: $radius-md;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+}
+
 // OAuth 模型映射表单
 .mappingRow {
   display: grid;

src/pages/AuthFilesPage.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useRef, useState, useCallback } from 'react';
-import { useTranslation } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import { useInterval } from '@/hooks/useInterval';
 import { useHeaderRefresh } from '@/hooks/useHeaderRefresh';
@@ -10,9 +10,11 @@ import { Input } from '@/components/ui/Input';
 import { Modal } from '@/components/ui/Modal';
 import { EmptyState } from '@/components/ui/EmptyState';
 import { ToggleSwitch } from '@/components/ui/ToggleSwitch';
+import { ModelMappingDiagram, type ModelMappingDiagramRef } from '@/components/modelAlias';
 import {
   IconBot,
   IconCode,
+  IconChevronUp,
   IconDownload,
   IconInfo,
   IconTrash2,
@@ -230,6 +232,10 @@ export function AuthFilesPage() {
   // OAuth 模型映射相关
   const [modelAlias, setModelAlias] = useState<Record<string, OAuthModelAliasEntry[]>>({});
   const [modelAliasError, setModelAliasError] = useState<'unsupported' | null>(null);
+  const [allProviderModels, setAllProviderModels] = useState<Record<string, AuthFileModelItem[]>>(
+    {}
+  );
+  const [viewMode, setViewMode] = useState<'diagram' | 'list'>('list');
 
   const [prefixProxyEditor, setPrefixProxyEditor] = useState<PrefixProxyEditorState | null>(null);
 
@@ -237,11 +243,74 @@ export function AuthFilesPage() {
   const loadingKeyStatsRef = useRef(false);
   const excludedUnsupportedRef = useRef(false);
   const mappingsUnsupportedRef = useRef(false);
+  const diagramRef = useRef<ModelMappingDiagramRef | null>(null);
 
   const normalizeProviderKey = (value: string) => value.trim().toLowerCase();
 
   const disableControls = connectionStatus !== 'connected';
 
+  const providerList = useMemo(() => {
+    const providers = new Set<string>();
+
+    Object.keys(modelAlias).forEach((provider) => {
+      const key = provider.trim().toLowerCase();
+      if (key) providers.add(key);
+    });
+
+    files.forEach((file) => {
+      if (typeof file.type === 'string') {
+        const key = file.type.trim().toLowerCase();
+        if (key) providers.add(key);
+      }
+      if (typeof file.provider === 'string') {
+        const key = file.provider.trim().toLowerCase();
+        if (key) providers.add(key);
+      }
+    });
+    return Array.from(providers);
+  }, [files, modelAlias]);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    const loadAllModels = async () => {
+      if (providerList.length === 0) {
+        if (!cancelled) setAllProviderModels({});
+        return;
+      }
+
+      const results = await Promise.all(
+        providerList.map(async (provider) => {
+          try {
+            const models = await authFilesApi.getModelDefinitions(provider);
+            return { provider, models };
+          } catch {
+            return { provider, models: [] };
+          }
+        })
+      );
+
+      if (cancelled) return;
+
+      const nextModels: Record<string, AuthFileModelItem[]> = {};
+      results.forEach(({ provider, models }) => {
+        if (models.length > 0) {
+          nextModels[provider] = models;
+        }
+      });
+
+      setAllProviderModels(nextModels);
+    };
+
+    void loadAllModels();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [providerList]);
+
+
+
   useEffect(() => {
     const persisted = readAuthFilesUiState();
     if (!persisted) return;
@@ -603,7 +672,9 @@ export function AuthFilesPage() {
             setFiles((prev) => prev.filter((file) => isRuntimeOnlyAuthFile(file)));
           } else {
             // 删除筛选类型的文件
-            const filesToDelete = files.filter((f) => f.type === filter && !isRuntimeOnlyAuthFile(f));
+            const filesToDelete = files.filter(
+              (f) => f.type === filter && !isRuntimeOnlyAuthFile(f)
+            );
 
             if (filesToDelete.length === 0) {
               showNotification(t('auth_files.delete_filtered_none', { type: typeLabel }), 'info');
@@ -991,6 +1062,205 @@ export function AuthFilesPage() {
     });
   };
 
+  const handleMappingUpdate = async (provider: string, sourceModel: string, newAlias: string) => {
+    if (!provider || !sourceModel || !newAlias) return;
+    const normalizedProvider = normalizeProviderKey(provider);
+    if (!normalizedProvider) return;
+
+    const providerKey = Object.keys(modelAlias).find(
+      (key) => normalizeProviderKey(key) === normalizedProvider
+    );
+    const currentMappings = (providerKey ? modelAlias[providerKey] : null) ?? [];
+
+    const nameTrim = sourceModel.trim();
+    const aliasTrim = newAlias.trim();
+    const nameKey = nameTrim.toLowerCase();
+    const aliasKey = aliasTrim.toLowerCase();
+
+    if (
+      currentMappings.some(
+        (m) =>
+          (m.name ?? '').trim().toLowerCase() === nameKey &&
+          (m.alias ?? '').trim().toLowerCase() === aliasKey
+      )
+    ) {
+      return;
+    }
+
+    const nextMappings: OAuthModelAliasEntry[] = [
+      ...currentMappings,
+      { name: nameTrim, alias: aliasTrim, fork: true },
+    ];
+
+    try {
+      await authFilesApi.saveOauthModelAlias(normalizedProvider, nextMappings);
+      await loadModelAlias();
+      showNotification(t('oauth_model_alias.save_success'), 'success');
+    } catch (err: unknown) {
+      const errorMessage = err instanceof Error ? err.message : '';
+      showNotification(`${t('oauth_model_alias.save_failed')}: ${errorMessage}`, 'error');
+    }
+  };
+
+  const handleDeleteLink = (provider: string, sourceModel: string, alias: string) => {
+    const nameTrim = sourceModel.trim();
+    const aliasTrim = alias.trim();
+    if (!provider || !nameTrim || !aliasTrim) return;
+
+    showConfirmation({
+      title: t('oauth_model_alias.delete_link_title', { defaultValue: 'Unlink mapping' }),
+      message: (
+        <Trans
+          i18nKey="oauth_model_alias.delete_link_confirm"
+          values={{ provider, sourceModel: nameTrim, alias: aliasTrim }}
+          components={{ code: <code /> }}
+        />
+      ),
+      variant: 'danger',
+      confirmText: t('common.confirm'),
+      onConfirm: async () => {
+        const normalizedProvider = normalizeProviderKey(provider);
+        const providerKey = Object.keys(modelAlias).find(
+          (key) => normalizeProviderKey(key) === normalizedProvider
+        );
+        const currentMappings = (providerKey ? modelAlias[providerKey] : null) ?? [];
+        const nameKey = nameTrim.toLowerCase();
+        const aliasKey = aliasTrim.toLowerCase();
+        const nextMappings = currentMappings.filter(
+          (m) =>
+            (m.name ?? '').trim().toLowerCase() !== nameKey ||
+            (m.alias ?? '').trim().toLowerCase() !== aliasKey
+        );
+        if (nextMappings.length === currentMappings.length) return;
+
+        try {
+          if (nextMappings.length === 0) {
+            await authFilesApi.deleteOauthModelAlias(normalizedProvider);
+          } else {
+            await authFilesApi.saveOauthModelAlias(normalizedProvider, nextMappings);
+          }
+          await loadModelAlias();
+          showNotification(t('oauth_model_alias.save_success'), 'success');
+        } catch (err: unknown) {
+          const errorMessage = err instanceof Error ? err.message : '';
+          showNotification(`${t('oauth_model_alias.save_failed')}: ${errorMessage}`, 'error');
+        }
+      },
+    });
+  };
+
+  const handleToggleFork = async (
+    provider: string,
+    sourceModel: string,
+    alias: string,
+    fork: boolean
+  ) => {
+    const normalizedProvider = normalizeProviderKey(provider);
+    if (!normalizedProvider) return;
+
+    const providerKey = Object.keys(modelAlias).find(
+      (key) => normalizeProviderKey(key) === normalizedProvider
+    );
+    const currentMappings = (providerKey ? modelAlias[providerKey] : null) ?? [];
+    const nameKey = sourceModel.trim().toLowerCase();
+    const aliasKey = alias.trim().toLowerCase();
+    let changed = false;
+
+    const nextMappings = currentMappings.map((m) => {
+      const mName = (m.name ?? '').trim().toLowerCase();
+      const mAlias = (m.alias ?? '').trim().toLowerCase();
+      if (mName === nameKey && mAlias === aliasKey) {
+        changed = true;
+        return fork ? { ...m, fork: true } : { name: m.name, alias: m.alias };
+      }
+      return m;
+    });
+
+    if (!changed) return;
+
+    try {
+      await authFilesApi.saveOauthModelAlias(normalizedProvider, nextMappings);
+      await loadModelAlias();
+      showNotification(t('oauth_model_alias.save_success'), 'success');
+    } catch (err: unknown) {
+      const errorMessage = err instanceof Error ? err.message : '';
+      showNotification(`${t('oauth_model_alias.save_failed')}: ${errorMessage}`, 'error');
+    }
+  };
+
+  const handleRenameAlias = async (oldAlias: string, newAlias: string) => {
+    const oldTrim = oldAlias.trim();
+    const newTrim = newAlias.trim();
+    if (!oldTrim || !newTrim || oldTrim === newTrim) return;
+
+    const oldKey = oldTrim.toLowerCase();
+    const providersToUpdate = Object.entries(modelAlias).filter(([_, mappings]) =>
+      mappings.some((m) => (m.alias ?? '').trim().toLowerCase() === oldKey)
+    );
+
+    if (providersToUpdate.length === 0) return;
+
+    try {
+      await Promise.all(
+        providersToUpdate.map(([provider, mappings]) => {
+          const nextMappings = mappings.map((m) =>
+            (m.alias ?? '').trim().toLowerCase() === oldKey ? { ...m, alias: newTrim } : m
+          );
+          return authFilesApi.saveOauthModelAlias(provider, nextMappings);
+        })
+      );
+      await loadModelAlias();
+      showNotification(t('oauth_model_alias.save_success'), 'success');
+    } catch (err: unknown) {
+      const errorMessage = err instanceof Error ? err.message : '';
+      showNotification(`${t('oauth_model_alias.save_failed')}: ${errorMessage}`, 'error');
+    }
+  };
+
+  const handleDeleteAlias = (aliasName: string) => {
+    const aliasTrim = aliasName.trim();
+    if (!aliasTrim) return;
+    const aliasKey = aliasTrim.toLowerCase();
+    const providersToUpdate = Object.entries(modelAlias).filter(([_, mappings]) =>
+      mappings.some((m) => (m.alias ?? '').trim().toLowerCase() === aliasKey)
+    );
+
+    if (providersToUpdate.length === 0) return;
+
+    showConfirmation({
+      title: t('oauth_model_alias.delete_alias_title', { defaultValue: 'Delete Alias' }),
+      message: (
+        <Trans
+          i18nKey="oauth_model_alias.delete_alias_confirm"
+          values={{ alias: aliasTrim }}
+          components={{ code: <code /> }}
+        />
+      ),
+      variant: 'danger',
+      confirmText: t('common.confirm'),
+      onConfirm: async () => {
+        try {
+          await Promise.all(
+            providersToUpdate.map(([provider, mappings]) => {
+              const nextMappings = mappings.filter(
+                (m) => (m.alias ?? '').trim().toLowerCase() !== aliasKey
+              );
+              if (nextMappings.length === 0) {
+                return authFilesApi.deleteOauthModelAlias(provider);
+              }
+              return authFilesApi.saveOauthModelAlias(provider, nextMappings);
+            })
+          );
+          await loadModelAlias();
+          showNotification(t('oauth_model_alias.delete_success'), 'success');
+        } catch (err: unknown) {
+          const errorMessage = err instanceof Error ? err.message : '';
+          showNotification(`${t('oauth_model_alias.delete_failed')}: ${errorMessage}`, 'error');
+        }
+      },
+    });
+  };
+
   // 渲染标签筛选器
   const renderFilterTags = () => (
     <div className={styles.filterTags}>
@@ -1084,22 +1354,22 @@ export function AuthFilesPage() {
   };
 
   // 渲染单个认证文件卡片
-	  const renderFileCard = (item: AuthFileItem) => {
+  const renderFileCard = (item: AuthFileItem) => {
-	    const fileStats = resolveAuthFileStats(item, keyStats);
+    const fileStats = resolveAuthFileStats(item, keyStats);
-	    const isRuntimeOnly = isRuntimeOnlyAuthFile(item);
+    const isRuntimeOnly = isRuntimeOnlyAuthFile(item);
-	    const isAistudio = (item.type || '').toLowerCase() === 'aistudio';
+    const isAistudio = (item.type || '').toLowerCase() === 'aistudio';
-	    const showModelsButton = !isRuntimeOnly || isAistudio;
+    const showModelsButton = !isRuntimeOnly || isAistudio;
-	    const typeColor = getTypeColor(item.type || 'unknown');
+    const typeColor = getTypeColor(item.type || 'unknown');
 
-	    return (
+    return (
-	      <div
+      <div
-	        key={item.name}
+        key={item.name}
-	        className={`${styles.fileCard} ${item.disabled ? styles.fileCardDisabled : ''}`}
+        className={`${styles.fileCard} ${item.disabled ? styles.fileCardDisabled : ''}`}
-	      >
+      >
-	        <div className={styles.cardHeader}>
+        <div className={styles.cardHeader}>
-	          <span
+          <span
-	            className={styles.typeBadge}
+            className={styles.typeBadge}
-	            style={{
+            style={{
               backgroundColor: typeColor.bg,
               color: typeColor.text,
               ...(typeColor.border ? { border: typeColor.border } : {}),
@@ -1377,7 +1647,11 @@ export function AuthFilesPage() {
                   </div>
                 </div>
                 <div className={styles.excludedActions}>
-                  <Button variant="secondary" size="sm" onClick={() => openExcludedEditor(provider)}>
+                  <Button
+                    variant="secondary"
+                    size="sm"
+                    onClick={() => openExcludedEditor(provider)}
+                  >
                     {t('common.edit')}
                   </Button>
                   <Button variant="danger" size="sm" onClick={() => deleteExcluded(provider)}>
@@ -1394,13 +1668,33 @@ export function AuthFilesPage() {
       <Card
         title={t('oauth_model_alias.title')}
         extra={
-          <Button
+          <div className={styles.cardExtraButtons}>
-            size="sm"
+            <div className={styles.viewModeSwitch}>
-            onClick={() => openModelAliasEditor()}
+              <Button
-            disabled={disableControls || modelAliasError === 'unsupported'}
+                variant={viewMode === 'list' ? 'secondary' : 'ghost'}
-          >
+                size="sm"
-            {t('oauth_model_alias.add')}
+                onClick={() => setViewMode('list')}
-          </Button>
+                disabled={disableControls || modelAliasError === 'unsupported'}
+              >
+                {t('oauth_model_alias.view_mode_list')}
+              </Button>
+              <Button
+                variant={viewMode === 'diagram' ? 'secondary' : 'ghost'}
+                size="sm"
+                onClick={() => setViewMode('diagram')}
+                disabled={disableControls || modelAliasError === 'unsupported'}
+              >
+                {t('oauth_model_alias.view_mode_diagram')}
+              </Button>
+            </div>
+            <Button
+              size="sm"
+              onClick={() => openModelAliasEditor()}
+              disabled={disableControls || modelAliasError === 'unsupported'}
+            >
+              {t('oauth_model_alias.add')}
+            </Button>
+          </div>
         }
       >
         {modelAliasError === 'unsupported' ? (
@@ -1408,6 +1702,39 @@ export function AuthFilesPage() {
             title={t('oauth_model_alias.upgrade_required_title')}
             description={t('oauth_model_alias.upgrade_required_desc')}
           />
+        ) : viewMode === 'diagram' ? (
+          Object.keys(modelAlias).length === 0 ? (
+            <EmptyState title={t('oauth_model_alias.list_empty_all')} />
+          ) : (
+            <div className={styles.aliasChartSection}>
+              <div className={styles.aliasChartHeader}>
+                <h4 className={styles.aliasChartTitle}>{t('oauth_model_alias.chart_title')}</h4>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => diagramRef.current?.collapseAll()}
+                  disabled={disableControls || modelAliasError === 'unsupported'}
+                  title={t('oauth_model_alias.diagram_collapse')}
+                  aria-label={t('oauth_model_alias.diagram_collapse')}
+                >
+                  <IconChevronUp size={16} />
+                </Button>
+              </div>
+              <ModelMappingDiagram
+                ref={diagramRef}
+                modelAlias={modelAlias}
+                allProviderModels={allProviderModels}
+                onUpdate={handleMappingUpdate}
+                onDeleteLink={handleDeleteLink}
+                onToggleFork={handleToggleFork}
+                onRenameAlias={handleRenameAlias}
+                onDeleteAlias={handleDeleteAlias}
+                onEditProvider={openModelAliasEditor}
+                onDeleteProvider={deleteModelAlias}
+                className={styles.aliasChart}
+              />
+            </div>
+          )
         ) : Object.keys(modelAlias).length === 0 ? (
           <EmptyState title={t('oauth_model_alias.list_empty_all')} />
         ) : (
@@ -1625,7 +1952,6 @@ export function AuthFilesPage() {
           </div>
         )}
       </Modal>
-
     </div>
   );
 }

src/stores/useNotificationStore.ts

@@ -4,13 +4,14 @@
  */
 
 import { create } from 'zustand';
+import type { ReactNode } from 'react';
 import type { Notification, NotificationType } from '@/types';
 import { generateId } from '@/utils/helpers';
 import { NOTIFICATION_DURATION_MS } from '@/utils/constants';
 
 interface ConfirmationOptions {
   title?: string;
-  message: string;
+  message: ReactNode;
   confirmText?: string;
   cancelText?: string;
   variant?: 'danger' | 'primary' | 'secondary';