@nextclaw/ui 0.12.11 → 0.12.13

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

@@ -1,7 +1,7 @@
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { RemoteAccessPage, useRemoteAccessStore } from "@/features/remote";
-import { setLanguage } from "@/lib/i18n";
+import { setLanguage } from "@/shared/lib/i18n";
 
 const mocks = vi.hoisted(() => ({
   reauthorizeRemoteAccess: vi.fn(),

package/src/features/remote/components/remote-access-page.tsx

@@ -1,14 +1,14 @@
-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";
+} 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,
@@ -16,7 +16,7 @@ import {
   useRemoteAccessStore,
 } from "@/features/remote";
 import { useRemoteStatus } from "@/features/remote/hooks/use-remote-access";
-import { formatDateTime, t } from "@/lib/i18n";
+import { formatDateTime, t } from "@/shared/lib/i18n";
 import { Laptop, RefreshCcw, SquareArrowOutUpRight } from "lucide-react";
 import { useEffect, useMemo } from "react";
 

package/src/features/remote/hooks/use-remote-access.ts

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

package/src/features/remote/managers/remote-access.manager.ts

@@ -1,7 +1,7 @@
-import { controlRemoteService, fetchRemoteDoctor, updateRemoteSettings } from '@/api/remote';
-import type { RemoteAccessView } from '@/api/remote.types';
+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 '@/lib/i18n';
+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';

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

@@ -1,6 +1,6 @@
 import { beforeEach, describe, expect, it } from 'vitest';
-import type { RemoteAccessView } from '@/api/remote.types';
-import { setLanguage } from '@/lib/i18n';
+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 {

package/src/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/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/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>
+  );
+}

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

@@ -0,0 +1,16 @@
+import { PageHeader } from '@/app/components/layout/page-layout';
+import { RuntimeControlCard } from '@/features/system-status/components/runtime-control-card';
+import { RuntimePresenceCard } from '@/features/system-status/components/runtime-presence-card';
+import { t } from '@/shared/lib/i18n';
+import { PwaInstallCard } from '@/features/pwa';
+
+export function RuntimeConfigOverview() {
+  return (
+    <>
+      <PageHeader title={t('runtimePageTitle')} description={t('runtimePageDescription')} />
+      <RuntimeControlCard />
+      <RuntimePresenceCard />
+      <PwaInstallCard />
+    </>
+  );
+}

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

@@ -0,0 +1,58 @@
+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 { Switch } from '@/shared/components/ui/switch';
+import type { RuntimeEntryDraft } from '@/features/system-status/utils/runtime-config-agent.utils';
+
+export function RuntimeEntryListCard(props: {
+  entries: RuntimeEntryDraft[];
+  onUpdateEntry: (index: number, patch: Partial<RuntimeEntryDraft>) => void;
+  onRemoveEntry: (index: number) => void;
+  onAddEntry: () => void;
+  label?: string;
+  help?: string;
+}) {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>{props.label ?? 'Runtime Entries'}</CardTitle>
+        <CardDescription>{props.help ?? '统一管理可见的 runtime entry 与其配置。'}</CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-3">
+        {props.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="entry id，例如 hermes" />
+              <Input value={entry.label ?? ''} onChange={(event) => props.onUpdateEntry(index, { label: event.target.value })} placeholder="展示名称，例如 Hermes" />
+              <Input value={entry.type} onChange={(event) => props.onUpdateEntry(index, { type: event.target.value })} placeholder="runtime type，例如 narp-stdio" />
+              <div className="flex items-center justify-between rounded-lg border border-gray-200 px-3 py-2">
+                <span className="text-sm text-gray-700">Enabled</span>
+                <Switch checked={entry.enabled !== false} onCheckedChange={(checked) => props.onUpdateEntry(index, { enabled: checked })} />
+              </div>
+            </div>
+            <div className="space-y-2">
+              <label className="text-sm font-medium text-gray-800">Config JSON</label>
+              <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 })}
+                spellCheck={false}
+              />
+            </div>
+            <div className="flex justify-end">
+              <Button type="button" variant="outline" onClick={() => props.onRemoveEntry(index)}>
+                <Trash2 className="mr-2 h-4 w-4" />
+                Delete
+              </Button>
+            </div>
+          </div>
+        ))}
+        <Button type="button" variant="outline" onClick={props.onAddEntry}>
+          <Plus className="mr-2 h-4 w-4" />
+          Add Runtime Entry
+        </Button>
+      </CardContent>
+    </Card>
+  );
+}