From 06a4a278803f2cbb0181729f862cf90e88113f9b Mon Sep 17 00:00:00 2001
From: Alex Blank <alexblank@fastmail.com>
Date: Mon, 1 Jun 2026 20:36:31 +0200
Subject: [PATCH] fix: StartToolModal hardcoded tool types caused UUID parse
 error
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Fetch real tool types from API instead of hardcoded string names
- Use actual tool type UUID (id) as select value
- Remove fake 'terminal' option — terminal is a feature, not a tool type
- Show display_name in dropdown, handle loading/error states

Quality gates: tsc --noEmit clean
---
 apps/web/src/components/start-tool-modal.tsx | 26 ++++++++++++++++----
 1 file changed, 21 insertions(+), 5 deletions(-)

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<string | null>(null);
 
+	const {
+		data: toolTypes,
+		status,
+		error: loadError,
+	} = useAsyncData<ToolType[]>(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"}
 						>
 							<option value="">Select a tool...</option>
-							<option value="code-server">Code Server</option>
-							<option value="jupyter-notebook">Jupyter Notebook</option>
-							<option value="terminal">Terminal</option>
+							{toolTypes?.map((tt) => (
+								<option key={tt.id} value={tt.id}>
+									{tt.display_name}
+								</option>
+							))}
 						</select>
+						{status === "loading" && (
+							<span className="muted">Loading tools...</span>
+						)}
+						{loadError && (
+							<span className="error-text">{loadError}</span>
+						)}
 					</div>
 					<div className="form-group">
 						<label htmlFor="config-profile">Config Profile (optional)</label>
@@ -88,7 +104,7 @@ export function StartToolModal({
 						<button
 							type="submit"
 							className="btn btn-primary"
-							disabled={submitting}
+							disabled={submitting || status !== "ready"}
 						>
 							{submitting ? "Starting..." : "Start Tool"}
 						</button>