\n {input.description}\n {input.type === \"select\"\n ? (\n \n dispatch({\n type: \"UPDATE_INPUT\",\n payload: { name: input.name, value: e.target.value },\n })}\n required={input.required}\n >\n \n {input.options?.map(option => (\n \n ))}\n \n )\n : (\n \n dispatch({\n type: \"UPDATE_INPUT\",\n payload: { name: input.name, value: e.target.value },\n })}\n required={input.required}\n />\n )}\n

\n ));\n }, [state.selectedCommand, state.commandInputs]);\n\n const renderErrorDetails = () => {\n if (!state.error) return null;\n\n return (\n

Error Details

View Error Information

{JSON.stringify({\n            message: state.error,\n            details: state.errorDetails,\n            stackTrace: state.errorStackTrace\n          }, null, 2)}

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

🔧 Home Repair Assistants

Your guide to common home repairs

\n\n

\n {state.agents.map(agent => (\n dispatch({ type: \"SELECT_AGENT\", payload: agent })}\n className={state.selectedAgent?.id === agent.id ? \"active\" : \"\"}\n >\n {agent.name}\n \n ))}\n

\n\n {state.selectedAgent && (\n

{state.selectedAgent.name}

{state.selectedAgent.description}

\n\n

\n {state.selectedAgent.commands.map(command => (\n dispatch({ type: \"SELECT_COMMAND\", payload: command })}\n className={state.selectedCommand?.name === command.name ? \"active\" : \"\"}\n >\n /{command.name}\n \n ))}\n

\n )}\n\n {state.selectedCommand && (\n

/{state.selectedCommand.name}

{state.selectedCommand.description}

\n\n {renderInputs()}\n\n \n Execute Command\n \n

\n )}\n\n {(state.commandResult || state.error) && (\n

Result

\n            {state.error || state.commandResult}\n

\n {renderErrorDetails()}\n

\n )}\n

\n );\n}\n\n// Simplified CSS-in-JS approach\nconst styles = `\n.home-repair-container {\n font-family: 'Inter', sans-serif;\n max-width: 800px;\n margin: 0 auto;\n padding: 20px;\n background-color: #f8f9fa;\n}\n\n.agent-selector, .command-selector, .commands {\n display: flex;\n justify-content: center;\n flex-wrap: wrap;\n gap: 10px;\n margin-bottom: 20px;\n}\n\nbutton {\n padding: 10px 15px;\n background-color: #e9ecef;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n transition: all 0.3s ease;\n}\n\nbutton.active {\n background-color: #007bff;\n color: white;\n}\n\n.command-inputs {\n background-color: white;\n padding: 20px;\n border-radius: 10px;\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n}\n\n.input-group {\n margin-bottom: 15px;\n}\n\n.input-group input, .input-group select {\n width: 100%;\n padding: 10px;\n border: 1px solid #ced4da;\n border-radius: 4px;\n}\n\n.execute-btn {\n width: 100%;\n padding: 12px;\n background-color: #28a745;\n color: white;\n border: none;\n border-radius: 5px;\n}\n\n.execute-btn:disabled {\n background-color: #6c757d;\n cursor: not-allowed;\n}\n\n.result-container {\n margin-top: 20px;\n background-color: white;\n padding: 15px;\n border-radius: 10px;\n}\n\n.error {\n color: #dc3545;\n background-color: #f8d7da;\n}\n\n.success {\n background-color: #e9ecef;\n}\n\n.error-details {\n margin-top: 10px;\n background-color: #f8d7da;\n border: 1px solid #f5c6cb;\n border-radius: 4px;\n padding: 10px;\n}\n\n.error-details details {\n margin-top: 10px;\n}\n\n.error-details pre {\n background-color: #ffffff;\n border: 1px solid #ced4da;\n border-radius: 4px;\n padding: 10px;\n max-height: 200px;\n overflow-y: auto;\n}\n`;\n\n// Client-side rendering\nfunction client() {\n // Inject styles\n const styleElement = document.createElement(\"style\");\n styleElement.textContent = styles;\n document.head.appendChild(styleElement);\n\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise {\n const { OpenAI } = await import(\"https://esm.town/v/std/openai\");\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n const openai = new OpenAI();\n const KEY = \"homerepair\";\n\n // Initialize tables\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_agents (\n id TEXT PRIMARY KEY,\n name TEXT,\n description TEXT,\n prompt TEXT,\n commands TEXT\n )\n `);\n\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_conversations (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n agent_id TEXT,\n user_message TEXT,\n assistant_response TEXT,\n timestamp DATETIME DEFAULT CURRENT_TIMESTAMP\n )\n `);\n\n // Handle command execution route\n if (new URL(request.url).pathname === \"/execute-command\") {\n try {\n const { agentId, command, inputs } = await request.json();\n\n // Simulate command execution with OpenAI\n const messages = [\n {\n role: \"system\",\n content:\n `You are a home repair assistant specializing in ${agentId}. Execute the command /${command} with the following inputs: ${\n JSON.stringify(inputs)\n }`,\n },\n ];\n\n try {\n const completion = await openai.chat.completions.create({\n messages: messages,\n model: \"gpt-4o-mini\",\n });\n\n const response = completion.choices[0].message.content;\n\n // Log conversation\n await sqlite.execute(\n `INSERT INTO ${KEY}_conversations (agent_id, user_message, assistant_response) VALUES (?, ?, ?)`,\n [agentId, JSON.stringify(inputs), response],\n );\n\n return new Response(JSON.stringify({ result: response }), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n } catch (openAIError) {\n console.error(\"OpenAI API Error:\", {\n message: openAIError.message,\n name: openAIError.name,\n stack: openAIError.stack,\n response: openAIError.response\n ? await openAIError.response.text()\n : \"No response body\",\n });\n\n return new Response(\n JSON.stringify({\n error: \"OpenAI API Error\",\n details: openAIError.message,\n stackTrace: openAIError.stack,\n }),\n {\n status: 500,\n headers: { \"Content-Type\": \"application/json\" },\n },\n );\n }\n } catch (error) {\n console.error(\"Command Execution Error:\", {\n message: error.message,\n name: error.name,\n stack: error.stack,\n });\n\n return new Response(\n JSON.stringify({\n error: \"Command Execution Failed\",\n details: error.message,\n stackTrace: error.stack,\n }),\n {\n status: 500,\n headers: { \"Content-Type\": \"application/json\" },\n },\n );\n }\n }\n\n // Serve the main HTML\n return new Response(\n `\n \n \n Home Repair Assistants\n \n \n \n \n

\n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n },\n );\n}","deleted","label",[98],"permalink","https://www.val.town/x/Learn/homerepair/code/main.tsx","extension","actionData","errors"]