@nextclaw/ui 0.12.11 → 0.12.13

package/src/{components/config/ProvidersList.tsx → shared/components/config/providers-list.tsx}

@@ -1,16 +1,17 @@
-import { useEffect, useMemo, useState } from "react";
-import { KeyRound, Plus, Search } from "lucide-react";
-import { useConfig, useConfigMeta, useConfigSchema, useCreateProvider } from "@/hooks/useConfig";
-import { LogoBadge } from "@/components/common/LogoBadge";
-import { PageHeader, PageLayout } from "@/components/layout/page-layout";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Tabs } from "@/components/ui/tabs-custom";
-import { StatusDot } from "@/components/ui/status-dot";
-import { hintForPath } from "@/lib/config-hints";
-import { t } from "@/lib/i18n";
-import { cn } from "@/lib/utils";
-import { ProviderForm } from "./ProviderForm";
+import { useMemo, useState } from 'react';
+import { KeyRound, Plus, Search } from 'lucide-react';
+import { useConfig, useConfigMeta, useConfigSchema, useCreateProvider } from '@/shared/hooks/use-config';
+import { LogoBadge } from '@/shared/components/common/logo-badge';
+import { PageHeader, PageLayout } from '@/app/components/layout/page-layout';
+import { Button } from '@/shared/components/ui/button';
+import { Input } from '@/shared/components/ui/input';
+import { Tabs } from '@/shared/components/ui/tabs-custom';
+import { StatusDot } from '@/shared/components/ui/status-dot';
+import { hintForPath } from '@/shared/lib/config-hints';
+import { t } from '@/shared/lib/i18n';
+import { cn } from '@/shared/lib/utils';
+import { ProviderForm } from '@/shared/components/config/provider-form';
+import { useViewportLayout } from '@/app/hooks/use-viewport-layout';
 import {
   ConfigSelectionCard,
   ConfigSplitEmptyState,
@@ -18,7 +19,7 @@ import {
   ConfigSplitPaneBody,
   ConfigSplitPaneHeader,
   ConfigSplitSidebar,
-} from "./config-split-page";
+} from '@/shared/components/config-split-page';
 
 function formatBasePreview(base?: string | null) {
   if (!base) {
@@ -26,9 +27,9 @@ function formatBasePreview(base?: string | null) {
   }
   try {
     const parsed = new URL(base);
-    return `${parsed.host}${parsed.pathname && parsed.pathname !== "/" ? parsed.pathname : ""}`;
+    return `${parsed.host}${parsed.pathname && parsed.pathname !== '/' ? parsed.pathname : ''}`;
   } catch {
-    return base.replace(/^https?:\/\//, "");
+    return base.replace(/^https?:\/\//, '');
   }
 }
 
@@ -36,21 +37,22 @@ function sortProvidersForDisplay<T extends { name: string }>(providers: T[]) {
   return providers
     .map((provider, index) => ({ provider, index }))
     .sort((left, right) => {
-      const leftPriority = left.provider.name === "nextclaw" ? 1 : 0;
-      const rightPriority = right.provider.name === "nextclaw" ? 1 : 0;
+      const leftPriority = left.provider.name === 'nextclaw' ? 1 : 0;
+      const rightPriority = right.provider.name === 'nextclaw' ? 1 : 0;
       return leftPriority !== rightPriority ? leftPriority - rightPriority : left.index - right.index;
     })
     .map(({ provider }) => provider);
 }
 
 export function ProvidersList() {
+  const { isMobile } = useViewportLayout();
   const { data: config } = useConfig();
   const { data: meta } = useConfigMeta();
   const { data: schema } = useConfigSchema();
   const createProvider = useCreateProvider();
-  const [activeTab, setActiveTab] = useState("installed");
-  const [selectedProvider, setSelectedProvider] = useState<string>();
-  const [query, setQuery] = useState("");
+  const [activeTab, setActiveTab] = useState('installed');
+  const [selectedProvider, setSelectedProvider] = useState<string | null>(null);
+  const [query, setQuery] = useState('');
   const providers = useMemo(() => sortProvidersForDisplay(meta?.providers ?? []), [meta?.providers]);
   const providersConfig = config?.providers ?? {};
 
@@ -58,7 +60,7 @@ export function ProvidersList() {
     const keyword = query.trim().toLowerCase();
     return providers
       .filter((provider) =>
-        activeTab !== "installed" || Boolean(providersConfig[provider.name]?.enabled !== false && providersConfig[provider.name]?.apiKeySet),
+        activeTab !== 'installed' || Boolean(providersConfig[provider.name]?.enabled !== false && providersConfig[provider.name]?.apiKeySet),
       )
       .filter((provider) => {
         if (!keyword) {
@@ -70,32 +72,36 @@ export function ProvidersList() {
       });
   }, [activeTab, providers, providersConfig, query]);
 
-  useEffect(() => {
-    setSelectedProvider(
-      filteredProviders.some((provider) => provider.name === selectedProvider)
-        ? selectedProvider
-        : filteredProviders[0]?.name,
-    );
-  }, [filteredProviders, selectedProvider]);
+  const resolvedSelectedProvider = useMemo(() => {
+    if (selectedProvider && filteredProviders.some((provider) => provider.name === selectedProvider)) {
+      return selectedProvider;
+    }
+    return isMobile ? null : filteredProviders[0]?.name ?? null;
+  }, [filteredProviders, isMobile, selectedProvider]);
 
   if (!config || !meta) {
-    return <div className="p-8">{t("providersLoading")}</div>;
+    return <div className="p-8">{t('providersLoading')}</div>;
   }
 
   return (
     <PageLayout className="pb-0 xl:flex xl:h-full xl:min-h-0 xl:flex-col">
-      <PageHeader title={t("providersPageTitle")} description={t("providersPageDescription")} />
-      <ConfigSplitPage className="xl:min-h-0">
+      <PageHeader title={t('providersPageTitle')} description={t('providersPageDescription')} />
+      <ConfigSplitPage
+        className="xl:min-h-0"
+        mobileView={isMobile ? (resolvedSelectedProvider ? 'detail' : 'list') : undefined}
+        onMobileBack={() => setSelectedProvider(null)}
+        mobileListLabel={t('providersPageTitle')}
+      >
         <ConfigSplitSidebar>
           <ConfigSplitPaneHeader className="space-y-3 px-4 pb-3 pt-4">
             <Tabs
               tabs={[
                 {
-                  id: "installed",
-                  label: t("providersTabConfigured"),
+                  id: 'installed',
+                  label: t('providersTabConfigured'),
                   count: providers.filter((provider) => providersConfig[provider.name]?.enabled !== false && providersConfig[provider.name]?.apiKeySet).length,
                 },
-                { id: "all", label: t("providersTabAll"), count: providers.length },
+                { id: 'all', label: t('providersTabAll'), count: providers.length },
               ]}
               activeTab={activeTab}
               onChange={setActiveTab}
@@ -108,8 +114,8 @@ export function ProvidersList() {
               onClick={async () => {
                 try {
                   const result = await createProvider.mutateAsync({ data: {} });
-                  setActiveTab("all");
-                  setQuery("");
+                  setActiveTab('all');
+                  setQuery('');
                   setSelectedProvider(result.name);
                 } catch {
                   // toast handled in hook
@@ -118,7 +124,7 @@ export function ProvidersList() {
               disabled={createProvider.isPending}
             >
               <Plus className="mr-2 h-4 w-4" />
-              {createProvider.isPending ? t("saving") : t("providerAddCustom")}
+              {createProvider.isPending ? t('saving') : t('providerAddCustom')}
             </Button>
           </ConfigSplitPaneHeader>
 
@@ -128,7 +134,7 @@ export function ProvidersList() {
               <Input
                 value={query}
                 onChange={(event) => setQuery(event.target.value)}
-                placeholder={t("providersFilterPlaceholder")}
+                placeholder={t('providersFilterPlaceholder')}
                 className="h-10 rounded-xl pl-9"
               />
             </div>
@@ -139,18 +145,14 @@ export function ProvidersList() {
               const providerConfig = providersConfig[provider.name];
               const isEnabled = providerConfig?.enabled !== false;
               const isReady = Boolean(isEnabled && providerConfig?.apiKeySet);
-              const providerLabel =
-                providerConfig?.displayName?.trim() || provider.displayName || provider.name;
-              const description =
-                formatBasePreview(providerConfig?.apiBase || provider.defaultApiBase || "") ||
-                hintForPath(`providers.${provider.name}`, schema?.uiHints)?.help ||
-                t("providersDefaultDescription");
+              const providerLabel = providerConfig?.displayName?.trim() || provider.displayName || provider.name;
+              const description = formatBasePreview(providerConfig?.apiBase || provider.defaultApiBase || '') || hintForPath(`providers.${provider.name}`, schema?.uiHints)?.help || t('providersDefaultDescription');
 
               return (
                 <ConfigSelectionCard
                   key={provider.name}
                   onClick={() => setSelectedProvider(provider.name)}
-                  active={selectedProvider === provider.name}
+                  active={resolvedSelectedProvider === provider.name}
                 >
                   <div className="flex items-start justify-between gap-3">
                     <div className="flex min-w-0 items-center gap-3">
@@ -158,8 +160,8 @@ export function ProvidersList() {
                         name={provider.name}
                         src={provider.logo ? `/logos/${provider.logo}` : null}
                         className={cn(
-                          "h-10 w-10 rounded-lg border",
-                          isReady ? "border-primary/30 bg-white" : "border-gray-200/70 bg-white",
+                          'h-10 w-10 rounded-lg border',
+                          isReady ? 'border-primary/30 bg-white' : 'border-gray-200/70 bg-white',
                         )}
                         imgClassName="h-5 w-5 object-contain"
                         fallback={<span className="text-sm font-semibold uppercase text-gray-500">{provider.name[0]}</span>}
@@ -170,8 +172,8 @@ export function ProvidersList() {
                       </div>
                     </div>
                     <StatusDot
-                      status={isEnabled ? (isReady ? "ready" : "setup") : "inactive"}
-                      label={isEnabled ? (isReady ? t("statusReady") : t("statusSetup")) : t("disabled")}
+                      status={isEnabled ? (isReady ? 'ready' : 'setup') : 'inactive'}
+                      label={isEnabled ? (isReady ? t('statusReady') : t('statusSetup')) : t('disabled')}
                       className="min-w-[56px] justify-center"
                     />
                   </div>
@@ -180,16 +182,16 @@ export function ProvidersList() {
             })}
 
             {filteredProviders.length === 0 ? (
-              <ConfigSplitEmptyState icon={KeyRound} title={t("providersNoMatch")} />
+              <ConfigSplitEmptyState icon={KeyRound} title={t('providersNoMatch')} />
             ) : null}
           </ConfigSplitPaneBody>
         </ConfigSplitSidebar>
 
         <ProviderForm
-          providerName={selectedProvider}
+          providerName={resolvedSelectedProvider ?? undefined}
           onProviderDeleted={(deletedProvider) => {
-            if (deletedProvider === selectedProvider) {
-              setSelectedProvider(undefined);
+            if (deletedProvider === resolvedSelectedProvider) {
+              setSelectedProvider(null);
             }
           }}
         />

package/src/shared/components/config/secrets-config-form.tsx

@@ -0,0 +1,407 @@
+import { useMemo, useState } from 'react';
+import { Plus, Save, 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 { Label } from '@/shared/components/ui/label';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/shared/components/ui/select';
+import { Switch } from '@/shared/components/ui/switch';
+import { PageHeader, PageLayout } from '@/app/components/layout/page-layout';
+import type { SecretProviderView, SecretRefView, SecretSourceView, SecretsView } from '@/shared/lib/api';
+import { t } from '@/shared/lib/i18n';
+import { toast } from 'sonner';
+
+type ProviderRow = {
+  alias: string;
+  source: SecretSourceView;
+  prefix: string;
+  path: string;
+  command: string;
+  argsText: string;
+  cwd: string;
+  timeoutMs: number;
+};
+
+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[];
+};
+
+const SOURCE_OPTIONS: SecretSourceView[] = ['env', 'file', 'exec'];
+
+function createProviderRow(alias = ''): ProviderRow {
+  return { alias, source: 'env', prefix: '', path: '', command: '', argsText: '', cwd: '', timeoutMs: 5000 };
+}
+
+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 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),
+    ),
+  };
+}
+
+function SecretsDefaultsCard(props: {
+  defaultEnv: string;
+  defaultFile: string;
+  defaultExec: string;
+  providerAliases: string[];
+  onChange: (key: 'defaultEnv' | 'defaultFile' | 'defaultExec', value: string) => void;
+}) {
+  const { defaultEnv, defaultFile, defaultExec, providerAliases, onChange } = props;
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>{t('secrets')}</CardTitle>
+        <CardDescription>{t('secretsEnabledHelp')}</CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {[
+          { label: t('defaultEnvProvider'), value: defaultEnv, key: 'defaultEnv' as const },
+          { label: t('defaultFileProvider'), value: defaultFile, key: 'defaultFile' as const },
+          { label: t('defaultExecProvider'), value: defaultExec, key: 'defaultExec' as const },
+        ].map((item) => (
+          <div key={item.key} className="space-y-2">
+            <Label>{item.label}</Label>
+            <Select value={item.value || '__none__'} onValueChange={(value) => onChange(item.key, value === '__none__' ? '' : value)}>
+              <SelectTrigger>
+                <SelectValue placeholder={t('noneOption')} />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="__none__">{t('noneOption')}</SelectItem>
+                {providerAliases.map((alias) => (
+                  <SelectItem key={alias} value={alias}>
+                    {alias}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+        ))}
+      </CardContent>
+    </Card>
+  );
+}
+
+function SecretsProvidersCard(props: {
+  providers: ProviderRow[];
+  onUpdate: (index: number, patch: Partial<ProviderRow>) => void;
+  onRemove: (index: number) => void;
+  onAdd: () => void;
+}) {
+  const { providers, onUpdate, onRemove, onAdd } = props;
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>{t('secretProvidersTitle')}</CardTitle>
+        <CardDescription>{t('secretProvidersDescription')}</CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-3">
+        {providers.map((provider, index) => (
+          <div key={`provider-${index}`} className="space-y-3 rounded-xl border border-gray-200 p-3">
+            <div className="grid grid-cols-1 gap-3 md:grid-cols-3">
+              <Input value={provider.alias} onChange={(event) => onUpdate(index, { alias: event.target.value })} placeholder={t('providerAlias')} />
+              <Select value={provider.source} onValueChange={(value) => onUpdate(index, { source: value as SecretSourceView })}>
+                <SelectTrigger>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {SOURCE_OPTIONS.map((source) => (
+                    <SelectItem key={source} value={source}>
+                      {source}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <Button type="button" variant="outline" onClick={() => onRemove(index)}>
+                <Trash2 className="mr-2 h-4 w-4" />
+                {t('removeProvider')}
+              </Button>
+            </div>
+
+            {provider.source === 'env' ? (
+              <Input value={provider.prefix} onChange={(event) => onUpdate(index, { prefix: event.target.value })} placeholder={t('envPrefix')} />
+            ) : null}
+            {provider.source === 'file' ? (
+              <Input value={provider.path} onChange={(event) => onUpdate(index, { path: event.target.value })} placeholder={t('secretFilePath')} />
+            ) : null}
+            {provider.source === 'exec' ? (
+              <div className="space-y-2">
+                <Input value={provider.command} onChange={(event) => onUpdate(index, { command: event.target.value })} placeholder={t('secretExecCommand')} />
+                <textarea
+                  className="min-h-[84px] w-full rounded-lg border border-gray-200 bg-white px-3 py-2 text-xs font-mono"
+                  value={provider.argsText}
+                  onChange={(event) => onUpdate(index, { argsText: event.target.value })}
+                  placeholder={t('secretExecArgs')}
+                />
+                <div className="grid grid-cols-1 gap-2 md:grid-cols-2">
+                  <Input value={provider.cwd} onChange={(event) => onUpdate(index, { cwd: event.target.value })} placeholder={t('secretExecCwd')} />
+                  <Input
+                    type="number"
+                    min={1}
+                    value={provider.timeoutMs}
+                    onChange={(event) => onUpdate(index, { timeoutMs: Number.parseInt(event.target.value, 10) || 5000 })}
+                    placeholder={t('secretExecTimeoutMs')}
+                  />
+                </div>
+              </div>
+            ) : null}
+          </div>
+        ))}
+
+        <Button type="button" variant="outline" onClick={onAdd}>
+          <Plus className="mr-2 h-4 w-4" />
+          {t('addSecretProvider')}
+        </Button>
+      </CardContent>
+    </Card>
+  );
+}
+
+function SecretsRefsCard(props: {
+  refs: RefRow[];
+  providerAliases: string[];
+  onUpdate: (index: number, patch: Partial<RefRow>) => void;
+  onRemove: (index: number) => void;
+  onAdd: () => void;
+}) {
+  const { refs, providerAliases, onUpdate, onRemove, onAdd } = props;
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>{t('secretRefsTitle')}</CardTitle>
+        <CardDescription>{t('secretRefsDescription')}</CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-3">
+        {refs.map((ref, index) => (
+          <div key={`ref-${index}`} className="space-y-3 rounded-xl border border-gray-200 p-3">
+            <div className="grid grid-cols-1 gap-3 md:grid-cols-2">
+              <Input value={ref.path} onChange={(event) => onUpdate(index, { path: event.target.value })} placeholder={t('secretConfigPath')} />
+              <Input value={ref.id} onChange={(event) => onUpdate(index, { id: event.target.value })} placeholder={t('secretId')} />
+              <Select value={ref.source} onValueChange={(value) => onUpdate(index, { source: value as SecretSourceView })}>
+                <SelectTrigger>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {SOURCE_OPTIONS.map((source) => (
+                    <SelectItem key={source} value={source}>
+                      {source}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <div className="grid grid-cols-[1fr_auto] gap-2">
+                <Select value={ref.provider || '__none__'} onValueChange={(value) => onUpdate(index, { provider: value === '__none__' ? '' : value })}>
+                  <SelectTrigger>
+                    <SelectValue placeholder={t('secretProviderAlias')} />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="__none__">{t('noneOption')}</SelectItem>
+                    {providerAliases.map((alias) => (
+                      <SelectItem key={alias} value={alias}>
+                        {alias}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+                <Button type="button" variant="outline" onClick={() => onRemove(index)}>
+                  <Trash2 className="h-4 w-4" />
+                </Button>
+              </div>
+            </div>
+          </div>
+        ))}
+
+        <Button type="button" variant="outline" onClick={onAdd}>
+          <Plus className="mr-2 h-4 w-4" />
+          {t('addSecretRef')}
+        </Button>
+      </CardContent>
+    </Card>
+  );
+}
+
+export function SecretsConfigForm(props: {
+  initialState: SecretsFormState;
+  isPending: boolean;
+  onSubmit: (state: SecretsFormState) => void;
+}) {
+  const { initialState, isPending, onSubmit } = props;
+  const [state, setState] = useState(initialState);
+  const providerAliases = useMemo(() => {
+    const aliases = state.providers.map((item) => item.alias.trim()).filter(Boolean);
+    return Array.from(new Set(aliases));
+  }, [state.providers]);
+
+  const updateProvider = (index: number, patch: Partial<ProviderRow>) => {
+    setState((prev) => ({
+      ...prev,
+      providers: prev.providers.map((entry, cursor) => (cursor === index ? { ...entry, ...patch } : entry)),
+    }));
+  };
+
+  const updateRef = (index: number, patch: Partial<RefRow>) => {
+    setState((prev) => ({
+      ...prev,
+      refs: prev.refs.map((entry, cursor) => (cursor === index ? { ...entry, ...patch } : entry)),
+    }));
+  };
+
+  const handleSave = () => {
+    try {
+      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 };
+      }
+
+      onSubmit({
+        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 })),
+      });
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : String(error));
+    }
+  };
+
+  return (
+    <PageLayout className="space-y-6">
+      <PageHeader title={t('secretsPageTitle')} description={t('secretsPageDescription')} />
+      <Card>
+        <CardHeader>
+          <CardTitle>{t('secrets')}</CardTitle>
+          <CardDescription>{t('secretsEnabledHelp')}</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="flex items-center justify-between rounded-xl border border-gray-200 p-3">
+            <div>
+              <p className="text-sm font-medium text-gray-800">{t('enabled')}</p>
+              <p className="text-xs text-gray-500">{t('secretsEnabledHelp')}</p>
+            </div>
+            <Switch checked={state.enabled} onCheckedChange={(enabled) => setState((prev) => ({ ...prev, enabled }))} />
+          </div>
+          <SecretsDefaultsCard
+            defaultEnv={state.defaultEnv}
+            defaultFile={state.defaultFile}
+            defaultExec={state.defaultExec}
+            providerAliases={providerAliases}
+            onChange={(key, value) => setState((prev) => ({ ...prev, [key]: value }))}
+          />
+        </CardContent>
+      </Card>
+      <SecretsProvidersCard
+        providers={state.providers}
+        onUpdate={updateProvider}
+        onRemove={(index) => setState((prev) => ({ ...prev, providers: prev.providers.filter((_, cursor) => cursor !== index) }))}
+        onAdd={() => setState((prev) => ({ ...prev, providers: [...prev.providers, createProviderRow()] }))}
+      />
+      <SecretsRefsCard
+        refs={state.refs}
+        providerAliases={providerAliases}
+        onUpdate={updateRef}
+        onRemove={(index) => setState((prev) => ({ ...prev, refs: prev.refs.filter((_, cursor) => cursor !== index) }))}
+        onAdd={() => setState((prev) => ({ ...prev, refs: [...prev.refs, createRefRow()] }))}
+      />
+      <div className="flex justify-end">
+        <Button type="button" onClick={handleSave} disabled={isPending}>
+          <Save className="mr-2 h-4 w-4" />
+          {isPending ? t('saving') : t('save')}
+        </Button>
+      </div>
+    </PageLayout>
+  );
+}