Val Town Code SearchReturn to Val Town

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.
22
23Use your 'requests' tool to debug all kinds of vals. It'll show you the logs made during the file execution and the attributes associated it, including headers, http status, run time, error messages and error stack traces. 

256        </>
257      );
258    case "fetch":
259      return (
260        <Details
269          summary={(
270            <>
271              <div>fetch:</div>
272              <div>{args?.valPath}</div>
273              <div>{args?.urlPath || "/"}</div>
275          )}>
276          {result?.type === "success" ? (
277            <div className="fetch-result">
278              <div className="fetch-header">
279                <span className={`status-badge ${result.data.status >= 200 && result.data.status < 300 ? 'success' : 
280                                               result.data.status >= 300 && result.data.status < 400 ? 'redirect' : 
284                <span className="response-time">{result.data.responseTime}ms</span>
285              </div>
286              <div className="fetch-section">
287                <h4>Headers</h4>
288                <pre className="fetch-headers">{JSON.stringify(result.data.headers, null, 2)}</pre>
289              </div>
290              <div className="fetch-section">
291                <h4>Response Body</h4>
292                <pre className="fetch-body">
293                  {typeof result.data.body === 'object' 
294                    ? JSON.stringify(result.data.body, null, 2) 
298            </div>
299          ) : (
300            <div className="fetch-error">
301              <h4>Error</h4>
302              <pre>{result?.message || "Unknown error"}</pre>

27
28// This is the entry point for HTTP vals
29export default app.fetch;
30

1import { makeChangeValTypeTool } from "./change-val-type.ts";
2import { makeFetchTool } from "./fetch.ts";
3import { makeTextEditorTool } from "./text-editor.ts";
4import { makeTracesTool } from "./traces.ts";
8  makeTextEditorTool, 
9  makeChangeValTypeTool, 
10  makeFetchTool,
11  makeTracesTool,
12  thinkTool,

11 * Creates a tool for making HTTP requests to vals in a Val Town project
12 */
13export const makeFetchTool = (
14  { bearerToken, project, branch_id }: { bearerToken?: string; project?: any; branch_id?: string } = {},
15) =>
16  tool({
17    name: "fetch",
18    description: "Make an HTTP request to a Val Town val and return the response. Useful for testing HTTP vals. The HTTP response body will be truncated to 5000 characters.",
19    parameters: z.object({
68        return {
69          type: "error",
70          message: `Error fetching val at path '${valPath}': ${error.message}`,
71        };
72      }
83        return {
84          type: "error",
85          message: `The val at path '${valPath}' is not an HTTP val. Only HTTP vals can be called with fetch.`,
86        };
87      }
111      let response;
112      try {
113        response = await fetch(valEndpoint + urlPath, options);
114      } catch (error: any) {
115        // Return error information

239    
240    // Inject data to avoid extra round-trips
241    const initialData = await fetchInitialData();
242    const dataScript = `<script>
243      window.__INITIAL_DATA__ = ${JSON.stringify(initialData)};
286
2875. **API Design:**
288   - `fetch` handler is the entry point for HTTP vals
289   - Run the Hono app with `export default app.fetch // This is the entry point for HTTP vals`
290
291

7  const [loading, setLoading] = useState(true);
8
9  const fetchBalance = async () => {
10    try {
11      const response = await fetch("/api/credit-balance");
12      if (response.ok) {
13        const data = await response.json();
15        setBalance(data.balance);
16      } else {
17        console.error("Failed to fetch balance");
18      }
19    } catch (err) {
20      console.error("Error fetching balance:", err);
21    } finally {
22      setLoading(false);
25
26  useEffect(() => {
27    fetchBalance();
28  }, []);
29

51        files={project.data?.files}
52        branchId={branchId}
53        refetch={project.refetch}
54      />
55    </ProjectContext.Provider>
61  files,
62  branchId,
63  refetch,
64}: {
65  project: any;
66  files: any[];
67  branchId: string;
68  refetch: () => void;
69}) {
70  const [images, setImages] = useState<(string|null)[]>([]);
71  const [selectedFiles, setSelectedFiles] = useState<string[]>([]);
72  const { audio, user } = useContext(AppContext);
73  const { balance, loading: balanceLoading, refetch: refetchBalance } = useCreditBalance();
74
75  const {
94  useLoadingFavicon(running);
95
96  // Track when requests end and refetch balance
97  const prevRunning = useRef(running);
98  useEffect(() => {
99    // If running changed from true to false, request just ended
100    if (prevRunning.current === true && running === false) {
101      refetchBalance();
102    }
103    prevRunning.current = running;
104  }, [running, refetchBalance]);
105
106  // Auto-poll balance every 4 seconds when credits are insufficient
110    if (hasInsufficientCredits) {
111      const intervalId = setInterval(() => {
112        refetchBalance();
113      }, 4000); // 4 seconds
114      
115      return () => clearInterval(intervalId);
116    }
117  }, [balanceLoading, balance, refetchBalance]);
118
119  useEffect(() => {
120    if (!messages?.length) return;
121    let last = messages.at(-1);
122    if (shouldRefetch(last)) {
123      refetch();
124    }
125  }, [messages]);
196                <button
197                  onClick={() => {
198                    refetchBalance();
199                  }}
200                  className="icon-button"
227}
228
229function shouldRefetch (message) {
230  for (let i = 0; i < message?.parts?.length; i++) {
231    let part = message.parts[i];

32        return;
33      }
34      branches.refetch();
35      if (res?.branch?.id) {
36        navigate(`/chat/${projectId}/branch/${res.branch.id}`);

29    }
30
31    const response = await fetch(url, {
32        ...options,
33        headers: {