/**
* DevTools Panel
*
* Development-only panel for viewing and editing flavioData configuration
* and monitoring PostHog events.
*/
import { useState, useRef, useEffect } from 'react';
import {
X,
Copy,
Check,
RotateCcw,
ChevronRight,
ChevronDown,
Code,
Database,
Activity,
Trash2,
} from 'lucide-react';
import useDevConfig from './hooks/useDevConfig';
import useEventCapture from './hooks/useEventCapture';
// ============================================================================
// Main Component
// ============================================================================
/**
* DevTools Component
*
* Floating panel with tabs for:
* - Flavio Data: View and edit flavioData configuration
* - Events: Monitor PostHog events in real-time
*/
const DevTools = () => {
const [isOpen, setIsOpen] = useState(false);
const [activeTab, setActiveTab] = useState('data');
const {
overrides,
effectiveConfig,
updateOverride,
removeOverride,
resetOverrides,
hasOverride,
} = useDevConfig();
const { events, clearEvents } = useEventCapture();
const hasAnyOverrides = Object.keys(overrides).length > 0;
const tabs = [
{ id: 'data', label: 'Flavio Data', icon: Database },
{ id: 'events', label: 'Events', icon: Activity, badge: events.length },
];
return (
<>
{/* Floating Button */}
{/* Panel */}
{isOpen && (
{/* Header */}
{/* Tabs */}
{tabs.map((tab) => (
))}
{/* Tab Content */}
{activeTab === 'data' && (
)}
{activeTab === 'events' && (
)}
{hasAnyOverrides && (
{Object.keys(overrides).length} override(s)
)}
{hasAnyOverrides && (
)}
{/* Content */}
{/* Footer */}
Click values to edit • Overrides persist in localStorage across
sessions
);
};
/**
* Events Tab - Monitor PostHog events
*/
const EventsTab = ({ events, clearEvents }) => {
const [selectedEvent, setSelectedEvent] = useState(null);
return (
<>
{/* Toolbar */}
{events.length} event(s) captured
{/* Content */}
{events.length === 0 ? (
No events captured yet
) : (
{events.map((event) => (
setSelectedEvent(
selectedEvent?.id === event.id
? null
: event
)
}
/>
))}
)}
Click event to expand details • Max 50 events stored
);
};
/**
* Single event row
*/
const EventRow = ({ event, isSelected, onSelect }) => {
const time = event.timestamp.toLocaleTimeString('en-US', {
hour12: false,
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
});
const hasProperties = Object.keys(event.properties).length > 0;
return (
{isSelected && hasProperties && (
{JSON.stringify(event.properties, null, 2)}
)}
);
};
// ============================================================================
// Shared Components
// ============================================================================
/**
* Recursive tree view for configuration object
*/
const ConfigTree = ({
data,
path,
overrides,
onUpdate,
onRemove,
hasOverride,
level = 0,
}) => {
if (data === null || data === undefined) {
return (
);
}
if (typeof data !== 'object') {
return (
);
}
if (Array.isArray(data)) {
return (
);
}
return (
);
};
/**
* Object node with collapsible children
*/
const ObjectNode = ({
data,
path,
overrides,
onUpdate,
onRemove,
hasOverride,
level,
}) => {
const entries = Object.entries(data);
return (
{entries.map(([key, value]) => {
const currentPath = path ? `${path}.${key}` : key;
const isObject = value !== null && typeof value === 'object';
return (
);
})}
{isExpanded && (
{JSON.stringify(data, null, 2)}
)}
);
};
/**
* Single property row with key and value
*/
const PropertyRow = ({
name,
value,
path,
isObject,
overrides,
onUpdate,
onRemove,
hasOverride,
level,
}) => {
const [isExpanded, setIsExpanded] = useState(level < 1);
const isOverridden = hasOverride(path);
return (
{isObject ? (
) : (
)}
{name}
{isOverridden && (
*
)}
:
{isObject ? (
{Array.isArray(value)
? `Array[${value.length}]`
: `{${Object.keys(value).length}}`}
) : (
)}
{isObject && isExpanded && (
)}
);
};
/**
* Value display with inline editing
*/
const ValueDisplay = ({ value, path, onUpdate, hasOverride, onRemove }) => {
const [isEditing, setIsEditing] = useState(false);
const [editValue, setEditValue] = useState('');
const inputRef = useRef(null);
const selectRef = useRef(null);
const isOverridden = hasOverride(path);
const displayValue =
value === null
? 'null'
: value === undefined
? 'undefined'
: String(value);
const valueType = value === null ? 'null' : typeof value;
const isBooleanOrNull = valueType === 'boolean' || valueType === 'null';
const getValueColor = () => {
if (value === null || value === undefined) return 'text-zinc-500';
if (typeof value === 'boolean')
return value ? 'text-green-400' : 'text-red-400';
if (typeof value === 'number') return 'text-orange-400';
if (typeof value === 'string') return 'text-emerald-400';
return 'text-zinc-300';
};
const handleStartEdit = () => {
setEditValue(valueType === 'string' ? value : JSON.stringify(value));
setIsEditing(true);
};
const handleSave = () => {
try {
let newValue;
if (valueType === 'number') {
newValue = Number(editValue);
} else if (editValue === 'null') {
newValue = null;
} else {
// Try to parse as JSON first
try {
newValue = JSON.parse(editValue);
} catch {
newValue = editValue;
}
}
onUpdate(path, newValue);
} catch {
// Keep as string if parsing fails
onUpdate(path, editValue);
}
setIsEditing(false);
};
const handleBooleanChange = (e) => {
const val = e.target.value;
let newValue;
if (val === 'true') newValue = true;
else if (val === 'false') newValue = false;
else newValue = null;
onUpdate(path, newValue);
setIsEditing(false);
};
const handleKeyDown = (e) => {
if (e.key === 'Enter') {
handleSave();
} else if (e.key === 'Escape') {
setIsEditing(false);
}
};
useEffect(() => {
if (isEditing) {
if (isBooleanOrNull && selectRef.current) {
selectRef.current.focus();
} else if (inputRef.current) {
inputRef.current.focus();
inputRef.current.select();
}
}
}, [isEditing, isBooleanOrNull]);
// Boolean/null dropdown editor
if (isEditing && isBooleanOrNull) {
return (
);
}
// Text input editor for other types
if (isEditing) {
return (
setEditValue(e.target.value)}
onBlur={handleSave}
onKeyDown={handleKeyDown}
className="flex-1 bg-zinc-700 text-zinc-100 px-2 py-0.5 rounded text-sm border border-sky-500 outline-none min-w-0"
/>
);
}
return (
{isOverridden && (
)}
);
};
/**
* Copy to clipboard button
*/
const CopyButton = ({ value, label, size = 'sm' }) => {
const [copied, setCopied] = useState(false);
const handleCopy = async () => {
try {
await navigator.clipboard.writeText(value);
setCopied(true);
setTimeout(() => setCopied(false), 1500);
} catch (e) {
console.error('Failed to copy:', e);
}
};
const sizeClasses = {
xs: 'p-0.5',
sm: 'px-2 py-1 text-xs',
};
return (
);
};
export default DevTools;