@toolr/ui-design 0.1.4 → 0.1.6

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>
                     )}

package/components/sections/prompt-editor/file-type-tabbed-prompt-editor.tsx

@@ -145,8 +145,8 @@ export function FileTypeTabbedPromptEditor({
           <div className="flex items-center gap-2">
             <Crosshair className="w-4 h-4 text-neutral-500 shrink-0" />
             <div className="min-w-0">
-              <div className="text-xs font-medium text-neutral-400">{selectorLabel}</div>
-              <div className="text-xs text-neutral-600">{selectorSublabel}</div>
+              <div className="text-sm font-medium text-neutral-400">{selectorLabel}</div>
+              <div className="text-sm text-neutral-600">{selectorSublabel}</div>
             </div>
           </div>
         </div>
@@ -169,11 +169,11 @@ export function FileTypeTabbedPromptEditor({
                   {ft.icon ?? <FileCode className="w-4 h-4" />}
                 </div>
                 <div className="min-w-0 flex-1">
-                  <div className={`text-sm font-medium truncate ${isSelected ? 'text-neutral-300' : 'text-neutral-400'}`}>
+                  <div className={`text-md font-medium truncate ${isSelected ? 'text-neutral-300' : 'text-neutral-400'}`}>
                     {ft.name}
                   </div>
                   {ft.description && (
-                    <div className="text-xs text-neutral-500 mt-0.5 leading-relaxed">
+                    <div className="text-sm text-neutral-500 mt-0.5 leading-relaxed">
                       {ft.description}
                     </div>
                   )}

package/components/sections/prompt-editor/simulator-prompt-editor.tsx

@@ -178,8 +178,8 @@ export function SimulatorPromptEditor({
           <div className="flex items-center gap-2">
             <Crosshair className="w-4 h-4 text-neutral-500 shrink-0" />
             <div className="min-w-0">
-              <div className="text-xs font-medium text-neutral-400">Scenario</div>
-              <div className="text-xs text-neutral-600">Select scenario and step</div>
+              <div className="text-sm font-medium text-neutral-400">Scenario</div>
+              <div className="text-sm text-neutral-600">Select scenario and step</div>
             </div>
           </div>
         </div>
@@ -207,11 +207,11 @@ export function SimulatorPromptEditor({
                     )}
                   </div>
                   <div className="min-w-0 flex-1">
-                    <div className={`text-sm font-medium ${isScenarioActive ? 'text-neutral-300' : 'text-neutral-400'}`}>
+                    <div className={`text-md font-medium ${isScenarioActive ? 'text-neutral-300' : 'text-neutral-400'}`}>
                       {scenario.name}
                     </div>
                     {scenario.description && (
-                      <div className="text-xs text-neutral-500 mt-0.5 leading-relaxed">
+                      <div className="text-sm text-neutral-500 mt-0.5 leading-relaxed">
                         {scenario.description}
                       </div>
                     )}
@@ -236,7 +236,7 @@ export function SimulatorPromptEditor({
                           <div className={`w-1.5 h-1.5 rounded-full flex-shrink-0 ${
                             isStepSelected ? 'bg-blue-400' : 'bg-neutral-600'
                           }`} />
-                          <span className={`text-xs ${isStepSelected ? 'text-neutral-300' : 'text-neutral-400'}`}>
+                          <span className={`text-sm ${isStepSelected ? 'text-neutral-300' : 'text-neutral-400'}`}>
                             {step.name}
                           </span>
                         </button>

package/components/sections/prompt-editor/tabbed-prompt-editor.tsx

@@ -204,10 +204,10 @@ export function TabbedPromptEditor({
         style.id = styleId
         style.textContent = `
           .template-variable-highlight {
-            background-color: rgba(180, 190, 254, 0.2);
-            border: 1px solid rgba(180, 190, 254, 0.4);
+            background-color: rgba(129, 140, 248, 0.2);
+            border: 1px solid rgba(129, 140, 248, 0.4);
             border-radius: 3px;
-            color: #b4befe !important;
+            color: rgb(129, 140, 248) !important;
             font-weight: 500;
           }
         `
@@ -350,7 +350,7 @@ export function TabbedPromptEditor({
               <button
                 key={tool.id}
                 onClick={() => setActiveTab(tool.id)}
-                className={`flex-1 flex items-center justify-center gap-1.5 px-2 text-xs font-medium border-b-2 transition-colors ${
+                className={`flex-1 flex items-center justify-center gap-1.5 px-2 text-sm font-medium border-b-2 transition-colors ${
                   isActive
                     ? `border-current ${activeColor} bg-neutral-850`
                     : 'border-neutral-700 text-neutral-500 hover:text-neutral-400 hover:bg-neutral-850/50'
@@ -368,7 +368,7 @@ export function TabbedPromptEditor({
         {checklistMissing && (
           <div className="flex items-start gap-2 px-3 py-2 bg-red-400/10 border-b border-red-400/30 shrink-0">
             <AlertTriangle className="w-4 h-4 text-red-400 shrink-0 mt-0.5" />
-            <div className="text-xs text-red-400">
+            <div className="text-sm text-red-400">
               <span className="font-medium">Missing "# Verification Checklist" section.</span>
               {' '}When verification is enabled, only content under this heading will be sent to the AI for output validation.
             </div>
@@ -444,11 +444,11 @@ export function TabbedPromptEditor({
             <div className="flex items-center gap-2">
               <Variable className="w-4 h-4 text-neutral-500 shrink-0" />
               <div className="min-w-0">
-                <div className="text-xs font-medium text-neutral-400">Placeholders</div>
-                <div className="text-xs text-neutral-600 truncate">Available placeholders</div>
+                <div className="text-sm font-medium text-neutral-400">Placeholders</div>
+                <div className="text-sm text-neutral-600 truncate">Available placeholders</div>
               </div>
             </div>
-            <span className="px-1.5 py-0.5 bg-violet-400/20 text-violet-400 rounded text-xs">
+            <span className="px-1.5 py-0.5 bg-violet-400/20 text-violet-400 rounded text-sm">
               {variableSearch.trim() ? `${filteredVariables.length}/${variables!.length}` : variables!.length}
             </span>
           </div>
@@ -479,7 +479,7 @@ export function TabbedPromptEditor({
 
           {/* Autocomplete tip */}
           <div className="px-3 py-2 border-b border-neutral-700 shrink-0">
-            <div className="flex items-center gap-1.5 text-xs text-neutral-500">
+            <div className="flex items-center gap-1.5 text-sm text-neutral-500">
               <Info className="w-3 h-3 flex-shrink-0" />
               <span>Type <code className="text-violet-400">{'{{'}</code> in editor for autocomplete</span>
             </div>
@@ -502,7 +502,7 @@ export function TabbedPromptEditor({
                 </div>
               ))
             ) : variableSearch.trim() ? (
-              <div className="text-center py-4 text-xs text-neutral-500">
+              <div className="text-center py-4 text-sm text-neutral-500">
                 No placeholders match "{variableSearch}"
               </div>
             ) : null}