\n {userId ? (\n // Existing app content\n <>\n {/* Existing JSX remains the same */}\n

\n ✅ Logged in as User {userId}\n

\n \n ) : (\n

Loading... Please wait

\n )}\n

\n );\n}\n\n// Rest of the client-side code remains the same\n\nexport default async function server(request: Request): Promise {\n try {\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n const KEY = \"jobPostingApp\";\n const SCHEMA_VERSION = 12; // Incrementing for user-specific data\n\n // Enhanced table creation with user-specific tables\n const createTablesWithRetry = async () => {\n const tableCreationQueries = [\n // Existing job, message, and applicant tables\n {\n name: 'users',\n query: `CREATE TABLE IF NOT EXISTS ${KEY}_users_${SCHEMA_VERSION} (\n id TEXT PRIMARY KEY,\n created_at DATETIME DEFAULT CURRENT_TIMESTAMP\n )`\n },\n {\n name: 'user_data',\n query: `CREATE TABLE IF NOT EXISTS ${KEY}_user_data_${SCHEMA_VERSION} (\n user_id TEXT NOT NULL,\n data_key TEXT NOT NULL,\n data_value TEXT NOT NULL,\n updated_at DATETIME DEFAULT CURRENT_TIMESTAMP,\n PRIMARY KEY (user_id, data_key)\n )`\n }\n ];\n\n // Existing table creation logic\n // ... (keep the previous implementation)\n };\n\n // New authentication route\n if (request.method === 'POST' && new URL(request.url).pathname === '/auth') {\n try {\n // Generate or retrieve user ID\n const userId = crypto.randomUUID(); // Generates a unique identifier\n \n // Store user in database\n await sqlite.execute(\n `INSERT OR IGNORE INTO ${KEY}_users_${SCHEMA_VERSION} (id) VALUES (?)`,\n [userId]\n );\n\n return new Response(JSON.stringify({ userId }), {\n headers: { 'Content-Type': 'application/json' }\n });\n } catch (authError) {\n console.error('Authentication error:', authError);\n return new Response(JSON.stringify({ error: 'Authentication failed' }), { \n status: 500,\n headers: { 'Content-Type': 'application/json' } \n });\n }\n }\n\n // Data saving route\n if (request.method === 'POST' && new URL(request.url).pathname === '/save-data') {\n try {\n const { userId, key, value } = await request.json();\n \n // Upsert user data\n await sqlite.execute(\n `INSERT OR REPLACE INTO ${KEY}_user_data_${SCHEMA_VERSION} \n (user_id, data_key, data_value) VALUES (?, ?, ?)`,\n [userId, key, value]\n );\n\n return new Response(JSON.stringify({ success: true }), {\n headers: { 'Content-Type': 'application/json' }\n });\n } catch (saveError) {\n console.error('Data save error:', saveError);\n return new Response(JSON.stringify({ error: 'Failed to save data' }), { \n status: 500,\n headers: { 'Content-Type': 'application/json' } \n });\n }\n }\n\n // Data retrieval route\n if (request.method === 'GET' && new URL(request.url).pathname === '/data') {\n try {\n const url = new URL(request.url);\n const userId = url.searchParams.get('userId');\n const key = url.searchParams.get('key');\n\n const result = await sqlite.execute(\n `SELECT data_value FROM ${KEY}_user_data_${SCHEMA_VERSION} \n WHERE user_id = ? AND data_key = ?`,\n [userId, key]\n );\n\n if (result.rows.length > 0) {\n return new Response(JSON.stringify({ \n value: result.rows[0].data_value \n }), {\n headers: { 'Content-Type': 'application/json' }\n });\n }\n\n return new Response(JSON.stringify({ value: null }), {\n headers: { 'Content-Type': 'application/json' }\n });\n } catch (retrieveError) {\n console.error('Data retrieval error:', retrieveError);\n return new Response(JSON.stringify({ error: 'Failed to retrieve data' }), { \n status: 500,\n headers: { 'Content-Type': 'application/json' } \n });\n }\n }\n\n // Existing routes for jobs, messages, and applications\n // ... (keep previous route handlers)\n\n return new Response(`\n \n \n Persistent Job Board\n \n \n \n

\n \n \n \n \n `, {\n headers: { 'Content-Type': 'text/html' }\n });\n } catch (globalError) {\n console.error('Global server error:', globalError);\n return new Response(JSON.stringify({ \n error: 'Unexpected server error', \n details: globalError.toString() \n }), { \n status: 500,\n headers: { 'Content-Type': 'application/json' } \n });\n }\n}\n\n// CSS remains the same as in the previous implementation\nconst css = `\n /* Previous CSS remains unchanged */\n`;",[],[168],"files",[146,166],"counts",{"_179":33,"_180":154,"_181":33,"_182":33},"pulls","branches","forks","envVars","contents",[185,188],{"_106":147,"_99":148,"_149":150,"_151":-5,"_152":138,"_153":154,"_155":120,"_108":186,"_103":33,"_157":158,"_159":160,"_161":27,"_162":-5,"_102":187},["D",1739822107149],[148],{"_106":167,"_99":168,"_149":118,"_151":-5,"_152":138,"_153":137,"_155":120,"_108":189,"_103":170,"_157":171,"_159":172,"_161":27,"_162":-5,"_102":190},["D",1739852383452],[168],"upstream","screenshots","emptyEnvVars","isNew","routes/_app.x.$handle.$name.branch.$branch.history",{"_97":98,"_99":100,"_101":43,"_104":197,"_201":202,"_325":33,"_326":27},{"_106":107,"_99":100,"_108":198,"_110":-5,"_111":27,"_112":113,"_114":-5,"_115":-5,"_12":116,"_117":118,"_119":120,"_121":-5,"_122":33,"_123":124,"_125":124,"_126":127,"_128":127,"_129":127,"_130":124,"_131":27,"_21":199,"_135":200},["D",1746229585847],{"_97":98,"_133":134},{"_103":137,"_99":43,"_106":138,"_139":107,"_140":-5,"_141":-5,"_142":-5,"_143":-5},"history",[203,208,216,223,231,239,247,254,262,269,277,285,293,301,308,315],{"_149":118,"_103":137,"_108":204,"_152":138,"_175":205},["D",1739852383452],[206],{"_106":167,"_152":138,"_149":118,"_99":168,"_159":172,"_157":171,"_103":170,"_151":-5,"_108":204,"_153":137,"_162":-5,"_155":120,"_161":27,"_102":207},[168],{"_149":118,"_103":170,"_108":209,"_152":138,"_175":210},["D",1739852340776],[211],{"_106":212,"_152":138,"_149":118,"_99":168,"_159":213,"_157":171,"_103":214,"_151":-5,"_108":209,"_153":170,"_162":-5,"_155":27,"_161":27,"_102":215},"a96aaf3c-27af-11f0-aecd-569c3dd06744","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect, useCallback } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\n\n// Enhanced authentication and persistent storage hook\nfunction useServerStorage(key, initialValue) {\n const [storedValue, setStoredValue] = useState(initialValue);\n const [userId, setUserId] = useState(null);\n\n // Initialize user and fetch existing data on component mount\n useEffect(() => {\n const initializeUser = async () => {\n try {\n // Check if user is logged in or create a new user\n const response = await fetch('/auth', { method: 'POST' });\n const userData = await response.json();\n \n if (userData.userId) {\n setUserId(userData.userId);\n \n // Fetch existing data for this user\n const dataResponse = await fetch(`/data?key=${key}&userId=${userData.userId}`);\n const savedData = await dataResponse.json();\n \n if (savedData.value) {\n setStoredValue(JSON.parse(savedData.value));\n }\n }\n } catch (error) {\n console.error('User initialization failed', error);\n }\n };\n\n initializeUser();\n }, [key]);\n\n // Save value to server whenever it changes\n const setValue = async (value) => {\n try {\n const valueToStore = value instanceof Function ? value(storedValue) : value;\n setStoredValue(valueToStore);\n\n if (userId) {\n await fetch('/save-data', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({\n userId,\n key,\n value: JSON.stringify(valueToStore)\n })\n });\n }\n } catch (error) {\n console.error('Failed to save data', error);\n }\n };\n\n return [storedValue, setValue, userId];\n}\n\nfunction App() {\n const [jobs, setJobs, userId] = useServerStorage('jobs', []);\n const [messages, setMessages] = useServerStorage('messages', []);\n const [newJob, setNewJob] = useServerStorage('newJob', { \n title: '', \n position: '',\n openings: '1',\n company: '', \n description: '', \n employerEmail: '',\n applicationLink: ''\n });\n const [newMessage, setNewMessage] = useServerStorage('newMessage', {\n username: '',\n text: ''\n });\n\n // Fetch data specific to the logged-in user\n useEffect(() => {\n if (userId) {\n fetchJobs();\n fetchMessages();\n }\n }, [userId]);\n\n const fetchJobs = async () => {\n try {\n const response = await fetch(`/jobs?userId=${userId}`);\n const data = await response.json();\n setJobs(data);\n } catch (error) {\n console.error('Failed to fetch jobs', error);\n }\n };\n\n const fetchMessages = async () => {\n try {\n const response = await fetch(`/messages?userId=${userId}`);\n const data = await response.json();\n setMessages(data);\n } catch (error) {\n console.error('Failed to fetch messages', error);\n }\n };\n\n const handleJobSubmit = async (e) => {\n e.preventDefault();\n try {\n // Validate email and application link\n const emailRegex = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;\n const urlRegex = /^(https?:\\/\\/)?([\\da-z\\.-]+)\\.([a-z\\.]{2,6})([\\/\\w \\.-]*)*\\/?$/;\n\n if (!emailRegex.test(newJob.employerEmail)) {\n alert('Please enter a valid email address');\n return;\n }\n\n if (newJob.applicationLink && !urlRegex.test(newJob.applicationLink)) {\n alert('Please enter a valid URL for the application link');\n return;\n }\n\n await fetch('/jobs', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify(newJob)\n });\n \n // Reset job form\n setNewJob({ \n title: '', \n position: '',\n openings: '1',\n company: '', \n description: '', \n employerEmail: '',\n applicationLink: ''\n });\n \n fetchJobs();\n } catch (error) {\n console.error('Job submission failed', error);\n alert('Failed to submit job. Please try again.');\n }\n };\n\n const handleMessageSubmit = async (e) => {\n e.preventDefault();\n if (!newMessage.username.trim()) {\n alert('Please enter a username');\n return;\n }\n\n try {\n await fetch('/messages', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify(newMessage)\n });\n \n // Reset message form\n setNewMessage({ username: newMessage.username, text: '' });\n \n fetchMessages();\n } catch (error) {\n console.error('Message submission failed', error);\n alert('Failed to send message. Please try again.');\n }\n };\n\n return (\n

\n {userId ? (\n <>\n

🚀 Job Board & Community Chat

\n \n

Post a Job

\n setNewJob({...newJob, title: e.target.value})}\n required\n />\n setNewJob({...newJob, position: e.target.value})}\n required\n />\n setNewJob({...newJob, openings: e.target.value})}\n required\n >\n {['1', '2', '3', '4', '5', 'Multiple'].map(num => (\n \n ))}\n \n setNewJob({...newJob, company: e.target.value})}\n required\n />\n

setNewJob({...newJob, description: e.target.value})}\n                required\n              />\n              <input \n                type=\"email\"\n                placeholder=\"Employer's Email\" \n                value={newJob.employerEmail}\n                onChange={(e) => setNewJob({...newJob, employerEmail: e.target.value})}\n                required\n              />\n              <input \n                type=\"url\"\n                placeholder=\"Application Link (optional)\" \n                value={newJob.applicationLink}\n                onChange={(e) => setNewJob({...newJob, applicationLink: e.target.value})}\n              />\n              <button type=\"submit\">Post Job</button>\n            </form>\n\n            <h2>Job Listings</h2>\n            {jobs.map((job, index) => (\n              <div key={index} className=\"job-card\">\n                <h3>{job.title} - {job.position}</h3>\n                <div className=\"job-details\">\n                  <span>🏢 {job.company}</span>\n                  <span>🔢 {job.openings} Openings</span>\n                </div>\n                <p>{job.description}</p>\n                <div className=\"job-contact\">\n                  <a href={`mailto:${job.employerEmail}`}>Contact Employer</a>\n                  {job.applicationLink && (\n                    <a href={job.applicationLink} target=\"_blank\" rel=\"noopener noreferrer\">\n                      Apply Now\n                    </a>\n                  )}\n                </div>\n              </div>\n            ))}\n          </div>\n\n          <div className=\"chat-section\">\n            <h2>Community Chat</h2>\n            <form onSubmit={handleMessageSubmit}>\n              <input \n                placeholder=\"Your Username\" \n                value={newMessage.username}\n                onChange={(e) => setNewMessage({...newMessage, username: e.target.value})}\n                required\n              />\n              <input \n                placeholder=\"Type a message...\" \n                value={newMessage.text}\n                onChange={(e) => setNewMessage({...newMessage, text: e.target.value})}\n                required\n              />\n              <button type=\"submit\">Send Message</button>\n            </form>\n\n            <div className=\"messages\">\n              {messages.map((msg, index) => (\n                <div key={index} className=\"message\">\n                  <strong>{msg.username}:</strong> {msg.text}\n                </div>\n              ))}\n            </div>\n          </div>\n\n          <div style={{\n            position: 'fixed', \n            bottom: '10px', \n            right: '10px', \n            backgroundColor: 'rgba(0,0,0,0.6)', \n            color: 'white', \n            padding: '5px 10px', \n            borderRadius: '4px'\n          }}>\n            ✅ Logged in as User {userId}\n          </div>\n        </>\n      ) : (\n        <div>Loading... Please wait</div>\n      )}\n    </div>\n  );\n}\n\nfunction client() {\n  createRoot(document.getElementById(\"root\")).render(<App />);\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise<Response> {\n  try {\n    const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n    const KEY = \"jobPostingApp\";\n    const SCHEMA_VERSION = 13; // Incrementing for new job posting fields\n\n    // Enhanced table creation with user-specific tables\n    const createTablesWithRetry = async () => {\n      const tableCreationQueries = [\n        {\n          name: 'users',\n          query: `CREATE TABLE IF NOT EXISTS ${KEY}_users_${SCHEMA_VERSION} (\n            id TEXT PRIMARY KEY,\n            created_at DATETIME DEFAULT CURRENT_TIMESTAMP\n          )`\n        },\n        {\n          name: 'user_data',\n          query: `CREATE TABLE IF NOT EXISTS ${KEY}_user_data_${SCHEMA_VERSION} (\n            user_id TEXT NOT NULL,\n            data_key TEXT NOT NULL,\n            data_value TEXT NOT NULL,\n            updated_at DATETIME DEFAULT CURRENT_TIMESTAMP,\n            PRIMARY KEY (user_id, data_key)\n          )`\n        },\n        {\n          name: 'jobs',\n          query: `CREATE TABLE IF NOT EXISTS ${KEY}_jobs_${SCHEMA_VERSION} (\n            id INTEGER PRIMARY KEY AUTOINCREMENT,\n            user_id TEXT NOT NULL,\n            title TEXT NOT NULL,\n            position TEXT NOT NULL,\n            openings TEXT NOT NULL,\n            company TEXT NOT NULL,\n            description TEXT NOT NULL,\n            employer_email TEXT NOT NULL,\n            application_link TEXT,\n            timestamp DATETIME DEFAULT CURRENT_TIMESTAMP\n          )`\n        },\n        {\n          name: 'messages',\n          query: `CREATE TABLE IF NOT EXISTS ${KEY}_messages_${SCHEMA_VERSION} (\n            id INTEGER PRIMARY KEY AUTOINCREMENT,\n            user_id TEXT NOT NULL,\n            username TEXT NOT NULL,\n            text TEXT NOT NULL,\n            timestamp DATETIME DEFAULT CURRENT_TIMESTAMP\n          )`\n        }\n      ];\n\n      // Existing table creation logic with retry mechanism\n      for (const table of tableCreationQueries) {\n        let retries = 0;\n        const maxRetries = 3;\n        while (retries < maxRetries) {\n          try {\n            await sqlite.execute(table.query);\n            break;\n          } catch (tableError) {\n            retries++;\n            console.error(`Table creation error for ${table.name} (Attempt ${retries}):`, tableError);\n            \n            if (retries >= maxRetries) {\n              console.log('Diagnostic Information:', {\n                sqliteModule: sqlite,\n                currentKey: KEY,\n                currentSchemaVersion: SCHEMA_VERSION,\n                tableName: table.name,\n                fullQuery: table.query\n              });\n              throw tableError;\n            }\n          }\n        }\n      }\n    };\n\n    // Authentication route\n    if (request.method === 'POST' && new URL(request.url).pathname === '/auth') {\n      try {\n        const userId = crypto.randomUUID();\n        \n        await sqlite.execute(\n          `INSERT OR IGNORE INTO ${KEY}_users_${SCHEMA_VERSION} (id) VALUES (?)`,\n          [userId]\n        );\n\n        return new Response(JSON.stringify({ userId }), {\n          headers: { 'Content-Type': 'application/json' }\n        });\n      } catch (authError) {\n        console.error('Authentication error:', authError);\n        return new Response(JSON.stringify({ error: 'Authentication failed' }), { \n          status: 500,\n          headers: { 'Content-Type': 'application/json' } \n        });\n      }\n    }\n\n    // Job posting route\n    if (request.method === 'POST' && new URL(request.url).pathname === '/jobs') {\n      try {\n        const job = await request.json();\n        const userId = job.userId; // Ensure user ID is passed from client\n\n        await sqlite.execute(\n          `INSERT INTO ${KEY}_jobs_${SCHEMA_VERSION} \n           (user_id, title, position, openings, company, description, employer_email, application_link) \n           VALUES (?, ?, ?, ?, ?, ?, ?, ?)`,\n          [\n            userId, \n            job.title, \n            job.position, \n            job.openings, \n            job.company, \n            job.description, \n            job.employerEmail, \n            job.applicationLink || null\n          ]\n        );\n\n        return new Response(JSON.stringify({ success: true }), { \n          headers: { 'Content-Type': 'application/json' } \n        });\n      } catch (jobInsertError) {\n        console.error('Job insert error:', jobInsertError);\n        return new Response(JSON.stringify({ \n          error: 'Failed to insert job', \n          details: jobInsertError.toString() \n        }), { \n          status: 500,\n          headers: { 'Content-Type': 'application/json' } \n        });\n      }\n    }\n\n    // Message posting route\n    if (request.method === 'POST' && new URL(request.url).pathname === '/messages') {\n      try {\n        const message = await request.json();\n        const userId = message.userId; // Ensure user ID is passed from client\n\n        await sqlite.execute(\n          `INSERT INTO ${KEY}_messages_${SCHEMA_VERSION} \n           (user_id, username, text) VALUES (?, ?, ?)`,\n          [userId, message.username, message.text]\n        );\n\n        return new Response(JSON.stringify({ success: true }), { \n          headers: { 'Content-Type': 'application/json' } \n        });\n      } catch (messageInsertError) {\n        console.error('Message insert error:', messageInsertError);\n        return new Response(JSON.stringify({ \n          error: 'Failed to insert message', \n          details: messageInsertError.toString() \n        }), { \n          status: 500,\n          headers: { 'Content-Type': 'application/json' } \n        });\n      }\n    }\n\n    // Jobs retrieval route\n    if (request.method === 'GET' && new URL(request.url).pathname === '/jobs') {\n      try {\n        const url = new URL(request.url);\n        const userId = url.searchParams.get('userId');\n\n        const jobs = await sqlite.execute(`\n          SELECT * FROM ${KEY}_jobs_${SCHEMA_VERSION} \n          ORDER BY timestamp DESC \n          LIMIT 20\n        `);\n\n        return new Response(JSON.stringify(jobs.rows), { \n          headers: { 'Content-Type': 'application/json' } \n        });\n      } catch (jobsFetchError) {\n        console.error('Jobs fetch error:', jobsFetchError);\n        return new Response(JSON.stringify({ \n          error: 'Failed to fetch jobs', \n          details: jobsFetchError.toString() \n        }), { \n          status: 500,\n          headers: { 'Content-Type': 'application/json' } \n        });\n      }\n    }\n\n    // Messages retrieval route\n    if (request.method === 'GET' && new URL(request.url).pathname === '/messages') {\n      try {\n        const url = new URL(request.url);\n        const userId = url.searchParams.get('userId');\n\n        const messages = await sqlite.execute(`\n          SELECT * FROM ${KEY}_messages_${SCHEMA_VERSION} \n          ORDER BY timestamp DESC \n          LIMIT 50\n        `);\n\n        return new Response(JSON.stringify(messages.rows), { \n          headers: { 'Content-Type': 'application/json' } \n        });\n      } catch (messagesFetchError) {\n        console.error('Messages fetch error:', messagesFetchError);\n        return new Response(JSON.stringify({ \n          error: 'Failed to fetch messages', \n          details: messagesFetchError.toString() \n        }), { \n          status: 500,\n          headers: { 'Content-Type': 'application/json' } \n        });\n      }\n    }\n\n    // Render HTML\n    return new Response(`\n      <html>\n        <head>\n          <title>Job Board & Community Chat</title>\n          <style>${css}</style>\n        </head>\n        <body>\n          <div id=\"root\"></div>\n          <script src=\"https://esm.town/v/std/catch\"></script>\n          <script type=\"module\" src=\"${import.meta.url}\"></script>\n        </body>\n      </html>\n    `, {\n      headers: { 'Content-Type': 'text/html' }\n    });\n  } catch (globalError) {\n    console.error('Global server error:', globalError);\n    return new Response(JSON.stringify({ \n      error: 'Unexpected server error', \n      details: globalError.toString() \n    }), { \n      status: 500,\n      headers: { 'Content-Type': 'application/json' } \n    });\n  }\n}\n\n// CSS with additional styling for new layout\nconst css = `\nbody {\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n  max-width: 800px;\n  margin: 0 auto;\n  padding: 20px;\n  line-height: 1.6;\n  background-color: #f4f4f4;\n}\n\n.container {\n  background: white;\n  padding: 30px;\n  border-radius: 8px;\n  box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n}\n\nh1, h2 {\n  text-align: center;\n  color: #333;\n}\n\nform {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  margin-bottom: 20px;\n}\n\ninput, textarea, select {\n  padding: 10px;\n  border: 1px solid #ddd;\n  border-radius: 4px;\n}\n\nbutton {\n  background-color: #4CAF50;\n  color: white;\n  border: none;\n  padding: 10px;\n  border-radius: 4px;\n  cursor: pointer;\n  transition: background-color 0.3s ease;\n}\n\nbutton:hover {\n  background-color: #45a049;\n}\n\n.job-card {\n  background-color: #f9f9f9;\n  border-radius: 4px;\n  padding: 15px;\n  margin-bottom: 15px;\n  box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n}\n\n.job-details {\n  display: flex;\n  justify-content: space-between;\n  margin: 10px 0;\n  color: #666;\n  font-size: 0.9em;\n}\n\n.job-contact {\n  display: flex;\n  justify-content: space-between;\n  margin-top: 10px;\n}\n\n.job-contact a {\n  color: #2196F3;\n  text-decoration: none;\n  font-weight: bold;\n}\n\n.messages {\n  max-height: 300px;\n  overflow-y: auto;\n  border: 1px solid #ddd;\n  padding: 10px;\n  border-radius: 4px;\n}\n\n.message {\n  background-color: #f1f1f1;\n  margin-bottom: 5px;\n  padding: 8px;\n  border-radius: 4px;\n}\n\n.message strong {\n  margin-right: 10px;\n  color: #4CAF50;\n}\n`;",14,[168],{"_149":118,"_103":214,"_108":217,"_152":138,"_175":218},["D",1739851577910],[219],{"_106":220,"_152":138,"_149":118,"_99":168,"_159":172,"_157":171,"_103":221,"_151":-5,"_108":217,"_153":214,"_162":-5,"_155":27,"_161":27,"_102":222},"a9640ed4-27af-11f0-aecd-569c3dd06744",13,[168],{"_149":118,"_103":221,"_108":224,"_152":138,"_175":225},["D",1739827817721],[226],{"_106":227,"_152":138,"_149":118,"_99":168,"_159":228,"_157":171,"_103":229,"_151":-5,"_108":224,"_153":221,"_162":-5,"_155":27,"_161":27,"_102":230},"a95f05ba-27af-11f0-aecd-569c3dd06744","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect, useCallback } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\n\nfunction useLocalStorage(key, initialValue) {\n  const [storedValue, setStoredValue] = useState(() => {\n    try {\n      const item = window.localStorage.getItem(key);\n      return item ? JSON.parse(item) : initialValue;\n    } catch (error) {\n      console.log(error);\n      return initialValue;\n    }\n  });\n\n  const setValue = (value) => {\n    try {\n      const valueToStore = value instanceof Function ? value(storedValue) : value;\n      setStoredValue(valueToStore);\n      window.localStorage.setItem(key, JSON.stringify(valueToStore));\n    } catch (error) {\n      console.log(error);\n    }\n  };\n\n  return [storedValue, setValue];\n}\n\nfunction ApplyModal({ job, onClose, onSubmit }) {\n  const [applicant, setApplicant] = useState({\n    name: '',\n    email: '',\n    phone: '',\n    resume: '',\n    jobTitle: job.title,\n    company: job.company\n  });\n\n  const handleSubmit = async (e) => {\n    e.preventDefault();\n    try {\n      await onSubmit(applicant);\n      onClose();\n    } catch (error) {\n      alert('Failed to save application. Please try again.');\n    }\n  };\n\n  return (\n    <div className=\"modal-overlay\">\n      <div className=\"modal-content\">\n        <h2>Apply for {job.title} at {job.company}</h2>\n        <form onSubmit={handleSubmit}>\n          <input \n            placeholder=\"Full Name\" \n            value={applicant.name}\n            onChange={(e) => setApplicant({...applicant, name: e.target.value})}\n            required \n          />\n          <input \n            type=\"email\"\n            placeholder=\"Email Address\" \n            value={applicant.email}\n            onChange={(e) => setApplicant({...applicant, email: e.target.value})}\n            required \n          />\n          <input \n            type=\"tel\"\n            placeholder=\"Phone Number\" \n            value={applicant.phone}\n            onChange={(e) => setApplicant({...applicant, phone: e.target.value})}\n            required \n          />\n          <textarea \n            placeholder=\"Resume/Background\" \n            value={applicant.resume}\n            onChange={(e) => setApplicant({...applicant, resume: e.target.value})}\n            required \n          />\n          <div className=\"modal-actions\">\n            <button type=\"button\" onClick={onClose}>Cancel</button>\n            <button type=\"submit\">Save Application</button>\n          </div>\n        </form>\n      </div>\n    </div>\n  );\n}\n\nfunction App() {\n  const [jobs, setJobs] = useLocalStorage('jobs', []);\n  const [messages, setMessages] = useLocalStorage('messages', []);\n  const [newJob, setNewJob] = useLocalStorage('newJob', { \n    title: '', \n    company: '', \n    description: '', \n    openings: 'One Openings', \n    location: '' \n  });\n  const [newMessage, setNewMessage] = useLocalStorage('newMessage', {\n    username: '',\n    text: ''\n  });\n  const [selectedJob, setSelectedJob] = useState(null);\n\n  useEffect(() => {\n    fetchJobs();\n    fetchMessages();\n  }, []);\n\n  const fetchJobs = async () => {\n    try {\n      const response = await fetch('/jobs');\n      const data = await response.json();\n      setJobs(data);\n    } catch (error) {\n      console.error('Failed to fetch jobs', error);\n    }\n  };\n\n  const fetchMessages = async () => {\n    try {\n      const response = await fetch('/messages');\n      const data = await response.json();\n      setMessages(data);\n    } catch (error) {\n      console.error('Failed to fetch messages', error);\n    }\n  };\n\n  const handleJobSubmit = async (e) => {\n    e.preventDefault();\n    try {\n      await fetch('/jobs', {\n        method: 'POST',\n        headers: { 'Content-Type': 'application/json' },\n        body: JSON.stringify(newJob)\n      });\n      \n      localStorage.removeItem('newJob');\n      \n      setNewJob({ \n        title: '', \n        company: '', \n        description: '', \n        openings: 'One Openings', \n        location: '' \n      });\n      fetchJobs();\n    } catch (error) {\n      console.error('Job submission failed', error);\n      alert('Failed to submit job. Please try again.');\n    }\n  };\n\n  const handleMessageSubmit = async (e) => {\n    e.preventDefault();\n    if (!newMessage.username.trim()) {\n      alert('Please enter a username');\n      return;\n    }\n\n    try {\n      await fetch('/messages', {\n        method: 'POST',\n        headers: { 'Content-Type': 'application/json' },\n        body: JSON.stringify(newMessage)\n      });\n      \n      localStorage.removeItem('newMessage');\n      \n      setNewMessage({ username: newMessage.username, text: '' });\n      fetchMessages();\n    } catch (error) {\n      console.error('Message submission failed', error);\n      alert('Failed to send message. Please try again.');\n    }\n  };\n\n  const handleApplicantSubmit = async (applicant) => {\n    try {\n      const response = await fetch('/apply', {\n        method: 'POST',\n        headers: { 'Content-Type': 'application/json' },\n        body: JSON.stringify(applicant)\n      });\n\n      if (!response.ok) {\n        throw new Error('Application submission failed');\n      }\n\n      alert('Application saved successfully!');\n      setSelectedJob(null);\n    } catch (error) {\n      console.error('Applicant submission error:', error);\n      alert('Failed to save application. Please try again.');\n    }\n  };\n\n  return (\n    <div className=\"container\">\n      <h1>🚀 Job Board & Community Chat</h1>\n      \n      <div className=\"job-section\">\n        <h2>Post a Job</h2>\n        <form onSubmit={handleJobSubmit}>\n          <input \n            placeholder=\"Job Title\" \n            value={newJob.title}\n            onChange={(e) => setNewJob({...newJob, title: e.target.value})}\n            required\n          />\n          <input \n            placeholder=\"Company\" \n            value={newJob.company}\n            onChange={(e) => setNewJob({...newJob, company: e.target.value})}\n            required\n          />\n          <select\n            value={newJob.openings}\n            onChange={(e) => setNewJob({...newJob, openings: e.target.value})}\n            required\n          >\n            <option>One Openings</option>\n            <option>Two Openings</option>\n            <option>Three Openings</option>\n            <option>Four Openings</option>\n            <option>Five Openings</option>\n            <option>Multiple Openings</option>\n          </select>\n          <input \n            placeholder=\"Location (City, Country)\" \n            value={newJob.location}\n            onChange={(e) => setNewJob({...newJob, location: e.target.value})}\n            required\n          />\n          <textarea \n            placeholder=\"Job Description\"\n            value={newJob.description}\n            onChange={(e) => setNewJob({...newJob, description: e.target.value})}\n            required\n          />\n          <button type=\"submit\">Post Job</button>\n        </form>\n\n        <h2>Job Listings</h2>\n        {jobs.map((job, index) => (\n          <div key={index} className=\"job-card\">\n            <h3>{job.title} @ {job.company}</h3>\n            <div className=\"job-details\">\n              <span>📍 {job.location}</span>\n              <span>🔢 {job.openings}</span>\n            </div>\n            <p>{job.description}</p>\n            <button \n              onClick={() => setSelectedJob(job)}\n              className=\"apply-button\"\n            >\n              Save Application\n            </button>\n          </div>\n        ))}\n      </div>\n\n      <div className=\"chat-section\">\n        <h2>Community Chat</h2>\n        <div className=\"messages\">\n          {messages.map((msg, index) => (\n            <div key={index} className=\"message\">\n              <strong>{msg.username}:</strong> {msg.text}\n            </div>\n          ))}\n        </div>\n        <form onSubmit={handleMessageSubmit}>\n          <input \n            placeholder=\"Your Username\" \n            value={newMessage.username}\n            onChange={(e) => setNewMessage({...newMessage, username: e.target.value})}\n            required\n          />\n          <input \n            placeholder=\"Type a message...\" \n            value={newMessage.text}\n            onChange={(e) => setNewMessage({...newMessage, text: e.target.value})}\n            required\n          />\n          <button type=\"submit\">Send</button>\n        </form>\n      </div>\n\n      {selectedJob && (\n        <ApplyModal \n          job={selectedJob} \n          onClose={() => setSelectedJob(null)}\n          onSubmit={handleApplicantSubmit}\n        />\n      )}\n\n      <a \n        href={import.meta.url.replace(\"esm.town\", \"val.town\")} \n        target=\"_top\" \n        style={{color: '#888', textDecoration: 'none', fontSize: '0.8em'}}\n      >\n        View Source\n      </a>\n      \n      <div style={{\n        position: 'fixed', \n        bottom: '10px', \n        right: '10px', \n        backgroundColor: 'rgba(0,0,0,0.6)', \n        color: 'white', \n        padding: '5px 10px', \n        borderRadius: '4px'\n      }}>\n        ✅ Auto-save enabled\n      </div>\n    </div>\n  );\n}\n\nfunction client() {\n  createRoot(document.getElementById(\"root\")).render(<App />);\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise<Response> {\n  try {\n    // Dynamically import sqlite with enhanced error handling\n    let sqlite;\n    try {\n      const sqliteModule = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n      sqlite = sqliteModule.sqlite;\n    } catch (importError) {\n      console.error('SQLite import error:', importError);\n      return new Response(JSON.stringify({ \n        error: 'Failed to import SQLite', \n        details: importError.toString() \n      }), { \n        status: 500,\n        headers: { 'Content-Type': 'application/json' } \n      });\n    }\n\n    const KEY = \"jobPostingApp\";\n    const SCHEMA_VERSION = 11; // Incrementing schema version with applicant feature\n\n    // Enhanced table creation with multiple retry mechanisms\n    const createTablesWithRetry = async (maxRetries = 3) => {\n      const tableCreationQueries = [\n        {\n          name: 'jobs',\n          query: `CREATE TABLE IF NOT EXISTS ${KEY}_jobs_${SCHEMA_VERSION} (\n            id INTEGER PRIMARY KEY AUTOINCREMENT,\n            title TEXT NOT NULL,\n            company TEXT NOT NULL,\n            description TEXT NOT NULL,\n            openings TEXT NOT NULL,\n            location TEXT NOT NULL,\n            timestamp DATETIME DEFAULT CURRENT_TIMESTAMP\n          )`\n        },\n        {\n          name: 'messages',\n          query: `CREATE TABLE IF NOT EXISTS ${KEY}_messages_${SCHEMA_VERSION} (\n            id INTEGER PRIMARY KEY AUTOINCREMENT,\n            username TEXT NOT NULL,\n            text TEXT NOT NULL,\n            timestamp DATETIME DEFAULT CURRENT_TIMESTAMP\n          )`\n        },\n        {\n          name: 'applicants',\n          query: `CREATE TABLE IF NOT EXISTS ${KEY}_applicants_${SCHEMA_VERSION} (\n            id INTEGER PRIMARY KEY AUTOINCREMENT,\n            name TEXT NOT NULL,\n            email TEXT NOT NULL,\n            phone TEXT NOT NULL,\n            resume TEXT NOT NULL,\n            job_title TEXT NOT NULL,\n            company TEXT NOT NULL,\n            timestamp DATETIME DEFAULT CURRENT_TIMESTAMP\n          )`\n        }\n      ];\n\n      for (const table of tableCreationQueries) {\n        let retries = 0;\n        while (retries < maxRetries) {\n          try {\n            if (retries > 0) {\n              await new Promise(resolve => setTimeout(resolve, 1000 * retries));\n            }\n\n            await sqlite.execute(table.query);\n            break;\n          } catch (tableError) {\n            retries++;\n            console.error(`Table creation error for ${table.name} (Attempt ${retries}):`, tableError);\n            \n            if (retries >= maxRetries) {\n              console.log('Diagnostic Information:', {\n                sqliteModule: sqlite,\n                currentKey: KEY,\n                currentSchemaVersion: SCHEMA_VERSION,\n                tableName: table.name,\n                fullQuery: table.query\n              });\n\n              try {\n                await sqlite.execute(`DROP TABLE IF EXISTS ${KEY}_${table.name}_${SCHEMA_VERSION}`);\n                await sqlite.execute(table.query);\n              } catch (dropError) {\n                console.error(`Catastrophic failure creating ${table.name} table:`, dropError);\n                throw dropError;\n              }\n            }\n          }\n        }\n      }\n    };\n\n    // Execute table creation with comprehensive error handling\n    try {\n      await createTablesWithRetry();\n    } catch (finalTableError) {\n      console.error('Final table creation error:', finalTableError);\n      return new Response(JSON.stringify({ \n        error: 'Catastrophic table creation failure', \n        details: finalTableError.toString(),\n        diagnostics: {\n          key: KEY,\n          schemaVersion: SCHEMA_VERSION\n        }\n      }), { \n        status: 500,\n        headers: { 'Content-Type': 'application/json' } \n      });\n    }\n\n    // New route for saving applicant\n    if (request.method === 'POST' && new URL(request.url).pathname === '/apply') {\n      try {\n        const applicant = await request.json();\n        await sqlite.execute(\n          `INSERT INTO ${KEY}_applicants_${SCHEMA_VERSION} \n           (name, email, phone, resume, job_title, company) \n           VALUES (?, ?, ?, ?, ?, ?)`,\n          [\n            applicant.name, \n            applicant.email, \n            applicant.phone, \n            applicant.resume, \n            applicant.jobTitle, \n            applicant.company\n          ]\n        );\n        return new Response(JSON.stringify({ success: true }), { \n          headers: { 'Content-Type': 'application/json' } \n        });\n      } catch (applicantError) {\n        console.error('Applicant save error:', applicantError);\n        return new Response(JSON.stringify({ \n          error: 'Failed to save applicant', \n          details: applicantError.toString() \n        }), { \n          status: 500,\n          headers: { 'Content-Type': 'application/json' } \n        });\n      }\n    }\n\n    // Existing route handlers remain the same\n    if (request.method === 'POST' && new URL(request.url).pathname === '/jobs') {\n      try {\n        const job = await request.json();\n        await sqlite.execute(\n          `INSERT INTO ${KEY}_jobs_${SCHEMA_VERSION} (title, company, description, openings, location) VALUES (?, ?, ?, ?, ?)`,\n          [job.title, job.company, job.description, job.openings, job.location]\n        );\n        return new Response(JSON.stringify({ success: true }), { \n          headers: { 'Content-Type': 'application/json' } \n        });\n      } catch (jobInsertError) {\n        console.error('Job insert error:', jobInsertError);\n        return new Response(JSON.stringify({ \n          error: 'Failed to insert job', \n          details: jobInsertError.toString() \n        }), { \n          status: 500,\n          headers: { 'Content-Type': 'application/json' } \n        });\n      }\n    }\n\n    // Remaining route handlers stay the same\n\n    return new Response(`\n      <html>\n        <head>\n          <title>Job Board & Community Chat</title>\n          <style>${css}</style>\n        </head>\n        <body>\n          <div id=\"root\"></div>\n          <script src=\"https://esm.town/v/std/catch\"></script>\n          <script type=\"module\" src=\"${import.meta.url}\"></script>\n        </body>\n      </html>\n    `, {\n      headers: { 'Content-Type': 'text/html' }\n    });\n  } catch (globalError) {\n    console.error('Global server error:', globalError);\n    return new Response(JSON.stringify({ \n      error: 'Unexpected server error', \n      details: globalError.toString() \n    }), { \n      status: 500,\n      headers: { 'Content-Type': 'application/json' } \n    });\n  }\n}\n\nconst css = `\nbody {\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n  max-width: 800px;\n  margin: 0 auto;\n  padding: 20px;\n  line-height: 1.6;\n  background-color: #f4f4f4;\n}\n\n.container {\n  background: white;\n  padding: 30px;\n  border-radius: 8px;\n  box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n}\n\nh1 {\n  text-align: center;\n  color: #333;\n}\n\nform {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  margin-bottom: 20px;\n}\n\ninput, textarea, select {\n  padding: 10px;\n  border: 1px solid #ddd;\n  border-radius: 4px;\n}\n\nbutton {\n  background-color: #4CAF50;\n  color: white;\n  border: none;\n  padding: 10px;\n  border-radius: 4px;\n  cursor: pointer;\n}\n\n.job-card, .message {\n  background-color: #f9f9f9;\n  border-radius: 4px;\n  padding: 15px;\n  margin-bottom: 10px;\n}\n\n.job-section, .chat-section {\n  margin-bottom: 30px;\n}\n\n.messages {\n  max-height: 300px;\n  overflow-y: auto;\n}\n\n.job-details {\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: 10px;\n  color: #666;\n  font-size: 0.9em;\n}\n\n.message strong {\n  margin-right: 10px;\n  color: #4CAF50;\n}\n\n.apply-button {\n  margin-top: 10px;\n  background-color: #2196F3;\n}\n\n.modal-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: rgba(0, 0, 0, 0.5);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  z-index: 1000;\n}\n\n.modal-content {\n  background: white;\n  padding: 30px;\n  border-radius: 8px;\n  width: 90%;\n  max-width: 500px;\n}\n\n.modal-actions {\n  display: flex;\n  justify-content: space-between;\n  margin-top: 20px;\n}\n\n.modal-actions button {\n  width: 48%;\n}\n`;",12,[168],{"_149":118,"_103":229,"_108":232,"_152":138,"_175":233},["D",1739827748980],[234],{"_106":235,"_152":138,"_149":118,"_99":168,"_159":236,"_157":171,"_103":237,"_151":-5,"_108":232,"_153":229,"_162":-5,"_155":27,"_161":27,"_102":238},"a9595dc2-27af-11f0-aecd-569c3dd06744","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect, useCallback } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\n\nfunction useLocalStorage(key, initialValue) {\n  // State to store our value\n  // Pass initial state function to useState so logic is only executed once\n  const [storedValue, setStoredValue] = useState(() => {\n    try {\n      const item = window.localStorage.getItem(key);\n      return item ? JSON.parse(item) : initialValue;\n    } catch (error) {\n      console.log(error);\n      return initialValue;\n    }\n  });\n\n  // Return a wrapped version of useState's setter function\n  const setValue = (value) => {\n    try {\n      // Allow value to be a function so we have same API as useState\n      const valueToStore = value instanceof Function ? value(storedValue) : value;\n      // Save state\n      setStoredValue(valueToStore);\n      // Save to local storage\n      window.localStorage.setItem(key, JSON.stringify(valueToStore));\n    } catch (error) {\n      console.log(error);\n    }\n  };\n\n  return [storedValue, setValue];\n}\n\nfunction App() {\n  const [jobs, setJobs] = useLocalStorage('jobs', []);\n  const [messages, setMessages] = useLocalStorage('messages', []);\n  const [newJob, setNewJob] = useLocalStorage('newJob', { \n    title: '', \n    company: '', \n    description: '', \n    openings: 'One Openings', \n    location: '' \n  });\n  const [newMessage, setNewMessage] = useLocalStorage('newMessage', {\n    username: '',\n    text: ''\n  });\n\n  useEffect(() => {\n    fetchJobs();\n    fetchMessages();\n  }, []);\n\n  const fetchJobs = async () => {\n    try {\n      const response = await fetch('/jobs');\n      const data = await response.json();\n      setJobs(data);\n    } catch (error) {\n      console.error('Failed to fetch jobs', error);\n    }\n  };\n\n  const fetchMessages = async () => {\n    try {\n      const response = await fetch('/messages');\n      const data = await response.json();\n      setMessages(data);\n    } catch (error) {\n      console.error('Failed to fetch messages', error);\n    }\n  };\n\n  const handleJobSubmit = async (e) => {\n    e.preventDefault();\n    try {\n      await fetch('/jobs', {\n        method: 'POST',\n        headers: { 'Content-Type': 'application/json' },\n        body: JSON.stringify(newJob)\n      });\n      \n      // Clear local storage for new job\n      localStorage.removeItem('newJob');\n      \n      setNewJob({ \n        title: '', \n        company: '', \n        description: '', \n        openings: 'One Openings', \n        location: '' \n      });\n      fetchJobs();\n    } catch (error) {\n      console.error('Job submission failed', error);\n      alert('Failed to submit job. Please try again.');\n    }\n  };\n\n  const handleMessageSubmit = async (e) => {\n    e.preventDefault();\n    // Validate username is not empty\n    if (!newMessage.username.trim()) {\n      alert('Please enter a username');\n      return;\n    }\n\n    try {\n      await fetch('/messages', {\n        method: 'POST',\n        headers: { 'Content-Type': 'application/json' },\n        body: JSON.stringify(newMessage)\n      });\n      \n      // Clear local storage for new message\n      localStorage.removeItem('newMessage');\n      \n      setNewMessage({ username: newMessage.username, text: '' });\n      fetchMessages();\n    } catch (error) {\n      console.error('Message submission failed', error);\n      alert('Failed to send message. Please try again.');\n    }\n  };\n\n  return (\n    <div className=\"container\">\n      <h1>🚀 Job Board & Community Chat</h1>\n      \n      <div className=\"job-section\">\n        <h2>Post a Job</h2>\n        <form onSubmit={handleJobSubmit}>\n          <input \n            placeholder=\"Job Title\" \n            value={newJob.title}\n            onChange={(e) => setNewJob({...newJob, title: e.target.value})}\n            required\n          />\n          <input \n            placeholder=\"Company\" \n            value={newJob.company}\n            onChange={(e) => setNewJob({...newJob, company: e.target.value})}\n            required\n          />\n          <select\n            value={newJob.openings}\n            onChange={(e) => setNewJob({...newJob, openings: e.target.value})}\n            required\n          >\n            <option>One Openings</option>\n            <option>Two Openings</option>\n            <option>Three Openings</option>\n            <option>Four Openings</option>\n            <option>Five Openings</option>\n            <option>Multiple Openings</option>\n          </select>\n          <input \n            placeholder=\"Location (City, Country)\" \n            value={newJob.location}\n            onChange={(e) => setNewJob({...newJob, location: e.target.value})}\n            required\n          />\n          <textarea \n            placeholder=\"Job Description\"\n            value={newJob.description}\n            onChange={(e) => setNewJob({...newJob, description: e.target.value})}\n            required\n          />\n          <button type=\"submit\">Post Job</button>\n        </form>\n\n        <h2>Job Listings</h2>\n        {jobs.map((job, index) => (\n          <div key={index} className=\"job-card\">\n            <h3>{job.title} @ {job.company}</h3>\n            <div className=\"job-details\">\n              <span>📍 {job.location}</span>\n              <span>🔢 {job.openings}</span>\n            </div>\n            <p>{job.description}</p>\n          </div>\n        ))}\n      </div>\n\n      <div className=\"chat-section\">\n        <h2>Community Chat</h2>\n        <div className=\"messages\">\n          {messages.map((msg, index) => (\n            <div key={index} className=\"message\">\n              <strong>{msg.username}:</strong> {msg.text}\n            </div>\n          ))}\n        </div>\n        <form onSubmit={handleMessageSubmit}>\n          <input \n            placeholder=\"Your Username\" \n            value={newMessage.username}\n            onChange={(e) => setNewMessage({...newMessage, username: e.target.value})}\n            required\n          />\n          <input \n            placeholder=\"Type a message...\" \n            value={newMessage.text}\n            onChange={(e) => setNewMessage({...newMessage, text: e.target.value})}\n            required\n          />\n          <button type=\"submit\">Send</button>\n        </form>\n      </div>\n      <a \n        href={import.meta.url.replace(\"esm.town\", \"val.town\")} \n        target=\"_top\" \n        style={{color: '#888', textDecoration: 'none', fontSize: '0.8em'}}\n      >\n        View Source\n      </a>\n      \n      {/* Auto-save indicator */}\n      <div style={{\n        position: 'fixed', \n        bottom: '10px', \n        right: '10px', \n        backgroundColor: 'rgba(0,0,0,0.6)', \n        color: 'white', \n        padding: '5px 10px', \n        borderRadius: '4px'\n      }}>\n        ✅ Auto-save enabled\n      </div>\n    </div>\n  );\n}\n\nfunction client() {\n  createRoot(document.getElementById(\"root\")).render(<App />);\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise<Response> {\n  try {\n    // Dynamically import sqlite with enhanced error handling\n    let sqlite;\n    try {\n      const sqliteModule = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n      sqlite = sqliteModule.sqlite;\n    } catch (importError) {\n      console.error('SQLite import error:', importError);\n      return new Response(JSON.stringify({ \n        error: 'Failed to import SQLite', \n        details: importError.toString() \n      }), { \n        status: 500,\n        headers: { 'Content-Type': 'application/json' } \n      });\n    }\n\n    const KEY = \"jobPostingApp\";\n    const SCHEMA_VERSION = 10; // Incrementing schema version with more robust handling\n\n    // Enhanced table creation with multiple retry mechanisms\n    const createTablesWithRetry = async (maxRetries = 3) => {\n      const tableCreationQueries = [\n        {\n          name: 'jobs',\n          query: `CREATE TABLE IF NOT EXISTS ${KEY}_jobs_${SCHEMA_VERSION} (\n            id INTEGER PRIMARY KEY AUTOINCREMENT,\n            title TEXT NOT NULL,\n            company TEXT NOT NULL,\n            description TEXT NOT NULL,\n            openings TEXT NOT NULL,\n            location TEXT NOT NULL,\n            timestamp DATETIME DEFAULT CURRENT_TIMESTAMP\n          )`\n        },\n        {\n          name: 'messages',\n          query: `CREATE TABLE IF NOT EXISTS ${KEY}_messages_${SCHEMA_VERSION} (\n            id INTEGER PRIMARY KEY AUTOINCREMENT,\n            username TEXT NOT NULL,\n            text TEXT NOT NULL,\n            timestamp DATETIME DEFAULT CURRENT_TIMESTAMP\n          )`\n        }\n      ];\n\n      for (const table of tableCreationQueries) {\n        let retries = 0;\n        while (retries < maxRetries) {\n          try {\n            // Add a small delay between retries to prevent concurrent execution\n            if (retries > 0) {\n              await new Promise(resolve => setTimeout(resolve, 1000 * retries));\n            }\n\n            await sqlite.execute(table.query);\n            break; // Exit retry loop if successful\n          } catch (tableError) {\n            retries++;\n            console.error(`Table creation error for ${table.name} (Attempt ${retries}):`, tableError);\n            \n            if (retries >= maxRetries) {\n              // Last retry failed, log detailed diagnostic information\n              console.log('Diagnostic Information:', {\n                sqliteModule: sqlite,\n                currentKey: KEY,\n                currentSchemaVersion: SCHEMA_VERSION,\n                tableName: table.name,\n                fullQuery: table.query\n              });\n\n              // Attempt to drop and recreate table as a last resort\n              try {\n                await sqlite.execute(`DROP TABLE IF EXISTS ${KEY}_${table.name}_${SCHEMA_VERSION}`);\n                await sqlite.execute(table.query);\n              } catch (dropError) {\n                console.error(`Catastrophic failure creating ${table.name} table:`, dropError);\n                throw dropError;\n              }\n            }\n          }\n        }\n      }\n    };\n\n    // Execute table creation with comprehensive error handling\n    try {\n      await createTablesWithRetry();\n    } catch (finalTableError) {\n      console.error('Final table creation error:', finalTableError);\n      return new Response(JSON.stringify({ \n        error: 'Catastrophic table creation failure', \n        details: finalTableError.toString(),\n        diagnostics: {\n          key: KEY,\n          schemaVersion: SCHEMA_VERSION\n        }\n      }), { \n        status: 500,\n        headers: { 'Content-Type': 'application/json' } \n      });\n    }\n\n    // Route handlers remain the same as in previous version\n    if (request.method === 'POST' && new URL(request.url).pathname === '/jobs') {\n      try {\n        const job = await request.json();\n        await sqlite.execute(\n          `INSERT INTO ${KEY}_jobs_${SCHEMA_VERSION} (title, company, description, openings, location) VALUES (?, ?, ?, ?, ?)`,\n          [job.title, job.company, job.description, job.openings, job.location]\n        );\n        return new Response(JSON.stringify({ success: true }), { \n          headers: { 'Content-Type': 'application/json' } \n        });\n      } catch (jobInsertError) {\n        console.error('Job insert error:', jobInsertError);\n        return new Response(JSON.stringify({ \n          error: 'Failed to insert job', \n          details: jobInsertError.toString() \n        }), { \n          status: 500,\n          headers: { 'Content-Type': 'application/json' } \n        });\n      }\n    }\n\n    // Remaining route handlers (messages, GET requests) stay the same\n\n    return new Response(`\n      <html>\n        <head>\n          <title>Job Board & Community Chat</title>\n          <style>${css}</style>\n        </head>\n        <body>\n          <div id=\"root\"></div>\n          <script src=\"https://esm.town/v/std/catch\"></script>\n          <script type=\"module\" src=\"${import.meta.url}\"></script>\n        </body>\n      </html>\n    `, {\n      headers: { 'Content-Type': 'text/html' }\n    });\n  } catch (globalError) {\n    console.error('Global server error:', globalError);\n    return new Response(JSON.stringify({ \n      error: 'Unexpected server error', \n      details: globalError.toString() \n    }), { \n      status: 500,\n      headers: { 'Content-Type': 'application/json' } \n    });\n  }\n}\n\n// CSS remains the same\nconst css = `\nbody {\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n  max-width: 800px;\n  margin: 0 auto;\n  padding: 20px;\n  line-height: 1.6;\n  background-color: #f4f4f4;\n}\n\n.container {\n  background: white;\n  padding: 30px;\n  border-radius: 8px;\n  box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n}\n\nh1 {\n  text-align: center;\n  color: #333;\n}\n\nform {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  margin-bottom: 20px;\n}\n\ninput, textarea, select {\n  padding: 10px;\n  border: 1px solid #ddd;\n  border-radius: 4px;\n}\n\nbutton {\n  background-color: #4CAF50;\n  color: white;\n  border: none;\n  padding: 10px;\n  border-radius: 4px;\n  cursor: pointer;\n}\n\n.job-card, .message {\n  background-color: #f9f9f9;\n  border-radius: 4px;\n  padding: 15px;\n  margin-bottom: 10px;\n}\n\n.job-section, .chat-section {\n  margin-bottom: 30px;\n}\n\n.messages {\n  max-height: 300px;\n  overflow-y: auto;\n}\n\n.job-details {\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: 10px;\n  color: #666;\n  font-size: 0.9em;\n}\n\n.message strong {\n  margin-right: 10px;\n  color: #4CAF50;\n}\n`;",11,[168],{"_149":118,"_103":237,"_108":240,"_152":138,"_175":241},["D",1739827096776],[242],{"_106":243,"_152":138,"_149":118,"_99":168,"_159":244,"_157":171,"_103":245,"_151":-5,"_108":240,"_153":237,"_162":-5,"_155":27,"_161":27,"_102":246},"a953ddb6-27af-11f0-aecd-569c3dd06744","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\n\nfunction App() {\n  const [jobs, setJobs] = useState([]);\n  const [messages, setMessages] = useState([]);\n  const [newJob, setNewJob] = useState({ \n    title: '', \n    company: '', \n    description: '', \n    openings: 'One Openings', \n    location: '' \n  });\n  const [newMessage, setNewMessage] = useState({\n    username: '',\n    text: ''\n  });\n\n  useEffect(() => {\n    fetchJobs();\n    fetchMessages();\n  }, []);\n\n  const fetchJobs = async () => {\n    const response = await fetch('/jobs');\n    const data = await response.json();\n    setJobs(data);\n  };\n\n  const fetchMessages = async () => {\n    const response = await fetch('/messages');\n    const data = await response.json();\n    setMessages(data);\n  };\n\n  const handleJobSubmit = async (e) => {\n    e.preventDefault();\n    await fetch('/jobs', {\n      method: 'POST',\n      headers: { 'Content-Type': 'application/json' },\n      body: JSON.stringify(newJob)\n    });\n    setNewJob({ \n      title: '', \n      company: '', \n      description: '', \n      openings: 'One Openings', \n      location: '' \n    });\n    fetchJobs();\n  };\n\n  const handleMessageSubmit = async (e) => {\n    e.preventDefault();\n    // Validate username is not empty\n    if (!newMessage.username.trim()) {\n      alert('Please enter a username');\n      return;\n    }\n\n    await fetch('/messages', {\n      method: 'POST',\n      headers: { 'Content-Type': 'application/json' },\n      body: JSON.stringify(newMessage)\n    });\n    setNewMessage({ username: newMessage.username, text: '' });\n    fetchMessages();\n  };\n\n  return (\n    <div className=\"container\">\n      <h1>🚀 Job Board & Community Chat</h1>\n      \n      <div className=\"job-section\">\n        <h2>Post a Job</h2>\n        <form onSubmit={handleJobSubmit}>\n          <input \n            placeholder=\"Job Title\" \n            value={newJob.title}\n            onChange={(e) => setNewJob({...newJob, title: e.target.value})}\n            required\n          />\n          <input \n            placeholder=\"Company\" \n            value={newJob.company}\n            onChange={(e) => setNewJob({...newJob, company: e.target.value})}\n            required\n          />\n          <select\n            value={newJob.openings}\n            onChange={(e) => setNewJob({...newJob, openings: e.target.value})}\n            required\n          >\n            <option>One Openings</option>\n            <option>Two Openings</option>\n            <option>Three Openings</option>\n            <option>Four Openings</option>\n            <option>Five Openings</option>\n            <option>Multiple Openings</option>\n          </select>\n          <input \n            placeholder=\"Location (City, Country)\" \n            value={newJob.location}\n            onChange={(e) => setNewJob({...newJob, location: e.target.value})}\n            required\n          />\n          <textarea \n            placeholder=\"Job Description\"\n            value={newJob.description}\n            onChange={(e) => setNewJob({...newJob, description: e.target.value})}\n            required\n          />\n          <button type=\"submit\">Post Job</button>\n        </form>\n\n        <h2>Job Listings</h2>\n        {jobs.map((job, index) => (\n          <div key={index} className=\"job-card\">\n            <h3>{job.title} @ {job.company}</h3>\n            <div className=\"job-details\">\n              <span>📍 {job.location}</span>\n              <span>🔢 {job.openings}</span>\n            </div>\n            <p>{job.description}</p>\n          </div>\n        ))}\n      </div>\n\n      <div className=\"chat-section\">\n        <h2>Community Chat</h2>\n        <div className=\"messages\">\n          {messages.map((msg, index) => (\n            <div key={index} className=\"message\">\n              <strong>{msg.username}:</strong> {msg.text}\n            </div>\n          ))}\n        </div>\n        <form onSubmit={handleMessageSubmit}>\n          <input \n            placeholder=\"Your Username\" \n            value={newMessage.username}\n            onChange={(e) => setNewMessage({...newMessage, username: e.target.value})}\n            required\n          />\n          <input \n            placeholder=\"Type a message...\" \n            value={newMessage.text}\n            onChange={(e) => setNewMessage({...newMessage, text: e.target.value})}\n            required\n          />\n          <button type=\"submit\">Send</button>\n        </form>\n      </div>\n      <a \n        href={import.meta.url.replace(\"esm.town\", \"val.town\")} \n        target=\"_top\" \n        style={{color: '#888', textDecoration: 'none', fontSize: '0.8em'}}\n      >\n        View Source\n      </a>\n    </div>\n  );\n}\n\nfunction client() {\n  createRoot(document.getElementById(\"root\")).render(<App />);\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise<Response> {\n  try {\n    // Dynamically import sqlite with error handling\n    let sqlite;\n    try {\n      const sqliteModule = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n      sqlite = sqliteModule.sqlite;\n    } catch (importError) {\n      console.error('SQLite import error:', importError);\n      return new Response(JSON.stringify({ \n        error: 'Failed to import SQLite', \n        details: importError.toString() \n      }), { \n        status: 500,\n        headers: { 'Content-Type': 'application/json' } \n      });\n    }\n\n    const KEY = \"jobPostingApp\";\n    const SCHEMA_VERSION = 8; // Reverting schema version\n\n    // Comprehensive table creation with multiple error handling strategies\n    const createTablesWithRetry = async () => {\n      const tableCreationQueries = [\n        `CREATE TABLE IF NOT EXISTS ${KEY}_jobs_${SCHEMA_VERSION} (\n          id INTEGER PRIMARY KEY AUTOINCREMENT,\n          title TEXT NOT NULL,\n          company TEXT NOT NULL,\n          description TEXT NOT NULL,\n          openings TEXT NOT NULL,\n          location TEXT NOT NULL,\n          timestamp DATETIME DEFAULT CURRENT_TIMESTAMP\n        )`,\n        `CREATE TABLE IF NOT EXISTS ${KEY}_messages_${SCHEMA_VERSION} (\n          id INTEGER PRIMARY KEY AUTOINCREMENT,\n          username TEXT NOT NULL,\n          text TEXT NOT NULL,\n          timestamp DATETIME DEFAULT CURRENT_TIMESTAMP\n        )`\n      ];\n\n      for (const query of tableCreationQueries) {\n        try {\n          await sqlite.execute(query);\n        } catch (tableError) {\n          console.error(`Table creation error for query: ${query}`, tableError);\n          \n          // Additional diagnostic logging\n          console.log('SQLite module:', sqlite);\n          console.log('Current KEY:', KEY);\n          console.log('Current SCHEMA_VERSION:', SCHEMA_VERSION);\n\n          // Attempt to drop and recreate table if exists\n          try {\n            await sqlite.execute(`DROP TABLE IF EXISTS ${KEY}_jobs_${SCHEMA_VERSION}`);\n            await sqlite.execute(`DROP TABLE IF EXISTS ${KEY}_messages_${SCHEMA_VERSION}`);\n            await sqlite.execute(query);\n          } catch (dropError) {\n            console.error('Failed to drop and recreate table:', dropError);\n            throw dropError;\n          }\n        }\n      }\n    };\n\n    // Execute table creation\n    try {\n      await createTablesWithRetry();\n    } catch (finalTableError) {\n      console.error('Final table creation error:', finalTableError);\n      return new Response(JSON.stringify({ \n        error: 'Catastrophic table creation failure', \n        details: finalTableError.toString() \n      }), { \n        status: 500,\n        headers: { 'Content-Type': 'application/json' } \n      });\n    }\n\n    if (request.method === 'POST' && new URL(request.url).pathname === '/jobs') {\n      try {\n        const job = await request.json();\n        await sqlite.execute(\n          `INSERT INTO ${KEY}_jobs_${SCHEMA_VERSION} (title, company, description, openings, location) VALUES (?, ?, ?, ?, ?)`,\n          [job.title, job.company, job.description, job.openings, job.location]\n        );\n        return new Response(JSON.stringify({ success: true }), { \n          headers: { 'Content-Type': 'application/json' } \n        });\n      } catch (jobInsertError) {\n        console.error('Job insert error:', jobInsertError);\n        return new Response(JSON.stringify({ \n          error: 'Failed to insert job', \n          details: jobInsertError.toString() \n        }), { \n          status: 500,\n          headers: { 'Content-Type': 'application/json' } \n        });\n      }\n    }\n\n    if (request.method === 'POST' && new URL(request.url).pathname === '/messages') {\n      try {\n        const message = await request.json();\n        await sqlite.execute(\n          `INSERT INTO ${KEY}_messages_${SCHEMA_VERSION} (username, text) VALUES (?, ?)`,\n          [message.username, message.text]\n        );\n        return new Response(JSON.stringify({ success: true }), { \n          headers: { 'Content-Type': 'application/json' } \n        });\n      } catch (messageInsertError) {\n        console.error('Message insert error:', messageInsertError);\n        return new Response(JSON.stringify({ \n          error: 'Failed to insert message', \n          details: messageInsertError.toString() \n        }), { \n          status: 500,\n          headers: { 'Content-Type': 'application/json' } \n        });\n      }\n    }\n\n    if (request.method === 'GET' && new URL(request.url).pathname === '/jobs') {\n      try {\n        const jobs = await sqlite.execute(`\n          SELECT * FROM ${KEY}_jobs_${SCHEMA_VERSION} \n          ORDER BY timestamp DESC \n          LIMIT 20\n        `);\n        return new Response(JSON.stringify(jobs.rows), { \n          headers: { 'Content-Type': 'application/json' } \n        });\n      } catch (jobsFetchError) {\n        console.error('Jobs fetch error:', jobsFetchError);\n        return new Response(JSON.stringify({ \n          error: 'Failed to fetch jobs', \n          details: jobsFetchError.toString() \n        }), { \n          status: 500,\n          headers: { 'Content-Type': 'application/json' } \n        });\n      }\n    }\n\n    if (request.method === 'GET' && new URL(request.url).pathname === '/messages') {\n      try {\n        const messages = await sqlite.execute(`\n          SELECT * FROM ${KEY}_messages_${SCHEMA_VERSION} \n          ORDER BY timestamp DESC \n          LIMIT 50\n        `);\n        return new Response(JSON.stringify(messages.rows), { \n          headers: { 'Content-Type': 'application/json' } \n        });\n      } catch (messagesFetchError) {\n        console.error('Messages fetch error:', messagesFetchError);\n        return new Response(JSON.stringify({ \n          error: 'Failed to fetch messages', \n          details: messagesFetchError.toString() \n        }), { \n          status: 500,\n          headers: { 'Content-Type': 'application/json' } \n        });\n      }\n    }\n\n    return new Response(`\n      <html>\n        <head>\n          <title>Job Board & Community Chat</title>\n          <style>${css}</style>\n        </head>\n        <body>\n          <div id=\"root\"></div>\n          <script src=\"https://esm.town/v/std/catch\"></script>\n          <script type=\"module\" src=\"${import.meta.url}\"></script>\n        </body>\n      </html>\n    `, {\n      headers: { 'Content-Type': 'text/html' }\n    });\n  } catch (globalError) {\n    console.error('Global server error:', globalError);\n    return new Response(JSON.stringify({ \n      error: 'Unexpected server error', \n      details: globalError.toString() \n    }), { \n      status: 500,\n      headers: { 'Content-Type': 'application/json' } \n    });\n  }\n}\n\nconst css = `\nbody {\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n  max-width: 800px;\n  margin: 0 auto;\n  padding: 20px;\n  line-height: 1.6;\n  background-color: #f4f4f4;\n}\n\n.container {\n  background: white;\n  padding: 30px;\n  border-radius: 8px;\n  box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n}\n\nh1 {\n  text-align: center;\n  color: #333;\n}\n\nform {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  margin-bottom: 20px;\n}\n\ninput, textarea, select {\n  padding: 10px;\n  border: 1px solid #ddd;\n  border-radius: 4px;\n}\n\nbutton {\n  background-color: #4CAF50;\n  color: white;\n  border: none;\n  padding: 10px;\n  border-radius: 4px;\n  cursor: pointer;\n}\n\n.job-card, .message {\n  background-color: #f9f9f9;\n  border-radius: 4px;\n  padding: 15px;\n  margin-bottom: 10px;\n}\n\n.job-section, .chat-section {\n  margin-bottom: 30px;\n}\n\n.messages {\n  max-height: 300px;\n  overflow-y: auto;\n}\n\n.job-details {\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: 10px;\n  color: #666;\n  font-size: 0.9em;\n}\n\n.message strong {\n  margin-right: 10px;\n  color: #4CAF50;\n}\n`;",10,[168],{"_149":118,"_103":245,"_108":248,"_152":138,"_175":249},["D",1739826788862],[250],{"_106":251,"_152":138,"_149":118,"_99":168,"_159":236,"_157":171,"_103":252,"_151":-5,"_108":248,"_153":245,"_162":-5,"_155":27,"_161":27,"_102":253},"a94ebee4-27af-11f0-aecd-569c3dd06744",9,[168],{"_149":118,"_103":252,"_108":255,"_152":138,"_175":256},["D",1739825817772],[257],{"_106":258,"_152":138,"_149":118,"_99":168,"_159":259,"_157":171,"_103":260,"_151":-5,"_108":255,"_153":252,"_162":-5,"_155":27,"_161":27,"_102":261},"a94998d8-27af-11f0-aecd-569c3dd06744","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect, useCallback } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\n\nfunction useLocalStorage(key, initialValue) {\n  // State to store our value\n  // Pass initial state function to useState so logic is only executed once\n  const [storedValue, setStoredValue] = useState(() => {\n    try {\n      const item = window.localStorage.getItem(key);\n      return item ? JSON.parse(item) : initialValue;\n    } catch (error) {\n      console.log(error);\n      return initialValue;\n    }\n  });\n\n  // Return a wrapped version of useState's setter function\n  const setValue = (value) => {\n    try {\n      // Allow value to be a function so we have same API as useState\n      const valueToStore = value instanceof Function ? value(storedValue) : value;\n      // Save state\n      setStoredValue(valueToStore);\n      // Save to local storage\n      window.localStorage.setItem(key, JSON.stringify(valueToStore));\n    } catch (error) {\n      console.log(error);\n    }\n  };\n\n  return [storedValue, setValue];\n}\n\nfunction App() {\n  const [jobs, setJobs] = useLocalStorage('jobs', []);\n  const [messages, setMessages] = useLocalStorage('messages', []);\n  const [newJob, setNewJob] = useLocalStorage('newJob', { \n    title: '', \n    company: '', \n    description: '', \n    openings: 'One Openings', \n    location: '' \n  });\n  const [newMessage, setNewMessage] = useLocalStorage('newMessage', {\n    username: '',\n    text: ''\n  });\n\n  useEffect(() => {\n    fetchJobs();\n    fetchMessages();\n  }, []);\n\n  const fetchJobs = async () => {\n    try {\n      const response = await fetch('/jobs');\n      const data = await response.json();\n      setJobs(data);\n    } catch (error) {\n      console.error('Failed to fetch jobs', error);\n    }\n  };\n\n  const fetchMessages = async () => {\n    try {\n      const response = await fetch('/messages');\n      const data = await response.json();\n      setMessages(data);\n    } catch (error) {\n      console.error('Failed to fetch messages', error);\n    }\n  };\n\n  const handleJobSubmit = async (e) => {\n    e.preventDefault();\n    try {\n      await fetch('/jobs', {\n        method: 'POST',\n        headers: { 'Content-Type': 'application/json' },\n        body: JSON.stringify(newJob)\n      });\n      \n      // Clear local storage for new job\n      localStorage.removeItem('newJob');\n      \n      setNewJob({ \n        title: '', \n        company: '', \n        description: '', \n        openings: 'One Openings', \n        location: '' \n      });\n      fetchJobs();\n    } catch (error) {\n      console.error('Job submission failed', error);\n      alert('Failed to submit job. Please try again.');\n    }\n  };\n\n  const handleMessageSubmit = async (e) => {\n    e.preventDefault();\n    // Validate username is not empty\n    if (!newMessage.username.trim()) {\n      alert('Please enter a username');\n      return;\n    }\n\n    try {\n      await fetch('/messages', {\n        method: 'POST',\n        headers: { 'Content-Type': 'application/json' },\n        body: JSON.stringify(newMessage)\n      });\n      \n      // Clear local storage for new message\n      localStorage.removeItem('newMessage');\n      \n      setNewMessage({ username: newMessage.username, text: '' });\n      fetchMessages();\n    } catch (error) {\n      console.error('Message submission failed', error);\n      alert('Failed to send message. Please try again.');\n    }\n  };\n\n  return (\n    <div className=\"container\">\n      <h1>🚀 Job Board & Community Chat</h1>\n      \n      <div className=\"job-section\">\n        <h2>Post a Job</h2>\n        <form onSubmit={handleJobSubmit}>\n          <input \n            placeholder=\"Job Title\" \n            value={newJob.title}\n            onChange={(e) => setNewJob({...newJob, title: e.target.value})}\n            required\n          />\n          <input \n            placeholder=\"Company\" \n            value={newJob.company}\n            onChange={(e) => setNewJob({...newJob, company: e.target.value})}\n            required\n          />\n          <select\n            value={newJob.openings}\n            onChange={(e) => setNewJob({...newJob, openings: e.target.value})}\n            required\n          >\n            <option>One Openings</option>\n            <option>Two Openings</option>\n            <option>Three Openings</option>\n            <option>Four Openings</option>\n            <option>Five Openings</option>\n            <option>Multiple Openings</option>\n          </select>\n          <input \n            placeholder=\"Location (City, Country)\" \n            value={newJob.location}\n            onChange={(e) => setNewJob({...newJob, location: e.target.value})}\n            required\n          />\n          <textarea \n            placeholder=\"Job Description\"\n            value={newJob.description}\n            onChange={(e) => setNewJob({...newJob, description: e.target.value})}\n            required\n          />\n          <button type=\"submit\">Post Job</button>\n        </form>\n\n        <h2>Job Listings</h2>\n        {jobs.map((job, index) => (\n          <div key={index} className=\"job-card\">\n            <h3>{job.title} @ {job.company}</h3>\n            <div className=\"job-details\">\n              <span>📍 {job.location}</span>\n              <span>🔢 {job.openings}</span>\n            </div>\n            <p>{job.description}</p>\n          </div>\n        ))}\n      </div>\n\n      <div className=\"chat-section\">\n        <h2>Community Chat</h2>\n        <div className=\"messages\">\n          {messages.map((msg, index) => (\n            <div key={index} className=\"message\">\n              <strong>{msg.username}:</strong> {msg.text}\n            </div>\n          ))}\n        </div>\n        <form onSubmit={handleMessageSubmit}>\n          <input \n            placeholder=\"Your Username\" \n            value={newMessage.username}\n            onChange={(e) => setNewMessage({...newMessage, username: e.target.value})}\n            required\n          />\n          <input \n            placeholder=\"Type a message...\" \n            value={newMessage.text}\n            onChange={(e) => setNewMessage({...newMessage, text: e.target.value})}\n            required\n          />\n          <button type=\"submit\">Send</button>\n        </form>\n      </div>\n      <a \n        href={import.meta.url.replace(\"esm.town\", \"val.town\")} \n        target=\"_top\" \n        style={{color: '#888', textDecoration: 'none', fontSize: '0.8em'}}\n      >\n        View Source\n      </a>\n      \n      {/* Auto-save indicator */}\n      <div style={{\n        position: 'fixed', \n        bottom: '10px', \n        right: '10px', \n        backgroundColor: 'rgba(0,0,0,0.6)', \n        color: 'white', \n        padding: '5px 10px', \n        borderRadius: '4px'\n      }}>\n        ✅ Auto-save enabled\n      </div>\n    </div>\n  );\n}\n\nfunction client() {\n  createRoot(document.getElementById(\"root\")).render(<App />);\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise<Response> {\n  try {\n    // Dynamically import sqlite with error handling\n    let sqlite;\n    try {\n      const sqliteModule = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n      sqlite = sqliteModule.sqlite;\n    } catch (importError) {\n      console.error('SQLite import error:', importError);\n      return new Response(JSON.stringify({ \n        error: 'Failed to import SQLite', \n        details: importError.toString() \n      }), { \n        status: 500,\n        headers: { 'Content-Type': 'application/json' } \n      });\n    }\n\n    const KEY = \"jobPostingApp\";\n    const SCHEMA_VERSION = 9; // Incrementing schema version for autosave feature\n\n    // Comprehensive table creation with multiple error handling strategies\n    const createTablesWithRetry = async () => {\n      const tableCreationQueries = [\n        `CREATE TABLE IF NOT EXISTS ${KEY}_jobs_${SCHEMA_VERSION} (\n          id INTEGER PRIMARY KEY AUTOINCREMENT,\n          title TEXT NOT NULL,\n          company TEXT NOT NULL,\n          description TEXT NOT NULL,\n          openings TEXT NOT NULL,\n          location TEXT NOT NULL,\n          timestamp DATETIME DEFAULT CURRENT_TIMESTAMP\n        )`,\n        `CREATE TABLE IF NOT EXISTS ${KEY}_messages_${SCHEMA_VERSION} (\n          id INTEGER PRIMARY KEY AUTOINCREMENT,\n          username TEXT NOT NULL,\n          text TEXT NOT NULL,\n          timestamp DATETIME DEFAULT CURRENT_TIMESTAMP\n        )`\n      ];\n\n      for (const query of tableCreationQueries) {\n        try {\n          await sqlite.execute(query);\n        } catch (tableError) {\n          console.error(`Table creation error for query: ${query}`, tableError);\n          \n          // Additional diagnostic logging\n          console.log('SQLite module:', sqlite);\n          console.log('Current KEY:', KEY);\n          console.log('Current SCHEMA_VERSION:', SCHEMA_VERSION);\n\n          // Attempt to drop and recreate table if exists\n          try {\n            await sqlite.execute(`DROP TABLE IF EXISTS ${KEY}_jobs_${SCHEMA_VERSION}`);\n            await sqlite.execute(`DROP TABLE IF EXISTS ${KEY}_messages_${SCHEMA_VERSION}`);\n            await sqlite.execute(query);\n          } catch (dropError) {\n            console.error('Failed to drop and recreate table:', dropError);\n            throw dropError;\n          }\n        }\n      }\n    };\n\n    // Execute table creation\n    try {\n      await createTablesWithRetry();\n    } catch (finalTableError) {\n      console.error('Final table creation error:', finalTableError);\n      return new Response(JSON.stringify({ \n        error: 'Catastrophic table creation failure', \n        details: finalTableError.toString() \n      }), { \n        status: 500,\n        headers: { 'Content-Type': 'application/json' } \n      });\n    }\n\n    // Existing route handlers remain the same\n    if (request.method === 'POST' && new URL(request.url).pathname === '/jobs') {\n      try {\n        const job = await request.json();\n        await sqlite.execute(\n          `INSERT INTO ${KEY}_jobs_${SCHEMA_VERSION} (title, company, description, openings, location) VALUES (?, ?, ?, ?, ?)`,\n          [job.title, job.company, job.description, job.openings, job.location]\n        );\n        return new Response(JSON.stringify({ success: true }), { \n          headers: { 'Content-Type': 'application/json' } \n        });\n      } catch (jobInsertError) {\n        console.error('Job insert error:', jobInsertError);\n        return new Response(JSON.stringify({ \n          error: 'Failed to insert job', \n          details: jobInsertError.toString() \n        }), { \n          status: 500,\n          headers: { 'Content-Type': 'application/json' } \n        });\n      }\n    }\n\n    // Remaining server code stays the same as in the previous version\n    // ... (rest of the server function remains unchanged)\n\n    return new Response(`\n      <html>\n        <head>\n          <title>Job Board & Community Chat</title>\n          <style>${css}</style>\n        </head>\n        <body>\n          <div id=\"root\"></div>\n          <script src=\"https://esm.town/v/std/catch\"></script>\n          <script type=\"module\" src=\"${import.meta.url}\"></script>\n        </body>\n      </html>\n    `, {\n      headers: { 'Content-Type': 'text/html' }\n    });\n  } catch (globalError) {\n    console.error('Global server error:', globalError);\n    return new Response(JSON.stringify({ \n      error: 'Unexpected server error', \n      details: globalError.toString() \n    }), { \n      status: 500,\n      headers: { 'Content-Type': 'application/json' } \n    });\n  }\n}\n\n// CSS remains the same as in the previous version\nconst css = `\nbody {\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n  max-width: 800px;\n  margin: 0 auto;\n  padding: 20px;\n  line-height: 1.6;\n  background-color: #f4f4f4;\n}\n\n.container {\n  background: white;\n  padding: 30px;\n  border-radius: 8px;\n  box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n}\n\nh1 {\n  text-align: center;\n  color: #333;\n}\n\nform {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  margin-bottom: 20px;\n}\n\ninput, textarea, select {\n  padding: 10px;\n  border: 1px solid #ddd;\n  border-radius: 4px;\n}\n\nbutton {\n  background-color: #4CAF50;\n  color: white;\n  border: none;\n  padding: 10px;\n  border-radius: 4px;\n  cursor: pointer;\n}\n\n.job-card, .message {\n  background-color: #f9f9f9;\n  border-radius: 4px;\n  padding: 15px;\n  margin-bottom: 10px;\n}\n\n.job-section, .chat-section {\n  margin-bottom: 30px;\n}\n\n.messages {\n  max-height: 300px;\n  overflow-y: auto;\n}\n\n.job-details {\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: 10px;\n  color: #666;\n  font-size: 0.9em;\n}\n\n.message strong {\n  margin-right: 10px;\n  color: #4CAF50;\n}\n`;",8,[168],{"_149":118,"_103":260,"_108":263,"_152":138,"_175":264},["D",1739825118192],[265],{"_106":266,"_152":138,"_149":118,"_99":168,"_159":244,"_157":171,"_103":267,"_151":-5,"_108":263,"_153":260,"_162":-5,"_155":27,"_161":27,"_102":268},"a9449900-27af-11f0-aecd-569c3dd06744",7,[168],{"_149":118,"_103":267,"_108":270,"_152":138,"_175":271},["D",1739824783412],[272],{"_106":273,"_152":138,"_149":118,"_99":168,"_159":274,"_157":171,"_103":275,"_151":-5,"_108":270,"_153":267,"_162":-5,"_155":27,"_161":27,"_102":276},"a93f86ae-27af-11f0-aecd-569c3dd06744","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\n\nfunction App() {\n  const [jobs, setJobs] = useState([]);\n  const [messages, setMessages] = useState([]);\n  const [newJob, setNewJob] = useState({ \n    title: '', \n    company: '', \n    description: '', \n    openings: 'One Openings', \n    location: '' \n  });\n  const [newMessage, setNewMessage] = useState({\n    username: '',\n    text: ''\n  });\n\n  useEffect(() => {\n    fetchJobs();\n    fetchMessages();\n  }, []);\n\n  const fetchJobs = async () => {\n    const response = await fetch('/jobs');\n    const data = await response.json();\n    setJobs(data);\n  };\n\n  const fetchMessages = async () => {\n    const response = await fetch('/messages');\n    const data = await response.json();\n    setMessages(data);\n  };\n\n  const handleJobSubmit = async (e) => {\n    e.preventDefault();\n    await fetch('/jobs', {\n      method: 'POST',\n      headers: { 'Content-Type': 'application/json' },\n      body: JSON.stringify(newJob)\n    });\n    setNewJob({ \n      title: '', \n      company: '', \n      description: '', \n      openings: 'One Openings', \n      location: '' \n    });\n    fetchJobs();\n  };\n\n  const handleMessageSubmit = async (e) => {\n    e.preventDefault();\n    // Validate username is not empty\n    if (!newMessage.username.trim()) {\n      alert('Please enter a username');\n      return;\n    }\n\n    await fetch('/messages', {\n      method: 'POST',\n      headers: { 'Content-Type': 'application/json' },\n      body: JSON.stringify(newMessage)\n    });\n    setNewMessage({ username: newMessage.username, text: '' });\n    fetchMessages();\n  };\n\n  return (\n    <div className=\"container\">\n      <h1>🚀 Job Board & Community Chat</h1>\n      \n      <div className=\"job-section\">\n        <h2>Post a Job</h2>\n        <form onSubmit={handleJobSubmit}>\n          <input \n            placeholder=\"Job Title\" \n            value={newJob.title}\n            onChange={(e) => setNewJob({...newJob, title: e.target.value})}\n            required\n          />\n          <input \n            placeholder=\"Company\" \n            value={newJob.company}\n            onChange={(e) => setNewJob({...newJob, company: e.target.value})}\n            required\n          />\n          <select\n            value={newJob.openings}\n            onChange={(e) => setNewJob({...newJob, openings: e.target.value})}\n            required\n          >\n            <option>One Openings</option>\n            <option>Two Openings</option>\n            <option>Three Openings</option>\n            <option>Four Openings</option>\n            <option>Five Openings</option>\n            <option>Multiple Openings</option>\n          </select>\n          <input \n            placeholder=\"Location (City, Country)\" \n            value={newJob.location}\n            onChange={(e) => setNewJob({...newJob, location: e.target.value})}\n            required\n          />\n          <textarea \n            placeholder=\"Job Description\"\n            value={newJob.description}\n            onChange={(e) => setNewJob({...newJob, description: e.target.value})}\n            required\n          />\n          <button type=\"submit\">Post Job</button>\n        </form>\n\n        <h2>Job Listings</h2>\n        {jobs.map((job, index) => (\n          <div key={index} className=\"job-card\">\n            <h3>{job.title} @ {job.company}</h3>\n            <div className=\"job-details\">\n              <span>📍 {job.location}</span>\n              <span>🔢 {job.openings}</span>\n            </div>\n            <p>{job.description}</p>\n          </div>\n        ))}\n      </div>\n\n      <div className=\"chat-section\">\n        <h2>Community Chat</h2>\n        <div className=\"messages\">\n          {messages.map((msg, index) => (\n            <div key={index} className=\"message\">\n              <strong>{msg.username}:</strong> {msg.text}\n            </div>\n          ))}\n        </div>\n        <form onSubmit={handleMessageSubmit}>\n          <input \n            placeholder=\"Your Username\" \n            value={newMessage.username}\n            onChange={(e) => setNewMessage({...newMessage, username: e.target.value})}\n            required\n          />\n          <input \n            placeholder=\"Type a message...\" \n            value={newMessage.text}\n            onChange={(e) => setNewMessage({...newMessage, text: e.target.value})}\n            required\n          />\n          <button type=\"submit\">Send</button>\n        </form>\n      </div>\n      <a \n        href={import.meta.url.replace(\"esm.town\", \"val.town\")} \n        target=\"_top\" \n        style={{color: '#888', textDecoration: 'none', fontSize: '0.8em'}}\n      >\n        View Source\n      </a>\n    </div>\n  );\n}\n\nfunction client() {\n  createRoot(document.getElementById(\"root\")).render(<App />);\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise<Response> {\n  try {\n    // Dynamically import sqlite with error handling\n    let sqlite;\n    try {\n      const sqliteModule = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n      sqlite = sqliteModule.sqlite;\n    } catch (importError) {\n      console.error('SQLite import error:', importError);\n      return new Response(JSON.stringify({ \n        error: 'Failed to import SQLite', \n        details: importError.toString() \n      }), { \n        status: 500,\n        headers: { 'Content-Type': 'application/json' } \n      });\n    }\n\n    const KEY = \"jobPostingApp\";\n    const SCHEMA_VERSION = 9; // Incrementing schema version\n\n    // Comprehensive table creation with multiple error handling strategies\n    const createTablesWithRetry = async () => {\n      const tableCreationQueries = [\n        `CREATE TABLE IF NOT EXISTS ${KEY}_jobs_${SCHEMA_VERSION} (\n          id INTEGER PRIMARY KEY AUTOINCREMENT,\n          title TEXT NOT NULL,\n          company TEXT NOT NULL,\n          description TEXT NOT NULL,\n          openings TEXT NOT NULL,\n          location TEXT NOT NULL,\n          timestamp DATETIME DEFAULT CURRENT_TIMESTAMP\n        )`,\n        `CREATE TABLE IF NOT EXISTS ${KEY}_messages_${SCHEMA_VERSION} (\n          id INTEGER PRIMARY KEY AUTOINCREMENT,\n          username TEXT NOT NULL,\n          text TEXT NOT NULL,\n          timestamp DATETIME DEFAULT CURRENT_TIMESTAMP\n        )`\n      ];\n\n      for (const query of tableCreationQueries) {\n        try {\n          await sqlite.execute(query);\n        } catch (tableError) {\n          console.error(`Table creation error for query: ${query}`, tableError);\n          \n          // Additional diagnostic logging\n          console.log('SQLite module:', sqlite);\n          console.log('Current KEY:', KEY);\n          console.log('Current SCHEMA_VERSION:', SCHEMA_VERSION);\n\n          // Attempt to drop and recreate table if exists\n          try {\n            await sqlite.execute(`DROP TABLE IF EXISTS ${KEY}_jobs_${SCHEMA_VERSION}`);\n            await sqlite.execute(`DROP TABLE IF EXISTS ${KEY}_messages_${SCHEMA_VERSION}`);\n            await sqlite.execute(query);\n          } catch (dropError) {\n            console.error('Failed to drop and recreate table:', dropError);\n            throw dropError;\n          }\n        }\n      }\n\n      // Check if jobs table is empty and insert initial jobs\n      const existingJobs = await sqlite.execute(`\n        SELECT COUNT(*) as count FROM ${KEY}_jobs_${SCHEMA_VERSION}\n      `);\n\n      if (existingJobs.rows[0].count === 0) {\n        const initialJobs = [\n          {\n            title: 'Senior Software Engineer',\n            company: 'TechInnovate Solutions',\n            description: 'We are seeking a talented Senior Software Engineer to join our dynamic team. The ideal candidate will have extensive experience in full-stack development, with a strong background in React, Node.js, and cloud technologies.',\n            openings: 'Two Openings',\n            location: 'San Francisco, CA'\n          },\n          {\n            title: 'Product Designer',\n            company: 'CreativeMinds UX',\n            description: 'Looking for a creative Product Designer who can transform complex user needs into elegant, intuitive design solutions. You will work closely with our product and engineering teams to craft exceptional user experiences.',\n            openings: 'One Openings',\n            location: 'New York, NY'\n          },\n          {\n            title: 'Data Science Specialist',\n            company: 'DataDrive Analytics',\n            description: 'Join our data science team and help solve complex business challenges through advanced analytics and machine learning. We are looking for a passionate data scientist with expertise in Python, statistical modeling, and predictive analytics.',\n            openings: 'Three Openings',\n            location: 'Seattle, WA'\n          }\n        ];\n\n        for (const job of initialJobs) {\n          await sqlite.execute(\n            `INSERT INTO ${KEY}_jobs_${SCHEMA_VERSION} (title, company, description, openings, location) VALUES (?, ?, ?, ?, ?)`,\n            [job.title, job.company, job.description, job.openings, job.location]\n          );\n        }\n      }\n    };\n\n    // Execute table creation\n    try {\n      await createTablesWithRetry();\n    } catch (finalTableError) {\n      console.error('Final table creation error:', finalTableError);\n      return new Response(JSON.stringify({ \n        error: 'Catastrophic table creation failure', \n        details: finalTableError.toString() \n      }), { \n        status: 500,\n        headers: { 'Content-Type': 'application/json' } \n      });\n    }\n\n    // Rest of the server function remains the same as in the previous version\n    // ... (previous code for route handling remains unchanged)\n\n    if (request.method === 'GET' && new URL(request.url).pathname === '/jobs') {\n      try {\n        const jobs = await sqlite.execute(`\n          SELECT * FROM ${KEY}_jobs_${SCHEMA_VERSION} \n          ORDER BY timestamp DESC \n          LIMIT 20\n        `);\n        return new Response(JSON.stringify(jobs.rows), { \n          headers: { 'Content-Type': 'application/json' } \n        });\n      } catch (jobsFetchError) {\n        console.error('Jobs fetch error:', jobsFetchError);\n        return new Response(JSON.stringify({ \n          error: 'Failed to fetch jobs', \n          details: jobsFetchError.toString() \n        }), { \n          status: 500,\n          headers: { 'Content-Type': 'application/json' } \n        });\n      }\n    }\n\n    // Remaining code stays the same\n    return new Response(`\n      <html>\n        <head>\n          <title>Job Board & Community Chat</title>\n          <style>${css}</style>\n        </head>\n        <body>\n          <div id=\"root\"></div>\n          <script src=\"https://esm.town/v/std/catch\"></script>\n          <script type=\"module\" src=\"${import.meta.url}\"></script>\n        </body>\n      </html>\n    `, {\n      headers: { 'Content-Type': 'text/html' }\n    });\n  } catch (globalError) {\n    console.error('Global server error:', globalError);\n    return new Response(JSON.stringify({ \n      error: 'Unexpected server error', \n      details: globalError.toString() \n    }), { \n      status: 500,\n      headers: { 'Content-Type': 'application/json' } \n    });\n  }\n}\n\n// CSS remains the same as in the previous version\nconst css = `\nbody {\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n  max-width: 800px;\n  margin: 0 auto;\n  padding: 20px;\n  line-height: 1.6;\n  background-color: #f4f4f4;\n}\n\n.container {\n  background: white;\n  padding: 30px;\n  border-radius: 8px;\n  box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n}\n\nh1 {\n  text-align: center;\n  color: #333;\n}\n\nform {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  margin-bottom: 20px;\n}\n\ninput, textarea, select {\n  padding: 10px;\n  border: 1px solid #ddd;\n  border-radius: 4px;\n}\n\nbutton {\n  background-color: #4CAF50;\n  color: white;\n  border: none;\n  padding: 10px;\n  border-radius: 4px;\n  cursor: pointer;\n}\n\n.job-card, .message {\n  background-color: #f9f9f9;\n  border-radius: 4px;\n  padding: 15px;\n  margin-bottom: 10px;\n}\n\n.job-section, .chat-section {\n  margin-bottom: 30px;\n}\n\n.messages {\n  max-height: 300px;\n  overflow-y: auto;\n}\n\n.job-details {\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: 10px;\n  color: #666;\n  font-size: 0.9em;\n}\n\n.message strong {\n  margin-right: 10px;\n  color: #4CAF50;\n}\n`;",6,[168],{"_149":118,"_103":275,"_108":278,"_152":138,"_175":279},["D",1739824454489],[280],{"_106":281,"_152":138,"_149":118,"_99":168,"_159":282,"_157":171,"_103":283,"_151":-5,"_108":278,"_153":275,"_162":-5,"_155":27,"_161":27,"_102":284},"a93a925c-27af-11f0-aecd-569c3dd06744","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\n\nfunction App() {\n  const [jobs, setJobs] = useState([]);\n  const [messages, setMessages] = useState([]);\n  const [newJob, setNewJob] = useState({ \n    title: '', \n    company: '', \n    description: '', \n    openings: 'One Openings', \n    location: '' \n  });\n  const [newMessage, setNewMessage] = useState({\n    username: '',\n    text: ''\n  });\n\n  useEffect(() => {\n    fetchJobs();\n    fetchMessages();\n  }, []);\n\n  const fetchJobs = async () => {\n    const response = await fetch('/jobs');\n    const data = await response.json();\n    setJobs(data);\n  };\n\n  const fetchMessages = async () => {\n    const response = await fetch('/messages');\n    const data = await response.json();\n    setMessages(data);\n  };\n\n  const handleJobSubmit = async (e) => {\n    e.preventDefault();\n    await fetch('/jobs', {\n      method: 'POST',\n      headers: { 'Content-Type': 'application/json' },\n      body: JSON.stringify(newJob)\n    });\n    setNewJob({ \n      title: '', \n      company: '', \n      description: '', \n      openings: 'One Openings', \n      location: '' \n    });\n    fetchJobs();\n  };\n\n  const handleMessageSubmit = async (e) => {\n    e.preventDefault();\n    // Validate username is not empty\n    if (!newMessage.username.trim()) {\n      alert('Please enter a username');\n      return;\n    }\n\n    await fetch('/messages', {\n      method: 'POST',\n      headers: { 'Content-Type': 'application/json' },\n      body: JSON.stringify(newMessage)\n    });\n    setNewMessage({ username: newMessage.username, text: '' });\n    fetchMessages();\n  };\n\n  return (\n    <div className=\"container\">\n      <h1>🚀 Job Board & Community Chat</h1>\n      \n      <div className=\"job-section\">\n        <h2>Post a Job</h2>\n        <form onSubmit={handleJobSubmit}>\n          <input \n            placeholder=\"Job Title\" \n            value={newJob.title}\n            onChange={(e) => setNewJob({...newJob, title: e.target.value})}\n            required\n          />\n          <input \n            placeholder=\"Company\" \n            value={newJob.company}\n            onChange={(e) => setNewJob({...newJob, company: e.target.value})}\n            required\n          />\n          <select\n            value={newJob.openings}\n            onChange={(e) => setNewJob({...newJob, openings: e.target.value})}\n            required\n          >\n            <option>One Openings</option>\n            <option>Two Openings</option>\n            <option>Three Openings</option>\n            <option>Four Openings</option>\n            <option>Five Openings</option>\n            <option>Multiple Openings</option>\n          </select>\n          <input \n            placeholder=\"Location (City, Country)\" \n            value={newJob.location}\n            onChange={(e) => setNewJob({...newJob, location: e.target.value})}\n            required\n          />\n          <textarea \n            placeholder=\"Job Description\"\n            value={newJob.description}\n            onChange={(e) => setNewJob({...newJob, description: e.target.value})}\n            required\n          />\n          <button type=\"submit\">Post Job</button>\n        </form>\n\n        <h2>Job Listings</h2>\n        {jobs.map((job, index) => (\n          <div key={index} className=\"job-card\">\n            <h3>{job.title} @ {job.company}</h3>\n            <div className=\"job-details\">\n              <span>📍 {job.location}</span>\n              <span>🔢 {job.openings}</span>\n            </div>\n            <p>{job.description}</p>\n          </div>\n        ))}\n      </div>\n\n      <div className=\"chat-section\">\n        <h2>Community Chat</h2>\n        <div className=\"messages\">\n          {messages.map((msg, index) => (\n            <div key={index} className=\"message\">\n              <strong>{msg.username}:</strong> {msg.text}\n            </div>\n          ))}\n        </div>\n        <form onSubmit={handleMessageSubmit}>\n          <input \n            placeholder=\"Your Username\" \n            value={newMessage.username}\n            onChange={(e) => setNewMessage({...newMessage, username: e.target.value})}\n            required\n          />\n          <input \n            placeholder=\"Type a message...\" \n            value={newMessage.text}\n            onChange={(e) => setNewMessage({...newMessage, text: e.target.value})}\n            required\n          />\n          <button type=\"submit\">Send</button>\n        </form>\n      </div>\n      <a \n        href={import.meta.url.replace(\"esm.town\", \"val.town\")} \n        target=\"_top\" \n        style={{color: '#888', textDecoration: 'none', fontSize: '0.8em'}}\n      >\n        View Source\n      </a>\n    </div>\n  );\n}\n\nfunction client() {\n  createRoot(document.getElementById(\"root\")).render(<App />);\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise<Response> {\n  try {\n    // Dynamically import sqlite with error handling\n    let sqlite;\n    try {\n      const sqliteModule = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n      sqlite = sqliteModule.sqlite;\n    } catch (importError) {\n      console.error('SQLite import error:', importError);\n      return new Response(JSON.stringify({ \n        error: 'Failed to import SQLite', \n        details: importError.toString() \n      }), { \n        status: 500,\n        headers: { 'Content-Type': 'application/json' } \n      });\n    }\n\n    const KEY = \"jobPostingApp\";\n    const SCHEMA_VERSION = 8; // Incrementing schema version\n\n    // Comprehensive table creation with multiple error handling strategies\n    const createTablesWithRetry = async () => {\n      const tableCreationQueries = [\n        `CREATE TABLE IF NOT EXISTS ${KEY}_jobs_${SCHEMA_VERSION} (\n          id INTEGER PRIMARY KEY AUTOINCREMENT,\n          title TEXT NOT NULL,\n          company TEXT NOT NULL,\n          description TEXT NOT NULL,\n          openings TEXT NOT NULL,\n          location TEXT NOT NULL,\n          timestamp DATETIME DEFAULT CURRENT_TIMESTAMP\n        )`,\n        `CREATE TABLE IF NOT EXISTS ${KEY}_messages_${SCHEMA_VERSION} (\n          id INTEGER PRIMARY KEY AUTOINCREMENT,\n          username TEXT NOT NULL,\n          text TEXT NOT NULL,\n          timestamp DATETIME DEFAULT CURRENT_TIMESTAMP\n        )`\n      ];\n\n      for (const query of tableCreationQueries) {\n        try {\n          await sqlite.execute(query);\n        } catch (tableError) {\n          console.error(`Table creation error for query: ${query}`, tableError);\n          \n          // Additional diagnostic logging\n          console.log('SQLite module:', sqlite);\n          console.log('Current KEY:', KEY);\n          console.log('Current SCHEMA_VERSION:', SCHEMA_VERSION);\n\n          // Attempt to drop and recreate table if exists\n          try {\n            await sqlite.execute(`DROP TABLE IF EXISTS ${KEY}_jobs_${SCHEMA_VERSION}`);\n            await sqlite.execute(`DROP TABLE IF EXISTS ${KEY}_messages_${SCHEMA_VERSION}`);\n            await sqlite.execute(query);\n          } catch (dropError) {\n            console.error('Failed to drop and recreate table:', dropError);\n            throw dropError;\n          }\n        }\n      }\n    };\n\n    // Execute table creation\n    try {\n      await createTablesWithRetry();\n    } catch (finalTableError) {\n      console.error('Final table creation error:', finalTableError);\n      return new Response(JSON.stringify({ \n        error: 'Catastrophic table creation failure', \n        details: finalTableError.toString() \n      }), { \n        status: 500,\n        headers: { 'Content-Type': 'application/json' } \n      });\n    }\n\n    // Route handling with improved error management\n    if (request.method === 'POST' && new URL(request.url).pathname === '/jobs') {\n      try {\n        const job = await request.json();\n        await sqlite.execute(\n          `INSERT INTO ${KEY}_jobs_${SCHEMA_VERSION} (title, company, description, openings, location) VALUES (?, ?, ?, ?, ?)`,\n          [job.title, job.company, job.description, job.openings, job.location]\n        );\n        return new Response(JSON.stringify({ success: true }), { \n          headers: { 'Content-Type': 'application/json' } \n        });\n      } catch (jobInsertError) {\n        console.error('Job insert error:', jobInsertError);\n        return new Response(JSON.stringify({ \n          error: 'Failed to insert job', \n          details: jobInsertError.toString() \n        }), { \n          status: 500,\n          headers: { 'Content-Type': 'application/json' } \n        });\n      }\n    }\n\n    if (request.method === 'POST' && new URL(request.url).pathname === '/messages') {\n      try {\n        const message = await request.json();\n        await sqlite.execute(\n          `INSERT INTO ${KEY}_messages_${SCHEMA_VERSION} (username, text) VALUES (?, ?)`,\n          [message.username, message.text]\n        );\n        return new Response(JSON.stringify({ success: true }), { \n          headers: { 'Content-Type': 'application/json' } \n        });\n      } catch (messageInsertError) {\n        console.error('Message insert error:', messageInsertError);\n        return new Response(JSON.stringify({ \n          error: 'Failed to insert message', \n          details: messageInsertError.toString() \n        }), { \n          status: 500,\n          headers: { 'Content-Type': 'application/json' } \n        });\n      }\n    }\n\n    if (request.method === 'GET' && new URL(request.url).pathname === '/jobs') {\n      try {\n        const jobs = await sqlite.execute(`\n          SELECT * FROM ${KEY}_jobs_${SCHEMA_VERSION} \n          ORDER BY timestamp DESC \n          LIMIT 20\n        `);\n        return new Response(JSON.stringify(jobs.rows), { \n          headers: { 'Content-Type': 'application/json' } \n        });\n      } catch (jobsFetchError) {\n        console.error('Jobs fetch error:', jobsFetchError);\n        return new Response(JSON.stringify({ \n          error: 'Failed to fetch jobs', \n          details: jobsFetchError.toString() \n        }), { \n          status: 500,\n          headers: { 'Content-Type': 'application/json' } \n        });\n      }\n    }\n\n    if (request.method === 'GET' && new URL(request.url).pathname === '/messages') {\n      try {\n        const messages = await sqlite.execute(`\n          SELECT * FROM ${KEY}_messages_${SCHEMA_VERSION} \n          ORDER BY timestamp DESC \n          LIMIT 50\n        `);\n        return new Response(JSON.stringify(messages.rows), { \n          headers: { 'Content-Type': 'application/json' } \n        });\n      } catch (messagesFetchError) {\n        console.error('Messages fetch error:', messagesFetchError);\n        return new Response(JSON.stringify({ \n          error: 'Failed to fetch messages', \n          details: messagesFetchError.toString() \n        }), { \n          status: 500,\n          headers: { 'Content-Type': 'application/json' } \n        });\n      }\n    }\n\n    return new Response(`\n      <html>\n        <head>\n          <title>Job Board & Community Chat</title>\n          <style>${css}</style>\n        </head>\n        <body>\n          <div id=\"root\"></div>\n          <script src=\"https://esm.town/v/std/catch\"></script>\n          <script type=\"module\" src=\"${import.meta.url}\"></script>\n        </body>\n      </html>\n    `, {\n      headers: { 'Content-Type': 'text/html' }\n    });\n  } catch (globalError) {\n    console.error('Global server error:', globalError);\n    return new Response(JSON.stringify({ \n      error: 'Unexpected server error', \n      details: globalError.toString() \n    }), { \n      status: 500,\n      headers: { 'Content-Type': 'application/json' } \n    });\n  }\n}\n\nconst css = `\nbody {\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n  max-width: 800px;\n  margin: 0 auto;\n  padding: 20px;\n  line-height: 1.6;\n  background-color: #f4f4f4;\n}\n\n.container {\n  background: white;\n  padding: 30px;\n  border-radius: 8px;\n  box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n}\n\nh1 {\n  text-align: center;\n  color: #333;\n}\n\nform {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  margin-bottom: 20px;\n}\n\ninput, textarea, select {\n  padding: 10px;\n  border: 1px solid #ddd;\n  border-radius: 4px;\n}\n\nbutton {\n  background-color: #4CAF50;\n  color: white;\n  border: none;\n  padding: 10px;\n  border-radius: 4px;\n  cursor: pointer;\n}\n\n.job-card, .message {\n  background-color: #f9f9f9;\n  border-radius: 4px;\n  padding: 15px;\n  margin-bottom: 10px;\n}\n\n.job-section, .chat-section {\n  margin-bottom: 30px;\n}\n\n.messages {\n  max-height: 300px;\n  overflow-y: auto;\n}\n\n.job-details {\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: 10px;\n  color: #666;\n  font-size: 0.9em;\n}\n\n.message strong {\n  margin-right: 10px;\n  color: #4CAF50;\n}\n`;",5,[168],{"_149":118,"_103":283,"_108":286,"_152":138,"_175":287},["D",1739822688559],[288],{"_106":289,"_152":138,"_149":118,"_99":168,"_159":290,"_157":171,"_103":291,"_151":-5,"_108":286,"_153":283,"_162":-5,"_155":27,"_161":27,"_102":292},"a935562a-27af-11f0-aecd-569c3dd06744","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\n\nfunction App() {\n  const [jobs, setJobs] = useState([]);\n  const [messages, setMessages] = useState([]);\n  const [newJob, setNewJob] = useState({ \n    title: '', \n    company: '', \n    description: '', \n    openings: 'One Openings', \n    location: '' \n  });\n  const [newMessage, setNewMessage] = useState('');\n\n  useEffect(() => {\n    fetchJobs();\n    fetchMessages();\n  }, []);\n\n  const fetchJobs = async () => {\n    const response = await fetch('/jobs');\n    const data = await response.json();\n    setJobs(data);\n  };\n\n  const fetchMessages = async () => {\n    const response = await fetch('/messages');\n    const data = await response.json();\n    setMessages(data);\n  };\n\n  const handleJobSubmit = async (e) => {\n    e.preventDefault();\n    await fetch('/jobs', {\n      method: 'POST',\n      headers: { 'Content-Type': 'application/json' },\n      body: JSON.stringify(newJob)\n    });\n    setNewJob({ \n      title: '', \n      company: '', \n      description: '', \n      openings: 'One Openings', \n      location: '' \n    });\n    fetchJobs();\n  };\n\n  const handleMessageSubmit = async (e) => {\n    e.preventDefault();\n    await fetch('/messages', {\n      method: 'POST',\n      headers: { 'Content-Type': 'application/json' },\n      body: JSON.stringify({ text: newMessage })\n    });\n    setNewMessage('');\n    fetchMessages();\n  };\n\n  return (\n    <div className=\"container\">\n      <h1>🚀 Job Board & Community Chat</h1>\n      \n      <div className=\"job-section\">\n        <h2>Post a Job</h2>\n        <form onSubmit={handleJobSubmit}>\n          <input \n            placeholder=\"Job Title\" \n            value={newJob.title}\n            onChange={(e) => setNewJob({...newJob, title: e.target.value})}\n            required\n          />\n          <input \n            placeholder=\"Company\" \n            value={newJob.company}\n            onChange={(e) => setNewJob({...newJob, company: e.target.value})}\n            required\n          />\n          <select\n            value={newJob.openings}\n            onChange={(e) => setNewJob({...newJob, openings: e.target.value})}\n            required\n          >\n            <option>One Openings</option>\n            <option>Two Openings</option>\n            <option>Three Openings</option>\n            <option>Four Openings</option>\n            <option>Five Openings</option>\n            <option>Multiple Openings</option>\n          </select>\n          <input \n            placeholder=\"Location (City, Country)\" \n            value={newJob.location}\n            onChange={(e) => setNewJob({...newJob, location: e.target.value})}\n            required\n          />\n          <textarea \n            placeholder=\"Job Description\"\n            value={newJob.description}\n            onChange={(e) => setNewJob({...newJob, description: e.target.value})}\n            required\n          />\n          <button type=\"submit\">Post Job</button>\n        </form>\n\n        <h2>Job Listings</h2>\n        {jobs.map((job, index) => (\n          <div key={index} className=\"job-card\">\n            <h3>{job.title} @ {job.company}</h3>\n            <div className=\"job-details\">\n              <span>📍 {job.location}</span>\n              <span>🔢 {job.openings}</span>\n            </div>\n            <p>{job.description}</p>\n          </div>\n        ))}\n      </div>\n\n      <div className=\"chat-section\">\n        <h2>Community Chat</h2>\n        <div className=\"messages\">\n          {messages.map((msg, index) => (\n            <div key={index} className=\"message\">\n              {msg.text}\n            </div>\n          ))}\n        </div>\n        <form onSubmit={handleMessageSubmit}>\n          <input \n            placeholder=\"Type a message...\" \n            value={newMessage}\n            onChange={(e) => setNewMessage(e.target.value)}\n            required\n          />\n          <button type=\"submit\">Send</button>\n        </form>\n      </div>\n      <a \n        href={import.meta.url.replace(\"esm.town\", \"val.town\")} \n        target=\"_top\" \n        style={{color: '#888', textDecoration: 'none', fontSize: '0.8em'}}\n      >\n        View Source\n      </a>\n    </div>\n  );\n}\n\nfunction client() {\n  createRoot(document.getElementById(\"root\")).render(<App />);\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise<Response> {\n  try {\n    // Dynamically import sqlite with error handling\n    let sqlite;\n    try {\n      const sqliteModule = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n      sqlite = sqliteModule.sqlite;\n    } catch (importError) {\n      console.error('SQLite import error:', importError);\n      return new Response(JSON.stringify({ \n        error: 'Failed to import SQLite', \n        details: importError.toString() \n      }), { \n        status: 500,\n        headers: { 'Content-Type': 'application/json' } \n      });\n    }\n\n    const KEY = \"jobPostingApp\";\n    const SCHEMA_VERSION = 7; // Incrementing schema version\n\n    // Comprehensive table creation with multiple error handling strategies\n    const createTablesWithRetry = async () => {\n      const tableCreationQueries = [\n        `CREATE TABLE IF NOT EXISTS ${KEY}_jobs_${SCHEMA_VERSION} (\n          id INTEGER PRIMARY KEY AUTOINCREMENT,\n          title TEXT NOT NULL,\n          company TEXT NOT NULL,\n          description TEXT NOT NULL,\n          openings TEXT NOT NULL,\n          location TEXT NOT NULL,\n          timestamp DATETIME DEFAULT CURRENT_TIMESTAMP\n        )`,\n        `CREATE TABLE IF NOT EXISTS ${KEY}_messages_${SCHEMA_VERSION} (\n          id INTEGER PRIMARY KEY AUTOINCREMENT,\n          text TEXT NOT NULL,\n          timestamp DATETIME DEFAULT CURRENT_TIMESTAMP\n        )`\n      ];\n\n      for (const query of tableCreationQueries) {\n        try {\n          await sqlite.execute(query);\n        } catch (tableError) {\n          console.error(`Table creation error for query: ${query}`, tableError);\n          \n          // Additional diagnostic logging\n          console.log('SQLite module:', sqlite);\n          console.log('Current KEY:', KEY);\n          console.log('Current SCHEMA_VERSION:', SCHEMA_VERSION);\n\n          // Attempt to drop and recreate table if exists\n          try {\n            await sqlite.execute(`DROP TABLE IF EXISTS ${KEY}_jobs_${SCHEMA_VERSION}`);\n            await sqlite.execute(`DROP TABLE IF EXISTS ${KEY}_messages_${SCHEMA_VERSION}`);\n            await sqlite.execute(query);\n          } catch (dropError) {\n            console.error('Failed to drop and recreate table:', dropError);\n            throw dropError;\n          }\n        }\n      }\n    };\n\n    // Execute table creation\n    try {\n      await createTablesWithRetry();\n    } catch (finalTableError) {\n      console.error('Final table creation error:', finalTableError);\n      return new Response(JSON.stringify({ \n        error: 'Catastrophic table creation failure', \n        details: finalTableError.toString() \n      }), { \n        status: 500,\n        headers: { 'Content-Type': 'application/json' } \n      });\n    }\n\n    // Route handling with improved error management\n    if (request.method === 'POST' && new URL(request.url).pathname === '/jobs') {\n      try {\n        const job = await request.json();\n        await sqlite.execute(\n          `INSERT INTO ${KEY}_jobs_${SCHEMA_VERSION} (title, company, description, openings, location) VALUES (?, ?, ?, ?, ?)`,\n          [job.title, job.company, job.description, job.openings, job.location]\n        );\n        return new Response(JSON.stringify({ success: true }), { \n          headers: { 'Content-Type': 'application/json' } \n        });\n      } catch (jobInsertError) {\n        console.error('Job insert error:', jobInsertError);\n        return new Response(JSON.stringify({ \n          error: 'Failed to insert job', \n          details: jobInsertError.toString() \n        }), { \n          status: 500,\n          headers: { 'Content-Type': 'application/json' } \n        });\n      }\n    }\n\n    if (request.method === 'POST' && new URL(request.url).pathname === '/messages') {\n      try {\n        const message = await request.json();\n        await sqlite.execute(\n          `INSERT INTO ${KEY}_messages_${SCHEMA_VERSION} (text) VALUES (?)`,\n          [message.text]\n        );\n        return new Response(JSON.stringify({ success: true }), { \n          headers: { 'Content-Type': 'application/json' } \n        });\n      } catch (messageInsertError) {\n        console.error('Message insert error:', messageInsertError);\n        return new Response(JSON.stringify({ \n          error: 'Failed to insert message', \n          details: messageInsertError.toString() \n        }), { \n          status: 500,\n          headers: { 'Content-Type': 'application/json' } \n        });\n      }\n    }\n\n    if (request.method === 'GET' && new URL(request.url).pathname === '/jobs') {\n      try {\n        const jobs = await sqlite.execute(`\n          SELECT * FROM ${KEY}_jobs_${SCHEMA_VERSION} \n          ORDER BY timestamp DESC \n          LIMIT 20\n        `);\n        return new Response(JSON.stringify(jobs.rows), { \n          headers: { 'Content-Type': 'application/json' } \n        });\n      } catch (jobsFetchError) {\n        console.error('Jobs fetch error:', jobsFetchError);\n        return new Response(JSON.stringify({ \n          error: 'Failed to fetch jobs', \n          details: jobsFetchError.toString() \n        }), { \n          status: 500,\n          headers: { 'Content-Type': 'application/json' } \n        });\n      }\n    }\n\n    if (request.method === 'GET' && new URL(request.url).pathname === '/messages') {\n      try {\n        const messages = await sqlite.execute(`\n          SELECT * FROM ${KEY}_messages_${SCHEMA_VERSION} \n          ORDER BY timestamp DESC \n          LIMIT 50\n        `);\n        return new Response(JSON.stringify(messages.rows), { \n          headers: { 'Content-Type': 'application/json' } \n        });\n      } catch (messagesFetchError) {\n        console.error('Messages fetch error:', messagesFetchError);\n        return new Response(JSON.stringify({ \n          error: 'Failed to fetch messages', \n          details: messagesFetchError.toString() \n        }), { \n          status: 500,\n          headers: { 'Content-Type': 'application/json' } \n        });\n      }\n    }\n\n    return new Response(`\n      <html>\n        <head>\n          <title>Job Board & Community Chat</title>\n          <style>${css}</style>\n        </head>\n        <body>\n          <div id=\"root\"></div>\n          <script src=\"https://esm.town/v/std/catch\"></script>\n          <script type=\"module\" src=\"${import.meta.url}\"></script>\n        </body>\n      </html>\n    `, {\n      headers: { 'Content-Type': 'text/html' }\n    });\n  } catch (globalError) {\n    console.error('Global server error:', globalError);\n    return new Response(JSON.stringify({ \n      error: 'Unexpected server error', \n      details: globalError.toString() \n    }), { \n      status: 500,\n      headers: { 'Content-Type': 'application/json' } \n    });\n  }\n}\n\nconst css = `\nbody {\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n  max-width: 800px;\n  margin: 0 auto;\n  padding: 20px;\n  line-height: 1.6;\n  background-color: #f4f4f4;\n}\n\n.container {\n  background: white;\n  padding: 30px;\n  border-radius: 8px;\n  box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n}\n\nh1 {\n  text-align: center;\n  color: #333;\n}\n\nform {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  margin-bottom: 20px;\n}\n\ninput, textarea, select {\n  padding: 10px;\n  border: 1px solid #ddd;\n  border-radius: 4px;\n}\n\nbutton {\n  background-color: #4CAF50;\n  color: white;\n  border: none;\n  padding: 10px;\n  border-radius: 4px;\n  cursor: pointer;\n}\n\n.job-card, .message {\n  background-color: #f9f9f9;\n  border-radius: 4px;\n  padding: 15px;\n  margin-bottom: 10px;\n}\n\n.job-section, .chat-section {\n  margin-bottom: 30px;\n}\n\n.messages {\n  max-height: 300px;\n  overflow-y: auto;\n}\n\n.job-details {\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: 10px;\n  color: #666;\n  font-size: 0.9em;\n}\n`;",4,[168],{"_149":118,"_103":291,"_108":294,"_152":138,"_175":295},["D",1739822562594],[296],{"_106":297,"_152":138,"_149":118,"_99":168,"_159":298,"_157":171,"_103":299,"_151":-5,"_108":294,"_153":291,"_162":-5,"_155":27,"_161":27,"_102":300},"a930355a-27af-11f0-aecd-569c3dd06744","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\n\nfunction App() {\n  const [jobs, setJobs] = useState([]);\n  const [messages, setMessages] = useState([]);\n  const [newJob, setNewJob] = useState({ \n    title: '', \n    company: '', \n    description: '', \n    openings: 1, \n    location: '' \n  });\n  const [newMessage, setNewMessage] = useState('');\n\n  useEffect(() => {\n    fetchJobs();\n    fetchMessages();\n  }, []);\n\n  const fetchJobs = async () => {\n    const response = await fetch('/jobs');\n    const data = await response.json();\n    setJobs(data);\n  };\n\n  const fetchMessages = async () => {\n    const response = await fetch('/messages');\n    const data = await response.json();\n    setMessages(data);\n  };\n\n  const handleJobSubmit = async (e) => {\n    e.preventDefault();\n    await fetch('/jobs', {\n      method: 'POST',\n      headers: { 'Content-Type': 'application/json' },\n      body: JSON.stringify(newJob)\n    });\n    setNewJob({ \n      title: '', \n      company: '', \n      description: '', \n      openings: 1, \n      location: '' \n    });\n    fetchJobs();\n  };\n\n  const handleMessageSubmit = async (e) => {\n    e.preventDefault();\n    await fetch('/messages', {\n      method: 'POST',\n      headers: { 'Content-Type': 'application/json' },\n      body: JSON.stringify({ text: newMessage })\n    });\n    setNewMessage('');\n    fetchMessages();\n  };\n\n  return (\n    <div className=\"container\">\n      <h1>🚀 Job Board & Community Chat</h1>\n      \n      <div className=\"job-section\">\n        <h2>Post a Job</h2>\n        <form onSubmit={handleJobSubmit}>\n          <input \n            placeholder=\"Job Title\" \n            value={newJob.title}\n            onChange={(e) => setNewJob({...newJob, title: e.target.value})}\n            required\n          />\n          <input \n            placeholder=\"Company\" \n            value={newJob.company}\n            onChange={(e) => setNewJob({...newJob, company: e.target.value})}\n            required\n          />\n          <input \n            type=\"number\"\n            placeholder=\"Number of Openings\" \n            value={newJob.openings}\n            onChange={(e) => setNewJob({...newJob, openings: parseInt(e.target.value)})}\n            min=\"1\"\n            required\n          />\n          <input \n            placeholder=\"Location (City, Country)\" \n            value={newJob.location}\n            onChange={(e) => setNewJob({...newJob, location: e.target.value})}\n            required\n          />\n          <textarea \n            placeholder=\"Job Description\"\n            value={newJob.description}\n            onChange={(e) => setNewJob({...newJob, description: e.target.value})}\n            required\n          />\n          <button type=\"submit\">Post Job</button>\n        </form>\n\n        <h2>Job Listings</h2>\n        {jobs.map((job, index) => (\n          <div key={index} className=\"job-card\">\n            <h3>{job.title} @ {job.company}</h3>\n            <div className=\"job-details\">\n              <span>📍 {job.location}</span>\n              <span>🔢 {job.openings} Opening{job.openings !== 1 ? 's' : ''}</span>\n            </div>\n            <p>{job.description}</p>\n          </div>\n        ))}\n      </div>\n\n      <div className=\"chat-section\">\n        <h2>Community Chat</h2>\n        <div className=\"messages\">\n          {messages.map((msg, index) => (\n            <div key={index} className=\"message\">\n              {msg.text}\n            </div>\n          ))}\n        </div>\n        <form onSubmit={handleMessageSubmit}>\n          <input \n            placeholder=\"Type a message...\" \n            value={newMessage}\n            onChange={(e) => setNewMessage(e.target.value)}\n            required\n          />\n          <button type=\"submit\">Send</button>\n        </form>\n      </div>\n      <a \n        href={import.meta.url.replace(\"esm.town\", \"val.town\")} \n        target=\"_top\" \n        style={{color: '#888', textDecoration: 'none', fontSize: '0.8em'}}\n      >\n        View Source\n      </a>\n    </div>\n  );\n}\n\nfunction client() {\n  createRoot(document.getElementById(\"root\")).render(<App />);\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise<Response> {\n  try {\n    // Dynamically import sqlite with error handling\n    let sqlite;\n    try {\n      const sqliteModule = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n      sqlite = sqliteModule.sqlite;\n    } catch (importError) {\n      console.error('SQLite import error:', importError);\n      return new Response(JSON.stringify({ \n        error: 'Failed to import SQLite', \n        details: importError.toString() \n      }), { \n        status: 500,\n        headers: { 'Content-Type': 'application/json' } \n      });\n    }\n\n    const KEY = \"jobPostingApp\";\n    const SCHEMA_VERSION = 6; // Incrementing schema version\n\n    // Comprehensive table creation with multiple error handling strategies\n    const createTablesWithRetry = async () => {\n      const tableCreationQueries = [\n        `CREATE TABLE IF NOT EXISTS ${KEY}_jobs_${SCHEMA_VERSION} (\n          id INTEGER PRIMARY KEY AUTOINCREMENT,\n          title TEXT NOT NULL,\n          company TEXT NOT NULL,\n          description TEXT NOT NULL,\n          openings INTEGER NOT NULL,\n          location TEXT NOT NULL,\n          timestamp DATETIME DEFAULT CURRENT_TIMESTAMP\n        )`,\n        `CREATE TABLE IF NOT EXISTS ${KEY}_messages_${SCHEMA_VERSION} (\n          id INTEGER PRIMARY KEY AUTOINCREMENT,\n          text TEXT NOT NULL,\n          timestamp DATETIME DEFAULT CURRENT_TIMESTAMP\n        )`\n      ];\n\n      for (const query of tableCreationQueries) {\n        try {\n          await sqlite.execute(query);\n        } catch (tableError) {\n          console.error(`Table creation error for query: ${query}`, tableError);\n          \n          // Additional diagnostic logging\n          console.log('SQLite module:', sqlite);\n          console.log('Current KEY:', KEY);\n          console.log('Current SCHEMA_VERSION:', SCHEMA_VERSION);\n\n          // Attempt to drop and recreate table if exists\n          try {\n            await sqlite.execute(`DROP TABLE IF EXISTS ${KEY}_jobs_${SCHEMA_VERSION}`);\n            await sqlite.execute(`DROP TABLE IF EXISTS ${KEY}_messages_${SCHEMA_VERSION}`);\n            await sqlite.execute(query);\n          } catch (dropError) {\n            console.error('Failed to drop and recreate table:', dropError);\n            throw dropError;\n          }\n        }\n      }\n    };\n\n    // Execute table creation\n    try {\n      await createTablesWithRetry();\n    } catch (finalTableError) {\n      console.error('Final table creation error:', finalTableError);\n      return new Response(JSON.stringify({ \n        error: 'Catastrophic table creation failure', \n        details: finalTableError.toString() \n      }), { \n        status: 500,\n        headers: { 'Content-Type': 'application/json' } \n      });\n    }\n\n    // Route handling with improved error management\n    if (request.method === 'POST' && new URL(request.url).pathname === '/jobs') {\n      try {\n        const job = await request.json();\n        await sqlite.execute(\n          `INSERT INTO ${KEY}_jobs_${SCHEMA_VERSION} (title, company, description, openings, location) VALUES (?, ?, ?, ?, ?)`,\n          [job.title, job.company, job.description, job.openings, job.location]\n        );\n        return new Response(JSON.stringify({ success: true }), { \n          headers: { 'Content-Type': 'application/json' } \n        });\n      } catch (jobInsertError) {\n        console.error('Job insert error:', jobInsertError);\n        return new Response(JSON.stringify({ \n          error: 'Failed to insert job', \n          details: jobInsertError.toString() \n        }), { \n          status: 500,\n          headers: { 'Content-Type': 'application/json' } \n        });\n      }\n    }\n\n    if (request.method === 'POST' && new URL(request.url).pathname === '/messages') {\n      try {\n        const message = await request.json();\n        await sqlite.execute(\n          `INSERT INTO ${KEY}_messages_${SCHEMA_VERSION} (text) VALUES (?)`,\n          [message.text]\n        );\n        return new Response(JSON.stringify({ success: true }), { \n          headers: { 'Content-Type': 'application/json' } \n        });\n      } catch (messageInsertError) {\n        console.error('Message insert error:', messageInsertError);\n        return new Response(JSON.stringify({ \n          error: 'Failed to insert message', \n          details: messageInsertError.toString() \n        }), { \n          status: 500,\n          headers: { 'Content-Type': 'application/json' } \n        });\n      }\n    }\n\n    if (request.method === 'GET' && new URL(request.url).pathname === '/jobs') {\n      try {\n        const jobs = await sqlite.execute(`\n          SELECT * FROM ${KEY}_jobs_${SCHEMA_VERSION} \n          ORDER BY timestamp DESC \n          LIMIT 20\n        `);\n        return new Response(JSON.stringify(jobs.rows), { \n          headers: { 'Content-Type': 'application/json' } \n        });\n      } catch (jobsFetchError) {\n        console.error('Jobs fetch error:', jobsFetchError);\n        return new Response(JSON.stringify({ \n          error: 'Failed to fetch jobs', \n          details: jobsFetchError.toString() \n        }), { \n          status: 500,\n          headers: { 'Content-Type': 'application/json' } \n        });\n      }\n    }\n\n    if (request.method === 'GET' && new URL(request.url).pathname === '/messages') {\n      try {\n        const messages = await sqlite.execute(`\n          SELECT * FROM ${KEY}_messages_${SCHEMA_VERSION} \n          ORDER BY timestamp DESC \n          LIMIT 50\n        `);\n        return new Response(JSON.stringify(messages.rows), { \n          headers: { 'Content-Type': 'application/json' } \n        });\n      } catch (messagesFetchError) {\n        console.error('Messages fetch error:', messagesFetchError);\n        return new Response(JSON.stringify({ \n          error: 'Failed to fetch messages', \n          details: messagesFetchError.toString() \n        }), { \n          status: 500,\n          headers: { 'Content-Type': 'application/json' } \n        });\n      }\n    }\n\n    return new Response(`\n      <html>\n        <head>\n          <title>Job Board & Community Chat</title>\n          <style>${css}</style>\n        </head>\n        <body>\n          <div id=\"root\"></div>\n          <script src=\"https://esm.town/v/std/catch\"></script>\n          <script type=\"module\" src=\"${import.meta.url}\"></script>\n        </body>\n      </html>\n    `, {\n      headers: { 'Content-Type': 'text/html' }\n    });\n  } catch (globalError) {\n    console.error('Global server error:', globalError);\n    return new Response(JSON.stringify({ \n      error: 'Unexpected server error', \n      details: globalError.toString() \n    }), { \n      status: 500,\n      headers: { 'Content-Type': 'application/json' } \n    });\n  }\n}\n\nconst css = `\nbody {\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n  max-width: 800px;\n  margin: 0 auto;\n  padding: 20px;\n  line-height: 1.6;\n  background-color: #f4f4f4;\n}\n\n.container {\n  background: white;\n  padding: 30px;\n  border-radius: 8px;\n  box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n}\n\nh1 {\n  text-align: center;\n  color: #333;\n}\n\nform {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  margin-bottom: 20px;\n}\n\ninput, textarea {\n  padding: 10px;\n  border: 1px solid #ddd;\n  border-radius: 4px;\n}\n\nbutton {\n  background-color: #4CAF50;\n  color: white;\n  border: none;\n  padding: 10px;\n  border-radius: 4px;\n  cursor: pointer;\n}\n\n.job-card, .message {\n  background-color: #f9f9f9;\n  border-radius: 4px;\n  padding: 15px;\n  margin-bottom: 10px;\n}\n\n.job-section, .chat-section {\n  margin-bottom: 30px;\n}\n\n.messages {\n  max-height: 300px;\n  overflow-y: auto;\n}\n\n.job-details {\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: 10px;\n  color: #666;\n  font-size: 0.9em;\n}\n`;",3,[168],{"_149":118,"_103":299,"_108":302,"_152":138,"_175":303},["D",1739822491283],[304],{"_106":305,"_152":138,"_149":118,"_99":168,"_159":306,"_157":171,"_103":94,"_151":-5,"_108":302,"_153":299,"_162":-5,"_155":27,"_161":27,"_102":307},"a92b1732-27af-11f0-aecd-569c3dd06744","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\n\nfunction App() {\n  const [jobs, setJobs] = useState([]);\n  const [messages, setMessages] = useState([]);\n  const [newJob, setNewJob] = useState({ \n    title: '', \n    company: '', \n    description: '', \n    openings: 1, \n    location: '' \n  });\n  const [newMessage, setNewMessage] = useState('');\n\n  useEffect(() => {\n    fetchJobs();\n    fetchMessages();\n  }, []);\n\n  const fetchJobs = async () => {\n    const response = await fetch('/jobs');\n    const data = await response.json();\n    setJobs(data);\n  };\n\n  const fetchMessages = async () => {\n    const response = await fetch('/messages');\n    const data = await response.json();\n    setMessages(data);\n  };\n\n  const handleJobSubmit = async (e) => {\n    e.preventDefault();\n    await fetch('/jobs', {\n      method: 'POST',\n      headers: { 'Content-Type': 'application/json' },\n      body: JSON.stringify(newJob)\n    });\n    setNewJob({ \n      title: '', \n      company: '', \n      description: '', \n      openings: 1, \n      location: '' \n    });\n    fetchJobs();\n  };\n\n  const handleMessageSubmit = async (e) => {\n    e.preventDefault();\n    await fetch('/messages', {\n      method: 'POST',\n      headers: { 'Content-Type': 'application/json' },\n      body: JSON.stringify({ text: newMessage })\n    });\n    setNewMessage('');\n    fetchMessages();\n  };\n\n  return (\n    <div className=\"container\">\n      <h1>🚀 Job Board & Community Chat</h1>\n      \n      <div className=\"job-section\">\n        <h2>Post a Job</h2>\n        <form onSubmit={handleJobSubmit}>\n          <input \n            placeholder=\"Job Title\" \n            value={newJob.title}\n            onChange={(e) => setNewJob({...newJob, title: e.target.value})}\n            required\n          />\n          <input \n            placeholder=\"Company\" \n            value={newJob.company}\n            onChange={(e) => setNewJob({...newJob, company: e.target.value})}\n            required\n          />\n          <input \n            type=\"number\"\n            placeholder=\"Number of Openings\" \n            value={newJob.openings}\n            onChange={(e) => setNewJob({...newJob, openings: parseInt(e.target.value)})}\n            min=\"1\"\n            required\n          />\n          <input \n            placeholder=\"Location (City, Country)\" \n            value={newJob.location}\n            onChange={(e) => setNewJob({...newJob, location: e.target.value})}\n            required\n          />\n          <textarea \n            placeholder=\"Job Description\"\n            value={newJob.description}\n            onChange={(e) => setNewJob({...newJob, description: e.target.value})}\n            required\n          />\n          <button type=\"submit\">Post Job</button>\n        </form>\n\n        <h2>Job Listings</h2>\n        {jobs.map((job, index) => (\n          <div key={index} className=\"job-card\">\n            <h3>{job.title} @ {job.company}</h3>\n            <div className=\"job-details\">\n              <span>📍 {job.location}</span>\n              <span>🔢 {job.openings} Opening{job.openings !== 1 ? 's' : ''}</span>\n            </div>\n            <p>{job.description}</p>\n          </div>\n        ))}\n      </div>\n\n      <div className=\"chat-section\">\n        <h2>Community Chat</h2>\n        <div className=\"messages\">\n          {messages.map((msg, index) => (\n            <div key={index} className=\"message\">\n              {msg.text}\n            </div>\n          ))}\n        </div>\n        <form onSubmit={handleMessageSubmit}>\n          <input \n            placeholder=\"Type a message...\" \n            value={newMessage}\n            onChange={(e) => setNewMessage(e.target.value)}\n            required\n          />\n          <button type=\"submit\">Send</button>\n        </form>\n      </div>\n      <a \n        href={import.meta.url.replace(\"esm.town\", \"val.town\")} \n        target=\"_top\" \n        style={{color: '#888', textDecoration: 'none', fontSize: '0.8em'}}\n      >\n        View Source\n      </a>\n    </div>\n  );\n}\n\nfunction client() {\n  createRoot(document.getElementById(\"root\")).render(<App />);\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise<Response> {\n  try {\n    const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n    const KEY = \"jobPostingApp\";\n    const SCHEMA_VERSION = 5; // Incrementing schema version to force table recreation\n\n    // Wrap table creation in try-catch to handle potential errors\n    try {\n      await sqlite.execute(`\n        CREATE TABLE IF NOT EXISTS ${KEY}_jobs_${SCHEMA_VERSION} (\n          id INTEGER PRIMARY KEY AUTOINCREMENT,\n          title TEXT NOT NULL,\n          company TEXT NOT NULL,\n          description TEXT NOT NULL,\n          openings INTEGER NOT NULL,\n          location TEXT NOT NULL,\n          timestamp DATETIME DEFAULT CURRENT_TIMESTAMP\n        )\n      `);\n\n      await sqlite.execute(`\n        CREATE TABLE IF NOT EXISTS ${KEY}_messages_${SCHEMA_VERSION} (\n          id INTEGER PRIMARY KEY AUTOINCREMENT,\n          text TEXT NOT NULL,\n          timestamp DATETIME DEFAULT CURRENT_TIMESTAMP\n        )\n      `);\n    } catch (tableCreationError) {\n      console.error('Table creation error:', tableCreationError);\n      return new Response(JSON.stringify({ \n        error: 'Failed to create tables', \n        details: tableCreationError.toString() \n      }), { \n        status: 500,\n        headers: { 'Content-Type': 'application/json' } \n      });\n    }\n\n    // Route handling with improved error management\n    if (request.method === 'POST' && new URL(request.url).pathname === '/jobs') {\n      try {\n        const job = await request.json();\n        await sqlite.execute(\n          `INSERT INTO ${KEY}_jobs_${SCHEMA_VERSION} (title, company, description, openings, location) VALUES (?, ?, ?, ?, ?)`,\n          [job.title, job.company, job.description, job.openings, job.location]\n        );\n        return new Response(JSON.stringify({ success: true }), { \n          headers: { 'Content-Type': 'application/json' } \n        });\n      } catch (jobInsertError) {\n        console.error('Job insert error:', jobInsertError);\n        return new Response(JSON.stringify({ \n          error: 'Failed to insert job', \n          details: jobInsertError.toString() \n        }), { \n          status: 500,\n          headers: { 'Content-Type': 'application/json' } \n        });\n      }\n    }\n\n    if (request.method === 'POST' && new URL(request.url).pathname === '/messages') {\n      try {\n        const message = await request.json();\n        await sqlite.execute(\n          `INSERT INTO ${KEY}_messages_${SCHEMA_VERSION} (text) VALUES (?)`,\n          [message.text]\n        );\n        return new Response(JSON.stringify({ success: true }), { \n          headers: { 'Content-Type': 'application/json' } \n        });\n      } catch (messageInsertError) {\n        console.error('Message insert error:', messageInsertError);\n        return new Response(JSON.stringify({ \n          error: 'Failed to insert message', \n          details: messageInsertError.toString() \n        }), { \n          status: 500,\n          headers: { 'Content-Type': 'application/json' } \n        });\n      }\n    }\n\n    if (request.method === 'GET' && new URL(request.url).pathname === '/jobs') {\n      try {\n        const jobs = await sqlite.execute(`\n          SELECT * FROM ${KEY}_jobs_${SCHEMA_VERSION} \n          ORDER BY timestamp DESC \n          LIMIT 20\n        `);\n        return new Response(JSON.stringify(jobs.rows), { \n          headers: { 'Content-Type': 'application/json' } \n        });\n      } catch (jobsFetchError) {\n        console.error('Jobs fetch error:', jobsFetchError);\n        return new Response(JSON.stringify({ \n          error: 'Failed to fetch jobs', \n          details: jobsFetchError.toString() \n        }), { \n          status: 500,\n          headers: { 'Content-Type': 'application/json' } \n        });\n      }\n    }\n\n    if (request.method === 'GET' && new URL(request.url).pathname === '/messages') {\n      try {\n        const messages = await sqlite.execute(`\n          SELECT * FROM ${KEY}_messages_${SCHEMA_VERSION} \n          ORDER BY timestamp DESC \n          LIMIT 50\n        `);\n        return new Response(JSON.stringify(messages.rows), { \n          headers: { 'Content-Type': 'application/json' } \n        });\n      } catch (messagesFetchError) {\n        console.error('Messages fetch error:', messagesFetchError);\n        return new Response(JSON.stringify({ \n          error: 'Failed to fetch messages', \n          details: messagesFetchError.toString() \n        }), { \n          status: 500,\n          headers: { 'Content-Type': 'application/json' } \n        });\n      }\n    }\n\n    return new Response(`\n      <html>\n        <head>\n          <title>Job Board & Community Chat</title>\n          <style>${css}</style>\n        </head>\n        <body>\n          <div id=\"root\"></div>\n          <script src=\"https://esm.town/v/std/catch\"></script>\n          <script type=\"module\" src=\"${import.meta.url}\"></script>\n        </body>\n      </html>\n    `, {\n      headers: { 'Content-Type': 'text/html' }\n    });\n  } catch (globalError) {\n    console.error('Global server error:', globalError);\n    return new Response(JSON.stringify({ \n      error: 'Unexpected server error', \n      details: globalError.toString() \n    }), { \n      status: 500,\n      headers: { 'Content-Type': 'application/json' } \n    });\n  }\n}\n\nconst css = `\nbody {\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n  max-width: 800px;\n  margin: 0 auto;\n  padding: 20px;\n  line-height: 1.6;\n  background-color: #f4f4f4;\n}\n\n.container {\n  background: white;\n  padding: 30px;\n  border-radius: 8px;\n  box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n}\n\nh1 {\n  text-align: center;\n  color: #333;\n}\n\nform {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  margin-bottom: 20px;\n}\n\ninput, textarea {\n  padding: 10px;\n  border: 1px solid #ddd;\n  border-radius: 4px;\n}\n\nbutton {\n  background-color: #4CAF50;\n  color: white;\n  border: none;\n  padding: 10px;\n  border-radius: 4px;\n  cursor: pointer;\n}\n\n.job-card, .message {\n  background-color: #f9f9f9;\n  border-radius: 4px;\n  padding: 15px;\n  margin-bottom: 10px;\n}\n\n.job-section, .chat-section {\n  margin-bottom: 30px;\n}\n\n.messages {\n  max-height: 300px;\n  overflow-y: auto;\n}\n\n.job-details {\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: 10px;\n  color: #666;\n  font-size: 0.9em;\n}\n`;",[168],{"_149":118,"_103":94,"_108":309,"_152":138,"_175":310},["D",1739822397158],[311],{"_106":312,"_152":138,"_149":118,"_99":168,"_159":313,"_157":171,"_103":154,"_151":-5,"_108":309,"_153":94,"_162":-5,"_155":27,"_161":27,"_102":314},"a925dd08-27af-11f0-aecd-569c3dd06744","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\n\nfunction App() {\n  const [jobs, setJobs] = useState([]);\n  const [messages, setMessages] = useState([]);\n  const [newJob, setNewJob] = useState({ \n    title: '', \n    company: '', \n    description: '', \n    openings: 1, \n    location: '' \n  });\n  const [newMessage, setNewMessage] = useState('');\n\n  useEffect(() => {\n    fetchJobs();\n    fetchMessages();\n  }, []);\n\n  const fetchJobs = async () => {\n    const response = await fetch('/jobs');\n    const data = await response.json();\n    setJobs(data);\n  };\n\n  const fetchMessages = async () => {\n    const response = await fetch('/messages');\n    const data = await response.json();\n    setMessages(data);\n  };\n\n  const handleJobSubmit = async (e) => {\n    e.preventDefault();\n    await fetch('/jobs', {\n      method: 'POST',\n      headers: { 'Content-Type': 'application/json' },\n      body: JSON.stringify(newJob)\n    });\n    setNewJob({ \n      title: '', \n      company: '', \n      description: '', \n      openings: 1, \n      location: '' \n    });\n    fetchJobs();\n  };\n\n  const handleMessageSubmit = async (e) => {\n    e.preventDefault();\n    await fetch('/messages', {\n      method: 'POST',\n      headers: { 'Content-Type': 'application/json' },\n      body: JSON.stringify({ text: newMessage })\n    });\n    setNewMessage('');\n    fetchMessages();\n  };\n\n  return (\n    <div className=\"container\">\n      <h1>🚀 Job Board & Community Chat</h1>\n      \n      <div className=\"job-section\">\n        <h2>Post a Job</h2>\n        <form onSubmit={handleJobSubmit}>\n          <input \n            placeholder=\"Job Title\" \n            value={newJob.title}\n            onChange={(e) => setNewJob({...newJob, title: e.target.value})}\n            required\n          />\n          <input \n            placeholder=\"Company\" \n            value={newJob.company}\n            onChange={(e) => setNewJob({...newJob, company: e.target.value})}\n            required\n          />\n          <input \n            type=\"number\"\n            placeholder=\"Number of Openings\" \n            value={newJob.openings}\n            onChange={(e) => setNewJob({...newJob, openings: parseInt(e.target.value)})}\n            min=\"1\"\n            required\n          />\n          <input \n            placeholder=\"Location (City, Country)\" \n            value={newJob.location}\n            onChange={(e) => setNewJob({...newJob, location: e.target.value})}\n            required\n          />\n          <textarea \n            placeholder=\"Job Description\"\n            value={newJob.description}\n            onChange={(e) => setNewJob({...newJob, description: e.target.value})}\n            required\n          />\n          <button type=\"submit\">Post Job</button>\n        </form>\n\n        <h2>Job Listings</h2>\n        {jobs.map((job, index) => (\n          <div key={index} className=\"job-card\">\n            <h3>{job.title} @ {job.company}</h3>\n            <div className=\"job-details\">\n              <span>📍 {job.location}</span>\n              <span>🔢 {job.openings} Opening{job.openings !== 1 ? 's' : ''}</span>\n            </div>\n            <p>{job.description}</p>\n          </div>\n        ))}\n      </div>\n\n      <div className=\"chat-section\">\n        <h2>Community Chat</h2>\n        <div className=\"messages\">\n          {messages.map((msg, index) => (\n            <div key={index} className=\"message\">\n              {msg.text}\n            </div>\n          ))}\n        </div>\n        <form onSubmit={handleMessageSubmit}>\n          <input \n            placeholder=\"Type a message...\" \n            value={newMessage}\n            onChange={(e) => setNewMessage(e.target.value)}\n            required\n          />\n          <button type=\"submit\">Send</button>\n        </form>\n      </div>\n      <a \n        href={import.meta.url.replace(\"esm.town\", \"val.town\")} \n        target=\"_top\" \n        style={{color: '#888', textDecoration: 'none', fontSize: '0.8em'}}\n      >\n        View Source\n      </a>\n    </div>\n  );\n}\n\nfunction client() {\n  createRoot(document.getElementById(\"root\")).render(<App />);\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise<Response> {\n  const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n  const KEY = \"jobPostingApp\";\n  const SCHEMA_VERSION = 4;\n\n  await sqlite.execute(`\n    CREATE TABLE IF NOT EXISTS ${KEY}_jobs_${SCHEMA_VERSION} (\n      id INTEGER PRIMARY KEY AUTOINCREMENT,\n      title TEXT NOT NULL,\n      company TEXT NOT NULL,\n      description TEXT NOT NULL,\n      openings INTEGER NOT NULL,\n      location TEXT NOT NULL,\n      timestamp DATETIME DEFAULT CURRENT_TIMESTAMP\n    )\n  `);\n\n  await sqlite.execute(`\n    CREATE TABLE IF NOT EXISTS ${KEY}_messages_${SCHEMA_VERSION} (\n      id INTEGER PRIMARY KEY AUTOINCREMENT,\n      text TEXT NOT NULL,\n      timestamp DATETIME DEFAULT CURRENT_TIMESTAMP\n    )\n  `);\n\n  if (request.method === 'POST' && new URL(request.url).pathname === '/jobs') {\n    const job = await request.json();\n    await sqlite.execute(\n      `INSERT INTO ${KEY}_jobs_${SCHEMA_VERSION} (title, company, description, openings, location) VALUES (?, ?, ?, ?, ?)`,\n      [job.title, job.company, job.description, job.openings, job.location]\n    );\n    return new Response(JSON.stringify({ success: true }), { \n      headers: { 'Content-Type': 'application/json' } \n    });\n  }\n\n  if (request.method === 'POST' && new URL(request.url).pathname === '/messages') {\n    const message = await request.json();\n    await sqlite.execute(\n      `INSERT INTO ${KEY}_messages_${SCHEMA_VERSION} (text) VALUES (?)`,\n      [message.text]\n    );\n    return new Response(JSON.stringify({ success: true }), { \n      headers: { 'Content-Type': 'application/json' } \n    });\n  }\n\n  if (request.method === 'GET' && new URL(request.url).pathname === '/jobs') {\n    const jobs = await sqlite.execute(`\n      SELECT * FROM ${KEY}_jobs_${SCHEMA_VERSION} \n      ORDER BY timestamp DESC \n      LIMIT 20\n    `);\n    return new Response(JSON.stringify(jobs.rows), { \n      headers: { 'Content-Type': 'application/json' } \n    });\n  }\n\n  if (request.method === 'GET' && new URL(request.url).pathname === '/messages') {\n    const messages = await sqlite.execute(`\n      SELECT * FROM ${KEY}_messages_${SCHEMA_VERSION} \n      ORDER BY timestamp DESC \n      LIMIT 50\n    `);\n    return new Response(JSON.stringify(messages.rows), { \n      headers: { 'Content-Type': 'application/json' } \n    });\n  }\n\n  return new Response(`\n    <html>\n      <head>\n        <title>Job Board & Community Chat</title>\n        <style>${css}</style>\n      </head>\n      <body>\n        <div id=\"root\"></div>\n        <script src=\"https://esm.town/v/std/catch\"></script>\n        <script type=\"module\" src=\"${import.meta.url}\"></script>\n      </body>\n    </html>\n  `, {\n    headers: { 'Content-Type': 'text/html' }\n  });\n}\n\nconst css = `\nbody {\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n  max-width: 800px;\n  margin: 0 auto;\n  padding: 20px;\n  line-height: 1.6;\n  background-color: #f4f4f4;\n}\n\n.container {\n  background: white;\n  padding: 30px;\n  border-radius: 8px;\n  box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n}\n\nh1 {\n  text-align: center;\n  color: #333;\n}\n\nform {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  margin-bottom: 20px;\n}\n\ninput, textarea {\n  padding: 10px;\n  border: 1px solid #ddd;\n  border-radius: 4px;\n}\n\nbutton {\n  background-color: #4CAF50;\n  color: white;\n  border: none;\n  padding: 10px;\n  border-radius: 4px;\n  cursor: pointer;\n}\n\n.job-card, .message {\n  background-color: #f9f9f9;\n  border-radius: 4px;\n  padding: 15px;\n  margin-bottom: 10px;\n}\n\n.job-section, .chat-section {\n  margin-bottom: 30px;\n}\n\n.messages {\n  max-height: 300px;\n  overflow-y: auto;\n}\n\n.job-details {\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: 10px;\n  color: #666;\n  font-size: 0.9em;\n}\n`;",[168],{"_149":150,"_103":154,"_108":316,"_152":138,"_175":317},["D",1739822107149],[318,320],{"_106":147,"_152":138,"_149":150,"_99":148,"_159":160,"_157":158,"_103":33,"_151":-5,"_108":316,"_153":154,"_162":-5,"_155":120,"_161":27,"_102":319},[148],{"_106":321,"_152":138,"_149":118,"_99":168,"_159":322,"_157":171,"_103":33,"_151":-5,"_108":323,"_153":154,"_162":-5,"_155":27,"_161":27,"_102":324},"a92015f8-27af-11f0-aecd-569c3dd06744","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\n\nfunction App() {\n  const [jobs, setJobs] = useState([]);\n  const [messages, setMessages] = useState([]);\n  const [newJob, setNewJob] = useState({ title: '', company: '', description: '' });\n  const [newMessage, setNewMessage] = useState('');\n\n  useEffect(() => {\n    fetchJobs();\n    fetchMessages();\n  }, []);\n\n  const fetchJobs = async () => {\n    const response = await fetch('/jobs');\n    const data = await response.json();\n    setJobs(data);\n  };\n\n  const fetchMessages = async () => {\n    const response = await fetch('/messages');\n    const data = await response.json();\n    setMessages(data);\n  };\n\n  const handleJobSubmit = async (e) => {\n    e.preventDefault();\n    await fetch('/jobs', {\n      method: 'POST',\n      headers: { 'Content-Type': 'application/json' },\n      body: JSON.stringify(newJob)\n    });\n    setNewJob({ title: '', company: '', description: '' });\n    fetchJobs();\n  };\n\n  const handleMessageSubmit = async (e) => {\n    e.preventDefault();\n    await fetch('/messages', {\n      method: 'POST',\n      headers: { 'Content-Type': 'application/json' },\n      body: JSON.stringify({ text: newMessage })\n    });\n    setNewMessage('');\n    fetchMessages();\n  };\n\n  return (\n    <div className=\"container\">\n      <h1>🚀 Job Board & Community Chat</h1>\n      \n      <div className=\"job-section\">\n        <h2>Post a Job</h2>\n        <form onSubmit={handleJobSubmit}>\n          <input \n            placeholder=\"Job Title\" \n            value={newJob.title}\n            onChange={(e) => setNewJob({...newJob, title: e.target.value})}\n            required\n          />\n          <input \n            placeholder=\"Company\" \n            value={newJob.company}\n            onChange={(e) => setNewJob({...newJob, company: e.target.value})}\n            required\n          />\n          <textarea \n            placeholder=\"Job Description\"\n            value={newJob.description}\n            onChange={(e) => setNewJob({...newJob, description: e.target.value})}\n            required\n          />\n          <button type=\"submit\">Post Job</button>\n        </form>\n\n        <h2>Job Listings</h2>\n        {jobs.map((job, index) => (\n          <div key={index} className=\"job-card\">\n            <h3>{job.title} @ {job.company}</h3>\n            <p>{job.description}</p>\n          </div>\n        ))}\n      </div>\n\n      <div className=\"chat-section\">\n        <h2>Community Chat</h2>\n        <div className=\"messages\">\n          {messages.map((msg, index) => (\n            <div key={index} className=\"message\">\n              {msg.text}\n            </div>\n          ))}\n        </div>\n        <form onSubmit={handleMessageSubmit}>\n          <input \n            placeholder=\"Type a message...\" \n            value={newMessage}\n            onChange={(e) => setNewMessage(e.target.value)}\n            required\n          />\n          <button type=\"submit\">Send</button>\n        </form>\n      </div>\n      <a \n        href={import.meta.url.replace(\"esm.town\", \"val.town\")} \n        target=\"_top\" \n        style={{color: '#888', textDecoration: 'none', fontSize: '0.8em'}}\n      >\n        View Source\n      </a>\n    </div>\n  );\n}\n\nfunction client() {\n  createRoot(document.getElementById(\"root\")).render(<App />);\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise<Response> {\n  const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n  const KEY = \"jobPostingApp\";\n  const SCHEMA_VERSION = 3;\n\n  await sqlite.execute(`\n    CREATE TABLE IF NOT EXISTS ${KEY}_jobs_${SCHEMA_VERSION} (\n      id INTEGER PRIMARY KEY AUTOINCREMENT,\n      title TEXT NOT NULL,\n      company TEXT NOT NULL,\n      description TEXT NOT NULL,\n      timestamp DATETIME DEFAULT CURRENT_TIMESTAMP\n    )\n  `);\n\n  await sqlite.execute(`\n    CREATE TABLE IF NOT EXISTS ${KEY}_messages_${SCHEMA_VERSION} (\n      id INTEGER PRIMARY KEY AUTOINCREMENT,\n      text TEXT NOT NULL,\n      timestamp DATETIME DEFAULT CURRENT_TIMESTAMP\n    )\n  `);\n\n  if (request.method === 'POST' && new URL(request.url).pathname === '/jobs') {\n    const job = await request.json();\n    await sqlite.execute(\n      `INSERT INTO ${KEY}_jobs_${SCHEMA_VERSION} (title, company, description) VALUES (?, ?, ?)`,\n      [job.title, job.company, job.description]\n    );\n    return new Response(JSON.stringify({ success: true }), { \n      headers: { 'Content-Type': 'application/json' } \n    });\n  }\n\n  if (request.method === 'POST' && new URL(request.url).pathname === '/messages') {\n    const message = await request.json();\n    await sqlite.execute(\n      `INSERT INTO ${KEY}_messages_${SCHEMA_VERSION} (text) VALUES (?)`,\n      [message.text]\n    );\n    return new Response(JSON.stringify({ success: true }), { \n      headers: { 'Content-Type': 'application/json' } \n    });\n  }\n\n  if (request.method === 'GET' && new URL(request.url).pathname === '/jobs') {\n    const jobs = await sqlite.execute(`\n      SELECT * FROM ${KEY}_jobs_${SCHEMA_VERSION} \n      ORDER BY timestamp DESC \n      LIMIT 20\n    `);\n    return new Response(JSON.stringify(jobs.rows), { \n      headers: { 'Content-Type': 'application/json' } \n    });\n  }\n\n  if (request.method === 'GET' && new URL(request.url).pathname === '/messages') {\n    const messages = await sqlite.execute(`\n      SELECT * FROM ${KEY}_messages_${SCHEMA_VERSION} \n      ORDER BY timestamp DESC \n      LIMIT 50\n    `);\n    return new Response(JSON.stringify(messages.rows), { \n      headers: { 'Content-Type': 'application/json' } \n    });\n  }\n\n  return new Response(`\n    <html>\n      <head>\n        <title>Job Board & Community Chat</title>\n        <style>${css}</style>\n      </head>\n      <body>\n        <div id=\"root\"></div>\n        <script src=\"https://esm.town/v/std/catch\"></script>\n        <script type=\"module\" src=\"${import.meta.url}\"></script>\n      </body>\n    </html>\n  `, {\n    headers: { 'Content-Type': 'text/html' }\n  });\n}\n\nconst css = `\nbody {\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n  max-width: 800px;\n  margin: 0 auto;\n  padding: 20px;\n  line-height: 1.6;\n  background-color: #f4f4f4;\n}\n\n.container {\n  background: white;\n  padding: 30px;\n  border-radius: 8px;\n  box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n}\n\nh1 {\n  text-align: center;\n  color: #333;\n}\n\nform {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  margin-bottom: 20px;\n}\n\ninput, textarea {\n  padding: 10px;\n  border: 1px solid #ddd;\n  border-radius: 4px;\n}\n\nbutton {\n  background-color: #4CAF50;\n  color: white;\n  border: none;\n  padding: 10px;\n  border-radius: 4px;\n  cursor: pointer;\n}\n\n.job-card, .message {\n  background-color: #f9f9f9;\n  border-radius: 4px;\n  padding: 15px;\n  margin-bottom: 10px;\n}\n\n.job-section, .chat-section {\n  margin-bottom: 30px;\n}\n\n.messages {\n  max-height: 300px;\n  overflow-y: auto;\n}\n`;",["D",1739822107149],[168],"page","hasNext","routes/_app","actionData","errors"]
</article></body></html>

History