@toolr/ui-design 0.1.5 → 0.1.7

package/components/sections/ai-tools-paths/tools-paths-panel.tsx

@@ -66,7 +66,7 @@ export function ToolsPathsPanel({
     <div className={cn('w-full', className)}>
       {/* Header */}
       <div className="flex items-center justify-between mb-4">
-        <p className="text-xs text-neutral-500 leading-relaxed max-w-xl">
+        <p className="text-sm text-neutral-500 leading-relaxed max-w-xl">
           Configure CLI paths for AI coding assistants. Specify executable locations
           to enable integration with your development workflow.
         </p>
@@ -127,12 +127,12 @@ export function ToolsPathsPanel({
                 </div>
                 <div className="flex items-center gap-3">
                   {tool.detected ? (
-                    <span className="flex items-center gap-1 text-xs text-green-400">
+                    <span className="flex items-center gap-1 text-sm text-green-400">
                       <Check className="w-3.5 h-3.5" />
                       Installed
                     </span>
                   ) : (
-                    <span className="flex items-center gap-1 text-xs text-neutral-500">
+                    <span className="flex items-center gap-1 text-sm text-neutral-500">
                       <X className="w-3.5 h-3.5" />
                       Not Found
                     </span>
@@ -183,15 +183,15 @@ export function ToolsPathsPanel({
 
                 {/* Helper text */}
                 {isEnabled && !displayPath?.includes('/') && !tool.detected && (
-                  <p className="text-xs text-red-400 pl-5">
+                  <p className="text-sm text-red-400 pl-5">
                     Path required when enabled. Enter full path to binary.
                   </p>
                 )}
                 {tool.detected && !tool.binaryPath && (
-                  <p className="text-xs text-neutral-500 pl-5">Using auto-detected path</p>
+                  <p className="text-sm text-neutral-500 pl-5">Using auto-detected path</p>
                 )}
                 {!isEnabled && !displayPath?.includes('/') && !tool.detected && (
-                  <p className="text-xs text-neutral-500 pl-5">
+                  <p className="text-sm text-neutral-500 pl-5">
                     Tool disabled. Enter path to enable.
                   </p>
                 )}
@@ -199,7 +199,7 @@ export function ToolsPathsPanel({
 
               {/* Disabled warning */}
               {tool.detected && !isEnabled && (
-                <p className="text-xs text-yellow-500">
+                <p className="text-sm text-yellow-500">
                   Tool disabled — enable to use in your workflow
                 </p>
               )}

package/components/sections/captured-issues/captured-issues-panel.tsx

@@ -23,7 +23,7 @@
  * - Dark theme with Catppuccin-like colors matching configr
  */
 
-import { AlertTriangle, Check, X, Send, ChevronDown, Shield, Loader2 } from 'lucide-react'
+import { AlertTriangle, Check, X, Send, ChevronDown, Loader2 } from 'lucide-react'
 import { cn } from '../../lib/cn.ts'
 import { Input } from '../../ui/input.tsx'
 import { ResizableTextarea } from '../../ui/resizable-textarea.tsx'
@@ -75,7 +75,7 @@ export function CapturedIssuesPanel({
           <div className="flex items-center justify-between">
             <div className="flex items-center gap-2">
               <AlertTriangle className="w-4 h-4 text-red-400" />
-              <span className="text-sm text-neutral-300">
+              <span className="text-md text-neutral-300">
                 {errorCount > 0 && (
                   <span className="text-red-400">
                     {errorCount} error{errorCount !== 1 ? 's' : ''}
@@ -93,10 +93,10 @@ export function CapturedIssuesPanel({
 
           {/* Error List */}
           <div className="space-y-2">
-            <p className="text-sm text-neutral-400">Captured Errors</p>
+            <p className="text-md text-neutral-400">Captured Errors</p>
             <div className="max-h-48 overflow-y-auto bg-neutral-950 border border-neutral-700 rounded-lg p-3 space-y-1">
               {errors.map((error) => (
-                <div key={error.fingerprint} className="text-xs font-mono break-words">
+                <div key={error.fingerprint} className="text-sm font-mono break-words">
                   <span className={cn('mr-2 shrink-0', error.level === 'warning' ? 'text-yellow-400' : 'text-red-400')}>
                     {error.count > 1 ? `\u00d7${error.count}` : '\u2022'}
                   </span>
@@ -108,7 +108,7 @@ export function CapturedIssuesPanel({
 
           {/* Optional Details */}
           <div className="space-y-3">
-            <p className="text-sm text-neutral-400">Add context (optional)</p>
+            <p className="text-md text-neutral-400">Add context (optional)</p>
             <Input
               value={title}
               onChange={setTitle}
@@ -119,7 +119,7 @@ export function CapturedIssuesPanel({
               onChange={(e) => setDescription(e.target.value)}
               placeholder="What were you doing when this happened?"
               rows={3}
-              className="w-full px-3 py-1.5 bg-neutral-750 border border-neutral-600 rounded-lg text-neutral-300 placeholder-neutral-500 focus:outline-none focus:border-blue-500 transition-colors resize-none text-sm"
+              className="w-full px-3 py-1.5 bg-neutral-800 border border-neutral-600 rounded-lg text-neutral-300 placeholder-neutral-500 focus:outline-none focus:border-blue-500 transition-colors resize-none text-md"
             />
             <Input
               type="text"
@@ -163,8 +163,8 @@ export function CapturedIssuesPanel({
               <Check className="w-5 h-5 text-green-400" />
             </div>
             <div>
-              <h3 className="text-sm text-neutral-300 font-medium">No Issues Captured</h3>
-              <p className="text-sm text-neutral-500">Everything is running smoothly.</p>
+              <h3 className="text-md text-neutral-300 font-medium">No Issues Captured</h3>
+              <p className="text-md text-neutral-500">Everything is running smoothly.</p>
             </div>
           </div>
         </div>
@@ -174,11 +174,11 @@ export function CapturedIssuesPanel({
       {submittedErrors.length > 0 && (
         <div className="bg-neutral-900 border border-neutral-700 rounded-lg overflow-hidden">
           <details className="group">
-            <summary className="flex items-center justify-between p-4 cursor-pointer hover:bg-neutral-850 transition-colors">
+            <summary className="flex items-center justify-between p-4 cursor-pointer hover:bg-neutral-800 transition-colors">
               <div className="flex items-center gap-2">
                 <Check className="w-4 h-4 text-green-400" />
-                <span className="text-sm text-neutral-300">Previously Reported</span>
-                <span className="text-xs text-neutral-500">({submittedErrors.length})</span>
+                <span className="text-md text-neutral-300">Previously Reported</span>
+                <span className="text-sm text-neutral-500">({submittedErrors.length})</span>
               </div>
               <ChevronDown className="w-4 h-4 text-neutral-500 transition-transform group-open:rotate-180" />
             </summary>
@@ -191,12 +191,12 @@ export function CapturedIssuesPanel({
                   <Check className="w-4 h-4 text-green-400 mt-0.5 shrink-0" />
                   <div className="flex-1 min-w-0">
                     <p
-                      className="text-sm text-neutral-300 font-mono truncate"
+                      className="text-md text-neutral-300 font-mono truncate"
                       title={error.message}
                     >
                       {error.message}
                     </p>
-                    <div className="flex items-center gap-3 mt-1 text-xs text-neutral-500">
+                    <div className="flex items-center gap-3 mt-1 text-sm text-neutral-500">
                       {error.count > 0 && (
                         <span className="text-yellow-400/80">+{error.count} since</span>
                       )}

package/components/sections/captured-issues/use-captured-issues.ts

@@ -14,7 +14,7 @@
  * - Previously reported errors are loaded once on mount
  */
 
-import { useState, useCallback, useEffect } from 'react'
+import { useState, useCallback, useEffect, useMemo } from 'react'
 import type { CapturedError, CapturedIssuesApi, SubmittedError } from './types.ts'
 
 export interface UseCapturedIssuesOptions {
@@ -50,8 +50,14 @@ export function useCapturedIssues(options: UseCapturedIssuesOptions): UseCapture
   const [submitError, setSubmitError] = useState<string | null>(null)
   const [submittedErrors, setSubmittedErrors] = useState<SubmittedError[]>([])
 
-  const errorCount = errors.filter((e) => e.level === 'error').length
-  const warnCount = errors.filter((e) => e.level === 'warning').length
+  const { errorCount, warnCount } = useMemo(() => {
+    let err = 0, warn = 0
+    for (const e of errors) {
+      if (e.level === 'error') err++
+      else if (e.level === 'warning') warn++
+    }
+    return { errorCount: err, warnCount: warn }
+  }, [errors])
 
   useEffect(() => {
     api.getSubmittedErrors().then(setSubmittedErrors).catch(() => {})

package/components/sections/golden-snapshots/file-diff-viewer.tsx

@@ -86,14 +86,14 @@ function DiffFileItem({ file, isSelected, onSelect, onReset, resettingFile, anyR
     >
       <button
         onClick={() => onSelect(file)}
-        className={`flex-1 flex items-center gap-2 px-3 py-1 text-xs ${
+        className={`flex-1 flex items-center gap-2 px-3 py-1 text-sm ${
           isSelected ? 'text-neutral-300' : 'text-neutral-400'
         }`}
       >
         {icon}
         <span className="truncate">{filename}</span>
         {statusLabel && (
-          <span className={`text-xss font-medium ml-auto flex-shrink-0 ${statusColor}`}>
+          <span className={`text-xs font-medium ml-auto flex-shrink-0 ${statusColor}`}>
             {statusLabel}
           </span>
         )}
@@ -165,13 +165,13 @@ function DiffFileTreePanel({ sync, componentLabels, renderFileIcon }: DiffFileTr
 
     // Root-level nodes get colored styling, nested folders get muted styling
     const headerClasses = isRoot
-      ? `${color.text} ${color.hoverBg} border-l-2 ${color.border} ${color.bg} px-3 py-2 text-sm font-medium`
+      ? `${color.text} ${color.hoverBg} border-l-2 ${color.border} ${color.bg} px-3 py-2 text-md font-medium`
       : 'text-neutral-500 hover:bg-neutral-850 px-3 py-1.5'
 
     const chevronSize = isRoot ? 'w-4 h-4' : 'w-3 h-3'
 
     const countElement = isRoot ? (
-      <span className={`ml-auto px-1.5 py-0.5 rounded-full text-xss font-medium ${color.pillBg} ${color.text}`}>
+      <span className={`ml-auto px-1.5 py-0.5 rounded-full text-xs font-medium ${color.pillBg} ${color.text}`}>
         {fileCount}
       </span>
     ) : (
@@ -222,7 +222,7 @@ function DiffFileTreePanel({ sync, componentLabels, renderFileIcon }: DiffFileTr
     <div className="w-72 flex-shrink-0 bg-neutral-900 rounded-lg border border-neutral-700 overflow-hidden flex flex-col">
       {/* Summary Header */}
       <div className="p-3 border-b border-neutral-700 flex-shrink-0">
-        <div className="flex gap-3 text-xs">
+        <div className="flex gap-3 text-sm">
           <span className="text-green-400">+{diff!.summary.added}</span>
           <span className="text-red-400">-{diff!.summary.removed}</span>
           <span className="text-yellow-400">~{diff!.summary.modified}</span>
@@ -237,7 +237,7 @@ function DiffFileTreePanel({ sync, componentLabels, renderFileIcon }: DiffFileTr
             <button
               key={filter}
               onClick={() => setDiffFilter(filter)}
-              className={`px-2 py-1 rounded text-xs transition-colors cursor-pointer ${
+              className={`px-2 py-1 rounded text-sm transition-colors cursor-pointer ${
                 diffFilter === filter
                   ? 'bg-neutral-700 text-neutral-300'
                   : 'text-neutral-500 hover:text-neutral-400'
@@ -295,7 +295,7 @@ function DiffEditorPanel({ sync, componentLabels, monacoTheme }: DiffEditorPanel
   if (!selectedDiffFile) {
     return (
       <div className="flex-1 min-w-0 bg-neutral-900 rounded-lg border border-neutral-700 overflow-hidden flex flex-col">
-        <div className="flex items-center justify-center h-full text-sm text-neutral-500">
+        <div className="flex items-center justify-center h-full text-md text-neutral-500">
           Select a file from the tree to view differences
         </div>
       </div>
@@ -310,16 +310,16 @@ function DiffEditorPanel({ sync, componentLabels, monacoTheme }: DiffEditorPanel
       <div className="flex items-center justify-between px-4 py-2 border-b border-neutral-700 flex-shrink-0">
         <div className="flex items-center gap-2">
           <FileCode className="w-4 h-4 flex-shrink-0 text-blue-400/50" />
-          <span className="text-sm text-neutral-300 font-medium">
+          <span className="text-md text-neutral-300 font-medium">
             {selectedDiffFile.component}/{selectedDiffFile.path}
           </span>
           {devtools && hasUnsavedChanges && (
-            <span className="px-2 py-0.5 bg-amber-500/20 text-amber-400 text-xs rounded">
+            <span className="px-2 py-0.5 bg-amber-500/20 text-amber-400 text-sm rounded">
               Modified
             </span>
           )}
         </div>
-        <span className="text-xs text-neutral-500">{compLabel}</span>
+        <span className="text-sm text-neutral-500">{compLabel}</span>
       </div>
 
       {/* Diff Editor */}
@@ -355,7 +355,7 @@ function DiffEditorPanel({ sync, componentLabels, monacoTheme }: DiffEditorPanel
             }}
           />
         ) : (
-          <div className="flex items-center justify-center h-full text-sm text-neutral-500">
+          <div className="flex items-center justify-center h-full text-md text-neutral-500">
             Loading file content...
           </div>
         )}
@@ -404,14 +404,14 @@ export function FileDiffViewer({ sync, componentLabels, monacoTheme, renderFileI
       </div>
 
       {diffLoading ? (
-        <div className="text-sm text-neutral-500 text-center py-8">Loading diff...</div>
+        <div className="text-md text-neutral-500 text-center py-8">Loading diff...</div>
       ) : diff ? (
         <div className="flex gap-4 flex-1 min-h-[400px]">
           <DiffFileTreePanel sync={sync} componentLabels={componentLabels} renderFileIcon={renderFileIcon} />
           <DiffEditorPanel sync={sync} componentLabels={componentLabels} monacoTheme={monacoTheme} />
         </div>
       ) : (
-        <div className="text-sm text-neutral-500 text-center py-8">
+        <div className="text-md text-neutral-500 text-center py-8">
           No diff data available. Click refresh to load.
         </div>
       )}

package/components/sections/golden-snapshots/golden-sync-panel.tsx

@@ -118,7 +118,7 @@ export function GoldenSyncPanel({
             <h3 className="text-base font-semibold text-neutral-300">
               {TAB_DESCRIPTIONS[activeTab].title}
             </h3>
-            <p className="text-sm text-neutral-400">
+            <p className="text-md text-neutral-400">
               {TAB_DESCRIPTIONS[activeTab].description}
             </p>
           </div>
@@ -138,7 +138,7 @@ export function GoldenSyncPanel({
             <button
               key={tab.id}
               onClick={() => handleTabChange(tab.id)}
-              className={`h-[41px] flex items-center gap-2 px-4 text-sm border-b-2 transition-colors cursor-pointer ${
+              className={`h-[41px] flex items-center gap-2 px-4 text-md border-b-2 transition-colors cursor-pointer ${
                 activeTab === tab.id
                   ? `${tab.color} border-current bg-neutral-800/50`
                   : 'border-transparent text-neutral-500 hover:text-neutral-300 hover:bg-neutral-800/30'
@@ -155,7 +155,7 @@ export function GoldenSyncPanel({
           <div className="bg-red-500/10 border border-red-500/30 rounded-lg p-4 mt-4">
             <div className="flex items-center gap-3">
               <AlertCircle className="w-5 h-5 text-red-400 flex-shrink-0" />
-              <p className="text-red-400 text-sm">{error}</p>
+              <p className="text-red-400 text-md">{error}</p>
             </div>
           </div>
         )}
@@ -165,7 +165,7 @@ export function GoldenSyncPanel({
           <div className="bg-green-500/10 border border-green-500/30 rounded-lg p-4 mt-4">
             <div className="flex items-center gap-3">
               <Check className="w-5 h-5 text-green-400 flex-shrink-0" />
-              <p className="text-green-400 text-sm">{lastAction}</p>
+              <p className="text-green-400 text-md">{lastAction}</p>
             </div>
           </div>
         )}
@@ -174,7 +174,7 @@ export function GoldenSyncPanel({
       {/* Content */}
       <div className={activeTab === 'diff' ? 'flex-1 min-h-0 mt-4' : 'space-y-6 mt-4'}>
         {loading && activeTab === 'status' ? (
-          <div className="text-sm text-neutral-500 text-center py-8">Loading...</div>
+          <div className="text-md text-neutral-500 text-center py-8">Loading...</div>
         ) : activeTab === 'status' ? (
           <StatusOverview
             status={status}

package/components/sections/golden-snapshots/snapshot-manager.tsx

@@ -45,7 +45,7 @@ export function SnapshotManager({ sync }: SnapshotManagerProps) {
   }
 
   if (manifestLoading && !manifest) {
-    return <div className="text-sm text-neutral-500 text-center py-8">Loading snapshots...</div>
+    return <div className="text-md text-neutral-500 text-center py-8">Loading snapshots...</div>
   }
 
   return (
@@ -54,9 +54,9 @@ export function SnapshotManager({ sync }: SnapshotManagerProps) {
       <div className="bg-neutral-900 rounded-lg p-4 border border-neutral-700">
         <div className="flex items-center gap-3 mb-3">
           <Plus className="w-5 h-5 text-green-400" />
-          <h4 className="text-sm text-neutral-300 font-medium">Create Snapshot</h4>
+          <h4 className="text-md text-neutral-300 font-medium">Create Snapshot</h4>
         </div>
-        <p className="text-xs text-neutral-600 mb-3">
+        <p className="text-sm text-neutral-600 mb-3">
           Archives the current live state. If components differ from golden, their patch version is auto-bumped.
         </p>
         <div className="flex gap-2">
@@ -85,8 +85,8 @@ export function SnapshotManager({ sync }: SnapshotManagerProps) {
         <div className="flex items-center justify-between px-4 py-3 border-b border-neutral-700">
           <div className="flex items-center gap-2">
             <Archive className="w-4 h-4 text-neutral-500" />
-            <h4 className="text-sm text-neutral-300 font-medium">Snapshots</h4>
-            <span className="text-xs text-neutral-500">({manifest?.snapshots.length ?? 0})</span>
+            <h4 className="text-md text-neutral-300 font-medium">Snapshots</h4>
+            <span className="text-sm text-neutral-500">({manifest?.snapshots.length ?? 0})</span>
           </div>
           <IconButton
             icon={manifestLoading ? <Loader2 className="animate-spin" /> : <RotateCcw />}
@@ -99,7 +99,7 @@ export function SnapshotManager({ sync }: SnapshotManagerProps) {
         </div>
 
         {!manifest || manifest.snapshots.length === 0 ? (
-          <div className="text-sm text-neutral-500 text-center py-8">No snapshots yet</div>
+          <div className="text-md text-neutral-500 text-center py-8">No snapshots yet</div>
         ) : (
           <div className="divide-y divide-neutral-700">
             {[...manifest.snapshots].reverse().map((snap) => (
@@ -112,9 +112,9 @@ export function SnapshotManager({ sync }: SnapshotManagerProps) {
                 {/* Version + info */}
                 <div className="flex-1 min-w-0">
                   <div className="flex items-center gap-2">
-                    <span className="text-sm font-mono text-neutral-300">v{snap.version}</span>
+                    <span className="text-md font-mono text-neutral-300">v{snap.version}</span>
                     {snap.version === manifest.activeVersion && (
-                      <span className="px-1.5 py-0.5 bg-green-500/20 text-green-400 text-xss rounded font-medium">
+                      <span className="px-1.5 py-0.5 bg-green-500/20 text-green-400 text-xs rounded font-medium">
                         active
                       </span>
                     )}
@@ -122,13 +122,13 @@ export function SnapshotManager({ sync }: SnapshotManagerProps) {
                       <Pin className="w-3 h-3 text-amber-400" />
                     )}
                     {snap.metaVersion && (
-                      <span className="text-xs text-neutral-600 font-mono">{snap.metaVersion}</span>
+                      <span className="text-sm text-neutral-600 font-mono">{snap.metaVersion}</span>
                     )}
                   </div>
                   <div className="flex items-center gap-2 mt-0.5">
-                    <span className="text-xs text-neutral-600">{formatDate(snap.createdAt)}</span>
+                    <span className="text-sm text-neutral-600">{formatDate(snap.createdAt)}</span>
                     {snap.description && (
-                      <span className="text-xs text-neutral-500 truncate">{snap.description}</span>
+                      <span className="text-sm text-neutral-500 truncate">{snap.description}</span>
                     )}
                   </div>
                 </div>

package/components/sections/golden-snapshots/status-overview.tsx

@@ -26,7 +26,7 @@ function getComponentVersion(meta: GoldenMeta | undefined, component: string): s
 function renderVersionBadge(meta: GoldenMeta | undefined, color: string) {
   if (!meta) return null
   return (
-    <span className={`px-2 py-0.5 ${color} text-xs rounded font-mono`}>
+    <span className={`px-2 py-0.5 ${color} text-sm rounded font-mono`}>
       {meta.version}
     </span>
   )
@@ -35,7 +35,7 @@ function renderVersionBadge(meta: GoldenMeta | undefined, color: string) {
 function VersionStatus({ exists, version, mismatch, defaultColor = 'text-green-400/70' }: { exists: boolean; version?: string; mismatch: boolean; defaultColor?: string }) {
   if (!exists) return <span className="text-red-400">Missing</span>
   if (!version) return <span className="text-green-400">Found</span>
-  return <span className={`text-xs font-mono ${mismatch ? 'text-yellow-400' : defaultColor}`}>v{version}</span>
+  return <span className={`text-sm font-mono ${mismatch ? 'text-yellow-400' : defaultColor}`}>v{version}</span>
 }
 
 function SyncStatusBanner({ goldenMeta, liveMeta, components }: { goldenMeta: GoldenMeta; liveMeta: GoldenMeta; components: string[] }) {
@@ -48,12 +48,12 @@ function SyncStatusBanner({ goldenMeta, liveMeta, components }: { goldenMeta: Go
   return mismatches === 0 ? (
     <div className="flex items-center gap-2 px-3 py-2 rounded-lg bg-green-500/5 border border-green-500/20">
       <Check className="w-4 h-4 text-green-400" />
-      <span className="text-sm text-green-400">Golden and Live versions are in sync</span>
+      <span className="text-md text-green-400">Golden and Live versions are in sync</span>
     </div>
   ) : (
     <div className="flex items-center gap-2 px-3 py-2 rounded-lg bg-yellow-500/5 border border-yellow-500/20">
       <AlertTriangle className="w-4 h-4 text-yellow-400" />
-      <span className="text-sm text-yellow-400">Version mismatch — {mismatches} component{mismatches > 1 ? 's' : ''} differ</span>
+      <span className="text-md text-yellow-400">Version mismatch — {mismatches} component{mismatches > 1 ? 's' : ''} differ</span>
     </div>
   )
 }
@@ -84,10 +84,10 @@ export function StatusOverview({
       <div className="bg-neutral-900 rounded-lg p-4 border border-amber-500/30">
         <div className="flex items-center gap-3 mb-3">
           <Archive className="w-5 h-5 text-amber-400" />
-          <h3 className="text-sm text-neutral-300 font-medium">Bundled Seed (App Distribution)</h3>
+          <h3 className="text-md text-neutral-300 font-medium">Bundled Seed (App Distribution)</h3>
           {status?.seed.meta && renderVersionBadge(status.seed.meta, 'bg-amber-500/20 text-amber-400')}
         </div>
-        <div className="grid grid-cols-2 gap-4 text-sm">
+        <div className="grid grid-cols-2 gap-4 text-md">
           <div>
             <p className="text-neutral-500">Status</p>
             <p className={status?.seed.exists ? 'text-green-400' : 'text-red-400'}>
@@ -104,7 +104,7 @@ export function StatusOverview({
           </div>
         </div>
         {!devtools && (
-          <p className="text-xs text-neutral-600 mt-3">
+          <p className="text-sm text-neutral-600 mt-3">
             A compressed archive shipped with every release containing default configuration and templates. On first launch, the seed is extracted to initialize your local files.
           </p>
         )}
@@ -121,10 +121,10 @@ export function StatusOverview({
         <div className="bg-neutral-900 rounded-lg p-4 border border-blue-500/30">
           <div className="flex items-center gap-2 mb-3">
             <div className="w-3 h-3 rounded-full bg-blue-400" />
-            <h4 className="text-sm text-neutral-300 font-medium">Golden (Reference)</h4>
+            <h4 className="text-md text-neutral-300 font-medium">Golden (Reference)</h4>
             {renderVersionBadge(status?.goldenMeta, 'bg-blue-500/20 text-blue-400')}
           </div>
-          <div className="space-y-2 text-sm">
+          <div className="space-y-2 text-md">
             {components.map((comp) => {
               const version = getComponentVersion(status?.goldenMeta, comp)
               const dirKey = `${comp}Golden`
@@ -143,7 +143,7 @@ export function StatusOverview({
             })}
           </div>
           {!devtools && (
-            <p className="text-xs text-neutral-600 mt-3">
+            <p className="text-sm text-neutral-600 mt-3">
               Reference copy extracted from the bundled seed. Always overwritten during app updates to match the latest release. Do not edit directly.
             </p>
           )}
@@ -153,7 +153,7 @@ export function StatusOverview({
         <div className="bg-neutral-900 rounded-lg p-4 border border-green-500/30">
           <div className="flex items-center gap-2 mb-3">
             <div className="w-3 h-3 rounded-full bg-green-400" />
-            <h4 className="text-sm text-neutral-300 font-medium">Live (Working Copy)</h4>
+            <h4 className="text-md text-neutral-300 font-medium">Live (Working Copy)</h4>
             {renderVersionBadge(status?.liveMeta, 'bg-green-500/20 text-green-400')}
             <div className="ml-auto relative" ref={resetMenuRef}>
               <IconButton
@@ -168,7 +168,7 @@ export function StatusOverview({
                 <div ref={resetMenuDropdownRef} className="absolute right-0 top-full mt-1 w-56 bg-neutral-850 border border-neutral-700 rounded-lg shadow-xl z-50 py-1 overflow-hidden">
                   <button
                     onClick={() => { onResetAll(); setShowResetMenu(false) }}
-                    className="w-full text-left px-3 py-2 text-sm text-neutral-300 hover:bg-neutral-700 transition-colors"
+                    className="w-full text-left px-3 py-2 text-md text-neutral-300 hover:bg-neutral-700 transition-colors"
                   >
                     Reset All to Golden
                   </button>
@@ -177,7 +177,7 @@ export function StatusOverview({
                     <button
                       key={comp}
                       onClick={() => { onResetComponent(comp); setShowResetMenu(false) }}
-                      className="w-full text-left px-3 py-2 text-sm text-neutral-400 hover:bg-neutral-700 transition-colors"
+                      className="w-full text-left px-3 py-2 text-md text-neutral-400 hover:bg-neutral-700 transition-colors"
                     >
                       Reset {getLabel(comp)}
                     </button>
@@ -186,7 +186,7 @@ export function StatusOverview({
               )}
             </div>
           </div>
-          <div className="space-y-2 text-sm">
+          <div className="space-y-2 text-md">
             {components.map((comp) => {
               const liveV = getComponentVersion(status?.liveMeta, comp)
               const goldenV = getComponentVersion(status?.goldenMeta, comp)
@@ -212,7 +212,7 @@ export function StatusOverview({
             })}
           </div>
           {!devtools && (
-            <p className="text-xs text-neutral-600 mt-3">
+            <p className="text-sm text-neutral-600 mt-3">
               Your active working copy — what the app uses at runtime. Customizations are made here and preserved across app updates.
             </p>
           )}
@@ -222,10 +222,10 @@ export function StatusOverview({
       {/* Update Flow — settings only */}
       {!devtools && (
         <div className="bg-neutral-900/50 border border-neutral-700 rounded-lg p-4">
-          <p className="text-xs font-medium text-neutral-400 mb-4">
+          <p className="text-sm font-medium text-neutral-400 mb-4">
             How updates work <span className="font-normal text-neutral-600">— checked per component ({components.map(getLabel).join(', ')})</span>
           </p>
-          <div className="grid grid-cols-[auto_auto_auto_auto_auto_auto_auto] items-center gap-x-2 text-xs">
+          <div className="grid grid-cols-[auto_auto_auto_auto_auto_auto_auto] items-center gap-x-2 text-sm">
             {/* Row 1: top branch outcome */}
             <span /><span /><span /><span /><span />
             <span className="text-neutral-600 text-base justify-self-center self-end mb-[-4px]">↗</span>
@@ -279,7 +279,7 @@ export function StatusOverview({
               <span className="text-neutral-600 mt-0.5">has changes</span>
             </div>
           </div>
-          <p className="text-xs text-neutral-600 mt-3">
+          <p className="text-sm text-neutral-600 mt-3">
             When a component has no local changes, it is automatically updated to match the new golden version. Components with customizations are left untouched to preserve your edits — use the File Diff tab to review differences and selectively apply changes. You can reset any component to its golden version at any time using the reset buttons above.
           </p>
         </div>
@@ -290,9 +290,9 @@ export function StatusOverview({
         <div className="bg-neutral-900 rounded-lg p-4 border border-neutral-700">
           <div className="flex items-center gap-2 mb-3">
             <Archive className="w-4 h-4 text-neutral-500" />
-            <h4 className="text-sm text-neutral-300 font-medium">Local Snapshots</h4>
+            <h4 className="text-md text-neutral-300 font-medium">Local Snapshots</h4>
           </div>
-          <div className="flex gap-6 text-sm">
+          <div className="flex gap-6 text-md">
             <div>
               <span className="text-neutral-500">Count: </span>
               <span className="text-neutral-300">{manifest.snapshots.length}</span>

package/components/sections/golden-snapshots/version-manager.tsx

@@ -56,14 +56,14 @@ export function VersionManager({ sync, components, componentLabels }: VersionMan
       <div className="bg-neutral-900 rounded-lg p-4 border border-teal-500/30">
         <div className="flex items-center gap-3 mb-3">
           <Tag className="w-5 h-5 text-teal-400" />
-          <h4 className="text-sm text-neutral-300 font-medium">Golden Version</h4>
+          <h4 className="text-md text-neutral-300 font-medium">Golden Version</h4>
           {status?.goldenMeta && (
-            <span className="px-2 py-0.5 bg-teal-500/20 text-teal-400 text-xs rounded font-mono">
+            <span className="px-2 py-0.5 bg-teal-500/20 text-teal-400 text-sm rounded font-mono">
               {status.goldenMeta.version}
             </span>
           )}
         </div>
-        <p className="text-xs text-neutral-600 mb-3">
+        <p className="text-sm text-neutral-600 mb-3">
           Bump the overall golden version number. This updates the top-level version in meta.json.
         </p>
         <div className="flex gap-2">
@@ -100,8 +100,8 @@ export function VersionManager({ sync, components, componentLabels }: VersionMan
       {/* Component Versions */}
       <div className="bg-neutral-900 rounded-lg border border-neutral-700 overflow-hidden">
         <div className="px-4 py-3 border-b border-neutral-700">
-          <h4 className="text-sm text-neutral-300 font-medium">Component Versions</h4>
-          <p className="text-xs text-neutral-600 mt-1">
+          <h4 className="text-md text-neutral-300 font-medium">Component Versions</h4>
+          <p className="text-sm text-neutral-600 mt-1">
             Update individual component versions. Click a component to edit.
           </p>
         </div>
@@ -117,12 +117,12 @@ export function VersionManager({ sync, components, componentLabels }: VersionMan
               <div key={comp} className="px-4 py-3">
                 <div className="flex items-center justify-between">
                   <div className="flex items-center gap-2">
-                    <span className="text-sm text-neutral-300">{getLabel(comp)}</span>
+                    <span className="text-md text-neutral-300">{getLabel(comp)}</span>
                     {currentVersion && (
-                      <span className="text-xs font-mono text-neutral-500">v{currentVersion}</span>
+                      <span className="text-sm font-mono text-neutral-500">v{currentVersion}</span>
                     )}
                     {mismatch && (
-                      <span className="text-xss text-yellow-400">
+                      <span className="text-xs text-yellow-400">
                         (live: v{liveVersion})
                       </span>
                     )}