@nextclaw/ui 0.14.0 → 0.14.1-beta.1

package/src/features/settings/utils/provider-form-model.utils.ts

@@ -0,0 +1,101 @@
+import type { ThinkingLevel } from '@/shared/lib/api';
+import {
+  THINKING_LEVELS,
+  toProviderLocalModelId,
+  type ModelConfig
+} from './provider-form-support.utils';
+
+type AddProviderModelResult = {
+  models: string[];
+  draft: string;
+  errorKey?: 'providerModelInvalidProviderPrefix';
+};
+
+export function addProviderLocalModel(models: string[], draft: string, aliases: string[]): AddProviderModelResult {
+  const next = toProviderLocalModelId(draft, aliases);
+  if (!next) {
+    return { models, draft };
+  }
+  if (next.includes('/')) {
+    return { models, draft, errorKey: 'providerModelInvalidProviderPrefix' };
+  }
+  if (models.includes(next)) {
+    return { models, draft: '' };
+  }
+  return { models: [...models, next], draft: '' };
+}
+
+export function removeProviderLocalModel(models: string[], modelConfig: ModelConfig, modelName: string): {
+  models: string[];
+  modelConfig: ModelConfig;
+} {
+  const nextConfig = { ...modelConfig };
+  delete nextConfig[modelName];
+  return {
+    models: models.filter((name) => name !== modelName),
+    modelConfig: nextConfig
+  };
+}
+
+export function toggleModelThinkingLevelInConfig(modelConfig: ModelConfig, modelName: string, level: ThinkingLevel): ModelConfig {
+  const currentEntry = modelConfig[modelName];
+  const currentLevels = currentEntry?.thinking?.supported ?? [];
+  const nextLevels = currentLevels.includes(level)
+    ? currentLevels.filter((item) => item !== level)
+    : THINKING_LEVELS.filter((item) => item === level || currentLevels.includes(item));
+  const nextDefault =
+    currentEntry?.thinking?.default && nextLevels.includes(currentEntry.thinking.default)
+      ? currentEntry.thinking.default
+      : undefined;
+  const nextEntry = {
+    ...currentEntry,
+    thinking:
+      nextLevels.length > 0
+        ? nextDefault
+          ? { supported: nextLevels, default: nextDefault }
+          : { supported: nextLevels }
+        : undefined
+  };
+  const next = { ...modelConfig };
+  if (nextEntry.thinking || nextEntry.vision === true) {
+    next[modelName] = nextEntry;
+  } else {
+    delete next[modelName];
+  }
+  return next;
+}
+
+export function setModelThinkingDefaultInConfig(modelConfig: ModelConfig, modelName: string, level: ThinkingLevel | null): ModelConfig {
+  const currentEntry = modelConfig[modelName];
+  const currentThinking = currentEntry?.thinking;
+  if (!currentThinking || currentThinking.supported.length === 0) {
+    return modelConfig;
+  }
+  if (level && !currentThinking.supported.includes(level)) {
+    return modelConfig;
+  }
+  return {
+    ...modelConfig,
+    [modelName]: {
+      ...currentEntry,
+      thinking: level
+        ? { supported: currentThinking.supported, default: level }
+        : { supported: currentThinking.supported }
+    }
+  };
+}
+
+export function setModelVisionInConfig(modelConfig: ModelConfig, modelName: string, vision: boolean): ModelConfig {
+  const currentEntry = modelConfig[modelName];
+  const nextEntry = {
+    ...currentEntry,
+    vision: vision ? true : undefined
+  };
+  const next = { ...modelConfig };
+  if (nextEntry.thinking || nextEntry.vision === true) {
+    next[modelName] = nextEntry;
+  } else {
+    delete next[modelName];
+  }
+  return next;
+}

package/src/features/settings/utils/provider-form-support.utils.ts

@@ -1,6 +1,11 @@
 import { t } from '@/shared/lib/i18n';
 import type { getLanguage } from '@/shared/lib/i18n';
-import type { ProviderConfigView, ThinkingLevel } from '@/shared/lib/api';
+import type {
+  ProviderConfigUpdate,
+  ProviderConfigView,
+  ProviderConnectionTestRequest,
+  ThinkingLevel
+} from '@/shared/lib/api';
 import {
   normalizeModelConfigMap,
   normalizeThinkingLevels,
@@ -14,6 +19,35 @@ type ModelConfig = Record<string, ModelConfigEntry>;
 type ProviderAuthMethodOption = {
   id: string;
 };
+type ProviderFormChangeInput = {
+  providerName?: string;
+  apiKey: string;
+  apiBase: string;
+  currentApiBase: string;
+  extraHeaders: Record<string, string> | null;
+  currentHeaders: Record<string, string> | null;
+  supportsWireApi: boolean;
+  wireApi: WireApiType;
+  currentWireApi: WireApiType;
+  models: string[];
+  currentEditableModels: string[];
+  modelConfig: ModelConfig;
+  currentModelConfig: ModelConfig;
+  providerDisplayName: string;
+  effectiveDisplayName: string;
+};
+type ProviderSavePayloadInput = ProviderFormChangeInput & {
+  defaultApiBase: string;
+};
+type ProviderConnectionTestPayloadInput = {
+  apiKey: string;
+  apiBase: string;
+  extraHeaders: Record<string, string> | null;
+  supportsWireApi: boolean;
+  wireApi: WireApiType;
+  models: string[];
+  providerModelAliases: string[];
+};
 
 const EMPTY_PROVIDER_CONFIG: ProviderConfigView = {
   providerId: '',
@@ -196,6 +230,70 @@ function modelConfigEqual(left: ModelConfig, right: ModelConfig): boolean {
   return true;
 }
 
+function hasProviderFormChanges(input: ProviderFormChangeInput): boolean {
+  if (!input.providerName) {
+    return false;
+  }
+  return (
+    input.apiKey.trim().length > 0 ||
+    input.apiBase.trim() !== input.currentApiBase.trim() ||
+    !headersEqual(input.extraHeaders, input.currentHeaders) ||
+    (input.supportsWireApi && input.wireApi !== input.currentWireApi) ||
+    !modelListsEqual(input.models, input.currentEditableModels) ||
+    !modelConfigEqual(input.modelConfig, input.currentModelConfig) ||
+    input.providerDisplayName.trim() !== input.effectiveDisplayName
+  );
+}
+
+function buildProviderSavePayload(input: ProviderSavePayloadInput): ProviderConfigUpdate {
+  const payload: ProviderConfigUpdate = {};
+  const trimmedApiKey = input.apiKey.trim();
+  const trimmedApiBase = input.apiBase.trim();
+  const normalizedHeaders = normalizeHeaders(input.extraHeaders);
+  const trimmedDisplayName = input.providerDisplayName.trim();
+
+  if (trimmedDisplayName !== input.effectiveDisplayName) {
+    payload.displayName = trimmedDisplayName.length > 0 ? trimmedDisplayName : null;
+  }
+  if (trimmedApiKey.length > 0) {
+    payload.apiKey = trimmedApiKey;
+  }
+  if (trimmedApiBase !== input.currentApiBase.trim()) {
+    payload.apiBase = trimmedApiBase.length > 0 && trimmedApiBase !== input.defaultApiBase ? trimmedApiBase : null;
+  }
+  if (!headersEqual(normalizedHeaders, input.currentHeaders)) {
+    payload.extraHeaders = normalizedHeaders;
+  }
+  if (input.supportsWireApi && input.wireApi !== input.currentWireApi) {
+    payload.wireApi = input.wireApi;
+  }
+  if (!modelListsEqual(input.models, input.currentEditableModels)) {
+    payload.models = serializeModelsForSave(input.models, input.providerName ?? '');
+  }
+  if (!modelConfigEqual(input.modelConfig, input.currentModelConfig)) {
+    payload.modelConfig = normalizeModelConfigForModels(input.modelConfig, input.models);
+  }
+
+  return payload;
+}
+
+function buildProviderConnectionTestPayload(input: ProviderConnectionTestPayloadInput): ProviderConnectionTestRequest {
+  const preferredModel = input.models.find((modelName) => modelName.trim().length > 0) ?? '';
+  const testModel = toProviderLocalModelId(preferredModel, input.providerModelAliases);
+  const payload: ProviderConnectionTestRequest = {
+    apiBase: input.apiBase.trim(),
+    extraHeaders: normalizeHeaders(input.extraHeaders),
+    model: testModel || null
+  };
+  if (input.apiKey.trim().length > 0) {
+    payload.apiKey = input.apiKey.trim();
+  }
+  if (input.supportsWireApi) {
+    payload.wireApi = input.wireApi;
+  }
+  return payload;
+}
+
 function formatThinkingLevelLabel(level: ThinkingLevel): string {
   if (level === 'off') {
     return t('chatThinkingLevelOff');
@@ -285,8 +383,11 @@ function shouldUsePillSelector(params: {
 
 export type { ModelConfig, ProviderAuthMethodOption, WireApiType };
 export {
+  buildProviderConnectionTestPayload,
+  buildProviderSavePayload,
   EMPTY_PROVIDER_CONFIG,
   formatThinkingLevelLabel,
+  hasProviderFormChanges,
   headersEqual,
   modelListsEqual,
   modelConfigEqual,

package/src/features/settings/utils/secrets-config-form.utils.ts

@@ -0,0 +1,139 @@
+import type { SecretProviderView, SecretRefView, SecretSourceView, SecretsView } from '@/shared/lib/api';
+import { t } from '@/shared/lib/i18n';
+
+export type ProviderRow = {
+  alias: string;
+  source: SecretSourceView;
+  prefix: string;
+  path: string;
+  command: string;
+  argsText: string;
+  cwd: string;
+  timeoutMs: number;
+};
+
+export type RefRow = {
+  path: string;
+  source: SecretSourceView;
+  provider: string;
+  id: string;
+};
+
+export type SecretsFormState = {
+  enabled: boolean;
+  defaultEnv: string;
+  defaultFile: string;
+  defaultExec: string;
+  providers: ProviderRow[];
+  refs: RefRow[];
+};
+
+export const SOURCE_OPTIONS: SecretSourceView[] = ['env', 'file', 'exec'];
+
+export function createProviderRow(alias = ''): ProviderRow {
+  return { alias, source: 'env', prefix: '', path: '', command: '', argsText: '', cwd: '', timeoutMs: 5000 };
+}
+
+export function createRefRow(): RefRow {
+  return { path: '', source: 'env', provider: '', id: '' };
+}
+
+function providerToRow(alias: string, provider: SecretProviderView): ProviderRow {
+  if (provider.source === 'env') return { ...createProviderRow(alias), source: 'env', prefix: provider.prefix ?? '' };
+  if (provider.source === 'file') return { ...createProviderRow(alias), source: 'file', path: provider.path };
+  return {
+    ...createProviderRow(alias),
+    source: 'exec',
+    command: provider.command,
+    argsText: (provider.args ?? []).join('\n'),
+    cwd: provider.cwd ?? '',
+    timeoutMs: provider.timeoutMs ?? 5000,
+  };
+}
+
+function rowToProvider(row: ProviderRow): SecretProviderView {
+  if (row.source === 'env') return { source: 'env', ...(row.prefix.trim() ? { prefix: row.prefix.trim() } : {}) };
+  if (row.source === 'file') return { source: 'file', path: row.path.trim(), format: 'json' };
+  return {
+    source: 'exec',
+    command: row.command.trim(),
+    args: row.argsText.split('\n').map((item) => item.trim()).filter(Boolean),
+    ...(row.cwd.trim() ? { cwd: row.cwd.trim() } : {}),
+    timeoutMs: Math.max(1, Math.trunc(row.timeoutMs || 5000)),
+  };
+}
+
+export function buildSecretsFormState(secrets?: SecretsView): SecretsFormState {
+  if (!secrets) {
+    return { enabled: true, defaultEnv: '', defaultFile: '', defaultExec: '', providers: [], refs: [] };
+  }
+  return {
+    enabled: Boolean(secrets.enabled),
+    defaultEnv: secrets.defaults.env ?? '',
+    defaultFile: secrets.defaults.file ?? '',
+    defaultExec: secrets.defaults.exec ?? '',
+    providers: Object.entries(secrets.providers).map(([alias, provider]) => providerToRow(alias, provider)),
+    refs: Object.entries(secrets.refs).map(([path, ref]) => ({
+      path,
+      source: ref.source,
+      provider: ref.provider ?? '',
+      id: ref.id,
+    })),
+  };
+}
+
+export function prepareSecretsFormSubmitState(state: SecretsFormState): SecretsFormState {
+  const providerMap: Record<string, SecretProviderView> = {};
+  for (const [index, row] of state.providers.entries()) {
+    const alias = row.alias.trim();
+    if (!alias) throw new Error(`${t('providerAlias')} #${index + 1} ${t('isRequired')}`);
+    if (providerMap[alias]) throw new Error(`${t('providerAlias')}: ${alias} (${t('duplicate')})`);
+    if (row.source === 'file' && !row.path.trim()) throw new Error(`${t('secretFilePath')} #${index + 1} ${t('isRequired')}`);
+    if (row.source === 'exec' && !row.command.trim()) throw new Error(`${t('secretExecCommand')} #${index + 1} ${t('isRequired')}`);
+    providerMap[alias] = rowToProvider(row);
+  }
+
+  const refMap: Record<string, SecretRefView> = {};
+  for (const [index, row] of state.refs.entries()) {
+    const path = row.path.trim();
+    const id = row.id.trim();
+    if (!path) throw new Error(`${t('secretConfigPath')} #${index + 1} ${t('isRequired')}`);
+    if (!id) throw new Error(`${t('secretId')} #${index + 1} ${t('isRequired')}`);
+    const provider = row.provider.trim();
+    if (provider && !providerMap[provider]) throw new Error(`${t('secretProviderAlias')}: ${provider} ${t('notFound')}`);
+    refMap[path] = { source: row.source, ...(provider ? { provider } : {}), id };
+  }
+
+  return {
+    enabled: state.enabled,
+    defaultEnv: state.defaultEnv.trim(),
+    defaultFile: state.defaultFile.trim(),
+    defaultExec: state.defaultExec.trim(),
+    providers: Object.entries(providerMap).map(([alias, provider]) => providerToRow(alias, provider)),
+    refs: Object.entries(refMap).map(([path, ref]) => ({ path, source: ref.source, provider: ref.provider ?? '', id: ref.id })),
+  };
+}
+
+export function buildSecretsSubmitPayload(state: SecretsFormState) {
+  return {
+    enabled: state.enabled,
+    defaults: {
+      env: state.defaultEnv || null,
+      file: state.defaultFile || null,
+      exec: state.defaultExec || null,
+    },
+    providers: Object.fromEntries(
+      state.providers.map((row) => [row.alias.trim(), rowToProvider(row)]).filter(([alias]) => alias),
+    ),
+    refs: Object.fromEntries(
+      state.refs.map((row) => [
+        row.path.trim(),
+        {
+          source: row.source,
+          ...(row.provider.trim() ? { provider: row.provider.trim() } : {}),
+          id: row.id.trim(),
+        },
+      ]).filter(([path, ref]) => path && (ref as SecretRefView).id),
+    ),
+  };
+}

package/src/features/system-status/components/config/runtime-agent-list-card.tsx

@@ -7,7 +7,13 @@ import { Switch } from '@/shared/components/ui/switch';
 import { t } from '@/shared/lib/i18n';
 import { parseOptionalInt } from '@/features/system-status/utils/runtime-config-agent.utils';
 
-export function RuntimeAgentListCard(props: {
+export function RuntimeAgentListCard({
+  agents,
+  onAddAgent,
+  onRemoveAgent,
+  onSetDefaultAgent,
+  onUpdateAgent
+}: {
   agents: AgentProfileView[];
   onUpdateAgent: (index: number, patch: Partial<AgentProfileView>) => void;
   onRemoveAgent: (index: number) => void;
@@ -21,44 +27,44 @@ export function RuntimeAgentListCard(props: {
         <CardDescription>{t('agentListHelp')}</CardDescription>
       </CardHeader>
       <CardContent className="space-y-3">
-        {props.agents.map((agent, index) => (
+        {agents.map((agent, index) => (
           <div key={`${index}-${agent.id}`} className="rounded-xl border border-gray-200 p-3 space-y-3">
             <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
-              <Input value={agent.id} onChange={(event) => props.onUpdateAgent(index, { id: event.target.value })} placeholder={t('agentIdPlaceholder')} />
-              <Input value={agent.workspace ?? ''} onChange={(event) => props.onUpdateAgent(index, { workspace: event.target.value })} placeholder={t('workspaceOverridePlaceholder')} />
-              <Input value={agent.model ?? ''} onChange={(event) => props.onUpdateAgent(index, { model: event.target.value })} placeholder={t('modelOverridePlaceholder')} />
-              <Input value={agent.runtime ?? agent.engine ?? ''} onChange={(event) => props.onUpdateAgent(index, { runtime: event.target.value })} placeholder={t('engineOverridePlaceholder')} />
+              <Input value={agent.id} onChange={(event) => onUpdateAgent(index, { id: event.target.value })} placeholder={t('agentIdPlaceholder')} />
+              <Input value={agent.workspace ?? ''} onChange={(event) => onUpdateAgent(index, { workspace: event.target.value })} placeholder={t('workspaceOverridePlaceholder')} />
+              <Input value={agent.model ?? ''} onChange={(event) => onUpdateAgent(index, { model: event.target.value })} placeholder={t('modelOverridePlaceholder')} />
+              <Input value={agent.runtime ?? agent.engine ?? ''} onChange={(event) => onUpdateAgent(index, { runtime: event.target.value })} placeholder={t('engineOverridePlaceholder')} />
               <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
                 <Input
                   type="number"
                   min={1000}
                   step={1000}
                   value={agent.contextTokens ?? ''}
-                  onChange={(event) => props.onUpdateAgent(index, { contextTokens: parseOptionalInt(event.target.value) })}
+                  onChange={(event) => onUpdateAgent(index, { contextTokens: parseOptionalInt(event.target.value) })}
                   placeholder={t('contextTokensPlaceholder')}
                 />
                 <Input
                   type="number"
                   min={1}
                   value={agent.maxToolIterations ?? ''}
-                  onChange={(event) => props.onUpdateAgent(index, { maxToolIterations: parseOptionalInt(event.target.value) })}
+                  onChange={(event) => onUpdateAgent(index, { maxToolIterations: parseOptionalInt(event.target.value) })}
                   placeholder={t('maxToolsPlaceholder')}
                 />
               </div>
             </div>
             <div className="flex items-center justify-between">
               <div className="flex items-center gap-2 text-sm text-gray-600">
-                <Switch checked={Boolean(agent.default)} onCheckedChange={(checked) => props.onSetDefaultAgent(index, checked)} />
+                <Switch checked={Boolean(agent.default)} onCheckedChange={(checked) => onSetDefaultAgent(index, checked)} />
                 <span>{t('defaultAgent')}</span>
               </div>
-              <Button type="button" variant="outline" size="sm" onClick={() => props.onRemoveAgent(index)}>
+              <Button type="button" variant="outline" size="sm" onClick={() => onRemoveAgent(index)}>
                 <Trash2 className="h-4 w-4 mr-1" />
                 {t('remove')}
               </Button>
             </div>
           </div>
         ))}
-        <Button type="button" variant="outline" onClick={props.onAddAgent}>
+        <Button type="button" variant="outline" onClick={onAddAgent}>
           <Plus className="h-4 w-4 mr-2" />
           {t('addAgent')}
         </Button>

package/src/features/system-status/components/config/runtime-binding-list-card.tsx

@@ -7,7 +7,12 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@
 import { t } from '@/shared/lib/i18n';
 import type { PeerKind } from '@/features/system-status/utils/runtime-config-agent.utils';
 
-export function RuntimeBindingListCard(props: {
+export function RuntimeBindingListCard({
+  bindings,
+  onAddBinding,
+  onRemoveBinding,
+  onUpdateBinding
+}: {
   bindings: AgentBindingView[];
   onUpdateBinding: (index: number, next: AgentBindingView) => void;
   onRemoveBinding: (index: number) => void;
@@ -20,19 +25,19 @@ export function RuntimeBindingListCard(props: {
         <CardDescription>{t('bindingsHelp')}</CardDescription>
       </CardHeader>
       <CardContent className="space-y-3">
-        {props.bindings.map((binding, index) => {
+        {bindings.map((binding, index) => {
           const peerKind = (binding.match.peer?.kind ?? '') as PeerKind;
           return (
             <div key={`${index}-${binding.agentId}`} className="rounded-xl border border-gray-200 p-3 space-y-3">
               <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
-                <Input value={binding.agentId} onChange={(event) => props.onUpdateBinding(index, { ...binding, agentId: event.target.value })} placeholder={t('targetAgentIdPlaceholder')} />
-                <Input value={binding.match.channel} onChange={(event) => props.onUpdateBinding(index, { ...binding, match: { ...binding.match, channel: event.target.value } })} placeholder={t('channelPlaceholder')} />
-                <Input value={binding.match.accountId ?? ''} onChange={(event) => props.onUpdateBinding(index, { ...binding, match: { ...binding.match, accountId: event.target.value } })} placeholder={t('accountIdOptionalPlaceholder')} />
+                <Input value={binding.agentId} onChange={(event) => onUpdateBinding(index, { ...binding, agentId: event.target.value })} placeholder={t('targetAgentIdPlaceholder')} />
+                <Input value={binding.match.channel} onChange={(event) => onUpdateBinding(index, { ...binding, match: { ...binding.match, channel: event.target.value } })} placeholder={t('channelPlaceholder')} />
+                <Input value={binding.match.accountId ?? ''} onChange={(event) => onUpdateBinding(index, { ...binding, match: { ...binding.match, accountId: event.target.value } })} placeholder={t('accountIdOptionalPlaceholder')} />
                 <Select
                   value={peerKind || '__none__'}
                   onValueChange={(value) => {
                     const nextKind = value === '__none__' ? '' : (value as PeerKind);
-                    props.onUpdateBinding(
+                    onUpdateBinding(
                       index,
                       nextKind
                         ? { ...binding, match: { ...binding.match, peer: { kind: nextKind, id: binding.match.peer?.id ?? '' } } }
@@ -53,7 +58,7 @@ export function RuntimeBindingListCard(props: {
                 <Input
                   value={binding.match.peer?.id ?? ''}
                   onChange={(event) =>
-                    props.onUpdateBinding(index, {
+                    onUpdateBinding(index, {
                       ...binding,
                       match: {
                         ...binding.match,
@@ -65,7 +70,7 @@ export function RuntimeBindingListCard(props: {
                 />
               </div>
               <div className="flex justify-end">
-                <Button type="button" variant="outline" size="sm" onClick={() => props.onRemoveBinding(index)}>
+                <Button type="button" variant="outline" size="sm" onClick={() => onRemoveBinding(index)}>
                   <Trash2 className="h-4 w-4 mr-1" />
                   {t('remove')}
                 </Button>
@@ -73,7 +78,7 @@ export function RuntimeBindingListCard(props: {
             </div>
           );
         })}
-        <Button type="button" variant="outline" onClick={props.onAddBinding}>
+        <Button type="button" variant="outline" onClick={onAddBinding}>
           <Plus className="h-4 w-4 mr-2" />
           {t('addBinding')}
         </Button>

package/src/features/system-status/components/config/runtime-config-editor.tsx

@@ -24,11 +24,14 @@ type UpdateRuntimeMutation = {
   isPending: boolean;
 };
 
-export function RuntimeConfigEditor(props: {
+export function RuntimeConfigEditor({
+  config,
+  updateRuntime
+}: {
   config: ConfigView;
   updateRuntime: UpdateRuntimeMutation;
 }) {
-  const initialState = useMemo(() => createRuntimeConfigEditorState(props.config), [props.config]);
+  const initialState = useMemo(() => createRuntimeConfigEditorState(config), [config]);
   const [agents, setAgents] = useState(initialState.agents);
   const [bindings, setBindings] = useState(initialState.bindings);
   const [runtimeEntries, setRuntimeEntries] = useState(initialState.runtimeEntries);
@@ -68,7 +71,7 @@ export function RuntimeConfigEditor(props: {
         defaultEngine,
         knownAgentIds
       });
-      props.updateRuntime.mutate({ data });
+      updateRuntime.mutate({ data });
     } catch (error) {
       toast.error(error instanceof Error ? error.message : String(error));
     }
@@ -109,9 +112,9 @@ export function RuntimeConfigEditor(props: {
         onAddBinding={() => setBindings((previous) => [...previous, createEmptyRuntimeBinding()])}
       />
       <div className="flex justify-end">
-        <Button type="button" onClick={handleSave} disabled={props.updateRuntime.isPending}>
+        <Button type="button" onClick={handleSave} disabled={updateRuntime.isPending}>
           <Save className="h-4 w-4 mr-2" />
-          {props.updateRuntime.isPending ? t('saving') : t('saveRuntimeSettings')}
+          {updateRuntime.isPending ? t('saving') : t('saveRuntimeSettings')}
         </Button>
       </div>
     </PageLayout>

package/src/features/system-status/components/config/runtime-entry-list-card.tsx

@@ -6,7 +6,12 @@ import { Switch } from '@/shared/components/ui/switch';
 import { t } from '@/shared/lib/i18n';
 import type { RuntimeEntryDraft } from '@/features/system-status/utils/runtime-config-agent.utils';
 
-export function RuntimeEntryListCard(props: {
+export function RuntimeEntryListCard({
+  entries,
+  onAddEntry,
+  onRemoveEntry,
+  onUpdateEntry
+}: {
   entries: RuntimeEntryDraft[];
   onUpdateEntry: (index: number, patch: Partial<RuntimeEntryDraft>) => void;
   onRemoveEntry: (index: number) => void;
@@ -19,15 +24,15 @@ export function RuntimeEntryListCard(props: {
         <CardDescription>{t('runtimeEntriesHelp')}</CardDescription>
       </CardHeader>
       <CardContent className="space-y-3">
-        {props.entries.map((entry, index) => (
+        {entries.map((entry, index) => (
           <div key={`${index}-${entry.id || 'runtime-entry'}`} className="rounded-xl border border-gray-200 p-3 space-y-3">
             <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
-              <Input value={entry.id} onChange={(event) => props.onUpdateEntry(index, { id: event.target.value })} placeholder={t('runtimeEntryIdPlaceholder')} />
-              <Input value={entry.label ?? ''} onChange={(event) => props.onUpdateEntry(index, { label: event.target.value })} placeholder={t('runtimeEntryLabelPlaceholder')} />
-              <Input value={entry.type} onChange={(event) => props.onUpdateEntry(index, { type: event.target.value })} placeholder={t('runtimeEntryTypePlaceholder')} />
+              <Input value={entry.id} onChange={(event) => onUpdateEntry(index, { id: event.target.value })} placeholder={t('runtimeEntryIdPlaceholder')} />
+              <Input value={entry.label ?? ''} onChange={(event) => onUpdateEntry(index, { label: event.target.value })} placeholder={t('runtimeEntryLabelPlaceholder')} />
+              <Input value={entry.type} onChange={(event) => onUpdateEntry(index, { type: event.target.value })} placeholder={t('runtimeEntryTypePlaceholder')} />
               <div className="flex items-center justify-between rounded-lg border border-gray-200 px-3 py-2">
                 <span className="text-sm text-gray-700">{t('enabled')}</span>
-                <Switch checked={entry.enabled !== false} onCheckedChange={(checked) => props.onUpdateEntry(index, { enabled: checked })} />
+                <Switch checked={entry.enabled !== false} onCheckedChange={(checked) => onUpdateEntry(index, { enabled: checked })} />
               </div>
             </div>
             <div className="space-y-2">
@@ -35,19 +40,19 @@ export function RuntimeEntryListCard(props: {
               <textarea
                 className="min-h-32 w-full rounded-md border border-gray-200 px-3 py-2 text-sm font-mono"
                 value={entry.configText}
-                onChange={(event) => props.onUpdateEntry(index, { configText: event.target.value })}
+                onChange={(event) => onUpdateEntry(index, { configText: event.target.value })}
                 spellCheck={false}
               />
             </div>
             <div className="flex justify-end">
-              <Button type="button" variant="outline" onClick={() => props.onRemoveEntry(index)}>
+              <Button type="button" variant="outline" onClick={() => onRemoveEntry(index)}>
                 <Trash2 className="mr-2 h-4 w-4" />
                 {t('delete')}
               </Button>
             </div>
           </div>
         ))}
-        <Button type="button" variant="outline" onClick={props.onAddEntry}>
+        <Button type="button" variant="outline" onClick={onAddEntry}>
           <Plus className="mr-2 h-4 w-4" />
           {t('addRuntimeEntry')}
         </Button>

package/src/features/system-status/components/config/runtime-settings-card.tsx

@@ -12,7 +12,16 @@ const DM_SCOPE_OPTIONS: Array<{ value: DmScope; labelKey: string }> = [
   { value: 'per-account-channel-peer', labelKey: 'dmScopePerAccountChannelPeer' }
 ];
 
-export function RuntimeSettingsCard(props: {
+export function RuntimeSettingsCard({
+  companionEnabled,
+  defaultContextTokens,
+  defaultEngine,
+  dmScope,
+  onCompanionEnabledChange,
+  onDefaultContextTokensChange,
+  onDefaultEngineChange,
+  onDmScopeChange
+}: {
   dmScope: DmScope;
   companionEnabled: boolean;
   defaultContextTokens: number;
@@ -34,7 +43,7 @@ export function RuntimeSettingsCard(props: {
             <div className="text-sm font-medium text-gray-800">{t('runtimeCompanionEnabled')}</div>
             <p className="text-xs text-gray-500">{t('runtimeCompanionEnabledHelp')}</p>
           </div>
-          <Switch checked={props.companionEnabled} onCheckedChange={props.onCompanionEnabledChange} />
+          <Switch checked={companionEnabled} onCheckedChange={onCompanionEnabledChange} />
         </div>
         <div className="space-y-2">
           <label className="text-sm font-medium text-gray-800">{t('defaultContextTokens')}</label>
@@ -42,23 +51,23 @@ export function RuntimeSettingsCard(props: {
             type="number"
             min={1000}
             step={1000}
-            value={props.defaultContextTokens}
-            onChange={(event) => props.onDefaultContextTokensChange(Math.max(1000, Number.parseInt(event.target.value, 10) || 1000))}
+            value={defaultContextTokens}
+            onChange={(event) => onDefaultContextTokensChange(Math.max(1000, Number.parseInt(event.target.value, 10) || 1000))}
           />
           <p className="text-xs text-gray-500">{t('defaultContextTokensHelp')}</p>
         </div>
         <div className="space-y-2">
           <label className="text-sm font-medium text-gray-800">{t('defaultEngine')}</label>
           <Input
-            value={props.defaultEngine}
-            onChange={(event) => props.onDefaultEngineChange(event.target.value)}
+            value={defaultEngine}
+            onChange={(event) => onDefaultEngineChange(event.target.value)}
             placeholder={t('defaultEnginePlaceholder')}
           />
           <p className="text-xs text-gray-500">{t('defaultEngineHelp')}</p>
         </div>
         <div className="space-y-2">
           <label className="text-sm font-medium text-gray-800">{t('dmScope')}</label>
-          <Select value={props.dmScope} onValueChange={(value) => props.onDmScopeChange(value as DmScope)}>
+          <Select value={dmScope} onValueChange={(value) => onDmScopeChange(value as DmScope)}>
             <SelectTrigger>
               <SelectValue />
             </SelectTrigger>