@raingor/pi-web-switch 0.4.3 → 0.5.0

package/src/components/providers/ProvidersModelsPage.tsx

@@ -6,7 +6,7 @@ import { Modal } from "@/components/ui/Modal";
 import { formatTokens, cn, formatCost, USD_TO_CNY } from "@/lib/utils";
 import { useCurrency } from "@/lib/currency";
 import type { ApiType, CustomProviderConfig, Model, Provider } from "@/types";
-import { searchCatalog, catalogToModel, guessModelMeta } from "@/data/model-catalog";
+import { MODEL_CATALOG, searchCatalog, catalogToModel, catalogEntryId, findCatalogEntry, guessModelMeta } from "@/data/model-catalog";
 import {
   Plus,
   Trash2,
@@ -27,8 +27,6 @@ import {
   Download,
   SquareCheck,
   Copy,
-  ChevronDown,
-  ChevronUp,
   Sparkles,
   Mic,
   Wand2,
@@ -73,6 +71,14 @@ function isValidHttpUrl(value: string): boolean {
 const DEFAULT_CONTEXT_WINDOW = 262144;
 const DEFAULT_MAX_TOKENS = 32768;
 
+// Last-resort output cap when neither the catalog nor the id heuristic knows one.
+function fallbackMaxTokens(contextWindow?: number): number {
+  if (!contextWindow) return DEFAULT_MAX_TOKENS;
+  if (contextWindow >= 1_000_000) return 65_536;
+  if (contextWindow >= 200_000) return 32_768;
+  return 8192;
+}
+
 // Sanitize to a config-safe id: letters (any script), digits and hyphens.
 // pi shows this key verbatim in its model picker badge, so keep it readable.
 function sanitizeProviderId(name: string): string {
@@ -241,32 +247,22 @@ export function ProvidersModelsPage() {
   const { allProviders, auth, modelsJson, removeCustomProvider } = useConfigStore();
   const hasKey = (p: Provider) => p.hasAuth || !!p.apiKey || !!auth?.[p.id]?.key;
 
-  const builtinProviders = allProviders
-    .filter((p) => p.type === "builtin")
-    .sort((a, b) => {
-      const aKey = hasKey(a) ? 1 : 0;
-      const bKey = hasKey(b) ? 1 : 0;
-      if (aKey !== bKey) return bKey - aKey;
-      return a.name.localeCompare(b.name);
-    });
   const customProviders = allProviders.filter((p) => p.type === "custom");
 
   const [selectedId, setSelectedId] = useState<string | null>(null);
   const [adding, setAdding] = useState(false);
   const [importing, setImporting] = useState(false);
   const [importBump, setImportBump] = useState(0);
-  const [builtinExpanded, setBuiltinExpanded] = useState(false);
   const [deleteConfirm, setDeleteConfirm] = useState<string | null>(null);
   const [deleteError, setDeleteError] = useState(false);
 
-  // Keep a valid selection (default: first custom, else first builtin)
-  const selected = allProviders.find((p) => p.id === selectedId) ?? null;
-  const visibleBuiltinProviders = builtinExpanded ? builtinProviders : builtinProviders.slice(0, 10);
+  // Keep a valid custom-provider selection.
+  const selected = customProviders.find((p) => p.id === selectedId) ?? null;
   useEffect(() => {
-    if (!selected && !adding && allProviders.length > 0) {
-      setSelectedId(customProviders[0]?.id ?? allProviders[0]?.id ?? null);
+    if (!selected && !adding && customProviders.length > 0) {
+      setSelectedId(customProviders[0]?.id ?? null);
     }
-  }, [selected, adding, allProviders, customProviders]);
+  }, [selected, adding, customProviders]);
 
   const handleAddProvider = async (id: string, cfg: CustomProviderConfig): Promise<boolean> => {
     const ok = await useConfigStore.getState().addCustomProvider(id, cfg);
@@ -328,64 +324,26 @@ export function ProvidersModelsPage() {
   };
 
   return (
-    <div className="space-y-6">
-      <div>
+    <div className="providers-page space-y-6">
+      <div className="providers-command-header">
+        <div>
+          <div className="page-kicker"><span /> ROUTING FABRIC // CONFIGURATION</div>
         <h1 className="text-2xl font-bold" style={{ color: "var(--page-text)" }}>
           {t("nav.providers_models")}
         </h1>
         <p className="mt-1 text-sm" style={{ color: "var(--muted-text)" }}>
           {t("providers_models.subtitle")}
         </p>
+        </div>
+        <div className="providers-header-signal"><span /> {t("providers_models.config_sync_ready")}</div>
       </div>
 
       <EnabledModelsPanel />
 
-      <div className="flex overflow-hidden rounded-xl border border-gray-800 bg-gray-900/50">
+      <div className="providers-console flex overflow-hidden rounded-xl border border-gray-800 bg-gray-900/50">
         {/* ─── Left: Provider List ─────────────────────── */}
-        <div className="w-60 shrink-0 border-r border-gray-800 p-3">
-          {builtinProviders.length > 0 && (
-            <>
-              <div className="flex items-center justify-between px-2 pb-2 pt-1">
-                <p className="text-xs font-medium uppercase tracking-wider text-gray-500">
-                  {t("providers.builtin")} ({builtinProviders.length})
-                </p>
-              </div>
-              <div className="space-y-0.5">
-                {visibleBuiltinProviders.map((p) => (
-                    <ProviderListItem
-                      key={p.id}
-                      provider={p}
-                      active={!adding && selectedId === p.id}
-                      hasKey={hasKey(p)}
-                      onClick={() => {
-                        setAdding(false);
-                        setSelectedId(p.id);
-                      }}
-                    />
-                ))}
-              </div>
-              {builtinProviders.length > 10 && (
-                <button
-                  onClick={() => setBuiltinExpanded(!builtinExpanded)}
-                  className="mt-1 flex w-full items-center justify-center gap-1 rounded-lg py-1.5 text-xs text-gray-500 transition-colors hover:bg-gray-800/70 hover:text-gray-300"
-                >
-                  {builtinExpanded ? (
-                    <>
-                      <ChevronUp className="h-3.5 w-3.5" />
-                      {t("providers_models.collapse")}
-                    </>
-                  ) : (
-                    <>
-                      <ChevronDown className="h-3.5 w-3.5" />
-                      {t("providers_models.expand", String(builtinProviders.length - 10))}
-                    </>
-                  )}
-                </button>
-              )}
-            </>
-          )}
-
-          <p className="px-2 pb-2 pt-4 text-xs font-medium uppercase tracking-wider text-gray-500">
+        <div className="provider-rail w-60 shrink-0 border-r border-gray-800 p-3">
+          <p className="px-2 pb-2 pt-1 text-xs font-medium uppercase tracking-wider text-gray-500">
             {t("providers_models.custom_providers")}
           </p>
           <div className="space-y-0.5">
@@ -426,7 +384,7 @@ export function ProvidersModelsPage() {
         </div>
 
         {/* ─── Right: Provider Detail / Add Form ───────── */}
-        <div className="min-w-0 flex-1 p-6">
+        <div className="provider-detail min-w-0 flex-1 p-6">
           {adding ? (
             <AddProviderForm onSubmit={handleAddProvider} onCancel={() => setAdding(false)} />
           ) : selected ? (
@@ -519,10 +477,8 @@ function ProviderListItem({
     <button
       onClick={onClick}
       className={cn(
-        "flex w-full items-center gap-2 rounded-lg border px-3 py-2 text-left text-sm transition-colors",
-        active
-          ? "border-gray-600 bg-gray-800 text-white"
-          : "border-transparent text-gray-300 hover:bg-gray-800/60"
+        "provider-list-item flex w-full items-center gap-2 rounded-lg border px-3 py-2 text-left text-sm transition-colors",
+        active ? "is-active border-gray-600 bg-gray-800 text-white" : "is-inactive border-transparent text-gray-300 hover:bg-gray-800/60"
       )}
     >
       {provider.type === "custom" ? (
@@ -682,6 +638,8 @@ function ProviderDetail({ provider, onDelete, onDuplicate, onRenamed }: { provid
 
   const existingModelIds = new Set(provider.models.map((m) => m.id));
   const availableModels = fetchedModels.filter((m) => !existingModelIds.has(m.id));
+  const [searchQuery, setSearchQuery] = useState("");
+  const filteredModels = availableModels.filter((m) => m.id.toLowerCase().includes(searchQuery.toLowerCase()));
   const isSelected = (id: string) => fetchSelected.has(id);
   const allSelected = availableModels.length > 0 && availableModels.every((m) => isSelected(m.id));
 
@@ -794,9 +752,10 @@ function ProviderDetail({ provider, onDelete, onDuplicate, onRenamed }: { provid
     const id = quickId.trim();
     if (!id) { setQuickHint(null); return; }
     const g = guessModelMeta(id);
+    const exact = findCatalogEntry(id);
     setQuickHint(
       g.source === "catalog" && g.matched
-        ? t("models.detected_catalog", g.matched)
+        ? t("models.detected_catalog_meta", g.matched, formatTokens(exact?.contextWindow ?? g.contextWindow ?? 0), formatTokens(exact?.maxTokens ?? g.maxTokens ?? 0))
         : g.source === "heuristic"
           ? t("models.detected_heuristic")
           : null
@@ -806,29 +765,39 @@ function ProviderDetail({ provider, onDelete, onDuplicate, onRenamed }: { provid
   const handleQuickAdd = async () => {
     const id = quickId.trim();
     if (!id) return;
-    // Don't duplicate
-    if (provider.models.some((m) => m.id === id)) {
+    const g = guessModelMeta(id);
+    const match = findCatalogEntry(id);
+    const existing = provider.models.find((model) => model.id === id);
+    if (existing) {
+      // Re-entering a known model id acts as metadata repair. This fixes
+      // models previously added with generic fallback limits without forcing
+      // the user to delete and recreate the model or overwriting a custom
+      // provider-specific price.
+      if (match) {
+        updateModel(provider.id, id, {
+          name: match.name ?? existing.name,
+          reasoning: match.reasoning ?? existing.reasoning,
+          input: match.input ?? existing.input,
+          contextWindow: match.contextWindow,
+          maxTokens: match.maxTokens,
+          cost: existing.cost ?? match.cost,
+        });
+      }
+      const list = settings?.enabledModels ?? [];
+      await updateSettings({ enabledModels: Array.from(new Set([...list, `${provider.id}/${id}`])) });
       setQuickId("");
       setQuickHint(null);
       return;
     }
-    const g = guessModelMeta(id);
-    const cw = g.contextWindow ?? DEFAULT_CONTEXT_WINDOW;
-    const mt = g.contextWindow
-      ? (g.contextWindow >= 1_000_000 ? 65536 : g.contextWindow >= 200_000 ? 32768 : 8192)
-      : DEFAULT_MAX_TOKENS;
-    // Pull full cost/name from catalog if available
-    const entries = searchCatalog(id, 5);
-    const match = g.source === "catalog"
-      ? entries.find((e) => e.patterns.some((p) => id.toLowerCase().includes(p.toLowerCase())))
-      : undefined;
+    const cw = match?.contextWindow ?? g.contextWindow ?? DEFAULT_CONTEXT_WINDOW;
+    const mt = match?.maxTokens ?? g.maxTokens ?? fallbackMaxTokens(cw);
     const model: Model = {
       id,
       name: match?.name,
       reasoning: g.reasoning ?? false,
       input: g.input ?? ["text"],
-      contextWindow: match?.contextWindow ?? cw,
-      maxTokens: match?.maxTokens ?? mt,
+      contextWindow: cw,
+      maxTokens: mt,
       cost: match?.cost ?? { input: 0, output: 0, cacheRead: 0, cacheWrite: 0 },
       enabled: true,
     };
@@ -917,10 +886,7 @@ function ProviderDetail({ provider, onDelete, onDuplicate, onRenamed }: { provid
     : provider.models;
 
   // Look up the catalog family for a model id (for sorting/grouping)
-  const familyOf = (id: string): string => {
-    const hit = searchCatalog(id, 1)[0];
-    return hit?.family ?? "—";
-  };
+  const familyOf = (id: string): string => findCatalogEntry(id)?.family ?? "—";
 
   const visibleModels = useMemo(() => {
     const arr = [...baseModels];
@@ -1039,7 +1005,7 @@ function ProviderDetail({ provider, onDelete, onDuplicate, onRenamed }: { provid
       </div>
 
       {/* Developer Role Support */}
-      <div className="flex items-center gap-2">
+      <div className="provider-compat-row flex items-center gap-2">
         <input
           id="supports-developer-role"
           type="checkbox"
@@ -1047,14 +1013,14 @@ function ProviderDetail({ provider, onDelete, onDuplicate, onRenamed }: { provid
           onChange={(e) => setSupportsDeveloperRole(e.target.checked)}
           className="rounded border-gray-600 bg-gray-800 text-blue-500"
         />
-        <label htmlFor="supports-developer-role" className="text-sm text-gray-400">
+        <label htmlFor="supports-developer-role" className="provider-compat-label text-sm text-gray-400">
           <span>{t("compat.supports_developer_role")}</span>
-          <span className="ml-2 text-xs text-gray-500">{t("compat.supports_developer_role_desc")}</span>
+          <span className="provider-compat-description ml-2 text-xs text-gray-500">{t("compat.supports_developer_role_desc")}</span>
         </label>
       </div>
 
       {/* Finish Reason Support */}
-      <div className="flex items-center gap-2">
+      <div className="provider-compat-row flex items-center gap-2">
         <input
           id="supports-finish-reason"
           type="checkbox"
@@ -1062,9 +1028,9 @@ function ProviderDetail({ provider, onDelete, onDuplicate, onRenamed }: { provid
           onChange={(e) => setSupportsFinishReason(e.target.checked)}
           className="rounded border-gray-600 bg-gray-800 text-blue-500"
         />
-        <label htmlFor="supports-finish-reason" className="text-sm text-gray-400">
+        <label htmlFor="supports-finish-reason" className="provider-compat-label text-sm text-gray-400">
           <span>{t("compat.supports_finish_reason")}</span>
-          <span className="ml-2 text-xs text-gray-500">{t("compat.supports_finish_reason_desc")}</span>
+          <span className="provider-compat-description ml-2 text-xs text-gray-500">{t("compat.supports_finish_reason_desc")}</span>
         </label>
       </div>
 
@@ -1169,7 +1135,7 @@ function ProviderDetail({ provider, onDelete, onDuplicate, onRenamed }: { provid
             return (
             <div
               key={m.id}
-              className="flex items-center gap-2 rounded-lg border border-gray-700 bg-gray-900/70 px-3 py-2.5"
+              className="provider-model-row flex items-center gap-2 rounded-lg border border-gray-700 bg-gray-900/70 px-3 py-2.5"
             >
               <button
                 onClick={() => toggleModelEnabled(m.id)}
@@ -1350,7 +1316,7 @@ function ProviderDetail({ provider, onDelete, onDuplicate, onRenamed }: { provid
         open={fetchOpen}
         onClose={() => { setFetchOpen(false); setFetchedModels([]); setFetchSelected(new Set()); setFetchError(null); setFetchImported(null); }}
         title={t("providers_models.fetch_title")}
-        size="lg"
+        size="xl"
       >
         <div className="space-y-4">
           <p className="text-sm text-gray-400">{t("providers_models.fetch_desc", provider.name)}</p>
@@ -1383,14 +1349,23 @@ function ProviderDetail({ provider, onDelete, onDuplicate, onRenamed }: { provid
                 </button>
               </div>
               <div className="max-h-72 overflow-y-auto space-y-1.5 rounded-lg border border-gray-800 p-3">
-                {availableModels.map((m) => (
-                  <label key={m.id} className="flex items-center gap-3 rounded-lg px-2 py-2 transition-colors hover:bg-gray-800 cursor-pointer">
+          <div className="relative mt-2">
+            <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-500" />
+            <input
+              type="text"
+              placeholder="Search models..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="w-full rounded-lg border border-gray-700 bg-gray-800 py-2 pl-9 pr-3 text-sm text-white"
+            />
+          </div>
+                {filteredModels.map((m) => (
+                  <div key={m.id} className="flex items-center gap-3 rounded-lg px-2 py-2 transition-colors hover:bg-gray-800 cursor-pointer" onClick={() => toggleSelect(m.id)}>
                     <div className="flex h-5 w-5 shrink-0 items-center justify-center rounded border"
                       style={{ backgroundColor: isSelected(m.id) ? "#3b82f6" : "transparent", borderColor: isSelected(m.id) ? "#3b82f6" : "#4b5563" }}
                     >
                       {isSelected(m.id) && <SquareCheck className="h-4 w-4 text-white" />}
                     </div>
-                    <input type="checkbox" checked={isSelected(m.id)} onChange={() => toggleSelect(m.id)} className="sr-only" />
                     <span className="min-w-0 flex-1 truncate font-mono text-sm text-gray-200">{m.id}</span>
                     {m.reasoning && (
                       <span className="flex shrink-0 items-center rounded border border-purple-500/40 bg-purple-500/10 px-1.5 py-0.5 text-[10px] text-purple-400">
@@ -1411,7 +1386,7 @@ function ProviderDetail({ provider, onDelete, onDuplicate, onRenamed }: { provid
                     {m.cost && (m.cost.input || m.cost.output) ? (
                       <span className="rounded border border-gray-700 bg-gray-800 px-1.5 py-0.5 text-[10px] text-gray-500 font-mono">${m.cost.input}/${m.cost.output}</span>
                     ) : null}
-                  </label>
+                  </div>
                 ))}
               </div>
             </>
@@ -1441,13 +1416,16 @@ function ProviderDetail({ provider, onDelete, onDuplicate, onRenamed }: { provid
         open={!!editModel}
         onClose={() => setEditModel(null)}
         title={`${t("models.edit_model")}: ${editModel?.name || editModel?.id}`}
-        size="lg"
+        size="xl"
       >
         {editModel && (
           <ModelForm
             initial={editModel}
             onSubmit={(form) => {
-              updateModel(provider.id, editModel.id, form);
+              // Apply default maxTokens if left empty
+              const patched: Partial<Model> = { ...form };
+              if (patched.maxTokens === undefined) patched.maxTokens = DEFAULT_MAX_TOKENS;
+              updateModel(provider.id, editModel.id, patched);
               setEditModel(null);
             }}
             onCancel={() => setEditModel(null)}
@@ -1460,7 +1438,7 @@ function ProviderDetail({ provider, onDelete, onDuplicate, onRenamed }: { provid
         open={showAddModel}
         onClose={() => setShowAddModel(false)}
         title={`${t("models.add_model")} — ${provider.name}`}
-        size="lg"
+        size="xl"
       >
         <ModelForm
           onSubmit={(form) => {
@@ -1555,26 +1533,23 @@ function ModelForm({ initial, onSubmit, onCancel }: ModelFormProps) {
     const guess = guessModelMeta(id);
     if (guess.source === "default") { setDetectHint(null); return; }
 
+    // The catalog is authoritative when it has an entry: maxTokens there is the
+    // vendor-documented output cap. Resolving it via findCatalogEntry (best
+    // score) instead of a loose searchCatalog+includes scan avoids a broad
+    // family prefix winning over the exact model.
+    const match = findCatalogEntry(id);
+
     setForm((prev) => {
       const next = { ...prev };
       if (guess.contextWindow && !wasTouched("contextWindow")) next.contextWindow = guess.contextWindow;
-      if (!wasTouched("maxTokens")) {
-        // Use reasonable maxTokens per context family when detected
-        next.maxTokens = guess.contextWindow
-          ? (guess.contextWindow >= 1_000_000 ? 65536 : guess.contextWindow >= 200_000 ? 32768 : 8192)
-          : DEFAULT_MAX_TOKENS;
+      if (!wasTouched("maxTokens") || next.maxTokens === undefined) {
+        next.maxTokens = match?.maxTokens ?? guess.maxTokens ?? fallbackMaxTokens(guess.contextWindow);
       }
       if (guess.reasoning !== undefined && !wasTouched("reasoning")) next.reasoning = guess.reasoning;
       if (guess.input && !wasTouched("input")) next.input = [...guess.input];
-      // Catalog match → also set name + cost
-      if (guess.source === "catalog") {
-        // Find the matched catalog entry for name + cost
-        const entries = searchCatalog(id, 5);
-        const match = entries.find((e) => e.patterns.some((p) => id.toLowerCase().includes(p.toLowerCase())));
-        if (match) {
-          if (!wasTouched("name")) next.name = match.name;
-          if (match.cost && !wasTouched("cost")) next.cost = { ...match.cost };
-        }
+      if (match) {
+        if (!wasTouched("name")) next.name = match.name;
+        if (match.cost && !wasTouched("cost")) next.cost = { ...match.cost };
       }
       return next;
     });
@@ -1589,8 +1564,11 @@ function ModelForm({ initial, onSubmit, onCancel }: ModelFormProps) {
   // ── Catalog picker (add-mode only) ──
   const [pickerOpen, setPickerOpen] = useState(false);
   const [pickerQuery, setPickerQuery] = useState("");
+  // No limit: an empty query must list the whole catalog, otherwise families
+  // ordered late in the array (GLM, Kimi, Doubao, Llama, Grok) are unreachable
+  // without typing.
   const pickerResults = useMemo(
-    () => searchCatalog(pickerQuery, 30),
+    () => searchCatalog(pickerQuery, MODEL_CATALOG.length),
     [pickerQuery]
   );
   const applyPreset = (entry: ReturnType<typeof searchCatalog>[number]) => {
@@ -1599,7 +1577,7 @@ function ModelForm({ initial, onSubmit, onCancel }: ModelFormProps) {
     touchedRef.current = new Set();
     setForm((prev) => ({ ...prev, ...preset }));
     setPickerOpen(false);
-    setDetectHint(t("models.detected_catalog", entry.name ?? entry.patterns[0] ?? ""));
+    setDetectHint(t("models.detected_catalog", entry.name ?? catalogEntryId(entry)));
   };
 
   // Apply a quick template (Claude-style, GPT-style, Reasoning, Local small)
@@ -1622,7 +1600,7 @@ function ModelForm({ initial, onSubmit, onCancel }: ModelFormProps) {
   const setId = (v: string) => { touch("id"); setForm((p) => ({ ...p, id: v })); };
   const setName = (v: string) => { touch("name"); setForm((p) => ({ ...p, name: v })); };
   const setContextWindow = (v: number) => { touch("contextWindow"); setForm((p) => ({ ...p, contextWindow: v })); };
-  const setMaxTokens = (v: number) => { touch("maxTokens"); setForm((p) => ({ ...p, maxTokens: v })); };
+  const setMaxTokens = (v: number | undefined) => { touch("maxTokens"); setForm((p) => ({ ...p, maxTokens: v })); };
   const setReasoning = (v: boolean) => { touch("reasoning"); setForm((p) => ({ ...p, reasoning: v })); };
   const setImage = (v: boolean) => {
     touch("input");
@@ -1674,7 +1652,18 @@ function ModelForm({ initial, onSubmit, onCancel }: ModelFormProps) {
                   key={kind}
                   type="button"
                   onClick={() => applyTemplate(kind)}
-                  className="rounded-md border border-gray-700 bg-gray-800/70 px-2 py-1 text-[11px] text-gray-400 hover:bg-gray-700 hover:text-gray-200"
+                  className="rounded-md border px-2 py-1 text-[11px] transition-colors"
+                  style={{
+                    borderColor: "var(--card-border)",
+                    backgroundColor: "var(--card-bg-solid)",
+                    color: "var(--muted-text)",
+                  }}
+                  onMouseEnter={(e) => {
+                    (e.currentTarget as HTMLButtonElement).style.color = "var(--page-text)";
+                  }}
+                  onMouseLeave={(e) => {
+                    (e.currentTarget as HTMLButtonElement).style.color = "var(--muted-text)";
+                  }}
                 >
                   {t(key)}
                 </button>
@@ -1701,14 +1690,14 @@ function ModelForm({ initial, onSubmit, onCancel }: ModelFormProps) {
                 )}
                 {pickerResults.map((e) => (
                   <button
-                    key={e.patterns[0]}
+                    key={catalogEntryId(e)}
                     type="button"
                     onClick={() => applyPreset(e)}
                     className="flex w-full items-center gap-3 border-b border-gray-800 px-3 py-2 text-left hover:bg-gray-800 last:border-0"
                   >
                     <span className="min-w-0 flex-1">
                       <span className="block truncate text-sm text-gray-200">{e.name}</span>
-                      <span className="block truncate font-mono text-[11px] text-gray-500">{e.patterns[0]}</span>
+                      <span className="block truncate font-mono text-[11px] text-gray-500">{catalogEntryId(e)}</span>
                     </span>
                     {e.reasoning && <Brain className="h-3.5 w-3.5 shrink-0 text-purple-400" aria-label="reasoning" />}
                     {e.input?.includes("image") && <ImageIcon className="h-3.5 w-3.5 shrink-0 text-blue-400" aria-label="vision" />}
@@ -1761,7 +1750,7 @@ function ModelForm({ initial, onSubmit, onCancel }: ModelFormProps) {
             className="mt-1 w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-white"
           />
           <div className="mt-1 flex flex-wrap gap-1">
-            {[32_768, 128_000, 200_000, 1_000_000].map((v) => (
+            {[32_768, 65_536, 131_072, 262_144, 524_288, 1_000_000].map((v) => (
               <button
                 key={v}
                 type="button"
@@ -1782,12 +1771,17 @@ function ModelForm({ initial, onSubmit, onCancel }: ModelFormProps) {
           <label className="block text-xs font-medium text-gray-400">{t("models.max_tokens")}</label>
           <input
             type="number"
-            value={form.maxTokens ?? DEFAULT_MAX_TOKENS}
-            onChange={(e) => setMaxTokens(parseInt(e.target.value) || DEFAULT_MAX_TOKENS)}
+            value={form.maxTokens ?? ""}
+            onChange={(e) => {
+              const v = e.target.value;
+              setMaxTokens(v === "" ? undefined : parseInt(v) || undefined);
+            }}
+            placeholder={String(DEFAULT_MAX_TOKENS)}
             className="mt-1 w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-white"
           />
+          <p className="mt-0.5 text-[10px] text-gray-500">{t("models.max_tokens_hint", String(DEFAULT_MAX_TOKENS))}</p>
           <div className="mt-1 flex flex-wrap gap-1">
-            {[4096, 8192, 16_384, 32_768, 65_536, 131_072].map((v) => (
+            {[4096, 8192, 16_384, 32_768, 65_536].map((v) => (
               <button
                 key={v}
                 type="button"
@@ -2011,7 +2005,7 @@ function AddProviderForm({
             {models.map((m) => (
               <div
                 key={m.id}
-                className="flex items-center gap-2 rounded-lg border border-gray-700 bg-gray-900/70 px-3 py-2.5"
+                className="provider-model-row flex items-center gap-2 rounded-lg border border-gray-700 bg-gray-900/70 px-3 py-2.5"
               >
                 <Box className="h-4 w-4 shrink-0 text-gray-500" />
                 <span className="min-w-0 flex-1 truncate font-mono text-sm text-gray-200">
@@ -2069,7 +2063,7 @@ function AddProviderForm({
         open={showAddModel}
         onClose={() => setShowAddModel(false)}
         title={t("models.add_model")}
-        size="lg"
+        size="xl"
       >
         <ModelForm
           onSubmit={(form) => {
@@ -2284,7 +2278,7 @@ function ImportProviderModal({
       open={open}
       onClose={() => { reset(); onClose(); }}
       title={t("providers_models.import_title")}
-      size="lg"
+      size="xl"
     >
       <div className="space-y-4">
         <p className="text-sm text-gray-500">{t("providers_models.import_desc")}</p>

package/src/components/sessions/MemoryPage.tsx

@@ -212,7 +212,7 @@ function EntryCard({
 
   return (
     <div
-      className="group relative rounded-lg border px-3.5 py-2.5"
+      className="memory-entry-card group relative rounded-lg border px-3.5 py-2.5"
       style={{ backgroundColor: "var(--card-bg)", borderColor: "var(--card-border)" }}
     >
       <p
@@ -222,7 +222,7 @@ function EntryCard({
         {renderInline(entry.text, q)}
       </p>
       {/* Hover actions: copy / delete */}
-      <div className="absolute right-2 top-2 flex items-center gap-1 opacity-0 transition-opacity group-hover:opacity-100">
+      <div className="memory-entry-actions absolute right-2 top-2 flex items-center gap-1 opacity-0 transition-opacity group-hover:opacity-100">
         <button
           onClick={handleCopy}
           className="rounded p-1 transition-colors hover:bg-black/10"
@@ -268,10 +268,10 @@ function MemoryFileSection({
     setOpenOverrides((prev) => ({ ...prev, [key]: !currentOpen }));
 
   return (
-    <div>
+    <div className="memory-file-section">
       {/* File header */}
       <div
-        className="flex items-center gap-2 pb-3"
+        className="memory-file-header flex items-center gap-2 pb-3"
         style={{ borderBottom: "1px solid var(--card-border)" }}
       >
         <Icon className="h-4 w-4" style={{ color }} />
@@ -348,7 +348,7 @@ function MemoryFileSection({
 
                 {/* Timeline entries */}
                 {open && (
-                  <div className="space-y-1.5 pl-2">
+                  <div className="memory-timeline space-y-1.5 pl-2">
                     {dateEntries.map((entry, idx) => (
                       <EntryCard
                         key={`${dateKey}-${idx}`}
@@ -459,11 +459,14 @@ export function MemoryPage() {
   }
 
   const totalEntries = parsed.reduce((s, p) => s + p.entries.length, 0);
+  const totalChars = parsed.reduce((sum, item) => sum + item.file.content.length, 0);
+  const latestFile = [...parsed].sort((a, b) => (b.file.updatedAt || "").localeCompare(a.file.updatedAt || ""))[0]?.file;
 
   return (
-    <div className="space-y-6">
-      <div className="flex items-start justify-between">
+    <div className="memory-page space-y-6">
+      <div className="memory-command-header flex items-start justify-between">
         <div>
+          <div className="page-kicker"><span /> {t("memory.knowledge_synced")}</div>
           <h1 className="text-2xl font-bold" style={{ color: "var(--page-text)" }}>{t("memory.title")}</h1>
           <p className="mt-1 text-sm" style={{ color: "var(--muted-text)" }}>
             {t("memory.summary", String(totalEntries), String(parsed.length))}
@@ -481,15 +484,29 @@ export function MemoryPage() {
       </div>
 
       {parsed.length === 0 ? (
-        <div className="flex flex-col items-center justify-center py-12">
-          <Brain className="h-12 w-12" style={{ color: "var(--subtle-text)" }} />
+        <div className="memory-empty-state">
+          <div className="memory-empty-radar"><Brain className="h-7 w-7" /></div>
           <p className="mt-4 text-sm" style={{ color: "var(--muted-text)" }}>{t("memory.no_memory")}</p>
           <p className="text-xs mt-1" style={{ color: "var(--subtle-text)" }}>{t("memory.no_memory_desc")}</p>
         </div>
       ) : (
         <>
-          {/* Search */}
-          <div className="relative max-w-md">
+          <div className="memory-readout-grid">
+            <div className="tech-panel memory-readout-card"><span>{t("memory.files_indexed")}</span><strong>{parsed.length}</strong><small>{t("memory.summary", String(totalEntries), String(parsed.length))}</small></div>
+            <div className="tech-panel memory-readout-card"><span>{t("memory.entry_count")}</span><strong>{totalEntries}</strong><small>{formatDate(latestFile?.updatedAt || "")}</small></div>
+            <div className="tech-panel memory-readout-card"><span>{t("memory.text_volume")}</span><strong>{totalChars > 1000 ? `${(totalChars / 1000).toFixed(1)}K` : totalChars}</strong><small>{t("memory.characters_indexed")}</small></div>
+          </div>
+
+          <div className="memory-toolbar tech-panel">
+            <div className="memory-file-jump">
+              <span className="memory-toolbar-label">{t("memory.channels")}</span>
+              {parsed.map(({ file, entries }) => {
+                const Icon = FILE_ICONS[file.filename] || FileText;
+                return <a key={file.filename} href={`#memory-${file.filename}`} className="memory-file-chip"><Icon className="h-3.5 w-3.5" />{file.filename}<b>{entries.length}</b></a>;
+              })}
+            </div>
+            {/* Search */}
+            <div className="relative memory-search">
             <Search
               className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2"
               style={{ color: "var(--subtle-text)" }}
@@ -506,6 +523,7 @@ export function MemoryPage() {
                 color: "var(--page-text)",
               }}
             />
+            </div>
           </div>
 
           {visible.length === 0 ? (
@@ -513,8 +531,9 @@ export function MemoryPage() {
               {t("memory.no_results")}
             </p>
           ) : (
-            <div className="space-y-8">
+            <div className="memory-sections">
               {visible.map(({ file, entries }) => (
+                <div key={file.filename} id={`memory-${file.filename}`} className="memory-file-panel tech-panel">
                 <MemoryFileSection
                   key={file.filename}
                   file={file}
@@ -522,6 +541,7 @@ export function MemoryPage() {
                   q={q}
                   onDeleteEntry={(entry) => setDeleteTarget({ filename: file.filename, entry })}
                 />
+                </div>
               ))}
             </div>
           )}