@nextclaw/ui 0.12.8 → 0.12.10

package/src/components/config/channel-form-fields-section.tsx

@@ -1,29 +1,46 @@
-import type { Dispatch, SetStateAction } from 'react';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-import { Switch } from '@/components/ui/switch';
-import { TagInput } from '@/components/common/TagInput';
-import { hintForPath } from '@/lib/config-hints';
-import { t } from '@/lib/i18n';
-import { Globe, Hash, KeyRound, Mail, Settings, ToggleLeft } from 'lucide-react';
-import type { ConfigUiHints } from '@/api/types';
-import type { ChannelField } from './channel-form-fields';
+import type { Dispatch, SetStateAction } from "react";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+import { TagInput } from "@/components/common/tag-input";
+import { hintForPath } from "@/lib/config-hints";
+import { t } from "@/lib/i18n";
+import {
+  Globe,
+  Hash,
+  KeyRound,
+  Mail,
+  Settings,
+  ToggleLeft,
+} from "lucide-react";
+import type { ConfigUiHints } from "@/api/types";
+import type { ChannelField } from "./channel-form-fields";
 
 function getFieldIcon(fieldName: string) {
-  if (fieldName.includes('token') || fieldName.includes('secret') || fieldName.includes('password')) {
+  if (
+    fieldName.includes("token") ||
+    fieldName.includes("secret") ||
+    fieldName.includes("password")
+  ) {
     return <KeyRound className="h-3.5 w-3.5 text-gray-500" />;
   }
-  if (fieldName.includes('url') || fieldName.includes('host')) {
+  if (fieldName.includes("url") || fieldName.includes("host")) {
     return <Globe className="h-3.5 w-3.5 text-gray-500" />;
   }
-  if (fieldName.includes('email') || fieldName.includes('mail')) {
+  if (fieldName.includes("email") || fieldName.includes("mail")) {
     return <Mail className="h-3.5 w-3.5 text-gray-500" />;
   }
-  if (fieldName.includes('id') || fieldName.includes('from')) {
+  if (fieldName.includes("id") || fieldName.includes("from")) {
     return <Hash className="h-3.5 w-3.5 text-gray-500" />;
   }
-  if (fieldName === 'enabled' || fieldName === 'consentGranted') {
+  if (fieldName === "enabled" || fieldName === "consentGranted") {
     return <ToggleLeft className="h-3.5 w-3.5 text-gray-500" />;
   }
   return <Settings className="h-3.5 w-3.5 text-gray-500" />;
@@ -46,79 +63,95 @@ export function ChannelFormFieldsSection({
   jsonDrafts,
   setJsonDrafts,
   updateField,
-  uiHints
+  uiHints,
 }: ChannelFormFieldsSectionProps) {
   return (
     <>
       {fields.map((field) => {
-        const hint = hintForPath(`channels.${channelName}.${field.name}`, uiHints);
+        const hint = hintForPath(
+          `channels.${channelName}.${field.name}`,
+          uiHints,
+        );
         const label = hint?.label ?? field.label;
         const placeholder = hint?.placeholder;
 
         return (
           <div key={field.name} className="space-y-2.5">
-            <Label htmlFor={field.name} className="flex items-center gap-2 text-sm font-medium text-gray-900">
+            <Label
+              htmlFor={field.name}
+              className="flex items-center gap-2 text-sm font-medium text-gray-900"
+            >
               {getFieldIcon(field.name)}
               {label}
             </Label>
 
-            {field.type === 'boolean' && (
+            {field.type === "boolean" && (
               <div className="flex items-center justify-between rounded-xl bg-gray-50 p-3">
                 <span className="text-sm text-gray-500">
-                  {(formData[field.name] as boolean) ? t('enabled') : t('disabled')}
+                  {(formData[field.name] as boolean)
+                    ? t("enabled")
+                    : t("disabled")}
                 </span>
                 <Switch
                   id={field.name}
                   checked={(formData[field.name] as boolean) || false}
-                  onCheckedChange={(checked) => updateField(field.name, checked)}
+                  onCheckedChange={(checked) =>
+                    updateField(field.name, checked)
+                  }
                   className="data-[state=checked]:bg-emerald-500"
                 />
               </div>
             )}
 
-            {(field.type === 'text' || field.type === 'email') && (
+            {(field.type === "text" || field.type === "email") && (
               <Input
                 id={field.name}
                 type={field.type}
-                value={(formData[field.name] as string) || ''}
-                onChange={(event) => updateField(field.name, event.target.value)}
+                value={(formData[field.name] as string) || ""}
+                onChange={(event) =>
+                  updateField(field.name, event.target.value)
+                }
                 placeholder={placeholder}
                 className="rounded-xl"
               />
             )}
 
-            {field.type === 'password' && (
+            {field.type === "password" && (
               <Input
                 id={field.name}
                 type="password"
-                value={(formData[field.name] as string) || ''}
-                onChange={(event) => updateField(field.name, event.target.value)}
-                placeholder={placeholder ?? t('leaveBlankToKeepUnchanged')}
+                value={(formData[field.name] as string) || ""}
+                onChange={(event) =>
+                  updateField(field.name, event.target.value)
+                }
+                placeholder={placeholder ?? t("leaveBlankToKeepUnchanged")}
                 className="rounded-xl"
               />
             )}
 
-            {field.type === 'number' && (
+            {field.type === "number" && (
               <Input
                 id={field.name}
                 type="number"
                 value={(formData[field.name] as number) || 0}
-                onChange={(event) => updateField(field.name, parseInt(event.target.value, 10) || 0)}
+                onChange={(event) =>
+                  updateField(field.name, parseInt(event.target.value, 10) || 0)
+                }
                 placeholder={placeholder}
                 className="rounded-xl"
               />
             )}
 
-            {field.type === 'tags' && (
+            {field.type === "tags" && (
               <TagInput
                 value={(formData[field.name] as string[]) || []}
                 onChange={(tags) => updateField(field.name, tags)}
               />
             )}
 
-            {field.type === 'select' && (
+            {field.type === "select" && (
               <Select
-                value={(formData[field.name] as string) || ''}
+                value={(formData[field.name] as string) || ""}
                 onValueChange={(value) => updateField(field.name, value)}
               >
                 <SelectTrigger className="rounded-xl">
@@ -134,14 +167,14 @@ export function ChannelFormFieldsSection({
               </Select>
             )}
 
-            {field.type === 'json' && (
+            {field.type === "json" && (
               <textarea
                 id={field.name}
-                value={jsonDrafts[field.name] ?? '{}'}
+                value={jsonDrafts[field.name] ?? "{}"}
                 onChange={(event) =>
                   setJsonDrafts((prev) => ({
                     ...prev,
-                    [field.name]: event.target.value
+                    [field.name]: event.target.value,
                   }))
                 }
                 className="min-h-[120px] w-full resize-none rounded-lg border border-gray-200 bg-white px-3 py-2 text-xs font-mono"

package/src/components/config/config-split-page.tsx

@@ -0,0 +1,109 @@
+import type { ButtonHTMLAttributes, HTMLAttributes } from "react";
+import type { LucideIcon } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+const CARD_CLASS =
+  "min-w-0 overflow-hidden rounded-2xl border border-gray-200/70 bg-white shadow-card xl:h-[calc(100vh-180px)] xl:max-h-[860px]";
+type DivProps = HTMLAttributes<HTMLDivElement>;
+type SectionProps = HTMLAttributes<HTMLElement>;
+
+function ConfigSplitPane({ className, ...props }: SectionProps) {
+  return <section className={cn(CARD_CLASS, "flex flex-col", className)} {...props} />;
+}
+
+export function ConfigSplitPage({ className, ...props }: DivProps) {
+  return (
+    <div
+      className={cn(
+        "grid min-h-0 grid-cols-1 gap-5 xl:flex-1 xl:grid-cols-[340px_minmax(0,1fr)]",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { ConfigSplitPane as ConfigSplitSidebar, ConfigSplitPane as ConfigSplitDetailPane };
+
+export function ConfigSplitEmptyPane({ className, ...props }: SectionProps) {
+  return (
+    <section
+      className={cn(CARD_CLASS, "flex items-center justify-center px-6 py-12 text-center", className)}
+      {...props}
+    />
+  );
+}
+
+export function ConfigSplitPaneHeader({ className, ...props }: DivProps) {
+  return <div className={cn("shrink-0 border-b border-gray-100", className)} {...props} />;
+}
+
+export function ConfigSplitPaneBody({
+  className,
+  scrollOnDesktop = true,
+  ...props
+}: DivProps & { scrollOnDesktop?: boolean }) {
+  return (
+    <div
+      className={cn(
+        "min-h-0 flex-1",
+        scrollOnDesktop && "overflow-visible xl:overflow-y-auto xl:overscroll-contain",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function ConfigSplitPaneFooter({ className, ...props }: DivProps) {
+  return <div className={cn("shrink-0 border-t border-gray-100", className)} {...props} />;
+}
+
+export function ConfigSelectionCard({
+  active = false,
+  className,
+  type = "button",
+  ...props
+}: ButtonHTMLAttributes<HTMLButtonElement> & { active?: boolean }) {
+  return (
+    <button
+      type={type}
+      className={cn(
+        "w-full rounded-xl border p-2.5 text-left transition-all",
+        active
+          ? "border-primary/30 bg-primary-50/40 shadow-sm"
+          : "border-gray-200/70 bg-white hover:border-gray-300 hover:bg-gray-50/70",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function ConfigSplitEmptyState({
+  icon: Icon,
+  title,
+  description,
+  className,
+  ...props
+}: HTMLAttributes<HTMLDivElement> & {
+  icon: LucideIcon;
+  title: string;
+  description?: string;
+}) {
+  return (
+    <div
+      className={cn(
+        "flex min-h-[220px] flex-col items-center justify-center rounded-xl border border-dashed border-gray-200 bg-gray-50/70 px-4 py-10 text-center",
+        className,
+      )}
+      {...props}
+    >
+      <div className="mb-3 flex h-10 w-10 items-center justify-center rounded-lg bg-white">
+        <Icon className="h-5 w-5 text-gray-300" />
+      </div>
+      <p className="text-sm font-medium text-gray-700">{title}</p>
+      {description ? <p className="mt-2 text-xs text-gray-500">{description}</p> : null}
+    </div>
+  );
+}

package/src/components/config/provider-enabled-field.tsx

@@ -1,6 +1,6 @@
-import { Label } from '@/components/ui/label';
-import { Switch } from '@/components/ui/switch';
-import { t } from '@/lib/i18n';
+import { SettingRow } from "@/components/ui/setting-row";
+import { Switch } from "@/components/ui/switch";
+import { t } from "@/lib/i18n";
 
 type ProviderEnabledFieldProps = {
   enabled: boolean;
@@ -8,13 +8,20 @@ type ProviderEnabledFieldProps = {
 };
 
 export function ProviderEnabledField(props: ProviderEnabledFieldProps) {
+  const { enabled, onChange } = props;
+
   return (
-    <div className="flex items-center justify-between rounded-xl border border-gray-200 bg-gray-50 px-4 py-3">
-      <Label className="text-sm font-medium text-gray-900">{t('enabled')}</Label>
-      <div className="flex items-center gap-3">
-        <span className="text-xs text-gray-500">{props.enabled ? t('enabled') : t('disabled')}</span>
-        <Switch checked={props.enabled} onCheckedChange={props.onChange} />
-      </div>
-    </div>
+    <SettingRow
+      tone="muted"
+      title={t("enabled")}
+      control={
+        <div className="flex items-center gap-3">
+          <span className="text-xs text-gray-500">
+            {enabled ? t("enabled") : t("disabled")}
+          </span>
+          <Switch checked={enabled} onCheckedChange={onChange} />
+        </div>
+      }
+    />
   );
 }

package/src/components/config/runtime-control-card.test.tsx

@@ -49,6 +49,7 @@ describe('RuntimeControlCard', () => {
         lifecycle: 'healthy',
         serviceState: 'running',
         message: 'runtime healthy',
+        pendingRestart: null,
         canStartService: {
           available: false,
           requiresConfirmation: false,
@@ -90,6 +91,7 @@ describe('RuntimeControlCard', () => {
       lifecycle: 'healthy',
       serviceState: 'running',
       message: 'runtime healthy',
+      pendingRestart: null,
       canStartService: {
         available: false,
         requiresConfirmation: false,
@@ -212,6 +214,7 @@ describe('RuntimeControlCard', () => {
         lifecycle: 'healthy',
         serviceState: 'running',
         message: 'runtime healthy',
+        pendingRestart: null,
         canStartService: {
           available: false,
           requiresConfirmation: false,
@@ -252,4 +255,57 @@ describe('RuntimeControlCard', () => {
     });
     expect(toast.success).toHaveBeenCalledWith('NextClaw app restart scheduled.');
   });
+
+  it('shows a pending restart notice instead of auto-applying hidden restarts', () => {
+    const queryClient = new QueryClient();
+
+    mocks.useRuntimeControl.mockReturnValue({
+      data: {
+        environment: 'managed-local-service',
+        lifecycle: 'healthy',
+        serviceState: 'running',
+        message: 'Saved changes are waiting for a manual restart.',
+        pendingRestart: {
+          changedPaths: ['plugins', 'ui'],
+          message: 'Saved changes are waiting for a manual restart.',
+          reasons: ['config reload requires restart: plugins, ui'],
+          requestedAt: '2026-04-17T10:00:00.000Z'
+        },
+        canStartService: {
+          available: false,
+          requiresConfirmation: false,
+          impact: 'brief-ui-disconnect',
+          reasonIfUnavailable: '当前页面已经由运行中的本地服务托管。'
+        },
+        canRestartService: {
+          available: true,
+          requiresConfirmation: false,
+          impact: 'brief-ui-disconnect',
+        },
+        canStopService: {
+          available: true,
+          requiresConfirmation: true,
+          impact: 'brief-ui-disconnect',
+        },
+        canRestartApp: {
+          available: false,
+          requiresConfirmation: true,
+          impact: 'full-app-relaunch',
+          reasonIfUnavailable: 'desktop only',
+        },
+        managementHint: 'This page is served by the running local service.'
+      },
+      isError: false,
+      error: null,
+    });
+
+    render(<RuntimeControlCard />, {
+      wrapper: createWrapper(queryClient),
+    });
+
+    expect(screen.getByText('待重启')).toBeTruthy();
+    expect(screen.getByText('这次改动已经保存，但系统不会自动重启。请在你方便的时候手动重启，重启完成后该提示会自动清空。')).toBeTruthy();
+    expect(screen.getByText('plugins')).toBeTruthy();
+    expect(screen.getByText('ui')).toBeTruthy();
+  });
 });

package/src/components/config/runtime-control-card.tsx

@@ -159,6 +159,7 @@ export function RuntimeControlCard() {
   const displayedMessage = localMessage ?? controlView?.message ?? t('runtimeControlDescription');
   const busy = serviceActionMutation.isPending || busyAction !== null || displayedLifecycle === 'recovering';
   const visibleActions = resolveVisibleActions(controlView);
+  const pendingRestart = controlView?.pendingRestart ?? null;
 
   const resetLocalState = () => {
     setLocalLifecycle(null);
@@ -261,6 +262,30 @@ export function RuntimeControlCard() {
           ) : null}
         </div>
 
+        {pendingRestart ? (
+          <div className="rounded-xl border border-amber-200 bg-amber-50 p-4 space-y-3">
+            <div className="text-sm font-medium text-amber-900">{t('runtimeControlPendingRestartTitle')}</div>
+            <p className="text-sm text-amber-800">{t('runtimeControlPendingRestartDescription')}</p>
+            {pendingRestart.changedPaths.length > 0 ? (
+              <div className="space-y-2">
+                <div className="text-xs font-medium uppercase tracking-[0.08em] text-amber-700">
+                  {t('runtimeControlPendingRestartPaths')}
+                </div>
+                <div className="flex flex-wrap gap-2">
+                  {pendingRestart.changedPaths.map((path) => (
+                    <span
+                      key={path}
+                      className="rounded-full border border-amber-200 bg-white px-2.5 py-1 text-xs text-amber-800"
+                    >
+                      {path}
+                    </span>
+                  ))}
+                </div>
+              </div>
+            ) : null}
+          </div>
+        ) : null}
+
         <div className="flex flex-col gap-3 md:flex-row md:flex-wrap">
           {visibleActions.map((item) => {
             const isBusyAction = busyAction === item.action;