216
217 // Inject data to avoid extra round-trips
218 const initialData = await fetchInitialData();
219 const dataScript = `<script>
220 window.__INITIAL_DATA__ = ${JSON.stringify(initialData)};
263
2645. **API Design:**
265 - `fetch` handler is the entry point for HTTP vals
266 - Run the Hono app with `export default app.fetch // This is the entry point for HTTP vals`
267
2686. **Hono Peculiarities:**
1/** fetch tool styles */
2.fetch-result {
3 display: flex;
4 flex-direction: column;
6}
7
8.fetch-header {
9 display: flex;
10 justify-content: space-between;
45}
46
47.fetch-section {
48 margin-top: var(--space-2);
49}
50
51.fetch-section h4 {
52 margin-bottom: var(--space-1);
53 font-size: var(--font-size-5);
54}
55
56.fetch-headers, .fetch-body {
57 font-size: var(--font-size-6);
58 background-color: var(--slate-50);
63}
64
65.fetch-error {
66 color: var(--red);
67}
68
69.fetch-error h4 {
70 margin-bottom: var(--space-1);
71 font-size: var(--font-size-5);
72}
73
74.fetch-error pre {
75 font-size: var(--font-size-6);
76 background-color: var(--red-light);
13 startTrackingUsage,
14} from "../database/queries.tsx";
15import { makeChangeValTypeTool, makeFetchTool, makeTextEditorTool } from "../tools/index.ts";
16import fileWithLinesNumbers from "../utils/fileWithLinesNumbers.ts";
17
156 }
157
158 // If there are selected files, fetch their content and add them to the messages
159 if (selectedFiles && selectedFiles.length > 0) {
160 const vt = new ValTown({ bearerToken });
176 fileContents += `## File: ${filePath}\n\`\`\`\n${fileWithLinesNumbers(content)}\n\`\`\`\n\n`;
177 } catch (error) {
178 console.error(`Error fetching file ${filePath}:`, error);
179 fileContents += `## File: ${filePath}\nError: Could not fetch file content\n\n`;
180 }
181 }
220 // think: thinkTool,
221 change_val_type: makeChangeValTypeTool({ bearerToken, project, branch_id: branchId }),
222 fetch: makeFetchTool({ bearerToken, project, branch_id: branchId }),
223 },
224 maxSteps: 20,
56 row.parentNode.insertBefore(newRow, row.nextSibling);
57
58 // Fetch the inference calls data
59 fetch('/api/inference-calls?usage_id=' + usageId)
60 .then(response => response.json())
61 .then(data => {
8
9- **AI-Assisted Editing**: Chat with Claude 4 Sonnet about your code and let it make changes directly to your project files
10- **Fetch tool**: Townie is able to make HTTP calls to your HTTP services to test them and continue iterating
11- **Branch Management**: View, select, and create branches without leaving the app
12- **Sound Notifications**: Get alerted when Claude finishes responding
30 return c.json({ files: files.data });
31 } catch (error) {
32 console.error("Error fetching project files:", error);
33 return Response.json({ error: "Failed to fetch project files" }, { status: 500 });
34 }
35});
21 return c.json({ branches: branches.data });
22 } catch (error) {
23 console.error("Error fetching branches:", error);
24 return Response.json({ error: "Failed to fetch branches" }, { status: 500 });
25 }
26});
19solution that changes as little code as possible.
20
21Use your 'fetch' tool to debug HTTP vals making requests to them and examining the responses.
219 </>
220 );
221 case "fetch":
222 return (
223 <Details
232 summary={(
233 <>
234 <div>fetch:</div>
235 <div>{args?.valPath}</div>
236 <div>{args?.urlPath || "/"}</div>
238 )}>
239 {result?.type === "success" ? (
240 <div className="fetch-result">
241 <div className="fetch-header">
242 <span className={`status-badge ${result.data.status >= 200 && result.data.status < 300 ? 'success' :
243 result.data.status >= 300 && result.data.status < 400 ? 'redirect' :
247 <span className="response-time">{result.data.responseTime}ms</span>
248 </div>
249 <div className="fetch-section">
250 <h4>Headers</h4>
251 <pre className="fetch-headers">{JSON.stringify(result.data.headers, null, 2)}</pre>
252 </div>
253 <div className="fetch-section">
254 <h4>Response Body</h4>
255 <pre className="fetch-body">
256 {typeof result.data.body === 'object'
257 ? JSON.stringify(result.data.body, null, 2)
261 </div>
262 ) : (
263 <div className="fetch-error">
264 <h4>Error</h4>
265 <pre>{result?.message || "Unknown error"}</pre>
212});
213
214export default app.fetch;