@steerable/agent-shell-web 0.6.15

package/src/components/settings/llm-vendors.test.ts

@@ -0,0 +1,171 @@
+import { describe, expect, it } from 'vitest';
+import {
+  defaultModelForVendor,
+  FALLBACK_VENDORS,
+  inferVendorId,
+  llmProviderFromWireKind,
+  mergeVendorOptions,
+  modelPickerOptions,
+  modelPickerRows,
+  vendorLabel,
+  type VendorOption,
+} from './llm-vendors';
+import type { LlmSettings } from '@/lib/local-api';
+
+const vendors = mergeVendorOptions([
+  {
+    id: 'deepseek',
+    apiBaseUrl: 'https://api.deepseek.com',
+    envVars: [],
+    wireKind: 'openai_compat',
+    models: ['deepseek-v4-flash', 'deepseek-v4-pro'],
+  },
+  {
+    id: 'anthropic',
+    apiBaseUrl: 'https://api.anthropic.com',
+    envVars: [],
+    wireKind: 'anthropic',
+    models: ['claude-sonnet-4-6'],
+  },
+  {
+    id: 'azure',
+    apiBaseUrl: null,
+    envVars: ['AZURE_API_KEY'],
+    wireKind: 'openai_compat',
+    models: ['gpt-4o'],
+  },
+]);
+
+describe('mergeVendorOptions', () => {
+  it('pins featured vendors and injects ollama / custom', () => {
+    const ids = vendors.map((v) => v.id);
+    expect(ids.slice(0, 2)).toEqual(['deepseek', 'anthropic']);
+    expect(ids).toContain('ollama');
+    expect(ids).toContain('custom');
+    expect(ids).toContain('azure');
+    expect(vendorLabel('alibaba-cn')).toBe('阿里云百炼');
+  });
+
+  it('orders the fallback featured list by common usage', () => {
+    expect(
+      mergeVendorOptions(FALLBACK_VENDORS)
+        .filter((v) => v.featured)
+        .map((v) => v.id),
+    ).toEqual([
+      'deepseek',
+      'alibaba-cn',
+      'moonshotai-cn',
+      'zhipuai',
+      'openai',
+      'anthropic',
+      'google',
+      'openrouter',
+      'xai',
+      'groq',
+      'lmstudio',
+      'ollama',
+      'custom',
+    ]);
+  });
+});
+
+describe('inferVendorId', () => {
+  it('prefers an explicit vendorId when that vendor is listed', () => {
+    expect(
+      inferVendorId({ provider: 'openai-compat', vendorId: 'anthropic', model: 'x' }, vendors),
+    ).toBe('anthropic');
+  });
+
+  it('matches a saved DeepSeek URL back to the catalog vendor', () => {
+    const settings: LlmSettings = {
+      provider: 'openai-compat',
+      model: 'deepseek-v4-flash',
+      baseUrl: 'https://api.deepseek.com',
+    };
+    expect(inferVendorId(settings, vendors)).toBe('deepseek');
+  });
+
+  it('uses ollama for the local provider', () => {
+    expect(
+      inferVendorId(
+        { provider: 'ollama', model: 'llama3.1:8b', baseUrl: 'http://127.0.0.1:11434' },
+        vendors,
+      ),
+    ).toBe('ollama');
+  });
+});
+
+describe('llmProviderFromWireKind', () => {
+  it('maps sidecar kinds onto persisted provider ids', () => {
+    expect(llmProviderFromWireKind('openai_compat')).toBe('openai-compat');
+    expect(llmProviderFromWireKind('anthropic')).toBe('anthropic');
+    expect(llmProviderFromWireKind('google')).toBe('google');
+    expect(llmProviderFromWireKind('openai-responses')).toBe('openai-responses');
+    expect(llmProviderFromWireKind('ollama')).toBe('ollama');
+  });
+});
+
+describe('defaultModelForVendor', () => {
+  it('keeps the current model when it is on the vendor list', () => {
+    const vendor = vendors.find((v) => v.id === 'deepseek') as VendorOption;
+    expect(defaultModelForVendor(vendor, 'deepseek-v4-pro')).toBe('deepseek-v4-pro');
+  });
+
+  it('falls back to the first catalog model', () => {
+    const vendor = vendors.find((v) => v.id === 'deepseek') as VendorOption;
+    expect(defaultModelForVendor(vendor, 'other')).toBe('deepseek-v4-flash');
+  });
+});
+
+describe('modelPickerOptions', () => {
+  const catalog = ['deepseek-chat', 'deepseek-v4-flash', 'deepseek-v4-pro'];
+
+  it('uses the live gateway list and does not mix in catalog ids', () => {
+    expect(
+      modelPickerOptions(['deepseek-chat', 'deepseek-reasoner'], catalog, 'deepseek-chat', 'live'),
+    ).toEqual(['deepseek-chat', 'deepseek-reasoner']);
+  });
+
+  it('keeps the currently selected id even if the gateway omitted it', () => {
+    expect(
+      modelPickerOptions(['deepseek-chat'], catalog, 'deepseek-v4-flash', 'live'),
+    ).toEqual(['deepseek-chat', 'deepseek-v4-flash']);
+  });
+
+  it('falls back to the vendor catalog when the gateway listing is unavailable', () => {
+    expect(modelPickerOptions([], catalog, 'deepseek-chat', 'offline')).toEqual(catalog);
+  });
+});
+
+describe('modelPickerRows', () => {
+  const catalog = ['deepseek-chat', 'deepseek-v4-flash'];
+
+  it('keeps live capability rows and marks a missing current id as unknown', () => {
+    const live = [
+      {
+        id: 'deepseek-v4-pro',
+        name: 'DeepSeek V4 Pro',
+        window: 1_000_000,
+        modalities: ['text'],
+        reasoningLevels: ['high', 'max'],
+        pricing: null,
+        joinedFrom: 'deepseek/deepseek-v4-pro',
+        capabilities: 'known' as const,
+      },
+    ];
+    expect(modelPickerRows(live, catalog, 'deepseek-v4-flash', 'live')).toEqual([
+      { id: 'deepseek-v4-pro', entry: live[0] },
+      {
+        id: 'deepseek-v4-flash',
+        entry: expect.objectContaining({ id: 'deepseek-v4-flash', capabilities: 'unknown' }),
+      },
+    ]);
+  });
+
+  it('does not invent capabilities for the vendor catalog fallback', () => {
+    expect(modelPickerRows([], catalog, 'deepseek-chat', 'offline')).toEqual([
+      { id: 'deepseek-chat', entry: null },
+      { id: 'deepseek-v4-flash', entry: null },
+    ]);
+  });
+});

package/src/components/settings/llm-vendors.ts

@@ -0,0 +1,275 @@
+/**
+ * 设置页服务商选择：框架 sidecar `catalog.describe` 是目录真源，这里只做
+ * 常用置顶、中文标签、以及 sidecar 未就绪时的本地回退。
+ */
+
+import type {
+  CatalogProviderDescriptor,
+  GatewayModelEntry,
+  LlmProvider,
+  LlmSettings,
+} from '@/lib/local-api';
+import { unknownGatewayEntry } from '@/components/settings/model-capabilities';
+
+export interface VendorOption {
+  id: string;
+  label: string;
+  apiBaseUrl: string | null;
+  wireKind: string;
+  models: string[];
+  featured: boolean;
+  /** 本地注入（Ollama / 自定义），不在框架目录里。 */
+  local?: boolean;
+}
+
+export const FEATURED_VENDOR_IDS = [
+  'deepseek',
+  'alibaba-cn',
+  'moonshotai-cn',
+  'zhipuai',
+  'openai',
+  'anthropic',
+  'google',
+  'openrouter',
+  'xai',
+  'groq',
+  'lmstudio',
+] as const;
+
+export const VENDOR_LABELS: Record<string, string> = {
+  deepseek: 'DeepSeek',
+  openai: 'OpenAI',
+  anthropic: 'Anthropic',
+  google: 'Google Gemini',
+  openrouter: 'OpenRouter',
+  'alibaba-cn': '阿里云百炼',
+  'moonshotai-cn': '月之暗面 Kimi',
+  zhipuai: '智谱 GLM',
+  groq: 'Groq',
+  xai: 'xAI',
+  lmstudio: 'LM Studio',
+  ollama: 'Ollama (本地)',
+  custom: '自定义 OpenAI 兼容',
+};
+
+/** sidecar 未就绪时仍能选常用服务商。 */
+export const FALLBACK_VENDORS: CatalogProviderDescriptor[] = [
+  {
+    id: 'deepseek',
+    apiBaseUrl: 'https://api.deepseek.com',
+    envVars: ['DEEPSEEK_API_KEY'],
+    wireKind: 'openai_compat',
+    models: ['deepseek-chat', 'deepseek-v4-flash', 'deepseek-v4-pro'],
+  },
+  {
+    id: 'openai',
+    apiBaseUrl: 'https://api.openai.com/v1',
+    envVars: ['OPENAI_API_KEY'],
+    wireKind: 'openai_compat',
+    models: ['gpt-5.4', 'gpt-5.4-mini', 'gpt-4.1', 'gpt-4o'],
+  },
+  {
+    id: 'anthropic',
+    apiBaseUrl: 'https://api.anthropic.com',
+    envVars: ['ANTHROPIC_API_KEY'],
+    wireKind: 'anthropic',
+    models: ['claude-sonnet-4-6', 'claude-opus-4-7', 'claude-haiku-4-5'],
+  },
+  {
+    id: 'google',
+    apiBaseUrl: 'https://generativelanguage.googleapis.com',
+    envVars: ['GEMINI_API_KEY'],
+    wireKind: 'google',
+    models: ['gemini-3.5-flash', 'gemini-3.1-pro-preview', 'gemini-2.5-flash'],
+  },
+  {
+    id: 'openrouter',
+    apiBaseUrl: 'https://openrouter.ai/api/v1',
+    envVars: ['OPENROUTER_API_KEY'],
+    wireKind: 'openai_compat',
+    models: [],
+  },
+  {
+    id: 'alibaba-cn',
+    apiBaseUrl: 'https://dashscope.aliyuncs.com/compatible-mode/v1',
+    envVars: ['DASHSCOPE_API_KEY'],
+    wireKind: 'openai_compat',
+    models: ['qwen3.5-plus', 'qwen3-max', 'qwen-plus'],
+  },
+  {
+    id: 'moonshotai-cn',
+    apiBaseUrl: 'https://api.moonshot.cn/v1',
+    envVars: ['MOONSHOT_API_KEY'],
+    wireKind: 'openai_compat',
+    models: ['kimi-k2.5', 'kimi-k2.6'],
+  },
+  {
+    id: 'zhipuai',
+    apiBaseUrl: 'https://open.bigmodel.cn/api/paas/v4',
+    envVars: ['ZHIPU_API_KEY'],
+    wireKind: 'openai_compat',
+    models: ['glm-5', 'glm-5.3-flash'],
+  },
+  {
+    id: 'groq',
+    apiBaseUrl: 'https://api.groq.com/openai/v1',
+    envVars: ['GROQ_API_KEY'],
+    wireKind: 'openai_compat',
+    models: [],
+  },
+  {
+    id: 'xai',
+    apiBaseUrl: 'https://api.x.ai/v1',
+    envVars: ['XAI_API_KEY'],
+    wireKind: 'openai-responses',
+    models: ['grok-4', 'grok-3'],
+  },
+  {
+    id: 'lmstudio',
+    apiBaseUrl: 'http://127.0.0.1:1234/v1',
+    envVars: ['LMSTUDIO_API_KEY'],
+    wireKind: 'openai_compat',
+    models: [],
+  },
+];
+
+const LOCAL_VENDORS: VendorOption[] = [
+  {
+    id: 'ollama',
+    label: VENDOR_LABELS.ollama,
+    apiBaseUrl: 'http://127.0.0.1:11434',
+    wireKind: 'ollama',
+    models: ['llama3.1:8b', 'qwen2.5:14b', 'qwen2.5-coder:32b'],
+    featured: true,
+    local: true,
+  },
+  {
+    id: 'custom',
+    label: VENDOR_LABELS.custom,
+    apiBaseUrl: null,
+    wireKind: 'openai_compat',
+    models: [],
+    featured: true,
+    local: true,
+  },
+];
+
+export function vendorLabel(id: string): string {
+  return VENDOR_LABELS[id] ?? id;
+}
+
+export function llmProviderFromWireKind(wireKind: string): LlmProvider {
+  if (wireKind === 'ollama') return 'ollama';
+  if (wireKind === 'anthropic') return 'anthropic';
+  if (wireKind === 'google') return 'google';
+  if (wireKind === 'openai-responses') return 'openai-responses';
+  return 'openai-compat';
+}
+
+export function usesOpenAiCompatExtras(provider: LlmProvider): boolean {
+  return provider === 'openai-compat' || provider === 'openai-responses';
+}
+
+function hostOf(url: string | null | undefined): string | null {
+  if (!url) return null;
+  try {
+    return new URL(url.includes('://') ? url : `https://${url}`).hostname.toLowerCase();
+  } catch {
+    return null;
+  }
+}
+
+export function mergeVendorOptions(catalog: CatalogProviderDescriptor[]): VendorOption[] {
+  const featured = new Set<string>(FEATURED_VENDOR_IDS);
+  const fromCatalog: VendorOption[] = catalog.map((row) => ({
+    id: row.id,
+    label: vendorLabel(row.id),
+    apiBaseUrl: row.apiBaseUrl,
+    wireKind: row.wireKind,
+    models: row.models,
+    featured: featured.has(row.id),
+  }));
+  const seen = new Set(fromCatalog.map((v) => v.id));
+  const extras = LOCAL_VENDORS.filter((v) => !seen.has(v.id));
+  const featuredOrder = [...FEATURED_VENDOR_IDS, 'ollama', 'custom'];
+  const rank = (id: string) => {
+    const idx = featuredOrder.indexOf(id);
+    return idx === -1 ? featuredOrder.length : idx;
+  };
+  return [...fromCatalog, ...extras].sort((a, b) => {
+    const byFeatured = Number(b.featured) - Number(a.featured);
+    if (byFeatured !== 0) return byFeatured;
+    const byRank = rank(a.id) - rank(b.id);
+    if (byRank !== 0) return byRank;
+    return a.label.localeCompare(b.label, 'zh');
+  });
+}
+
+export function inferVendorId(settings: LlmSettings, vendors: VendorOption[]): string {
+  if (settings.vendorId && vendors.some((v) => v.id === settings.vendorId)) {
+    return settings.vendorId;
+  }
+  if (settings.provider === 'ollama') return 'ollama';
+  const host = hostOf(settings.baseUrl);
+  if (host) {
+    const hit = vendors.find((v) => hostOf(v.apiBaseUrl) === host);
+    if (hit) return hit.id;
+  }
+  if (settings.provider === 'anthropic') return 'anthropic';
+  if (settings.provider === 'google') return 'google';
+  if (settings.provider === 'openai-responses') return 'xai';
+  return 'custom';
+}
+
+export function defaultModelForVendor(vendor: VendorOption, current?: string): string {
+  if (current && vendor.models.includes(current)) return current;
+  return vendor.models[0] ?? current ?? '';
+}
+
+export type LiveCatalogStatus = 'idle' | 'live' | 'stale' | 'offline';
+
+/**
+ * 下拉优先用网关 `GET /models` 的实时目录；拉不到才回退服务商内置列表。
+ * 当前已选 id 始终保留，避免保存过的模型从列表里消失。
+ */
+export function modelPickerOptions(
+  liveModels: string[],
+  catalogModels: string[],
+  current: string | undefined,
+  status: LiveCatalogStatus,
+): string[] {
+  const useLive = (status === 'live' || status === 'stale') && liveModels.length > 0;
+  const primary = useLive ? liveModels : catalogModels;
+  return Array.from(new Set([...primary, current ?? ''].filter((id) => id.trim())));
+}
+
+export interface ModelPickerRow {
+  id: string;
+  entry: GatewayModelEntry | null;
+}
+
+/**
+ * 下拉行：实时目录带上 join 后的能力；当前 id 不在网关列表里时标成未识别。
+ * 回退服务商内置列表时没有核实过的能力，筹码留空。
+ */
+export function modelPickerRows(
+  liveEntries: GatewayModelEntry[],
+  catalogModels: string[],
+  current: string | undefined,
+  status: LiveCatalogStatus,
+): ModelPickerRow[] {
+  const useLive = (status === 'live' || status === 'stale') && liveEntries.length > 0;
+  const ids = modelPickerOptions(
+    liveEntries.map((entry) => entry.id),
+    catalogModels,
+    current,
+    status,
+  );
+  const byId = new Map(liveEntries.map((entry) => [entry.id, entry]));
+  return ids.map((id) => {
+    const entry = byId.get(id) ?? null;
+    if (entry) return { id, entry };
+    if (useLive) return { id, entry: unknownGatewayEntry(id) };
+    return { id, entry: null };
+  });
+}

package/src/components/settings/model-capabilities.test.ts

@@ -0,0 +1,88 @@
+import { describe, expect, it } from 'vitest';
+import type { GatewayModelEntry } from '@/lib/local-api';
+import {
+  formatContextWindow,
+  modelCapabilityChips,
+} from './model-capabilities';
+
+function entry(overrides: Partial<GatewayModelEntry> & Pick<GatewayModelEntry, 'id'>): GatewayModelEntry {
+  return {
+    name: null,
+    window: null,
+    modalities: [],
+    reasoningLevels: [],
+    pricing: null,
+    joinedFrom: null,
+    capabilities: 'unknown',
+    ...overrides,
+  };
+}
+
+describe('formatContextWindow', () => {
+  it('renders million- and thousand-token windows', () => {
+    expect(formatContextWindow(1_000_000)).toBe('1M');
+    expect(formatContextWindow(1_048_576)).toBe('1M');
+    expect(formatContextWindow(131_072)).toBe('131K');
+    expect(formatContextWindow(512)).toBe('512');
+    expect(formatContextWindow(null)).toBeNull();
+  });
+});
+
+describe('modelCapabilityChips', () => {
+  it('shows verified thinking, multimodal, and window chips', () => {
+    const chips = modelCapabilityChips(
+      entry({
+        id: 'gemini-3.5-flash',
+        window: 1_048_576,
+        modalities: ['audio', 'image', 'pdf', 'text', 'video'],
+        reasoningLevels: ['minimal', 'low', 'medium', 'high'],
+        joinedFrom: 'google/gemini-3.5-flash',
+        capabilities: 'known',
+      }),
+    );
+    expect(chips.map((chip) => chip.label)).toEqual([
+      '思考',
+      '图像',
+      'PDF',
+      '音频',
+      '视频',
+      '1M',
+    ]);
+  });
+
+  it('puts reasoning levels on the thinking chip in the selected summary', () => {
+    const chips = modelCapabilityChips(
+      entry({
+        id: 'deepseek-v4-pro',
+        window: 1_000_000,
+        modalities: ['text'],
+        reasoningLevels: ['high', 'max'],
+        joinedFrom: 'deepseek/deepseek-v4-pro',
+        capabilities: 'known',
+      }),
+      { detail: true },
+    );
+    expect(chips.map((chip) => chip.label)).toEqual(['思考（high / max）', '1M']);
+  });
+
+  it('does not invent thinking or image chips from heuristic unknown rows', () => {
+    expect(
+      modelCapabilityChips(
+        entry({
+          id: 'deepseek-flash',
+          window: 131_072,
+          modalities: ['text'],
+          reasoningLevels: [],
+          capabilities: 'unknown',
+        }),
+      ),
+    ).toEqual([
+      expect.objectContaining({ key: 'unknown', label: '未识别' }),
+    ]);
+  });
+
+  it('omits chips when capabilities was not reported', () => {
+    expect(modelCapabilityChips({ id: 'custom-model' } as GatewayModelEntry)).toEqual([]);
+    expect(modelCapabilityChips(null)).toEqual([]);
+  });
+});

package/src/components/settings/model-capabilities.ts

@@ -0,0 +1,123 @@
+import type { GatewayModelEntry } from '@/lib/local-api';
+
+/**
+ * 设置页 / 聊天模型选择器共用的能力展示。
+ *
+ * 只把 `capabilities === 'known'`（models.dev 叶节点 join 上）当成核实过的
+ * 事实。`unknown` 时 wire 仍可能带上前缀启发式的 window / text 模态，那些
+ * 不能画成「思考」「图像」。文本是默认输入，不单独占一枚筹码。
+ */
+
+export interface ModelCapabilityChip {
+  key: string;
+  label: string;
+  title: string;
+  kind: 'reasoning' | 'modality' | 'window' | 'unknown';
+}
+
+const MODALITY_ORDER = ['image', 'pdf', 'audio', 'video'] as const;
+
+const MODALITY_LABELS: Record<(typeof MODALITY_ORDER)[number], string> = {
+  image: '图像',
+  pdf: 'PDF',
+  audio: '音频',
+  video: '视频',
+};
+
+const MODALITY_TITLES: Record<(typeof MODALITY_ORDER)[number], string> = {
+  image: '支持图像输入',
+  pdf: '支持 PDF 输入',
+  audio: '支持音频输入',
+  video: '支持视频输入',
+};
+
+/** 上下文窗口：1_000_000 → 1M，131_072 → 131K。 */
+export function formatContextWindow(window: number | null | undefined): string | null {
+  if (window == null || window <= 0) return null;
+  if (window >= 1_000_000) {
+    const millions = Number((window / 1_000_000).toFixed(1));
+    return `${Number.isInteger(millions) ? String(millions) : millions.toFixed(1)}M`;
+  }
+  if (window >= 1_000) return `${Math.round(window / 1_000)}K`;
+  return String(window);
+}
+
+function unknownChip(): ModelCapabilityChip {
+  return {
+    key: 'unknown',
+    label: '未识别',
+    title: '网关目录未匹配到该 id，思考档位与多模态未核实。',
+    kind: 'unknown',
+  };
+}
+
+/**
+ * @param detail 选中摘要用：思考筹码带上档位，如 `思考（high / max）`。
+ */
+export function modelCapabilityChips(
+  entry: GatewayModelEntry | null | undefined,
+  options?: { detail?: boolean },
+): ModelCapabilityChip[] {
+  if (!entry) return [];
+  if (entry.capabilities === 'unknown') return [unknownChip()];
+  if (entry.capabilities !== 'known') return [];
+
+  const chips: ModelCapabilityChip[] = [];
+  const levels = entry.reasoningLevels ?? [];
+  if (levels.length > 0) {
+    const joined = levels.join(' / ');
+    chips.push({
+      key: 'reasoning',
+      label: options?.detail ? `思考（${joined}）` : '思考',
+      title: `支持思考档位：${joined}`,
+      kind: 'reasoning',
+    });
+  }
+
+  const seen = new Set<string>();
+  for (const modality of MODALITY_ORDER) {
+    if (!(entry.modalities ?? []).includes(modality)) continue;
+    seen.add(modality);
+    chips.push({
+      key: modality,
+      label: MODALITY_LABELS[modality],
+      title: MODALITY_TITLES[modality],
+      kind: 'modality',
+    });
+  }
+  for (const modality of entry.modalities ?? []) {
+    const key = modality.toLowerCase();
+    if (key === 'text' || seen.has(key) || key in MODALITY_LABELS) continue;
+    seen.add(key);
+    chips.push({
+      key: key,
+      label: modality,
+      title: `输入模态：${modality}`,
+      kind: 'modality',
+    });
+  }
+
+  const windowLabel = formatContextWindow(entry.window);
+  if (windowLabel) {
+    chips.push({
+      key: 'window',
+      label: windowLabel,
+      title: `上下文窗口 ${entry.window} tokens`,
+      kind: 'window',
+    });
+  }
+  return chips;
+}
+
+export function unknownGatewayEntry(id: string): GatewayModelEntry {
+  return {
+    id,
+    name: null,
+    window: null,
+    modalities: [],
+    reasoningLevels: [],
+    pricing: null,
+    joinedFrom: null,
+    capabilities: 'unknown',
+  };
+}