- Add utoipa::ToSchema derives to ThemePreset and ThemeColors
- Register get_theme_presets and apply_theme_preset in OpenAPI paths
- Add ThemePresetsResponse and ApplyPresetRequest to OpenAPI schemas
- This enables frontend TypeScript client generation for theme APIs

…h in OpenAPI schema

- Create ThemePreset and ThemeColorsDto in config_management.rs
- Convert from internal theme_presets types to DTOs
- Register new schemas in OpenAPI
- This fixes the 'theme_presets.ThemePreset' reference issue

- Replace raw fetch() calls with getThemePresets() and applyThemePreset()
- This fixes 401 Unauthorized errors by including auth headers
- API client handles authentication automatically

… in ChatInput

- bg-background-default class doesn't exist in Tailwind config
- Changed to bg-background-primary which is a valid MCP-compliant color variable
- This restores the chat input background color

- Implement 40/60 split layout: Color pickers (left) + Live preview (right)
- Create ColorPreview component showing in-situ usage examples
- Each color category shows relevant UI components:
  - Backgrounds: Cards, chat messages, sidebar, panels
  - Text: Typography samples, headings, body text
  - Borders: Inputs, dividers, card borders
  - Ring: Focus states on buttons and inputs
- Selected color highlights with border and background
- Empty state with instructions when no color selected
- Real-time preview updates as colors change
- Improved UX: Users can see exactly where colors are used

Component showcases:
- Primary background: Chat messages, main areas
- Secondary background: Sidebar, cards
- Tertiary background: Nested panels, hover states
- Text colors: Headings, body, labels, semantic states
- Border colors: Cards, inputs, dividers
- Ring colors: Focus indicators

This makes theme customization much more intuitive and powerful!

- Make dialog full-screen (w-screen h-screen) for immersive experience
- Move all controls to header bar for clean builder UX:
  - Tab switcher (Presets / Custom Colors)
  - Light/Dark mode toggle (shows only in Custom Colors)
  - Action buttons (Reset, Save, Close)
- Remove duplicate action buttons from bottom
- Add proper padding to content areas (px-6 py-4)
- Ensure both panels are scrollable independently
- Empty state centered in preview panel
- Professional builder flow like Figma/Framer

UX improvements:
- More space for color editing and previews
- All controls accessible in header
- Cleaner, less cluttered interface
- Better focus on the task at hand
- Immersive theme creation experience

- Add !important to override Radix Dialog default centering styles
- Remove max-width constraints (!max-w-none)
- Position at top-left (!top-0 !left-0)
- Remove centering transforms (!translate-x-0 !translate-y-0)
- Cover entire viewport (!inset-0)
- Remove margins, padding, rounded corners
- Now truly edge-to-edge full-screen builder experience

…nents

- Use actual Card, Button, and UI components from the app
- Match exact class names and structure from real components
- Add '1:1 Replica' badges to show authenticity
- Improve preview sections with better titles and context

Background previews now show:
- Actual GooseMessage component structure
- Real Card component with CardHeader/CardContent
- Exact sidebar navigation layout
- True button and input styles

Text previews now show:
- Real chat message text styling
- Actual CardTitle and CardDescription
- True button text on inverse backgrounds
- Exact error/success/warning message layouts

Border previews now show:
- Real Card border styling
- Actual input border patterns
- True divider line styles
- Exact hover state borders

Ring previews now show:
- Real Button focus ring styles
- Actual input focus patterns
- True outline offset values

All previews are now pixel-perfect replicas of the actual UI!

- Import actual Lucide icons (Home, MessageSquarePlus, FileText, etc.)
- Import Gear icon from app icons
- Replicate exact sidebar menu structure from AppSidebar.tsx:
  - Home (active state with bg-background-tertiary)
  - Chat button
  - Dividers (h-px bg-border-primary)
  - Recipes, Apps, Scheduler, Extensions
  - Settings at bottom
- Match exact class names: px-3 py-2 rounded-lg
- Use real icon sizes: w-4 h-4
- Show hover states: hover:bg-background-tertiary/50
- Proper spacing and layout from actual component
- Non-interactive but visually identical

Now sidebar preview is pixel-perfect match of real UI!

New Themes Added (10 total now):
1. ✅ Goose Classic (default)
2. ✅ High Contrast - Maximum contrast for accessibility
3. ✅ Nord - Arctic color palette
4. ✅ Dracula - Vibrant dark theme
5. ✅ Solarized - Precision colors by Ethan Schoonover
6. ✅ Monokai - Sublime Text classic by Wimer Hazenberg
7. ✅ GitHub - Clean, familiar GitHub colors
8. ✅ Gruvbox - Warm retro by Pavel Pertsev
9. ✅ Tokyo Night - Modern vibrant by Folke Lemaitre
10. ✅ One Dark - Atom editor theme

Frontend:
- Created 7 new theme preset files in ui/desktop/src/themes/presets/
- Updated index.ts to export all 10 themes
- Added proper tags for filtering (light, dark, colorful, minimal, etc.)

Backend:
- Added 7 new theme functions to theme_presets.rs
- Each with complete light/dark color definitions
- All 18 MCP color variables defined per theme
- Proper metadata and tags

Header Spacing Fix:
- Changed pt-4 to pt-12 in DialogHeader
- Provides clearance for macOS stoplight buttons
- Prevents overlap with window controls
- Better visual hierarchy

Theme variety now includes:
- Accessibility: High Contrast
- Classic: Goose Classic, GitHub
- Cool tones: Nord, Tokyo Night
- Warm tones: Gruvbox, Solarized
- Vibrant: Dracula, Monokai
- Modern: One Dark, Tokyo Night, GitHub

All themes have both light and dark variants!

- Replace text buttons with icon-only round buttons
- Add Refresh icon (Lucide) for Reset action
- Add Save icon (Lucide) for Save action
- Remove redundant Close button (X already exists in dialog)
- Add tooltips for accessibility:
  - 'Reset to Default Theme'
  - 'Save Theme' (or 'Saving...' when active)
- Use shape='round' for circular icon buttons
- Cleaner, more professional header
- More space for title and description
- Better visual hierarchy

Header now shows:
- Theme Builder title + description (left)
- Icon buttons with tooltips (right)
- Tab switchers below
- Clean, minimal design

- Replace Refresh with RotateCcw from lucide-react
- RotateCcw is the correct icon name in Lucide
- Matches the reset/undo semantic meaning
- Fixes module import error

- Add Palette icon to 'Theme Presets' tab
- Add Paintbrush icon to 'Custom Colors' tab
- Remove max-w-md constraint for full-width tabs
- Tabs now span the full content width
- Icons make tabs more visual and intuitive
- Better use of horizontal space
- More professional appearance

Tab layout now:
[🎨 Theme Presets] [🖌️ Custom Colors] ... [Light][Dark] [🔄][💾]
     Full width tabs                      Conditional    Actions

- Change container to flex-col with h-full
- Search/filter section is flex-shrink-0 (fixed height)
- Theme grid uses flex-1 (takes remaining space)
- Remove max-h-[500px] constraint
- Add lg:grid-cols-3 for better use of wide screens
- Grid now scrolls and fills all available vertical space
- Much better use of full-screen builder layout

Before: Small 500px scrollable area
After: Full-height grid that uses entire screen

- Remove Light/Dark mode toggle from Custom Colors tab
- Use resolvedTheme from ThemeContext instead of local state
- Custom Colors automatically matches user's current theme mode
- Show mode indicator badge: 'Editing: Light Mode' or 'Editing: Dark Mode'
- Cleaner UX - one less thing to manage
- Colors update in real-time based on system theme
- Users edit colors for the mode they're currently viewing

Benefits:
- More intuitive - edit what you see
- Less cognitive load - no mode switching
- Consistent with system theme
- Cleaner header layout
- Better user experience

When user is in light mode → edits light colors
When user is in dark mode → edits dark colors
Simple and intuitive!

- Display description directly below color label in picker cards
- Update all descriptions to show actual usage locations:
  - 'Primary Background' → 'Chat area, main content, message list'
  - 'Secondary Background' → 'Sidebar, cards, settings panels'
  - 'Primary Text' → 'Headings, body text, chat messages'
  - etc.
- Make label text-sm (slightly larger) for better hierarchy
- Description is text-xs text-secondary (subtle but readable)
- Add flex-1 to label container for better text wrapping
- Add flex-shrink-0 to color swatch to prevent squishing
- Users now instantly see where each color is used
- No need to click to understand usage
- Better information architecture

Before: Generic descriptions like 'Main text color'
After: Specific usage like 'Headings, body text, chat messages'

Much more informative and helpful!

- Wrap preview content in flex items-center justify-center
- Add h-full to use full panel height
- Add max-w-2xl to constrain width for readability
- Add p-8 for comfortable padding
- Components now display in center of panel
- Better visual balance and focus
- More professional appearance
- Easier to see and understand previews

Before: Preview stuck at top of panel
After: Preview centered vertically and horizontally

Much better use of space and visual hierarchy!

…n-situ display

- Remove ExampleSection wrapper components
- Remove '1:1 Replica' badges
- Remove section titles like 'Chat Message Text (Exact Replica)'
- Remove 'Where This Color Appears:' header
- Just show the actual UI components directly
- Clean, immersive preview experience
- Components speak for themselves
- More like looking at the real app
- Removed unused ExampleSection and PreviewCard helper components

Before: Components wrapped in labeled sections
After: Pure, clean UI components centered in panel

Much cleaner and more professional appearance!

- Create SimpleColorPicker component with discrete color stops
- Hue selection: 12 color squares across the spectrum
- Saturation/Lightness grid: 5x5 grid of shades for selected hue
- Grayscale row: 6 gray shades from black to white
- No gradients - just clean, clickable squares
- Selected color gets ring highlight
- Hover effects on all squares (scale-110)
- Much simpler and more intuitive UX
- Better for precise color selection
- Easier to understand than gradient sliders

Color picker structure:
1. Hue bar (12 colors) - Select base hue
2. Shade grid (5x5) - Select saturation/lightness
3. Grayscale (6 colors) - Quick gray selection
4. Hex input - Manual entry

Removed react-colorful HexColorPicker dependency from this component.
Users can now pick colors with simple clicks instead of dragging gradients!

- Reduce hue squares from aspect-square to fixed w-6 h-6
- Reduce shade grid squares from aspect-square to fixed w-8 h-8
- Reduce grayscale squares from aspect-square to fixed w-8 h-8
- Reduce gap from gap-1 to gap-0.5 for tighter spacing
- Reduce border from border-2 to border for thinner borders
- Reduce ring from ring-2 to ring-1 for subtler selection
- Reduce spacing from space-y-4 to space-y-3
- Reduce label margins from mb-2 to mb-1.5

Result:
- More compact and refined appearance
- Takes up less space in the color picker card
- Still easy to click and select
- Better visual density
- More professional look

- Increase from 5x5 to 8x10 grid (80 color options!)
- 8 lightness levels (95% to 11% in 12% steps)
- 10 saturation levels (0% to 99% in 11% steps)
- Update grid-cols from 5 to 10
- Much more granular color control
- Better coverage of color space
- Users can find exact shades they need
- More professional color picker

Grid now provides:
- 12 hue options
- 80 shade variations per hue (8x10)
- 6 grayscale options
= 966 total color options!

Perfect for precise theme customization!

- Increase from 8x10 to 10x15 grid (150 shades per hue!)
- 10 lightness levels (95% to 5% in 9.5% steps)
- 15 saturation levels (0% to 98% in 7% steps)
- Update grid-cols from 10 to 15
- Maximum granularity for precise color selection
- Professional-grade color control

Grid now provides:
- 12 hue options
- 150 shade variations per hue (10x15)
- 6 grayscale options
= 1,806 total color options!

Users can now find the exact perfect shade for their theme!

- Expand from 12 to 24 hue stops around the color wheel
- Now covers every 15° of the spectrum (360° / 24 = 15°)
- Includes intermediate colors:
  - Red-Orange, Orange-Yellow, Yellow-Lime
  - Lime-Green, Green-Spring, Spring-Cyan
  - Cyan-Azure, Azure-Blue, Blue-Violet
  - Violet-Purple, Purple-Magenta, Magenta-Red
- Update grid from grid-cols-12 to grid-cols-24
- Complete spectrum coverage for any color need

Total color options now:
- 24 hue options
- 150 shade variations per hue (10x15)
- 6 grayscale options
= 3,606 total color options!

Professional-grade color picker with maximum precision!

- Increase from 6 to 15 grayscale shades (#000000 to #eeeeee)
- Add separate pure white (#ffffff) option
- Grayscale now covers every 17 units (0x00 to 0xee in 0x11 steps)
- 15-column grid matching shade grid width
- Better control over neutral colors
- Essential for backgrounds, borders, and subtle UI elements

Grayscale progression:
#000000 → #111111 → #222222 → #333333 → #444444
#555555 → #666666 → #777777 → #888888 → #999999
#aaaaaa → #bbbbbb → #cccccc → #dddddd → #eeeeee
+ Pure white: #ffffff

Total color options now:
- 24 hue options
- 150 shade variations per hue (10x15)
- 15 grayscale shades + 1 white
= 3,616 total color options!

Perfect for any theme customization need!

- Replace fixed w-6 h-6, w-8 h-8 with aspect-square
- Squares now scale based on available container width
- Grid automatically adjusts to fit the color picker card
- Responsive design that works at any size
- Better use of available space
- Cleaner CSS without hardcoded dimensions

Benefits:
- Hue squares (24 cols) scale to fit width
- Shade grid (15 cols) scales to fit width
- Grayscale (15 cols) scales to fit width
- White button scales to fit width
- All maintain perfect square aspect ratio
- Responsive and adaptive to container size

Much more flexible and professional!

- Remove separate 'Pure White' section with grid-cols-1
- Add #ffffff to the end of grayscale array (16 total grays)
- Change grid-cols-15 to grid-cols-16 for grayscale
- White now scales properly with other gray squares
- No more giant white square taking full width
- Cleaner, more consistent layout

Grayscale now: #000000 → #111111 → ... → #eeeeee → #ffffff
All in one row, all same size!

- Add findClosestHue() helper function
- Calculate closest hue from HUE_COLORS array for current color
- Use lazy initialization with useState(() => findClosestHue(color))
- Handles wrap-around (e.g., 350° is close to 10°)
- Shade grid automatically shows relevant shades for current color
- Selected shade highlights with ring when it matches current color
- Much better UX - picker shows context of current color
- Users see where they are in the color space

Before: Always started with red hue
After: Starts with hue closest to current color

Smart initialization makes editing more intuitive!

- Remove error message box from danger background preview
- Just show the destructive 'Delete Session' button
- Cleaner, more focused preview
- Button clearly demonstrates the danger background color
- Less visual clutter
- More direct example of where the color is used

Before: Error message box + button
After: Just the button

Simpler and clearer!

- Use resolvedTheme from ThemeContext to get current mode
- Show only light colors when in light mode
- Show only dark colors when in dark mode
- Remove side-by-side light/dark preview
- Single color preview bar now shows relevant colors
- Cleaner, more focused preview
- Users see what the theme will look like in their current mode
- More intuitive and less confusing

Before: Two color bars (light + dark side-by-side)
After: One color bar (current mode only)

Consistent with Custom Colors tab behavior!

- Reduce height from h-12 to h-8
- More compact and refined appearance
- Better visual balance with card content
- Less space taken by color preview
- More focus on theme name and description
- Cleaner, more professional look

Before: 48px tall color preview
After: 32px tall color preview

More compact and elegant!

- Change from 2 vertical bars to 4 horizontal squares
- Use grid-cols-4 for even distribution
- Show 4 key colors from the theme:
  1. Primary background
  2. Secondary background
  3. Primary text
  4. Inverse background
- Better representation of theme's color palette
- More visual information at a glance
- Users can see background + text + accent colors
- Still compact at h-8

Before: 2 colors (primary + secondary background)
After: 4 colors (backgrounds + text + inverse)

Richer preview with more theme information!

- Change from 2-3 columns to 3-4-5 columns (responsive)
- md: 3 columns (medium screens)
- lg: 4 columns (large screens)
- xl: 5 columns (extra large screens)
- Narrower cards show more themes at once
- Better use of full-screen width
- More compact and efficient layout
- Users can see more themes without scrolling

Before: 2-3 columns (wide cards)
After: 3-4-5 columns (compact cards)

Much better use of horizontal space!

- Remove search input field (not needed for 10 themes)
- Keep tag filters for quick filtering by category
- Cleaner, simpler interface
- More space for theme cards
- Easier to browse all themes at once
- Less UI clutter
- Tag filters are sufficient for 10 themes

Before: Search bar + tag filters
After: Just tag filters

Simpler and cleaner!

- Change card from space-y-3 to flex flex-col layout
- Theme info uses flex-1 to push button to bottom
- Replace text button with icon-only round button
- Use Download icon for unapplied themes (secondary variant)
- Use Check icon for applied theme (default/primary variant)
- Add tooltip for button state
- Button always at bottom regardless of content height
- Cleaner, more compact design
- Visual indicator of currently applied theme

Button states:
- Not applied: Secondary button with Download icon
- Applied: Primary button with Check icon
- Applying: Disabled state

Much cleaner and more professional!

- Remove flex-1 from Tabs container
- Change TabsList from 'grid w-full grid-cols-2' to 'inline-flex'
- Buttons now only as wide as their content
- Cleaner, more compact header
- Better visual hierarchy
- More space for mode indicator badge
- Professional appearance

Before: Tabs stretched full width
After: Tabs hug content (compact)

Much cleaner header layout!

- Add theme info card at top of left panel in Custom Colors
- Shows 4-color preview (matches preset card style)
- Editable theme name input field
- Optional description input field
- Live color preview updates as user edits colors
- Highlighted with border-2 and bg-background-secondary
- Users can name and describe their custom theme
- Visual feedback of current theme colors
- Consistent with preset card design

Theme card includes:
- 4-color preview bar (live updates!)
- Theme Name input (default: 'My Custom Theme')
- Description input (optional)

Users can now:
- See their custom theme preview
- Name their theme
- Add description
- Watch colors update live in the preview bar

Great for theme management and organization!

- Increase preset card color preview from h-8 to h-24
- Also update custom theme info card to h-24
- More prominent color display
- Better visual representation of theme
- Easier to see color combinations
- More impactful preview
- Better balance with card content

Before: 32px tall (h-8)
After: 96px tall (h-24) - 3x taller!

Much more prominent and easier to see!

- Add flex-1 spacer at top to push content to bottom
- Wrap all content in bottom-aligned container
- Order: Title → Description → Author → Tags → Color Preview → Button
- Color preview now directly above apply button
- Consistent alignment across all cards regardless of content length
- More elegant and professional appearance
- Better visual flow from info to preview to action

Layout now:
┌─────────────────────┐
│                     │ ← Flexible space
│                     │
│ Theme Name          │ ← Bottom-aligned
│ Description         │
│ by Author           │
│ [tags]              │
│ [color preview]     │
│ [apply button]      │
└─────────────────────┘

Much better visual balance!

- Color preview stays at top of card
- Add flex-1 spacer between preview and info
- Title, description, tags, and button are bottom-aligned
- Perfect visual hierarchy and balance

Layout now:
┌─────────────────────┐
│ [color preview]     │ ← Top
│                     │ ← Flexible space
│ Theme Name          │ ← Bottom-aligned
│ Description         │
│ by Author           │
│ [tags]              │
│ [apply button]      │
└─────────────────────┘

Colors prominent at top, info compact at bottom!

When users customize colors and save, the theme is now:
1. Applied immediately (saved to theme.css)
2. Saved as a custom preset (JSON file in saved_themes/)
3. Available in the Theme Presets gallery for future use

Features:
- Theme name and description input fields
- Unique theme ID generation
- Custom themes tagged with 'custom' label
- Themes persist in ~/.config/goose/data/saved_themes/
- Can be reapplied from Presets tab anytime

Implementation:
- Created theme-api.ts with saveCustomTheme() and deleteCustomTheme()
- Enhanced handleSave() to save both active theme and preset
- Backend already supports custom theme storage via save_custom_theme endpoint

Regenerated the frontend API SDK to include:
- /theme/save-custom endpoint for saving custom themes
- /theme/saved/{id} endpoint for deleting custom themes
- SaveCustomThemeRequest type definition
- Updated theme presets description

This completes the custom theme saving feature integration.

Added comprehensive theme management features:

**Active Theme Tracking:**
- Backend stores active theme ID in active_theme.txt
- New /theme/active endpoint to retrieve current theme
- Frontend displays which theme is currently applied
- Active theme cards show with blue border and checkmark

**Delete Custom Themes:**
- Delete button (trash icon) on custom theme cards
- Confirmation dialog before deletion
- Removes theme file from saved_themes/
- Refreshes gallery after deletion
- Only custom themes can be deleted (built-in themes protected)

**UI Improvements:**
- Active theme highlighted with border-info color
- Apply button shows checkmark when theme is active
- Delete button only visible on custom themes
- Disabled state during apply/delete operations
- Better visual feedback for user actions

**Backend Changes:**
- apply_theme_preset now stores theme ID
- New get_active_theme endpoint
- Active theme persists across sessions
- Proper error handling for theme operations

Changed handleSave to use applyThemePreset instead of just saveTheme.
This ensures the active theme ID is stored on the backend, so when you
apply a custom theme, it shows the checkmark and blue border correctly.

Now the flow is:
1. Save custom theme preset (creates JSON file)
2. Apply the theme preset (writes CSS + stores active ID)
3. Reload page with correct active theme indicator

The get_preset() function was only searching built-in themes,
causing apply_theme_preset to fail when applying custom themes.

Changed get_preset() to use get_all_presets_with_custom() instead
of get_all_presets(), so it searches both built-in and custom themes.

This fixes the issue where custom themes wouldn't show the checkmark
and blue border after being applied.

The theme-api.ts file wasn't being tracked properly in git.
This file provides the API functions for:
- saveCustomTheme() - Save custom themes as presets
- deleteCustomTheme() - Delete custom themes
- getActiveTheme() - Get currently active theme ID

Also includes regenerated OpenAPI files with the new /theme/active endpoint.

- Add missing --color-sidebar CSS variable to generate bg-sidebar utility
- Update SheetContent to allow background class override
- Fixes missing background on mobile navigation overlay at small breakpoints

- Add Sliders icon edit button to custom theme cards in PresetGallery
- Edit button positioned between Apply and Delete buttons
- Implement handleEditTheme to load theme colors into editor
- Track editing state with editingThemeId to update existing themes
- Update save logic to reuse theme ID when editing vs creating new
- Switch to customize tab and show toast when editing begins
- Update success message to show 'updated' vs 'saved' appropriately

PromptsSettingsSection:
- Replace yellow hardcoded colors with theme info variables
- Update warning card to use bg-background-info and border-border-info
- Update text colors to use text-text-info and text-text-warning
- Update customized badges to use theme variables

TunnelSection (Remote Access):
- Replace blue hardcoded colors with theme info variables
- Replace green hardcoded colors with theme success variables
- Replace red hardcoded colors with theme danger variables
- Update info box to use bg-background-info and border-border-info
- Update error box to use bg-background-danger and border-border-danger
- Update success box to use bg-background-secondary and text-text-success
- Update App Store link to use text-text-info

All colors now properly respond to theme customization

- Replace generic info tip with actual Prompts Settings warning card
- Shows AlertTriangle icon, title, description, and Reset All button
- Provides more relevant and recognizable preview example
- Users can now see exactly how info background affects settings UI