@nextclaw/ui 0.15.9 → 0.15.11

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

@@ -1,7 +1,7 @@
 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 { SettingsGroup, SettingsSection } from '@/shared/components/settings/setting-row';
 import { Input } from '@/shared/components/ui/input';
 import { Switch } from '@/shared/components/ui/switch';
 import { t } from '@/shared/lib/i18n';
@@ -21,22 +21,27 @@ export function RuntimeAgentListCard({
   onSetDefaultAgent: (index: number, checked: boolean) => void;
 }) {
   return (
-    <Card>
-      <CardHeader>
-        <CardTitle>{t('agentList')}</CardTitle>
-        <CardDescription>{t('agentListHelp')}</CardDescription>
-      </CardHeader>
-      <CardContent className="space-y-3">
+    <SettingsSection
+      title={t('agentList')}
+      description={t('agentListHelp')}
+      actions={
+        <Button type='button' variant='ghost' size='sm' onClick={onAddAgent}>
+          <Plus className='mr-2 h-4 w-4' />
+          {t('addAgent')}
+        </Button>
+      }
+    >
+      <SettingsGroup>
         {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">
+          <div key={`${index}-${agent.id}`} className='space-y-3 p-4'>
+            <div className='grid grid-cols-1 md:grid-cols-2 gap-3'>
               <Input value={agent.id} onChange={(event) => onUpdateAgent(index, { id: event.target.value })} placeholder={t('agentIdPlaceholder')} />
               <Input value={agent.workspace ?? ''} onChange={(event) => onUpdateAgent(index, { workspace: event.target.value })} placeholder={t('workspaceOverridePlaceholder')} />
               <Input value={agent.model ?? ''} onChange={(event) => onUpdateAgent(index, { model: event.target.value })} placeholder={t('modelOverridePlaceholder')} />
               <Input value={agent.runtime ?? agent.engine ?? ''} onChange={(event) => onUpdateAgent(index, { runtime: event.target.value })} placeholder={t('engineOverridePlaceholder')} />
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
+              <div className='grid grid-cols-1 md:grid-cols-2 gap-2'>
                 <Input
-                  type="number"
+                  type='number'
                   min={1000}
                   step={1000}
                   value={agent.contextTokens ?? ''}
@@ -44,7 +49,7 @@ export function RuntimeAgentListCard({
                   placeholder={t('contextTokensPlaceholder')}
                 />
                 <Input
-                  type="number"
+                  type='number'
                   min={1}
                   value={agent.maxToolIterations ?? ''}
                   onChange={(event) => onUpdateAgent(index, { maxToolIterations: parseOptionalInt(event.target.value) })}
@@ -52,23 +57,19 @@ export function RuntimeAgentListCard({
                 />
               </div>
             </div>
-            <div className="flex items-center justify-between">
-              <div className="flex items-center gap-2 text-sm text-gray-600">
+            <div className='flex items-center justify-between'>
+              <div className='flex items-center gap-2 text-sm text-muted-foreground'>
                 <Switch checked={Boolean(agent.default)} onCheckedChange={(checked) => onSetDefaultAgent(index, checked)} />
                 <span>{t('defaultAgent')}</span>
               </div>
-              <Button type="button" variant="outline" size="sm" onClick={() => onRemoveAgent(index)}>
-                <Trash2 className="h-4 w-4 mr-1" />
+              <Button type='button' variant='outline' size='sm' onClick={() => onRemoveAgent(index)}>
+                <Trash2 className='h-4 w-4 mr-1' />
                 {t('remove')}
               </Button>
             </div>
           </div>
         ))}
-        <Button type="button" variant="outline" onClick={onAddAgent}>
-          <Plus className="h-4 w-4 mr-2" />
-          {t('addAgent')}
-        </Button>
-      </CardContent>
-    </Card>
+      </SettingsGroup>
+    </SettingsSection>
   );
 }

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

@@ -1,7 +1,7 @@
 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 { SettingsGroup, SettingsSection } from '@/shared/components/settings/setting-row';
 import { Input } from '@/shared/components/ui/input';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/shared/components/ui/select';
 import { t } from '@/shared/lib/i18n';
@@ -19,17 +19,22 @@ export function RuntimeBindingListCard({
   onAddBinding: () => void;
 }) {
   return (
-    <Card>
-      <CardHeader>
-        <CardTitle>{t('bindings')}</CardTitle>
-        <CardDescription>{t('bindingsHelp')}</CardDescription>
-      </CardHeader>
-      <CardContent className="space-y-3">
+    <SettingsSection
+      title={t('bindings')}
+      description={t('bindingsHelp')}
+      actions={
+        <Button type='button' variant='ghost' size='sm' onClick={onAddBinding}>
+          <Plus className='mr-2 h-4 w-4' />
+          {t('addBinding')}
+        </Button>
+      }
+    >
+      <SettingsGroup>
         {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">
+            <div key={`${index}-${binding.agentId}`} className='space-y-3 p-4'>
+              <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3'>
                 <Input value={binding.agentId} onChange={(event) => onUpdateBinding(index, { ...binding, agentId: event.target.value })} placeholder={t('targetAgentIdPlaceholder')} />
                 <Input value={binding.match.channel} onChange={(event) => onUpdateBinding(index, { ...binding, match: { ...binding.match, channel: event.target.value } })} placeholder={t('channelPlaceholder')} />
                 <Input value={binding.match.accountId ?? ''} onChange={(event) => onUpdateBinding(index, { ...binding, match: { ...binding.match, accountId: event.target.value } })} placeholder={t('accountIdOptionalPlaceholder')} />
@@ -49,10 +54,10 @@ export function RuntimeBindingListCard({
                     <SelectValue />
                   </SelectTrigger>
                   <SelectContent>
-                    <SelectItem value="__none__">{t('peerKindOptional')}</SelectItem>
-                    <SelectItem value="direct">{t('peerKindDirect')}</SelectItem>
-                    <SelectItem value="group">{t('peerKindGroup')}</SelectItem>
-                    <SelectItem value="channel">{t('peerKindChannel')}</SelectItem>
+                    <SelectItem value='__none__'>{t('peerKindOptional')}</SelectItem>
+                    <SelectItem value='direct'>{t('peerKindDirect')}</SelectItem>
+                    <SelectItem value='group'>{t('peerKindGroup')}</SelectItem>
+                    <SelectItem value='channel'>{t('peerKindChannel')}</SelectItem>
                   </SelectContent>
                 </Select>
                 <Input
@@ -69,20 +74,16 @@ export function RuntimeBindingListCard({
                   placeholder={t('peerIdPlaceholder')}
                 />
               </div>
-              <div className="flex justify-end">
-                <Button type="button" variant="outline" size="sm" onClick={() => onRemoveBinding(index)}>
-                  <Trash2 className="h-4 w-4 mr-1" />
+              <div className='flex justify-end'>
+                <Button type='button' variant='outline' size='sm' onClick={() => onRemoveBinding(index)}>
+                  <Trash2 className='h-4 w-4 mr-1' />
                   {t('remove')}
                 </Button>
               </div>
             </div>
           );
         })}
-        <Button type="button" variant="outline" onClick={onAddBinding}>
-          <Plus className="h-4 w-4 mr-2" />
-          {t('addBinding')}
-        </Button>
-      </CardContent>
-    </Card>
+      </SettingsGroup>
+    </SettingsSection>
   );
 }

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

@@ -3,7 +3,7 @@ import { Save } from 'lucide-react';
 import type { ConfigView, RuntimeConfigUpdate } from '@/shared/lib/api';
 import { Button } from '@/shared/components/ui/button';
 import { FormActions } from '@/shared/components/ui/actions/form-actions';
-import { PageLayout } from '@/app/components/layout/page-layout';
+import { SettingsPage } from '@/shared/components/settings/settings-page';
 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';
@@ -58,7 +58,10 @@ export function RuntimeConfigEditor({
   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 updateRuntimeEntry = (index: number, patch: Partial<RuntimeEntryDraft>) =>
+    setRuntimeEntries((previous) =>
+      previous.map((entry, cursor) => (cursor === index ? { ...entry, ...patch } : entry))
+    );
 
   const handleSave = () => {
     try {
@@ -79,7 +82,7 @@ export function RuntimeConfigEditor({
   };
 
   return (
-    <PageLayout className="space-y-6">
+    <SettingsPage title={t('runtimePageTitle')} description={t('runtimePageDescription')}>
       <RuntimeConfigOverview />
       <RuntimeSettingsCard
         companionEnabled={companionEnabled}
@@ -103,7 +106,14 @@ export function RuntimeConfigEditor({
         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)))
+          setAgents((previous) =>
+            checked
+              ? previous.map((entry, cursor) => ({
+                  ...entry,
+                  default: cursor === index
+                }))
+              : previous.map((entry, cursor) => (cursor === index ? { ...entry, default: false } : entry))
+          )
         }
       />
       <RuntimeBindingListCard
@@ -113,11 +123,11 @@ export function RuntimeConfigEditor({
         onAddBinding={() => setBindings((previous) => [...previous, createEmptyRuntimeBinding()])}
       />
       <FormActions>
-        <Button type="button" size="sm" onClick={handleSave} disabled={updateRuntime.isPending}>
-          <Save className="mr-1.5 h-3.5 w-3.5" />
+        <Button type='button' size='sm' onClick={handleSave} disabled={updateRuntime.isPending}>
+          <Save className='mr-1.5 h-3.5 w-3.5' />
           {updateRuntime.isPending ? t('saving') : t('saveRuntimeSettings')}
         </Button>
       </FormActions>
-    </PageLayout>
+    </SettingsPage>
   );
 }

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

@@ -1,13 +1,10 @@
-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

@@ -1,6 +1,6 @@
 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 { SettingsGroup, SettingsSection } from '@/shared/components/settings/setting-row';
 import { Input } from '@/shared/components/ui/input';
 import { Switch } from '@/shared/components/ui/switch';
 import { t } from '@/shared/lib/i18n';
@@ -18,45 +18,46 @@ export function RuntimeEntryListCard({
   onAddEntry: () => void;
 }) {
   return (
-    <Card>
-      <CardHeader>
-        <CardTitle>{t('runtimeEntries')}</CardTitle>
-        <CardDescription>{t('runtimeEntriesHelp')}</CardDescription>
-      </CardHeader>
-      <CardContent className="space-y-3">
+    <SettingsSection
+      title={t('runtimeEntries')}
+      description={t('runtimeEntriesHelp')}
+      actions={
+        <Button type='button' variant='ghost' size='sm' onClick={onAddEntry}>
+          <Plus className='mr-2 h-4 w-4' />
+          {t('addRuntimeEntry')}
+        </Button>
+      }
+    >
+      <SettingsGroup>
         {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">
+          <div key={`${index}-${entry.id || 'runtime-entry'}`} className='space-y-3 p-4'>
+            <div className='grid grid-cols-1 md:grid-cols-2 gap-3'>
               <Input value={entry.id} onChange={(event) => onUpdateEntry(index, { id: event.target.value })} placeholder={t('runtimeEntryIdPlaceholder')} />
               <Input value={entry.label ?? ''} onChange={(event) => onUpdateEntry(index, { label: event.target.value })} placeholder={t('runtimeEntryLabelPlaceholder')} />
               <Input value={entry.type} onChange={(event) => onUpdateEntry(index, { type: event.target.value })} placeholder={t('runtimeEntryTypePlaceholder')} />
-              <div className="flex items-center justify-between rounded-lg border border-gray-200 px-3 py-2">
-                <span className="text-sm text-gray-700">{t('enabled')}</span>
+              <div className='flex items-center justify-between rounded-lg bg-background/65 px-3 py-2'>
+                <span className='text-sm text-foreground'>{t('enabled')}</span>
                 <Switch checked={entry.enabled !== false} onCheckedChange={(checked) => onUpdateEntry(index, { enabled: checked })} />
               </div>
             </div>
-            <div className="space-y-2">
-              <label className="text-sm font-medium text-gray-800">{t('runtimeEntryConfigJson')}</label>
+            <div className='space-y-2'>
+              <label className='text-sm font-medium text-foreground'>{t('runtimeEntryConfigJson')}</label>
               <textarea
-                className="min-h-32 w-full rounded-md border border-gray-200 px-3 py-2 text-sm font-mono"
+                className='min-h-32 w-full rounded-md border border-input bg-background px-3 py-2 font-mono text-sm'
                 value={entry.configText}
                 onChange={(event) => onUpdateEntry(index, { configText: event.target.value })}
                 spellCheck={false}
               />
             </div>
-            <div className="flex justify-end">
-              <Button type="button" variant="outline" onClick={() => onRemoveEntry(index)}>
-                <Trash2 className="mr-2 h-4 w-4" />
+            <div className='flex justify-end'>
+              <Button type='button' variant='outline' onClick={() => onRemoveEntry(index)}>
+                <Trash2 className='mr-2 h-4 w-4' />
                 {t('delete')}
               </Button>
             </div>
           </div>
         ))}
-        <Button type="button" variant="outline" onClick={onAddEntry}>
-          <Plus className="mr-2 h-4 w-4" />
-          {t('addRuntimeEntry')}
-        </Button>
-      </CardContent>
-    </Card>
+      </SettingsGroup>
+    </SettingsSection>
   );
 }

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

@@ -1,6 +1,6 @@
 import { Input } from '@/shared/components/ui/input';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/shared/components/ui/select';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/shared/components/ui/card';
+import { SettingRow, SettingsGroup, SettingsSection } from '@/shared/components/settings/setting-row';
 import { Switch } from '@/shared/components/ui/switch';
 import { t } from '@/shared/lib/i18n';
 import type { DmScope } from '@/features/system-status/utils/runtime-config-agent.utils';
@@ -9,7 +9,10 @@ const DM_SCOPE_OPTIONS: Array<{ value: DmScope; labelKey: string }> = [
   { value: 'main', labelKey: 'dmScopeMain' },
   { value: 'per-peer', labelKey: 'dmScopePerPeer' },
   { value: 'per-channel-peer', labelKey: 'dmScopePerChannelPeer' },
-  { value: 'per-account-channel-peer', labelKey: 'dmScopePerAccountChannelPeer' }
+  {
+    value: 'per-account-channel-peer',
+    labelKey: 'dmScopePerAccountChannelPeer'
+  }
 ];
 
 export function RuntimeSettingsCard({
@@ -32,55 +35,59 @@ export function RuntimeSettingsCard({
   onDefaultEngineChange: (value: string) => void;
 }) {
   return (
-    <Card>
-      <CardHeader>
-        <CardTitle>{t('dmScope')}</CardTitle>
-        <CardDescription>{t('dmScopeHelp')}</CardDescription>
-      </CardHeader>
-      <CardContent className="space-y-4">
-        <div className="flex items-start justify-between gap-4 rounded-md border border-gray-200 px-4 py-3">
-          <div className="space-y-1">
-            <div className="text-sm font-medium text-gray-800">{t('runtimeCompanionEnabled')}</div>
-            <p className="text-xs text-gray-500">{t('runtimeCompanionEnabledHelp')}</p>
-          </div>
-          <Switch checked={companionEnabled} onCheckedChange={onCompanionEnabledChange} />
-        </div>
-        <div className="space-y-2">
-          <label className="text-sm font-medium text-gray-800">{t('defaultContextTokens')}</label>
-          <Input
-            type="number"
-            min={1000}
-            step={1000}
-            value={defaultContextTokens}
-            onChange={(event) => onDefaultContextTokensChange(Math.max(1000, Number.parseInt(event.target.value, 10) || 1000))}
-          />
-          <p className="text-xs text-gray-500">{t('defaultContextTokensHelp')}</p>
-        </div>
-        <div className="space-y-2">
-          <label className="text-sm font-medium text-gray-800">{t('defaultEngine')}</label>
-          <Input
-            value={defaultEngine}
-            onChange={(event) => onDefaultEngineChange(event.target.value)}
-            placeholder={t('defaultEnginePlaceholder')}
-          />
-          <p className="text-xs text-gray-500">{t('defaultEngineHelp')}</p>
-        </div>
-        <div className="space-y-2">
-          <label className="text-sm font-medium text-gray-800">{t('dmScope')}</label>
-          <Select value={dmScope} onValueChange={(value) => onDmScopeChange(value as DmScope)}>
-            <SelectTrigger>
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent>
-              {DM_SCOPE_OPTIONS.map((option) => (
-                <SelectItem key={option.value} value={option.value}>
-                  {t(option.labelKey)}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </div>
-      </CardContent>
-    </Card>
+    <SettingsSection title={t('dmScope')} description={t('dmScopeHelp')}>
+      <SettingsGroup>
+        <SettingRow
+          title={t('runtimeCompanionEnabled')}
+          description={t('runtimeCompanionEnabledHelp')}
+          control={<Switch checked={companionEnabled} onCheckedChange={onCompanionEnabledChange} />}
+        />
+        <SettingRow
+          title={t('defaultContextTokens')}
+          description={t('defaultContextTokensHelp')}
+          control={
+            <Input
+              type='number'
+              min={1000}
+              step={1000}
+              value={defaultContextTokens}
+              onChange={(event) =>
+                onDefaultContextTokensChange(Math.max(1000, Number.parseInt(event.target.value, 10) || 1000))
+              }
+              className='w-36'
+            />
+          }
+        />
+        <SettingRow
+          title={t('defaultEngine')}
+          description={t('defaultEngineHelp')}
+          control={
+            <Input
+              value={defaultEngine}
+              onChange={(event) => onDefaultEngineChange(event.target.value)}
+              placeholder={t('defaultEnginePlaceholder')}
+              className='w-56'
+            />
+          }
+        />
+        <SettingRow
+          title={t('dmScope')}
+          control={
+            <Select value={dmScope} onValueChange={(value) => onDmScopeChange(value as DmScope)}>
+              <SelectTrigger className='w-56'>
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {DM_SCOPE_OPTIONS.map((option) => (
+                  <SelectItem key={option.value} value={option.value}>
+                    {t(option.labelKey)}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          }
+        />
+      </SettingsGroup>
+    </SettingsSection>
   );
 }