@khanglvm/llm-router 2.3.1 → 2.3.4

package/src/node/web-console-ui/api-client.js

@@ -0,0 +1,128 @@
+import { JSON_HEADERS, CONTEXT_LOOKUP_SUGGESTION_LIMIT } from "./constants.js";
+import { pickFreeTierProbeModels } from "./quick-start-utils.js";
+import { looksLikeEnvVarName } from "./utils.js";
+
+export async function fetchJson(url, options = {}) {
+  const response = await fetch(url, options);
+  const payload = await response.json().catch(() => ({}));
+  if (!response.ok) {
+    const error = new Error(payload?.error || `Request failed (${response.status})`);
+    error.statusCode = response.status;
+    error.payload = payload;
+    throw error;
+  }
+  return payload;
+}
+
+export async function fetchJsonLineStream(url, options = {}, { onMessage } = {}) {
+  const response = await fetch(url, options);
+  if (!response.ok) {
+    const payload = await response.json().catch(() => ({}));
+    const error = new Error(payload?.error || `Request failed (${response.status})`);
+    error.statusCode = response.status;
+    error.payload = payload;
+    throw error;
+  }
+
+  const reader = response.body?.getReader();
+  if (!reader) return null;
+  const decoder = new TextDecoder();
+  let buffer = "";
+  let finalResult = null;
+
+  while (true) {
+    const { value, done } = await reader.read();
+    buffer += decoder.decode(value || new Uint8Array(), { stream: !done });
+
+    let newlineIndex = buffer.indexOf("\n");
+    while (newlineIndex >= 0) {
+      const rawLine = buffer.slice(0, newlineIndex).trim();
+      buffer = buffer.slice(newlineIndex + 1);
+      if (rawLine) {
+        const message = JSON.parse(rawLine);
+        onMessage?.(message);
+        if (message?.type === "result") {
+          finalResult = message.result;
+        }
+        if (message?.type === "error") {
+          const error = new Error(message.error || "Request failed.");
+          error.statusCode = message.statusCode || 500;
+          throw error;
+        }
+      }
+      newlineIndex = buffer.indexOf("\n");
+    }
+
+    if (done) break;
+  }
+
+  const finalLine = buffer.trim();
+  if (finalLine) {
+    const message = JSON.parse(finalLine);
+    onMessage?.(message);
+    if (message?.type === "result") finalResult = message.result;
+    if (message?.type === "error") {
+      const error = new Error(message.error || "Request failed.");
+      error.statusCode = message.statusCode || 500;
+      throw error;
+    }
+  }
+
+  return finalResult;
+}
+
+export async function probeFreeTierModels(baseUrl, credential, modelIds) {
+  const sampleIds = pickFreeTierProbeModels(modelIds);
+  if (sampleIds.length === 0) return null;
+  try {
+    const payload = await fetchJson("/api/config/probe-free-tier-models", {
+      method: "POST",
+      headers: JSON_HEADERS,
+      body: JSON.stringify({
+        baseUrl,
+        ...(looksLikeEnvVarName(credential) ? { apiKeyEnv: credential } : { apiKey: credential }),
+        modelIds: sampleIds
+      })
+    });
+    if (!payload?.result) return null;
+    const freeTiers = new Set();
+    const paidTiers = new Set();
+    for (const [id, info] of Object.entries(payload.result)) {
+      const lower = id.toLowerCase();
+      const tier = lower.includes("flash-lite") ? "flash-lite"
+        : lower.includes("flash") ? "flash"
+        : lower.includes("pro") ? "pro"
+        : lower;
+      if (info?.freeTier) freeTiers.add(tier);
+      else paidTiers.add(tier);
+    }
+    return modelIds.filter((id) => {
+      const lower = id.toLowerCase();
+      const tier = lower.includes("flash-lite") ? "flash-lite"
+        : lower.includes("flash") ? "flash"
+        : lower.includes("pro") ? "pro"
+        : lower;
+      if (freeTiers.has(tier)) return true;
+      if (paidTiers.has(tier)) return false;
+      return true;
+    });
+  } catch {
+    return null;
+  }
+}
+
+export async function lookupLiteLlmContextWindow(models = []) {
+  const normalizedModels = [...new Set((Array.isArray(models) ? models : [])
+    .map((model) => String(model || "").trim())
+    .filter(Boolean))];
+  if (normalizedModels.length === 0) return [];
+  const payload = await fetchJson("/api/config/litellm-context-lookup", {
+    method: "POST",
+    headers: JSON_HEADERS,
+    body: JSON.stringify({
+      models: normalizedModels,
+      limit: CONTEXT_LOOKUP_SUGGESTION_LIMIT
+    })
+  });
+  return Array.isArray(payload?.result) ? payload.result : [];
+}

package/src/node/web-console-ui/capability-utils.js

@@ -0,0 +1,36 @@
+// Keep in sync with MODEL_CAPABILITY_KEYS in src/runtime/config.js
+export const CAPABILITY_DEFINITIONS = [
+  { key: "supportsReasoning", label: "Reasoning", field: "reasoning_effort" },
+  { key: "supportsThinking", label: "Thinking", field: "thinking" },
+  { key: "supportsResponseFormat", label: "Response Format", field: "response_format" },
+  { key: "supportsLogprobs", label: "Logprobs", field: "logprobs" },
+  { key: "supportsServiceTier", label: "Service Tier", field: "service_tier" },
+  { key: "supportsPrediction", label: "Prediction", field: "prediction" },
+  { key: "supportsStreamOptions", label: "Stream Options", field: "stream_options" }
+];
+
+/** Merge litellm capabilities into existing row capabilities (don't overwrite user-set values) */
+export function mergeLiteLlmCapabilities(existing = {}, litellm = {}) {
+  if (!litellm || typeof litellm !== "object") return existing;
+  const merged = { ...existing };
+  for (const key of Object.keys(litellm)) {
+    if (typeof litellm[key] !== "boolean") continue;
+    if (merged[key] === undefined) {
+      merged[key] = litellm[key];
+    }
+  }
+  return merged;
+}
+
+/** Cycle capability value: undefined → true → false → undefined */
+export function cycleCapabilityValue(current) {
+  if (current === undefined) return true;
+  if (current === true) return false;
+  return undefined;
+}
+
+/** Check if any capabilities are explicitly set */
+export function hasExplicitCapabilities(capabilities) {
+  if (!capabilities || typeof capabilities !== "object") return false;
+  return Object.values(capabilities).some((v) => typeof v === "boolean");
+}

package/src/node/web-console-ui/config-editor-utils.js

@@ -354,10 +354,15 @@ function normalizeProviderModelRows(rows = []) {
     if (!id || seenIds.has(id)) continue;
     seenIds.add(id);
     const parsedContextWindow = Number.parseInt(String(row?.contextWindow || "").trim(), 10);
+    const capabilities = row?.capabilities && typeof row.capabilities === "object"
+      && Object.keys(row.capabilities).length > 0
+      ? row.capabilities
+      : undefined;
     normalizedRows.push({
       id,
       sourceId,
-      contextWindow: Number.isFinite(parsedContextWindow) && parsedContextWindow > 0 ? parsedContextWindow : null
+      contextWindow: Number.isFinite(parsedContextWindow) && parsedContextWindow > 0 ? parsedContextWindow : null,
+      ...(capabilities ? { capabilities } : {})
     });
   }
 
@@ -413,16 +418,22 @@ export function applyProviderModelEdits(config = {}, providerId, rows = []) {
       if (matchedSourceId !== row.id) {
         renameMap.set(matchedSourceId, row.id);
       }
-      nextModels.push({
+      const matchedModel = {
         ...existingModelMap.get(matchedSourceId),
         id: row.id,
         ...(row.contextWindow
           ? { contextWindow: row.contextWindow }
           : {})
-      });
+      };
       if (!row.contextWindow) {
-        delete nextModels[nextModels.length - 1].contextWindow;
+        delete matchedModel.contextWindow;
+      }
+      if (row.capabilities && typeof row.capabilities === "object" && Object.keys(row.capabilities).length > 0) {
+        matchedModel.capabilities = row.capabilities;
+      } else {
+        delete matchedModel.capabilities;
       }
+      nextModels.push(matchedModel);
       continue;
     }
 
@@ -430,6 +441,9 @@ export function applyProviderModelEdits(config = {}, providerId, rows = []) {
       id: row.id,
       ...(row.contextWindow
         ? { contextWindow: row.contextWindow }
+        : {}),
+      ...(row.capabilities && typeof row.capabilities === "object" && Object.keys(row.capabilities).length > 0
+        ? { capabilities: row.capabilities }
         : {})
     });
   }
@@ -685,6 +699,7 @@ export function createProviderModelDraftRows(provider = {}) {
     key: `model-${provider?.id || "provider"}-${index}-${String(model?.id || "").trim() || "empty"}`,
     id: String(model?.id || "").trim(),
     sourceId: String(model?.id || "").trim(),
-    contextWindow: Number.isFinite(model?.contextWindow) ? String(Math.floor(Number(model.contextWindow))) : ""
+    contextWindow: Number.isFinite(model?.contextWindow) ? String(Math.floor(Number(model.contextWindow))) : "",
+    ...(model?.capabilities ? { capabilities: { ...model.capabilities } } : {})
   }));
 }

package/src/node/web-console-ui/constants.js

@@ -0,0 +1,140 @@
+import { RATE_LIMIT_WINDOW_OPTIONS } from "./rate-limit-utils.js";
+
+export const JSON_HEADERS = { "content-type": "application/json" };
+export const LOG_LEVEL_STYLES = {
+  info: "bg-sky-50 text-sky-700 ring-sky-100",
+  success: "bg-emerald-50 text-emerald-700 ring-emerald-100",
+  warn: "bg-amber-50 text-amber-700 ring-amber-100",
+  error: "bg-rose-50 text-rose-700 ring-rose-100"
+};
+export const ACTIVITY_FILTER_OPTIONS = [
+  { value: "usage", label: "Request / response" },
+  { value: "router", label: "LLM Router" },
+  { value: "all", label: "All categories" }
+];
+export const ACTIVITY_CATEGORY_META = {
+  usage: {
+    label: "Request / response",
+    badgeVariant: "info",
+    emptyLabel: "request/response"
+  },
+  router: {
+    label: "LLM Router",
+    badgeVariant: "outline",
+    emptyLabel: "LLM Router"
+  }
+};
+export const GITHUB_REPO_URL = "https://github.com/khanglvm/llm-router";
+export const GITHUB_SPONSORS_URL = "https://github.com/sponsors/khanglvm";
+
+export const QUICK_START_FALLBACK_USER_AGENT = "AICodeClient/1.0.0";
+export const LIVE_UPDATES_RETRY_MS = 3000;
+export const TOAST_DURATION_MS = 4000;
+export const TOAST_STATUS_TICK_MS = 100;
+export const CONTEXT_LOOKUP_SUGGESTION_LIMIT = 6;
+export const QUICK_START_PROVIDER_ID_PATTERN = /^[a-z][a-z0-9-]*$/;
+export const QUICK_START_ALIAS_ID_PATTERN = /^[A-Za-z0-9][A-Za-z0-9._:\-\[\]]*$/;
+export const QUICK_START_CONNECTION_CATEGORIES = [
+  {
+    value: "api",
+    label: "API Key",
+    description: "Test endpoint + model candidates with an API key env before saving."
+  },
+  {
+    value: "subscription",
+    label: "Subscription",
+    description: "Use an OAuth subscription login with ChatGPT or Claude models."
+  }
+];
+export const MODEL_ALIAS_STRATEGY_OPTIONS = [
+  { value: "auto", label: "Auto" },
+  { value: "ordered", label: "Ordered" },
+  { value: "round-robin", label: "Round robin" },
+  { value: "weighted-rr", label: "Weighted RR" },
+  { value: "quota-aware-weighted-rr", label: "Quota-aware weighted RR" }
+];
+export const MODEL_ALIAS_STRATEGY_LABELS = Object.fromEntries(MODEL_ALIAS_STRATEGY_OPTIONS.map((option) => [option.value, option.label]));
+export const CODEX_THINKING_LEVEL_OPTIONS = Object.freeze([
+  { value: "minimal", label: "Minimal", hint: "Fastest supported reasoning" },
+  { value: "low", label: "Low", hint: "Lighter reasoning" },
+  { value: "medium", label: "Medium", hint: "Balanced depth" },
+  { value: "high", label: "High", hint: "Deeper reasoning" },
+  { value: "xhigh", label: "XHigh", hint: "Model-dependent extra depth" }
+]);
+export const CLAUDE_THINKING_LEVEL_OPTIONS = Object.freeze([
+  { value: "low", label: "Low", hint: "Sets CLAUDE_CODE_EFFORT_LEVEL=low" },
+  { value: "medium", label: "Medium", hint: "Sets CLAUDE_CODE_EFFORT_LEVEL=medium" },
+  { value: "high", label: "High", hint: "Sets CLAUDE_CODE_EFFORT_LEVEL=high" },
+  { value: "xhigh", label: "XHigh", hint: "Sets CLAUDE_CODE_EFFORT_LEVEL=xhigh" },
+  { value: "max", label: "Max", hint: "Sets CLAUDE_CODE_EFFORT_LEVEL=max" }
+]);
+export const FACTORY_DROID_REASONING_EFFORT_OPTIONS = Object.freeze([
+  { value: "off", label: "Off", hint: "Disable reasoning" },
+  { value: "none", label: "None", hint: "No extended reasoning" },
+  { value: "low", label: "Low", hint: "Lighter reasoning" },
+  { value: "medium", label: "Medium", hint: "Balanced depth" },
+  { value: "high", label: "High", hint: "Maximum reasoning depth" }
+]);
+export const QUICK_START_WINDOW_OPTIONS = RATE_LIMIT_WINDOW_OPTIONS;
+export const QUICK_START_DEFAULT_ENDPOINT_BY_PROTOCOL = {
+  openai: "https://api.openai.com/v1",
+  claude: "https://api.anthropic.com"
+};
+
+export const AMP_WEB_SEARCH_STRATEGY_OPTIONS = Object.freeze([
+  { value: "ordered", label: "Ordered" },
+  { value: "quota-balance", label: "Quota balance" }
+]);
+export const AMP_WEB_SEARCH_PROVIDER_OPTIONS = Object.freeze([
+  Object.freeze({
+    id: "brave",
+    label: "Brave",
+    credentialField: "apiKey",
+    credentialLabel: "API key",
+    credentialPlaceholder: "brv_...",
+    defaultLimit: 1000
+  }),
+  Object.freeze({
+    id: "tavily",
+    label: "Tavily",
+    credentialField: "apiKey",
+    credentialLabel: "API key",
+    credentialPlaceholder: "tvly-...",
+    defaultLimit: 1000
+  }),
+  Object.freeze({
+    id: "exa",
+    label: "Exa",
+    credentialField: "apiKey",
+    credentialLabel: "API key",
+    credentialPlaceholder: "exa_...",
+    defaultLimit: 1000
+  }),
+  Object.freeze({
+    id: "searxng",
+    label: "SearXNG",
+    credentialField: "url",
+    credentialLabel: "Base URL",
+    credentialPlaceholder: "https://searx.example.com",
+    defaultLimit: 0
+  })
+]);
+export const AMP_WEB_SEARCH_PROVIDER_META = Object.fromEntries(
+  AMP_WEB_SEARCH_PROVIDER_OPTIONS.map((provider) => [provider.id, provider])
+);
+export const AMP_WEB_SEARCH_DEFAULT_COUNT = 5;
+export const AMP_WEB_SEARCH_MIN_COUNT = 1;
+export const AMP_WEB_SEARCH_MAX_COUNT = 20;
+
+export const ROW_REMOVE_BUTTON_CLASS = "w-[5.5rem] justify-self-end";
+export const DRAGGING_ROW_CLASSES = ["border-primary/45", "bg-primary/5"];
+
+export const OLLAMA_KEEP_ALIVE_OPTIONS = [
+  { value: "5m", label: "5 minutes" },
+  { value: "10m", label: "10 minutes" },
+  { value: "30m", label: "30 minutes" },
+  { value: "1h", label: "1 hour" },
+  { value: "24h", label: "24 hours" },
+  { value: "-1", label: "Forever (blocks eviction)" },
+  { value: "0", label: "Disabled (unload immediately)" }
+];

package/src/node/web-console-ui/context-window-utils.js

@@ -0,0 +1,262 @@
+import { CONTEXT_LOOKUP_SUGGESTION_LIMIT } from "./constants.js";
+
+export function formatContextWindow(value) {
+  const normalized = Number(value);
+  if (!Number.isFinite(normalized) || normalized <= 0) return "Unknown";
+  if (normalized >= 1000) {
+    const roundedK = normalized / 1000;
+    const rendered = Number.isInteger(roundedK) ? String(roundedK) : roundedK.toFixed(1).replace(/\.0$/, "");
+    return `${rendered}K`;
+  }
+  return String(normalized);
+}
+
+export function formatCompactContextWindowInput(value) {
+  const normalized = Number(value);
+  if (!Number.isFinite(normalized) || normalized <= 0) return "";
+
+  const units = [
+    { suffix: "M", divisor: 1000 * 1000 },
+    { suffix: "K", divisor: 1000 }
+  ];
+
+  for (const unit of units) {
+    if (normalized < unit.divisor) continue;
+    const scaledValue = normalized / unit.divisor;
+    const renderedValue = scaledValue >= 10
+      ? String(Math.round(scaledValue))
+      : scaledValue.toFixed(1).replace(/\.0$/, "");
+    return `${renderedValue}${unit.suffix}`;
+  }
+
+  return String(normalized);
+}
+
+export function formatEditableContextWindowInput(value) {
+  const normalizedValue = normalizeContextWindowInput(value);
+  const normalized = Number(normalizedValue);
+  if (!Number.isFinite(normalized) || normalized <= 0) return String(value || "");
+  return new Intl.NumberFormat().format(normalized);
+}
+
+export function buildProviderModelContextWindowMap(config = {}) {
+  const map = new Map();
+  for (const provider of (Array.isArray(config?.providers) ? config.providers : [])) {
+    const providerId = String(provider?.id || "").trim();
+    if (!providerId) continue;
+    for (const model of (Array.isArray(provider?.models) ? provider.models : [])) {
+      const modelId = String(model?.id || "").trim();
+      if (!modelId) continue;
+      map.set(`${providerId}/${modelId}`, {
+        ref: `${providerId}/${modelId}`,
+        providerId,
+        providerName: String(provider?.name || providerId).trim() || providerId,
+        modelId,
+        contextWindow: Number.isFinite(model?.contextWindow) ? Number(model.contextWindow) : null
+      });
+    }
+  }
+  return map;
+}
+
+export function buildAliasContextWindowSummary(aliasId = "", config = {}) {
+  const aliases = config?.modelAliases && typeof config.modelAliases === "object" && !Array.isArray(config.modelAliases)
+    ? config.modelAliases
+    : {};
+  const modelContextMap = buildProviderModelContextWindowMap(config);
+  const seenAliases = new Set();
+  const seenModelRefs = new Set();
+  const models = [];
+  const unknownRefs = [];
+
+  function visitRouteRef(ref) {
+    const normalizedRef = String(ref || "").trim();
+    if (!normalizedRef) return;
+
+    if (modelContextMap.has(normalizedRef)) {
+      if (seenModelRefs.has(normalizedRef)) return;
+      seenModelRefs.add(normalizedRef);
+      models.push(modelContextMap.get(normalizedRef));
+      return;
+    }
+
+    const normalizedAliasRef = normalizedRef.startsWith("alias:") ? normalizedRef.slice("alias:".length).trim() : normalizedRef;
+    if (!normalizedAliasRef || !Object.prototype.hasOwnProperty.call(aliases, normalizedAliasRef)) {
+      if (!unknownRefs.includes(normalizedRef)) unknownRefs.push(normalizedRef);
+      return;
+    }
+
+    if (seenAliases.has(normalizedAliasRef)) return;
+    seenAliases.add(normalizedAliasRef);
+    const nestedAlias = aliases[normalizedAliasRef];
+    for (const target of [...(nestedAlias?.targets || []), ...(nestedAlias?.fallbackTargets || [])]) {
+      visitRouteRef(target?.ref);
+    }
+  }
+
+  visitRouteRef(aliasId);
+
+  const knownModels = models.filter((model) => Number.isFinite(model?.contextWindow));
+  const uniqueWindows = [...new Set(knownModels.map((model) => model.contextWindow))].sort((left, right) => left - right);
+  const smallestContextWindow = uniqueWindows[0] ?? null;
+  const largestContextWindow = uniqueWindows[uniqueWindows.length - 1] ?? null;
+
+  return {
+    aliasId,
+    models,
+    unknownRefs,
+    smallestContextWindow,
+    largestContextWindow,
+    hasMixedContextWindows: uniqueWindows.length > 1
+  };
+}
+
+export function buildAliasGuideContextNotes(config = {}) {
+  const aliases = config?.modelAliases && typeof config.modelAliases === "object" && !Array.isArray(config.modelAliases)
+    ? config.modelAliases
+    : {};
+
+  return Object.keys(aliases)
+    .map((aliasId) => buildAliasContextWindowSummary(aliasId, config))
+    .filter((summary) => summary.hasMixedContextWindows)
+    .sort((left, right) => String(left.aliasId || "").localeCompare(String(right.aliasId || "")));
+}
+
+export function measureAliasSwitcherWidth(aliasLabel = "") {
+  const label = String(aliasLabel || "Select alias").trim() || "Select alias";
+  const fallbackWidth = Math.min(Math.max(Math.ceil(label.length * 8.5 + 62), 160), 520);
+
+  if (typeof document === "undefined") return fallbackWidth;
+
+  const canvas = measureAliasSwitcherWidth.canvas
+    || (measureAliasSwitcherWidth.canvas = document.createElement("canvas"));
+  const context = canvas.getContext("2d");
+  if (!context) return fallbackWidth;
+
+  context.font = '500 14px "Inter", "SF Pro Display", ui-sans-serif, system-ui, sans-serif';
+  return Math.min(Math.max(Math.ceil(context.measureText(label).width + 62), 160), 520);
+}
+
+export function buildLiteLlmContextSuggestionKey(result = {}) {
+  return `${String(result?.model || "").trim()}::${String(result?.contextWindow || "").trim()}`;
+}
+
+export function stripContextWindowFormatting(value) {
+  return String(value || "").trim().replace(/[.,\s_'`]/g, "");
+}
+
+export function normalizeContextWindowInput(value) {
+  const text = stripContextWindowFormatting(value);
+  if (!text) return "";
+  const parsed = Number.parseInt(text, 10);
+  return Number.isFinite(parsed) && parsed > 0 ? String(parsed) : text;
+}
+
+export function normalizeLiteLlmContextCandidate(candidate = {}) {
+  const model = String(candidate?.model || "").trim();
+  const provider = String(candidate?.provider || "").trim();
+  const mode = String(candidate?.mode || "").trim();
+  const contextWindow = Number(candidate?.contextWindow);
+  if (!Number.isFinite(contextWindow) || contextWindow <= 0) return null;
+  return {
+    model,
+    provider,
+    mode,
+    contextWindow: Math.floor(contextWindow),
+    ...(candidate?.capabilities ? { capabilities: candidate.capabilities } : {})
+  };
+}
+
+export function simplifyLiteLlmContextLabel(model = "", provider = "") {
+  const normalizedModel = String(model || "").trim();
+  const normalizedProvider = String(provider || "").trim();
+  if (!normalizedModel || !normalizedProvider) return normalizedModel;
+
+  const lowercaseModel = normalizedModel.toLowerCase();
+  const lowercaseProvider = normalizedProvider.toLowerCase();
+  const knownPrefixes = [`${lowercaseProvider}/`, `${lowercaseProvider}:`];
+
+  for (const prefix of knownPrefixes) {
+    if (!lowercaseModel.startsWith(prefix)) continue;
+    const simplifiedLabel = normalizedModel.slice(prefix.length).trim();
+    return simplifiedLabel || normalizedModel;
+  }
+
+  return normalizedModel;
+}
+
+export function buildLiteLlmContextLookupState(result = {}, { fallbackQuery = "" } = {}) {
+  const query = String(result?.query || fallbackQuery || "").trim();
+  const exactMatch = normalizeLiteLlmContextCandidate(result?.exactMatch);
+  const suggestions = (Array.isArray(result?.suggestions) ? result.suggestions : [])
+    .map((candidate) => normalizeLiteLlmContextCandidate(candidate))
+    .filter(Boolean);
+  const medianContextWindow = Number(result?.medianContextWindow);
+  const normalizedMedianContextWindow = Number.isFinite(medianContextWindow) && medianContextWindow > 0
+    ? Math.floor(medianContextWindow)
+    : (exactMatch?.contextWindow || null);
+
+  const options = [];
+  const seenKeys = new Set();
+
+  function addOption(option) {
+    if (!option?.key || seenKeys.has(option.key)) return;
+    seenKeys.add(option.key);
+    options.push(option);
+  }
+
+  if (exactMatch) {
+    addOption({
+      key: `exact::${buildLiteLlmContextSuggestionKey(exactMatch)}`,
+      label: simplifyLiteLlmContextLabel(exactMatch.model, exactMatch.provider) || "Exact match",
+      detail: exactMatch.provider ? `Exact · ${exactMatch.provider}` : "Exact",
+      contextWindow: exactMatch.contextWindow
+    });
+  }
+
+  for (const suggestion of suggestions) {
+    addOption({
+      key: buildLiteLlmContextSuggestionKey(suggestion),
+      label: simplifyLiteLlmContextLabel(suggestion.model, suggestion.provider) || "Suggestion",
+      detail: suggestion.provider || "Known model",
+      contextWindow: suggestion.contextWindow
+    });
+  }
+
+  return {
+    query,
+    exactMatch,
+    suggestions,
+    medianContextWindow: normalizedMedianContextWindow,
+    options,
+    status: options.length > 0 ? "ready" : "miss"
+  };
+}
+
+export function resolveLiteLlmPrefillContextWindow(result = {}) {
+  const state = buildLiteLlmContextLookupState(result);
+  if (state.exactMatch?.contextWindow) return String(state.exactMatch.contextWindow);
+  if (state.medianContextWindow) return String(state.medianContextWindow);
+  return "";
+}
+
+export function buildLiteLlmContextLookupMap(results = []) {
+  const lookupMap = new Map();
+  for (const result of (Array.isArray(results) ? results : [])) {
+    const state = buildLiteLlmContextLookupState(result);
+    if (!state.query) continue;
+    lookupMap.set(state.query, state);
+  }
+  return lookupMap;
+}
+
+export function buildLiteLlmModelContextWindowMap(results = []) {
+  const next = {};
+  for (const result of (Array.isArray(results) ? results : [])) {
+    const query = String(result?.query || "").trim();
+    const prefill = resolveLiteLlmPrefillContextWindow(result);
+    if (!query || !prefill) continue;
+    next[query] = Number(prefill);
+  }
+  return next;
+}

package/src/node/web-console-ui/hooks/use-reorder-layout-animation.js

@@ -0,0 +1,65 @@
+import { useLayoutEffect, useRef, useMemo } from "react";
+import { captureScrollSettleSnapshot, isScrollSettleSnapshotStable } from "../utils.js";
+
+export function useReorderLayoutAnimation(itemKeys = []) {
+  const itemRefs = useRef(new Map());
+  const refCallbacksRef = useRef(new Map());
+  const previousRectsRef = useRef(new Map());
+  const previousSignatureRef = useRef("");
+  const keySignature = JSON.stringify(itemKeys);
+
+  useLayoutEffect(() => {
+    const nextRects = new Map();
+    for (const itemKey of itemKeys) {
+      const node = itemRefs.current.get(itemKey);
+      if (node) nextRects.set(itemKey, node.getBoundingClientRect());
+    }
+
+    const prefersReducedMotion = typeof window !== "undefined"
+      && typeof window.matchMedia === "function"
+      && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    const shouldAnimate = previousSignatureRef.current !== "" && previousSignatureRef.current !== keySignature;
+
+    if (shouldAnimate && !prefersReducedMotion) {
+      for (const itemKey of itemKeys) {
+        const previousRect = previousRectsRef.current.get(itemKey);
+        const nextRect = nextRects.get(itemKey);
+        const node = itemRefs.current.get(itemKey);
+        if (!previousRect || !nextRect || !node) continue;
+        const deltaY = previousRect.top - nextRect.top;
+        if (Math.abs(deltaY) < 1 || typeof node.animate !== "function") continue;
+        node.animate(
+          [
+            { transform: `translateY(${deltaY}px)` },
+            { transform: "translateY(0)" }
+          ],
+          {
+            duration: 220,
+            easing: "cubic-bezier(0.22, 1, 0.36, 1)"
+          }
+        );
+      }
+    }
+
+    const activeKeys = new Set(itemKeys);
+    for (const itemKey of refCallbacksRef.current.keys()) {
+      if (!activeKeys.has(itemKey)) refCallbacksRef.current.delete(itemKey);
+    }
+
+    previousRectsRef.current = nextRects;
+    previousSignatureRef.current = keySignature;
+  }, [keySignature]);
+
+  return useMemo(() => (itemKey) => {
+    if (!refCallbacksRef.current.has(itemKey)) {
+      refCallbacksRef.current.set(itemKey, (node) => {
+        if (node) {
+          itemRefs.current.set(itemKey, node);
+          return;
+        }
+        itemRefs.current.delete(itemKey);
+      });
+    }
+    return refCallbacksRef.current.get(itemKey);
+  }, []);
+}