\n 📊 CSV Log Viewer\n

\n Upload CSV files and filter logs by email and trace ID\n

\n\n {/* File Upload Section */}\n

\n 0}\n />\n

\n\n {/* Upload Info and Warnings */}\n {uploadInfo && (\n

\n ✅\n \n Successfully loaded {uploadInfo.totalCount.toLocaleString()} records from \"{uploadInfo.fileName}\"\n \n

\n \n {uploadInfo.warnings && uploadInfo.warnings.length > 0 && (\n

\n ⚠️ Parsing warnings ({uploadInfo.totalErrors} total):\n

{warning}
\n ... and {uploadInfo.totalErrors! - uploadInfo.warnings.length} more warnings\n

\n )}\n

\n )}\n\n {/* Error Display */}\n {error && (\n

\n ❌\n {error}\n

\n )}\n\n {/* Filter Controls and Results */}\n {logs.length > 0 && (\n <>\n

\n \n

\n\n

\n \n

\n \n )}\n\n {/* Empty State */}\n {logs.length === 0 && !isLoading && !error && (\n

📁

\n No data loaded\n

\n Upload a CSV file to start viewing and filtering logs\n

\n )}\n\n {/* Keyboard Shortcuts */}\n 0}\n />\n

\n );\n}",[],[181,188,195],{"_102":205,"_95":206,"_151":207,"_153":189,"_154":136,"_155":208,"_157":158,"_104":209,"_99":210,"_160":200,"_162":211,"_163":22,"_164":-5,"_165":212,"_98":213},"459ee110-6cda-11f0-9eec-0224a6c84d84","FileUpload.tsx","5ad88352-6cd9-11f0-bb8a-0224a6c84d84",33,["D",1753834517483],3,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useRef, forwardRef, useImperativeHandle } from \"https://esm.sh/react@18.2.0\";\n\ninterface FileUploadProps {\n onFileUpload: (file: File) => void;\n isLoading: boolean;\n onClear: () => void;\n hasData: boolean;\n}\n\nexport interface FileUploadRef {\n triggerUpload: () => void;\n}\n\nconst FileUpload = forwardRef(({ \n onFileUpload, \n isLoading, \n onClear, \n hasData \n}, ref) => {\n const [isDragOver, setIsDragOver] = useState(false);\n const fileInputRef = useRef(null);\n\n useImperativeHandle(ref, () => ({\n triggerUpload: () => {\n if (!isLoading) {\n fileInputRef.current?.click();\n }\n }\n }));\n\n const handleDragOver = (e: React.DragEvent) => {\n e.preventDefault();\n setIsDragOver(true);\n };\n\n const handleDragLeave = (e: React.DragEvent) => {\n e.preventDefault();\n setIsDragOver(false);\n };\n\n const handleDrop = (e: React.DragEvent) => {\n e.preventDefault();\n setIsDragOver(false);\n\n const files = Array.from(e.dataTransfer.files);\n const csvFile = files.find(file => file.name.toLowerCase().endsWith('.csv'));\n\n if (csvFile) {\n onFileUpload(csvFile);\n }\n };\n\n const handleFileSelect = (e: React.ChangeEvent) => {\n const file = e.target.files?.[0];\n if (file) {\n onFileUpload(file);\n }\n };\n\n const handleClick = () => {\n fileInputRef.current?.click();\n };\n\n return (\n

\n \n \n\n

\n {isLoading ? '⏳' : '📄'}\n

\n \n

\n {isLoading ? 'Processing CSV file...' : 'Upload CSV File'}\n

\n {isLoading \n ? 'Please wait while we process your file'\n : 'Drag and drop your CSV file here, or click to browse'\n }\n

\n\n {!isLoading && (\n

\n Supported format: .csv files with tab-separated values\n

\n )}\n

\n\n {/* Action buttons */}\n

\n \n {isLoading ? (\n <>\n ⏳\n Processing...\n \n ) : (\n <>\n 📁 Choose File\n \n )}\n \n\n {hasData && !isLoading && (\n \n 🗑️ Clear Data\n \n )}\n

\n \n );\n});\n\nexport default FileUpload;",[],[181,188,206],{"_102":215,"_95":216,"_151":217,"_153":189,"_154":136,"_155":218,"_157":158,"_104":219,"_99":32,"_160":200,"_162":220,"_163":22,"_164":-5,"_165":221,"_98":222},"9f8d818c-6cd9-11f0-86f8-0224a6c84d84","FilterControls.tsx","9f8d8236-6cd9-11f0-86f8-0224a6c84d84",11,["D",1753834238896],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport type { FilterState } from \"../../shared/types.ts\";\n\ninterface FilterControlsProps {\n filters: FilterState;\n onFilterChange: (filters: Partial) => void;\n totalCount: number;\n filteredCount: number;\n onExport?: () => void;\n availableEmails?: string[];\n availableTraceIds?: string[];\n}\n\nexport default function FilterControls({ \n filters, \n onFilterChange, \n totalCount, \n filteredCount,\n onExport,\n availableEmails = [],\n availableTraceIds = []\n}: FilterControlsProps) {\n const [showEmailSuggestions, setShowEmailSuggestions] = useState(false);\n const [showTraceIdSuggestions, setShowTraceIdSuggestions] = useState(false);\n\n // Filter suggestions based on current input\n const emailSuggestions = availableEmails\n .filter(email => \n email.toLowerCase().includes(filters.email.toLowerCase()) && \n email !== filters.email\n )\n .slice(0, 5);\n\n const traceIdSuggestions = availableTraceIds\n .filter(traceId => \n traceId.toLowerCase().includes(filters.traceId.toLowerCase()) && \n traceId !== filters.traceId\n )\n .slice(0, 5);\n\n const handleClearFilters = () => {\n onFilterChange({ email: \"\", traceId: \"\" });\n };\n\n const hasActiveFilters = filters.email || filters.traceId;\n\n return (\n

\n {/* Email Filter */}\n

\n \n 📧 Filter by Email\n \n onFilterChange({ email: e.target.value })}\n onFocus={() => setShowEmailSuggestions(true)}\n onBlur={() => setTimeout(() => setShowEmailSuggestions(false), 200)}\n placeholder=\"Enter email address...\"\n className=\"filter-input w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none\"\n />\n \n {/* Email Suggestions */}\n {showEmailSuggestions && emailSuggestions.length > 0 && (\n

\n {emailSuggestions.map((email, index) => (\n {\n onFilterChange({ email });\n setShowEmailSuggestions(false);\n }}\n className=\"w-full px-3 py-2 text-left hover:bg-gray-50 text-sm border-b border-gray-100 last:border-b-0\"\n >\n {email}\n \n ))}\n

\n )}\n

\n\n {/* Trace ID Filter */}\n

\n \n 🔍 Filter by Trace ID\n \n onFilterChange({ traceId: e.target.value })}\n onFocus={() => setShowTraceIdSuggestions(true)}\n onBlur={() => setTimeout(() => setShowTraceIdSuggestions(false), 200)}\n placeholder=\"Enter trace ID...\"\n className=\"filter-input w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none\"\n />\n \n {/* Trace ID Suggestions */}\n {showTraceIdSuggestions && traceIdSuggestions.length > 0 && (\n

\n {traceIdSuggestions.map((traceId, index) => (\n {\n onFilterChange({ traceId });\n setShowTraceIdSuggestions(false);\n }}\n className=\"w-full px-3 py-2 text-left hover:bg-gray-50 text-sm font-mono text-xs border-b border-gray-100 last:border-b-0\"\n >\n {traceId}\n \n ))}\n

\n )}\n

\n\n {/* Action Buttons */}\n

\n {hasActiveFilters && (\n \n 🗑️ Clear\n \n )}\n \n {onExport && filteredCount > 0 && (\n \n 📥 Export\n \n )}\n

\n\n {/* Results Summary */}\n

\n 📊 Results:\n \n {filteredCount.toLocaleString()}\n \n {filteredCount !== totalCount && (\n <>\n of\n \n {totalCount.toLocaleString()}\n \n \n )}\n

\n\n {hasActiveFilters && (\n

\n 🔍 Active filters:\n {filters.email && (\n \n Email: {filters.email}\n \n )}\n {filters.traceId && (\n \n Trace: {filters.traceId}\n \n )}\n

\n )}\n

\n );\n}",[],[181,188,216],{"_102":224,"_95":225,"_151":226,"_153":189,"_154":136,"_155":227,"_157":158,"_104":228,"_99":32,"_160":200,"_162":229,"_163":22,"_164":-5,"_165":230,"_98":231},"26073be0-6cda-11f0-a3a0-0224a6c84d84","KeyboardShortcuts.tsx","26073c94-6cda-11f0-a3a0-0224a6c84d84",25,["D",1753834464504],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\n\ninterface KeyboardShortcutsProps {\n onUploadClick: () => void;\n onClearClick: () => void;\n onExportClick: () => void;\n hasData: boolean;\n}\n\nexport default function KeyboardShortcuts({ \n onUploadClick, \n onClearClick, \n onExportClick, \n hasData \n}: KeyboardShortcutsProps) {\n const [showHelp, setShowHelp] = useState(false);\n\n useEffect(() => {\n const handleKeyDown = (e: KeyboardEvent) => {\n // Don't trigger shortcuts when typing in inputs\n if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) {\n return;\n }\n\n if (e.ctrlKey || e.metaKey) {\n switch (e.key) {\n case 'u':\n e.preventDefault();\n onUploadClick();\n break;\n case 'k':\n e.preventDefault();\n if (hasData) {\n onClearClick();\n }\n break;\n case 'e':\n e.preventDefault();\n if (hasData) {\n onExportClick();\n }\n break;\n case '/':\n e.preventDefault();\n setShowHelp(prev => !prev);\n break;\n }\n }\n\n if (e.key === '?') {\n e.preventDefault();\n setShowHelp(prev => !prev);\n }\n\n if (e.key === 'Escape') {\n setShowHelp(false);\n }\n };\n\n document.addEventListener('keydown', handleKeyDown);\n return () => document.removeEventListener('keydown', handleKeyDown);\n }, [onUploadClick, onClearClick, onExportClick, hasData]);\n\n return (\n <>\n {/* Help Button */}\n setShowHelp(true)}\n className=\"fixed bottom-4 right-4 w-12 h-12 bg-blue-600 text-white rounded-full shadow-lg hover:bg-blue-700 transition-all z-20 flex items-center justify-center text-lg\"\n title=\"Keyboard shortcuts (Press ? for help)\"\n >\n ?\n \n\n {/* Help Modal */}\n {showHelp && (\n

\n ⌨️ Keyboard Shortcuts\n

\n setShowHelp(false)}\n className=\"text-gray-400 hover:text-gray-600 text-xl\"\n >\n ×\n \n

\n\n

\n Upload file\n \n Ctrl + U\n \n

\n\n {hasData && (\n <>\n

\n Clear data\n \n Ctrl + K\n \n

\n\n

\n Export data\n \n Ctrl + E\n \n

\n \n )}\n\n

\n Show/hide help\n \n ?\n \n

\n\n

\n Close help\n \n Esc\n \n

\n\n

\n 💡 Tip: Use Ctrl+F to search within the page\n

\n )}\n \n );\n}",[],[181,188,225],{"_102":233,"_95":234,"_151":235,"_153":189,"_154":136,"_155":236,"_157":158,"_104":237,"_99":32,"_160":200,"_162":238,"_163":22,"_164":-5,"_165":239,"_98":240},"ba5f6354-6cd9-11f0-aa4a-0224a6c84d84","LogTable.tsx","ba5f641c-6cd9-11f0-aa4a-0224a6c84d84",12,["D",1753834283890],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useMemo } from \"https://esm.sh/react@18.2.0\";\nimport type { LogRecordWithParsedData } from \"../../shared/types.ts\";\n\ninterface LogTableProps {\n logs: LogRecordWithParsedData[];\n}\n\ninterface SortConfig {\n key: keyof LogRecordWithParsedData | 'traceId' | 'event' | 'timestamp';\n direction: 'asc' | 'desc';\n}\n\nexport default function LogTable({ logs }: LogTableProps) {\n const [sortConfig, setSortConfig] = useState({ key: 'created_at', direction: 'desc' });\n const [expandedRows, setExpandedRows] = useState>(new Set());\n const [currentPage, setCurrentPage] = useState(1);\n const [pageSize, setPageSize] = useState(50);\n\n // Sort logs based on current sort configuration\n const sortedLogs = useMemo(() => {\n const sorted = [...logs].sort((a, b) => {\n let aValue: any;\n let bValue: any;\n\n switch (sortConfig.key) {\n case 'traceId':\n aValue = a.parsedData.traceId || '';\n bValue = b.parsedData.traceId || '';\n break;\n case 'event':\n aValue = a.parsedData.event || '';\n bValue = b.parsedData.event || '';\n break;\n case 'timestamp':\n aValue = a.parsedData.timestamp || '';\n bValue = b.parsedData.timestamp || '';\n break;\n default:\n aValue = a[sortConfig.key as keyof LogRecordWithParsedData] || '';\n bValue = b[sortConfig.key as keyof LogRecordWithParsedData] || '';\n }\n\n if (aValue < bValue) return sortConfig.direction === 'asc' ? -1 : 1;\n if (aValue > bValue) return sortConfig.direction === 'asc' ? 1 : -1;\n return 0;\n });\n\n return sorted;\n }, [logs, sortConfig]);\n\n // Paginate sorted logs\n const paginatedLogs = useMemo(() => {\n const startIndex = (currentPage - 1) * pageSize;\n return sortedLogs.slice(startIndex, startIndex + pageSize);\n }, [sortedLogs, currentPage, pageSize]);\n\n const totalPages = Math.ceil(sortedLogs.length / pageSize);\n\n const handleSort = (key: SortConfig['key']) => {\n setSortConfig(prev => ({\n key,\n direction: prev.key === key && prev.direction === 'asc' ? 'desc' : 'asc'\n }));\n };\n\n const toggleRowExpansion = (recordId: string) => {\n setExpandedRows(prev => {\n const newSet = new Set(prev);\n if (newSet.has(recordId)) {\n newSet.delete(recordId);\n } else {\n newSet.add(recordId);\n }\n return newSet;\n });\n };\n\n const formatTimestamp = (timestamp: string) => {\n try {\n return new Date(timestamp).toLocaleString();\n } catch {\n return timestamp;\n }\n };\n\n const getSortIcon = (key: SortConfig['key']) => {\n if (sortConfig.key !== key) return '↕️';\n return sortConfig.direction === 'asc' ? '⬆️' : '⬇️';\n };\n\n const copyToClipboard = async (text: string) => {\n try {\n await navigator.clipboard.writeText(text);\n } catch (err) {\n // Fallback for older browsers\n const textArea = document.createElement('textarea');\n textArea.value = text;\n document.body.appendChild(textArea);\n textArea.select();\n document.execCommand('copy');\n document.body.removeChild(textArea);\n }\n };\n\n if (logs.length === 0) {\n return (\n

🔍

No logs match your current filters

\n );\n }\n\n return (\n

\n {/* Pagination Controls - Top */}\n

\n Show:\n {\n setPageSize(Number(e.target.value));\n setCurrentPage(1);\n }}\n className=\"px-2 py-1 border border-gray-300 rounded text-sm\"\n >\n \n \n \n \n \n per page\n

\n\n

\n setCurrentPage(prev => Math.max(1, prev - 1))}\n disabled={currentPage === 1}\n className=\"px-3 py-1 bg-white border border-gray-300 rounded text-sm disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50\"\n >\n ← Previous\n \n \n \n Page {currentPage} of {totalPages} ({sortedLogs.length} total)\n \n \n setCurrentPage(prev => Math.min(totalPages, prev + 1))}\n disabled={currentPage === totalPages}\n className=\"px-3 py-1 bg-white border border-gray-300 rounded text-sm disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50\"\n >\n Next →\n \n

\n\n {/* Table */}\n

\n \n \n \n \n \n \n \n \n \n \n \n \n \n {paginatedLogs.map((log, index) => {\n const isExpanded = expandedRows.has(log['store_record.id']);\n return (\n \n \n \n \n \n \n \n \n \n \n \n {/* Expanded Row Details */}\n {isExpanded && (\n \n \n \n )}\n \n );\n })}\n \n

	handleSort('email')}\n >\n Email {getSortIcon('email')}\n	handleSort('traceId')}\n >\n Trace ID {getSortIcon('traceId')}\n	handleSort('event')}\n >\n Event {getSortIcon('event')}\n	handleSort('timestamp')}\n >\n Timestamp {getSortIcon('timestamp')}\n	handleSort('created_at')}\n >\n Created At {getSortIcon('created_at')}\n	\n Actions\n
\n toggleRowExpansion(log['store_record.id'])}\n className=\"text-blue-600 hover:text-blue-800 text-xs\"\n >\n {isExpanded ? '▼' : '▶️'}\n \n	\n {log.email}\n	\n {log.parsedData.traceId ? (\n copyToClipboard(log.parsedData.traceId!)}\n title=\"Click to copy\"\n >\n {log.parsedData.traceId.substring(0, 8)}...\n \n ) : (\n -\n )}\n	\n \n {log.parsedData.event \|\| 'N/A'}\n \n	\n {log.parsedData.timestamp ? formatTimestamp(log.parsedData.timestamp) : '-'}\n	\n {formatTimestamp(log.created_at)}\n	\n copyToClipboard(JSON.stringify(log, null, 2))}\n className=\"text-xs px-2 py-1 bg-gray-100 hover:bg-gray-200 rounded\"\n title=\"Copy full record\"\n >\n 📋\n \n
\n \n \n \n Record Details \n \n ID: {log['store_record.id']} \n Key: {log.key} \n Database ID: {log.database_id} \n Organization ID: {log.organization_id} \n User ID: {log.user_id} \n API App User ID: {log['api_appuser.id']} \n \n \n \n \n Parsed Data \n \n {JSON.stringify(log.parsedData, null, 2)} \n \n \n \n \n \n Raw Data \n \n {log.data} \n \n \n \n

\n\n {/* Pagination Controls - Bottom */}\n

\n setCurrentPage(1)}\n disabled={currentPage === 1}\n className=\"px-2 py-1 bg-white border border-gray-300 rounded text-sm disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50\"\n >\n ⏮️\n \n setCurrentPage(prev => Math.max(1, prev - 1))}\n disabled={currentPage === 1}\n className=\"px-3 py-1 bg-white border border-gray-300 rounded text-sm disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50\"\n >\n ← Previous\n \n \n \n {currentPage} / {totalPages}\n \n \n setCurrentPage(prev => Math.min(totalPages, prev + 1))}\n disabled={currentPage === totalPages}\n className=\"px-3 py-1 bg-white border border-gray-300 rounded text-sm disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50\"\n >\n Next →\n \n setCurrentPage(totalPages)}\n disabled={currentPage === totalPages}\n className=\"px-2 py-1 bg-white border border-gray-300 rounded text-sm disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50\"\n >\n ⏭️\n \n

\n );\n}",[],[181,188,234],[181,188],{"_102":243,"_95":244,"_151":245,"_153":182,"_154":136,"_155":183,"_157":158,"_104":246,"_99":32,"_160":247,"_162":248,"_163":22,"_164":-5,"_165":249,"_98":250},"3ee0df14-6cd9-11f0-b12e-0224a6c84d84","index.html","3ee0dfbe-6cd9-11f0-b12e-0224a6c84d84",["D",1753834076700],"file","\n\n\n \n \n CSV Log Viewer\n \n \n \n\n\n

\n \n\n",[],[181,244],{"_102":252,"_95":253,"_151":254,"_153":182,"_154":136,"_155":255,"_157":158,"_104":256,"_99":32,"_160":200,"_162":257,"_163":22,"_164":-5,"_165":258,"_98":259},"47dc666a-6cd9-11f0-958e-0224a6c84d84","index.tsx","47dc6822-6cd9-11f0-958e-0224a6c84d84",8,["D",1753834091773],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport App from \"./components/App.tsx\";\n\nconst root = createRoot(document.getElementById(\"root\")!);\nroot.render();",[],[181,253],{"_102":261,"_95":262,"_151":263,"_153":182,"_154":136,"_155":264,"_157":158,"_104":265,"_99":266,"_160":247,"_162":267,"_163":22,"_164":-5,"_165":268,"_98":269},"0613d6cc-6cda-11f0-bd55-0224a6c84d84","style.css","44c606b6-6cd9-11f0-9867-0224a6c84d84",23,["D",1753834410903],1,"/* Custom styles for the log viewer */\n\n.log-table {\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n font-size: 12px;\n}\n\n.log-table th {\n position: sticky;\n top: 0;\n background: white;\n z-index: 10;\n box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n}\n\n.log-table tbody tr:hover {\n background-color: #f8fafc !important;\n transform: scale(1.001);\n transition: all 0.2s ease;\n}\n\n.json-data {\n max-width: 300px;\n word-break: break-all;\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n font-size: 11px;\n}\n\n.upload-area {\n transition: all 0.3s ease;\n position: relative;\n overflow: hidden;\n}\n\n.upload-area::before {\n content: '';\n position: absolute;\n top: 0;\n left: -100%;\n width: 100%;\n height: 100%;\n background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.1), transparent);\n transition: left 0.5s;\n}\n\n.upload-area.drag-over {\n border-color: #3b82f6;\n background-color: #eff6ff;\n transform: scale(1.02);\n}\n\n.upload-area.drag-over::before {\n left: 100%;\n}\n\n.filter-input {\n transition: all 0.2s ease;\n}\n\n.filter-input:focus {\n transform: scale(1.02);\n box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);\n}\n\n/* Enhanced scrollbar styling */\n.log-table-container::-webkit-scrollbar {\n width: 12px;\n height: 12px;\n}\n\n.log-table-container::-webkit-scrollbar-track {\n background: #f1f5f9;\n border-radius: 6px;\n}\n\n.log-table-container::-webkit-scrollbar-thumb {\n background: linear-gradient(45deg, #cbd5e1, #94a3b8);\n border-radius: 6px;\n border: 2px solid #f1f5f9;\n}\n\n.log-table-container::-webkit-scrollbar-thumb:hover {\n background: linear-gradient(45deg, #94a3b8, #64748b);\n}\n\n.log-table-container::-webkit-scrollbar-corner {\n background: #f1f5f9;\n}\n\n/* Loading animation */\n@keyframes pulse {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.5; }\n}\n\n.loading-pulse {\n animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n\n/* Smooth transitions for table rows */\n.log-table tbody tr {\n transition: all 0.2s ease;\n}\n\n/* Enhanced button styles */\nbutton {\n transition: all 0.2s ease;\n}\n\nbutton:hover:not(:disabled) {\n transform: translateY(-1px);\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n}\n\nbutton:active:not(:disabled) {\n transform: translateY(0);\n}\n\n/* Copy feedback animation */\n@keyframes copyFeedback {\n 0% { background-color: #fef3c7; }\n 100% { background-color: transparent; }\n}\n\n.copy-feedback {\n animation: copyFeedback 0.5s ease-out;\n}\n\n/* Responsive improvements */\n@media (max-width: 768px) {\n .log-table {\n font-size: 10px;\n }\n \n .log-table th,\n .log-table td {\n padding: 8px 4px;\n }\n \n .json-data {\n max-width: 150px;\n font-size: 9px;\n }\n}\n\n/* Dark mode support */\n@media (prefers-color-scheme: dark) {\n .log-table-container::-webkit-scrollbar-track {\n background: #374151;\n }\n \n .log-table-container::-webkit-scrollbar-thumb {\n background: linear-gradient(45deg, #6b7280, #9ca3af);\n border-color: #374151;\n }\n}",[],[181,262],[181],{"_102":272,"_95":273,"_151":274,"_153":-5,"_154":136,"_155":210,"_157":158,"_104":275,"_99":32,"_160":161,"_162":-5,"_163":22,"_164":-5,"_165":276,"_98":286},"31465bae-6cd9-11f0-9e07-0224a6c84d84","shared","9328b4b9-67b6-4eb1-bbe4-1fec191a5939",["D",1753834053874],[277],{"_102":278,"_95":279,"_151":280,"_153":274,"_154":136,"_155":281,"_157":158,"_104":282,"_99":266,"_160":200,"_162":283,"_163":22,"_164":-5,"_165":284,"_98":285},"e8b55b50-6cd9-11f0-9cce-0224a6c84d84","types.ts","314654b0-6cd9-11f0-9e07-0224a6c84d84",17,["D",1753834361629],"// Shared types for the log viewer application\n\nexport interface LogRecord {\n 'store_record.id': string;\n key: string;\n data: string; // JSON string\n created_at: string;\n updated_at: string;\n database_id: string;\n organization_id: string;\n user_id: string;\n 'api_appuser.id': string;\n email: string;\n}\n\nexport interface ParsedLogData {\n traceId?: string;\n mod?: {\n id: string;\n version: string;\n };\n url?: string;\n from?: string;\n event?: string;\n timestamp?: string;\n platformType?: string;\n [key: string]: any;\n}\n\nexport interface LogRecordWithParsedData extends LogRecord {\n parsedData: ParsedLogData;\n}\n\nexport interface FilterState {\n email: string;\n traceId: string;\n}\n\nexport interface UploadResponse {\n success: boolean;\n records: LogRecordWithParsedData[];\n totalCount: number;\n processedRows: number;\n fileName: string;\n fileSize: number;\n warnings?: string[];\n totalErrors?: number;\n error?: string;\n details?: string;\n foundColumns?: string[];\n requiredColumns?: string[];\n}\n\nexport interface AnalyticsData {\n totalRecords: number;\n uniqueEmails: number;\n uniqueTraceIds: number;\n dateRange: {\n start: string;\n end: string;\n } | null;\n topEvents: Array<{\n event: string;\n count: number;\n }>;\n recentUploads: Array<{\n fileName: string;\n uploadTime: string;\n recordCount: number;\n }>;\n}",[],[273,279],[273],{"_102":288,"_95":289,"_151":290,"_153":-5,"_154":136,"_155":135,"_157":158,"_104":291,"_99":266,"_160":247,"_162":292,"_163":22,"_164":-5,"_165":293,"_98":294},"5d561652-6cda-11f0-ae4a-0224a6c84d84","README.md","2d5ee11e-6cd9-11f0-a946-0224a6c84d84",["D",1753834557294],"# CSV Log Viewer\n\nA comprehensive TypeScript-based log viewer application for analyzing CSV log data with advanced filtering, sorting, and export capabilities.\n\n## 🚀 Features\n\n### Core Functionality\n- **📁 File Upload**: Drag-and-drop or click to upload CSV files (up to 50MB)\n- **📧 Email Filter**: Filter logs by email address with autocomplete suggestions\n- **🔍 Trace ID Filter**: Filter logs by data.traceId with autocomplete suggestions\n- **⚡ Real-time Search**: Instant filtering as you type\n- **📊 Data Export**: Export filtered results to CSV format\n\n### Advanced Features\n- **🔄 Sorting**: Click column headers to sort by any field\n- **📄 Pagination**: Handle large datasets with configurable page sizes (25/50/100/200)\n- **🔍 Row Expansion**: Click to expand rows and view detailed JSON data\n- **📋 Copy to Clipboard**: Copy individual trace IDs or full records\n- **⌨️ Keyboard Shortcuts**: Efficient navigation with hotkeys\n- **📱 Responsive Design**: Works seamlessly on desktop and mobile\n- **⚠️ Error Handling**: Comprehensive error reporting and data validation\n\n### Data Processing\n- **🔧 Smart CSV Parsing**: Handles both tab-separated and comma-separated values\n- **🛡️ Data Validation**: Validates required columns and data integrity\n- **🔄 JSON Parsing**: Automatically parses JSON data fields with fallback handling\n- **📈 Analytics**: Track parsing warnings and data quality issues\n\n## 🏗️ Project Structure\n\n```\n├── backend/\n│ └── index.ts # Hono-based HTTP server with file upload handling\n├── frontend/\n│ ├── components/\n│ │ ├── App.tsx # Main application component with state management\n│ │ ├── FileUpload.tsx # Drag-and-drop file upload widget\n│ │ ├── FilterControls.tsx # Advanced filtering with autocomplete\n│ │ ├── LogTable.tsx # Sortable, paginated data table\n│ │ └── KeyboardShortcuts.tsx # Keyboard navigation support\n│ ├── index.html # Main HTML template with TailwindCSS\n│ ├── index.tsx # React application entry point\n│ └── style.css # Enhanced custom styles and animations\n├── shared/\n│ └── types.ts # Comprehensive TypeScript type definitions\n├── sample_data.csv # Example CSV file for testing\n└── README.md\n```\n\n## 🎯 Usage\n\n### Getting Started\n1. **Upload Data**: Use the file upload widget to select your CSV file\n2. **Apply Filters**: Use email and trace ID filters to narrow down results\n3. **Explore Data**: Click on rows to expand and view detailed information\n4. **Export Results**: Export filtered data for further analysis\n\n### Keyboard Shortcuts\n- **Ctrl + U**: Upload new file\n- **Ctrl + K**: Clear all data\n- **Ctrl + E**: Export filtered data\n- **?**: Show/hide keyboard shortcuts help\n- **Esc**: Close help modal\n\n### CSV Format Requirements\n\nThe application expects CSV data with these **required columns**:\n- `store_record.id` - Unique record identifier\n- `key` - Record key/identifier\n- `data` - JSON string containing log data\n- `email` - User email address\n\n**Optional columns** (will be displayed if present):\n- `created_at` - Record creation timestamp\n- `updated_at` - Record update timestamp\n- `database_id` - Database identifier\n- `organization_id` - Organization identifier\n- `user_id` - User identifier\n- `api_appuser.id` - API app user identifier\n\n### JSON Data Structure\n\nThe `data` field should contain JSON with these common fields:\n```json\n{\n \"mod\": {\n \"id\": \"@foundever/everassist/wrap-up\",\n \"version\": \"4.8.6\"\n },\n \"url\": \"https://example.com\",\n \"data\": {\n \"from\": \"fab\",\n \"traceId\": \"ec18475f-9549-481c-a1c4-497801153f57\"\n },\n \"email\": \"user@example.com\",\n \"event\": \"callSummaryStart:click\",\n \"timestamp\": \"2025-07-29T14:11:36.391Z\",\n \"platformType\": \"contentScript\"\n}\n```\n\n## 🔧 Technical Details\n\n### Backend (Hono)\n- **File Processing**: Handles large CSV files with streaming\n- **Error Handling**: Comprehensive validation and error reporting\n- **CORS Support**: Automatic cross-origin request handling\n- **Health Monitoring**: Built-in health check endpoint\n\n### Frontend (React + TypeScript)\n- **State Management**: Efficient React hooks for data and UI state\n- **Performance**: Optimized rendering with useMemo and pagination\n- **Accessibility**: Keyboard navigation and screen reader support\n- **Responsive**: Mobile-first design with TailwindCSS\n\n### Data Processing Pipeline\n1. **Upload Validation**: File type, size, and format checks\n2. **CSV Parsing**: Smart detection of separators (tab/comma)\n3. **Data Validation**: Required column verification\n4. **JSON Processing**: Safe parsing with error recovery\n5. **Filtering**: Real-time client-side filtering\n6. **Export**: Clean CSV generation with proper escaping\n\n## 🚨 Error Handling\n\nThe application provides detailed error reporting for:\n- **File Format Issues**: Invalid CSV structure or encoding\n- **Missing Columns**: Required fields not found\n- **JSON Parsing Errors**: Malformed data fields\n- **Size Limitations**: Files exceeding 50MB limit\n- **Network Issues**: Upload and processing failures\n\n## 📊 Performance\n\n- **Large File Support**: Handles files up to 50MB\n- **Efficient Filtering**: Client-side filtering with debouncing\n- **Pagination**: Renders only visible rows for better performance\n- **Memory Management**: Optimized data structures and cleanup\n\n## 🔒 Security\n\n- **File Validation**: Strict CSV file type checking\n- **Size Limits**: Prevents oversized file uploads\n- **Data Sanitization**: Safe JSON parsing and HTML escaping\n- **No Persistence**: Data is processed in-memory only\n\n## 🎨 UI/UX Features\n\n- **Drag & Drop**: Intuitive file upload experience\n- **Loading States**: Clear feedback during processing\n- **Error Messages**: User-friendly error descriptions\n- **Autocomplete**: Smart suggestions for filters\n- **Copy Actions**: One-click copying of data\n- **Responsive Tables**: Horizontal scrolling on mobile\n- **Dark Mode**: Automatic system preference detection",[],[289],{"_102":296,"_95":297,"_151":298,"_153":-5,"_154":136,"_155":266,"_157":158,"_104":299,"_99":32,"_160":200,"_162":72,"_163":22,"_164":-5,"_165":300,"_98":301},"977dc8ea-6cd8-11f0-931b-0224a6c84d84","main.tsx","977dc99e-6cd8-11f0-931b-0224a6c84d84",["D",1753833795876],[],[297],{"_102":303,"_95":304,"_151":305,"_153":-5,"_154":136,"_155":306,"_157":158,"_104":307,"_99":32,"_160":247,"_162":308,"_163":22,"_164":-5,"_165":309,"_98":310},"1ae0e82e-6cda-11f0-92f1-0224a6c84d84","sample_data.csv","1ae0e8f6-6cda-11f0-92f1-0224a6c84d84",24,["D",1753834445801],"store_record.id\tkey\tdata\tcreated_at\tupdated_at\tdatabase_id\torganization_id\tuser_id\tapi_appuser.id\temail\n98b75de3-2d4b-404f-b1e8-2540a273fef6\tedgar.tabianan@sitel.com-2025-07-29T14:11:36.391Z\t{\"mod\": {\"id\": \"@foundever/everassist/wrap-up\", \"version\": \"4.8.6\"}, \"url\": \"\", \"data\": {\"from\": \"fab\", \"traceId\": \"ec18475f-9549-481c-a1c4-497801153f57\"}, \"email\": \"edgar.tabianan@sitel.com\", \"event\": \"callSummaryStart:click\", \"timestamp\": \"2025-07-29T14:11:36.391Z\", \"platformType\": \"contentScript\"}\t11:39.4\t11:39.4\t260421e4-9f01-41e7-860f-886f23e34411\tec096a08-58f3-4efd-b2ab-b153bd903533\t\t42fa14ac-6ec5-4a3f-a19d-99711060c4ac\tedgar.tabianan@sitel.com\n99c85ef4-3e5c-515g-c2f9-3651b384ggh7\tjohn.doe@company.com-2025-07-29T15:22:47.582Z\t{\"mod\": {\"id\": \"@foundever/everassist/call-handler\", \"version\": \"4.8.7\"}, \"url\": \"https://example.com\", \"data\": {\"from\": \"system\", \"traceId\": \"fd29586g-0660-592d-b2d5-608912264g68\"}, \"email\": \"john.doe@company.com\", \"event\": \"callStart:automatic\", \"timestamp\": \"2025-07-29T15:22:47.582Z\", \"platformType\": \"webApp\"}\t12:45.7\t12:45.7\t260421e4-9f01-41e7-860f-886f23e34411\tec096a08-58f3-4efd-b2ab-b153bd903533\t\t53gb25bd-7fd6-5b4g-b28e-00822171f5bd\tjohn.doe@company.com\n00d96fg5-4f6d-626h-d3g0-4762c495hhi8\tjane.smith@corp.org-2025-07-29T16:33:58.693Z\t{\"mod\": {\"id\": \"@foundever/everassist/notes\", \"version\": \"4.8.8\"}, \"url\": \"https://notes.example.com\", \"data\": {\"from\": \"user\", \"traceId\": \"ge30697h-1771-603e-c3e6-719023375h79\"}, \"email\": \"jane.smith@corp.org\", \"event\": \"notesSave:manual\", \"timestamp\": \"2025-07-29T16:33:58.693Z\", \"platformType\": \"extension\"}\t13:56.8\t13:56.8\t260421e4-9f01-41e7-860f-886f23e34411\tec096a08-58f3-4efd-b2ab-b153bd903533\t\t64hc36ce-8ge7-6c5h-c39f-11933282g6ce\tjane.smith@corp.org\n11e07gh6-5g7e-737i-e4h1-5873d506iij9\tedgar.tabianan@sitel.com-2025-07-29T17:44:09.804Z\t{\"mod\": {\"id\": \"@foundever/everassist/wrap-up\", \"version\": \"4.8.6\"}, \"url\": \"\", \"data\": {\"from\": \"fab\", \"traceId\": \"ec18475f-9549-481c-a1c4-497801153f57\"}, \"email\": \"edgar.tabianan@sitel.com\", \"event\": \"callSummaryEnd:click\", \"timestamp\": \"2025-07-29T17:44:09.804Z\", \"platformType\": \"contentScript\"}\t14:07.9\t14:07.9\t260421e4-9f01-41e7-860f-886f23e34411\tec096a08-58f3-4efd-b2ab-b153bd903533\t\t42fa14ac-6ec5-4a3f-a19d-99711060c4ac\tedgar.tabianan@sitel.com",[],[304],"files",[148,167,179,186,193,204,214,223,232,242,251,260,271,277,287,295,302],"counts",{"_315":32,"_316":266,"_317":32,"_318":319},"pulls","branches","forks","envVars",{"_320":32,"_321":32},"count","emptyCount","contents",[324,327,330,333,336,339],{"_102":149,"_95":150,"_151":152,"_153":-5,"_154":136,"_155":156,"_157":158,"_104":325,"_99":32,"_160":161,"_162":-5,"_163":22,"_164":-5,"_98":326},["D",1753834066134],[150],{"_102":180,"_95":181,"_151":182,"_153":-5,"_154":136,"_155":183,"_157":158,"_104":328,"_99":32,"_160":161,"_162":-5,"_163":22,"_164":-5,"_98":329},["D",1753834076700],[181],{"_102":272,"_95":273,"_151":274,"_153":-5,"_154":136,"_155":210,"_157":158,"_104":331,"_99":32,"_160":161,"_162":-5,"_163":22,"_164":-5,"_98":332},["D",1753834053874],[273],{"_102":288,"_95":289,"_151":290,"_153":-5,"_154":136,"_155":135,"_157":158,"_104":334,"_99":266,"_160":247,"_162":292,"_163":22,"_164":-5,"_98":335},["D",1753834557294],[289],{"_102":296,"_95":297,"_151":298,"_153":-5,"_154":136,"_155":266,"_157":158,"_104":337,"_99":32,"_160":200,"_162":72,"_163":22,"_164":-5,"_98":338},["D",1753833795876],[297],{"_102":303,"_95":304,"_151":305,"_153":-5,"_154":136,"_155":306,"_157":158,"_104":340,"_99":32,"_160":247,"_162":308,"_163":22,"_164":-5,"_98":341},["D",1753834445801],[304],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.remixes",{"_93":94,"_95":96,"_100":350,"_317":355,"_356":-5},{"_102":103,"_95":96,"_104":351,"_106":-5,"_107":22,"_108":109,"_110":-5,"_111":-5,"_14":112,"_113":-5,"_114":22,"_115":-5,"_116":32,"_16":117,"_118":119,"_120":119,"_121":122,"_123":122,"_124":122,"_125":119,"_126":119,"_23":352,"_130":353,"_133":354,"_145":22},["D",1753833795863],{"_93":94,"_128":129},{"_93":94,"_132":129},{"_99":135,"_95":43,"_102":136,"_137":103,"_138":-5,"_139":-5,"_140":-5,"_141":-5,"_142":-5,"_143":96,"_144":94},[],"upstream","actionData","errors"]

\n 📊 CSV Log Viewer\n

\n No data loaded\n

\n {isLoading ? 'Processing CSV file...' : 'Upload CSV File'}\n

\n ⌨️ Keyboard Shortcuts\n

Record Details

Parsed Data

Raw Data

pixiebrix

telemetry-db-trace-viewer