diff --git a/apps/web/src/components/start-tool-modal.tsx b/apps/web/src/components/start-tool-modal.tsx index 67bcdd0..2a9f159 100644 --- a/apps/web/src/components/start-tool-modal.tsx +++ b/apps/web/src/components/start-tool-modal.tsx @@ -2,6 +2,8 @@ import { useState } from "react"; import { Icon } from "./icon"; +import { listToolTypes, type ToolType } from "../api/tool_types"; +import { useAsyncData } from "../hooks/use-async-data"; import type { Workspace } from "../types/workspace"; export interface StartToolModalProps { @@ -20,6 +22,12 @@ export function StartToolModal({ const [submitting, setSubmitting] = useState(false); const [error, setError] = useState(null); + const { + data: toolTypes, + status, + error: loadError, + } = useAsyncData(listToolTypes, []); + const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); if (!toolTypeId) { @@ -56,13 +64,21 @@ export function StartToolModal({ id="tool-type" value={toolTypeId} onChange={(e) => setToolTypeId(e.target.value)} - disabled={submitting} + disabled={submitting || status === "loading"} > - - - + {toolTypes?.map((tt) => ( + + ))} + {status === "loading" && ( + Loading tools... + )} + {loadError && ( + {loadError} + )}
@@ -88,7 +104,7 @@ export function StartToolModal({