@toolr/ui-design 0.1.5 → 0.1.7

package/components/ui/breadcrumb.tsx

@@ -1,53 +1,10 @@
 /** Breadcrumb navigation with clickable segments, color-coded icons, and configurable separators. */
 
-import {
-  ChevronRight,
-  Settings, Folder, File, Code, Terminal, Database,
-  Globe, Star, Users, User, Tag, Search, Heart,
-  Zap, Shield, ShieldCheck, Sparkles, Eye, Lock,
-  Cloud, Wand2, Bell, Bookmark, Pin, Mail, Send,
-  Image, Bot, Puzzle, Plug, Webhook, House, Package,
-} from 'lucide-react'
-import type { LucideIcon } from 'lucide-react'
-import type { IconName } from './icon-button.tsx'
+import { ChevronRight } from 'lucide-react'
+import { iconMap, type IconName } from './icon-button.tsx'
+import { ACCENT_NAV, type AccentColor } from '../lib/form-colors.ts'
 import { cn } from '../lib/cn.ts'
 
-const iconSubset: Partial<Record<IconName, LucideIcon>> = {
-  folder: Folder,
-  file: File,
-  settings: Settings,
-  code: Code,
-  terminal: Terminal,
-  database: Database,
-  globe: Globe,
-  star: Star,
-  users: Users,
-  user: User,
-  tag: Tag,
-  zap: Zap,
-  shield: Shield,
-  'shield-check': ShieldCheck,
-  sparkles: Sparkles,
-  eye: Eye,
-  lock: Lock,
-  search: Search,
-  heart: Heart,
-  cloud: Cloud,
-  wand: Wand2,
-  bell: Bell,
-  bookmark: Bookmark,
-  pin: Pin,
-  mail: Mail,
-  send: Send,
-  image: Image,
-  bot: Bot,
-  puzzle: Puzzle,
-  plug: Plug,
-  webhook: Webhook,
-  home: House,
-  'package': Package,
-}
-
 export interface BreadcrumbSegment {
   id: string
   label: string
@@ -67,35 +24,18 @@ export interface BreadcrumbProps {
 
 const sizeConfig = {
   xss: { text: 'text-xss', icon: 'w-2.5 h-2.5', px: 'px-1', py: 'py-0.5', gap: 'gap-0.5', sep: 'w-2 h-2' },
-  xs: { text: 'text-xs', icon: 'w-3 h-3', px: 'px-1.5', py: 'py-0.5', gap: 'gap-1', sep: 'w-2.5 h-2.5' },
-  sm: { text: 'text-sm', icon: 'w-3.5 h-3.5', px: 'px-2', py: 'py-1', gap: 'gap-1.5', sep: 'w-3 h-3' },
+  xs: { text: 'text-sm', icon: 'w-3 h-3', px: 'px-1.5', py: 'py-0.5', gap: 'gap-1', sep: 'w-2.5 h-2.5' },
+  sm: { text: 'text-md', icon: 'w-3.5 h-3.5', px: 'px-2', py: 'py-1', gap: 'gap-1.5', sep: 'w-3 h-3' },
   md: { text: 'text-base', icon: 'w-4 h-4', px: 'px-2.5', py: 'py-1', gap: 'gap-1.5', sep: 'w-3.5 h-3.5' },
   lg: { text: 'text-lg', icon: 'w-5 h-5', px: 'px-3', py: 'py-1.5', gap: 'gap-2', sep: 'w-4 h-4' },
 }
 
-const colorMap: Record<string, { bg: string; text: string }> = {
-  blue: { bg: 'bg-blue-500/10', text: 'text-blue-400' },
-  green: { bg: 'bg-green-500/10', text: 'text-green-400' },
-  purple: { bg: 'bg-purple-500/10', text: 'text-purple-400' },
-  red: { bg: 'bg-red-500/10', text: 'text-red-400' },
-  orange: { bg: 'bg-orange-500/10', text: 'text-orange-400' },
-  cyan: { bg: 'bg-cyan-500/10', text: 'text-cyan-400' },
-  yellow: { bg: 'bg-yellow-500/10', text: 'text-yellow-400' },
-  amber: { bg: 'bg-amber-500/10', text: 'text-amber-400' },
-  emerald: { bg: 'bg-emerald-500/10', text: 'text-emerald-400' },
-  indigo: { bg: 'bg-indigo-500/10', text: 'text-indigo-400' },
-  violet: { bg: 'bg-violet-500/10', text: 'text-violet-400' },
-  sky: { bg: 'bg-sky-500/10', text: 'text-sky-400' },
-  pink: { bg: 'bg-pink-500/10', text: 'text-pink-400' },
-  teal: { bg: 'bg-teal-500/10', text: 'text-teal-400' },
-  neutral: { bg: 'bg-neutral-500/10', text: 'text-neutral-400' },
-}
 
 function SegmentIcon({ icon, color, size }: { icon: IconName; color?: string; size: 'xss' | 'xs' | 'sm' | 'md' | 'lg' }) {
-  const Icon = iconSubset[icon]
+  const Icon = iconMap[icon]
   if (!Icon) return null
   const s = sizeConfig[size]
-  const c = color && colorMap[color] ? colorMap[color] : null
+  const c = color && ACCENT_NAV[color as AccentColor] ? ACCENT_NAV[color as AccentColor] : null
 
   return (
     <span className={c?.text || ''}>
@@ -135,7 +75,7 @@ export function Breadcrumb({
         {segments.map((segment, index) => {
           const isLast = index === segments.length - 1
           const isClickable = !isLast && !!segment.onClick
-          const colors = segment.color && colorMap[segment.color] ? colorMap[segment.color] : null
+          const colors = segment.color && ACCENT_NAV[segment.color as AccentColor] ? ACCENT_NAV[segment.color as AccentColor] : null
           const isFirstPlain = !isBox && index === 0
 
           return (

package/components/ui/checkbox.tsx

@@ -8,25 +8,11 @@
  */
 
 import { Check } from 'lucide-react'
+import { type AccentColor } from '../lib/form-colors.ts'
 
 export type CheckboxSize = 'xss' | 'xs' | 'sm' | 'md' | 'lg'
 
-export type CheckboxColor =
-  | 'blue'
-  | 'green'
-  | 'red'
-  | 'orange'
-  | 'cyan'
-  | 'yellow'
-  | 'purple'
-  | 'indigo'
-  | 'emerald'
-  | 'amber'
-  | 'violet'
-  | 'neutral'
-  | 'sky'
-  | 'pink'
-  | 'teal'
+export type CheckboxColor = AccentColor
 
 const CHECKBOX_COLORS: Record<CheckboxColor, { bg: string; border: string; icon: string; hover: string }> = {
   blue: { bg: 'bg-blue-500/20', border: 'border-blue-500/40', icon: 'text-blue-300', hover: 'hover:bg-blue-500/15 hover:border-blue-500/30' },

package/components/ui/collapsible-section.tsx

@@ -1,47 +1,9 @@
 import { useState } from 'react'
-import {
-  ChevronRight, Settings, Folder, Code, Terminal, Database,
-  Star, Heart, Bell, Bookmark, Tag, Pin, Mail, Globe, Cloud,
-  Shield, Zap, Sparkles, Search, Filter, Eye, Lock, User, Users,
-  File, Image, Download, Upload, Play, Pause,
-} from 'lucide-react'
-import type { LucideIcon } from 'lucide-react'
-import type { IconName } from './icon-button.tsx'
+import { ChevronRight } from 'lucide-react'
+import { iconMap, type IconName } from './icon-button.tsx'
 import { Badge, type BadgeColor } from './badge.tsx'
 import { cn } from '../lib/cn.ts'
 
-const iconSubset: Partial<Record<IconName, LucideIcon>> = {
-  settings: Settings,
-  folder: Folder,
-  code: Code,
-  terminal: Terminal,
-  database: Database,
-  star: Star,
-  heart: Heart,
-  bell: Bell,
-  bookmark: Bookmark,
-  tag: Tag,
-  pin: Pin,
-  mail: Mail,
-  globe: Globe,
-  cloud: Cloud,
-  shield: Shield,
-  zap: Zap,
-  sparkles: Sparkles,
-  search: Search,
-  filter: Filter,
-  eye: Eye,
-  lock: Lock,
-  user: User,
-  users: Users,
-  file: File,
-  image: Image,
-  download: Download,
-  upload: Upload,
-  play: Play,
-  pause: Pause,
-}
-
 export interface CollapsibleSectionProps {
   title: string
   icon?: IconName
@@ -64,7 +26,7 @@ export function CollapsibleSection({
   className,
 }: CollapsibleSectionProps) {
   const [open, setOpen] = useState(defaultOpen)
-  const Icon = icon ? iconSubset[icon] : undefined
+  const Icon = icon ? iconMap[icon] : undefined
 
   return (
     <div className={cn('border-b border-neutral-700', className)}>
@@ -87,7 +49,7 @@ export function CollapsibleSection({
             <Icon className="w-3.5 h-3.5" />
           </span>
         )}
-        <span className="text-sm font-medium text-neutral-200">{title}</span>
+        <span className="text-md font-medium text-neutral-200">{title}</span>
         {badge !== undefined && (
           <span className="ml-auto">
             <Badge value={badge} color={badgeColor} size="xss" />

package/components/ui/confirm-badge.tsx

@@ -12,8 +12,9 @@
  */
 
 import { Check } from 'lucide-react'
+import { FORM_COLORS, type AccentColor } from '../lib/form-colors.ts'
 
-export type ConfirmBadgeColor = 'blue' | 'green' | 'red' | 'orange' | 'cyan' | 'yellow' | 'purple' | 'indigo' | 'emerald' | 'amber' | 'violet' | 'neutral' | 'sky' | 'pink' | 'teal'
+export type ConfirmBadgeColor = AccentColor
 
 export interface ConfirmBadgeProps {
   color?: ConfirmBadgeColor
@@ -22,24 +23,6 @@ export interface ConfirmBadgeProps {
   testId?: string
 }
 
-const colorClasses: Record<ConfirmBadgeColor, string> = {
-  green: 'border-green-500/30 text-green-400',
-  red: 'border-red-500/30 text-red-400',
-  blue: 'border-blue-500/30 text-blue-400',
-  orange: 'border-orange-500/30 text-orange-400',
-  cyan: 'border-cyan-500/30 text-cyan-400',
-  yellow: 'border-yellow-500/30 text-yellow-400',
-  purple: 'border-purple-500/30 text-purple-400',
-  indigo: 'border-indigo-500/30 text-indigo-400',
-  emerald: 'border-emerald-500/30 text-emerald-400',
-  amber: 'border-amber-500/30 text-amber-400',
-  violet: 'border-violet-500/30 text-violet-400',
-  neutral: 'border-neutral-500/30 text-neutral-400',
-  sky: 'border-sky-500/30 text-sky-400',
-  pink: 'border-pink-500/30 text-pink-400',
-  teal: 'border-teal-500/30 text-teal-400',
-}
-
 const sizeClasses = {
   xss: 'w-[14px] h-[14px] rounded-full',
   xs: 'w-[16px] h-[16px] rounded-full',
@@ -65,7 +48,7 @@ export function ConfirmBadge({
   return (
     <span
       data-testid={testId}
-      className={`inline-flex items-center justify-center border ${colorClasses[color]} ${sizeClasses[size]} ${className}`}
+      className={`inline-flex items-center justify-center border ${FORM_COLORS[color].border} ${FORM_COLORS[color].accent} ${sizeClasses[size]} ${className}`}
     >
       <Check className={iconSizeClasses[size]} />
     </span>

package/components/ui/cookie-consent.tsx

@@ -16,6 +16,22 @@ export interface CookieConsentProps {
   onConsent?: (choice: ConsentChoice) => void
 }
 
+const ACCENT_BUTTON_CLASSES: Record<string, string> = {
+  cyan: 'bg-cyan-600 border-cyan-500 hover:bg-cyan-500',
+  blue: 'bg-blue-600 border-blue-500 hover:bg-blue-500',
+  green: 'bg-green-600 border-green-500 hover:bg-green-500',
+  purple: 'bg-purple-600 border-purple-500 hover:bg-purple-500',
+  orange: 'bg-orange-600 border-orange-500 hover:bg-orange-500',
+  red: 'bg-red-600 border-red-500 hover:bg-red-500',
+  amber: 'bg-amber-600 border-amber-500 hover:bg-amber-500',
+  emerald: 'bg-emerald-600 border-emerald-500 hover:bg-emerald-500',
+  indigo: 'bg-indigo-600 border-indigo-500 hover:bg-indigo-500',
+  pink: 'bg-pink-600 border-pink-500 hover:bg-pink-500',
+  teal: 'bg-teal-600 border-teal-500 hover:bg-teal-500',
+  violet: 'bg-violet-600 border-violet-500 hover:bg-violet-500',
+  sky: 'bg-sky-600 border-sky-500 hover:bg-sky-500',
+}
+
 export function CookieConsent({
   storageKey,
   accentColor = 'cyan',
@@ -42,26 +58,26 @@ export function CookieConsent({
     <div className="fixed bottom-0 left-0 right-0 z-50 p-4 bg-neutral-900/95 backdrop-blur-sm border-t border-neutral-700/50">
       <div className="max-w-6xl mx-auto flex flex-col sm:flex-row items-start sm:items-center gap-4">
         <div className="flex-grow">
-          <p className="text-sm text-neutral-200 mb-1">{heading}</p>
-          <p className="text-xs text-neutral-400">{description}</p>
+          <p className="text-md text-neutral-200 mb-1">{heading}</p>
+          <p className="text-sm text-neutral-400">{description}</p>
         </div>
 
         <div className="flex items-center gap-2 flex-shrink-0">
           <button
             onClick={() => handleConsent('declined')}
-            className="px-3 py-1.5 text-sm h-[26px] inline-flex items-center justify-center font-medium rounded-md cursor-pointer text-neutral-400 border border-transparent hover:text-neutral-200 hover:border-neutral-600 hover:bg-neutral-800 transition-colors"
+            className="px-3 py-1.5 text-md h-[26px] inline-flex items-center justify-center font-medium rounded-md cursor-pointer text-neutral-400 border border-transparent hover:text-neutral-200 hover:border-neutral-600 hover:bg-neutral-800 transition-colors"
           >
             Decline
           </button>
           <button
             onClick={() => handleConsent('essential')}
-            className="px-3 py-1.5 text-sm h-[26px] inline-flex items-center justify-center font-medium rounded-md cursor-pointer text-neutral-400 border border-transparent hover:text-neutral-200 hover:border-neutral-600 hover:bg-neutral-800 transition-colors"
+            className="px-3 py-1.5 text-md h-[26px] inline-flex items-center justify-center font-medium rounded-md cursor-pointer text-neutral-400 border border-transparent hover:text-neutral-200 hover:border-neutral-600 hover:bg-neutral-800 transition-colors"
           >
             Essential Only
           </button>
           <button
             onClick={() => handleConsent('accepted')}
-            className={`px-3 py-1.5 text-sm h-[26px] inline-flex items-center justify-center font-medium rounded-md cursor-pointer text-white border transition-colors bg-${accentColor}-600 border-${accentColor}-500 hover:bg-${accentColor}-500`}
+            className={`px-3 py-1.5 text-md h-[26px] inline-flex items-center justify-center font-medium rounded-md cursor-pointer text-white border transition-colors ${ACCENT_BUTTON_CLASSES[accentColor] ?? ACCENT_BUTTON_CLASSES.cyan}`}
           >
             Accept All
           </button>

package/components/ui/debounce-border-overlay.tsx

@@ -0,0 +1,31 @@
+export interface DebounceBorderOverlayProps {
+  debounceKey: number
+  durationMs: number
+}
+
+export function DebounceBorderOverlay({ debounceKey, durationMs }: DebounceBorderOverlayProps) {
+  if (debounceKey <= 0) return null
+
+  return (
+    <svg
+      key={debounceKey}
+      className="absolute inset-0 pointer-events-none text-emerald-400/70"
+      style={{ width: '100%', height: '100%' }}
+    >
+      <rect
+        x="1" y="1" rx="5" ry="5"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        pathLength="100"
+        strokeDasharray="100"
+        strokeDashoffset="0"
+        style={{
+          width: 'calc(100% - 2px)',
+          height: 'calc(100% - 2px)',
+          animation: `debounce-border-drain ${durationMs}ms linear forwards`,
+        }}
+      />
+    </svg>
+  )
+}

package/components/ui/detail-section.tsx

@@ -7,26 +7,9 @@
  * - Any key-value metadata layout
  */
 
-import {
-  Info, Settings, Code, Shield, Terminal, Database, Globe, Zap,
-  Star, Cloud, Bell, Heart, Sparkles, Bot, Plug, Lock, Eye,
-  File, Folder, User, Users, Tag, Bookmark, Mail, Send, Search,
-  Play, ShieldCheck, Wand2, Copy,
-} from 'lucide-react'
-import type { LucideIcon } from 'lucide-react'
-import type { IconName } from './icon-button.tsx'
+import { iconMap, type IconName } from './icon-button.tsx'
 import { cn } from '../lib/cn.ts'
 
-const iconSubset: Partial<Record<IconName, LucideIcon>> = {
-  info: Info, settings: Settings, code: Code, shield: Shield,
-  terminal: Terminal, database: Database, globe: Globe, zap: Zap,
-  star: Star, cloud: Cloud, bell: Bell, heart: Heart,
-  sparkles: Sparkles, bot: Bot, plug: Plug, lock: Lock, eye: Eye,
-  file: File, folder: Folder, user: User, users: Users, tag: Tag,
-  bookmark: Bookmark, mail: Mail, send: Send, search: Search,
-  play: Play, 'shield-check': ShieldCheck, wand: Wand2, copy: Copy,
-}
-
 export interface DetailRow {
   label: string
   value: string
@@ -44,19 +27,19 @@ export interface DetailSectionProps {
 }
 
 export function DetailSection({ title, icon, rows, className }: DetailSectionProps) {
-  const Icon = icon ? iconSubset[icon] : undefined
+  const Icon = icon ? iconMap[icon] : undefined
 
   return (
     <div className={className}>
       <div className="flex items-center gap-2 mb-3">
         {Icon && <Icon className="w-4 h-4 text-neutral-500" />}
-        <span className="text-sm font-medium text-neutral-400">{title}</span>
+        <span className="text-md font-medium text-neutral-400">{title}</span>
       </div>
       <div className="space-y-2">
         {rows.map((row) => (
           <div key={row.label} className="flex items-start gap-3">
-            <span className="text-xs text-neutral-500 w-24 shrink-0">{row.label}:</span>
-            <span className={cn('text-xs text-neutral-400', row.mono && 'font-mono')}>
+            <span className="text-sm text-neutral-500 w-24 shrink-0">{row.label}:</span>
+            <span className={cn('text-sm text-neutral-400', row.mono && 'font-mono')}>
               {row.value}
             </span>
           </div>

package/components/ui/editor-placeholder-card.tsx

@@ -60,7 +60,8 @@ export function EditorPlaceholderCard({
   className = '',
 }: EditorPlaceholderCardProps) {
   const [isExpanded, setIsExpanded] = useState(false)
-  const [isCopied, setIsCopied] = useState(false)
+  const [isPlaceholderCopied, setIsPlaceholderCopied] = useState(false)
+  const [isValueCopied, setIsValueCopied] = useState(false)
   const [isOverflowing, setIsOverflowing] = useState(false)
   const valueRef = useRef<HTMLDivElement>(null)
 
@@ -78,8 +79,8 @@ export function EditorPlaceholderCard({
   const handleCopyPlaceholder = async () => {
     try {
       await navigator.clipboard.writeText(`{{${name}}}`)
-      setIsCopied(true)
-      setTimeout(() => setIsCopied(false), 1500)
+      setIsPlaceholderCopied(true)
+      setTimeout(() => setIsPlaceholderCopied(false), 1500)
     } catch {
       // Clipboard API not available
     }
@@ -89,8 +90,8 @@ export function EditorPlaceholderCard({
     if (!value) return
     try {
       await navigator.clipboard.writeText(value)
-      setIsCopied(true)
-      setTimeout(() => setIsCopied(false), 1500)
+      setIsValueCopied(true)
+      setTimeout(() => setIsValueCopied(false), 1500)
     } catch {
       // Clipboard API not available
     }
@@ -102,37 +103,37 @@ export function EditorPlaceholderCard({
       <div className="flex items-start justify-between gap-2">
         <div className="flex-1 min-w-0">
           {/* Placeholder name with {{ }} */}
-          <code className={`text-xs font-mono px-1.5 py-0.5 rounded ${colors.name} ${colors.nameBg}`}>
+          <code className={`text-sm font-mono px-1.5 py-0.5 rounded ${colors.name} ${colors.nameBg}`}>
             {'{{' + name + '}}'}
           </code>
           {/* Required badge */}
           {required && (
-            <span className="ml-2 inline-block px-1.5 py-0.5 text-xs font-semibold uppercase bg-red-500/15 text-red-400 border border-red-500/30 rounded">
+            <span className="ml-2 inline-block px-1.5 py-0.5 text-sm font-semibold uppercase bg-red-500/15 text-red-400 border border-red-500/30 rounded">
               Required
             </span>
           )}
           {/* Description */}
-          <p className="text-xs text-neutral-500 mt-1.5 line-clamp-2">{description}</p>
+          <p className="text-sm text-neutral-500 mt-1.5 line-clamp-2">{description}</p>
         </div>
 
         {/* Actions (copy for templates, edit/delete for settings) */}
         <div className="flex items-center gap-1 shrink-0">
           {showCopyPlaceholder && (
             <IconButton
-              icon={isCopied ? 'check' : 'copy'}
+              icon={isPlaceholderCopied ? 'check' : 'copy'}
               onClick={handleCopyPlaceholder}
               size="sm"
-              color={isCopied ? 'green' : 'neutral'}
+              color={isPlaceholderCopied ? 'green' : 'neutral'}
               tooltip={{ description: `Copy {{${name}}}` }}
               tooltipPosition="left"
             />
           )}
           {showCopyValue && hasValue && (
             <IconButton
-              icon={isCopied ? 'check' : 'copy'}
+              icon={isValueCopied ? 'check' : 'copy'}
               onClick={handleCopyValue}
               size="sm"
-              color={isCopied ? 'green' : 'neutral'}
+              color={isValueCopied ? 'green' : 'neutral'}
               tooltip={{ description: 'Copy value to clipboard' }}
               tooltipPosition="left"
             />
@@ -146,7 +147,7 @@ export function EditorPlaceholderCard({
         <div className="mt-2">
           {hideValue ? (
             <>
-              <span className="text-xs text-neutral-500 font-medium">{valueLabel}</span>
+              <span className="text-sm text-neutral-500 font-medium">{valueLabel}</span>
               <div className="mt-1.5">
                 <Input
                   type="password"
@@ -163,7 +164,7 @@ export function EditorPlaceholderCard({
           ) : (
             <>
               <div className="flex items-center justify-between">
-                <span className="text-xs text-neutral-500 font-medium">{valueLabel}</span>
+                <span className="text-sm text-neutral-500 font-medium">{valueLabel}</span>
                 {(isOverflowing || isExpanded) && (
                   <IconButton
                     icon={isExpanded ? 'chevron-up' : 'chevron-down'}
@@ -175,7 +176,7 @@ export function EditorPlaceholderCard({
               </div>
               <div
                 ref={valueRef}
-                className={`mt-1.5 px-2 py-1.5 bg-neutral-800/50 rounded text-xs text-neutral-400 font-mono ${
+                className={`mt-1.5 px-2 py-1.5 bg-neutral-800/50 rounded text-sm text-neutral-400 font-mono ${
                   isExpanded
                     ? 'whitespace-pre-wrap break-all max-h-[190px] overflow-y-auto'
                     : 'truncate'
@@ -190,7 +191,7 @@ export function EditorPlaceholderCard({
 
       {/* No value hint */}
       {!hasValue && (
-        <p className="mt-1.5 text-xs text-neutral-600 italic">No value set - add one in Settings</p>
+        <p className="mt-1.5 text-sm text-neutral-600 italic">No value set - add one in Settings</p>
       )}
     </div>
   )

package/components/ui/editor-toolbar.tsx

@@ -4,6 +4,10 @@ import { Label } from './label.tsx'
 import { ConfirmModal } from './modal.tsx'
 
 export interface EditorToolbarProps {
+  /** Optional title displayed in the toolbar */
+  title?: string
+  /** Optional description displayed below the title */
+  description?: string
   /** Whether content has unsaved changes */
   isDirty: boolean
   /** Whether save operation is in progress */
@@ -30,6 +34,8 @@ export interface EditorToolbarProps {
 }
 
 export function EditorToolbar({
+  title,
+  description,
   isDirty,
   isSaving = false,
   onSave,
@@ -66,6 +72,12 @@ export function EditorToolbar({
       <div className="flex items-center justify-between px-4 py-1.5 bg-neutral-900 border-b border-neutral-800">
         {/* Left side */}
         <div className="flex items-center gap-2">
+          {(title || description) && (
+            <div className="flex flex-col mr-2">
+              {title && <span className="text-sm font-medium text-neutral-200">{title}</span>}
+              {description && <span className="text-xs text-neutral-500">{description}</span>}
+            </div>
+          )}
           {leftActions?.map((a, i) => <IconButton key={i} {...a} />)}
         </div>
 

package/components/ui/execution-details-panel.tsx

@@ -9,15 +9,10 @@
 import { AlertTriangle, Info } from 'lucide-react'
 import { Checkbox } from './checkbox.tsx'
 import { cn } from '../lib/cn.ts'
-
-export interface ExecutionDetailRow {
-  label: string
-  value: string
-  mono?: boolean
-}
+import type { DetailRow } from './detail-section.tsx'
 
 export interface ExecutionDetailsPanelProps {
-  details: ExecutionDetailRow[]
+  details: DetailRow[]
   /** Show the "Allow direct edits" toggle */
   allowDirectEdits?: boolean
   onAllowDirectEditsChange?: (value: boolean) => void
@@ -40,7 +35,7 @@ export function ExecutionDetailsPanel({
       {/* Header */}
       <div className="flex items-center gap-2">
         <Info className="w-4 h-4 text-neutral-500" />
-        <span className="font-medium text-neutral-400 text-sm">Execution Details</span>
+        <span className="font-medium text-neutral-400 text-md">Execution Details</span>
       </div>
 
       {/* Direct edits toggle */}
@@ -57,8 +52,8 @@ export function ExecutionDetailsPanel({
             />
           </div>
           <div>
-            <span className="text-neutral-300 text-sm">Allow direct file edits</span>
-            <p className="text-neutral-500 text-xs mt-0.5">
+            <span className="text-neutral-300 text-md">Allow direct file edits</span>
+            <p className="text-neutral-500 text-sm mt-0.5">
               {allowDirectEdits
                 ? 'AI will modify files directly. Changes saved immediately.'
                 : 'Changes will be shown in editor for review.'}
@@ -72,7 +67,7 @@ export function ExecutionDetailsPanel({
         <div className="rounded border border-red-500/50 bg-red-500/10 p-2">
           <div className="flex items-start gap-2">
             <AlertTriangle className="h-4 w-4 text-red-400 shrink-0 mt-0.5" />
-            <p className="text-red-300 text-xs">{warningMessage}</p>
+            <p className="text-red-300 text-sm">{warningMessage}</p>
           </div>
         </div>
       )}
@@ -82,8 +77,8 @@ export function ExecutionDetailsPanel({
         <div className="space-y-2">
           {details.map((row) => (
             <div key={row.label} className="flex items-start gap-3">
-              <span className="text-neutral-500 text-xs w-24 shrink-0">{row.label}:</span>
-              <span className={cn('text-neutral-300 text-xs', row.mono && 'font-mono')}>{row.value}</span>
+              <span className="text-neutral-500 text-sm w-24 shrink-0">{row.label}:</span>
+              <span className={cn('text-neutral-300 text-sm', row.mono && 'font-mono')}>{row.value}</span>
             </div>
           ))}
         </div>

package/components/ui/extension-list-card.tsx

@@ -81,11 +81,11 @@ export const ExtensionListCard = memo(function ExtensionListCard({
           <Icon className={cn('w-5 h-5 shrink-0', iconColor)} />
           <div className="min-w-0 flex-1">
             <div className="flex items-center gap-2 flex-wrap">
-              <span className={cn('text-sm font-medium', titleClassName)}>{title}</span>
+              <span className={cn('text-md font-medium', titleClassName)}>{title}</span>
               {badges}
             </div>
             {description && (
-              <div className={cn('text-xs text-neutral-500 mt-1', !isHovered && 'line-clamp-2')}>{description}</div>
+              <div className={cn('text-sm text-neutral-500 mt-1', !isHovered && 'line-clamp-2')}>{description}</div>
             )}
           </div>
         </div>
@@ -96,7 +96,7 @@ export const ExtensionListCard = memo(function ExtensionListCard({
         )}
       </div>
       {metadata != null && (
-        <div className="flex items-center justify-between mt-2 ml-8 mr-2 text-xs text-neutral-500">
+        <div className="flex items-center justify-between mt-2 ml-8 mr-2 text-sm text-neutral-500">
           {typeof metadata === 'function' ? metadata(isHovered) : metadata}
         </div>
       )}