Val Town Code SearchReturn to Val Town

1export default async function ReceiveSMS(req: Request): Promise<Response> {
2  try {
3    // Parse the form data from Twilio

4
5- Ask clarifying questions when requirements are ambiguous
6- Provide complete, functional solutions rather than skeleton implementations
7- Test your logic against edge cases before presenting the final solution
8- Ensure all code follows Val Town's specific platform requirements
17- **Never bake in secrets into the code** - always use environment variables
18- Include comments explaining complex logic (avoid commenting obvious operations)
19- Follow modern ES6+ conventions and functional programming practices if possible
20
21## Types of triggers
28
29```ts
30export default async function (req: Request) {
31  return new Response("Hello World");
32}
42
43```ts
44export default async function () {
45  // Scheduled task code
46}
56
57```ts
58export default async function (email: Email) {
59  // Process email
60}
66## Val Town Standard Libraries
67
68Val Town provides several hosted services and utility functions.
69
70### Blob Storage
120```
121
122## Val Town Utility Functions
123
124Val Town provides several utility functions to help with common project tasks.
125
126### Importing Utilities
200│   ├── database/
201│   │   ├── migrations.ts    # Schema definitions
202│   │   ├── queries.ts       # DB query functions
203│   │   └── README.md
204│   └── routes/              # Route modules
219└── shared/
220    ├── README.md
221    └── utils.ts             # Shared types and functions
222```
223
226- Hono is the recommended API framework
227- Main entry point should be `backend/index.ts`
228- **Static asset serving:** Use the utility functions to read and serve project files:
229  ```ts
230  import { readFile, serveFile } from "https://esm.town/v/std/utils@85-main/index.ts";
260- Run migrations on startup or comment out for performance
261- Change table names when modifying schemas rather than altering
262- Export clear query functions with proper TypeScript typing
263
264## Common Gotchas and Solutions

4
5- Ask clarifying questions when requirements are ambiguous
6- Provide complete, functional solutions rather than skeleton implementations
7- Test your logic against edge cases before presenting the final solution
8- Ensure all code follows Val Town's specific platform requirements
17- **Never bake in secrets into the code** - always use environment variables
18- Include comments explaining complex logic (avoid commenting obvious operations)
19- Follow modern ES6+ conventions and functional programming practices if possible
20
21## Types of triggers
28
29```ts
30export default async function (req: Request) {
31  return new Response("Hello World");
32}
42
43```ts
44export default async function () {
45  // Scheduled task code
46}
56
57```ts
58export default async function (email: Email) {
59  // Process email
60}
66## Val Town Standard Libraries
67
68Val Town provides several hosted services and utility functions.
69
70### Blob Storage
120```
121
122## Val Town Utility Functions
123
124Val Town provides several utility functions to help with common project tasks.
125
126### Importing Utilities
200│   ├── database/
201│   │   ├── migrations.ts    # Schema definitions
202│   │   ├── queries.ts       # DB query functions
203│   │   └── README.md
204│   └── routes/              # Route modules
219└── shared/
220    ├── README.md
221    └── utils.ts             # Shared types and functions
222```
223
226- Hono is the recommended API framework
227- Main entry point should be `backend/index.ts`
228- **Static asset serving:** Use the utility functions to read and serve project files:
229  ```ts
230  import { readFile, serveFile } from "https://esm.town/v/std/utils@85-main/index.ts";
260- Run migrations on startup or comment out for performance
261- Change table names when modifying schemas rather than altering
262- Export clear query functions with proper TypeScript typing
263
264## Common Gotchas and Solutions

164}
165
166function generateHtmlShell(initialQuery, sourceUrl) {
167  const escapedQuery = initialQuery.replace(/</g, "&lt;").replace(/>/g, "&gt;");
168  return `
176<style>
177@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
178@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}:root{--sidebar-expanded-width:260px;--sidebar-collapsed-width:70px;--sidebar-transition-duration:0.3s;--brand-color:#1E40AF;--brand-color-light:#3B82F6;--text-dark:#111827;--text-medium:#374151;--text-light:#6B7280;--bg-main:#F9FAFB;--bg-card:#FFFFFF;--border-color:#E5E7EB}body{font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;margin:0;background-color:var(--bg-main);color:var(--text-medium);display:flex;min-height:100vh;font-size:16px;overflow-x:hidden}.app-container{display:flex;width:100%}.sidebar{width:var(--sidebar-expanded-width);background-color:#1F2937;color:#E5E7EB;height:100vh;position:fixed;left:0;top:0;box-shadow:3px 0 10px rgba(0,0,0,.1);display:flex;flex-direction:column;transition:width var(--sidebar-transition-duration) ease-in-out;z-index:100}.sidebar.collapsed{width:var(--sidebar-collapsed-width)}.sidebar.collapsed .sidebar-header h2,.sidebar.collapsed .sidebar-header .tagline,.sidebar.collapsed .nav-item .nav-item-text-main,.sidebar.collapsed .sidebar-footer .footer-text{display:none}.sidebar .nav-item svg{margin-right:12px;width:20px;height:20px;opacity:.8;flex-shrink:0}.sidebar.collapsed .nav-item svg{margin-right:0}.sidebar.collapsed .nav-item{justify-content:center;padding-left:0;padding-right:0}.sidebar-header{text-align:center;padding:0 20px;margin-bottom:25px}.sidebar-header h2{font-size:1.8em;color:var(--brand-color-light);font-weight:600;letter-spacing:.5px;margin:0}.sidebar-header .tagline{font-size:.8em;color:#9CA3AF;margin-top:2px}.hamburger-container{display:flex;align-items:center;justify-content:flex-start;padding:10px 20px;height:40px}.sidebar.collapsed .hamburger-container{justify-content:center;padding:10px 0}.hamburger-menu{display:inline-block;cursor:pointer;background:0 0;border:none;padding:10px;position:relative;width:30px;height:22px;box-sizing:content-box}.hamburger-box{width:30px;height:22px;display:inline-block;position:relative}.hamburger-inner{display:block;top:50%;margin-top:-1px}.hamburger-inner,.hamburger-inner::after,.hamburger-inner::before{width:30px;height:2px;background-color:#e2e8f0;border-radius:4px;position:absolute;transition-property:transform;transition-duration:.15s;transition-timing-function:ease}.hamburger-inner::after,.hamburger-inner::before{content:"";display:block}.hamburger-inner::before{top:-8px}.hamburger-inner::after{bottom:-8px}.sidebar:not(.collapsed) .hamburger-menu .hamburger-inner{transform:rotate(180deg)}.sidebar:not(.collapsed) .hamburger-menu .hamburger-inner::before{transform:translateY(8px) rotate(45deg)}.sidebar:not(.collapsed) .hamburger-menu .hamburger-inner::after{transform:translateY(-8px) rotate(-45deg)}.nav-menu{list-style:none;padding:0;margin:0;flex-grow:1}.nav-item{display:flex;align-items:center;padding:14px 20px;margin-bottom:8px;cursor:pointer;transition:background-color .2s ease,color .2s ease;font-weight:500;white-space:nowrap;position:relative}.nav-item-text-main{transition:opacity .2s ease-in-out}.nav-item-text-hover{display:none}.sidebar.collapsed .nav-item .nav-item-text-main{opacity:0}.nav-item:hover{background-color:#374151;color:#fff}.nav-item.active{background-color:var(--brand-color-light);color:#fff;font-weight:600}.nav-item.active svg{opacity:1}.sidebar.collapsed .nav-item .nav-item-text-hover{position:absolute;left:calc(var(--sidebar-collapsed-width) - 10px);top:50%;transform:translateY(-50%) translateX(-15px) scale(.9);background-color:#374151;color:#fff;padding:10px 15px;border-radius:4px;font-size:.9em;white-space:nowrap;z-index:110;opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;box-shadow:2px 2px 8px rgba(0,0,0,.2)}.sidebar.collapsed .nav-item:hover .nav-item-text-hover{opacity:1;transform:translateY(-50%) translateX(0) scale(1);pointer-events:auto}.sidebar-footer{font-size:.8em;color:#9CA3AF;text-align:center;padding:15px 20px;border-top:1px solid #374151;white-space:nowrap}.sidebar-footer a{color:#60A5FA;text-decoration:none}.sidebar-footer a:hover{text-decoration:underline}.main-content{margin-left:var(--sidebar-expanded-width);padding:30px 40px;flex-grow:1;overflow-y:auto;transition:margin-left var(--sidebar-transition-duration) ease-in-out;width:calc(100% - var(--sidebar-expanded-width))}.sidebar.collapsed+.main-content{margin-left:var(--sidebar-collapsed-width);width:calc(100% - var(--sidebar-collapsed-width))}.view{display:none;animation:fadeIn .4s ease-out}.view.active-view{display:block}.view>h1{font-size:2.2em;color:var(--text-dark);margin-bottom:25px;border-bottom:2px solid var(--border-color);padding-bottom:15px}.card{background-color:var(--bg-card);border-radius:8px;padding:25px;margin-bottom:25px;box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);border:1px solid var(--border-color)}.card h2,.card h3{color:var(--text-dark);margin-top:0;border-bottom:1px solid var(--border-color);padding-bottom:10px;margin-bottom:15px}button,.button{padding:10px 18px;border:none;border-radius:5px;font-size:1rem;font-weight:500;cursor:pointer;transition:background-color .2s ease,transform .1s ease;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none}.button-primary{background-color:var(--brand-color);color:#fff}.button-primary:hover{background-color:#1D4ED8;transform:translateY(-1px)}.button-primary:disabled{background-color:#9CA3AF;cursor:not-allowed}.button-primary .spinner{display:none;width:16px;height:16px;border:2px solid hsla(0,0%,100%,.3);border-radius:50%;border-top-color:#fff;animation:spin .8s linear infinite}.button-primary.loading .spinner{display:inline-block}.button-primary.loading span{margin-right:8px}.button-secondary{background-color:#E5E7EB;color:var(--text-dark)}.button-secondary:hover{background-color:#D1D5DB}.button-danger{background-color:#DC2626;color:#fff}.button-danger:hover{background-color:#B91C1C}label{display:block;margin-bottom:8px;font-weight:600;color:var(--text-medium)}input[type=file],input[type=text],textarea,input[type=number]{width:100%;padding:10px;margin-bottom:15px;border:1px solid #D1D5DB;border-radius:4px;font-size:1rem;box-sizing:border-box}input[type=file]{padding:8px;background-color:#F9FAFB}textarea{min-height:100px;resize:vertical}#status-container{margin-top:20px;font-family:monospace;font-size:.9em;line-height:1.4;max-height:250px;overflow-y:auto;padding:10px;border:1px solid var(--border-color);border-radius:4px;background-color:#F9FAFB}.status-entry{margin-bottom:8px;padding:10px 15px;border-radius:4px;white-space:pre-wrap;word-wrap:break-word;animation:fadeIn .3s ease-out;font-size:.95em}.status-entry.info{background-color:#EFF6FF;color:#1E40AF;border-left:4px solid var(--brand-color-light)}.status-entry.error{background-color:#FEF2F2;color:#B91C1C;border-left:4px solid #EF4444;font-weight:700}.status-entry.progress{background-color:#F0FDF4;color:#166534;border-left:4px solid #22C55E}#structured-results-container{margin-top:20px}.result-block{margin-bottom:20px;padding:20px;background-color:#F9FAFB;border:1px solid var(--border-color);border-radius:6px}.result-block h3{margin-top:0;color:var(--text-dark);font-size:1.25em;border-bottom:1px solid var(--border-color);padding-bottom:8px;margin-bottom:12px}.result-block p{margin:6px 0;line-height:1.6}.result-block p strong{color:var(--text-dark);min-width:170px;display:inline-block}.result-block pre{background-color:#F3F4F6;padding:12px;border-radius:4px;white-space:pre-wrap;word-wrap:break-word;font-size:.9em;max-height:280px;overflow-y:auto;border:1px solid #D1D5DB}.loan-summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px}.summary-metric{background:#fff;padding:15px;border-radius:6px;border:1px solid var(--border-color)}.summary-metric-label{font-size:.9em;color:var(--text-light);margin-bottom:5px;display:block}.summary-metric-value{font-size:1.5em;font-weight:600;color:var(--text-dark)}.finding-card{border:1px solid #D1D5DB;border-radius:6px;padding:18px;margin-bottom:18px;background-color:var(--bg-card);box-shadow:0 1px 2px rgba(0,0,0,.05);position:relative;overflow:hidden}.finding-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:5px;background-color:#D1D5DB}.finding-card.red-flag::before{background-color:#EF4444}.finding-card.asset-analysis::before{background-color:#22C55E}.finding-card.income-verification::before{background-color:#3B82F6}.finding-card.credit-anomaly::before{background-color:#F97316}.finding-card h4{margin-top:0;margin-bottom:10px;color:var(--text-dark);font-size:1.1em;display:flex;align-items:center;}.finding-card p{font-size:.95em;margin:5px 0}.finding-card p strong{color:var(--text-medium);min-width:140px}.severity-badge{display:inline-block;padding:3px 10px;border-radius:12px;font-size:0.85em;font-weight:600;color:#fff}.severity-badge.high{background-color:#B91C1C}.severity-badge.medium{background-color:#D97706}.severity-badge.low{background-color:#16A34A}.severity-badge.info{background-color:#6B7280}.disclaimer{font-size:.8em;color:var(--text-light);text-align:center;margin-top:12px;padding:8px;background-color:#F3F4F6;border-radius:4px}.history-list{list-style:none;padding:0}.history-item{display:flex;flex-direction:column;padding:20px;margin-bottom:15px;border:1px solid var(--border-color);border-radius:6px;background-color:var(--bg-card);box-shadow:0 1px 2px rgba(0,0,0,.05)}.history-item strong{font-size:1.1em;color:var(--text-dark);margin-bottom:5px;display:block}.history-item .meta{font-size:.9em;color:var(--text-light);margin-bottom:12px}.history-item .actions{margin-top:15px;display:flex;gap:10px;flex-wrap:wrap}.suggestion-group{margin-bottom:15px}.suggestion-group-header{display:flex;align-items:center;margin-bottom:8px;background-color:#F3F4F6;padding:8px 12px;border-radius:4px;cursor:pointer}.suggestion-group-header input[type=checkbox]{margin-right:10px;height:17px;width:17px}.suggestion-group-header label{font-weight:600;font-size:1.05em;color:var(--text-dark);margin-bottom:0;flex-grow:1;cursor:pointer}#iq-suggested-tasks-list{max-height:350px;overflow-y:auto;border:1px solid var(--border-color);padding:10px;border-radius:4px;background-color:#F9FAFB}.suggestion-item-label{display:flex;align-items:center;width:100%;margin-bottom:6px;font-weight:400;padding:10px;border-radius:4px;cursor:pointer;transition:background-color .2s;border:1px solid transparent;background-color:var(--bg-card);box-shadow:0 1px 2px rgba(0,0,0,.05)}.suggestion-item-label:hover{background-color:#F3F4F6}.suggestion-item-label.high-priority-task{border-left:3px solid var(--brand-color-light)}.suggestion-item-label input[type=checkbox]{margin-right:10px;accent-color:var(--brand-color);height:16px;width:16px;flex-shrink:0}.magnifying-glass-loader{display:none;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;background-color:rgba(255,255,255,.8);border-radius:8px;margin-top:20px}.magnifying-glass-loader .glass{width:50px;height:50px;border:5px solid var(--brand-color);border-radius:50%;position:relative;animation:magnify-anim 1.5s infinite linear}.magnifying-glass-loader .handle{width:8px;height:25px;background:var(--brand-color);position:relative;top:-12px;left:25px;transform:rotate(45deg)}.magnifying-glass-loader p{margin-top:25px;font-size:1.1em;font-weight:500;color:var(--text-dark);letter-spacing:.5px}@keyframes magnify-anim{0%{transform:scale(1) rotate(0)}50%{transform:scale(1.2) rotate(180deg)}100%{transform:scale(1) rotate(360deg)}}.lex-wizard-nav{display:flex;justify-content:space-around;margin-bottom:30px;border-bottom:2px solid var(--border-color)}.wizard-step{padding:15px 10px;color:var(--text-light);border-bottom:4px solid transparent;flex-grow:1;text-align:center;font-weight:500;position:relative;transition:color .2s ease,border-color .2s ease}.wizard-step .step-number{display:inline-block;width:24px;height:24px;line-height:24px;border-radius:50%;background-color:var(--text-light);color:#fff;margin-right:8px;transition:background-color .2s ease}.wizard-step .step-label{display:inline-block;vertical-align:middle}.wizard-step.active{color:var(--brand-color);border-bottom-color:var(--brand-color-light);font-weight:600}.wizard-step.active .step-number{background-color:var(--brand-color-light)}.wizard-step.completed{color:var(--text-dark);cursor:pointer}.wizard-step.completed .step-number{background-color:var(--text-dark)}.wizard-step.completed:hover{background-color:#F3F4F6}.wizard-pane{display:none}.wizard-pane.active{display:block;animation:fadeIn .4s ease-out}
179.copilot-card{margin-top:25px;border:1px solid var(--border-color);border-radius:8px;}.copilot-card h3{font-size:1.3em;padding:15px 20px;margin:0;background-color:#F3F4F6;border-bottom:1px solid var(--border-color);}.copilot-content{padding:20px;}.copilot-item{background-color:#fff;padding:15px;border-radius:6px;margin-bottom:15px;border:1px solid var(--border-color);box-shadow:0 1px 2px rgba(0,0,0,.05);}.copilot-item h4{display:flex;align-items:center;gap:10px;font-size:1.1em;margin-top:0;color:var(--text-dark);}.copilot-item p{margin:4px 0;line-height:1.5;}.copilot-item strong{color:var(--text-medium);}.impact-chip{background-color:#E0F2FE;color:#0C4A6E;padding:4px 10px;border-radius:12px;font-size:0.9em;font-weight:500;display:inline-block;margin-top:8px;}
180.dashboard-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:25px;margin-bottom:25px;}
208</div>
209<script>
210(function() {
211const ANALYSES_KEY = 'copilot_analyses_v2', MAX_SUGGESTIONS = 15, GUIDELINES_KEY = 'copilot_guidelines_v2';
212let currentView;
230const setGuidelines = (data) => localStorage.setItem(GUIDELINES_KEY, JSON.stringify(data));
231
232// --- UTILITY & FORMATTING FUNCTIONS ---
233const esc = (unsafe) => (unsafe === null || typeof unsafe === 'undefined') ? '' : String(unsafe).replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#039;'})[c]);
234const formatCurrency = (num) => typeof num === 'number' ? \`\${num.toLocaleString('en-US', { style: 'currency', currency: 'USD' })}\` : 'N/A';
251});
252
253function navigateTo(viewId, params = {}) {
254  if (viewId !== 'new-analysis' || params.reset) {
255    currentAnalysisSession = getInitialAnalysisState();
277}
278
279function setupEventListeners() {
280    hamburgerToggle.addEventListener('click', () => {
281        const isCollapsed = sidebar.classList.toggle('collapsed');
317}
318
319// --- VIEW RENDERING FUNCTIONS ---
320function renderDashboard() {
321  const analyses = getStore(ANALYSES_KEY);
322  const totalAnalyses = analyses.length;
375}
376
377function renderHistoryView() {
378    views['history'].innerHTML = \`
379      <h1>Analysis History</h1>
416}
417
418function renderSettingsView() {
419    const guidelines = getGuidelines();
420    views.settings.innerHTML = \`
465
466
467function renderAnalysisDetailView(analysisId) {
468    const dv = views['analysis-detail'];
469    const analysis = getStore(ANALYSES_KEY).find(a => a.id === analysisId);
489}
490
491function deleteAnalysis(analysisId) {
492    let analyses = getStore(ANALYSES_KEY);
493    setStore(ANALYSES_KEY, analyses.filter(an => an.id !== analysisId));
500
501// --- WIZARD STEP RENDERING ---
502function renderNewAnalysisView(params = {}) { /* Renders the 4-step wizard nav, same as before */
503    views['new-analysis'].innerHTML = \`
504    <h1>New Underwriting Analysis</h1>
518  setWizardStep(currentAnalysisSession.step);
519}
520function setWizardStep(step) { /* Handles step state changes, same logic as before */ 
521    currentAnalysisSession.step = step;
522    document.querySelectorAll('.wizard-step').forEach((s, i) => {
538}
539
540function renderLexStep1() {
541  const pane = document.getElementById('lex-step-1-pane');
542  pane.innerHTML = \`<div class="card">
551}
552
553function renderLexStep2() {
554    const pane = document.getElementById('lex-step-2-pane');
555    const { suggestions, suggestionsError, isProcessing } = currentAnalysisSession;
581    document.getElementById('iq-form').addEventListener('submit', handleFinalAnalysis);
582}
583function renderLexStep3() { /* Renders analysis results, same as before */ 
584  const pane = document.getElementById('lex-step-3-pane');
585  const { analysisResult, analysisError, isProcessing } = currentAnalysisSession;
604  }
605}
606function renderLexStep4() { /* Renders Co-Pilot UI, same as before */ 
607    const pane = document.getElementById('lex-step-4-pane');
608    const { coPilotResult, coPilotError, isProcessing } = currentAnalysisSession;
635
636// --- WIZARD LOGIC & HANDLERS ---
637async function handleDocInputAndSuggest(e) {
638    const fileInput = e.target;
639    const loader = document.getElementById('iq-doc-processing-loader');
669    }
670}
671async function handleFinalAnalysis(e) {
672    if(e) e.preventDefault();
673    const taskQuery = document.getElementById('iq-custom-task-query').value.trim();
698}
699
700async function handleCoPilotAnalysis() {
701    currentAnalysisSession.isProcessing = true;
702    currentAnalysisSession.coPilotError = null;
726
727// --- RESULT RENDERING ---
728function renderAnalysisResults(data) {
729  if (!data || !data.loan_summary) return '<div class="card"><p>Invalid analysis results data.</p></div>';
730  let html = \`<div class="card"><h3>Loan Snapshot</h3><div class="loan-summary-grid">
754}
755
756function renderCoPilotResults(data) {
757    if (!data || !data.co_pilot_assessment) return '<div class="card"><p>Invalid Co-Pilot response.</p></div>';
758    const assessment = data.co_pilot_assessment;
794}
795
796function saveCurrentAnalysis() {
797    const { analysisResult, coPilotResult, docId, analysisQuery, docName } = currentAnalysisSession;
798    if (analysisResult && docId && analysisQuery) {
818}
819
820function populateSuggestedTasks(groups = {}) {
821    const container = document.getElementById('iq-suggested-tasks-list');
822    if (!container) return;
823    container.innerHTML = '';
824    
825    // This function's internal logic for creating and managing checkboxes remains
826    // the same as the original, as it is robust. It's omitted here to avoid repetition.
827    // It will correctly populate based on the new underwriting-specific suggestion categories.
830}
831
832function updateSelectedTasksInTextarea() {
833    const iqCustomTaskInput = document.getElementById('iq-custom-task-query');
834    if(!iqCustomTaskInput) return;
843}
844
845export default async function(req: Request) {
846  const { OpenAI } = await import("https://esm.town/v/std/openai");
847  const { PDFExtract } = await import("npm:pdf.js-extract");
862  const MAX_TEXT_ANALYZE = 30000;
863
864  async function callAI(
865    systemPrompt: string,
866    userMessage: string,
887  }
888
889  async function ingestDocument(file: File, log: LogEntry[]): Promise<{ text: string | null; sourceDesc: string }> {
890    if (!file) return { text: null, sourceDesc: "Unknown" };
891    try {

2import { useState } from "https://esm.sh/react@18.2.0";
3
4export function App() {
5  const [clicked, setClicked] = useState(0);
6  return (

4import React, { useEffect, useState } from "https://esm.sh/react@18.2.0";
5
6export default function StylesViewer() {
7  const [palettes, setPalettes] = useState([]);
8  const [loading, setLoading] = useState(true);

3import StylesViewer from "./StylesViewer.tsx";
4
5export function App() {
6  return <StylesViewer />;
7}

1export async function receiveSMS(req: Request) {
2  // Parse incoming form data
3  const form = await req.formData();

4    "title": "Todo App",
5    "code":
6      "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Task Master</title>\n    <link href=\"https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css\" rel=\"stylesheet\">\n</head>\n<body class=\"bg-gray-100\">\n    <div class=\"max-w-md mx-auto mt-12 p-6 rounded-lg shadow-md bg-white\">\n        <div class=\"flex justify-between items-center mb-6\">\n            <h2 class=\"text-2xl font-bold\">Task Master</h2>\n            <span class=\"text-gray-600\">Manage your tasks efficiently</span>\n        </div>\n        <ul class=\"todo-list\" id=\"todo-list\"></ul>\n        <div class=\"add-todo mt-6 flex justify-between items-center\">\n            <input type=\"text\" id=\"todo-input\" placeholder=\"Add new task\" class=\"w-full py-2 pl-10 text-sm text-gray-800 border border-gray-400 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-600 bg-gray-50\">\n            <button type=\"button\" id=\"add-todo-btn\" class=\"ml-4 px-4 py-2 bg-green-500 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-green-700 hover:shadow-lg focus:bg-green-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-green-800 active:shadow-lg transition duration-150 ease-in-out\">Add Task</button>\n        </div>\n        <div class=\"mt-6 text-center text-gray-600\">\n            Built on <a href=\"https://cerebrascoder.com\" target=\"_blank\" class=\"text-gray-900 underline\">Cerebras Coder</a>\n        </div>\n    </div>\n\n    <script>\n        // Get the todo list and add todo button elements\n        const todoList = document.getElementById('todo-list');\n        const addTodoBtn = document.getElementById('add-todo-btn');\n        const todoInput = document.getElementById('todo-input');\n\n        // Load todos from local storage\n        let todos = JSON.parse(localStorage.getItem('todos')) || [];\n\n        // Function to render the todo list\n        function renderTodoList() {\n            todoList.innerHTML = '';\n            todos.forEach((todo, index) => {\n                const todoItem = document.createElement('li');\n                todoItem.innerHTML = `\n                    <div class=\"flex justify-between items-center py-4 border-b border-gray-300\">\n                        <div class=\"flex items-center\">\n                            <input type=\"checkbox\" id=\"todo-${index}\" class=\"mr-4\" ${todo.completed ? 'checked' : ''}>\n                            <span class=\"todo-text ${todo.completed ? 'text-gray-400 line-through' : 'text-gray-600'}\">${todo.text}</span>\n                        </div>\n                        <button type=\"button\" class=\"px-4 py-2 bg-red-500 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-red-700 hover:shadow-lg focus:bg-red-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-red-800 active:shadow-lg transition duration-150 ease-in-out delete-todo\" data-index=\"${index}\">Delete</button>\n                    </div>\n                `;\n                todoList.appendChild(todoItem);\n            });\n        }\n\n        // Render the initial todo list\n        renderTodoList();\n\n        // Add event listener to the add todo button\n        addTodoBtn.addEventListener('click', () => {\n            const todoText = todoInput.value.trim();\n            if (todoText) {\n                todos.push({ text: todoText, completed: false });\n                localStorage.setItem('todos', JSON.stringify(todos));\n                todoInput.value = '';\n                renderTodoList();\n            }\n        });\n\n        // Add event listener to the todo list\n        todoList.addEventListener('change', (e) => {\n            if (e.target.type === 'checkbox') {\n                const index = parseInt(e.target.id.split('-')[1]);\n                todos[index].completed = e.target.checked;\n                localStorage.setItem('todos', JSON.stringify(todos));\n                renderTodoList();\n            }\n        });\n\n        // Add event listener to the delete todo buttons\n        todoList.addEventListener('click', (e) => {\n            if (e.target.classList.contains('delete-todo')) {\n                const index = parseInt(e.target.dataset.index);\n                todos.splice(index, 1);\n                localStorage.setItem('todos', JSON.stringify(todos));\n                renderTodoList();\n            }\n        });\n    </script>\n</body>\n</html>",
7    "performance": {
8      "tokensPerSecond": 2298.56,
26    "title": "Markdown Editor",
27    "code":
28      "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Markdown Editor</title>\n    <link href=\"https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css\" rel=\"stylesheet\">\n</head>\n<body class=\"bg-white\">\n    <div class=\"max-w-full mx-auto p-4 pt-6 md:p-6 lg:p-8\">\n        <h1 class=\"text-3xl text-center mb-4\">Markdown Editor</h1>\n        <div class=\"flex flex-row\">\n            <div class=\"editor p-4 rounded-lg border border-gray-200 w-full md:w-1/2\">\n                <textarea id=\"editor\" class=\"w-full h-screen p-2 border border-gray-200 rounded-lg\" placeholder=\"Type your Markdown here...\"></textarea>\n            </div>\n            <div class=\"preview p-4 rounded-lg border border-gray-200 w-full md:w-1/2 ml-2 md:ml-4 lg:ml-8\">\n                <div id=\"preview\"></div>\n            </div>\n        </div>\n        <p class=\"text-center mt-4\">Built on <a href=\"https://cerebrascoder.com\">Cerebras Coder</a></p>\n    </div>\n\n    <script>\n        const editor = document.getElementById('editor');\n        const preview = document.getElementById('preview');\n\n        // Initialize textarea with default markdown\n        const defaultMarkdown = `\n# Introduction to Markdown\nMarkdown is a lightweight markup language that is easy to read and write. It is often used for formatting text in plain text editors, chat applications, and even web pages.\n\n## Headers\nHeaders are denoted by the # symbol followed by a space. The number of # symbols determines the level of the header:\n# Heading 1\n## Heading 2\n### Heading 3\n\n## Emphasis\nYou can use emphasis to make your text **bold** or *italic*:\n*Italics*\n**Bold**\n\n## Lists\nYou can use lists to organize your text:\n* Item 1\n* Item 2\n* Item 3\nOr\n1. Item 1\n2. Item 2\n3. Item 3\n\n## Links\nYou can use links to reference external resources:\n[Google](https://www.google.com)\n\n## Images\nYou can use images to add visual content:\n![Markdown Logo](https://upload.wikimedia.org/wikipedia/commons/thumb/4/48/Markdown-mark.svg/208px-Markdown-mark.svg.png)\n`;\n        editor.value = defaultMarkdown;\n\n        // Update preview on input\n        editor.addEventListener('input', () => {\n            const markdown = editor.value;\n            const html = markdownToHtml(markdown);\n            preview.innerHTML = html;\n        });\n\n        // Initialize preview with default markdown\n        const defaultHtml = markdownToHtml(defaultMarkdown);\n        preview.innerHTML = defaultHtml;\n\n        // Function to convert Markdown to HTML\n        function markdownToHtml(markdown) {\n            // Bold\n            markdown = markdown.replace(/\\*\\*(.*?)\\*\\*/g, '<b>$1</b>');\n\n            // Italic\n            markdown = markdown.replace(/\\*(.*?)\\*/g, '<i>$1</i>');\n\n            // Links\n            markdown = markdown.replace(/\\[(.*?)\\]\\((.*?)\\)/g, '<a href=\"$2\">$1</a>');\n\n            // Images\n            markdown = markdown.replace(/!\\[(.*?)\\]\\((.*?)\\)/g, '<img src=\"$2\" alt=\"$1\">');\n\n            // Headings\n            markdown = markdown.replace(/(^#{1,6} )(.*)/gm, (match, level, text) => {\n                return `<h${level.length}>${text}</h${level.length}>`;\n            });\n\n            // Lists\n            markdown = markdown.replace(/^(\\*|\\d+\\.) (.*)/gm, (match, marker, text) => {\n                if (marker.startsWith('*')) {\n                    return `<li>${text}</li>`;\n                } else {\n                    return `<li>${text}</li>`;\n                }\n            });\n\n            // Line breaks\n            markdown = markdown.replace(/\\n/g, '<br>');\n\n            // Fix for nested lists\n            markdown = markdown.replace(/<li><li>/g, '<li>');\n            markdown = markdown.replace(/<\\/li><\\/li>/g, '</li>');\n\n            // Wrap lists in ul\n            markdown = markdown.replace(/(<li>.*<\\/li>)/g, '<ul>$1</ul>');\n\n            return markdown;\n        }\n    </script>\n</body>\n</html>",
29    "performance": {
30      "tokensPerSecond": 4092.96,

2import { ITERATIONS_TABLE, KEY, PROJECTS_TABLE, SCHEMA_VERSION } from "./migrations.ts";
3
4export async function createProject(prompt: string) {
5  const projectResult = await sqlite.execute(
6    `INSERT INTO ${PROJECTS_TABLE} (initial_prompt) VALUES (?)`,
11}
12
13export async function getNextVersionNumber(projectId: number) {
14  const data = await sqlite.execute(
15    `SELECT version_number FROM ${ITERATIONS_TABLE}
21}
22
23export async function insertVersion(projectId: number, versionNumber: number, prompt: string, code: string) {
24  await sqlite.execute(
25    `INSERT INTO ${ITERATIONS_TABLE} 
29}
30
31export async function getCodeInner(table: string, project: string, version?: string) {
32  let data;
33  if (version === undefined) {
50}
51
52export async function getCode(project: string, version?: string) {
53  // try to get code in the new table partition first
54  const code = await getCodeInner(ITERATIONS_TABLE, project, version);