[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_261":262,"_263":264},"routes/_app.x.$handle.$name",{"_98":97,"_32":46,"_106":88,"_27":107,"_13":14,"_108":-5,"_11":109,"_110":111,"_112":113,"_114":115,"_116":117,"_20":-5,"_118":-5,"_119":-5,"_120":25,"_121":122,"_123":60,"_124":-5,"_125":-5,"_126":127},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_44":45,"_32":46,"_39":47,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":-5,"_18":56,"_57":58,"_59":60,"_61":60,"_62":-5,"_63":64,"_65":66,"_67":-5,"_68":-5,"_69":-5,"_70":-5,"_71":72,"_73":72,"_74":75,"_76":75,"_77":75,"_78":72,"_79":72,"_80":81,"_82":83,"_84":85,"_86":25},"version",49,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":35,"_36":38,"_39":40,"_41":14,"_42":43,"_24":25},"previous",{"_30":31,"_32":33,"_34":35,"_36":37},"deleted",false,"deletedHere","path","backend/services/pdf-processor.ts","latestPath","fileId","11d48732-46b9-11f0-8fe1-76b3cceeab13","name","pdf-processor.ts","fileType","script","content","import type { InvoiceData, ProcessingRequest, ProcessingResult } from \"../../shared/types.ts\";\nimport { ClaudeService } from \"./claude.ts\";\n\nexport async function processPDFWithClaude(request: ProcessingRequest): Promise {\n const claudeService = new ClaudeService();\n\n // Extract data using Claude\n const claudeResponse = await claudeService.extractInvoiceData(\n request.pdfBase64,\n request.fieldsToExtract,\n );\n\n // Generate HTML output if requested\n let htmlOutput: string | undefined;\n let htmlResponse = { processingTime: 0, tokenUsage: { input: 0, output: 0, total: 0 } };\n if (request.outputFormat === \"html\") {\n const htmlData = await claudeService.exctractInvoiceHtml(request.pdfBase64, claudeResponse.extractedData);\n htmlOutput = htmlData.extractedText;\n htmlResponse.processingTime = htmlData.processingTime;\n htmlResponse.tokenUsage = htmlData.tokenUsage;\n }\n\n return {\n extractedData: claudeResponse.extractedData,\n htmlOutput,\n processingTime: claudeResponse.processingTime + htmlResponse.processingTime,\n tokenUsage: {\n input: claudeResponse.tokenUsage.input + htmlResponse.tokenUsage.input,\n },\n };\n}\n\nfunction generateHTMLFromInvoiceData(data: InvoiceData): string {\n // Create modern, professional HTML invoice replica\n const html = `\n\n\n \n \n Invoice\n \n\n\n

INVOICE

Generated from PDF Document

\n \n

Invoice From

\n ${\n data.InvoiceFrom ? escapeHtml(data.InvoiceFrom) : \"Not specified\"\n }\n

\n \n

Invoice To

\n ${\n data.InvoiceTo ? escapeHtml(data.InvoiceTo) : \"Not specified\"\n }\n

\n \n

Payment Details

Paid By

\n ${\n data.PaidBy ? escapeHtml(data.PaidBy) : \"Not specified\"\n }\n

Paid To

\n ${\n data.PaidTo ? escapeHtml(data.PaidTo) : \"Not specified\"\n }\n

\n \n

Important Dates

Invoice Date

\n ${\n data.InvoiceDate ? formatDate(data.InvoiceDate) : \"Not specified\"\n }\n

Paid Date

\n ${\n data.PaidDate ? formatDate(data.PaidDate) : \"Not specified\"\n }\n

\n \n ${\n data.Amount !== null || data.Currency\n ? `\n

Total Amount

\n ${data.Currency || \"\"} ${data.Amount !== null ? formatAmount(data.Amount) : \"Not specified\"}\n

\n `\n : \"\"\n }\n \n ${\n data.LineItems && data.LineItems.length > 0\n ? `\n

\n Line Items\n

\n ${\n data.LineItems.map(item => `\n

\n ${escapeHtml(item)}\n

\n `).join(\"\")\n }\n

\n `\n : \"\"\n }\n

\n \n \n

INVOICE

Generated from PDF Document

\n \n

Invoice From

\n ${\n data.InvoiceFrom ? escapeHtml(data.InvoiceFrom) : \"Not specified\"\n }\n

\n \n

Invoice To

\n ${\n data.InvoiceTo ? escapeHtml(data.InvoiceTo) : \"Not specified\"\n }\n

\n \n

Payment Details

Paid By

\n ${\n data.PaidBy ? escapeHtml(data.PaidBy) : \"Not specified\"\n }\n

Paid To

\n ${\n data.PaidTo ? escapeHtml(data.PaidTo) : \"Not specified\"\n }\n

\n \n

Important Dates

Invoice Date

\n ${\n data.InvoiceDate ? formatDate(data.InvoiceDate) : \"Not specified\"\n }\n

Paid Date

\n ${\n data.PaidDate ? formatDate(data.PaidDate) : \"Not specified\"\n }\n

\n \n ${\n data.Amount !== null || data.Currency\n ? `\n

Total Amount

\n ${data.Currency || \"\"} ${data.Amount !== null ? formatAmount(data.Amount) : \"Not specified\"}\n

\n `\n : \"\"\n }\n \n ${\n data.LineItems && data.LineItems.length > 0\n ? `\n

\n Line Items\n

\n ${\n data.LineItems.map(item => `\n

\n ${escapeHtml(item)}\n

\n `).join(\"\")\n }\n

\n `\n : \"\"\n }\n

\n \n \n

\n\n`;\n\n return html;\n}\n\nfunction escapeHtml(text: string): string {\n const entities: { [key: string]: string } = {\n \"&\": \"&\",\n \"<\": \"<\",\n \">\": \">\",\n \"\\\"\": \""\",\n \"'\": \"'\",\n };\n return text.replace(/[&<>\"']/g, char => entities[char] || char);\n}\n\nfunction formatDate(dateString: string): string {\n try {\n const date = new Date(dateString);\n return date.toLocaleDateString(\"en-US\", {\n year: \"numeric\",\n month: \"long\",\n day: \"numeric\",\n });\n } catch {\n return dateString;\n }\n}\n\nfunction formatAmount(amount: number): string {\n return new Intl.NumberFormat(\"en-US\", {\n minimumFractionDigits: 2,\n maximumFractionDigits: 2,\n }).format(amount);\n}","createdAt",["D",1749644583647],"branchVersion","branchId","d324f170-46b8-11f0-a15f-76b3cceeab13","id","d324a648-46b8-11f0-a15f-76b3cceeab13","pdf-to-html",["D",1749642007878],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","PDF to HTML converter using Claude 3.5 Haiku","imageUrl","1591349e-125d-4fb7-930d-cf293627961f","pinnedFileId","55ab62c8-46b9-11f0-863e-76b3cceeab13","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","4d7791fe-1f5b-4867-8b6e-34823c16ee48","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_98":97,"_105":101},"org",{"_98":97,"_99":-5,"_100":101,"_18":56,"_102":103,"_104":25},"branch",{"_13":87,"_32":88,"_44":43,"_89":45,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":46,"_96":97},"isOwned",138,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","prashamtrivedi","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yaUF5OXE3VlcwNVRwRU9wSTRmcE1DZ0FSM1UifQ","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_44":45,"_32":46,"_39":257,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":-5,"_18":56,"_57":58,"_59":60,"_61":60,"_62":-5,"_63":64,"_65":66,"_67":-5,"_68":-5,"_69":-5,"_70":-5,"_71":72,"_73":72,"_74":75,"_76":75,"_77":75,"_78":72,"_79":72,"_80":258,"_82":259,"_84":260,"_86":25},"tree",[172,177,181,183],"files",[172,173,174,175,176,177,178,179,180,181,182,183],"counts",{"_161":64,"_162":158,"_163":64,"_164":165,"_166":167},"contents",[128,129,130,131],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_44":155,"_32":156,"_30":157,"_135":-5,"_42":43,"_41":158,"_137":60,"_39":159,"_13":64,"_34":147,"_36":-5,"_24":25,"_140":-5,"_27":160},{"_44":149,"_32":150,"_30":151,"_135":-5,"_42":43,"_41":152,"_137":60,"_39":153,"_13":64,"_34":147,"_36":-5,"_24":25,"_140":-5,"_27":154},{"_44":142,"_32":143,"_30":144,"_135":-5,"_42":43,"_41":145,"_137":60,"_39":146,"_13":64,"_34":147,"_36":-5,"_24":25,"_140":-5,"_27":148},{"_44":132,"_32":133,"_30":134,"_135":-5,"_42":43,"_41":136,"_137":60,"_39":138,"_13":64,"_34":20,"_36":139,"_24":25,"_140":-5,"_27":141},"93ae20ce-46b9-11f0-adc2-76b3cceeab13","README.md","93ae21b4-46b9-11f0-adc2-76b3cceeab13","parentId",12,"latest",["D",1749642330897],"# PDF to HTML Converter\n\nA powerful Val Town application that converts PDF invoices to beautiful HTML replicas using Claude 3.5 Haiku's advanced document analysis capabilities.\n\n## 🚀 Features\n\n- **PDF Upload & Processing**: Drag-and-drop or browse to upload PDF invoices\n- **AI-Powered Extraction**: Uses Claude 3.5 Haiku for accurate data extraction\n- **Configurable Fields**: Choose which invoice fields to extract\n- **Multiple Output Formats**: Generate HTML replicas or structured JSON\n- **Real-time Processing**: Live status updates and error handling\n- **Cost Tracking**: Token usage and cost estimation\n- **Mobile Responsive**: Works on all devices\n- **Professional UI**: Clean, modern interface built with React and Tailwind\n\n## 📋 Extractable Fields\n\n- **InvoiceFrom**: Company/person who issued the invoice\n- **InvoiceTo**: Company/person who received the invoice \n- **PaidBy**: Who made the payment\n- **PaidTo**: Who received the payment\n- **Amount**: Total amount (numeric value)\n- **Currency**: Currency code (USD, EUR, INR, etc.)\n- **InvoiceDate**: Date invoice was issued\n- **PaidDate**: Date payment was made\n- **LineItems**: Array of line item descriptions\n\n## 🛠 Setup Instructions\n\n### Environment Variables\nSet up your environment variables in Val Town:\n```\nANTHROPIC_API_KEY=your_claude_api_key_here\n```\n\n## 💰 Cost Estimation\n\n### Claude 3.5 Haiku Pricing (converted to INR)\n- **Input tokens**: ₹67 per million tokens\n- **Output tokens**: ₹336 per million tokens\n\n### Typical Usage Costs\n- **Small invoice (1-2 pages)**: ₹1-3 per processing\n- **Medium invoice (3-5 pages)**: ₹3-8 per processing \n- **Large invoice (6+ pages)**: ₹8-15 per processing\n\n## 🔧 API Endpoints\n\n### GET `/`\nMain web interface for PDF upload and processing\n\n### POST `/api/process-pdf`\nProcess PDF file and extract invoice data\n\n**Request**: \n- `pdf`: PDF file (multipart/form-data)\n- `fields`: JSON array of fields to extract\n- `format`: \"html\" or \"json\"\n\n### GET `/api/health`\nHealth check endpoint\n\n### GET `/api/config` \nGet available fields and configuration\n\n## 🎯 Usage Examples\n\n### Web Interface\n1. Open your Val Town URL\n2. Drag and drop a PDF invoice\n3. Select fields to extract\n4. Choose output format (HTML/JSON)\n5. Click \"Extract Data\"\n6. Download results\n\n### API Usage\n```javascript\nconst formData = new FormData();\nformData.append('pdf', pdfFile);\nformData.append('fields', JSON.stringify(['InvoiceFrom', 'Amount', 'Currency']));\nformData.append('format', 'html');\n\nconst response = await fetch('/api/process-pdf', {\n method: 'POST',\n body: formData\n});\n\nconst result = await response.json();\n```\n\n## 🔍 Technical Details\n\n### Architecture\n- **Backend**: Hono framework for HTTP handling\n- **AI Processing**: Claude 3.5 Haiku via Anthropic API\n- **Frontend**: React 18 with TypeScript\n- **Styling**: Tailwind CSS + custom CSS\n- **File Handling**: Base64 encoding for PDF processing\n\n### Security Features\n- File type validation (PDF only)\n- File size limits (10MB max)\n- Input sanitization\n- Error boundary handling\n- CORS protection\n\n## 🚨 Limitations\n\n- **File Size**: Maximum 10MB per PDF\n- **File Type**: PDF files only\n- **Language**: Primarily optimized for English invoices\n- **Processing Time**: 3-15 seconds depending on PDF complexity\n- **Rate Limits**: Subject to Anthropic API limits\n\n## 🛡 Error Handling\n\nThe application includes comprehensive error handling for:\n- Invalid file types/sizes\n- Network failures\n- API errors\n- Parsing failures\n- Token limit exceeded\n\n## 📊 Monitoring\n\nTrack your usage with built-in monitoring:\n- Processing time per request\n- Token usage statistics\n- Cost estimation\n- Error rates\n- Success/failure metrics\n\n---\n\n**Built with ❤️ using Val Town, Claude 3.5 Haiku, and modern web technologies.**","label",[133],"df6e0732-46b8-11f0-99ef-76b3cceeab13","shared","df6e080e-46b8-11f0-99ef-76b3cceeab13",3,["D",1749642028488],"directory",[143],"e2802cc0-46b8-11f0-8915-76b3cceeab13","frontend","e2802d9c-46b8-11f0-8915-76b3cceeab13",4,["D",1749642033639],[150],"d761cf88-46b8-11f0-be7a-76b3cceeab13","backend","d761d0b4-46b8-11f0-be7a-76b3cceeab13",1,["D",1749642014987],[156],"pulls","branches","forks","envVars",{"_168":170,"_171":64},"connections",{"_168":64,"_169":64},"count","unfilledCount",2,"emptyCount",{"_44":155,"_32":156,"_30":157,"_135":-5,"_42":43,"_41":158,"_137":60,"_39":254,"_13":64,"_34":147,"_36":-5,"_24":25,"_140":-5,"_185":255,"_27":256},{"_44":250,"_32":240,"_30":236,"_135":157,"_42":43,"_41":170,"_137":60,"_39":251,"_13":64,"_34":147,"_36":-5,"_24":25,"_140":-5,"_185":252,"_27":253},{"_44":241,"_32":242,"_30":243,"_135":236,"_42":43,"_41":244,"_137":25,"_39":245,"_13":246,"_34":35,"_36":247,"_24":25,"_140":-5,"_185":248,"_27":249},{"_44":235,"_32":33,"_30":31,"_135":236,"_42":43,"_41":14,"_137":25,"_39":237,"_13":210,"_34":35,"_36":38,"_24":25,"_140":-5,"_185":238,"_27":239},{"_44":226,"_32":227,"_30":58,"_135":157,"_42":43,"_41":228,"_137":25,"_39":229,"_13":158,"_34":230,"_36":231,"_24":25,"_140":232,"_185":233,"_27":234},{"_44":149,"_32":150,"_30":151,"_135":-5,"_42":43,"_41":152,"_137":60,"_39":223,"_13":64,"_34":147,"_36":-5,"_24":25,"_140":-5,"_185":224,"_27":225},{"_44":215,"_32":216,"_30":217,"_135":151,"_42":43,"_41":218,"_137":25,"_39":219,"_13":158,"_34":35,"_36":220,"_24":25,"_140":-5,"_185":221,"_27":222},{"_44":207,"_32":208,"_30":209,"_135":151,"_42":43,"_41":210,"_137":25,"_39":211,"_13":158,"_34":20,"_36":212,"_24":25,"_140":-5,"_185":213,"_27":214},{"_44":199,"_32":200,"_30":201,"_135":151,"_42":43,"_41":202,"_137":25,"_39":203,"_13":158,"_34":20,"_36":204,"_24":25,"_140":-5,"_185":205,"_27":206},{"_44":142,"_32":143,"_30":144,"_135":-5,"_42":43,"_41":145,"_137":60,"_39":196,"_13":64,"_34":147,"_36":-5,"_24":25,"_140":-5,"_185":197,"_27":198},{"_44":188,"_32":189,"_30":190,"_135":144,"_42":43,"_41":191,"_137":25,"_39":192,"_13":64,"_34":35,"_36":193,"_24":25,"_140":-5,"_185":194,"_27":195},{"_44":132,"_32":133,"_30":134,"_135":-5,"_42":43,"_41":136,"_137":60,"_39":184,"_13":64,"_34":20,"_36":139,"_24":25,"_140":-5,"_185":186,"_27":187},["D",1749642330897],"children",[],[133],"ec8ba0be-46b8-11f0-8ac8-76b3cceeab13","types.ts","ec8ba168-46b8-11f0-8ac8-76b3cceeab13",5,["D",1749642050493],"// Invoice data structure extracted from PDF\nexport interface InvoiceData {\n InvoiceFrom?: string | null;\n InvoiceTo?: string | null;\n PaidBy?: string | null;\n PaidTo?: string | null;\n Amount?: number | null;\n Currency?: string | null;\n InvoiceDate?: string | null;\n PaidDate?: string | null;\n LineItems?: string[] | null;\n}\n\n// Request payload for PDF processing\nexport interface ProcessingRequest {\n pdfBase64: string;\n fieldsToExtract: string[];\n outputFormat: \"html\" | \"json\";\n}\n\n// Response from PDF processing\nexport interface ProcessingResponse {\n success: boolean;\n extractedData?: InvoiceData;\n htmlOutput?: string;\n processingTime: number;\n tokenUsage?: TokenUsage;\n error?: string;\n}\n\n// Internal processing result\nexport interface ProcessingResult {\n extractedData: InvoiceData;\n htmlOutput?: string;\n processingTime: number;\n tokenUsage?: TokenUsage;\n}\n\n// Claude API response structure\nexport interface ClaudeResponse {\n extractedData: InvoiceData;\n processingTime: number;\n tokenUsage: TokenUsage;\n}\n\n// Token usage tracking\nexport interface TokenUsage {\n input: number;\n output: number;\n total: number;\n}\n\n// Configuration interface\nexport interface AppConfig {\n apiBaseUrl: string;\n supportedFormats: string[];\n maxFileSize: number;\n availableFields: string[];\n}\n\n// UI state management\nexport interface UIState {\n isProcessing: boolean;\n selectedFields: string[];\n outputFormat: \"html\" | \"json\";\n uploadedFile: File | null;\n result: ProcessingResponse | null;\n error: string | null;\n}\n\n// Field configuration for extraction\nexport interface FieldConfig {\n name: string;\n label: string;\n description: string;\n type: \"string\" | \"number\" | \"date\" | \"array\";\n required: boolean;\n}\n\nexport const AVAILABLE_FIELDS: FieldConfig[] = [\n {\n name: \"InvoiceFrom\",\n label: \"Invoice From\",\n description: \"Company or person who issued the invoice\",\n type: \"string\",\n required: true\n },\n {\n name: \"InvoiceTo\", \n label: \"Invoice To\",\n description: \"Company or person who received the invoice\",\n type: \"string\",\n required: true\n },\n {\n name: \"PaidBy\",\n label: \"Paid By\",\n description: \"Who made the payment\",\n type: \"string\", \n required: false\n },\n {\n name: \"PaidTo\",\n label: \"Paid To\", \n description: \"Who received the payment\",\n type: \"string\",\n required: false\n },\n {\n name: \"Amount\",\n label: \"Amount\",\n description: \"Total amount (numeric value)\",\n type: \"number\",\n required: true\n },\n {\n name: \"Currency\",\n label: \"Currency\",\n description: \"Currency code (e.g., USD, EUR, INR)\",\n type: \"string\",\n required: true\n },\n {\n name: \"InvoiceDate\",\n label: \"Invoice Date\",\n description: \"Date invoice was issued\",\n type: \"date\",\n required: true\n },\n {\n name: \"PaidDate\",\n label: \"Paid Date\",\n description: \"Date payment was made\",\n type: \"date\",\n required: false\n },\n {\n name: \"LineItems\",\n label: \"Line Items\",\n description: \"Array of line item descriptions\",\n type: \"array\",\n required: false\n }\n];",[],[143,189],["D",1749642028488],[182],[143],"3b325ad6-46ba-11f0-898d-76b3cceeab13","style.css","85a0a3f8-46b9-11f0-b100-76b3cceeab13",16,["D",1749642611941],"/* Dark Theme PDF to HTML Converter Styles */\n\nbody {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;\n background-color: #0f172a;\n color: #f1f5f9;\n}\n\n/* Smooth transitions for interactive elements */\nbutton, input, .upload-area {\n transition: all 0.2s ease-in-out;\n}\n\n/* Custom scrollbar for dark theme */\n.result-preview::-webkit-scrollbar {\n width: 8px;\n}\n\n.result-preview::-webkit-scrollbar-track {\n background: #1e293b;\n border-radius: 4px;\n}\n\n.result-preview::-webkit-scrollbar-thumb {\n background: #475569;\n border-radius: 4px;\n}\n\n.result-preview::-webkit-scrollbar-thumb:hover {\n background: #64748b;\n}\n\n/* Dark theme scrollbars for all elements */\n::-webkit-scrollbar {\n width: 8px;\n height: 8px;\n}\n\n::-webkit-scrollbar-track {\n background: #1e293b;\n border-radius: 4px;\n}\n\n::-webkit-scrollbar-thumb {\n background: #475569;\n border-radius: 4px;\n}\n\n::-webkit-scrollbar-thumb:hover {\n background: #64748b;\n}\n\n/* Focus styles for accessibility - dark theme */\ninput:focus, button:focus {\n outline: 2px solid #3b82f6;\n outline-offset: 2px;\n}\n\n/* Loading animation refinements */\n@keyframes pulse {\n 0%, 100% {\n opacity: 1;\n }\n 50% {\n opacity: 0.5;\n }\n}\n\n.loading-text {\n animation: pulse 1.5s ease-in-out infinite;\n}\n\n/* Mobile responsiveness improvements */\n@media (max-width: 640px) {\n .upload-area {\n padding: 1.5rem 1rem;\n }\n \n .grid {\n grid-template-columns: 1fr;\n }\n \n .text-4xl {\n font-size: 2rem;\n }\n}\n\n/* Print styles for generated HTML */\n@media print {\n .no-print {\n display: none !important;\n }\n \n body {\n background: white !important;\n color: black !important;\n }\n}\n\n/* Enhanced form elements for dark theme */\ninput[type=\"checkbox\"] {\n width: 1rem;\n height: 1rem;\n accent-color: #3b82f6;\n background-color: #374151;\n border-color: #6b7280;\n}\n\ninput[type=\"radio\"] {\n accent-color: #3b82f6;\n background-color: #374151;\n border-color: #6b7280;\n}\n\n/* Dark theme card styles */\n.dark-card {\n background: linear-gradient(145deg, #1f2937, #111827);\n border: 1px solid #374151;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);\n}\n\n.dark-section {\n background: linear-gradient(145deg, #111827, #0f172a);\n border: 1px solid #1f2937;\n}\n\n/* Success states - dark theme */\n.success-border {\n border-color: #10b981;\n}\n\n.success-bg {\n background-color: #064e3b;\n}\n\n/* Error states - dark theme */\n.error-border {\n border-color: #ef4444;\n}\n\n.error-bg {\n background-color: #7f1d1d;\n}\n\n/* Enhanced hover effects for dark theme */\n.upload-area:hover {\n transform: translateY(-1px);\n box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);\n}\n\nbutton:hover:not(:disabled) {\n transform: translateY(-1px);\n box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);\n}\n\n/* File type indicators */\n.file-icon {\n font-size: 2rem;\n margin-bottom: 0.5rem;\n}\n\n/* Progress indicators - dark theme */\n.progress-bar {\n width: 100%;\n height: 4px;\n background-color: #374151;\n border-radius: 2px;\n overflow: hidden;\n}\n\n.progress-fill {\n height: 100%;\n background-color: #3b82f6;\n transition: width 0.3s ease;\n}\n\n/* Toast notifications styling - dark theme */\n.toast {\n position: fixed;\n top: 1rem;\n right: 1rem;\n z-index: 1000;\n min-width: 300px;\n padding: 1rem;\n border-radius: 0.5rem;\n box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);\n transform: translateX(100%);\n transition: transform 0.3s ease;\n}\n\n.toast.show {\n transform: translateX(0);\n}\n\n.toast.success {\n background-color: #064e3b;\n border-left: 4px solid #10b981;\n color: #d1fae5;\n}\n\n.toast.error {\n background-color: #7f1d1d;\n border-left: 4px solid #ef4444;\n color: #fecaca;\n}\n\n/* Enhanced dark theme gradients */\n.gradient-bg {\n background: linear-gradient(135deg, #1e3a8a 0%, #7c3aed 100%);\n}\n\n.glass-effect {\n background: rgba(31, 41, 55, 0.8);\n backdrop-filter: blur(8px);\n border: 1px solid rgba(75, 85, 99, 0.3);\n}\n\n/* Dark theme button styles */\n.btn-primary {\n background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);\n border: none;\n color: white;\n transition: all 0.2s ease;\n}\n\n.btn-primary:hover:not(:disabled) {\n background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);\n box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);\n}\n\n.btn-secondary {\n background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);\n border: none;\n color: white;\n transition: all 0.2s ease;\n}\n\n.btn-secondary:hover:not(:disabled) {\n background: linear-gradient(135deg, #4b5563 0%, #374151 100%);\n box-shadow: 0 8px 25px rgba(107, 114, 128, 0.4);\n}\n\n/* Code block styling for dark theme */\npre {\n background: #0f172a !important;\n border: 1px solid #334155;\n color: #e2e8f0;\n}\n\ncode {\n background: #1e293b;\n color: #94a3b8;\n padding: 0.125rem 0.25rem;\n border-radius: 0.25rem;\n font-size: 0.875rem;\n}\n\n/* Selection styling for dark theme */\n::selection {\n background-color: #3b82f6;\n color: white;\n}\n\n::-moz-selection {\n background-color: #3b82f6;\n color: white;\n}",[],[150,200],"0da774a2-46ba-11f0-8fe7-76b3cceeab13","index.html","604dbd0c-46b9-11f0-8543-76b3cceeab13",14,["D",1749642535530],"\n\n\n \n \n PDF to HTML Converter\n \n \n \n\n\n

\n \n \n \n \n \n \n\n",[],[150,208],"29e05580-46ba-11f0-ba04-76b3cceeab13","app.tsx","7c00debc-46b9-11f0-89dd-76b3cceeab13",15,["D",1749642582874],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useRef, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport type { \n UIState, \n ProcessingResponse, \n AppConfig, \n FieldConfig \n} from \"../shared/types.ts\";\nimport { AVAILABLE_FIELDS } from \"../shared/types.ts\";\n\ndeclare global {\n interface Window {\n __APP_CONFIG__: AppConfig;\n }\n}\n\nconst App: React.FC = () => {\n const [state, setState] = useState({\n isProcessing: false,\n selectedFields: AVAILABLE_FIELDS.filter(f => f.required).map(f => f.name),\n outputFormat: \"html\",\n uploadedFile: null,\n result: null,\n error: null\n });\n \n const fileInputRef = useRef(null);\n const config = window.__APP_CONFIG__ || {\n apiBaseUrl: \"\",\n supportedFormats: [\"application/pdf\"],\n maxFileSize: 10 * 1024 * 1024,\n availableFields: []\n };\n \n // Handle file drop\n const handleDrop = (e: React.DragEvent) => {\n e.preventDefault();\n e.currentTarget.classList.remove(\"drag-over\");\n \n const files = Array.from(e.dataTransfer.files);\n const pdfFile = files.find(file => file.type === \"application/pdf\");\n \n if (pdfFile) {\n setState(prev => ({ ...prev, uploadedFile: pdfFile, error: null }));\n } else {\n setState(prev => ({ ...prev, error: \"Please upload a PDF file.\" }));\n }\n };\n \n // Handle file selection\n const handleFileSelect = (e: React.ChangeEvent) => {\n const file = e.target.files?.[0];\n if (file) {\n if (file.type === \"application/pdf\") {\n setState(prev => ({ ...prev, uploadedFile: file, error: null }));\n } else {\n setState(prev => ({ ...prev, error: \"Please select a PDF file.\" }));\n }\n }\n };\n \n // Handle field selection\n const toggleField = (fieldName: string) => {\n setState(prev => ({\n ...prev,\n selectedFields: prev.selectedFields.includes(fieldName)\n ? prev.selectedFields.filter(f => f !== fieldName)\n : [...prev.selectedFields, fieldName]\n }));\n };\n \n // Process PDF\n const processPDF = async () => {\n if (!state.uploadedFile) {\n setState(prev => ({ ...prev, error: \"Please select a PDF file first.\" }));\n return;\n }\n \n if (state.selectedFields.length === 0) {\n setState(prev => ({ ...prev, error: \"Please select at least one field to extract.\" }));\n return;\n }\n \n setState(prev => ({ ...prev, isProcessing: true, error: null, result: null }));\n \n try {\n const formData = new FormData();\n formData.append(\"pdf\", state.uploadedFile);\n formData.append(\"fields\", JSON.stringify(state.selectedFields));\n formData.append(\"format\", state.outputFormat);\n \n const response = await fetch(\"/api/process-pdf\", {\n method: \"POST\",\n body: formData\n });\n \n const result: ProcessingResponse = await response.json();\n \n if (result.success) {\n setState(prev => ({ ...prev, result, isProcessing: false }));\n } else {\n setState(prev => ({ \n ...prev, \n error: result.error || \"Processing failed\", \n isProcessing: false \n }));\n }\n } catch (error) {\n setState(prev => ({ \n ...prev, \n error: `Network error: ${error instanceof Error ? error.message : 'Unknown error'}`, \n isProcessing: false \n }));\n }\n };\n \n // Format file size\n const formatFileSize = (bytes: number) => {\n if (bytes === 0) return '0 Bytes';\n const k = 1024;\n const sizes = ['Bytes', 'KB', 'MB', 'GB'];\n const i = Math.floor(Math.log(bytes) / Math.log(k));\n return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];\n };\n \n // Download result\n const downloadResult = () => {\n if (!state.result) return;\n \n const content = state.outputFormat === \"html\" \n ? state.result.htmlOutput || \"\" \n : JSON.stringify(state.result.extractedData, null, 2);\n \n const blob = new Blob([content], { \n type: state.outputFormat === \"html\" ? \"text/html\" : \"application/json\" \n });\n \n const url = URL.createObjectURL(blob);\n const a = document.createElement(\"a\");\n a.href = url;\n a.download = `invoice.${state.outputFormat}`;\n document.body.appendChild(a);\n a.click();\n document.body.removeChild(a);\n URL.revokeObjectURL(url);\n };\n \n return (\n

\n {/* Header */}\n

\n PDF to HTML Converter\n

\n Extract invoice data from PDFs using Claude 3.5 Haiku and generate beautiful HTML replicas\n

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

1. Upload PDF Invoice

\n \n e.preventDefault()}\n onDragEnter={(e) => e.currentTarget.classList.add(\"drag-over\")}\n onDragLeave={(e) => e.currentTarget.classList.remove(\"drag-over\")}\n onClick={() => fileInputRef.current?.click()}\n >\n \n \n {state.uploadedFile ? (\n

✓ {state.uploadedFile.name}

\n {formatFileSize(state.uploadedFile.size)}\n

\n ) : (\n

📄

Drop your PDF here or click to browse

\n Maximum file size: {formatFileSize(config.maxFileSize)}\n

\n )}\n

\n \n {/* Field Selection */}\n

2. Select Fields to Extract

\n \n

\n {AVAILABLE_FIELDS.map((field) => (\n \n toggleField(field.name)}\n className=\"rounded border-gray-600 bg-gray-800 text-blue-500 focus:ring-blue-500\"\n />\n

{field.label}

{field.description}

\n \n ))}\n

\n \n

\n setState(prev => ({ \n ...prev, \n selectedFields: AVAILABLE_FIELDS.map(f => f.name) \n }))}\n className=\"text-sm text-blue-400 hover:text-blue-300\"\n >\n Select All\n \n setState(prev => ({ \n ...prev, \n selectedFields: AVAILABLE_FIELDS.filter(f => f.required).map(f => f.name) \n }))}\n className=\"text-sm text-blue-400 hover:text-blue-300\"\n >\n Select Required Only\n \n setState(prev => ({ ...prev, selectedFields: [] }))}\n className=\"text-sm text-red-400 hover:text-red-300\"\n >\n Clear All\n \n

\n \n {/* Output Format */}\n

3. Choose Output Format

\n \n

\n \n setState(prev => ({ \n ...prev, \n outputFormat: e.target.value as \"html\" | \"json\" \n }))}\n className=\"text-blue-500 bg-gray-800 border-gray-600 focus:ring-blue-500\"\n />\n HTML (Beautiful formatted invoice)\n \n \n setState(prev => ({ \n ...prev, \n outputFormat: e.target.value as \"html\" | \"json\" \n }))}\n className=\"text-blue-500 bg-gray-800 border-gray-600 focus:ring-blue-500\"\n />\n JSON (Structured data)\n \n

\n \n {/* Process Button */}\n

\n \n {state.isProcessing &&

}\n {state.isProcessing ? \"Processing...\" : \"Extract Data\"}\n \n

\n \n {/* Error Display */}\n {state.error && (\n

\n Error: {state.error}\n

\n )}\n \n {/* Results */}\n {state.result && state.result.success && (\n

Results

\n \n Download {state.outputFormat.toUpperCase()}\n \n

\n \n {/* Processing Stats */}\n

\n Processing Time: {state.result.processingTime}ms\n

\n {state.result.tokenUsage && (\n <>\n

\n Tokens Used: {state.result.tokenUsage.total.toLocaleString()}\n

\n Est. Cost: ₹{(\n (state.result.tokenUsage.input * 0.067 + state.result.tokenUsage.output * 0.336) / 1000000\n ).toFixed(2)}\n

\n \n )}\n

\n \n {/* Extracted Data */}\n

Extracted Data:

\n              {JSON.stringify(state.result.extractedData, null, 2)}\n

\n \n {/* HTML Preview */}\n {state.outputFormat === \"html\" && state.result.htmlOutput && (\n

HTML Preview:

\n \n

\n )}\n

\n )}\n \n );\n};\n\n// Mount the app\nconst root = createRoot(document.getElementById(\"app\")!);\nroot.render();",[],[150,216],["D",1749642033639],[178,179,180],[150],"ed2357aa-46b9-11f0-9cf3-76b3cceeab13","index.ts",13,["D",1749642480979],"http","import { Hono } from \"https://esm.sh/hono@4.0.0\";\nimport { cors } from \"https://esm.sh/hono@4.0.0/cors\";\nimport { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\nimport type { ProcessingRequest, ProcessingResponse } from \"../shared/types.ts\";\nimport { processPDFWithClaude } from \"./services/pdf-processor.ts\";\n\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err, c) => {\n throw err;\n});\n\n// Enable CORS for API endpoints\napp.use(\"/api/*\", cors());\n\n// Serve static files\napp.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\napp.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n\n// Health check endpoint\napp.get(\"/api/health\", (c) => {\n return c.json({\n status: \"healthy\",\n timestamp: new Date().toISOString(),\n service: \"pdf-to-html-converter\",\n });\n});\n\n// Main UI route\napp.get(\"/\", async (c) => {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n\n // Inject initial data and configuration\n const config = {\n apiBaseUrl: new URL(c.req.url).origin,\n supportedFormats: [\"application/pdf\"],\n maxFileSize: 10 * 1024 * 1024, // 10MB\n availableFields: [\n \"InvoiceFrom\",\n \"InvoiceTo\",\n \"PaidBy\",\n \"PaidTo\",\n \"Amount\",\n \"Currency\",\n \"InvoiceDate\",\n \"PaidDate\",\n \"LineItems\",\n ],\n };\n\n const configScript = ``;\n\n html = html.replace(\"\", `${configScript}`);\n return c.html(html);\n});\n\n// API endpoint for PDF processing\napp.post(\"/api/process-pdf\", async (c) => {\n try {\n const formData = await c.req.formData();\n const file = formData.get(\"pdf\") as File;\n const fieldsToExtract = formData.get(\"fields\") as string;\n const outputFormat = formData.get(\"format\") as string || \"html\";\n\n if (!file) {\n return c.json({ error: \"No PDF file provided\" }, 400);\n }\n\n if (file.type !== \"application/pdf\") {\n return c.json({ error: \"File must be a PDF\" }, 400);\n }\n\n if (file.size > 10 * 1024 * 1024) { // 10MB limit\n return c.json({ error: \"File size must be less than 10MB\" }, 400);\n }\n\n // Convert file to base64\n const arrayBuffer = await file.arrayBuffer();\n const base64Data = btoa(String.fromCharCode(...new Uint8Array(arrayBuffer)));\n\n // Parse fields to extract (default to all if not specified)\n let fields: string[] = [\n \"InvoiceFrom\",\n \"InvoiceTo\",\n \"PaidBy\",\n \"PaidTo\",\n \"Amount\",\n \"Currency\",\n \"InvoiceDate\",\n \"PaidDate\",\n \"LineItems\",\n ];\n\n if (fieldsToExtract) {\n try {\n fields = JSON.parse(fieldsToExtract);\n } catch (e) {\n return c.json({ error: \"Invalid fields format. Must be JSON array.\" }, 400);\n }\n }\n\n const request: ProcessingRequest = {\n pdfBase64: base64Data,\n fieldsToExtract: fields,\n outputFormat: outputFormat as \"html\" | \"json\",\n };\n\n // Process PDF with Claude\n const result = await processPDFWithClaude(request);\n\n const response: ProcessingResponse = {\n success: true,\n extractedData: result.extractedData,\n htmlOutput: result.htmlOutput,\n processingTime: result.processingTime,\n tokenUsage: result.tokenUsage,\n };\n\n return c.json(response);\n } catch (error) {\n console.error(\"PDF processing error:\", error);\n\n const response: ProcessingResponse = {\n success: false,\n error: error instanceof Error ? error.message : \"Unknown error occurred\",\n processingTime: 0,\n };\n\n return c.json(response, 500);\n }\n});\n\n// API endpoint for configuration\napp.get(\"/api/config\", (c) => {\n return c.json({\n availableFields: [\n \"InvoiceFrom\",\n \"InvoiceTo\",\n \"PaidBy\",\n \"PaidTo\",\n \"Amount\",\n \"Currency\",\n \"InvoiceDate\",\n \"PaidDate\",\n \"LineItems\",\n ],\n supportedFormats: [\"html\", \"json\"],\n limits: {\n maxFileSize: 10 * 1024 * 1024,\n supportedTypes: [\"application/pdf\"],\n },\n });\n});\n\nexport default app.fetch; // This is the entry point for HTTP vals","prashamtrivedi-pdftohtml-ai",[],[156,227],"d26d1504-46be-11f0-ae1e-76b3cceeab13","dafd192c-46b8-11f0-9a71-76b3cceeab13",["D",1749644583647],[],[156,240,33],"services","423c419e-46be-11f0-bd2f-76b3cceeab13","claude.ts","fbcd0a4a-46b8-11f0-b5ae-76b3cceeab13",41,["D",1749644341736],19,"import Anthropic from \"npm:@anthropic-ai/sdk\";\nimport type { ClaudeResponse, InvoiceData } from \"../../shared/types.ts\";\ninterface ClaudeMessage {\n role: \"user\" | \"assistant\";\n content: Array<{\n type: \"text\" | \"document\";\n text?: string;\n source?: {\n type: \"base64\";\n media_type: \"application/pdf\";\n data: string;\n };\n }>;\n}\n\ninterface ClaudeAPIRequest {\n model: string;\n max_tokens: number;\n messages: ClaudeMessage[];\n system?: string;\n}\n\ninterface ClaudeAPIResponse {\n content: Array<{\n type: \"text\";\n text: string;\n }>;\n usage: {\n input_tokens: number;\n output_tokens: number;\n };\n}\n\nexport class ClaudeService {\n private apiKey: string;\n private baseUrl = \"https://api.anthropic.com/v1\";\n private anthropic;\n\n constructor() {\n this.apiKey = Deno.env.get(\"ANTHROPIC_API_KEY\") || \"\";\n if (!this.apiKey) {\n throw new Error(\"ANTHROPIC_API_KEY environment variable is required\");\n }\n this.anthropic = new Anthropic(this.apiKey);\n }\n async exctractInvoiceHtml(\n pdfBase64: string,\n fieldsToExtract: any,\n ): Promise {\n const startTime = Date.now();\n\n // Build system prompt for invoice extraction\n const systemPrompt = `You are an expert document analysis AI specializing in invoice processing. \n Your task is to extract structured data from PDF invoices and return it in HTML format.\n \n IMPORTANT GUIDELINES:\n - Visually understand the invoice, including the layout, font styles.\n - Make sure the generated HTML mimics the appearance of the original PDF invoice\n - Make sure the HTML can accept ${Object.keys(fieldsToExtract).join(\", \")} as template variables.\n - Be precise and accurate in your extraction\n - Only return the HTML, no other text\n `;\n\n const userPrompt = `Please generate the template html mimicking original invoice`;\n\n try {\n const response = await this.anthropic.messages.create({\n model: \"claude-3-5-haiku-20241022\",\n max_tokens: 4000,\n system: systemPrompt,\n messages: [{\n role: \"user\",\n content: [\n {\n type: \"document\",\n source: {\n type: \"base64\",\n media_type: \"application/pdf\",\n data: pdfBase64,\n },\n },\n {\n type: \"text\",\n text: userPrompt,\n },\n ],\n }],\n });\n\n const extractedText = response.content[0]?.text || \"\";\n\n const processingTime = Date.now() - startTime;\n\n return {\n extractedText,\n processingTime,\n tokenUsage: {\n input: response.usage.input_tokens,\n output: response.usage.output_tokens,\n total: response.usage.input_tokens + response.usage.output_tokens,\n },\n };\n } catch (error) {\n throw new Error(`Claude API request failed: ${error instanceof Error ? error.message : String(error)}`);\n }\n }\n async extractInvoiceData(\n pdfBase64: string,\n fieldsToExtract: string[],\n ): Promise {\n const startTime = Date.now();\n\n // Create extraction schema based on requested fields\n const schema = this.createExtractionSchema(fieldsToExtract);\n\n // Build system prompt for invoice extraction\n const systemPrompt = `You are an expert document analysis AI specializing in invoice processing. \n Your task is to extract structured data from PDF invoices and return it in JSON format.\n \n IMPORTANT GUIDELINES:\n - Extract only the fields requested in the schema\n - Return valid JSON only, no other text\n - If a field is not found, use null as the value\n - For LineItems, extract as an array of strings describing each line item\n - Ensure dates are in ISO format (YYYY-MM-DD) if found\n - For amounts, extract numeric values only\n - Make sure the generated HTML mimics the appearance of the original PDF invoice\n - Be precise and accurate in your extraction`;\n\n const userPrompt = `Please extract the following invoice data from this PDF document:\n\n${schema}\n\nReturn the extracted data as a valid JSON object matching the schema structure. \nExtract only the information that is clearly visible in the document.`;\n\n try {\n const response = await this.anthropic.messages.create({\n model: \"claude-3-5-haiku-20241022\",\n max_tokens: 4000,\n system: systemPrompt,\n messages: [{\n role: \"user\",\n content: [\n {\n type: \"document\",\n source: {\n type: \"base64\",\n media_type: \"application/pdf\",\n data: pdfBase64,\n },\n },\n {\n type: \"text\",\n text: userPrompt,\n },\n ],\n }],\n });\n\n const extractedText = response.content[0]?.text || \"\";\n\n // Parse JSON response from Claude\n let extractedData: InvoiceData;\n try {\n // Clean up the response text (remove any markdown formatting)\n const cleanedText = extractedText\n .replace(/```json\\n?/g, \"\")\n .replace(/```\\n?/g, \"\")\n .trim();\n\n extractedData = JSON.parse(cleanedText);\n } catch (e) {\n throw new Error(`Failed to parse Claude response as JSON: ${extractedText}`);\n }\n\n const processingTime = Date.now() - startTime;\n\n return {\n extractedData,\n processingTime,\n tokenUsage: {\n input: response.usage.input_tokens,\n output: response.usage.output_tokens,\n total: response.usage.input_tokens + response.usage.output_tokens,\n },\n };\n } catch (error) {\n throw new Error(`Claude API request failed: ${error instanceof Error ? error.message : String(error)}`);\n }\n }\n\n private createExtractionSchema(fields: string[]): string {\n const fieldMap: Record = {\n \"InvoiceFrom\": \"InvoiceFrom: string | null // Company/person who issued the invoice\",\n \"InvoiceTo\": \"InvoiceTo: string | null // Company/person who received the invoice\",\n \"PaidBy\": \"PaidBy: string | null // Who made the payment\",\n \"PaidTo\": \"PaidTo: string | null // Who received the payment\",\n \"Amount\": \"Amount: number | null // Total amount (numeric value only)\",\n \"Currency\": \"Currency: string | null // Currency code (e.g., USD, EUR, INR)\",\n \"InvoiceDate\": \"InvoiceDate: string | null // Date invoice was issued (YYYY-MM-DD format)\",\n \"PaidDate\": \"PaidDate: string | null // Date payment was made (YYYY-MM-DD format)\",\n \"LineItems\": \"LineItems: string[] | null // Array of line item descriptions\",\n };\n\n const selectedFields = fields\n .filter(field => fieldMap[field])\n .map(field => \" \" + fieldMap[field])\n .join(\",\\n\");\n\n return `{\n${selectedFields}\n}`;\n }\n}",[],[156,240,242],"dafd1814-46b8-11f0-9a71-76b3cceeab13",["D",1749642021036],[174,175],[156,240],["D",1749642014987],[173,176],[156],["D",1749642007878],{"_98":97,"_105":101},{"_98":97,"_99":-5,"_100":101,"_18":56,"_102":103,"_104":25},{"_13":87,"_32":88,"_44":43,"_89":45,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":46,"_96":97},"ctx",{"_80":-5,"_125":294,"_295":296,"_297":298,"_299":25,"_300":25,"_301":25,"_302":60,"_303":-5,"_304":-7,"_305":-7,"_306":64,"_307":25,"_308":25,"_309":-5,"_310":25,"_311":25,"_312":25,"_313":-5},"ENV",{"_265":266,"_267":268,"_269":88,"_270":271,"_272":273,"_274":275,"_276":277,"_278":279,"_280":281,"_282":283,"_284":285,"_286":287,"_288":289,"_290":291,"_292":293},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","71c1b20804b3232a7e513be260cfffc1932a9e97","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v49