Function Routing

frontend/dashboard/src/components/Routing.tsx:34–348

({ onRefresh }: Props)

}

export default function Routing({ onRefresh }: Props) {
  const [config, setConfig] = useState<RoutingConfigState | null>(null);
  const [mapping, setMapping] = useState<Mapping | null>(null);
  const [drafts, setDrafts] = useState<Record<string, DraftState>>({});
  const [busyKey, setBusyKey] = useState<string | null>(null);
  const [notice, setNotice] = useState<NoticeState | null>(null);
  const [editorMode, setEditorMode] = useState<ModeName>("auto");

  const load = useCallback(async () => {
    const [nextConfig, nextMapping] = await Promise.all([
      fetchRoutingConfig(),
      fetchMapping(),
    ]);
    if (nextConfig) {
      setConfig(nextConfig);
      setDrafts(buildDrafts(nextConfig));
      setEditorMode(nextConfig.default_mode as ModeName);
    }
    if (nextMapping) setMapping(nextMapping);
  }, []);

  useEffect(() => {
    load();
  }, [load]);

  useEffect(() => {
    if (!notice) return;
    const timeoutId = window.setTimeout(() => setNotice(null), 2400);
    return () => window.clearTimeout(timeoutId);
  }, [notice]);

  const defaultMode = config?.default_mode ?? "auto";
  const editable = config?.editable ?? true;
  const modeMeta = getModeMeta(defaultMode);
  const editModeMeta = getModeMeta(editorMode);
  const selectedModeRows = config?.modes?.[editorMode]?.tiers ?? {};
  const modelOptions = mapping?.pool.map((model) => model.id) ?? [];
  const modeSwitchBusy = busyKey?.startsWith("mode:") ?? false;

  function applyConfig(next: RoutingConfigState) {
    setConfig(next);
    setDrafts(buildDrafts(next));
  }

  function showNotice(text: string, tone: NoticeState["tone"] = "success") {
    setNotice({ text, tone });
  }

  async function handleModeChange(nextMode: ModeName) {
    if (!editable || nextMode === defaultMode) return;
    setBusyKey(`mode:${nextMode}`);
    setNotice(null);
    const next = await setDefaultRoutingMode(nextMode);
    if (next) {
      applyConfig(next);
      showNotice(`Default mode set to ${nextMode}.`);
      onRefresh?.();
    } else {