@usesidekick/react 0.1.0

package/src/components/SidekickPanel.tsx

@@ -0,0 +1,868 @@
+'use client';
+
+import { useState, useCallback, useEffect, FormEvent } from 'react';
+import { useSidekickSafe } from '../context';
+import { setFlag } from '../flags';
+
+interface Message {
+  id: string;
+  role: 'user' | 'assistant' | 'system';
+  content: string;
+  timestamp: Date;
+  status?: 'pending' | 'generating' | 'success' | 'error';
+  overrideId?: string;
+}
+
+interface SidekickPanelProps {
+  apiEndpoint?: string;
+  deleteEndpoint?: string;
+  toggleEndpoint?: string;
+  onGenerate?: (request: string) => Promise<{ success: boolean; overrideId?: string; error?: string }>;
+  onDelete?: (overrideId: string) => Promise<{ success: boolean; error?: string }>;
+  onToggle?: (overrideId: string, enabled: boolean) => Promise<{ success: boolean; error?: string }>;
+}
+
+export function SidekickPanel({ apiEndpoint, deleteEndpoint, toggleEndpoint, onGenerate, onDelete, onToggle }: SidekickPanelProps) {
+  // Initialize state from sessionStorage to persist across reloads
+  const [isOpen, setIsOpen] = useState(() => {
+    if (typeof window === 'undefined') return false;
+    return sessionStorage.getItem('sidekick_panel_open') === 'true';
+  });
+  const [activeTab, setActiveTab] = useState<'chat' | 'overrides'>(() => {
+    if (typeof window === 'undefined') return 'chat';
+    return (sessionStorage.getItem('sidekick_panel_tab') as 'chat' | 'overrides') || 'chat';
+  });
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [input, setInput] = useState('');
+  const [isGenerating, setIsGenerating] = useState(false);
+  const [deletingId, setDeletingId] = useState<string | null>(null);
+  const [togglingId, setTogglingId] = useState<string | null>(null);
+  const [editingOverrideId, setEditingOverrideId] = useState<string | null>(null);
+
+  const context = useSidekickSafe();
+  const overrides = context?.overrides ?? [];
+
+  // Compute endpoints from apiEndpoint if not provided
+  const effectiveDeleteEndpoint = deleteEndpoint || (apiEndpoint ? apiEndpoint.replace('/generate', '/delete') : undefined);
+  const effectiveToggleEndpoint = toggleEndpoint || (apiEndpoint ? apiEndpoint.replace('/generate', '/toggle') : undefined);
+
+  // Persist panel state changes to sessionStorage
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    sessionStorage.setItem('sidekick_panel_open', isOpen ? 'true' : 'false');
+  }, [isOpen]);
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    sessionStorage.setItem('sidekick_panel_tab', activeTab);
+  }, [activeTab]);
+
+  // Compute sessionStorage key based on editing mode
+  const messagesStorageKey = editingOverrideId
+    ? `sidekick_edit_messages_${editingOverrideId}`
+    : 'sidekick_messages';
+
+  // Load message history from sessionStorage (re-runs when editing mode changes)
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    const stored = sessionStorage.getItem(messagesStorageKey);
+    if (stored) {
+      try {
+        const parsed = JSON.parse(stored);
+        setMessages(parsed.map((m: Message) => ({ ...m, timestamp: new Date(m.timestamp) })));
+      } catch {
+        setMessages([]);
+      }
+    } else {
+      setMessages([]);
+    }
+  }, [messagesStorageKey]);
+
+  // Save messages to sessionStorage
+  useEffect(() => {
+    if (typeof window === 'undefined' || messages.length === 0) return;
+    sessionStorage.setItem(messagesStorageKey, JSON.stringify(messages));
+  }, [messages, messagesStorageKey]);
+
+  const handleSubmit = useCallback(async (e: FormEvent) => {
+    e.preventDefault();
+    if (!input.trim() || isGenerating) return;
+
+    const userMessage: Message = {
+      id: generateId(),
+      role: 'user',
+      content: input.trim(),
+      timestamp: new Date(),
+    };
+
+    const assistantMessage: Message = {
+      id: generateId(),
+      role: 'assistant',
+      content: 'Generating your customization...',
+      timestamp: new Date(),
+      status: 'generating',
+    };
+
+    setMessages((prev) => [...prev, userMessage, assistantMessage]);
+    setInput('');
+    setIsGenerating(true);
+
+    try {
+      let result: { success: boolean; overrideId?: string; name?: string; description?: string; error?: string };
+
+      const requestBody: { request: string; overrideId?: string } = { request: userMessage.content };
+      if (editingOverrideId) {
+        requestBody.overrideId = editingOverrideId;
+      }
+
+      if (onGenerate) {
+        result = await onGenerate(userMessage.content);
+      } else if (apiEndpoint) {
+        const response = await fetch(apiEndpoint, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(requestBody),
+        });
+        result = await response.json();
+      } else {
+        result = {
+          success: false,
+          error: 'No API endpoint or onGenerate handler configured',
+        };
+      }
+
+      const verb = editingOverrideId ? 'Updated' : 'Created';
+      const successMessage = result.success
+        ? `${verb} "${result.name || result.overrideId}"!\n\n${result.description || ''}\n\nReload the page to apply changes.`
+        : `Failed to generate: ${result.error}`;
+
+      setMessages((prev) =>
+        prev.map((m) =>
+          m.id === assistantMessage.id
+            ? {
+                ...m,
+                content: successMessage,
+                status: result.success ? 'success' : 'error',
+                overrideId: result.overrideId,
+              }
+            : m
+        )
+      );
+    } catch (error) {
+      setMessages((prev) =>
+        prev.map((m) =>
+          m.id === assistantMessage.id
+            ? {
+                ...m,
+                content: `Error: ${error instanceof Error ? error.message : 'Unknown error'}`,
+                status: 'error',
+              }
+            : m
+        )
+      );
+    } finally {
+      setIsGenerating(false);
+    }
+  }, [input, isGenerating, onGenerate, apiEndpoint, editingOverrideId]);
+
+  const handleToggleOverride = useCallback(async (overrideId: string, enabled: boolean) => {
+    setTogglingId(overrideId);
+
+    try {
+      if (onToggle) {
+        await onToggle(overrideId, enabled);
+      } else if (effectiveToggleEndpoint) {
+        const response = await fetch(effectiveToggleEndpoint, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ overrideId, enabled }),
+        });
+        const result = await response.json();
+        if (!result.success) {
+          throw new Error(result.error || 'Toggle failed');
+        }
+      } else {
+        // Fallback to localStorage
+        setFlag(overrideId, enabled);
+      }
+
+      // Reload the page to apply the change
+      window.location.reload();
+    } catch (error) {
+      alert(`Failed to toggle: ${error instanceof Error ? error.message : 'Unknown error'}`);
+      setTogglingId(null);
+    }
+  }, [onToggle, effectiveToggleEndpoint]);
+
+  const handleDeleteOverride = useCallback(async (overrideId: string) => {
+    if (!confirm(`Are you sure you want to delete this override? This cannot be undone.`)) {
+      return;
+    }
+
+    setDeletingId(overrideId);
+
+    try {
+      let result: { success: boolean; error?: string };
+
+      if (onDelete) {
+        result = await onDelete(overrideId);
+      } else if (effectiveDeleteEndpoint) {
+        const response = await fetch(effectiveDeleteEndpoint, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ overrideId }),
+        });
+        result = await response.json();
+      } else {
+        result = { success: false, error: 'No delete endpoint configured' };
+      }
+
+      if (result.success) {
+        // Clear the flag and reload
+        setFlag(overrideId, false);
+        window.location.reload();
+      } else {
+        alert(`Failed to delete: ${result.error}`);
+      }
+    } catch (error) {
+      alert(`Error: ${error instanceof Error ? error.message : 'Unknown error'}`);
+    } finally {
+      setDeletingId(null);
+    }
+  }, [onDelete, effectiveDeleteEndpoint]);
+
+  const handleRegenerateOverride = useCallback((overrideId: string) => {
+    setEditingOverrideId(overrideId);
+    setActiveTab('chat');
+    setInput('');
+  }, []);
+
+  const handleEditOverride = useCallback((overrideId: string) => {
+    setEditingOverrideId(overrideId);
+    setActiveTab('chat');
+    setInput('');
+  }, []);
+
+  const handleExitEditMode = useCallback(() => {
+    setEditingOverrideId(null);
+    setInput('');
+  }, []);
+
+  const handleClearHistory = useCallback(() => {
+    setMessages([]);
+    sessionStorage.removeItem(messagesStorageKey);
+  }, [messagesStorageKey]);
+
+  if (!isOpen) {
+    return (
+      <button
+        onClick={() => setIsOpen(true)}
+        style={styles.trigger}
+        aria-label="Open Sidekick Panel"
+      >
+        <SidekickIcon />
+      </button>
+    );
+  }
+
+  return (
+    <div style={styles.overlay} onWheel={(e) => e.stopPropagation()} onTouchMove={(e) => e.stopPropagation()}>
+      <div style={styles.panel}>
+        {/* Header */}
+        <div style={styles.header}>
+          <h2 style={styles.title}>Sidekick</h2>
+          <button onClick={() => setIsOpen(false)} style={styles.closeButton}>
+            <CloseIcon />
+          </button>
+        </div>
+
+        {/* Tabs */}
+        <div style={styles.tabs}>
+          <button
+            onClick={() => setActiveTab('chat')}
+            style={{
+              ...styles.tab,
+              ...(activeTab === 'chat' ? styles.tabActive : {}),
+            }}
+          >
+            Customize
+          </button>
+          <button
+            onClick={() => setActiveTab('overrides')}
+            style={{
+              ...styles.tab,
+              ...(activeTab === 'overrides' ? styles.tabActive : {}),
+            }}
+          >
+            Overrides ({overrides.length})
+          </button>
+        </div>
+
+        {/* Content */}
+        <div style={styles.content}>
+          {activeTab === 'chat' ? (
+            <ChatTab
+              messages={messages}
+              input={input}
+              isGenerating={isGenerating}
+              onInputChange={setInput}
+              onSubmit={handleSubmit}
+              onClearHistory={handleClearHistory}
+              editingOverride={editingOverrideId ? overrides.find(o => o.id === editingOverrideId) : undefined}
+              onExitEditMode={handleExitEditMode}
+            />
+          ) : (
+            <OverridesTab
+              overrides={overrides}
+              onToggle={handleToggleOverride}
+              onDelete={handleDeleteOverride}
+              onRegenerate={handleRegenerateOverride}
+              onEdit={handleEditOverride}
+              deletingId={deletingId}
+              togglingId={togglingId}
+            />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+interface ChatTabProps {
+  messages: Message[];
+  input: string;
+  isGenerating: boolean;
+  onInputChange: (value: string) => void;
+  onSubmit: (e: FormEvent) => void;
+  onClearHistory: () => void;
+  editingOverride?: { id: string; name: string; description: string; enabled: boolean };
+  onExitEditMode: () => void;
+}
+
+function ChatTab({
+  messages,
+  input,
+  isGenerating,
+  onInputChange,
+  onSubmit,
+  onClearHistory,
+  editingOverride,
+  onExitEditMode,
+}: ChatTabProps) {
+  return (
+    <div style={styles.chatContainer}>
+      {/* Edit mode header */}
+      {editingOverride && (
+        <div style={styles.editHeader}>
+          <span style={styles.editHeaderText}>Editing: {editingOverride.name}</span>
+          <button onClick={onExitEditMode} style={styles.editHeaderClose}>✕</button>
+        </div>
+      )}
+      {/* Messages */}
+      <div style={styles.messages}>
+        {messages.length === 0 ? (
+          editingOverride ? (
+            <div style={styles.emptyState}>
+              <p style={styles.emptyTitle}>Edit "{editingOverride.name}"</p>
+              <p style={styles.emptyDescription}>
+                Describe what you want to change about this override, and I'll modify the existing code.
+              </p>
+              <div style={styles.examples}>
+                <p style={styles.examplesTitle}>Try saying:</p>
+                <ul style={styles.examplesList}>
+                  <li>"Change the color to red"</li>
+                  <li>"Make it only apply to high priority items"</li>
+                  <li>"Add a hover effect"</li>
+                </ul>
+              </div>
+            </div>
+          ) : (
+            <div style={styles.emptyState}>
+              <p style={styles.emptyTitle}>Customize your app</p>
+              <p style={styles.emptyDescription}>
+                Describe what you want to change in natural language, and I'll generate the code.
+              </p>
+              <div style={styles.examples}>
+                <p style={styles.examplesTitle}>Try saying:</p>
+                <ul style={styles.examplesList}>
+                  <li>"Add a column showing days until due date"</li>
+                  <li>"Add a banner at the top of the sidebar"</li>
+                  <li>"Highlight overdue tasks in red"</li>
+                </ul>
+              </div>
+            </div>
+          )
+        ) : (
+          <>
+            {messages.map((message) => (
+              <div
+                key={message.id}
+                style={{
+                  ...styles.message,
+                  ...(message.role === 'user' ? styles.userMessage : styles.assistantMessage),
+                }}
+              >
+                <div style={styles.messageContent}>
+                  {message.content}
+                  {message.status === 'generating' && (
+                    <span style={styles.spinner}>⟳</span>
+                  )}
+                </div>
+                {message.status === 'success' && (
+                  <div style={styles.successContainer}>
+                    <div style={styles.successBadge}>✓ {editingOverride ? 'Updated' : 'Created'}</div>
+                    <button
+                      onClick={() => window.location.reload()}
+                      style={styles.reloadButton}
+                    >
+                      Reload to Apply
+                    </button>
+                  </div>
+                )}
+                {message.status === 'error' && (
+                  <div style={styles.errorBadge}>✕ Failed</div>
+                )}
+              </div>
+            ))}
+            <button onClick={onClearHistory} style={styles.clearButton}>
+              Clear history
+            </button>
+          </>
+        )}
+      </div>
+
+      {/* Input */}
+      <form onSubmit={onSubmit} style={styles.inputForm}>
+        <input
+          type="text"
+          value={input}
+          onChange={(e) => onInputChange(e.target.value)}
+          placeholder="Describe your customization..."
+          disabled={isGenerating}
+          style={styles.input}
+        />
+        <button
+          type="submit"
+          disabled={!input.trim() || isGenerating}
+          style={{
+            ...styles.submitButton,
+            ...((!input.trim() || isGenerating) ? styles.submitButtonDisabled : {}),
+          }}
+        >
+          {isGenerating ? '...' : '→'}
+        </button>
+      </form>
+    </div>
+  );
+}
+
+interface OverridesTabProps {
+  overrides: Array<{ id: string; name: string; description: string; enabled: boolean }>;
+  onToggle: (id: string, enabled: boolean) => void;
+  onDelete: (id: string) => void;
+  onRegenerate: (id: string) => void;
+  onEdit: (id: string) => void;
+  deletingId: string | null;
+  togglingId: string | null;
+}
+
+function OverridesTab({ overrides, onToggle, onDelete, onRegenerate, onEdit, deletingId, togglingId }: OverridesTabProps) {
+  const handleToggle = (override: { id: string; enabled: boolean }) => {
+    onToggle(override.id, !override.enabled);
+  };
+
+  if (overrides.length === 0) {
+    return (
+      <div style={styles.emptyState}>
+        <p style={styles.emptyTitle}>No overrides yet</p>
+        <p style={styles.emptyDescription}>
+          Use the Customize tab to create your first customization.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div style={styles.overridesList}>
+      {overrides.map((override) => (
+        <div key={override.id} style={styles.overrideItem}>
+          <div style={styles.overrideInfo}>
+            <h3 style={styles.overrideName}>{override.name}</h3>
+            <p style={styles.overrideDescription}>{override.description}</p>
+            <div style={styles.overrideActions}>
+              <button
+                onClick={() => onEdit(override.id)}
+                style={styles.actionButton}
+              >
+                Edit
+              </button>
+              <button
+                onClick={() => onRegenerate(override.id)}
+                style={styles.actionButton}
+              >
+                Regenerate
+              </button>
+              <button
+                onClick={() => onDelete(override.id)}
+                disabled={deletingId === override.id}
+                style={{
+                  ...styles.actionButton,
+                  ...styles.deleteButton,
+                  ...(deletingId === override.id ? styles.actionButtonDisabled : {}),
+                }}
+              >
+                {deletingId === override.id ? 'Deleting...' : 'Delete'}
+              </button>
+            </div>
+          </div>
+          <button
+            onClick={() => handleToggle(override)}
+            disabled={togglingId === override.id}
+            style={{
+              ...styles.toggle,
+              ...(override.enabled ? styles.toggleOn : styles.toggleOff),
+              ...(togglingId === override.id ? styles.toggleDisabled : {}),
+            }}
+          >
+            {togglingId === override.id ? '...' : override.enabled ? 'ON' : 'OFF'}
+          </button>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+// Icons
+function SidekickIcon() {
+  return (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+      <path d="M12 2L2 7l10 5 10-5-10-5z" />
+      <path d="M2 17l10 5 10-5" />
+      <path d="M2 12l10 5 10-5" />
+    </svg>
+  );
+}
+
+function CloseIcon() {
+  return (
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+      <path d="M18 6L6 18M6 6l12 12" />
+    </svg>
+  );
+}
+
+function generateId(): string {
+  return Math.random().toString(36).substring(2, 11);
+}
+
+// Styles
+const styles: Record<string, React.CSSProperties> = {
+  trigger: {
+    position: 'fixed',
+    bottom: '24px',
+    right: '24px',
+    width: '56px',
+    height: '56px',
+    borderRadius: '50%',
+    backgroundColor: '#3B82F6',
+    color: 'white',
+    border: 'none',
+    cursor: 'pointer',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
+    zIndex: 9999,
+  },
+  overlay: {
+    position: 'fixed',
+    top: 0,
+    right: 0,
+    bottom: 0,
+    width: '400px',
+    zIndex: 9999,
+    boxShadow: '-4px 0 24px rgba(0, 0, 0, 0.15)',
+    overscrollBehavior: 'contain',
+  },
+  panel: {
+    height: '100%',
+    backgroundColor: 'white',
+    display: 'flex',
+    flexDirection: 'column',
+  },
+  header: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    padding: '16px 20px',
+    borderBottom: '1px solid #E5E7EB',
+  },
+  title: {
+    margin: 0,
+    fontSize: '18px',
+    fontWeight: 600,
+    color: '#111827',
+  },
+  closeButton: {
+    background: 'none',
+    border: 'none',
+    cursor: 'pointer',
+    padding: '4px',
+    color: '#6B7280',
+  },
+  tabs: {
+    display: 'flex',
+    borderBottom: '1px solid #E5E7EB',
+  },
+  tab: {
+    flex: 1,
+    padding: '12px 16px',
+    background: 'none',
+    border: 'none',
+    cursor: 'pointer',
+    fontSize: '14px',
+    fontWeight: 500,
+    color: '#6B7280',
+    borderBottom: '2px solid transparent',
+  },
+  tabActive: {
+    color: '#3B82F6',
+    borderBottomColor: '#3B82F6',
+  },
+  content: {
+    flex: 1,
+    overflow: 'hidden',
+    display: 'flex',
+    flexDirection: 'column',
+  },
+  chatContainer: {
+    flex: 1,
+    display: 'flex',
+    flexDirection: 'column',
+    overflow: 'hidden',
+  },
+  messages: {
+    flex: 1,
+    overflowY: 'auto',
+    padding: '16px',
+    overscrollBehavior: 'contain',
+  },
+  emptyState: {
+    textAlign: 'center',
+    padding: '40px 20px',
+  },
+  emptyTitle: {
+    margin: '0 0 8px 0',
+    fontSize: '16px',
+    fontWeight: 600,
+    color: '#111827',
+  },
+  emptyDescription: {
+    margin: '0 0 24px 0',
+    fontSize: '14px',
+    color: '#6B7280',
+  },
+  examples: {
+    textAlign: 'left',
+    backgroundColor: '#F9FAFB',
+    borderRadius: '8px',
+    padding: '16px',
+  },
+  examplesTitle: {
+    margin: '0 0 8px 0',
+    fontSize: '13px',
+    fontWeight: 500,
+    color: '#374151',
+  },
+  examplesList: {
+    margin: 0,
+    padding: '0 0 0 20px',
+    fontSize: '13px',
+    color: '#6B7280',
+    lineHeight: 1.8,
+  },
+  message: {
+    marginBottom: '12px',
+    padding: '12px 16px',
+    borderRadius: '12px',
+    fontSize: '14px',
+    lineHeight: 1.5,
+  },
+  userMessage: {
+    backgroundColor: '#3B82F6',
+    color: 'white',
+    marginLeft: '40px',
+  },
+  assistantMessage: {
+    backgroundColor: '#F3F4F6',
+    color: '#111827',
+    marginRight: '40px',
+  },
+  messageContent: {
+    whiteSpace: 'pre-wrap',
+  },
+  spinner: {
+    display: 'inline-block',
+    animation: 'spin 1s linear infinite',
+  },
+  successContainer: {
+    marginTop: '12px',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '8px',
+  },
+  successBadge: {
+    fontSize: '12px',
+    color: '#059669',
+    fontWeight: 500,
+  },
+  reloadButton: {
+    padding: '8px 16px',
+    backgroundColor: '#059669',
+    color: 'white',
+    border: 'none',
+    borderRadius: '6px',
+    fontSize: '13px',
+    fontWeight: 500,
+    cursor: 'pointer',
+  },
+  errorBadge: {
+    marginTop: '8px',
+    fontSize: '12px',
+    color: '#DC2626',
+    fontWeight: 500,
+  },
+  clearButton: {
+    background: 'none',
+    border: 'none',
+    color: '#6B7280',
+    fontSize: '12px',
+    cursor: 'pointer',
+    padding: '8px',
+    textAlign: 'center',
+    width: '100%',
+  },
+  inputForm: {
+    display: 'flex',
+    gap: '8px',
+    padding: '16px',
+    borderTop: '1px solid #E5E7EB',
+  },
+  input: {
+    flex: 1,
+    padding: '12px 16px',
+    border: '1px solid #E5E7EB',
+    borderRadius: '8px',
+    fontSize: '14px',
+    outline: 'none',
+  },
+  submitButton: {
+    padding: '12px 20px',
+    backgroundColor: '#3B82F6',
+    color: 'white',
+    border: 'none',
+    borderRadius: '8px',
+    fontSize: '16px',
+    cursor: 'pointer',
+    fontWeight: 600,
+  },
+  submitButtonDisabled: {
+    backgroundColor: '#93C5FD',
+    cursor: 'not-allowed',
+  },
+  overridesList: {
+    padding: '16px',
+    flex: 1,
+    overflowY: 'auto',
+    overscrollBehavior: 'contain',
+  },
+  overrideItem: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    padding: '16px',
+    backgroundColor: '#F9FAFB',
+    borderRadius: '8px',
+    marginBottom: '12px',
+  },
+  overrideInfo: {
+    flex: 1,
+    marginRight: '16px',
+  },
+  overrideName: {
+    margin: '0 0 4px 0',
+    fontSize: '14px',
+    fontWeight: 600,
+    color: '#111827',
+  },
+  overrideDescription: {
+    margin: 0,
+    fontSize: '13px',
+    color: '#6B7280',
+  },
+  toggle: {
+    padding: '6px 12px',
+    borderRadius: '4px',
+    border: 'none',
+    fontSize: '12px',
+    fontWeight: 600,
+    cursor: 'pointer',
+  },
+  toggleOn: {
+    backgroundColor: '#059669',
+    color: 'white',
+  },
+  toggleOff: {
+    backgroundColor: '#E5E7EB',
+    color: '#6B7280',
+  },
+  toggleDisabled: {
+    opacity: 0.5,
+    cursor: 'not-allowed',
+  },
+  overrideActions: {
+    display: 'flex',
+    gap: '8px',
+    marginTop: '8px',
+  },
+  actionButton: {
+    padding: '4px 8px',
+    fontSize: '11px',
+    fontWeight: 500,
+    border: '1px solid #E5E7EB',
+    borderRadius: '4px',
+    backgroundColor: 'white',
+    color: '#6B7280',
+    cursor: 'pointer',
+  },
+  actionButtonDisabled: {
+    opacity: 0.5,
+    cursor: 'not-allowed',
+  },
+  deleteButton: {
+    color: '#DC2626',
+    borderColor: '#FCA5A5',
+  },
+  editHeader: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    padding: '8px 16px',
+    backgroundColor: '#EFF6FF',
+    borderBottom: '1px solid #BFDBFE',
+  },
+  editHeaderText: {
+    fontSize: '13px',
+    fontWeight: 600,
+    color: '#1D4ED8',
+  },
+  editHeaderClose: {
+    background: 'none',
+    border: 'none',
+    cursor: 'pointer',
+    fontSize: '14px',
+    color: '#1D4ED8',
+    padding: '2px 6px',
+    borderRadius: '4px',
+  },
+};