@nextclaw/ui 0.15.1 → 0.15.2

package/src/features/pwa/managers/__tests__/pwa-shell-theme.manager.test.ts

@@ -12,12 +12,12 @@ describe('PwaShellThemeManager', () => {
     document.body.style.backgroundColor = '';
   });
 
-  it('applies natural shell colors by default', () => {
+  it('applies default work shell colors when no theme is selected', () => {
     pwaShellThemeManager.syncCurrentTheme();
 
     const meta = document.querySelector('meta[name="theme-color"]');
-    expect(meta?.getAttribute('content')).toBe('#FAF9F7');
-    expect(document.body.style.backgroundColor).toBe('rgb(250, 249, 247)');
+    expect(meta?.getAttribute('content')).toBe('#FFFFFF');
+    expect(document.body.style.backgroundColor).toBe('rgb(255, 255, 255)');
   });
 
   it('applies natural shell colors explicitly', () => {
@@ -36,6 +36,14 @@ describe('PwaShellThemeManager', () => {
     expect(document.body.style.backgroundColor).toBe('rgb(255, 255, 255)');
   });
 
+  it('applies work shell colors explicitly', () => {
+    pwaShellThemeManager.syncTheme('work');
+
+    const meta = document.querySelector('meta[name="theme-color"]');
+    expect(meta?.getAttribute('content')).toBe('#FFFFFF');
+    expect(document.body.style.backgroundColor).toBe('rgb(255, 255, 255)');
+  });
+
   it('applies warm shell colors', () => {
     pwaShellThemeManager.syncTheme('warm');
 

package/src/features/pwa/managers/pwa-shell-theme.manager.ts

@@ -1,4 +1,5 @@
 import {
+  DEFAULT_UI_THEME,
   getThemeAppearance,
   normalizeTheme,
   type UiTheme,
@@ -6,6 +7,7 @@ import {
 
 const PWA_SHELL_THEME_COLORS: Record<UiTheme, string> = {
   natural: '#FAF9F7',
+  work: '#FFFFFF',
   minimal: '#FFFFFF',
   warm: '#FAF8F4',
   cool: '#F8FAFC',
@@ -33,7 +35,7 @@ export class PwaShellThemeManager {
     }
 
     const currentTheme = document.documentElement.getAttribute('data-theme');
-    this.syncTheme(normalizeTheme(currentTheme) ?? 'natural');
+    this.syncTheme(normalizeTheme(currentTheme) ?? DEFAULT_UI_THEME);
   };
 
   private updateThemeMeta = (themeColor: string) => {

package/src/features/service-apps/components/service-apps-panel.tsx

@@ -7,6 +7,7 @@ import type {
 import {
   AlertTriangle,
   CheckCircle2,
+  ChevronDown,
   CircleDashed,
   LoaderCircle,
   MoreVertical,
@@ -53,6 +54,7 @@ export function ServiceAppsPanel({
   const [discoveredActionsByApp, setDiscoveredActionsByApp] = useState<
     Record<string, ServiceActionView[]>
   >({});
+  const [expandedActionsByApp, setExpandedActionsByApp] = useState<Record<string, boolean>>({});
 
   const refetch = () => {
     void serviceApps.refetch();
@@ -86,12 +88,16 @@ export function ServiceAppsPanel({
         ...current,
         [appId]: result.actions,
       }));
+      setExpandedActionsByApp((current) => ({
+        ...current,
+        [appId]: true,
+      }));
     });
   };
 
   return (
     <div className="flex h-full min-h-0 flex-col bg-card text-card-foreground">
-      <div className="flex items-center justify-between gap-2 border-b border-border/70 px-4 py-3">
+      <div className="flex items-center justify-between gap-2 border-b border-border/60 px-4 py-3">
         <div className="flex min-w-0 items-center gap-2">
           {headerContent ?? (
             <>
@@ -110,20 +116,31 @@ export function ServiceAppsPanel({
       </div>
 
       {apps.length === 0 ? (
-        <div className="flex flex-1 items-center justify-center px-6 text-center text-sm text-muted-foreground">
-          {t('serviceAppsEmpty')}
+        <div className="flex flex-1 items-center justify-center px-6 py-8 text-center">
+          <div className="w-full max-w-xs">
+            <div className="mx-auto flex h-10 w-10 items-center justify-center rounded-xl bg-muted text-muted-foreground">
+              <Server className="h-5 w-5" />
+            </div>
+            <h2 className="mt-3 text-sm font-semibold text-foreground">{t('serviceAppsEmptyTitle')}</h2>
+            <p className="mt-1 text-xs leading-5 text-muted-foreground">{t('serviceAppsEmptyDescription')}</p>
+          </div>
         </div>
       ) : (
-        <div className="custom-scrollbar min-h-0 flex-1 overflow-y-auto p-3">
-          <div className="space-y-3">
+        <div className="custom-scrollbar min-h-0 flex-1 overflow-y-auto bg-muted/25 p-3">
+          <div className="space-y-2.5">
             {apps.map((app) => (
               <ServiceAppCard
                 key={app.id}
                 app={app}
                 actions={discoveredActionsByApp[app.id] ?? actions.filter((action) => action.appId === app.id)}
+                actionsOpen={Boolean(expandedActionsByApp[app.id])}
                 grants={grants}
                 deletePending={deleteServiceApp.isPending}
                 isDiscovering={discoverServiceAppActions.isPending}
+                onActionsOpenChange={(open) => setExpandedActionsByApp((current) => ({
+                  ...current,
+                  [app.id]: open,
+                }))}
                 onDiscover={discover}
                 onDelete={(appId) => void deleteServiceApp.mutate(appId)}
                 onRestart={(appId) => void restartServiceApp.mutate(appId)}
@@ -143,9 +160,11 @@ export function ServiceAppsPanel({
 function ServiceAppCard({
   app,
   actions,
+  actionsOpen,
   grants,
   deletePending,
   isDiscovering,
+  onActionsOpenChange,
   onDiscover,
   onDelete,
   onRestart,
@@ -153,9 +172,11 @@ function ServiceAppCard({
 }: {
   app: ServiceAppRecordView;
   actions: ServiceActionView[];
+  actionsOpen: boolean;
   grants: ServiceActionGrantView[];
   deletePending: boolean;
   isDiscovering: boolean;
+  onActionsOpenChange: (open: boolean) => void;
   onDiscover: (appId: string) => void;
   onDelete: (appId: string) => void;
   onRestart: (appId: string) => void;
@@ -172,21 +193,21 @@ function ServiceAppCard({
 
   return (
     <TooltipProvider delayDuration={250}>
-      <section className="rounded-lg border border-border bg-card p-3">
-        <div className="flex items-start justify-between gap-3">
-          <div className="min-w-0">
+      <section className="overflow-hidden rounded-xl border border-border/70 bg-card shadow-[0_1px_2px_rgba(30,20,10,0.03)]">
+        <div className="flex items-start gap-3 px-3 pt-3">
+          <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary">
+            <Server className="h-4 w-4" />
+          </div>
+          <div className="min-w-0 flex-1">
             <div className="flex items-center gap-2">
               <div className="truncate text-sm font-semibold text-foreground">{app.title}</div>
               <ServiceAppStatusBadge status={app.status} />
             </div>
             {app.description ? (
-              <div className="mt-1 line-clamp-2 text-xs text-muted-foreground">{app.description}</div>
-            ) : null}
-            {app.lastError ? (
-              <div className="mt-2 rounded bg-rose-50 px-2 py-1 text-xs text-rose-700">{app.lastError}</div>
+              <div className="mt-1 line-clamp-2 text-xs leading-5 text-muted-foreground">{app.description}</div>
             ) : null}
           </div>
-          <div className="flex shrink-0 items-center gap-1">
+          <div className="flex shrink-0 items-center gap-0.5">
             <ServiceAppIconButton
               disabled={isDiscovering || !canConnectAndDiscover}
               icon={Radar}
@@ -207,7 +228,7 @@ function ServiceAppCard({
                   <PopoverTrigger asChild>
                     <button
                       type="button"
-                      className="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground disabled:opacity-50"
+                      className="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:opacity-50"
                       aria-label={t('serviceAppsMoreActions')}
                       disabled={deletePending}
                     >
@@ -229,17 +250,85 @@ function ServiceAppCard({
             </Popover>
           </div>
         </div>
+
+        {app.lastError ? (
+          <div className="mx-3 mt-3 rounded-lg border border-rose-200/70 bg-rose-50 px-2.5 py-1.5 text-xs text-rose-700">
+            {app.lastError}
+          </div>
+        ) : null}
+
         <ServiceAppDiagnostics app={app} />
-        <div className="mt-3 space-y-1">
-          {actions.map((action) => (
-            <ServiceActionRow
-              key={action.id}
-              action={action}
-              grants={grants.filter((grant) => grant.actionId === action.id)}
-              onRevoke={onRevoke}
+
+        <div className="mt-3 border-t border-border/50 bg-muted/30">
+          <button
+            type="button"
+            onClick={() => onActionsOpenChange(!actionsOpen)}
+            className="flex w-full items-start justify-between gap-2 px-3 py-2 text-left transition-colors hover:bg-muted/40"
+            aria-expanded={actionsOpen}
+          >
+            <div className="min-w-0 flex-1">
+              <div className="flex items-center gap-2">
+                <span className="text-[11px] font-medium uppercase tracking-wide text-muted-foreground/80">
+                  {t('serviceAppsActionsSection')}
+                </span>
+                <span className="rounded-full bg-card px-1.5 py-0.5 text-[11px] tabular-nums text-muted-foreground/70">
+                  {actions.length}
+                </span>
+              </div>
+              {!actionsOpen ? (
+                actions.length === 0 ? (
+                  <div className="mt-1 text-[11px] text-muted-foreground">
+                    {t('serviceAppsActionsEmpty')}
+                  </div>
+                ) : (
+                  <div className="mt-1.5 flex flex-wrap gap-1">
+                    {actions.slice(0, 4).map((action) => (
+                      <span
+                        key={action.id}
+                        className="max-w-[9.5rem] truncate rounded-md border border-border/50 bg-card px-1.5 py-0.5 text-[11px] text-muted-foreground"
+                        title={action.title ?? action.name}
+                      >
+                        {action.title ?? action.name}
+                      </span>
+                    ))}
+                    {actions.length > 4 ? (
+                      <span className="rounded-md bg-card px-1.5 py-0.5 text-[11px] text-muted-foreground/70">
+                        +{actions.length - 4}
+                      </span>
+                    ) : null}
+                  </div>
+                )
+              ) : null}
+            </div>
+            <ChevronDown
+              className={cn(
+                'mt-0.5 h-3.5 w-3.5 shrink-0 text-muted-foreground/70 transition-transform',
+                actionsOpen && 'rotate-180',
+              )}
             />
-          ))}
+          </button>
+          {actionsOpen ? (
+            <div className="px-3 pb-2.5">
+              {actions.length === 0 ? (
+                <div className="rounded-lg border border-dashed border-border/70 bg-card/70 px-2.5 py-2 text-[11px] text-muted-foreground">
+                  {t('serviceAppsActionsEmpty')}
+                </div>
+              ) : (
+                <div className="space-y-1.5">
+                  {actions.map((action) => (
+                    <ServiceActionRow
+                      key={action.id}
+                      action={action}
+                      grants={grants.filter((grant) => grant.actionId === action.id)}
+                      onRevoke={onRevoke}
+                    />
+                  ))}
+                </div>
+              )}
+            </div>
+          ) : null}
         </div>
+
         <ConfirmDialog
           open={isDeleteDialogOpen}
           onOpenChange={setIsDeleteDialogOpen}
@@ -263,7 +352,7 @@ function ServiceAppStatusBadge({ status }: { status: ServiceAppStatus }) {
       <TooltipTrigger asChild>
         <span
           className={cn(
-            'inline-flex shrink-0 items-center gap-1 rounded px-1.5 py-0.5 text-[11px] font-medium',
+            'inline-flex shrink-0 items-center gap-1 rounded-full px-1.5 py-0.5 text-[11px] font-medium',
             view.className,
           )}
           aria-label={view.label}
@@ -345,7 +434,7 @@ function ServiceAppIconButton({
           type="button"
           onClick={onClick}
           disabled={disabled}
-          className="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground disabled:cursor-not-allowed disabled:text-muted-foreground/40 disabled:opacity-60 disabled:hover:bg-transparent"
+          className="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:cursor-not-allowed disabled:text-muted-foreground/40 disabled:opacity-60 disabled:hover:bg-transparent"
           aria-label={label}
         >
           <Icon className="h-3.5 w-3.5" />
@@ -386,6 +475,7 @@ function ServiceAppMenuItem({
 }
 
 function ServiceAppDiagnostics({ app }: { app: ServiceAppRecordView }) {
+  const [open, setOpen] = useState(false);
   const command = [app.command, ...(app.args ?? [])]
     .filter((value): value is string => Boolean(value?.trim()))
     .join(' ');
@@ -403,11 +493,29 @@ function ServiceAppDiagnostics({ app }: { app: ServiceAppRecordView }) {
   }
 
   return (
-    <dl className="mt-3 grid grid-cols-[4.5rem_minmax(0,1fr)] gap-x-2 gap-y-1 border-t border-border/70 pt-2 text-[11px]">
-      {rows.map((row) => (
-        <ServiceAppDiagnosticRow key={row.label} label={row.label} value={row.value} />
-      ))}
-    </dl>
+    <div className="mx-3 mt-3 overflow-hidden rounded-lg border border-border/50 bg-muted/35">
+      <button
+        type="button"
+        onClick={() => setOpen((value) => !value)}
+        className="flex w-full items-center justify-between gap-2 px-2.5 py-1.5 text-left transition-colors hover:bg-muted/50"
+        aria-expanded={open}
+      >
+        <span className="text-[11px] font-medium text-muted-foreground">{t('serviceAppsDetails')}</span>
+        <ChevronDown
+          className={cn(
+            'h-3.5 w-3.5 shrink-0 text-muted-foreground/70 transition-transform',
+            open && 'rotate-180',
+          )}
+        />
+      </button>
+      {open ? (
+        <dl className="grid grid-cols-[4.75rem_minmax(0,1fr)] gap-x-2 gap-y-1 border-t border-border/50 px-2.5 py-2 text-[11px]">
+          {rows.map((row) => (
+            <ServiceAppDiagnosticRow key={row.label} label={row.label} value={row.value} />
+          ))}
+        </dl>
+      ) : null}
+    </div>
   );
 }
 
@@ -438,10 +546,12 @@ function ServiceActionRow({
   onRevoke: (grant: ServiceActionGrantView) => void;
 }) {
   return (
-    <div className="rounded bg-muted/60 px-2 py-1.5">
+    <div className="rounded-lg border border-border/50 bg-card px-2.5 py-2">
       <div className="flex items-center justify-between gap-2">
         <div className="flex min-w-0 items-center gap-2">
-          <Wrench className="h-3.5 w-3.5 shrink-0 text-muted-foreground/70" />
+          <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground">
+            <Wrench className="h-3.5 w-3.5" />
+          </span>
           <div className="min-w-0">
             <div className="truncate text-xs font-medium text-foreground">{action.title ?? action.name}</div>
             {action.description ? (
@@ -451,15 +561,15 @@ function ServiceActionRow({
         </div>
         <div className="flex shrink-0 items-center gap-1">
           {action.runtimeState ? (
-            <span className="rounded bg-card px-1.5 py-0.5 text-[11px] text-muted-foreground">
+            <span className="rounded-full bg-muted px-1.5 py-0.5 text-[11px] text-muted-foreground">
               {t(`serviceAppsRuntimeState_${action.runtimeState}`)}
             </span>
           ) : null}
-          <span className="rounded bg-card px-1.5 py-0.5 text-[11px] text-muted-foreground">{action.risk}</span>
+          <span className="rounded-full bg-muted px-1.5 py-0.5 text-[11px] text-muted-foreground">{action.risk}</span>
         </div>
       </div>
       {grants.map((grant) => (
-        <div key={`${grant.caller.surface}:${grant.caller.appId}:${grant.actionId}`} className="mt-1 flex items-center justify-between gap-2 pl-5">
+        <div key={`${grant.caller.surface}:${grant.caller.appId}:${grant.actionId}`} className="mt-1.5 flex items-center justify-between gap-2 pl-8">
           <div className="flex min-w-0 items-center gap-1.5 text-[11px] text-muted-foreground">
             <ShieldCheck className="h-3 w-3 shrink-0 text-emerald-500" />
             <span className="truncate">{t('serviceAppsGrantedTo')} {grant.caller.appId}</span>
@@ -467,7 +577,7 @@ function ServiceActionRow({
           <button
             type="button"
             onClick={() => onRevoke(grant)}
-            className="rounded-md p-1 text-muted-foreground/70 transition-colors hover:bg-background hover:text-rose-600"
+            className="rounded-md p-1 text-muted-foreground/70 transition-colors hover:bg-muted hover:text-rose-600"
             title={t('serviceAppsRevokeGrant')}
             aria-label={t('serviceAppsRevokeGrant')}
           >

package/src/features/settings/components/config/provider-auth-section.tsx

@@ -28,7 +28,7 @@ export function ProviderAuthSection(props: ProviderAuthSectionProps) {
   if (providerAuth?.kind !== 'device_code') return null;
 
   return (
-    <div className="space-y-2 rounded-xl border border-primary/20 bg-primary-50/50 p-3">
+    <div className="space-y-2 rounded-xl border border-border/60 bg-muted/35 p-3">
       <Label className="text-sm font-medium text-foreground">
         {providerAuth.displayName || t('providerAuthSectionTitle')}
       </Label>

package/src/features/settings/components/config/provider-form.tsx

@@ -13,6 +13,7 @@ import { MaskedInput } from '@/shared/components/common/masked-input';
 import { Button } from '@/shared/components/ui/button';
 import { Input } from '@/shared/components/ui/input';
 import { Label } from '@/shared/components/ui/label';
+import { FormActions } from '@/shared/components/ui/actions/form-actions';
 import { getLanguage, t } from '@/shared/lib/i18n';
 import type { ThinkingLevel } from '@/shared/lib/api';
 import {
@@ -548,14 +549,16 @@ function ProviderFormDetailPane(props: ProviderFormDetailPaneProps) {
           />
         </ConfigSplitPaneBody>
 
-        <ConfigSplitPaneFooter className='flex items-center justify-between px-6 py-4'>
-          <Button type='button' variant='outline' size='sm' onClick={onTestConnection} disabled={isTestPending}>
-            <CircleDotDashed className='mr-1.5 h-4 w-4' />
-            {isTestPending ? t('providerTestingConnection') : t('providerTestConnection')}
-          </Button>
-          <Button type='submit' disabled={isUpdatePending || !hasChanges}>
-            {isUpdatePending ? t('saving') : hasChanges ? t('save') : t('unchanged')}
-          </Button>
+        <ConfigSplitPaneFooter>
+          <FormActions align="between">
+            <Button type='button' variant='outline' size='sm' onClick={onTestConnection} disabled={isTestPending}>
+              <CircleDotDashed className='mr-1.5 h-3.5 w-3.5' />
+              {isTestPending ? t('providerTestingConnection') : t('providerTestConnection')}
+            </Button>
+            <Button type='submit' size='sm' disabled={isUpdatePending || !hasChanges}>
+              {isUpdatePending ? t('saving') : hasChanges ? t('save') : t('unchanged')}
+            </Button>
+          </FormActions>
         </ConfigSplitPaneFooter>
       </form>
     </ConfigSplitDetailPane>

package/src/features/settings/components/config/provider-models-section.tsx

@@ -99,7 +99,7 @@ export function ProviderModelsSection(props: ProviderModelsSectionProps) {
       ) : null}
 
       {models.length === 0 ? (
-        <div className="rounded-xl border border-dashed border-border bg-muted/60 px-4 py-6 text-center">
+        <div className="rounded-xl border border-dashed border-border/65 bg-muted/30 px-4 py-6 text-center">
           <p className="text-sm text-muted-foreground">{t('providerModelsEmptyShort')}</p>
           {!showModelInput ? (
             <button
@@ -123,14 +123,14 @@ export function ProviderModelsSection(props: ProviderModelsSectionProps) {
             return (
               <div
                 key={modelName}
-                className="group inline-flex max-w-full items-center gap-1 rounded-full border border-border bg-card px-3 py-1.5"
+                className="group inline-flex max-w-full items-center gap-1 rounded-full border border-border/55 bg-muted/45 px-3 py-1.5"
               >
                 <span className="max-w-[140px] truncate text-sm text-foreground sm:max-w-[220px]">{modelName}</span>
                 <Popover>
                   <PopoverTrigger asChild>
                     <button
                       type="button"
-                      className="inline-flex h-5 w-5 items-center justify-center rounded-full text-muted-foreground/70 opacity-100 transition-opacity hover:bg-accent hover:text-accent-foreground md:opacity-0 md:group-hover:opacity-100 md:group-focus-within:opacity-100"
+                      className="inline-flex h-5 w-5 items-center justify-center rounded-full text-muted-foreground/70 opacity-100 transition-opacity hover:bg-muted hover:text-foreground md:opacity-0 md:group-hover:opacity-100 md:group-focus-within:opacity-100"
                       aria-label={t('providerModelThinkingTitle')}
                       title={t('providerModelThinkingTitle')}
                     >
@@ -138,7 +138,7 @@ export function ProviderModelsSection(props: ProviderModelsSectionProps) {
                     </button>
                   </PopoverTrigger>
                   <PopoverContent className="w-80 space-y-3">
-                    <div className="flex items-center justify-between gap-3 rounded-lg border border-border bg-muted/60 px-3 py-2">
+                    <div className="flex items-center justify-between gap-3 rounded-lg bg-muted/50 px-3 py-2">
                       <div className="min-w-0">
                         <p className="text-xs font-semibold text-foreground">{t('providerModelVisionTitle')}</p>
                         <p className="text-xs text-muted-foreground">{t('providerModelVisionHint')}</p>
@@ -159,8 +159,8 @@ export function ProviderModelsSection(props: ProviderModelsSectionProps) {
                             onClick={() => onToggleModelThinkingLevel(modelName, level)}
                             className={`rounded-full border px-2.5 py-1 text-xs font-medium transition-colors ${
                               selected
-                                ? 'border-primary bg-primary text-white'
-                                : 'border-border bg-card text-muted-foreground hover:border-primary/40 hover:bg-accent/70 hover:text-accent-foreground'
+                                ? 'border-foreground/15 bg-foreground text-background'
+                                : 'border-border/55 bg-muted/50 text-muted-foreground hover:border-border hover:bg-muted hover:text-foreground'
                             }`}
                           >
                             {formatThinkingLevelLabel(level)}
@@ -198,7 +198,7 @@ export function ProviderModelsSection(props: ProviderModelsSectionProps) {
                 <button
                   type="button"
                   onClick={() => onRemoveModel(modelName)}
-                  className="inline-flex h-5 w-5 items-center justify-center rounded-full text-muted-foreground/70 opacity-100 transition-opacity hover:bg-accent hover:text-accent-foreground md:opacity-0 md:group-hover:opacity-100 md:group-focus-within:opacity-100"
+                  className="inline-flex h-5 w-5 items-center justify-center rounded-full text-muted-foreground/70 opacity-100 transition-opacity hover:bg-muted hover:text-foreground md:opacity-0 md:group-hover:opacity-100 md:group-focus-within:opacity-100"
                   aria-label={t('remove')}
                 >
                   <X className="h-3 w-3" />

package/src/features/settings/components/config/provider-pill-selector.tsx

@@ -16,7 +16,7 @@ export function ProviderPillSelector(props: ProviderPillSelectorProps) {
             type="button"
             onClick={() => onChange(option.value)}
             aria-pressed={selected}
-            className={`rounded-full border px-3 py-1.5 text-xs font-medium transition-colors ${selected ? 'border-primary bg-primary text-primary-foreground shadow-sm' : 'border-border bg-card text-muted-foreground hover:border-primary/40 hover:bg-accent/70 hover:text-accent-foreground'}`}
+            className={`rounded-full border px-3 py-1.5 text-xs font-medium transition-colors ${selected ? 'border-foreground/15 bg-foreground text-background' : 'border-border/55 bg-muted/50 text-muted-foreground hover:border-border hover:bg-muted hover:text-foreground'}`}
           >
             {option.label}
           </button>

package/src/features/settings/components/config/secrets-config-form.tsx

@@ -1,6 +1,7 @@
 import { useMemo, useState } from 'react';
 import { Plus, Save, Trash2 } from 'lucide-react';
 import { Button } from '@/shared/components/ui/button';
+import { FormActions } from '@/shared/components/ui/actions/form-actions';
 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';
@@ -272,12 +273,12 @@ export function SecretsConfigForm(props: {
         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" />
+      <FormActions>
+        <Button type="button" size="sm" onClick={handleSave} disabled={isPending}>
+          <Save className="mr-1.5 h-3.5 w-3.5" />
           {isPending ? t('saving') : t('save')}
         </Button>
-      </div>
+      </FormActions>
     </PageLayout>
   );
 }

package/src/features/settings/pages/model-config-page.tsx

@@ -3,13 +3,14 @@ import { Card } from '@/shared/components/ui/card';
 import { Input } from '@/shared/components/ui/input';
 import { Label } from '@/shared/components/ui/label';
 import { Skeleton } from '@/shared/components/ui/skeleton';
+import { FormActions } from '@/shared/components/ui/actions/form-actions';
 import { ProviderScopedModelInput } from '@/shared/components/common/provider-scoped-model-input';
 import { useConfig, useConfigSchema, useProviderTemplates, useProviders, useUpdateModel } from '@/shared/hooks/use-config';
 import { hintForPath } from '@/shared/lib/config-hints';
 import { t } from '@/shared/lib/i18n';
 import { buildProviderModelCatalog } from '@/shared/lib/provider-models';
 import { PageLayout, PageHeader } from '@/app/components/layout/page-layout';
-import { DOCS_DEFAULT_BASE_URL } from '@/shared/components/doc-browser/doc-browser-context';
+import { getDocsUrl } from '@/shared/components/doc-browser/doc-browser-context';
 import { BookOpen, Folder, Loader2, Sparkles } from 'lucide-react';
 import { useMemo, useState } from 'react';
 
@@ -37,48 +38,48 @@ function ModelConfigForm(props: {
         event.preventDefault();
         onSubmit({ model, workspace });
       }}
-      className="space-y-8"
+      className="space-y-5"
     >
-      <div className="grid grid-cols-1 gap-8 md:grid-cols-2">
-        <div className="rounded-2xl border border-gray-200 bg-white p-8 shadow-card">
-          <div className="mb-8 flex items-center gap-4">
-            <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-primary text-white">
-              <Sparkles className="h-5 w-5" />
+      <div className="grid grid-cols-1 gap-5 md:grid-cols-2">
+        <div className="rounded-2xl border border-border/75 bg-card p-6">
+          <div className="mb-6 flex items-center gap-3">
+            <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-muted text-muted-foreground">
+              <Sparkles className="h-4 w-4" />
             </div>
-            <h3 className="text-lg font-bold text-gray-900">{t('defaultModel')}</h3>
+            <h3 className="text-base font-semibold text-foreground">{t('defaultModel')}</h3>
           </div>
           <div className="space-y-2">
-            <Label htmlFor="model" className="text-xs font-semibold uppercase tracking-wider text-gray-500">
+            <Label htmlFor="model" className="text-xs font-medium text-muted-foreground">
               {modelLabel}
             </Label>
             <ProviderScopedModelInput id="model" value={model} onChange={setModel} providerCatalog={providerCatalog} modelPlaceholder={modelPlaceholder} />
-            <p className="text-xs text-gray-400">{modelHelpText}</p>
-            <a href={`${DOCS_DEFAULT_BASE_URL}/guide/model-selection`} className="inline-flex items-center gap-1.5 text-xs text-primary transition-colors hover:text-primary-hover">
+            <p className="text-xs text-muted-foreground/80">{modelHelpText}</p>
+            <a href={getDocsUrl('/guide/model-selection')} className="inline-flex items-center gap-1.5 text-xs text-primary transition-colors hover:text-primary-hover">
               <BookOpen className="h-3.5 w-3.5" />
               {t('channelsGuideTitle')}
             </a>
           </div>
         </div>
-        <div className="rounded-2xl border border-gray-200 bg-white p-8 shadow-card">
-          <div className="mb-8 flex items-center gap-4">
-            <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-primary text-white">
-              <Folder className="h-5 w-5" />
+        <div className="rounded-2xl border border-border/75 bg-card p-6">
+          <div className="mb-6 flex items-center gap-3">
+            <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-muted text-muted-foreground">
+              <Folder className="h-4 w-4" />
             </div>
-            <h3 className="text-lg font-bold text-gray-900">{t('workspace')}</h3>
+            <h3 className="text-base font-semibold text-foreground">{t('workspace')}</h3>
           </div>
           <div className="space-y-2">
-            <Label htmlFor="workspace" className="text-xs font-semibold uppercase tracking-wider text-gray-500">
+            <Label htmlFor="workspace" className="text-xs font-medium text-muted-foreground">
               {workspaceLabel}
             </Label>
             <Input id="workspace" value={workspace} onChange={(event) => setWorkspace(event.target.value)} placeholder={workspacePlaceholder} className="rounded-xl" />
           </div>
         </div>
       </div>
-      <div className="flex justify-end pt-4">
-        <Button type="submit" disabled={isPending} size="lg">
-          {isPending ? <Loader2 className="h-5 w-5 animate-spin" /> : t('saveChanges')}
+      <FormActions>
+        <Button type="submit" disabled={isPending} size="sm">
+          {isPending ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : t('saveChanges')}
         </Button>
-      </div>
+      </FormActions>
     </form>
   );
 }
@@ -108,9 +109,9 @@ export function ModelConfigPage() {
           <Skeleton className="h-8 w-32" />
           <Skeleton className="h-4 w-48" />
         </div>
-        <Card className="rounded-2xl border-gray-200 p-6">
-          <div className="mb-6 flex items-center gap-4">
-            <Skeleton className="h-12 w-12 rounded-xl" />
+        <Card hover={false} className="rounded-2xl border-border/75 p-6 shadow-none">
+          <div className="mb-6 flex items-center gap-3">
+            <Skeleton className="h-9 w-9 rounded-lg" />
             <div className="space-y-2">
               <Skeleton className="h-5 w-24" />
               <Skeleton className="h-3 w-32" />
@@ -119,7 +120,7 @@ export function ModelConfigPage() {
           <Skeleton className="mb-2 h-4 w-20" />
           <Skeleton className="h-10 w-full rounded-xl" />
         </Card>
-        <Card className="rounded-2xl border-gray-200 p-6">
+        <Card hover={false} className="rounded-2xl border-border/75 p-6 shadow-none">
           <Skeleton className="mb-2 h-5 w-24" />
           <Skeleton className="h-10 w-full rounded-xl" />
         </Card>