@oldsuns/pi-switch 0.3.2 → 0.3.4

package/web/public/appearance.js

@@ -0,0 +1,24 @@
+const STORAGE_KEY = "pi-switch.web-theme";
+
+export function getTheme() {
+  return document.documentElement.dataset.theme;
+}
+
+export function themeName() {
+  return getTheme() === "light" ? "Catppuccin Latte" : "Catppuccin Mocha";
+}
+
+function applyTheme(theme) {
+  document.documentElement.dataset.theme = theme;
+  document.querySelector('meta[name="color-scheme"]').content = theme;
+  document.querySelector('meta[name="theme-color"]').content =
+    getComputedStyle(document.documentElement).getPropertyValue("--base").trim();
+}
+
+export function setTheme(theme) {
+  if (theme !== "light" && theme !== "dark") throw new Error("Unsupported interface theme: " + theme);
+  localStorage.setItem(STORAGE_KEY, theme);
+  applyTheme(theme);
+}
+
+applyTheme(localStorage.getItem(STORAGE_KEY) ?? getTheme());

package/web/public/dialogs.js

@@ -0,0 +1,190 @@
+import { h, t, icon, iconButton, emptyState, searchInput, tokens } from "./ui.js";
+
+const cancel = () => '<button class="btn quiet" type="button" data-action="close-dialog">' + t("取消", "Cancel") + "</button>";
+const submit = (label) => '<button class="btn primary" type="submit" data-submit>' + label + "</button>";
+const jsonValue = (value) => value && Object.keys(value).length ? JSON.stringify(value, null, 2) : "";
+
+export function frame({ title, description = "", body, footer = "", form = "" }) {
+  return `${form ? '<form data-form="' + form + '">' : ""}
+    <div class="dialog-header"><div><h2 id="dialog-title">${h(title)}</h2>${description ? "<p>" + h(description) + "</p>" : ""}</div>${iconButton("close-dialog", "close", t("关闭", "Close"))}</div>
+    <div class="dialog-body"><div class="dialog-error" id="dialog-error" role="alert"></div>${body}</div>
+    <div class="dialog-footer">${footer || '<button class="btn" type="button" data-action="close-dialog" autofocus>' + t("完成", "Done") + "</button>"}</div>
+  ${form ? "</form>" : ""}`;
+}
+
+function field(name, label, value, options = {}) {
+  const id = "field-" + name;
+  const help = options.help ? `<span id="${id}-help" class="field-help">${h(options.help)}</span>` : "";
+  const attributes = `id="${id}" name="${name}" ${options.required ? "required" : ""} ${options.autofocus ? "autofocus" : ""} ${options.help ? 'aria-describedby="' + id + '-help"' : ""}`;
+  const input = options.textarea
+    ? `<textarea ${attributes} spellcheck="false" placeholder="${h(options.placeholder || "")}">${h(value)}</textarea>`
+    : `<input ${attributes} type="${options.type || "text"}" value="${h(value)}" placeholder="${h(options.placeholder || "")}" ${options.type === "number" ? 'min="' + (options.min ?? 0) + '" step="' + (options.step ?? "any") + '" max="9007199254740991" inputmode="decimal"' : 'autocomplete="off" spellcheck="false"'}>`;
+  return `<div class="form-field ${options.full ? "full" : ""}"><label for="${id}">${h(label)}${options.required ? ' <span class="required">*</span>' : ""}</label>${options.type === "password" ? '<div class="field-with-action">' + input + iconButton("reveal-key", "eye", t("显示 / 隐藏密钥", "Show / hide key")) + "</div>" : input}${help}<span class="field-error" data-field-error="${name}"></span></div>`;
+}
+
+function apiField(value, apiTypes, provider = false) {
+  return `<div class="form-field"><label for="field-api">API ${t("类型", "type")}</label><select id="field-api" name="api"><option value="">${provider ? t("由模型指定", "Set per model") : t("继承 Provider 设置", "Inherit from provider")}</option>${apiTypes.map((api) => '<option value="' + h(api) + '" ' + (value === api ? "selected" : "") + ">" + h(api) + "</option>").join("")}</select></div>`;
+}
+
+function numericFields(values) {
+  return field("contextWindow", t("上下文窗口", "Context window"), values.contextWindow, { type: "number", min: 1, step: 1, placeholder: "128000", help: t("留空使用 Pi 默认值", "Leave empty for Pi's default") })
+    + field("maxTokens", t("最大输出 Token", "Max output tokens"), values.maxTokens, { type: "number", min: 1, step: 1, placeholder: "16384", help: t("留空使用 Pi 默认值", "Leave empty for Pi's default") })
+    + field("inputCost", t("输入价格 · USD / 1M", "Input cost · USD / 1M"), values.inputCost, { type: "number", placeholder: "0" })
+    + field("outputCost", t("输出价格 · USD / 1M", "Output cost · USD / 1M"), values.outputCost, { type: "number", placeholder: "0" })
+    + field("cacheReadCost", t("缓存读取 · USD / 1M", "Cache read · USD / 1M"), values.cacheReadCost, { type: "number", placeholder: "0" })
+    + field("cacheWriteCost", t("缓存写入 · USD / 1M", "Cache write · USD / 1M"), values.cacheWriteCost, { type: "number", placeholder: "0" });
+}
+
+export function providerDialog(snapshot, provider) {
+  const value = provider ?? { id: "", baseUrl: "", api: "openai-completions", apiKey: "", authHeader: true, inPi: true, headers: null, compat: null };
+  const headers = Object.fromEntries(Object.entries(value.headers ?? {}).filter(([key]) => key.toLowerCase() !== "user-agent"));
+  const userAgent = Object.entries(value.headers ?? {}).find(([key]) => key.toLowerCase() === "user-agent")?.[1] ?? "";
+  const compat = Object.fromEntries(Object.entries(value.compat ?? {}).filter(([key]) => key !== "sendSessionAffinityHeaders"));
+  return frame({
+    title: provider ? t("编辑 Provider", "Edit provider") : t("新建 Provider", "New provider"),
+    description: t("连接你的模型服务，将配置保存在本地。", "Connect a model service and keep its configuration locally."),
+    form: "provider",
+    body: `<div class="form-grid">
+      ${field("id", "Provider ID", value.id, { required: true, autofocus: true, placeholder: "my-provider", help: t("在本地库中唯一的名称", "A unique name in your local library") })}
+      ${apiField(value.api, snapshot.apiTypes, true)}
+      ${field("baseUrl", "Base URL", value.baseUrl, { full: true, type: "url", placeholder: "https://api.example.com/v1", help: t("API 基础地址；留空使用内置默认地址。", "API base URL. Leave empty to use the built-in default.") })}
+      ${field("apiKey", "API Key", value.apiKey, { type: "password", full: true, placeholder: "$YOUR_API_KEY", help: t("支持环境变量引用；留空使用 Pi 的 auth.json / CLI 鉴权。", "Environment variable references are supported. Leave empty for Pi auth.json / CLI authentication.") })}
+    </div>
+    <div class="form-options"><label class="checkbox-label"><input name="inPi" type="checkbox" data-action="draft-inpi" ${value.inPi ? "checked" : ""}>${t("同步到 Pi", "Sync to Pi")}</label><label class="checkbox-label"><input name="authHeader" type="checkbox" ${value.authHeader ? "checked" : ""}>${t("发送 Authorization 请求头", "Send Authorization header")}</label></div>
+    ${snapshot.defaultProvider === provider?.id ? `<div class="banner" id="unsync-confirmation" hidden><div><p>${t("取消同步会清除当前默认模型，本地配置仍会保留。", "Removing this provider from Pi clears the current default model. The local configuration is kept.")}</p><label class="checkbox-label"><input name="confirmUnsync" type="checkbox">${t("确认清除默认模型", "I confirm clearing the default model")}</label></div></div>` : ""}
+    <details class="advanced"><summary>${t("高级设置 · Headers 与兼容性", "Advanced · Headers and compatibility")}</summary><div class="advanced-content"><div class="form-grid">
+      ${field("userAgent", "User-Agent", userAgent, { full: true, placeholder: t("可选", "Optional") })}
+      ${field("headers", t("其他 Headers · JSON 对象", "Other headers · JSON object"), jsonValue(headers), { full: true, textarea: true, placeholder: '{"X-Custom-Header": "value"}' })}
+      <div class="form-field full"><label class="checkbox-label"><input name="sessionAffinity" type="checkbox" ${value.compat?.sendSessionAffinityHeaders ? "checked" : ""}>${t("Session affinity · 会话亲和性", "Session affinity headers")}</label><span class="field-help">sendSessionAffinityHeaders</span></div>
+      ${field("compat", t("其他兼容配置 · JSON 对象", "Other compatibility options · JSON"), jsonValue(compat), { full: true, textarea: true, placeholder: "{}" })}
+    </div></div></details>`,
+    footer: cancel() + submit(t("保存 Provider", "Save provider")),
+  });
+}
+
+export function modelDialog(model, copy, apiTypes) {
+  const value = model ?? { id: "", name: "", api: "", reasoning: false, input: ["text"] };
+  return frame({
+    title: copy ? t("复制模型", "Duplicate model") : model ? t("编辑模型", "Edit model") : t("新建模型", "New model"),
+    description: t("配置模型标识、能力及参数。未修改的扩展字段会保留。", "Configure model identity, capabilities, and limits. Other extension fields are preserved."),
+    form: "model",
+    body: `<div class="form-grid">${field("id", "Model ID", value.id, { required: true, autofocus: true, placeholder: "model-id" })}${field("name", t("显示名称", "Display name"), value.name, { placeholder: t("可选，默认显示 Model ID", "Optional, defaults to model ID") })}${apiField(value.api, apiTypes)}<div class="form-field"><label>${t("模型能力", "Capabilities")}</label><label class="checkbox-label"><input name="reasoning" type="checkbox" data-action="draft-reasoning" ${value.reasoning ? "checked" : ""}>${t("支持推理", "Reasoning")}</label></div>
+      <div class="form-field full"><label>${t("输入类型", "Input types")}</label><div class="form-options"><label class="checkbox-label"><input name="input" type="checkbox" value="text" ${value.input.includes("text") ? "checked" : ""}>${t("文本", "Text")}</label><label class="checkbox-label"><input name="input" type="checkbox" value="image" ${value.input.includes("image") ? "checked" : ""}>${t("图像", "Image")}</label></div><span class="field-error" data-field-error="input"></span></div>
+    </div><details class="advanced"><summary>${t("上下文、输出限制与价格", "Context, output limits, and pricing")}</summary><div class="advanced-content"><div class="form-grid">${numericFields(value)}</div></div></details>
+    <div id="thinking-fields" ${value.reasoning ? "" : "hidden"}><details class="advanced"><summary>${t("思考等级映射", "Thinking level mapping")}</summary><div class="advanced-content">${field("thinkingLevelMap", "thinkingLevelMap · JSON", jsonValue(value.thinkingLevelMap), { textarea: true, help: t("将 Pi 思考等级映射到服务商参数，留空使用默认设置。", "Map Pi thinking levels to provider values. Leave empty for defaults."), placeholder: '{"low":"low","medium":"medium","high":"high"}' })}</div></details></div>`,
+    footer: `${model && !copy ? '<div class="form-extra-actions">' + iconButton("duplicate-model", "copy", t("复制模型", "Duplicate model"), 'data-model="' + h(model.id) + '"') + iconButton("remove-model", "trash", t("删除模型", "Delete model"), 'data-model="' + h(model.id) + '"', "danger") + "</div>" : ""}${cancel()}${submit(t("保存模型", "Save model"))}`,
+  });
+}
+
+export function defaultsDialog(values) {
+  return frame({ title: t("默认模型参数", "Default model parameters"), description: t("关闭 models.dev 元数据后，这些参数用于模型导入。", "Used for model imports when models.dev metadata is disabled."), form: "defaults", body: '<div class="form-grid">' + numericFields(values) + "</div>", footer: cancel() + submit(t("保存参数", "Save parameters")) });
+}
+
+export function confirmationDialog({ title, description, detail, label, danger = false }) {
+  return frame({ title, body: `<p class="confirm-description">${h(description)}</p>${detail ? '<div class="confirm-detail">' + h(detail) + "</div>" : ""}`, footer: `<button class="btn quiet" type="button" data-action="close-dialog" autofocus>${t("取消", "Cancel")}</button><button class="btn ${danger ? "danger" : "primary"}" type="button" data-action="confirm" data-submit>${h(label || t("确认", "Confirm"))}</button>` });
+}
+
+export function loadingDialog(title, description) {
+  return frame({ title, body: `<div class="loading-state" role="status"><span class="spinner"></span>${h(description || t("正在读取…", "Loading…"))}</div>` });
+}
+
+export function doctorDialog(checks) {
+  return frame({ title: t("配置检查", "Configuration checks"), description: checks.every((check) => check.ok) ? t("所有检查已通过。", "All checks passed.") : t("以下项目需要处理。", "Some items need your attention."), body: '<div class="check-list">' + checks.map((check) => `<div class="check-row">${icon(check.ok ? "checkCircle" : "warning", check.ok ? "green" : "red")}<div><h3>${h(check.label)}</h3><p>${h(check.detail)}</p></div></div>`).join("") + "</div>" });
+}
+
+export function backupsDialog(backups) {
+  return frame({ title: t("配置备份", "Configuration backups"), description: t("恢复前会先备份当前配置。最多保留最近 10 份备份。", "Your current configuration is backed up before restoration. Up to 10 backups are kept."), body: backups.length ? backups.map((backup) => `<div class="backup-row">${icon("file")}<code>${h(backup.name)}</code><button type="button" class="btn small" data-action="restore-backup" data-backup="${h(backup.name)}">${icon("history")}${t("恢复", "Restore")}</button></div>`).join("") : emptyState(t("还没有备份", "No backups yet"), t("保存配置时，会自动为你创建备份。", "A backup will be created when you save configuration."), "history") });
+}
+
+export function selectionDialog(context) {
+  const isModels = context.kind === "models";
+  const visible = context.items.filter((item) => item.id.toLowerCase().includes(context.query.toLowerCase()));
+  return frame({
+    title: isModels ? t("在线导入模型", "Import models") : t("从 OpenCode 导入", "Import from OpenCode"),
+    description: isModels ? context.providerId : t("选中的 provider 将导入本地库并同步到 Pi。OpenCode 原文件不会修改。", "Selected providers will be imported locally and synced to Pi. Your OpenCode file is kept intact."),
+    form: "import",
+    body: `<div class="import-tools">${searchInput("import-search", context.query, isModels ? t("搜索模型 ID…", "Search model IDs…") : t("搜索 Provider…", "Search providers…"))}<div class="inline-actions"><button type="button" class="text-button" data-action="select-all-import">${t("全选", "Select all")}</button><span class="subtle-divider">/</span><button type="button" class="text-button" data-action="clear-import">${t("清空", "Clear")}</button></div></div>
+      ${!isModels ? '<div class="field-help mono">' + h(context.path) + "</div>" : ""}
+      <div class="import-list">${visible.length ? visible.map((item) => `<label class="import-row"><input type="checkbox" data-action="import-selection" value="${h(item.id)}" ${context.selected.has(item.id) ? "checked" : ""}><span class="mono">${h(item.id)}</span>${item.existing ? '<span class="badge">' + t("已存在", "Existing") + "</span>" : isModels ? '<span class="badge accent">' + t("新模型", "New") + "</span>" : ""}</label>`).join("") : emptyState(t("没有匹配项", "No matches"), t("试试其他搜索关键词。", "Try another search."), "search")}</div>
+      <div class="import-count">${t("已选择", "Selected")} <span id="import-selected-count">${context.selected.size}</span> / ${context.items.length}</div>
+      ${isModels ? '<label class="checkbox-label"><input type="checkbox" data-action="import-overwrite" ' + (context.updateExisting ? "checked" : "") + ">" + t("更新已存在模型的元数据", "Update metadata for existing models") + "</label>" : ""}
+    `, footer: cancel() + submit(isModels ? t("导入选中模型", "Import selected models") : t("导入并同步到 Pi", "Import and sync to Pi")),
+  });
+}
+
+export function ambiguityDialog(ambiguities, warning) {
+  return frame({
+    title: t("选择模型元数据来源", "Choose model metadata"),
+    description: t("同一模型在不同来源中有不同配置，请选择要使用的版本。", "Sources describe this model differently. Choose the metadata to use."),
+    form: "ambiguities",
+    body: (warning ? '<div class="banner">' + h(warning) + "</div>" : "") + ambiguities.map((ambiguity, index) => `<div class="form-field ambiguity-field"><label for="candidate-${index}">${h(ambiguity.providerId)} / ${h(ambiguity.modelId)}</label><select id="candidate-${index}" name="candidate-${index}" required><option value="">${t("请选择来源…", "Select a source…")}</option>${ambiguity.candidates.map((candidate, candidateIndex) => '<option value="' + candidateIndex + '">' + h(candidate.providerId) + " · " + h(candidate.id) + " · " + tokens(candidate.config.contextWindow) + " context</option>").join("")}</select></div>`).join(""),
+    footer: cancel() + submit(t("确认并导入", "Confirm import")),
+  });
+}
+
+export function helpDialog() {
+  const rows = [
+    ["1 / 2 / 3 / 4", t("主页 / 配置 / 会话 / 设置", "Overview / Profiles / Sessions / Settings")],
+    ["/", t("聚焦当前列表搜索", "Focus the current search")],
+    ["↑ ↓ / j k", t("在当前列表中移动", "Move through the current list")],
+    ["← → / h l", t("切换 provider / 模型焦点，浏览会话树", "Move between providers / models, browse tree")],
+    ["n / e / d / c", t("新建 / 编辑 / 删除 / 复制配置", "New / edit / delete / duplicate configuration")],
+    ["Space", t("同步 provider / 设为默认 / 折叠分支", "Sync provider / set default / toggle branch")],
+    ["i", t("在线导入模型", "Import models")],
+    ["r / b", t("重载 / 浏览备份", "Reload / browse backups")],
+    ["v", t("检查配置；会话页切换阅读模式", "Validate; toggle reading on Sessions")],
+    ["n / u", t("会话页：仅命名 / 仅用户消息", "Sessions: named only / user messages only")],
+    ["Ctrl C", t("会话树中复制选中消息", "Copy the selected message in the tree")],
+    ["Esc", t("关闭对话框 / 返回列表", "Close dialog / return to list")],
+  ];
+  return frame({ title: t("熟悉的快捷键", "Familiar keyboard shortcuts"), description: t("保留 TUI 的操作习惯。输入文字时不会触发快捷键。", "Your TUI habits carry over. Shortcuts pause while typing."), body: '<div class="help-grid">' + rows.map(([keys, label]) => '<div class="help-row"><span>' + label + "</span><span><kbd>" + keys + "</kbd></span></div>").join("") + "</div>" });
+}
+
+export class FieldError extends Error {
+  constructor(field, message) { super(message); this.field = field; }
+}
+
+function objectValue(form, name) {
+  const value = form.elements[name].value.trim();
+  if (!value) return null;
+  let parsed;
+  try {
+    parsed = JSON.parse(value, (_key, item) => {
+      if (typeof item === "number" && !Number.isFinite(item)) throw new Error("Non-finite number");
+      return item;
+    });
+  } catch {
+    throw new FieldError(name, t("请填写有效的 JSON 对象。", "Enter a valid JSON object."));
+  }
+  if (!parsed || Array.isArray(parsed) || typeof parsed !== "object") throw new FieldError(name, t("这里需要 JSON 对象，不能是数组或其他值。", "Expected a JSON object, not an array or another value."));
+  return parsed;
+}
+
+export function providerDraft(form, original) {
+  const values = new FormData(form);
+  const headers = objectValue(form, "headers") ?? {};
+  if (Object.keys(headers).some((key) => key.toLowerCase() === "user-agent")) throw new FieldError("headers", t("请在上方独立的 User-Agent 字段填写此请求头。", "Use the dedicated User-Agent field above."));
+  const userAgent = values.get("userAgent").trim();
+  if (userAgent) headers["User-Agent"] = userAgent;
+  const compat = objectValue(form, "compat") ?? {};
+  if (Object.hasOwn(compat, "sendSessionAffinityHeaders")) throw new FieldError("compat", t("请使用上方 Session affinity 开关。", "Use the Session affinity checkbox above."));
+  if (values.has("sessionAffinity") || Object.hasOwn(original?.compat ?? {}, "sendSessionAffinityHeaders")) compat.sendSessionAffinityHeaders = values.has("sessionAffinity");
+  return { id: values.get("id").trim(), inPi: values.has("inPi"), baseUrl: values.get("baseUrl").trim(), api: values.get("api") || null, apiKey: values.get("apiKey"), authHeader: values.has("authHeader"), headers: Object.keys(headers).length ? headers : null, compat: Object.keys(compat).length ? compat : null };
+}
+
+export function numericDraft(form) {
+  return Object.fromEntries(["contextWindow", "maxTokens", "inputCost", "outputCost", "cacheReadCost", "cacheWriteCost"].map((name) => {
+    const input = form.elements[name];
+    if (!input.value.trim()) return [name, null];
+    const value = Number(input.value);
+    if (!Number.isFinite(value) || value < 0 || (["contextWindow", "maxTokens"].includes(name) && (!Number.isSafeInteger(value) || value === 0))) throw new FieldError(name, t("请填写有效的数值。", "Enter a valid number."));
+    return [name, value];
+  }));
+}
+
+export function modelDraft(form) {
+  const values = new FormData(form);
+  const input = values.getAll("input");
+  if (!input.length) throw new FieldError("input", t("至少选择一种输入类型。", "Select at least one input type."));
+  return { id: values.get("id").trim(), name: values.get("name").trim() || null, api: values.get("api") || null, reasoning: values.has("reasoning"), input, ...numericDraft(form), thinkingLevelMap: objectValue(form, "thinkingLevelMap") };
+}

package/web/public/favicon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><rect width="48" height="48" rx="13" fill="#cba6f7"/><path d="M12 16h26M18 16v19m14-19v15c0 3 1 4 4 4" stroke="#1e1e2e" stroke-width="4" stroke-linecap="round" fill="none"/></svg>

package/web/public/index.html

@@ -0,0 +1,23 @@
+<!doctype html>
+<html lang="zh-CN" data-theme="light">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="color-scheme" content="light">
+    <meta name="theme-color" content="#eff1f5">
+    <title>pi-switch · Your local model workspace</title>
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg">
+    <link rel="stylesheet" href="/styles.css">
+    <script type="module" src="/app.js"></script>
+  </head>
+  <body>
+    <a class="skip-link" href="#main" data-action="skip-to-content">跳到主要内容 / Skip to content</a>
+    <div id="app">
+      <div class="boot-state" role="status"><span class="brand-mark">π</span><p>pi-switch</p><span>正在读取本地配置 · Loading your workspace</span></div>
+    </div>
+    <div id="announcer" class="sr-only" role="status" aria-live="polite" aria-atomic="true"></div>
+    <div id="toast-region" class="toast-region" aria-live="polite" aria-atomic="true"></div>
+    <dialog id="dialog" aria-labelledby="dialog-title"></dialog>
+    <noscript>pi-switch Web 需要启用 JavaScript。 / JavaScript is required.</noscript>
+  </body>
+</html>

package/web/public/overview.js

@@ -0,0 +1,83 @@
+import { h, t, icon, initials, tint, number, tokens, modelName, emptyState, date } from "./ui.js";
+import { pageHeader } from "./shell.js";
+
+const RECENT_SESSION_LIMIT = 3;
+const PROVIDER_OVERVIEW_LIMIT = 4;
+
+function stat(label, value, name, note, color = "") {
+  return `<article class="stat-card"><div class="stat-heading"><span>${label}</span>${icon(name)}</div><div class="stat-value ${color}">${value}</div><div class="stat-note">${note}</div></article>`;
+}
+
+function defaultSelector(snapshot) {
+  const providers = snapshot.providers.filter((provider) => provider.inPi && provider.models.length);
+  const validDefault = providers.some((provider) => provider.id === snapshot.defaultProvider && provider.models.some((model) => model.id === snapshot.defaultModel));
+  return `<label class="default-selector" for="default-model-select"><span>${t("切换默认模型", "Switch default model")}</span>
+    <select id="default-model-select" data-action="choose-default" ${providers.length ? "" : "disabled"}>
+      <option value="" disabled ${validDefault ? "" : "selected"}>${t("选择已同步的模型…", "Choose a synced model…")}</option>
+      ${providers.map((provider) => `<optgroup label="${h(provider.id)}">${provider.models.map((model) => `<option value="${h(JSON.stringify([provider.id, model.id]))}" ${snapshot.defaultProvider === provider.id && snapshot.defaultModel === model.id ? "selected" : ""}>${h(modelName(model))}</option>`).join("")}</optgroup>`).join("")}
+    </select>
+  </label>`;
+}
+
+function defaultCard(snapshot) {
+  const provider = snapshot.providers.find((item) => item.id === snapshot.defaultProvider);
+  const model = provider?.models.find((item) => item.id === snapshot.defaultModel);
+  const available = Boolean(provider?.inPi && model);
+  const invalid = !available && Boolean(snapshot.defaultProvider || snapshot.defaultModel);
+  return `<section class="panel default-card">
+    <div class="panel-header"><h2>${icon("star")}${t("当前默认模型", "Default model")}</h2>
+      <span class="badge ${available ? "success" : invalid ? "warning" : ""}">${available ? icon("check") + t("已同步到 Pi", "Synced to Pi") : invalid ? t("需要检查", "Needs attention") : t("未设置", "Not set")}</span>
+    </div>
+    ${available ? `<div class="default-content"><div class="default-provider">${h(provider.id)}</div><div class="default-name">${h(modelName(model))}</div><div class="default-id">${h(model.id)}</div>
+      <div class="model-facts"><span class="model-fact">${icon("cpu")}${tokens(model.contextWindow)} ${t("上下文", "context")}</span><span class="model-fact">${icon("bolt")}${tokens(model.maxTokens)} ${t("输出", "output")}</span>${model.reasoning ? `<span class="model-fact">${icon("brain")}${t("推理", "Reasoning")}</span>` : ""}${model.input.includes("image") ? `<span class="model-fact">${icon("image")}${t("视觉", "Vision")}</span>` : ""}</div>
+    </div>` : `<div class="default-empty"><h3>${invalid ? t("默认模型当前不可用", "The default model is unavailable") : t("尚未选择默认模型", "No default model selected")}</h3><p>${invalid ? t("当前默认配置不在 Pi 的同步列表中，请重新选择或检查配置。", "The default is outside the synced configuration. Choose another model or validate your configuration.") : t("从下方选择模型，设置下一次 Pi 对话使用的默认值。", "Choose the model Pi should use for your next conversation.")}</p></div>`}
+    <div class="default-bottom">${defaultSelector(snapshot)}<a class="text-button" href="#profiles${provider ? "?provider=" + encodeURIComponent(provider.id) : ""}">${t("管理模型", "Manage models")}${icon("arrow")}</a></div>
+  </section>`;
+}
+
+function recentSessions(state) {
+  const recent = [...state.sessions].sort((left, right) => new Date(right.modifiedAt) - new Date(left.modifiedAt)).slice(0, RECENT_SESSION_LIMIT);
+  let content;
+  if (state.sessionsError) {
+    content = '<div class="panel-body"><div class="banner error" role="alert">' + h(state.sessionsError) + "</div></div>";
+  } else if (!state.sessionsLoaded) {
+    content = '<div class="loading-state" role="status"><span class="spinner"></span>' + t("正在读取会话…", "Loading sessions…") + "</div>";
+  } else if (!recent.length) {
+    content = emptyState(t("还没有会话记录", "No sessions yet"), t("使用 Pi 开始对话后，会话会出现在这里。", "Your conversations will appear here after using Pi."), "messages");
+  } else {
+    content = recent.map((session) => `<a class="recent-session" href="#sessions?session=${encodeURIComponent(session.id)}">
+      <span class="recent-session-icon">${icon("messages")}</span><span class="recent-session-content"><span class="item-title">${h(session.title)}</span><span class="recent-session-meta"><span class="recent-workspace" title="${h(session.cwd)}">${icon("folder")}${h(session.cwd.split(/[/\\]/).filter(Boolean).at(-1) || session.cwd)}</span><span>${session.messageCount} ${t("条消息", "messages")}</span><span>${date(session.modifiedAt, true)}</span></span></span>${icon("chevron")}
+    </a>`).join("");
+  }
+  return `<section class="panel recent-card"><div class="panel-header"><h2>${icon("messages")}${t("最近会话", "Recent sessions")}</h2><a class="text-button" href="#sessions">${t("查看全部", "View all")}${icon("arrow")}</a></div>${content}</section>`;
+}
+
+export function overview(state) {
+  const snapshot = state.snapshot;
+  const providers = snapshot.providers;
+  const synced = providers.filter((provider) => provider.inPi);
+  const modelCount = providers.reduce((sum, provider) => sum + provider.models.length, 0);
+  const syncedCount = synced.reduce((sum, provider) => sum + provider.models.length, 0);
+  const headerActions = `<button class="btn" data-action="doctor">${icon("shield")}${t("检查配置", "Validate")}</button><button class="btn primary" data-action="new-provider">${icon("plus")}${t("新建 Provider", "New provider")}</button>`;
+  return pageHeader(t("工作台", "Overview"), t("查看当前配置，切换默认模型，浏览最近的会话。", "Review your configuration, switch the default model, and browse recent sessions."), headerActions)
+    + `<div class="stats-grid">
+      ${stat("Providers", number(providers.length), "box", `${number(synced.length)} ${t("个已同步到 Pi", "synced to Pi")}`)}
+      ${stat(t("本地模型", "Local models"), number(modelCount), "cpu", t("所有 provider 的模型", "Across all providers"), "mauve")}
+      ${stat(t("Pi 可用模型", "Models in Pi"), number(syncedCount), "bolt", t("来自已同步的 provider", "From synced providers"), "green")}
+      ${stat(t("本地会话", "Local sessions"), state.sessionsError ? "—" : state.sessionsLoaded ? number(state.sessions.length) : "…", "messages", t("按工作目录整理", "Organized by workspace"))}
+    </div>
+    <div class="overview-grid">
+      ${defaultCard(snapshot)}
+      ${recentSessions(state)}
+      <section class="panel"><div class="panel-header"><h2>${t("Provider 概览", "Your providers")}<span class="count">${providers.length}</span></h2><a href="#profiles" class="text-button">${t("管理配置", "Manage")}${icon("arrow")}</a></div>
+        ${providers.length ? providers.slice(0, PROVIDER_OVERVIEW_LIMIT).map((provider) => `<a class="provider-summary" href="#profiles?provider=${encodeURIComponent(provider.id)}">
+          <span class="avatar ${tint(provider.id)}">${initials(provider.id)}</span><div><div class="item-title">${h(provider.id)}</div><div class="item-subtitle">${h(provider.baseUrl || provider.api)}</div></div><span class="provider-count">${provider.models.length} models</span><span class="badge ${provider.inPi ? "success" : ""}">${provider.inPi ? icon("check") + t("已同步", "Synced") : t("仅本地", "Local only")}</span>
+        </a>`).join("") : emptyState(t("添加你的第一个 Provider", "Add your first provider"), t("手动添加，或从已有的 OpenCode 配置导入。", "Add a provider or import an existing OpenCode configuration."), "box", `<button class="btn" data-action="opencode">${icon("download")}${t("从 OpenCode 导入", "Import from OpenCode")}</button>`)}
+      </section>
+      <section class="panel"><div class="panel-header"><h2>${t("常用操作", "Quick actions")}</h2></div><div class="quick-actions">
+        <button class="quick-action" data-action="opencode" aria-label="${t("从 OpenCode 导入", "Import from OpenCode")}">${icon("download")}<div><h3>${t("从 OpenCode 导入", "Import from OpenCode")}</h3><p>${t("选择已有配置并同步到 Pi", "Import selected providers and sync to Pi")}</p></div>${icon("chevron")}</button>
+        <button class="quick-action" data-action="backups" aria-label="${t("浏览配置备份", "Browse backups")}">${icon("history")}<div><h3>${t("浏览配置备份", "Browse backups")}</h3><p>${t("查看和恢复之前的配置", "View and restore saved configurations")}</p></div>${icon("chevron")}</button>
+        <button class="quick-action" data-action="reload" aria-label="${t("重新读取配置", "Reload configuration")}">${icon("refresh")}<div><h3>${t("重新读取配置", "Reload configuration")}</h3><p>${t("获取在 Pi 或 TUI 中的最新修改", "Read the latest changes made in Pi or the TUI")}</p></div>${icon("chevron")}</button>
+      </div></section>
+    </div>`;
+}

package/web/public/profile-order.js

@@ -0,0 +1,47 @@
+import { modelName } from "./ui.js";
+
+const names = new Intl.Collator("zh-CN", { sensitivity: "base", numeric: true });
+
+export function orderedItems(items, ordering) {
+  const ranks = new Map(ordering.order.map((id, index) => [id, index]));
+  const byPosition = (left, right) => ranks.get(left.id) - ranks.get(right.id);
+  if (ordering.sort === "custom") return [...items].sort(byPosition);
+  const direction = ordering.sort.endsWith("-desc") ? -1 : 1;
+  return [...items].sort((left, right) => {
+    let compared;
+    if (ordering.sort.startsWith("name-")) {
+      compared = names.compare(modelName(left), modelName(right));
+    } else {
+      const leftDate = ordering.addedAt[left.id];
+      const rightDate = ordering.addedAt[right.id];
+      if (leftDate == null || rightDate == null) {
+        if (leftDate == null && rightDate == null) return byPosition(left, right);
+        return leftDate == null ? 1 : -1;
+      }
+      compared = Date.parse(leftDate) - Date.parse(rightDate);
+    }
+    return compared * direction || byPosition(left, right);
+  });
+}
+
+export function orderSnapshot(snapshot) {
+  return {
+    ...snapshot,
+    providers: orderedItems(snapshot.providers, snapshot.ordering.providers).map((provider) => ({
+      ...provider, models: orderedItems(provider.models, snapshot.ordering.models[provider.id]),
+    })),
+  };
+}
+
+export function reorderedVisibleIds(items, visible, sourceId, insertionIndex) {
+  const visibleIds = visible.map((item) => item.id);
+  const sourceIndex = visibleIds.indexOf(sourceId);
+  if (sourceIndex < 0) throw new Error("The item is no longer in the visible list.");
+  if (!Number.isInteger(insertionIndex) || insertionIndex < 0 || insertionIndex > visibleIds.length) throw new Error("Invalid list insertion position.");
+  const reordered = visibleIds.filter((id) => id !== sourceId);
+  reordered.splice(insertionIndex - Number(insertionIndex > sourceIndex), 0, sourceId);
+  const visibleSet = new Set(visibleIds);
+  let index = 0;
+  // Filtered-out entries keep their slots when the visible subset is moved.
+  return items.map((item) => visibleSet.has(item.id) ? reordered[index++] : item.id);
+}

package/web/public/profiles.js

@@ -0,0 +1,134 @@
+import { h, t, icon, initials, tint, tokens, price, modelName, capabilities, emptyState, listSearch, iconButton } from "./ui.js";
+import { pageHeader, contextHelp } from "./shell.js";
+
+const API_KEY_EDGE_LENGTH = 4;
+
+function sortControl(scope, ordering, providerId = "") {
+  const id = scope === "providers" ? "provider-sort" : "model-sort";
+  const options = [
+    ["custom", t("自定义顺序", "Custom order")],
+    ["name-asc", t("名称 · A → Z", "Name · A → Z")],
+    ["name-desc", t("名称 · Z → A", "Name · Z → A")],
+    ["added-asc", t("添加时间升序", "Added ↑")],
+    ["added-desc", t("添加时间降序", "Added ↓")],
+  ];
+  return `<label class="profile-sort" for="${id}"><span ${scope === "providers" ? 'class="sr-only"' : ""}>${t("排序", "Sort")}</span><select id="${id}" data-action="profile-sort" data-scope="${scope}" data-provider="${h(providerId)}">${options.map(([value, label]) => `<option value="${value}" ${ordering.sort === value ? "selected" : ""}>${label}</option>`).join("")}</select></label>`;
+}
+
+function orderHandle({ scope, item, providerId = "" }) {
+  const attributes = `data-scope="${scope}" data-item="${h(item.id)}" data-provider="${h(providerId)}"`;
+  const name = modelName(item);
+  return `<button type="button" class="icon-button order-handle" draggable="true" data-order-handle ${attributes} aria-label="${h(t("拖动排序；Alt + ↑ ↓ 调整顺序", "Drag to reorder; Alt + arrows to move") + " · " + name)}" title="${t("拖动排序 · Alt + ↑ ↓", "Drag to reorder · Alt + ↑ ↓")}">${icon("grip")}</button>`;
+}
+
+export function selectedProvider(state) {
+  return state.snapshot.providers.find((provider) => provider.id === state.providerId);
+}
+
+export function visibleProviders(state) {
+  return state.snapshot.providers.filter((provider) =>
+    provider.id.toLowerCase().includes(state.providerQuery.toLowerCase())
+    && (state.providerFilter === "all" || provider.inPi === (state.providerFilter === "synced")));
+}
+
+export function visibleModels(state) {
+  const query = state.modelQuery.toLowerCase();
+  return (selectedProvider(state)?.models ?? []).filter((model) =>
+    model.id.toLowerCase().includes(query) || model.name?.toLowerCase().includes(query));
+}
+
+function providerSyncButton(provider) {
+  const label = t("同步到 Pi", "Sync to Pi") + " · " + provider.id;
+  const hint = provider.inPi
+    ? t("已同步到 Pi，点击取消同步", "Synced to Pi; click to remove")
+    : t("仅保存在本地，点击同步到 Pi", "Local only; click to sync to Pi");
+  return `<button type="button" class="icon-button provider-sync-button" data-action="sync-provider" data-provider="${h(provider.id)}" aria-pressed="${provider.inPi}" aria-label="${h(label)}" title="${h(hint)}">${icon(provider.inPi ? "check" : "unlink")}</button>`;
+}
+
+function providerList(state) {
+  const providers = visibleProviders(state);
+  const ordering = state.snapshot.ordering.providers;
+  const custom = ordering.sort === "custom";
+  const search = listSearch({ scope: "provider", query: state.providerQuery, open: state.providerSearchOpen, label: t("搜索 Provider", "Search providers") });
+  return `<section class="panel provider-panel" aria-label="${t("Provider 列表", "Provider list")}">
+    <div class="panel-header"><h2>PROVIDERS<span class="count">${state.snapshot.providers.length}</span></h2><div class="inline-actions">${search.button}${iconButton("new-provider", "plus", t("新建 Provider", "New provider"))}</div></div>
+    ${search.field}
+    <div class="provider-filters profile-filter-row">
+      <label class="profile-filter" for="provider-filter"><span class="sr-only">${t("同步状态筛选", "Filter by sync status")}</span><select id="provider-filter" data-action="provider-filter">
+        ${[["all", t("全部", "All")], ["synced", t("已同步", "Synced")], ["local", t("未同步", "Not synced")]].map(([value, label]) => `<option value="${value}" ${state.providerFilter === value ? "selected" : ""}>${label}</option>`).join("")}
+      </select></label>
+      ${sortControl("providers", ordering)}
+    </div>
+    <div class="provider-list" data-order-list data-order-scope="providers" data-order-provider="" aria-label="${t("选择 Provider", "Select provider")}">
+      ${providers.length ? providers.map((provider) => `<div class="provider-row" data-order-item data-order-scope="providers" data-order-id="${h(provider.id)}" data-order-provider="">${providerSyncButton(provider)}<button class="provider-option" data-action="select-provider" data-provider="${h(provider.id)}" aria-current="${provider.id === state.providerId}">
+        <span class="item-title">${h(provider.id)}</span>
+        ${provider.id === state.snapshot.defaultProvider ? icon("star") : ""}<span class="provider-count">${provider.models.length}</span>
+      </button>${custom ? orderHandle({ scope: "providers", item: provider }) : ""}</div>`).join("") : emptyState(t("没有匹配的 Provider", "No matching providers"), t("试试其他关键词或同步状态。", "Try another search or sync filter."), "search")}
+    </div>
+  </section>`;
+}
+
+function apiKeyPreview(value) {
+  if (!value) return "auth.json / CLI";
+  if (/^[$!]/.test(value)) return value;
+  const characters = Array.from(value);
+  const mask = "••••••••";
+  if (characters.length <= API_KEY_EDGE_LENGTH * 2) return mask;
+  return characters.slice(0, API_KEY_EDGE_LENGTH).join("") + mask + characters.slice(-API_KEY_EDGE_LENGTH).join("");
+}
+
+function providerInfo(provider) {
+  const apiKey = apiKeyPreview(provider.apiKey);
+  return `<section class="panel">
+    <div class="provider-info"><div class="provider-title-row">
+      <span class="avatar ${tint(provider.id)}">${initials(provider.id)}</span>
+      <div><h2>${h(provider.id)}</h2><div class="provider-title-label">${h(provider.api || t("按模型设置 API", "API set per model"))}</div></div>
+      <div class="inline-actions">
+        <button class="btn small" data-action="edit-provider">${icon("edit")}${t("编辑", "Edit")}</button>${iconButton("duplicate-provider", "copy", t("复制 Provider", "Duplicate provider"))}${iconButton("remove-provider", "trash", t("删除 Provider", "Delete provider"), "", "danger")}
+      </div>
+    </div><div class="provider-meta">
+      <div><div class="meta-label">BASE URL</div><div class="meta-value">${icon("globe")}${h(provider.baseUrl || "—")}</div></div>
+      <div><div class="meta-label">API KEY</div><div class="meta-value">${icon("key")}${h(apiKey)}</div></div>
+    </div></div>
+  </section>`;
+}
+
+function modelTable(state, provider) {
+  const models = visibleModels(state);
+  const ordering = state.snapshot.ordering.models[provider.id];
+  const custom = ordering.sort === "custom";
+  const search = listSearch({ scope: "model", query: state.modelQuery, open: state.modelSearchOpen, label: t("搜索模型", "Search models") });
+  return `<section class="panel models-panel" aria-label="${t("模型列表", "Models")}">
+    <div class="panel-header"><h2>${icon("cpu")}${t("模型", "Models")}<span class="count">${provider.models.length}</span></h2><div class="inline-actions">
+      <button class="btn small" data-action="import-models">${icon("download")}${t("在线导入", "Import models")}</button>${sortControl("models", ordering, provider.id)}${search.button}${iconButton("new-model", "plus", t("新建模型", "New model"))}
+    </div></div>
+    ${search.field}
+    ${models.length ? `<div class="table-wrap"><table><thead><tr><th>${t("模型名称", "MODEL")}</th><th>${t("能力", "CAPABILITIES")}</th><th>${t("上下文 / 输出", "CONTEXT / OUTPUT")}</th><th class="optional-column">${t("输入 / 输出价格", "INPUT / OUTPUT")}</th><th><span class="sr-only">${t("操作", "Actions")}</span></th></tr></thead><tbody data-order-list data-order-scope="models" data-order-provider="${h(provider.id)}">
+      ${models.map((model) => {
+        const isDefault = state.snapshot.defaultProvider === provider.id && state.snapshot.defaultModel === model.id;
+        return `<tr class="model-row ${state.modelId === model.id ? "selected" : ""}" tabindex="0" data-action="select-model" data-model="${h(model.id)}" data-order-item data-order-scope="models" data-order-id="${h(model.id)}" data-order-provider="${h(provider.id)}" aria-label="${h(modelName(model))}${isDefault ? " · " + t("默认模型", "Default model") : ""}">
+          <td><div class="model-title">${h(modelName(model))}${isDefault ? icon("star") : ""}</div><div class="model-id">${h(model.id)}</div></td>
+          <td><div class="capabilities">${capabilities(model)}</div></td>
+          <td class="number-cell">${tokens(model.contextWindow)}<span class="subtle-divider">/</span><span class="muted">${tokens(model.maxTokens)}</span></td>
+          <td class="number-cell optional-column">${price(model.inputCost)}<span class="subtle-divider">/</span>${price(model.outputCost)}</td>
+          <td><div class="model-actions">${custom ? orderHandle({ scope: "models", item: model, providerId: provider.id }) : ""}<span class="model-main-actions">
+            ${iconButton("default-model", "star", isDefault ? t("当前默认模型", "Current default model") : provider.inPi ? t("设为默认模型", "Set as default") + " · " + modelName(model) : t("先同步 Provider，再设为默认", "Sync this provider before setting a default"), 'data-model="' + h(model.id) + '" ' + (!provider.inPi || isDefault ? "disabled" : ""), isDefault ? "active" : "")}
+            ${iconButton("edit-model", "edit", t("编辑模型", "Edit model") + " · " + modelName(model), 'data-model="' + h(model.id) + '"')}
+            ${iconButton("remove-model", "trash", t("删除模型", "Delete model") + " · " + modelName(model), 'data-provider="' + h(provider.id) + '" data-model="' + h(model.id) + '"', "danger")}
+          </span></div></td>
+        </tr>`;
+      }).join("")}
+    </tbody></table></div>` : emptyState(provider.models.length ? t("没有匹配的模型", "No matching models") : t("给这个 Provider 添加模型", "Add models to this provider"), provider.models.length ? t("试试其他模型名称或 ID。", "Try another model name or ID.") : t("从服务商在线获取模型，或手动填写模型配置。", "Fetch available models from the provider, or add one manually."), "cpu", provider.models.length ? "" : `<button class="btn primary" data-action="import-models">${icon("download")}${t("在线导入模型", "Import models")}</button>`)}
+    <div class="models-foot"><span>${t("显示", "Showing")} ${models.length} / ${provider.models.length} ${t("个模型", "models")}</span><span>${t("价格单位：USD / 1M tokens", "Prices in USD / 1M tokens")}<span class="subtle-divider">·</span>${icon("star")} ${t("默认模型", "Default")}</span></div>
+  </section>`;
+}
+
+export function profiles(state) {
+  const provider = selectedProvider(state);
+  const header = pageHeader(t("模型配置", "Model configuration"), "", `<button class="btn" data-action="opencode">${icon("download")}${t("从 OpenCode 导入", "Import OpenCode")}</button><button class="btn primary" data-action="new-provider">${icon("plus")}${t("新建 Provider", "New provider")}</button>`);
+  if (!state.snapshot.providers.length) {
+    return header + `<section class="panel">${emptyState(t("添加你的第一个 Provider", "Add your first provider"), t("支持 OpenAI、Anthropic、Google 兼容 API，也可以连接自己的模型网关。", "Connect OpenAI, Anthropic, Google compatible APIs, or your own model gateway."), "sliders", `<div class="inline-actions"><button class="btn primary" data-action="new-provider">${icon("plus")}${t("新建 Provider", "New provider")}</button><button class="btn" data-action="opencode">${icon("download")}${t("从 OpenCode 导入", "Import OpenCode")}</button></div>`)}</section>`;
+  }
+  return header + `<div class="profiles-layout">${providerList(state)}<div class="provider-detail">${provider ? providerInfo(provider) + modelTable(state, provider) : `<section class="panel">${emptyState(t("选择一个 Provider", "Select a provider"), t("在左侧选择 provider 来管理模型。", "Select a provider to manage its models."), "sliders")}</section>`}</div></div>`
+    + contextHelp([["↑ ↓", t("选择", "Select")], ["Alt ↑ ↓", t("自定义排序", "Move in custom order")], ["n", t("新建", "New")], ["e", t("编辑", "Edit")], ["Space", t("同步 / 设为默认", "Sync / set default")], ["/", t("筛选", "Filter")], ["?", t("更多快捷键", "More shortcuts")]]);
+}