@nextclaw/ui 0.12.10 → 0.12.12

package/src/{components/remote → features/remote/components}/remote-access-page.test.tsx

@@ -1,8 +1,7 @@
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { RemoteAccessPage } from "@/components/remote/remote-access-page";
-import { setLanguage } from "@/lib/i18n";
-import { useRemoteAccessStore } from "@/remote/stores/remote-access.store";
+import { RemoteAccessPage, useRemoteAccessStore } from "@/features/remote";
+import { setLanguage } from "@/shared/lib/i18n";
 
 const mocks = vi.hoisted(() => ({
   reauthorizeRemoteAccess: vi.fn(),
@@ -17,12 +16,12 @@ const mocks = vi.hoisted(() => ({
   },
 }));
 
-vi.mock("@/hooks/useRemoteAccess", () => ({
+vi.mock("@/features/remote/hooks/use-remote-access", () => ({
   useRemoteStatus: () => mocks.statusQuery,
 }));
 
-vi.mock("@/presenter/app-presenter-context", () => ({
-  useAppPresenter: () => ({
+vi.mock("@/app/components/app-manager-provider", () => ({
+  useAppManager: () => ({
     remoteAccessManager: {
       reauthorizeRemoteAccess: mocks.reauthorizeRemoteAccess,
       repairRemoteAccess: mocks.repairRemoteAccess,

package/src/{components/remote → features/remote/components}/remote-access-page.tsx

@@ -1,20 +1,22 @@
-import { PageHeader, PageLayout } from "@/components/layout/page-layout";
-import { Button } from "@/components/ui/button";
+import { PageHeader, PageLayout } from "@/app/components/layout/page-layout";
+import { Button } from "@/shared/components/ui/button";
 import {
   Card,
   CardContent,
   CardDescription,
   CardHeader,
   CardTitle,
-} from "@/components/ui/card";
-import { NoticeCard } from "@/components/ui/notice-card";
-import { StatusDot } from "@/components/ui/status-dot";
-import { useRemoteStatus } from "@/hooks/useRemoteAccess";
-import { formatDateTime, t } from "@/lib/i18n";
-import { useAppPresenter } from "@/presenter/app-presenter-context";
-import { resolveRemoteWebBase } from "@/remote/remote-access.query";
-import { buildRemoteAccessFeedbackView } from "@/remote/remote-access-feedback.service";
-import { useRemoteAccessStore } from "@/remote/stores/remote-access.store";
+} from "@/shared/components/ui/card";
+import { NoticeCard } from "@/shared/components/ui/notice-card";
+import { StatusDot } from "@/shared/components/ui/status-dot";
+import { useAppManager } from "@/app/components/app-manager-provider";
+import {
+  buildRemoteAccessFeedbackView,
+  resolveRemoteWebBase,
+  useRemoteAccessStore,
+} from "@/features/remote";
+import { useRemoteStatus } from "@/features/remote/hooks/use-remote-access";
+import { formatDateTime, t } from "@/shared/lib/i18n";
 import { Laptop, RefreshCcw, SquareArrowOutUpRight } from "lucide-react";
 import { useEffect, useMemo } from "react";
 
@@ -43,7 +45,7 @@ function KeyValueRow(props: {
 }
 
 export function RemoteAccessPage() {
-  const presenter = useAppPresenter();
+  const manager = useAppManager();
   const remoteStatus = useRemoteStatus();
   const status = remoteStatus.data;
   const actionLabel = useRemoteAccessStore((state) => state.actionLabel);
@@ -62,8 +64,8 @@ export function RemoteAccessPage() {
   const { hero: heroView, issueHint } = feedbackView;
 
   useEffect(() => {
-    presenter.remoteAccessManager.syncStatus(status);
-  }, [presenter, status]);
+    manager.remoteAccessManager.syncStatus(status);
+  }, [manager, status]);
 
   if (remoteStatus.isLoading && !status) {
     return <div className="p-8 text-gray-400">{t("remoteLoading")}</div>;
@@ -115,18 +117,18 @@ export function RemoteAccessPage() {
                 <Button
                   onClick={() => {
                     if (feedbackView.primaryAction?.kind === "reauthorize") {
-                      void presenter.remoteAccessManager.reauthorizeRemoteAccess(
+                      void manager.remoteAccessManager.reauthorizeRemoteAccess(
                         status,
                       );
                       return;
                     }
                     if (feedbackView.primaryAction?.kind === "repair") {
-                      void presenter.remoteAccessManager.repairRemoteAccess(
+                      void manager.remoteAccessManager.repairRemoteAccess(
                         status,
                       );
                       return;
                     }
-                    void presenter.remoteAccessManager.enableRemoteAccess(
+                    void manager.remoteAccessManager.enableRemoteAccess(
                       status,
                     );
                   }}
@@ -141,7 +143,7 @@ export function RemoteAccessPage() {
 
               <Button
                 variant="outline"
-                onClick={() => void presenter.accountManager.openNextClawWeb()}
+                onClick={() => void manager.accountManager.openNextClawWeb()}
                 disabled={busy || !canOpenDeviceList}
               >
                 <SquareArrowOutUpRight className="mr-2 h-4 w-4" />
@@ -152,7 +154,7 @@ export function RemoteAccessPage() {
                 <Button
                   variant="outline"
                   onClick={() =>
-                    void presenter.remoteAccessManager.disableRemoteAccess(
+                    void manager.remoteAccessManager.disableRemoteAccess(
                       status,
                     )
                   }

package/src/{hooks/useRemoteAccess.ts → features/remote/hooks/use-remote-access.ts}

@@ -8,9 +8,9 @@ import {
   pollRemoteBrowserAuth,
   startRemoteBrowserAuth,
   updateRemoteSettings
-} from '@/api/remote';
-import { t } from '@/lib/i18n';
-import { REMOTE_STATUS_QUERY_KEY } from '@/remote/remote-access.query';
+} from '@/shared/lib/api';
+import { REMOTE_STATUS_QUERY_KEY } from '@/features/remote';
+import { t } from '@/shared/lib/i18n';
 import { toast } from 'sonner';
 
 export function useRemoteStatus() {

package/src/features/remote/index.ts

@@ -0,0 +1,27 @@
+export { RemoteAccessPage } from './components/remote-access-page';
+export {
+  useRemoteBrowserAuthPoll,
+  useRemoteBrowserAuthStart,
+  useRemoteDoctor,
+  useRemoteLogin,
+  useRemoteLogout,
+  useRemoteServiceControl,
+  useRemoteSettings,
+  useRemoteStatus,
+} from './hooks/use-remote-access';
+export { RemoteAccessManager } from './managers/remote-access.manager';
+export {
+  buildRemoteAccessFeedbackView,
+  requiresRemoteReauthorization,
+  type RemoteAccessFeedbackView,
+} from './services/remote-access-feedback.service';
+export {
+  REMOTE_STATUS_QUERY_KEY,
+  ensureRemoteStatus,
+  getRemoteStatusSnapshot,
+  refreshRemoteStatus,
+  resolveRemotePlatformApiBase,
+  resolveRemotePlatformBase,
+  resolveRemoteWebBase,
+} from './services/remote-access-query.service';
+export { useRemoteAccessStore } from './stores/remote-access.store';

package/src/{remote → features/remote}/managers/remote-access.manager.ts

@@ -1,11 +1,10 @@
-import { controlRemoteService, fetchRemoteDoctor, updateRemoteSettings } from '@/api/remote';
-import type { RemoteAccessView } from '@/api/remote.types';
-import type { AccountPendingAction } from '@/account/stores/account.store';
-import type { AccountManager } from '@/account/managers/account.manager';
-import { useRemoteAccessStore } from '@/remote/stores/remote-access.store';
-import { refreshRemoteStatus } from '@/remote/remote-access.query';
-import { t } from '@/lib/i18n';
+import { controlRemoteService, fetchRemoteDoctor, updateRemoteSettings } from '@/shared/lib/api';
+import type { RemoteAccessView } from '@/shared/lib/api';
+import type { AccountManager, AccountPendingAction } from '@/features/account';
+import { t } from '@/shared/lib/i18n';
 import { toast } from 'sonner';
+import { refreshRemoteStatus } from '@/features/remote/services/remote-access-query.service';
+import { useRemoteAccessStore } from '@/features/remote/stores/remote-access.store';
 
 export class RemoteAccessManager {
   private accountManager: AccountManager | null = null;

package/src/{remote → features/remote/services}/remote-access-feedback.service.test.ts

@@ -1,7 +1,7 @@
 import { beforeEach, describe, expect, it } from 'vitest';
-import type { RemoteAccessView } from '@/api/remote.types';
-import { setLanguage } from '@/lib/i18n';
-import { buildRemoteAccessFeedbackView, requiresRemoteReauthorization } from '@/remote/remote-access-feedback.service';
+import type { RemoteAccessView } from '@/shared/lib/api';
+import { setLanguage } from '@/shared/lib/i18n';
+import { buildRemoteAccessFeedbackView, requiresRemoteReauthorization } from './remote-access-feedback.service';
 
 function createRemoteAccessView(overrides: Partial<RemoteAccessView> = {}): RemoteAccessView {
   return {

package/src/{remote → features/remote/services}/remote-access-feedback.service.ts

@@ -1,5 +1,5 @@
-import type { RemoteAccessView } from '@/api/remote.types';
-import { t } from '@/lib/i18n';
+import type { RemoteAccessView } from '@/shared/lib/api';
+import { t } from '@/shared/lib/i18n';
 
 type RemoteHeroView = {
   badgeStatus: 'active' | 'inactive' | 'ready' | 'setup' | 'warning';

package/src/{remote/remote-access.query.ts → features/remote/services/remote-access-query.service.ts}

@@ -1,5 +1,5 @@
-import { fetchRemoteStatus } from '@/api/remote';
-import type { RemoteAccessView } from '@/api/remote.types';
+import { fetchRemoteStatus } from '@/shared/lib/api';
+import type { RemoteAccessView } from '@/shared/lib/api';
 import { appQueryClient } from '@/app-query-client';
 
 export const REMOTE_STATUS_QUERY_KEY = ['remote-status'] as const;

package/src/{remote → features/remote}/stores/remote-access.store.ts

@@ -1,4 +1,4 @@
-import type { RemoteDoctorView } from '@/api/remote.types';
+import type { RemoteDoctorView } from '@/shared/lib/api';
 import { create } from 'zustand';
 
 type RemoteAccessStoreState = {

package/src/features/settings/hooks/use-language-preference.ts

@@ -0,0 +1,30 @@
+import { useCallback } from "react";
+import { useI18n } from "@/app/components/i18n-provider";
+import {
+  LANGUAGE_OPTIONS,
+  type I18nLanguage,
+} from "@/shared/lib/i18n";
+
+export function useLanguagePreference() {
+  const { language, setLanguage } = useI18n();
+  const currentLanguageLabel =
+    LANGUAGE_OPTIONS.find((option) => option.value === language)?.label ??
+    language;
+  const selectLanguage = useCallback(
+    (nextLanguage: I18nLanguage) => {
+      if (language === nextLanguage) {
+        return;
+      }
+      setLanguage(nextLanguage);
+      window.location.reload();
+    },
+    [language, setLanguage],
+  );
+
+  return {
+    currentLanguage: language,
+    currentLanguageLabel,
+    languageOptions: LANGUAGE_OPTIONS,
+    selectLanguage,
+  };
+}

package/src/features/settings/index.ts

@@ -0,0 +1,2 @@
+export { useLanguagePreference } from "@/features/settings/hooks/use-language-preference";
+export { LanguageSettingsPage } from "@/features/settings/pages/language-settings-page";

package/src/features/settings/pages/language-settings-page.test.tsx

@@ -0,0 +1,36 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { LanguageSettingsPage } from "@/features/settings/pages/language-settings-page";
+
+const mocks = vi.hoisted(() => ({
+  selectLanguage: vi.fn(),
+}));
+
+vi.mock("@/features/settings/hooks/use-language-preference", () => ({
+  useLanguagePreference: () => ({
+    currentLanguage: "en",
+    currentLanguageLabel: "English",
+    languageOptions: [
+      { value: "en", label: "English" },
+      { value: "zh", label: "中文" },
+    ],
+    selectLanguage: mocks.selectLanguage,
+  }),
+}));
+
+describe("LanguageSettingsPage", () => {
+  it("reuses the shared language preference model for a mobile-friendly list", () => {
+    render(<LanguageSettingsPage />);
+
+    expect(screen.getByRole("heading", { name: "Language" })).toBeTruthy();
+    expect(
+      screen.getByRole("button", { name: "English" }).getAttribute(
+        "aria-current",
+      ),
+    ).toBe("true");
+
+    fireEvent.click(screen.getByRole("button", { name: "中文" }));
+
+    expect(mocks.selectLanguage).toHaveBeenCalledWith("zh");
+  });
+});

package/src/features/settings/pages/language-settings-page.tsx

@@ -0,0 +1,56 @@
+import { Check, Languages } from "lucide-react";
+import { useLanguagePreference } from "@/features/settings/hooks/use-language-preference";
+import { t } from "@/shared/lib/i18n";
+import { cn } from "@/shared/lib/utils";
+
+export function LanguageSettingsPage() {
+  const {
+    currentLanguage,
+    currentLanguageLabel,
+    languageOptions,
+    selectLanguage,
+  } = useLanguagePreference();
+
+  return (
+    <section className="mx-auto w-full max-w-3xl space-y-4">
+      <div className="rounded-3xl border border-gray-200/80 bg-white p-5 shadow-card">
+        <div className="flex items-start gap-3">
+          <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-2xl bg-gray-100 text-gray-600">
+            <Languages className="h-4 w-4" />
+          </div>
+          <div className="min-w-0 flex-1">
+            <h2 className="text-base font-semibold text-gray-900">
+              {t("language")}
+            </h2>
+            <p className="mt-1 text-sm text-gray-500">
+              {currentLanguageLabel}
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <div className="overflow-hidden rounded-3xl border border-gray-200/80 bg-white shadow-card">
+        {languageOptions.map((option) => {
+          const active = option.value === currentLanguage;
+          return (
+            <button
+              key={option.value}
+              type="button"
+              onClick={() => selectLanguage(option.value)}
+              className={cn(
+                "flex w-full items-center justify-between gap-3 border-b border-gray-100 px-5 py-4 text-left text-sm transition-colors last:border-b-0",
+                active
+                  ? "bg-gray-50 text-gray-900"
+                  : "text-gray-700 hover:bg-gray-50/70",
+              )}
+              aria-current={active ? "true" : undefined}
+            >
+              <span className="font-medium">{option.label}</span>
+              {active ? <Check className="h-4 w-4 text-gray-700" /> : null}
+            </button>
+          );
+        })}
+      </div>
+    </section>
+  );
+}

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

@@ -0,0 +1,72 @@
+import { Plus, Trash2 } from 'lucide-react';
+import type { AgentProfileView } from '@/shared/lib/api';
+import { Button } from '@/shared/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/shared/components/ui/card';
+import { Input } from '@/shared/components/ui/input';
+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: {
+  agents: AgentProfileView[];
+  onUpdateAgent: (index: number, patch: Partial<AgentProfileView>) => void;
+  onRemoveAgent: (index: number) => void;
+  onAddAgent: () => void;
+  onSetDefaultAgent: (index: number, checked: boolean) => void;
+  label?: string;
+  help?: string;
+  contextTokensLabel?: string;
+  engineLabel?: string;
+}) {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>{props.label ?? t('agentList')}</CardTitle>
+        <CardDescription>{props.help ?? t('agentListHelp')}</CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-3">
+        {props.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={props.engineLabel ?? 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) })}
+                  placeholder={props.contextTokensLabel ?? t('contextTokensPlaceholder')}
+                />
+                <Input
+                  type="number"
+                  min={1}
+                  value={agent.maxToolIterations ?? ''}
+                  onChange={(event) => props.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)} />
+                <span>{t('defaultAgent')}</span>
+              </div>
+              <Button type="button" variant="outline" size="sm" onClick={() => props.onRemoveAgent(index)}>
+                <Trash2 className="h-4 w-4 mr-1" />
+                {t('remove')}
+              </Button>
+            </div>
+          </div>
+        ))}
+        <Button type="button" variant="outline" onClick={props.onAddAgent}>
+          <Plus className="h-4 w-4 mr-2" />
+          {t('addAgent')}
+        </Button>
+      </CardContent>
+    </Card>
+  );
+}

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

@@ -0,0 +1,85 @@
+import type { AgentBindingView } from '@/shared/lib/api';
+import { Plus, Trash2 } from 'lucide-react';
+import { Button } from '@/shared/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/shared/components/ui/card';
+import { Input } from '@/shared/components/ui/input';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/shared/components/ui/select';
+import { t } from '@/shared/lib/i18n';
+import type { PeerKind } from '@/features/system-status/utils/runtime-config-agent.utils';
+
+export function RuntimeBindingListCard(props: {
+  bindings: AgentBindingView[];
+  onUpdateBinding: (index: number, next: AgentBindingView) => void;
+  onRemoveBinding: (index: number) => void;
+  onAddBinding: () => void;
+  label?: string;
+  help?: string;
+}) {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>{props.label ?? t('bindings')}</CardTitle>
+        <CardDescription>{props.help ?? t('bindingsHelp')}</CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-3">
+        {props.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')} />
+                <Select
+                  value={peerKind || '__none__'}
+                  onValueChange={(value) => {
+                    const nextKind = value === '__none__' ? '' : (value as PeerKind);
+                    props.onUpdateBinding(
+                      index,
+                      nextKind
+                        ? { ...binding, match: { ...binding.match, peer: { kind: nextKind, id: binding.match.peer?.id ?? '' } } }
+                        : { ...binding, match: { ...binding.match, peer: undefined } }
+                    );
+                  }}
+                >
+                  <SelectTrigger>
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="__none__">{t('peerKindOptional')}</SelectItem>
+                    <SelectItem value="direct">direct</SelectItem>
+                    <SelectItem value="group">group</SelectItem>
+                    <SelectItem value="channel">channel</SelectItem>
+                  </SelectContent>
+                </Select>
+                <Input
+                  value={binding.match.peer?.id ?? ''}
+                  onChange={(event) =>
+                    props.onUpdateBinding(index, {
+                      ...binding,
+                      match: {
+                        ...binding.match,
+                        peer: peerKind ? { kind: peerKind, id: event.target.value } : undefined
+                      }
+                    })
+                  }
+                  placeholder={t('peerIdPlaceholder')}
+                />
+              </div>
+              <div className="flex justify-end">
+                <Button type="button" variant="outline" size="sm" onClick={() => props.onRemoveBinding(index)}>
+                  <Trash2 className="h-4 w-4 mr-1" />
+                  {t('remove')}
+                </Button>
+              </div>
+            </div>
+          );
+        })}
+        <Button type="button" variant="outline" onClick={props.onAddBinding}>
+          <Plus className="h-4 w-4 mr-2" />
+          {t('addBinding')}
+        </Button>
+      </CardContent>
+    </Card>
+  );
+}

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

@@ -0,0 +1,131 @@
+import { useMemo, useState } from 'react';
+import { Save } from 'lucide-react';
+import type { ConfigUiHints, ConfigView, RuntimeConfigUpdate } from '@/shared/lib/api';
+import { Button } from '@/shared/components/ui/button';
+import { PageLayout } from '@/app/components/layout/page-layout';
+import { hintForPath } from '@/shared/lib/config-hints';
+import { t } from '@/shared/lib/i18n';
+import { RuntimeConfigOverview } from '@/features/system-status/components/config/runtime-config-overview';
+import { RuntimeAgentListCard } from '@/features/system-status/components/config/runtime-agent-list-card';
+import { RuntimeBindingListCard } from '@/features/system-status/components/config/runtime-binding-list-card';
+import { RuntimeEntryListCard } from '@/features/system-status/components/config/runtime-entry-list-card';
+import { RuntimeSettingsCard } from '@/features/system-status/components/config/runtime-settings-card';
+import {
+  createEmptyRuntimeAgent,
+  createEmptyRuntimeBinding,
+  createEmptyRuntimeEntry,
+  createRuntimeConfigEditorState,
+  createRuntimeConfigUpdatePayload,
+  type DmScope,
+  type RuntimeEntryDraft
+} from '@/features/system-status/utils/runtime-config-agent.utils';
+import { toast } from 'sonner';
+type UpdateRuntimeMutation = {
+  mutate: (input: { data: RuntimeConfigUpdate }) => void;
+  isPending: boolean;
+};
+
+export function RuntimeConfigEditor(props: {
+  config: ConfigView;
+  uiHints?: ConfigUiHints;
+  updateRuntime: UpdateRuntimeMutation;
+}) {
+  const initialState = useMemo(() => createRuntimeConfigEditorState(props.config), [props.config]);
+  const [agents, setAgents] = useState(initialState.agents);
+  const [bindings, setBindings] = useState(initialState.bindings);
+  const [runtimeEntries, setRuntimeEntries] = useState(initialState.runtimeEntries);
+  const [dmScope, setDmScope] = useState<DmScope>(initialState.dmScope);
+  const [defaultContextTokens, setDefaultContextTokens] = useState(initialState.defaultContextTokens);
+  const [defaultEngine, setDefaultEngine] = useState(initialState.defaultEngine);
+
+  const knownAgentIds = useMemo(() => {
+    const ids = new Set<string>(['main']);
+    agents.forEach((agent) => {
+      const id = agent.id.trim();
+      if (id) {
+        ids.add(id);
+      }
+    });
+    return ids;
+  }, [agents]);
+
+  const updateAgent = (index: number, patch: Partial<(typeof agents)[number]>) => {
+    setAgents((previous) => previous.map((agent, cursor) => (cursor === index ? { ...agent, ...patch } : agent)));
+  };
+  const updateBinding = (index: number, next: (typeof bindings)[number]) => {
+    setBindings((previous) => previous.map((binding, cursor) => (cursor === index ? next : binding)));
+  };
+  const updateRuntimeEntry = (index: number, patch: Partial<RuntimeEntryDraft>) => setRuntimeEntries((previous) => previous.map((entry, cursor) => (cursor === index ? { ...entry, ...patch } : entry)));
+
+  const handleSave = () => {
+    try {
+      const data = createRuntimeConfigUpdatePayload({
+        agents,
+        bindings,
+        runtimeEntries,
+        dmScope,
+        defaultContextTokens,
+        defaultEngine,
+        knownAgentIds
+      });
+      props.updateRuntime.mutate({ data });
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : String(error));
+    }
+  };
+
+  return (
+    <PageLayout className="space-y-6">
+      <RuntimeConfigOverview />
+      <RuntimeSettingsCard
+        dmScope={dmScope}
+        defaultContextTokens={defaultContextTokens}
+        defaultEngine={defaultEngine}
+        onDmScopeChange={setDmScope}
+        onDefaultContextTokensChange={setDefaultContextTokens}
+        onDefaultEngineChange={setDefaultEngine}
+        dmScopeLabel={hintForPath('session.dmScope', props.uiHints)?.label}
+        dmScopeHelp={hintForPath('session.dmScope', props.uiHints)?.help}
+        defaultContextTokensLabel={hintForPath('agents.defaults.contextTokens', props.uiHints)?.label}
+        defaultContextTokensHelp={hintForPath('agents.defaults.contextTokens', props.uiHints)?.help}
+        defaultEngineLabel={hintForPath('agents.defaults.engine', props.uiHints)?.label}
+        defaultEngineHelp={hintForPath('agents.defaults.engine', props.uiHints)?.help}
+      />
+      <RuntimeEntryListCard
+        entries={runtimeEntries}
+        onUpdateEntry={updateRuntimeEntry}
+        onRemoveEntry={(index) => setRuntimeEntries((previous) => previous.filter((_, cursor) => cursor !== index))}
+        onAddEntry={() => setRuntimeEntries((previous) => [...previous, createEmptyRuntimeEntry()])}
+        label={hintForPath('agents.runtimes.entries', props.uiHints)?.label}
+        help={hintForPath('agents.runtimes.entries', props.uiHints)?.help}
+      />
+      <RuntimeAgentListCard
+        agents={agents}
+        onUpdateAgent={updateAgent}
+        onRemoveAgent={(index) => setAgents((previous) => previous.filter((_, cursor) => cursor !== index))}
+        onAddAgent={() => setAgents((previous) => [...previous, createEmptyRuntimeAgent()])}
+        onSetDefaultAgent={(index, checked) =>
+          setAgents((previous) => checked ? previous.map((entry, cursor) => ({ ...entry, default: cursor === index })) : previous.map((entry, cursor) => (cursor === index ? { ...entry, default: false } : entry)))
+        }
+        label={hintForPath('agents.list', props.uiHints)?.label}
+        help={hintForPath('agents.list', props.uiHints)?.help}
+        contextTokensLabel={hintForPath('agents.list.*.contextTokens', props.uiHints)?.label}
+        engineLabel={hintForPath('agents.list.*.engine', props.uiHints)?.label}
+      />
+      <RuntimeBindingListCard
+        bindings={bindings}
+        onUpdateBinding={updateBinding}
+        onRemoveBinding={(index) => setBindings((previous) => previous.filter((_, cursor) => cursor !== index))}
+        onAddBinding={() => setBindings((previous) => [...previous, createEmptyRuntimeBinding()])}
+        label={hintForPath('bindings', props.uiHints)?.label}
+        help={hintForPath('bindings', props.uiHints)?.help}
+      />
+      <div className="flex justify-end">
+        <Button type="button" onClick={handleSave} disabled={props.updateRuntime.isPending}>
+          <Save className="h-4 w-4 mr-2" />
+          {props.updateRuntime.isPending ? t('saving') : t('saveRuntimeSettings')}
+        </Button>
+      </div>
+    </PageLayout>
+  );
+}