feat(design): add design scheme support and UI improvements

- Implement design scheme system with palette, typography, and feature customization
- Add color scheme dialog for user customization
- Update chat UI components to use design scheme values
- Improve header actions with consolidated deploy and export buttons
- Adjust layout spacing and styling across multiple components (chat, workbench etc...)
- Add model and provider info to chat messages
- Refactor workbench and sidebar components for better responsiveness

app/types/design-scheme.ts

@@ -0,0 +1,100 @@
+export interface DesignScheme {
+  palette: { [key: string]: string }; // Changed from string[] to object
+  features: string[];
+  font: string[];
+}
+
+export const defaultDesignScheme: DesignScheme = {
+  palette: {
+    primary: '#7c3aed',
+    secondary: '#38bdf8',
+    accent: '#f472b6',
+    background: '#f9fafb',
+    surface: '#ffffff',
+    text: '#18181b',
+    textSecondary: '#64748b',
+    border: '#e2e8f0',
+    success: '#10b981',
+    warning: '#f59e0b',
+    error: '#ef4444',
+  },
+  features: ['rounded', 'shadow'],
+  font: ['sans-serif'],
+};
+
+// Define the semantic color roles for the UI
+export const paletteRoles = [
+  {
+    key: 'primary',
+    label: 'Primary',
+    description: 'Main brand color - use for primary buttons, active links, and key interactive elements',
+  },
+  {
+    key: 'secondary',
+    label: 'Secondary',
+    description: 'Supporting brand color - use for secondary buttons, inactive states, and complementary elements',
+  },
+  {
+    key: 'accent',
+    label: 'Accent',
+    description: 'Highlight color - use for badges, notifications, focus states, and call-to-action elements',
+  },
+  {
+    key: 'background',
+    label: 'Background',
+    description: 'Page backdrop - use for the main application/website background behind all content',
+  },
+  {
+    key: 'surface',
+    label: 'Surface',
+    description: 'Elevated content areas - use for cards, modals, dropdowns, and panels that sit above the background',
+  },
+  { key: 'text', label: 'Text', description: 'Primary text - use for headings, body text, and main readable content' },
+  {
+    key: 'textSecondary',
+    label: 'Text Secondary',
+    description: 'Muted text - use for captions, placeholders, timestamps, and less important information',
+  },
+  {
+    key: 'border',
+    label: 'Border',
+    description: 'Separators - use for input borders, dividers, table lines, and element outlines',
+  },
+  {
+    key: 'success',
+    label: 'Success',
+    description: 'Positive feedback - use for success messages, completed states, and positive indicators',
+  },
+  {
+    key: 'warning',
+    label: 'Warning',
+    description: 'Caution alerts - use for warning messages, pending states, and attention-needed indicators',
+  },
+  {
+    key: 'error',
+    label: 'Error',
+    description: 'Error states - use for error messages, failed states, and destructive action indicators',
+  },
+];
+
+export const designFeatures = [
+  { key: 'rounded', label: 'Rounded Corners' },
+  { key: 'border', label: 'Subtle Border' },
+  { key: 'gradient', label: 'Gradient Accent' },
+  { key: 'shadow', label: 'Soft Shadow' },
+];
+
+// Add font options for easy reference
+export const designFonts = [
+  { key: 'sans-serif', label: 'Sans Serif', preview: 'Aa' },
+  { key: 'serif', label: 'Serif', preview: 'Aa' },
+  { key: 'monospace', label: 'Monospace', preview: 'Aa' },
+  { key: 'cursive', label: 'Cursive', preview: 'Aa' },
+  { key: 'fantasy', label: 'Fantasy', preview: 'Aa' },
+
+  /*
+   * Add custom fonts here if needed
+   * { key: 'Inter', label: 'Inter', preview: 'Aa' },
+   * { key: 'Roboto', label: 'Roboto', preview: 'Aa' },
+   */
+];