KimiSwitch Dev
3c3c18925d
Release / Version consistency (push) Canceled after 0s
Release / Build (macos-latest) (push) Canceled after 0s
Release / Build (ubuntu-latest) (push) Canceled after 0s
Release / Build (windows-latest) (push) Canceled after 0s
Release / Attach macOS install script (push) Canceled after 0s
711 lines
28 KiB
TypeScript
711 lines
28 KiB
TypeScript
import { useEffect, useState } from "react";
|
||
import { invoke } from "@tauri-apps/api/core";
|
||
import { useTranslation } from "../i18n";
|
||
import type { TranslationKey } from "../i18n/zh";
|
||
import type { ExperimentalEnvStatus, Model } from "../types";
|
||
import {
|
||
EXPERIMENTAL_FLAGS,
|
||
clearSecondaryModel,
|
||
forcedEnvValue,
|
||
getExperimentalFlags,
|
||
getSubagentModelPool,
|
||
isExperimentalFlagSet,
|
||
isFlagLockedByEnv,
|
||
isMasterEnvOn,
|
||
removeSubagentPoolEntry,
|
||
setExperimentalFlag,
|
||
setSecondaryModelOnly,
|
||
setSubagentDefault,
|
||
setSubagentForce,
|
||
upsertSubagentPoolEntry,
|
||
validateSubagentPool,
|
||
type ExperimentalFlagDef,
|
||
type PoolValidationError,
|
||
type ValidationErrorKey,
|
||
} from "../lib/subagent-settings";
|
||
import { Card, Toggle } from "./ui/controls";
|
||
import { applyModelsDevSnapshot, reloadModelsDev } from "../lib/models-dev";
|
||
|
||
/** Mirror of models_dev::ModelsDevStatus (camelCase over IPC). */
|
||
interface ModelsDevStatus {
|
||
source: "synced" | "builtin";
|
||
lastUpdated: string;
|
||
modelCount: number;
|
||
providerCount: number;
|
||
}
|
||
|
||
interface SubagentSettingsPageProps {
|
||
/** config.raw_other — hosts the `[experimental]` and `[secondary_model]` sections. */
|
||
rawOther: unknown;
|
||
/** All configured models (alias → entry) for the secondary-model picker. */
|
||
models: Record<string, Model>;
|
||
onChange: (nextRawOther: unknown) => void;
|
||
onBack: () => void;
|
||
}
|
||
|
||
// Effort tiers the CLI accepts; the value is forwarded verbatim upstream, and
|
||
// per-model support comes from `[models."<alias>"] support_efforts`.
|
||
const EFFORTS = ["low", "medium", "high", "xhigh", "max"] as const;
|
||
const EFFORT_LABELS: Record<(typeof EFFORTS)[number], TranslationKey> = {
|
||
low: "thinkingLow",
|
||
medium: "thinkingMedium",
|
||
high: "thinkingHigh",
|
||
max: "thinkingMax",
|
||
xhigh: "thinkingXHigh",
|
||
};
|
||
|
||
const FLAG_LABELS: Record<string, { name: TranslationKey; desc: TranslationKey }> = {
|
||
wait_for: { name: "flagWaitFor", desc: "flagWaitForDesc" },
|
||
"tool-select": { name: "flagToolSelect", desc: "flagToolSelectDesc" },
|
||
notify_user: { name: "flagNotifyUser", desc: "flagNotifyUserDesc" },
|
||
tower: { name: "flagTower", desc: "flagTowerDesc" },
|
||
subagent_fork: { name: "flagSubagentFork", desc: "flagSubagentForkDesc" },
|
||
};
|
||
|
||
/** Validation-error i18n key per engine rule, for the pre-write self-check. */
|
||
const POOL_ERROR_KEYS: Record<ValidationErrorKey, TranslationKey> = {
|
||
primaryReserved: "secondaryPoolErrorPrimaryReserved",
|
||
defaultRequired: "secondaryPoolErrorDefaultRequired",
|
||
defaultNotInPool: "secondaryPoolErrorDefaultNotInPool",
|
||
aliasNotInModels: "secondaryPoolErrorAliasNotInModels",
|
||
forceRequiresDefault: "secondaryPoolErrorForceRequiresDefault",
|
||
forceExcludesModels: "secondaryPoolErrorForceExcludesModels",
|
||
};
|
||
|
||
/**
|
||
* One row of the subagent model pool: default radio + alias + editable
|
||
* description (saved on blur/Enter via the parent's write chain) + remove.
|
||
* The description input keeps a local draft so typing is not persisted per
|
||
* keystroke; everything else is derived from `rawOther` on each render.
|
||
*/
|
||
function PoolEntryRow({
|
||
alias,
|
||
displayName,
|
||
description,
|
||
isDefault,
|
||
canRemove,
|
||
onSetDefault,
|
||
onSave,
|
||
onRemove,
|
||
}: {
|
||
alias: string;
|
||
displayName: string | null;
|
||
description: string;
|
||
isDefault: boolean;
|
||
canRemove: boolean;
|
||
onSetDefault: (alias: string) => void;
|
||
onSave: (alias: string, description: string) => void;
|
||
onRemove: (alias: string) => void;
|
||
}) {
|
||
const { t } = useTranslation();
|
||
const [draft, setDraft] = useState(description);
|
||
|
||
const commit = () => {
|
||
if (draft === description) return;
|
||
onSave(alias, draft);
|
||
};
|
||
|
||
return (
|
||
<div className="flex items-center gap-2 text-sm">
|
||
<input
|
||
type="radio"
|
||
checked={isDefault}
|
||
aria-label={t("setDefault")}
|
||
onChange={() => onSetDefault(alias)}
|
||
className="shrink-0 accent-blue-600 focus:ring-blue-500"
|
||
/>
|
||
<span className="shrink-0 font-medium text-content-primary">{alias}</span>
|
||
{displayName && (
|
||
<span className="shrink-0 text-xs text-content-muted">{displayName}</span>
|
||
)}
|
||
{isDefault && (
|
||
<span className="shrink-0 text-xs text-blue-600 dark:text-blue-400 border border-blue-500/30 rounded px-1">
|
||
{t("default")}
|
||
</span>
|
||
)}
|
||
<input
|
||
type="text"
|
||
value={draft}
|
||
placeholder={t("secondaryPoolDescPlaceholder")}
|
||
onChange={(e) => setDraft(e.target.value)}
|
||
onBlur={commit}
|
||
onKeyDown={(e) => {
|
||
if (e.key === "Enter") {
|
||
e.preventDefault();
|
||
(e.currentTarget as HTMLInputElement).blur();
|
||
} else if (e.key === "Escape") {
|
||
setDraft(description);
|
||
(e.currentTarget as HTMLInputElement).blur();
|
||
}
|
||
}}
|
||
className="flex-1 min-w-0 bg-input border border-border rounded px-2 py-1 text-xs focus:ring-2 focus:ring-blue-500 focus:outline-none"
|
||
/>
|
||
{canRemove && (
|
||
<button
|
||
type="button"
|
||
onClick={() => onRemove(alias)}
|
||
className="shrink-0 px-2 py-1 text-xs border border-border rounded hover:bg-hover-2 text-content-muted focus:ring-2 focus:ring-blue-500 focus:outline-none"
|
||
>
|
||
{t("secondaryPoolRemove")}
|
||
</button>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export function SubagentSettingsPage({
|
||
rawOther,
|
||
models,
|
||
onChange,
|
||
onBack,
|
||
}: SubagentSettingsPageProps) {
|
||
const { t } = useTranslation();
|
||
const [env, setEnv] = useState<ExperimentalEnvStatus | null>(null);
|
||
/** Pre-write validation failures (fallback guard; normal flows stay clear). */
|
||
const [poolErrors, setPoolErrors] = useState<PoolValidationError[]>([]);
|
||
/** Local draft for the "add pool entry" select (reset after each pick). */
|
||
const [addSelection, setAddSelection] = useState("");
|
||
/** WebUI-open button in flight; disables both buttons while non-null. */
|
||
const [webuiBusy, setWebuiBusy] = useState<"embedded" | "browser" | null>(null);
|
||
/** models.dev snapshot provenance (synced copy vs bundled asset). */
|
||
const [modelsDevStatus, setModelsDevStatus] = useState<ModelsDevStatus | null>(null);
|
||
/** Sync/restore button in flight; blocks the card's buttons. */
|
||
const [modelsDevBusy, setModelsDevBusy] = useState(false);
|
||
/** Last sync error (inline) and success flag (auto-cleared on next action). */
|
||
const [syncError, setSyncError] = useState<string | null>(null);
|
||
const [syncOk, setSyncOk] = useState(false);
|
||
|
||
useEffect(() => {
|
||
invoke<ExperimentalEnvStatus>("get_experimental_env_status")
|
||
.then(setEnv)
|
||
.catch(() => setEnv({}));
|
||
invoke<ModelsDevStatus>("get_models_dev_status")
|
||
.then(setModelsDevStatus)
|
||
.catch(() => setModelsDevStatus(null));
|
||
}, []);
|
||
|
||
const refreshModelsDevStatus = () => {
|
||
invoke<ModelsDevStatus>("get_models_dev_status")
|
||
.then(setModelsDevStatus)
|
||
.catch(() => {});
|
||
};
|
||
|
||
const handleModelsDevSync = async () => {
|
||
setModelsDevBusy(true);
|
||
setSyncError(null);
|
||
setSyncOk(false);
|
||
try {
|
||
const st = await invoke<ModelsDevStatus>("sync_models_dev");
|
||
setModelsDevStatus(st);
|
||
// Hot-swap the frontend index; the dashboard price index rebuilds on
|
||
// its next query (mtime-triggered on the Rust side).
|
||
const raw = await invoke<string | null>("get_models_dev_snapshot");
|
||
if (raw) applyModelsDevSnapshot(JSON.parse(raw) as Record<string, unknown>);
|
||
setSyncOk(true);
|
||
} catch (err) {
|
||
setSyncError(err instanceof Error ? err.message : String(err));
|
||
} finally {
|
||
setModelsDevBusy(false);
|
||
}
|
||
};
|
||
|
||
const handleModelsDevRestore = async () => {
|
||
if (!confirm(t("modelsDataRestoreConfirm"))) return;
|
||
setModelsDevBusy(true);
|
||
setSyncError(null);
|
||
setSyncOk(false);
|
||
try {
|
||
const st = await invoke<ModelsDevStatus>("reset_models_dev");
|
||
setModelsDevStatus(st);
|
||
await reloadModelsDev();
|
||
} catch (err) {
|
||
setSyncError(err instanceof Error ? err.message : String(err));
|
||
refreshModelsDevStatus();
|
||
} finally {
|
||
setModelsDevBusy(false);
|
||
}
|
||
};
|
||
|
||
const flags = getExperimentalFlags(rawOther);
|
||
const pool = getSubagentModelPool(rawOther);
|
||
const poolKeys = pool ? Object.keys(pool.models) : [];
|
||
// View selection: no/empty section or a bare legacy `model` → simple view;
|
||
// a `models` table or `default_model` → pool management view.
|
||
const isPoolView =
|
||
!!pool && (poolKeys.length > 0 || pool.defaultModel !== undefined);
|
||
// Effective default: v2 pool key first, legacy v1 recipe key as fallback.
|
||
const effectiveDefault = pool ? pool.defaultModel ?? pool.model : undefined;
|
||
// "Upgrade" only makes sense for the bare legacy form and when `force` is
|
||
// off — upgrading with force would create an invalid force+pool-table combo.
|
||
const canUpgrade = !!pool && !isPoolView && pool.model !== undefined && !pool.force;
|
||
const masterOn = isMasterEnvOn(env);
|
||
|
||
const aliasList = Object.keys(models).sort();
|
||
|
||
const aliasLabel = (alias: string): string =>
|
||
models[alias]?.display_name
|
||
? `${alias}（${models[alias].display_name}）`
|
||
: alias;
|
||
|
||
// Rows of the pool view: every `models` table key plus the effective default
|
||
// when it is not already in the table (the implicit single-entry form).
|
||
const implicitDefault =
|
||
pool && effectiveDefault && !(effectiveDefault in pool.models)
|
||
? [effectiveDefault]
|
||
: [];
|
||
const poolEntries = [...poolKeys, ...implicitDefault];
|
||
// Aliases that can still be added to the pool (not already in the table).
|
||
const addableAliases = aliasList.filter((a) => !(a in (pool?.models ?? {})));
|
||
|
||
// Inherited settings shown for the picked model: subagents bind the pointed
|
||
// entry directly (no patch fields), so context size and effort come from the
|
||
// model entry / global [thinking], not from a `[secondary_model]` patch.
|
||
const selectedEntry = effectiveDefault ? models[effectiveDefault] : undefined;
|
||
const inheritedContext = selectedEntry?.max_context_size;
|
||
const modelEffort =
|
||
selectedEntry &&
|
||
typeof (selectedEntry.raw_other as Record<string, unknown> | undefined)
|
||
?.default_effort === "string"
|
||
? ((selectedEntry.raw_other as Record<string, unknown>).default_effort as string)
|
||
: undefined;
|
||
const thinkingEffort = (() => {
|
||
const ro = rawOther as Record<string, unknown> | undefined;
|
||
const thinking = ro?.thinking as Record<string, unknown> | undefined;
|
||
return thinking && typeof thinking.effort === "string" && thinking.effort
|
||
? thinking.effort
|
||
: undefined;
|
||
})();
|
||
const inheritedEffort = modelEffort ?? thinkingEffort;
|
||
|
||
const fmtContext = (n: number): string =>
|
||
n >= 1_000_000
|
||
? `${(n / 1_000_000).toFixed(1)}M`
|
||
: n >= 1000
|
||
? `${Math.round(n / 1000)}K`
|
||
: String(n);
|
||
const effortLabel = (e: string): string => {
|
||
// Unknown values (hand-written config) are shown verbatim.
|
||
const key = EFFORT_LABELS[e as (typeof EFFORTS)[number]];
|
||
return key ? t(key) : e;
|
||
};
|
||
|
||
/**
|
||
* Fallback guard before any pool-related write: validate the *target* state
|
||
* against the engine rules (mirrored by `validateSubagentPool`) and block the
|
||
* write when it would produce an invalid config. Normal UI flows never trip
|
||
* this — it protects against stale/divergent configs.
|
||
*/
|
||
const validateWrite = (nextRaw: unknown): boolean => {
|
||
const nextPool = getSubagentModelPool(nextRaw);
|
||
const errors = nextPool ? validateSubagentPool(nextPool, aliasList) : [];
|
||
setPoolErrors(errors);
|
||
return errors.length === 0;
|
||
};
|
||
|
||
const handleUpgrade = () => {
|
||
if (!effectiveDefault) return;
|
||
const nextRaw = setSubagentDefault(rawOther, effectiveDefault);
|
||
if (validateWrite(nextRaw)) onChange(nextRaw);
|
||
};
|
||
|
||
const handleSetDefault = (alias: string) => {
|
||
if (alias === effectiveDefault) return;
|
||
const nextRaw = setSubagentDefault(rawOther, alias);
|
||
if (validateWrite(nextRaw)) onChange(nextRaw);
|
||
};
|
||
|
||
const handleSaveDescription = (alias: string, description: string) => {
|
||
const nextRaw = upsertSubagentPoolEntry(rawOther, alias, description);
|
||
if (validateWrite(nextRaw)) onChange(nextRaw);
|
||
};
|
||
|
||
const handleRemoveEntry = (alias: string) => {
|
||
const nextRaw = removeSubagentPoolEntry(rawOther, alias);
|
||
if (validateWrite(nextRaw)) onChange(nextRaw);
|
||
};
|
||
|
||
const handleAddEntry = (alias: string) => {
|
||
const nextRaw = upsertSubagentPoolEntry(rawOther, alias, "");
|
||
if (validateWrite(nextRaw)) onChange(nextRaw);
|
||
};
|
||
|
||
const handleForceChange = (next: boolean) => {
|
||
if (!pool) return;
|
||
// Turning force on drops the `models` table — confirm when it is non-empty.
|
||
if (next && Object.keys(pool.models).length > 0) {
|
||
if (!confirm(t("secondaryPoolForceConfirm"))) return;
|
||
}
|
||
const nextRaw = setSubagentForce(rawOther, next);
|
||
if (validateWrite(nextRaw)) onChange(nextRaw);
|
||
};
|
||
|
||
const handleClear = () => {
|
||
setPoolErrors([]);
|
||
onChange(clearSecondaryModel(rawOther));
|
||
};
|
||
|
||
const renderFlagRow = (flag: ExperimentalFlagDef) => {
|
||
const labels = FLAG_LABELS[flag.id];
|
||
// Only the flag's own env var locks the toggle. The master env force-ons
|
||
// undefined flags but an explicit config entry outranks it, so the user
|
||
// can still flip values here while it is set.
|
||
const locked = isFlagLockedByEnv(env, flag);
|
||
// Resolution order mirrors kimi-code 0.40.1 flagService:
|
||
// single-flag env > explicit [experimental] value (true *or* false) >
|
||
// master env (on-only) > upstream default (`defaultEnabled`).
|
||
const explicitlySet = isExperimentalFlagSet(rawOther, flag.id);
|
||
const on = locked
|
||
? forcedEnvValue(env, flag)
|
||
: explicitlySet
|
||
? flags[flag.id] === true
|
||
: masterOn
|
||
? true
|
||
: (flag.defaultEnabled ?? false);
|
||
// Turning the flag off only sticks via an explicit `false` when the
|
||
// fallback (master env or the upstream default) would otherwise keep it on.
|
||
const explicitFalse = masterOn || flag.defaultEnabled === true;
|
||
return (
|
||
<div key={flag.id} className="flex items-center gap-3">
|
||
<div className="flex-1 min-w-0">
|
||
<div className="flex items-center gap-2 text-sm text-content-primary">
|
||
{t(labels.name)}
|
||
{!locked && !explicitlySet && flag.defaultEnabled && (
|
||
<span className="shrink-0 text-xs text-blue-600 dark:text-blue-400 border border-blue-500/30 rounded px-1">
|
||
{t("flagDefaultOn")}
|
||
</span>
|
||
)}
|
||
</div>
|
||
<div className="text-xs text-content-muted">
|
||
{t(labels.desc)}
|
||
<code className="ml-2">{flag.envVar}</code>
|
||
</div>
|
||
</div>
|
||
{locked && (
|
||
<span className="text-xs text-content-muted shrink-0">
|
||
🔒 {t("lockedByEnv")}
|
||
</span>
|
||
)}
|
||
<Toggle
|
||
checked={on}
|
||
disabled={locked}
|
||
ariaLabel={t(labels.name)}
|
||
onChange={(checked) =>
|
||
onChange(
|
||
setExperimentalFlag(rawOther, flag.id, checked, { explicitFalse })
|
||
)
|
||
}
|
||
/>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
return (
|
||
<div className="h-full flex flex-col bg-app">
|
||
{/* Header */}
|
||
<div className="flex items-center gap-3 px-4 py-3 border-b border-border bg-panel">
|
||
<button
|
||
type="button"
|
||
onClick={onBack}
|
||
className="p-2 rounded-lg hover:bg-hover-2 focus:ring-2 focus:ring-blue-500 focus:outline-none"
|
||
>
|
||
← {t("back")}
|
||
</button>
|
||
<h2 className="font-semibold text-lg">{t("subagentSettings")}</h2>
|
||
</div>
|
||
|
||
<div className="flex-1 overflow-auto p-6 space-y-4">
|
||
{masterOn && (
|
||
<div className="bg-green-100 dark:bg-green-900/20 border border-green-300 dark:border-green-500/30 rounded-lg px-4 py-2 text-sm text-green-700 dark:text-green-400">
|
||
{t("masterEnvOnHint")}
|
||
</div>
|
||
)}
|
||
|
||
{/* Kimi Code WebUI quick open */}
|
||
<Card title={t("webuiSection")}>
|
||
<p className="text-xs text-content-muted">{t("webuiDesc")}</p>
|
||
<div className="mt-3 flex flex-wrap gap-2">
|
||
<button
|
||
type="button"
|
||
disabled={webuiBusy !== null}
|
||
onClick={async () => {
|
||
setWebuiBusy("embedded");
|
||
try {
|
||
await invoke("open_kimi_web_embedded");
|
||
} catch (err) {
|
||
alert(err instanceof Error ? err.message : String(err));
|
||
} finally {
|
||
setWebuiBusy(null);
|
||
}
|
||
}}
|
||
className="px-3 py-1.5 text-sm rounded bg-blue-600 text-white hover:bg-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed"
|
||
>
|
||
{webuiBusy === "embedded" ? t("webuiOpening") : t("openWebUIEmbedded")}
|
||
</button>
|
||
<button
|
||
type="button"
|
||
disabled={webuiBusy !== null}
|
||
onClick={async () => {
|
||
setWebuiBusy("browser");
|
||
try {
|
||
await invoke("open_kimi_web");
|
||
} catch (err) {
|
||
alert(err instanceof Error ? err.message : String(err));
|
||
} finally {
|
||
setWebuiBusy(null);
|
||
}
|
||
}}
|
||
className="px-3 py-1.5 text-sm border border-border rounded hover:bg-hover-2 focus:ring-2 focus:ring-blue-500 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed"
|
||
>
|
||
{webuiBusy === "browser" ? t("webuiOpening") : t("openWebUIBrowser")}
|
||
</button>
|
||
</div>
|
||
</Card>
|
||
|
||
{/* models.dev reference data: online sync / restore bundled */}
|
||
<Card title={t("modelsDataSection")}>
|
||
<p className="text-xs text-content-muted">{t("modelsDataDesc")}</p>
|
||
{modelsDevStatus && (
|
||
<div className="flex flex-wrap items-center gap-2 text-sm">
|
||
<span
|
||
className={`shrink-0 rounded border px-1.5 py-0.5 text-xs ${
|
||
modelsDevStatus.source === "synced"
|
||
? "border-blue-500/30 text-blue-600 dark:text-blue-400"
|
||
: "border-border text-content-muted"
|
||
}`}
|
||
>
|
||
{modelsDevStatus.source === "synced"
|
||
? t("modelsDataSourceSynced")
|
||
: t("modelsDataSourceBuiltin")}
|
||
</span>
|
||
<span className="text-xs text-content-muted">
|
||
{t("modelsDataStats", {
|
||
date: modelsDevStatus.lastUpdated,
|
||
models: modelsDevStatus.modelCount.toLocaleString(),
|
||
providers: modelsDevStatus.providerCount.toLocaleString(),
|
||
})}
|
||
</span>
|
||
</div>
|
||
)}
|
||
{syncOk && (
|
||
<div className="bg-green-100 dark:bg-green-900/20 border border-green-300 dark:border-green-500/30 rounded-lg px-3 py-2 text-xs text-green-700 dark:text-green-400">
|
||
{t("modelsDataSyncOk")}
|
||
</div>
|
||
)}
|
||
{syncError && (
|
||
<div
|
||
role="alert"
|
||
className="bg-red-100 dark:bg-red-900/20 border border-red-300 dark:border-red-500/30 rounded-lg px-3 py-2 text-xs text-red-700 dark:text-red-400"
|
||
>
|
||
{t("modelsDataSyncFailed")}: {syncError}
|
||
</div>
|
||
)}
|
||
<div className="flex flex-wrap gap-2">
|
||
<button
|
||
type="button"
|
||
disabled={modelsDevBusy}
|
||
onClick={handleModelsDevSync}
|
||
className="px-3 py-1.5 text-sm rounded bg-blue-600 text-white hover:bg-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed"
|
||
>
|
||
{modelsDevBusy ? t("modelsDataSyncing") : t("modelsDataSyncNow")}
|
||
</button>
|
||
{modelsDevStatus?.source === "synced" && (
|
||
<button
|
||
type="button"
|
||
disabled={modelsDevBusy}
|
||
onClick={handleModelsDevRestore}
|
||
className="px-3 py-1.5 text-sm border border-border rounded hover:bg-hover-2 focus:ring-2 focus:ring-blue-500 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed"
|
||
>
|
||
{t("modelsDataRestore")}
|
||
</button>
|
||
)}
|
||
</div>
|
||
</Card>
|
||
|
||
{/* Subagent: secondary model picker / pool + inherited settings */}
|
||
<Card title={t("secondaryModelSection")}>
|
||
{isPoolView && pool ? (
|
||
<>
|
||
{pool.force ? (
|
||
/* Force on: the `models` table was dropped — only the pinned
|
||
default is shown, entries and "add" are hidden. */
|
||
<div className="rounded-lg border border-border bg-input/40 px-3 py-2.5">
|
||
<div className="text-sm font-medium text-content-primary">
|
||
🔒{" "}
|
||
{t("secondaryPoolForceOn", {
|
||
alias: aliasLabel(effectiveDefault ?? ""),
|
||
})}
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<>
|
||
<div className="space-y-2">
|
||
{poolEntries.map((alias) => (
|
||
<PoolEntryRow
|
||
key={alias}
|
||
alias={alias}
|
||
displayName={models[alias]?.display_name ?? null}
|
||
description={pool.models[alias] ?? ""}
|
||
isDefault={alias === effectiveDefault}
|
||
canRemove={alias in pool.models}
|
||
onSetDefault={handleSetDefault}
|
||
onSave={handleSaveDescription}
|
||
onRemove={handleRemoveEntry}
|
||
/>
|
||
))}
|
||
</div>
|
||
<p className="text-xs text-content-muted">
|
||
{t("secondaryPoolDescHint")}
|
||
</p>
|
||
<label className="flex items-center gap-3 text-sm text-content-primary">
|
||
<span className="shrink-0 text-content-muted">
|
||
{t("secondaryPoolAddLabel")}
|
||
</span>
|
||
<select
|
||
className="flex-1 max-w-md bg-input border border-border rounded px-2 py-1 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
|
||
value={addSelection}
|
||
onChange={(e) => {
|
||
const alias = e.target.value;
|
||
setAddSelection("");
|
||
if (alias) handleAddEntry(alias);
|
||
}}
|
||
>
|
||
<option value="">{t("secondaryPoolAddPlaceholder")}</option>
|
||
{addableAliases.map((alias) => (
|
||
<option key={alias} value={alias}>
|
||
{aliasLabel(alias)}
|
||
</option>
|
||
))}
|
||
</select>
|
||
</label>
|
||
</>
|
||
)}
|
||
|
||
<div className="flex items-center gap-3">
|
||
<div className="flex-1 min-w-0">
|
||
<div className="text-sm text-content-primary">
|
||
{t("secondaryPoolForce")}
|
||
</div>
|
||
<div className="text-xs text-content-muted">
|
||
{t("secondaryPoolForceDesc")}
|
||
</div>
|
||
</div>
|
||
<Toggle
|
||
checked={pool.force}
|
||
ariaLabel={t("secondaryPoolForce")}
|
||
onChange={handleForceChange}
|
||
/>
|
||
</div>
|
||
|
||
<button
|
||
type="button"
|
||
onClick={handleClear}
|
||
className="px-3 py-1.5 text-sm border border-border rounded hover:bg-hover-2 focus:ring-2 focus:ring-blue-500 focus:outline-none"
|
||
>
|
||
{t("secondaryModelClear")}
|
||
</button>
|
||
</>
|
||
) : (
|
||
<>
|
||
<label className="flex items-center gap-3 text-sm text-content-primary">
|
||
<span className="shrink-0 text-content-muted">
|
||
{t("secondaryModelLabel")}
|
||
</span>
|
||
<select
|
||
className="flex-1 max-w-md bg-input border border-border rounded px-2 py-1 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
|
||
value={effectiveDefault ?? ""}
|
||
onChange={(e) => {
|
||
const alias = e.target.value;
|
||
if (alias === "") {
|
||
setPoolErrors([]);
|
||
onChange(clearSecondaryModel(rawOther));
|
||
} else {
|
||
// Only the model reference is persisted — no patch fields.
|
||
// Subagents bind the pointed entry directly and inherit
|
||
// its settings; usage records stay keyed on the real
|
||
// alias instead of the synthesized `__secondary__` entry.
|
||
const nextRaw = setSecondaryModelOnly(rawOther, alias);
|
||
if (validateWrite(nextRaw)) onChange(nextRaw);
|
||
}
|
||
}}
|
||
>
|
||
<option value="">{t("secondaryModelUnset")}</option>
|
||
{aliasList.map((alias) => (
|
||
<option key={alias} value={alias}>
|
||
{aliasLabel(alias)}
|
||
</option>
|
||
))}
|
||
</select>
|
||
{pool?.force && (
|
||
<span className="shrink-0 text-xs text-content-muted">
|
||
🔒 {t("secondaryModelForceBadge")}
|
||
</span>
|
||
)}
|
||
</label>
|
||
|
||
{canUpgrade && (
|
||
<div className="flex items-center gap-2">
|
||
<button
|
||
type="button"
|
||
onClick={handleUpgrade}
|
||
className="px-3 py-1.5 text-sm border border-border rounded hover:bg-hover-2 focus:ring-2 focus:ring-blue-500 focus:outline-none"
|
||
>
|
||
{t("secondaryPoolUpgrade")}
|
||
</button>
|
||
<span className="text-xs text-content-muted">
|
||
{t("secondaryPoolUpgradeDesc")}
|
||
</span>
|
||
</div>
|
||
)}
|
||
</>
|
||
)}
|
||
|
||
{poolErrors.length > 0 && (
|
||
<div
|
||
role="alert"
|
||
className="bg-red-100 dark:bg-red-900/20 border border-red-300 dark:border-red-500/30 rounded-lg px-3 py-2 text-sm text-red-700 dark:text-red-400 space-y-1"
|
||
>
|
||
{poolErrors.map((err, i) => (
|
||
<div key={i}>{t(POOL_ERROR_KEYS[err.key], err.params)}</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
|
||
<div className="border-t border-border" />
|
||
|
||
{effectiveDefault !== undefined && (
|
||
<div className="rounded-lg border border-border bg-input/40 px-3 py-2.5 space-y-2">
|
||
<div className="flex items-baseline gap-2 text-sm">
|
||
<span className="shrink-0 text-content-muted">
|
||
{t("secondaryModelInheritedContext")}
|
||
</span>
|
||
<span className="font-medium text-content-primary">
|
||
{inheritedContext ? fmtContext(inheritedContext) : "—"}
|
||
</span>
|
||
</div>
|
||
<div className="flex items-baseline gap-2 text-sm">
|
||
<span className="shrink-0 text-content-muted">
|
||
{t("secondaryModelInheritedEffort")}
|
||
</span>
|
||
<span className="font-medium text-content-primary">
|
||
{inheritedEffort ? effortLabel(inheritedEffort) : "—"}
|
||
</span>
|
||
</div>
|
||
<p className="text-xs text-content-muted">
|
||
{t("secondaryModelInheritedHint")}
|
||
</p>
|
||
</div>
|
||
)}
|
||
|
||
<p className="text-xs text-content-muted">{t("secondaryModelPriorityHint")}</p>
|
||
</Card>
|
||
|
||
{/* Experimental feature flags — one unified list */}
|
||
<Card title={t("experimentalFlags")}>
|
||
{EXPERIMENTAL_FLAGS.map(renderFlagRow)}
|
||
<p className="text-xs text-content-muted">{t("experimentalFlagsHint")}</p>
|
||
</Card>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|