@geminilight/mindos 0.6.30 → 0.6.31

package/app/components/settings/McpTab.tsx

@@ -135,7 +135,7 @@ function McpStatusCard({ status, restarting, onRestart, onRefresh, m }: {
   if (!status) return null;
   return (
     <div className="rounded-xl border border-border bg-card p-4 flex items-center justify-between">
-      <div className="flex items-center gap-2.5 text-xs">
+      <div className="flex items-center gap-2.5 text-sm">
         {restarting ? (
           <>
             <Loader2 size={12} className="animate-spin text-[var(--amber)]" />
@@ -161,13 +161,13 @@ function McpStatusCard({ status, restarting, onRestart, onRefresh, m }: {
       <div className="flex items-center gap-2">
         {!status.running && !restarting && (
           <button onClick={onRestart}
-            className="flex items-center gap-1.5 px-2.5 py-1 text-xs rounded-lg font-medium text-[var(--amber-foreground)] bg-[var(--amber)] transition-colors">
-            <RotateCcw size={12} /> {m?.restart ?? 'Restart'}
+            className="flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-lg font-medium text-[var(--amber-foreground)] bg-[var(--amber)] transition-colors">
+            <RotateCcw size={14} /> {m?.restart ?? 'Restart'}
           </button>
         )}
         <button onClick={onRefresh}
           className="p-1.5 rounded-lg border border-border text-muted-foreground hover:text-foreground hover:bg-muted transition-colors">
-          <RefreshCw size={12} />
+          <RefreshCw size={14} />
         </button>
       </div>
     </div>
@@ -257,19 +257,19 @@ function AgentConfigViewer({ connectedAgents, detectedAgents, notFoundAgents, cu
           <div className="flex items-center rounded-lg border border-border overflow-hidden w-fit">
             <button
               onClick={() => onTransportChange('stdio')}
-              className={`flex items-center gap-1.5 px-3 py-1.5 text-xs transition-colors ${
+              className={`flex items-center gap-1.5 px-3 py-1.5 text-sm transition-colors ${
                 transport === 'stdio' ? 'bg-muted text-foreground font-medium' : 'text-muted-foreground hover:text-foreground'
               }`}
             >
-              <Monitor size={12} /> {m?.transportLocal ?? 'Local (stdio)'}
+              <Monitor size={14} /> {m?.transportLocal ?? 'Local (stdio)'}
             </button>
             <button
               onClick={() => onTransportChange('http')}
-              className={`flex items-center gap-1.5 px-3 py-1.5 text-xs transition-colors ${
+              className={`flex items-center gap-1.5 px-3 py-1.5 text-sm transition-colors ${
                 transport === 'http' ? 'bg-muted text-foreground font-medium' : 'text-muted-foreground hover:text-foreground'
               }`}
             >
-              <Globe size={12} /> {m?.transportRemote ?? 'Remote (HTTP)'}
+              <Globe size={14} /> {m?.transportRemote ?? 'Remote (HTTP)'}
             </button>
           </div>
 
@@ -287,10 +287,10 @@ function AgentConfigViewer({ connectedAgents, detectedAgents, notFoundAgents, cu
               <pre className="text-[11px] font-mono bg-muted/50 border border-border rounded-lg p-3 overflow-x-auto whitespace-pre select-all max-h-[240px] overflow-y-auto">
                 {snippet.displaySnippet}
               </pre>
-              <div className="flex items-center gap-3 text-xs">
+              <div className="flex items-center gap-3 text-sm">
                 <button onClick={() => onCopy(snippet.snippet)}
-                  className="inline-flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg border border-border text-muted-foreground hover:text-foreground hover:bg-muted transition-colors shrink-0">
-                  <Copy size={12} />
+                  className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg border border-border text-muted-foreground hover:text-foreground hover:bg-muted transition-colors shrink-0">
+                  <Copy size={14} />
                   {m?.copyConfig ?? 'Copy config'}
                 </button>
                 <span className="text-muted-foreground">→</span>

package/app/components/settings/Primitives.tsx

@@ -238,3 +238,63 @@ export function PrimaryButton({ children, disabled, onClick, type = 'button', cl
     </button>
   );
 }
+
+/**
+ * SettingCard — groups related settings into a visually distinct card.
+ * Provides the "breathing room" and grouping that raw Field stacks lack.
+ *
+ * Usage:
+ *   <SettingCard icon={<Sparkles size={15} />} title="AI Provider" description="Choose your model">
+ *     <Field label="Model"> ... </Field>
+ *   </SettingCard>
+ */
+export function SettingCard({ icon, title, description, badge, children, className = '' }: {
+  icon: React.ReactNode;
+  title: string;
+  description?: string;
+  badge?: React.ReactNode;
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <div className={`rounded-xl border border-border/50 bg-card/50 p-5 ${className}`}>
+      <div className="flex items-start gap-3 mb-4">
+        <div className="w-8 h-8 rounded-lg bg-muted/50 flex items-center justify-center shrink-0 mt-0.5">
+          <span className="text-muted-foreground">{icon}</span>
+        </div>
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-2">
+            <h3 className="text-sm font-semibold text-foreground">{title}</h3>
+            {badge}
+          </div>
+          {description && (
+            <p className="text-xs text-muted-foreground mt-0.5 leading-relaxed">{description}</p>
+          )}
+        </div>
+      </div>
+      <div className="space-y-4 pl-11">
+        {children}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * SettingRow — inline label + control on one line.
+ * Replaces verbose Field + vertical stacking for simple toggle/select rows.
+ */
+export function SettingRow({ label, hint, children }: {
+  label: string;
+  hint?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="flex items-center justify-between gap-4">
+      <div className="flex-1 min-w-0">
+        <div className="text-sm text-foreground">{label}</div>
+        {hint && <div className="text-xs text-muted-foreground mt-0.5">{hint}</div>}
+      </div>
+      <div className="shrink-0">{children}</div>
+    </div>
+  );
+}

package/app/components/settings/SettingsContent.tsx

@@ -30,6 +30,7 @@ export default function SettingsContent({ visible, initialTab, variant, onClose
   const dataLoaded = useRef(false);
 
   const [font, setFont] = useState('lora');
+  const [fontSize, setFontSize] = useState('15px');
   const [contentWidth, setContentWidth] = useState('780px');
   const [dark, setDark] = useState(true);
 
@@ -63,6 +64,7 @@ export default function SettingsContent({ visible, initialTab, variant, onClose
     if (justOpened) {
       apiFetch<SettingsData>('/api/settings').then(d => { setData(d); dataLoaded.current = true; }).catch(() => setStatus('load-error'));
       setFont(localStorage.getItem('prose-font') ?? 'lora');
+      setFontSize(localStorage.getItem('prose-font-size') ?? '15px');
       setContentWidth(localStorage.getItem('content-width') ?? '780px');
       const stored = localStorage.getItem('theme');
       setDark(stored ? stored === 'dark' : window.matchMedia('(prefers-color-scheme: dark)').matches);
@@ -87,6 +89,11 @@ export default function SettingsContent({ visible, initialTab, variant, onClose
     localStorage.setItem('prose-font', font);
   }, [font]);
 
+  useEffect(() => {
+    document.documentElement.style.setProperty('--prose-font-size-override', fontSize);
+    localStorage.setItem('prose-font-size', fontSize);
+  }, [fontSize]);
+
   useEffect(() => {
     document.documentElement.style.setProperty('--content-width-override', contentWidth);
     localStorage.setItem('content-width', contentWidth);
@@ -178,7 +185,7 @@ export default function SettingsContent({ visible, initialTab, variant, onClose
       ) : (
         <>
           {tab === 'ai' && data?.ai && <AiTab data={data} updateAi={updateAi} updateAgent={updateAgent} t={t} />}
-          {tab === 'appearance' && <AppearanceTab font={font} setFont={setFont} contentWidth={contentWidth} setContentWidth={setContentWidth} dark={dark} setDark={setDark} locale={locale} setLocale={setLocale} t={t} />}
+          {tab === 'appearance' && <AppearanceTab font={font} setFont={setFont} fontSize={fontSize} setFontSize={setFontSize} contentWidth={contentWidth} setContentWidth={setContentWidth} dark={dark} setDark={setDark} locale={locale} setLocale={setLocale} t={t} />}
           {tab === 'knowledge' && data && <KnowledgeTab data={data} setData={setData} t={t} />}
           {tab === 'sync' && <SyncTab t={t} />}
           {tab === 'mcp' && <McpTab t={t} />}
@@ -197,18 +204,18 @@ export default function SettingsContent({ visible, initialTab, variant, onClose
             <button
               onClick={restoreFromEnv}
               disabled={saving || !data}
-              className={`flex items-center gap-1.5 ${isPanel ? 'px-2.5 py-1 text-[11px] rounded-md' : 'px-3 py-1 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`}
+              className={`flex items-center gap-1.5 ${isPanel ? 'px-2.5 py-1 text-xs rounded-md' : '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`}
             >
-              <RotateCcw size={isPanel ? 11 : 12} />
+              <RotateCcw size={isPanel ? 12 : 13} />
               {t.settings.ai.restoreFromEnv}
             </button>
           )}
           {tab === 'knowledge' && (
             <a
               href="/setup?force=1"
-              className={`flex items-center gap-1.5 ${isPanel ? 'px-2.5 py-1 text-[11px] rounded-md' : 'px-3 py-1 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 ${isPanel ? 'px-2.5 py-1 text-xs rounded-md' : '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={isPanel ? 11 : 12} />
+              <RotateCcw size={isPanel ? 12 : 13} />
               {t.settings.reconfigure}
             </a>
           )}
@@ -246,7 +253,7 @@ export default function SettingsContent({ visible, initialTab, variant, onClose
             <button
               key={tabItem.id}
               onClick={() => setTab(tabItem.id)}
-              className={`flex items-center gap-1 px-2 py-2 text-[11px] font-medium transition-colors border-b-2 -mb-px whitespace-nowrap ${
+              className={`flex items-center gap-1 px-2 py-2 text-xs font-medium transition-colors border-b-2 -mb-px whitespace-nowrap ${
                 tab === tabItem.id
                   ? 'border-[var(--amber)] text-foreground'
                   : 'border-transparent text-muted-foreground hover:text-foreground'
@@ -297,7 +304,7 @@ export default function SettingsContent({ visible, initialTab, variant, onClose
             <button
               key={tabItem.id}
               onClick={() => setTab(tabItem.id)}
-              className={`flex items-center gap-1.5 px-3 py-2.5 text-xs font-medium transition-colors border-b-2 -mb-px whitespace-nowrap ${
+              className={`flex items-center gap-1.5 px-3 py-2.5 text-sm font-medium transition-colors border-b-2 -mb-px whitespace-nowrap ${
                 tab === tabItem.id
                   ? 'border-[var(--amber)] text-foreground'
                   : 'border-transparent text-muted-foreground hover:text-foreground'
@@ -326,7 +333,7 @@ export default function SettingsContent({ visible, initialTab, variant, onClose
               <button
                 key={tabItem.id}
                 onClick={() => setTab(tabItem.id)}
-                className={`flex items-center gap-2 w-full px-4 py-2 text-xs font-medium transition-colors relative ${
+                className={`flex items-center gap-2 w-full px-4 py-2 text-sm font-medium transition-colors relative ${
                   tab === tabItem.id
                     ? 'text-foreground bg-muted'
                     : 'text-muted-foreground hover:text-foreground hover:bg-muted/50'

package/app/components/settings/SyncTab.tsx

@@ -82,7 +82,7 @@ function SyncEmptyState({ t, onInitComplete }: { t: Messages; onInitComplete: ()
 
       {/* Git Remote URL */}
       <div className="space-y-1.5">
-        <label className="text-xs font-medium text-foreground block">
+        <label className="text-sm font-medium text-foreground block">
           {syncT?.remoteUrl ?? 'Git Remote URL'}
         </label>
         <Input
@@ -108,7 +108,7 @@ function SyncEmptyState({ t, onInitComplete }: { t: Messages; onInitComplete: ()
       {/* Access Token (HTTPS only) */}
       {showTokenField && (
         <div className="space-y-1.5">
-          <label className="text-xs font-medium text-foreground block">
+          <label className="text-sm font-medium text-foreground block">
             {syncT?.accessToken ?? 'Access Token'}{' '}
             <span className="text-muted-foreground font-normal">{syncT?.optional ?? '(optional, for private repos)'}</span>
           </label>
@@ -136,7 +136,7 @@ function SyncEmptyState({ t, onInitComplete }: { t: Messages; onInitComplete: ()
 
       {/* Branch */}
       <div className="space-y-1.5">
-        <label className="text-xs font-medium text-foreground block">
+        <label className="text-sm font-medium text-foreground block">
           {syncT?.branchLabel ?? 'Branch'}
         </label>
         <Input
@@ -267,30 +267,30 @@ export function SyncTab({ t }: SyncTabProps) {
       <SectionLabel>Sync</SectionLabel>
 
       {/* Status overview */}
-      <div className="space-y-2 text-sm">
+      <div className="space-y-2.5 text-sm">
         <div className="flex items-center gap-2">
           <span className="text-muted-foreground w-24 shrink-0">Provider</span>
-          <span className="font-mono text-xs">{status.provider}</span>
+          <span className="font-mono text-sm">{status.provider}</span>
         </div>
         <div className="flex items-center gap-2">
           <span className="text-muted-foreground w-24 shrink-0">Remote</span>
-          <span className="font-mono text-xs truncate" title={status.remote}>{status.remote}</span>
+          <span className="font-mono text-sm truncate" title={status.remote}>{status.remote}</span>
         </div>
         <div className="flex items-center gap-2">
           <span className="text-muted-foreground w-24 shrink-0">Branch</span>
-          <span className="font-mono text-xs">{status.branch}</span>
+          <span className="font-mono text-sm">{status.branch}</span>
         </div>
         <div className="flex items-center gap-2">
           <span className="text-muted-foreground w-24 shrink-0">Last sync</span>
-          <span className="text-xs">{timeAgo(status.lastSync)}</span>
+          <span className="text-sm">{timeAgo(status.lastSync)}</span>
         </div>
         <div className="flex items-center gap-2">
           <span className="text-muted-foreground w-24 shrink-0">Unpushed</span>
-          <span className="text-xs">{status.unpushed} commits</span>
+          <span className="text-sm">{status.unpushed} commits</span>
         </div>
         <div className="flex items-center gap-2">
           <span className="text-muted-foreground w-24 shrink-0">Auto-sync</span>
-          <span className="text-xs">
+          <span className="text-sm">
             commit: {status.autoCommitInterval}s, pull: {Math.floor((status.autoPullInterval || 300) / 60)}min
           </span>
         </div>
@@ -303,7 +303,7 @@ export function SyncTab({ t }: SyncTabProps) {
           onClick={handleSyncNow}
           disabled={syncing}
           title={syncing ? t.hints.syncInProgress : 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"
+          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"
         >
           <RefreshCw size={12} className={syncing ? 'animate-spin' : ''} />
           Sync Now
@@ -313,7 +313,7 @@ export function SyncTab({ t }: SyncTabProps) {
           onClick={handleToggle}
           disabled={toggling}
           title={toggling ? t.hints.toggleInProgress : undefined}
-          className={`flex items-center gap-1.5 px-3 py-1.5 text-xs rounded-lg border transition-colors disabled:opacity-40 disabled:cursor-not-allowed ${
+          className={`flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-lg border transition-colors disabled:opacity-40 disabled:cursor-not-allowed ${
             status.enabled
               ? 'border-border text-muted-foreground hover:text-destructive hover:border-destructive/50'
               : 'border-success/30 text-success hover:bg-success/10'

package/app/components/settings/UninstallTab.tsx

@@ -4,6 +4,7 @@ import { useState } from 'react';
 import { Trash2, AlertTriangle, CheckCircle2, Loader2, ShieldCheck } from 'lucide-react';
 import { apiFetch } from '@/lib/api';
 import { useLocale } from '@/lib/LocaleContext';
+import { SettingCard } from './Primitives';
 
 type Phase = 'idle' | 'confirming' | 'running' | 'success' | 'error';
 
@@ -73,25 +74,14 @@ export function UninstallTab() {
         className="mt-0.5 form-check"
       />
       <div>
-        <p className="text-xs font-medium text-foreground">{label}</p>
-        <p className="text-[11px] text-muted-foreground">{desc}</p>
+        <p className="text-sm font-medium text-foreground">{label}</p>
+        <p className="text-xs text-muted-foreground">{desc}</p>
       </div>
     </label>
   );
 
   return (
-    <div className="space-y-5">
-      {/* Header */}
-      <div>
-        <h3 className="text-sm font-medium text-foreground flex items-center gap-2">
-          <Trash2 size={14} className="text-muted-foreground" />
-          {u.title}
-        </h3>
-        <p className="text-xs text-muted-foreground mt-1">
-          {isDesktop ? u.descDesktop : u.descCli}
-        </p>
-      </div>
-
+    <SettingCard icon={<Trash2 size={15} />} title={u.title} description={isDesktop ? u.descDesktop : u.descCli}>
       {/* Knowledge base safety note */}
       <div className="flex gap-2.5 p-3 rounded-md bg-muted/50 border border-border">
         <ShieldCheck size={14} className="text-success shrink-0 mt-0.5" />
@@ -116,7 +106,7 @@ export function UninstallTab() {
       {phase === 'idle' && (
         <button
           onClick={() => setPhase('confirming')}
-          className="px-3 py-1.5 text-xs font-medium rounded-md bg-error/10 text-error border border-error/20 hover:bg-error/20 transition-colors focus-visible:ring-1 focus-visible:ring-ring disabled:opacity-40 disabled:cursor-not-allowed"
+          className="px-3.5 py-2 text-sm font-medium rounded-lg bg-error/10 text-error border border-error/20 hover:bg-error/20 transition-colors focus-visible:ring-1 focus-visible:ring-ring disabled:opacity-40 disabled:cursor-not-allowed"
         >
           <Trash2 size={12} className="inline mr-1.5 -mt-px" />
           {u.confirmButton}
@@ -129,13 +119,13 @@ export function UninstallTab() {
           <div className="flex gap-2">
             <button
               onClick={handleUninstall}
-              className="px-3 py-1.5 text-xs font-medium rounded-md bg-error text-white hover:bg-error/90 transition-colors focus-visible:ring-1 focus-visible:ring-ring"
+              className="px-3.5 py-2 text-sm font-medium rounded-lg bg-error text-white hover:bg-error/90 transition-colors focus-visible:ring-1 focus-visible:ring-ring"
             >
               {u.confirmButton}
             </button>
             <button
               onClick={() => setPhase('idle')}
-              className="px-3 py-1.5 text-xs font-medium rounded-md bg-muted text-foreground hover:bg-muted/80 transition-colors focus-visible:ring-1 focus-visible:ring-ring"
+              className="px-3.5 py-2 text-sm font-medium rounded-lg bg-muted text-foreground hover:bg-muted/80 transition-colors focus-visible:ring-1 focus-visible:ring-ring"
             >
               {u.cancelButton}
             </button>
@@ -174,6 +164,6 @@ export function UninstallTab() {
           </button>
         </div>
       )}
-    </div>
+    </SettingCard>
   );
 }

package/app/components/settings/UpdateTab.tsx

@@ -178,59 +178,60 @@ function DesktopUpdateTab() {
             {errorMsg}
           </div>
         )}
-      </div>
-
-      <div className="flex items-center gap-2">
-        <button
-          onClick={handleCheck}
-          disabled={state === 'checking' || state === 'downloading'}
-          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"
-        >
-          <RefreshCw size={12} className={state === 'checking' ? 'animate-spin' : ''} />
-          {u?.checkButton ?? 'Check for Updates'}
-        </button>
-
-        {state === 'idle' && available && (
+        {/* Actions */}
+        <div className="flex items-center gap-2 pt-1">
           <button
-            onClick={handleInstall}
-            className="flex items-center gap-1.5 px-3 py-1.5 text-xs rounded-lg font-medium text-[var(--amber-foreground)] bg-[var(--amber)] transition-colors"
+            onClick={handleCheck}
+            disabled={state === 'checking' || state === 'downloading'}
+            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"
           >
-            <Download size={12} />
-            {version ? `Update to v${version}` : 'Update'}
+            <RefreshCw size={14} className={state === 'checking' ? 'animate-spin' : ''} />
+            {u?.checkButton ?? 'Check for Updates'}
           </button>
-        )}
 
-        {state === 'ready' && (
-          <button
-            onClick={async () => {
-              try {
-                await bridge.installUpdate();
-              } catch {
-                setState('error');
-                setErrorMsg(u?.error ?? 'Failed to install update. Please try again.');
-              }
-            }}
-            className="flex items-center gap-1.5 px-3 py-1.5 text-xs rounded-lg font-medium text-[var(--amber-foreground)] bg-[var(--amber)] transition-colors"
-          >
-            <RefreshCw size={12} />
-            {u?.desktopRestart ?? 'Restart Now'}
-          </button>
-        )}
-      </div>
+          {state === 'idle' && available && (
+            <button
+              onClick={handleInstall}
+              className="flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-lg font-medium text-[var(--amber-foreground)] bg-[var(--amber)] transition-colors"
+            >
+              <Download size={14} />
+              {version ? `Update to v${version}` : 'Update'}
+            </button>
+          )}
 
-      <div className="border-t border-border pt-4 space-y-2">
-        <a
-          href={CHANGELOG_URL}
-          target="_blank"
-          rel="noopener noreferrer"
-          className="flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors"
-        >
-          <ExternalLink size={12} />
-          {u?.releaseNotes ?? 'View release notes'}
-        </a>
-        <p className="text-2xs text-muted-foreground/60">
-          {u?.desktopHint ?? 'Updates are delivered through the Desktop app auto-updater.'}
-        </p>
+          {state === 'ready' && (
+            <button
+              onClick={async () => {
+                try {
+                  await bridge.installUpdate();
+                } catch {
+                  setState('error');
+                  setErrorMsg(u?.error ?? 'Failed to install update. Please try again.');
+                }
+              }}
+              className="flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-lg font-medium text-[var(--amber-foreground)] bg-[var(--amber)] transition-colors"
+            >
+              <RefreshCw size={14} />
+              {u?.desktopRestart ?? 'Restart Now'}
+            </button>
+          )}
+        </div>
+
+        {/* Info */}
+        <div className="border-t border-border/50 pt-3 space-y-2">
+          <a
+            href={CHANGELOG_URL}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors"
+          >
+            <ExternalLink size={12} />
+            {u?.releaseNotes ?? 'View release notes'}
+          </a>
+          <p className="text-2xs text-muted-foreground/60">
+            {u?.desktopHint ?? 'Updates are delivered through the Desktop app auto-updater.'}
+          </p>
+        </div>
       </div>
     </div>
   );
@@ -527,44 +528,43 @@ function BrowserUpdateTab() {
             )}
           </div>
         )}
-      </div>
-
-      {/* Actions */}
-      <div className="flex items-center gap-2">
-        <button
-          onClick={checkUpdate}
-          disabled={state === 'checking' || state === 'updating'}
-          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"
-        >
-          <RefreshCw size={12} className={state === 'checking' ? 'animate-spin' : ''} />
-          {u?.checkButton ?? 'Check for Updates'}
-        </button>
-
-        {info?.hasUpdate && state !== 'updating' && state !== 'updated' && (
+        {/* Actions */}
+        <div className="flex items-center gap-2 pt-1">
           <button
-            onClick={handleUpdate}
-            className="flex items-center gap-1.5 px-3 py-1.5 text-xs rounded-lg font-medium text-[var(--amber-foreground)] bg-[var(--amber)] transition-colors"
+            onClick={checkUpdate}
+            disabled={state === 'checking' || state === 'updating'}
+            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"
           >
-            <Download size={12} />
-            {u?.updateButton ? u.updateButton(info.latest) : `Update to v${info.latest}`}
+            <RefreshCw size={14} className={state === 'checking' ? 'animate-spin' : ''} />
+            {u?.checkButton ?? 'Check for Updates'}
           </button>
-        )}
-      </div>
 
-      {/* Info */}
-      <div className="border-t border-border pt-4 space-y-2">
-        <a
-          href={CHANGELOG_URL}
-          target="_blank"
-          rel="noopener noreferrer"
-          className="flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors"
-        >
-          <ExternalLink size={12} />
-          {u?.releaseNotes ?? 'View release notes'}
-        </a>
-        <p className="text-2xs text-muted-foreground/60">
-          {u?.hint ?? 'Updates are installed via npm. Equivalent to running'} <code className="font-mono bg-muted px-1 py-0.5 rounded">mindos update</code> {u?.inTerminal ?? 'in your terminal.'}
-        </p>
+          {info?.hasUpdate && state !== 'updating' && state !== 'updated' && (
+            <button
+              onClick={handleUpdate}
+              className="flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-lg font-medium text-[var(--amber-foreground)] bg-[var(--amber)] transition-colors"
+            >
+              <Download size={14} />
+              {u?.updateButton ? u.updateButton(info.latest) : `Update to v${info.latest}`}
+            </button>
+          )}
+        </div>
+
+        {/* Info */}
+        <div className="border-t border-border/50 pt-3 space-y-2">
+          <a
+            href={CHANGELOG_URL}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors"
+          >
+            <ExternalLink size={12} />
+            {u?.releaseNotes ?? 'View release notes'}
+          </a>
+          <p className="text-2xs text-muted-foreground/60">
+            {u?.hint ?? 'Updates are installed via npm. Equivalent to running'} <code className="font-mono bg-muted px-1 py-0.5 rounded">mindos update</code> {u?.inTerminal ?? 'in your terminal.'}
+          </p>
+        </div>
       </div>
     </div>
   );

package/app/components/settings/types.ts

@@ -37,17 +37,24 @@ export interface SettingsData {
 export type Tab = 'ai' | 'appearance' | 'knowledge' | 'mcp' | 'sync' | 'update' | 'uninstall';
 
 export const CONTENT_WIDTHS = [
-  { value: '680px', label: 'Narrow (680px)' },
-  { value: '780px', label: 'Default (780px)' },
-  { value: '960px', label: 'Wide (960px)' },
-  { value: '100%', label: 'Full width' },
+  { value: '680px', label: 'Narrow', width: 42 },
+  { value: '780px', label: 'Default', width: 56 },
+  { value: '960px', label: 'Wide', width: 75 },
+  { value: '100%', label: 'Full', width: 100 },
+];
+
+export const FONT_SIZES = [
+  { value: '14px', label: '14', numericValue: 14 },
+  { value: '15px', label: '15', numericValue: 15, isDefault: true },
+  { value: '16px', label: '16', numericValue: 16 },
+  { value: '17px', label: '17', numericValue: 17 },
 ];
 
 export const FONTS = [
-  { value: 'lora', label: 'Lora (serif)', style: { fontFamily: 'Lora, Georgia, serif' } },
-  { value: 'ibm-plex-sans', label: 'IBM Plex Sans', style: { fontFamily: "'IBM Plex Sans', sans-serif" } },
-  { value: 'geist', label: 'Geist', style: { fontFamily: 'var(--font-geist-sans), sans-serif' } },
-  { value: 'ibm-plex-mono', label: 'IBM Plex Mono (mono)', style: { fontFamily: "'IBM Plex Mono', monospace" } },
+  { value: 'lora', label: 'Lora', category: 'Serif', style: { fontFamily: 'Lora, Georgia, serif' } },
+  { value: 'ibm-plex-sans', label: 'IBM Plex Sans', category: 'Sans', style: { fontFamily: "'IBM Plex Sans', sans-serif" } },
+  { value: 'geist', label: 'Geist', category: 'Sans', style: { fontFamily: 'var(--font-geist-sans), sans-serif' } },
+  { value: 'ibm-plex-mono', label: 'IBM Plex Mono', category: 'Mono', style: { fontFamily: "'IBM Plex Mono', monospace" } },
 ];
 
 /* ── MCP Types ────────────────────────────────────────────────── */
@@ -127,6 +134,8 @@ export interface McpTabProps {
 export interface AppearanceTabProps {
   font: string;
   setFont: (v: string) => void;
+  fontSize: string;
+  setFontSize: (v: string) => void;
   contentWidth: string;
   setContentWidth: (v: string) => void;
   dark: boolean;

package/app/lib/acp/session.ts

@@ -125,8 +125,15 @@ export async function createSessionFromEntry(
     }, 15_000);
 
     if (newResponse.error) {
-      // Non-fatal: some agents may not support explicit session/new
-      console.warn(`ACP session/new warning for ${entry.id}: ${newResponse.error.message}`);
+      const errMsg = newResponse.error.message ?? 'session/new failed';
+      // Authentication errors are fatal — agent cannot proceed without auth
+      if (/auth/i.test(errMsg)) {
+        unsubApproval();
+        killAgent(proc);
+        throw new Error(`${entry.id}: ${errMsg}`);
+      }
+      // Other errors are non-fatal: some agents may not support explicit session/new
+      console.warn(`ACP session/new warning for ${entry.id}: ${errMsg}`);
     } else {
       const newResult = newResponse.result as Record<string, unknown> | undefined;
       if (newResult) {
@@ -134,7 +141,9 @@ export async function createSessionFromEntry(
         configOptions = parseConfigOptions(newResult.configOptions);
       }
     }
-  } catch {
+  } catch (sessionErr) {
+    // Re-throw auth errors — they are fatal
+    if (sessionErr instanceof Error && /auth/i.test(sessionErr.message)) throw sessionErr;
     // Non-fatal: agent may not support explicit session/new (backwards compat)
   }