@geminilight/mindos 0.6.30 → 0.6.32

package/app/components/settings/AppearanceTab.tsx

@@ -1,27 +1,41 @@
 'use client';
 
 import { useState } from 'react';
-import { ChevronDown, ChevronRight, Sun, Moon, Monitor, Type, Columns3, Globe } from 'lucide-react';
+import { ChevronDown, ChevronRight, Sun, Moon, Monitor, Type, ALargeSmall, Columns3, Globe, BookOpen, Palette } from 'lucide-react';
 import { Locale } from '@/lib/i18n';
-import { CONTENT_WIDTHS, FONTS, AppearanceTabProps } from './types';
+import { CONTENT_WIDTHS, FONTS, FONT_SIZES, AppearanceTabProps } from './types';
+import { SettingCard } from './Primitives';
 
-/* ── Segmented Control ── */
-function SegmentedControl<T extends string>({ options, value, onChange }: {
+/* ── Setting Group ── */
+function SettingGroup({ icon, label, children }: { icon: React.ReactNode; label: string; children: React.ReactNode }) {
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center gap-2">
+        <span className="text-muted-foreground">{icon}</span>
+        <span className="text-sm font-medium text-foreground">{label}</span>
+      </div>
+      {children}
+    </div>
+  );
+}
+
+/* ── Pill Selector — compact horizontal pills ── */
+function PillSelector<T extends string>({ options, value, onChange }: {
   options: { value: T; label: string; icon?: React.ReactNode }[];
   value: T;
   onChange: (v: T) => void;
 }) {
   return (
-    <div className="flex rounded-lg border border-border bg-muted/30 p-0.5 gap-0.5">
+    <div className="flex gap-2">
       {options.map(opt => (
         <button
           key={opt.value}
           type="button"
           onClick={() => onChange(opt.value)}
-          className={`flex-1 flex items-center justify-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-md transition-all ${
+          className={`flex items-center gap-1.5 px-3.5 py-2 text-sm font-medium rounded-xl transition-all ${
             value === opt.value
-              ? 'bg-card text-foreground shadow-sm'
-              : 'text-muted-foreground hover:text-foreground'
+              ? 'bg-[var(--amber)] text-[var(--amber-foreground)] shadow-sm'
+              : 'bg-muted/50 text-muted-foreground hover:text-foreground hover:bg-muted'
           }`}
         >
           {opt.icon}
@@ -32,20 +46,7 @@ function SegmentedControl<T extends string>({ options, value, onChange }: {
   );
 }
 
-/* ── Setting Group ── */
-function SettingGroup({ icon, label, children }: { icon: React.ReactNode; label: string; children: React.ReactNode }) {
-  return (
-    <div className="space-y-2.5">
-      <div className="flex items-center gap-2">
-        <span className="text-muted-foreground">{icon}</span>
-        <span className="text-xs font-medium text-foreground">{label}</span>
-      </div>
-      {children}
-    </div>
-  );
-}
-
-export function AppearanceTab({ font, setFont, contentWidth, setContentWidth, dark, setDark, locale, setLocale, t }: AppearanceTabProps) {
+export function AppearanceTab({ font, setFont, fontSize, setFontSize, contentWidth, setContentWidth, dark, setDark, locale, setLocale, t }: AppearanceTabProps) {
   const [showShortcuts, setShowShortcuts] = useState(false);
   const [themePref, setThemePref] = useState<string>(() =>
     typeof window !== 'undefined' ? (localStorage.getItem('theme') ?? 'system') : 'system'
@@ -56,61 +57,150 @@ export function AppearanceTab({ font, setFont, contentWidth, setContentWidth, da
   const a = t.settings.appearance;
 
   return (
-    <div className="space-y-6">
-      {/* Font */}
+    <div className="space-y-4">
+
+      {/* ── Card 1: Reading — font, size, width ── */}
+      <SettingCard icon={<BookOpen size={15} />} title={a.readingTitle ?? 'Reading'} description={a.readingDesc ?? 'Customize how your notes look'}>
+
+      {/* ── Font — each font previews itself ── */}
       <SettingGroup icon={<Type size={14} />} label={a.readingFont}>
-        <div className="flex flex-wrap gap-1.5">
-          {FONTS.map(f => (
-            <button
-              key={f.value}
-              type="button"
-              onClick={() => setFont(f.value)}
-              className={`px-3 py-1.5 text-xs rounded-lg border transition-all ${
-                font === f.value
-                  ? 'border-[var(--amber)] bg-[var(--amber-subtle)] text-foreground font-medium shadow-sm'
-                  : 'border-border text-muted-foreground hover:text-foreground hover:bg-muted'
-              }`}
-              style={{ fontFamily: f.style.fontFamily }}
-            >
-              {f.label}
-            </button>
-          ))}
+        <div className="space-y-0.5">
+          {FONTS.map(f => {
+            const selected = font === f.value;
+            return (
+              <button
+                key={f.value}
+                type="button"
+                onClick={() => setFont(f.value)}
+                className={`flex items-center gap-4 w-full px-3 py-2.5 rounded-lg transition-all text-left relative ${
+                  selected
+                    ? 'bg-[var(--amber-subtle)]'
+                    : 'hover:bg-muted/50'
+                }`}
+              >
+                {/* Active indicator — left bar */}
+                {selected && (
+                  <div className="absolute left-0 top-2 bottom-2 w-[3px] rounded-r-full bg-[var(--amber)]" />
+                )}
+                {/* Large Aa preview */}
+                <span
+                  className={`text-xl font-medium w-10 text-center shrink-0 ${selected ? 'text-foreground' : 'text-muted-foreground/60'}`}
+                  style={{ fontFamily: f.style.fontFamily }}
+                >
+                  Aa
+                </span>
+                {/* Font name + sample */}
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-baseline gap-2">
+                    <span
+                      className={`text-sm font-medium ${selected ? 'text-foreground' : 'text-muted-foreground'}`}
+                      style={{ fontFamily: f.style.fontFamily }}
+                    >
+                      {f.label}
+                    </span>
+                    <span className="text-xs text-muted-foreground/50">{f.category}</span>
+                  </div>
+                  <p
+                    className={`text-sm truncate mt-0.5 ${selected ? 'text-muted-foreground' : 'text-muted-foreground/40'}`}
+                    style={{ fontFamily: f.style.fontFamily }}
+                  >
+                    {a.fontPreview}
+                  </p>
+                </div>
+              </button>
+            );
+          })}
         </div>
-        <p
-          className="text-sm text-muted-foreground leading-relaxed px-0.5 mt-1"
-          style={{ fontFamily: FONTS.find(f => f.value === font)?.style.fontFamily }}
-        >
-          {a.fontPreview}
-        </p>
       </SettingGroup>
 
-      {/* Content Width */}
+      {/* ── Font Size — elegant range slider ── */}
+      <SettingGroup icon={<ALargeSmall size={14} />} label={a.fontSize}>
+        <div className="px-1">
+          {/* Slider */}
+          <div className="flex items-center gap-3">
+            <span className="text-xs text-muted-foreground/60 shrink-0" style={{ fontSize: '11px' }}>A</span>
+            <input
+              type="range"
+              min={14}
+              max={17}
+              step={1}
+              value={parseInt(fontSize)}
+              onChange={e => setFontSize(`${e.target.value}px`)}
+              className="flex-1 h-1.5 rounded-full appearance-none bg-muted cursor-pointer accent-[var(--amber)]
+                [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4
+                [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-[var(--amber)]
+                [&::-webkit-slider-thumb]:shadow-sm [&::-webkit-slider-thumb]:cursor-pointer
+                [&::-webkit-slider-thumb]:transition-transform [&::-webkit-slider-thumb]:hover:scale-110
+                [&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:rounded-full
+                [&::-moz-range-thumb]:bg-[var(--amber)] [&::-moz-range-thumb]:border-0
+                [&::-moz-range-thumb]:shadow-sm [&::-moz-range-thumb]:cursor-pointer"
+            />
+            <span className="text-base text-muted-foreground/60 shrink-0">A</span>
+          </div>
+          {/* Current value */}
+          <div className="text-center mt-1.5">
+            <span className="text-xs tabular-nums text-muted-foreground">{parseInt(fontSize)}px</span>
+          </div>
+          {/* Live preview */}
+          <p
+            className="text-muted-foreground leading-relaxed mt-2 px-1"
+            style={{
+              fontSize,
+              fontFamily: FONTS.find(f => f.value === font)?.style.fontFamily,
+            }}
+          >
+            {a.fontSizePreview}
+          </p>
+        </div>
+      </SettingGroup>
+
+      {/* ── Content Width — visual width bars ── */}
       <SettingGroup icon={<Columns3 size={14} />} label={a.contentWidth}>
-        <div className="flex flex-wrap gap-1.5">
-          {CONTENT_WIDTHS.map(w => (
-            <button
-              key={w.value}
-              type="button"
-              onClick={() => setContentWidth(w.value)}
-              className={`px-3 py-1.5 text-xs rounded-lg border transition-all ${
-                contentWidth === w.value
-                  ? 'border-[var(--amber)] bg-[var(--amber-subtle)] text-foreground font-medium shadow-sm'
-                  : 'border-border text-muted-foreground hover:text-foreground hover:bg-muted'
-              }`}
-            >
-              {w.label}
-            </button>
-          ))}
+        <div className="space-y-1">
+          {CONTENT_WIDTHS.map(w => {
+            const selected = contentWidth === w.value;
+            return (
+              <button
+                key={w.value}
+                type="button"
+                onClick={() => setContentWidth(w.value)}
+                className={`flex items-center gap-3 w-full px-3 py-2 rounded-lg transition-all ${
+                  selected ? 'bg-[var(--amber-subtle)]' : 'hover:bg-muted/50'
+                }`}
+              >
+                {/* Width indicator bar */}
+                <div className="flex-1 h-2 rounded-full bg-muted/40 overflow-hidden">
+                  <div
+                    className={`h-full rounded-full transition-all ${
+                      selected ? 'bg-[var(--amber)]' : 'bg-muted-foreground/20'
+                    }`}
+                    style={{ width: `${w.width}%` }}
+                  />
+                </div>
+                {/* Label */}
+                <span className={`text-sm shrink-0 w-14 text-right ${
+                  selected ? 'text-foreground font-medium' : 'text-muted-foreground'
+                }`}>
+                  {w.label}
+                </span>
+              </button>
+            );
+          })}
         </div>
       </SettingGroup>
 
-      {/* Theme */}
+      </SettingCard>
+
+      {/* ── Card 2: Preferences — theme, language ── */}
+      <SettingCard icon={<Palette size={15} />} title={a.preferencesTitle ?? 'Preferences'}>
+
+      {/* ── Theme — amber pills ── */}
       <SettingGroup icon={<Sun size={14} />} label={a.colorTheme}>
-        <SegmentedControl
+        <PillSelector
           options={[
-            { value: 'system', label: a.system, icon: <Monitor size={12} /> },
-            { value: 'dark', label: a.dark, icon: <Moon size={12} /> },
-            { value: 'light', label: a.light, icon: <Sun size={12} /> },
+            { value: 'system', label: a.system, icon: <Monitor size={14} /> },
+            { value: 'dark', label: a.dark, icon: <Moon size={14} /> },
+            { value: 'light', label: a.light, icon: <Sun size={14} /> },
           ]}
           value={themePref}
           onChange={v => {
@@ -125,12 +215,12 @@ export function AppearanceTab({ font, setFont, contentWidth, setContentWidth, da
         />
       </SettingGroup>
 
-      {/* Language */}
+      {/* ── Language — amber pills ── */}
       <SettingGroup icon={<Globe size={14} />} label={a.language}>
-        <SegmentedControl
+        <PillSelector
           options={[
-            { value: 'system', label: a.system, icon: <Monitor size={12} /> },
-            { value: 'en', label: 'English' },
+            { value: 'system', label: a.system, icon: <Monitor size={14} /> },
+            { value: 'en', label: 'EN' },
             { value: 'zh', label: '中文' },
           ]}
           value={localePref}
@@ -141,29 +231,30 @@ export function AppearanceTab({ font, setFont, contentWidth, setContentWidth, da
               ? (navigator.language.startsWith('zh') ? 'zh' : 'en')
               : v as Locale;
             setLocale(resolved);
-            // Sync cookie for SSR (write resolved value, not 'system')
             document.cookie = `locale=${resolved};path=/;max-age=31536000;SameSite=Lax`;
           }}
         />
       </SettingGroup>
 
-      <p className="text-xs text-muted-foreground/60 px-0.5">{a.browserNote}</p>
+      </SettingCard>
+
+      <p className="text-xs text-muted-foreground/40 px-0.5">{a.browserNote}</p>
 
-      {/* Keyboard Shortcuts */}
+      {/* ── Keyboard Shortcuts ── */}
       <div className="border-t border-border pt-4">
         <button
           type="button"
           onClick={() => setShowShortcuts(!showShortcuts)}
-          className="flex items-center gap-1.5 text-xs font-medium text-muted-foreground hover:text-foreground transition-colors"
+          className="flex items-center gap-1.5 text-sm font-medium text-muted-foreground hover:text-foreground transition-colors"
         >
-          {showShortcuts ? <ChevronDown size={12} /> : <ChevronRight size={12} />}
+          {showShortcuts ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
           {t.settings.tabs.shortcuts}
         </button>
         {showShortcuts && (
           <div className="mt-3 space-y-0.5">
             {t.shortcuts.map((s: { readonly description: string; readonly keys: readonly string[] }, i: number) => (
               <div key={i} className="flex items-center justify-between py-1.5 px-1">
-                <span className="text-xs text-foreground">{s.description}</span>
+                <span className="text-sm text-foreground">{s.description}</span>
                 <div className="flex items-center gap-1">
                   {s.keys.map((k: string, j: number) => (
                     <kbd key={j} className="px-1.5 py-0.5 text-2xs font-mono bg-muted border border-border rounded text-muted-foreground">{k}</kbd>

package/app/components/settings/KnowledgeTab.tsx

@@ -4,7 +4,7 @@ import { useState, useEffect, useCallback, useSyncExternalStore, useRef } from '
 import { Copy, Check, RefreshCw, Trash2, Sparkles, ChevronDown, ChevronRight, Loader2, Cpu, Zap, Database as DatabaseIcon, HardDrive, RotateCcw } from 'lucide-react';
 import { toast } from '@/lib/toast';
 import type { KnowledgeTabProps } from './types';
-import { Field, Input, EnvBadge, SectionLabel, Toggle } from './Primitives';
+import { Field, Input, EnvBadge, SectionLabel, Toggle, SettingCard, SettingRow } from './Primitives';
 import { ConfirmDialog } from '@/components/agents/AgentsPrimitives';
 import { apiFetch } from '@/lib/api';
 import { copyToClipboard } from '@/lib/clipboard';
@@ -135,164 +135,159 @@ export function KnowledgeTab({ data, setData, t }: KnowledgeTabProps) {
   }
 
   return (
-    <div className="space-y-6">
-      <SectionLabel>Knowledge Base</SectionLabel>
-
-      <Field
-        label={<>{k.sopRoot} <EnvBadge overridden={env.MIND_ROOT} /></>}
-        hint={env.MIND_ROOT ? k.envNote : k.sopRootHint}
+    <div className="space-y-4">
+      {/* ── Card 1: Knowledge Base ── */}
+      <SettingCard
+        icon={<DatabaseIcon size={15} />}
+        title="Knowledge Base"
+        description={k.sopRootHint}
       >
-        <Input
-          value={data.mindRoot}
-          onChange={e => setData(d => d ? { ...d, mindRoot: e.target.value } : d)}
-          placeholder="/path/to/your/notes"
-        />
-      </Field>
-
-      <div className="flex items-center justify-between">
-        <div>
-          <div className="text-sm text-foreground">{k.showHiddenFiles}</div>
-          <div className="text-xs text-muted-foreground mt-0.5">{k.showHiddenFilesHint}</div>
-        </div>
-        <Toggle checked={showHidden} onChange={() => {
-          const next = !showHidden;
-          setShowHidden(next);
-          setShowHiddenFiles(next);
-        }} />
-      </div>
-
-      {exampleCount !== null && exampleCount > 0 && cleanupResult === null && (
-        <div className="flex items-center justify-between">
-          <div>
-            <div className="text-sm text-foreground">{k.cleanupExamples}</div>
-            <div className="text-xs text-muted-foreground mt-0.5">{k.cleanupExamplesHint}</div>
-          </div>
-          <button
-            onClick={() => setShowCleanupConfirm(true)}
-            disabled={cleaningUp}
-            title={cleaningUp ? t.hints.cleanupInProgress : undefined}
-            className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-lg border border-border text-muted-foreground hover:text-foreground hover:bg-muted transition-colors shrink-0 disabled:opacity-50"
-          >
-            {cleaningUp ? <Loader2 size={12} className="animate-spin" /> : <Trash2 size={12} />}
-            {k.cleanupExamplesButton}
-            <span className="ml-1 tabular-nums text-2xs opacity-70">{exampleCount}</span>
-          </button>
-        </div>
-      )}
-      {cleanupResult !== null && (
-        <div className="flex items-center gap-2 text-xs text-success">
-          <Check size={14} />
-          {k.cleanupExamplesDone(cleanupResult)}
-        </div>
-      )}
-
-      <div className="border-t border-border pt-5">
-        <SectionLabel>Security</SectionLabel>
-      </div>
-
-      <Field label={k.webPassword} hint={k.webPasswordHint}>
-        <div className="flex gap-2">
+        <Field
+          label={<>{k.sopRoot} <EnvBadge overridden={env.MIND_ROOT} /></>}
+          hint={env.MIND_ROOT ? k.envNote : k.sopRootHint}
+        >
           <Input
-            type={showPassword ? 'text' : 'password'}
-            value={isPasswordMasked ? '••••••••' : (data.webPassword ?? '')}
-            onChange={e => setData(d => d ? { ...d, webPassword: e.target.value } : d)}
-            onFocus={() => { if (isPasswordMasked) setData(d => d ? { ...d, webPassword: '' } : d); }}
-            placeholder="Leave empty to disable"
+            value={data.mindRoot}
+            onChange={e => setData(d => d ? { ...d, mindRoot: e.target.value } : d)}
+            placeholder="/path/to/your/notes"
           />
-          <button
-            type="button"
-            onClick={() => setShowPassword(v => !v)}
-            className="px-3 py-2 text-xs rounded-lg border border-border text-muted-foreground hover:text-foreground hover:bg-muted transition-colors shrink-0"
-          >
-            {showPassword ? 'Hide' : 'Show'}
-          </button>
-        </div>
-      </Field>
+        </Field>
+
+        <SettingRow label={k.showHiddenFiles} hint={k.showHiddenFilesHint}>
+          <Toggle checked={showHidden} onChange={() => {
+            const next = !showHidden;
+            setShowHidden(next);
+            setShowHiddenFiles(next);
+          }} />
+        </SettingRow>
+
+        {exampleCount !== null && exampleCount > 0 && cleanupResult === null && (
+          <SettingRow label={k.cleanupExamples} hint={k.cleanupExamplesHint}>
+            <button
+              onClick={() => setShowCleanupConfirm(true)}
+              disabled={cleaningUp}
+              title={cleaningUp ? t.hints.cleanupInProgress : undefined}
+              className="flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium rounded-lg border border-border text-muted-foreground hover:text-foreground hover:bg-muted transition-colors shrink-0 disabled:opacity-50"
+            >
+              {cleaningUp ? <Loader2 size={12} className="animate-spin" /> : <Trash2 size={12} />}
+              {k.cleanupExamplesButton}
+              <span className="ml-1 tabular-nums text-2xs opacity-70">{exampleCount}</span>
+            </button>
+          </SettingRow>
+        )}
+        {cleanupResult !== null && (
+          <div className="flex items-center gap-2 text-xs text-success">
+            <Check size={14} />
+            {k.cleanupExamplesDone(cleanupResult)}
+          </div>
+        )}
+      </SettingCard>
 
-      <Field
-        label={k.authToken}
-        hint={hasToken ? k.authTokenHint : k.authTokenNone}
+      {/* ── Card 2: Security ── */}
+      <SettingCard
+        icon={<HardDrive size={15} />}
+        title="Security"
       >
-        <div className="space-y-2">
-          {/* Token display */}
-          <div className="flex items-center gap-2 px-3 py-2 bg-background border border-border rounded-lg min-h-[38px]">
-            <code className="flex-1 text-xs font-mono text-foreground break-all select-all">
-              {displayToken || <span className="text-muted-foreground italic">— not set —</span>}
-            </code>
-            {displayToken && (
-              <button
-                type="button"
-                onClick={handleCopy}
-                className="shrink-0 p-1 rounded text-muted-foreground hover:text-foreground transition-colors"
-                title={k.authTokenCopy}
-              >
-                <Copy size={13} />
-              </button>
-            )}
-          </div>
-          {/* MCP port info */}
-          {data.mcpPort && (
-            <p className="text-xs text-muted-foreground">
-              {k.authTokenMcpPort}: <code className="font-mono">{data.mcpPort}</code>
-              {displayToken && (
-                <> &nbsp;·&nbsp; MCP URL: <code className="font-mono select-all">
-                  {`${origin}:${data.mcpPort}/mcp`}
-                </code></>
-              )}
-            </p>
-          )}
-          {/* Action buttons */}
+        <Field label={k.webPassword} hint={k.webPasswordHint}>
           <div className="flex gap-2">
+            <Input
+              type={showPassword ? 'text' : 'password'}
+              value={isPasswordMasked ? '••••••••' : (data.webPassword ?? '')}
+              onChange={e => setData(d => d ? { ...d, webPassword: e.target.value } : d)}
+              onFocus={() => { if (isPasswordMasked) setData(d => d ? { ...d, webPassword: '' } : d); }}
+              placeholder="Leave empty to disable"
+            />
             <button
               type="button"
-              onClick={handleResetToken}
-              disabled={resetting}
-              title={resetting ? t.hints.tokenResetInProgress : undefined}
-              className="flex items-center gap-1.5 px-3 py-1.5 text-xs rounded-lg border border-border text-muted-foreground hover:text-foreground hover:bg-muted disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
+              onClick={() => setShowPassword(v => !v)}
+              className="px-3 py-2 text-sm rounded-lg border border-border text-muted-foreground hover:text-foreground hover:bg-muted transition-colors shrink-0"
             >
-              <RefreshCw size={12} className={resetting ? 'animate-spin' : ''} />
-              {k.authTokenReset}
+              {showPassword ? 'Hide' : 'Show'}
             </button>
-            {hasToken && (
+          </div>
+        </Field>
+
+        <Field
+          label={k.authToken}
+          hint={hasToken ? k.authTokenHint : k.authTokenNone}
+        >
+          <div className="space-y-2">
+            {/* Token display */}
+            <div className="flex items-center gap-2 px-3 py-2 bg-background border border-border rounded-lg min-h-[38px]">
+              <code className="flex-1 text-xs font-mono text-foreground break-all select-all">
+                {displayToken || <span className="text-muted-foreground italic">— not set —</span>}
+              </code>
+              {displayToken && (
+                <button
+                  type="button"
+                  onClick={handleCopy}
+                  className="shrink-0 p-1 rounded text-muted-foreground hover:text-foreground transition-colors"
+                  title={k.authTokenCopy}
+                >
+                  <Copy size={13} />
+                </button>
+              )}
+            </div>
+            {/* MCP port info */}
+            {data.mcpPort && (
+              <p className="text-xs text-muted-foreground">
+                {k.authTokenMcpPort}: <code className="font-mono">{data.mcpPort}</code>
+                {displayToken && (
+                  <> &nbsp;·&nbsp; MCP URL: <code className="font-mono select-all">
+                    {`${origin}:${data.mcpPort}/mcp`}
+                  </code></>
+                )}
+              </p>
+            )}
+            {/* Action buttons */}
+            <div className="flex gap-2">
               <button
                 type="button"
-                onClick={handleClearToken}
-                className="flex items-center gap-1.5 px-3 py-1.5 text-xs rounded-lg border border-border text-muted-foreground hover:text-destructive hover:border-destructive/50 transition-colors"
+                onClick={handleResetToken}
+                disabled={resetting}
+                title={resetting ? t.hints.tokenResetInProgress : undefined}
+                className="flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-lg border border-border text-muted-foreground hover:text-foreground hover:bg-muted disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
               >
-                <Trash2 size={12} />
-                {k.authTokenClear}
+                <RefreshCw size={14} className={resetting ? 'animate-spin' : ''} />
+                {k.authTokenReset}
               </button>
+              {hasToken && (
+                <button
+                  type="button"
+                  onClick={handleClearToken}
+                  className="flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-lg border border-border text-muted-foreground hover:text-destructive hover:border-destructive/50 transition-colors"
+                >
+                  <Trash2 size={14} />
+                  {k.authTokenClear}
+                </button>
+              )}
+            </div>
+            {revealedToken && (
+              <p className="text-xs text-[var(--amber-text)]">
+                New token generated. Copy it now — it won&apos;t be shown in full again.
+              </p>
             )}
           </div>
-          {revealedToken && (
-            <p className="text-xs text-[var(--amber-text)]">
-              New token generated. Copy it now — it won&apos;t be shown in full again.
-            </p>
-          )}
-        </div>
-      </Field>
+        </Field>
+      </SettingCard>
 
-      {/* Getting Started Guide toggle */}
+      {/* ── Card 3: Getting Started ── */}
       {guideActive !== null && (
-        <div className="border-t border-border pt-5">
-          <SectionLabel>{t.guide?.title ?? 'Getting Started'}</SectionLabel>
-          <div className="flex items-center justify-between py-2">
-            <div className="flex items-center gap-2">
-              <Sparkles size={14} className="text-[var(--amber)]" />
-              <div>
-                <div className="text-sm text-foreground">{t.guide?.showGuide ?? 'Show getting started guide'}</div>
-              </div>
-            </div>
+        <SettingCard
+          icon={<Sparkles size={15} />}
+          title={t.guide?.title ?? 'Getting Started'}
+        >
+          <SettingRow label={t.guide?.showGuide ?? 'Show getting started guide'}>
             <Toggle checked={!guideDismissed} onChange={() => handleGuideToggle()} />
-          </div>
+          </SettingRow>
           <button
             onClick={handleRestartWalkthrough}
-            className="flex items-center gap-1.5 mt-2 px-3 py-1.5 text-xs rounded-lg border border-border text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
+            className="flex items-center gap-1.5 mt-2 px-3 py-1.5 text-sm rounded-lg border border-border text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
           >
-            <RotateCcw size={12} />
+            <RotateCcw size={14} />
             {k.restartWalkthrough ?? 'Restart walkthrough'}
           </button>
-        </div>
+        </SettingCard>
       )}
 
       {/* System Monitoring — collapsible */}
@@ -380,7 +375,7 @@ function MonitoringSection() {
     <div className="border-t border-border pt-5">
       <button
         onClick={() => setExpanded(v => !v)}
-        className="flex items-center gap-1.5 text-xs font-medium text-muted-foreground hover:text-foreground transition-colors w-full"
+        className="flex items-center gap-1.5 text-sm font-medium text-muted-foreground hover:text-foreground transition-colors w-full"
       >
         {expanded ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
         <Cpu size={12} />