refactor: unify session creation form into CreateSessionForm component

apps/web/src/components/instance-list.tsx

@@ -4,7 +4,6 @@ import { Icon } from "./icon";
 import type { ToolInstance } from "../api/sessions";
 import {
   checkInstanceHealth,
-  createInstance,
   deleteInstance,
   listInstances,
   recreateInstanceTunnel,
@@ -13,6 +12,7 @@ import {
   stopInstance,
 } from "../api/sessions";
 import type { ToolType } from "../api/tool_types";
+import { CreateSessionForm } from "./create-session-form";
 
 const API_BASE_URL = import.meta.env.VITE_API_BASE_URL ?? "http://localhost:8000";
 
@@ -27,8 +27,6 @@ export const InstanceList = ({ projectId, repoId, toolTypes }: InstanceListProps
   const [instances, setInstances] = useState<ToolInstance[]>([]);
   const [loading, setLoading] = useState(false);
   const [showCreate, setShowCreate] = useState(false);
-  const [selectedToolType, setSelectedToolType] = useState("");
-  const [displayName, setDisplayName] = useState("");
   const [error, setError] = useState<string | null>(null);
   
   // Stop confirmation
@@ -83,18 +81,9 @@ export const InstanceList = ({ projectId, repoId, toolTypes }: InstanceListProps
     return () => clearInterval(interval);
   }, [instances, projectId, repoId]);
 
-  const handleCreate = async () => {
-    if (!selectedToolType) return;
-    setError(null);
-    try {
-      await createInstance(projectId, repoId, selectedToolType, displayName || undefined);
-      setShowCreate(false);
-      setSelectedToolType("");
-      setDisplayName("");
-      await loadInstances();
-    } catch {
-      setError("Failed to create instance");
-    }
+  const handleCreateSuccess = async () => {
+    setShowCreate(false);
+    await loadInstances();
   };
 
   const handleStart = async (instanceId: string) => {
@@ -309,48 +298,16 @@ export const InstanceList = ({ projectId, repoId, toolTypes }: InstanceListProps
         <div className="dialog-overlay" role="dialog" aria-modal="true">
           <div className="dialog">
             <h2>Launch Tool</h2>
-            <div className="stack">
-              <label className="form-field">
-                Tool Type
-                <select
-                  value={selectedToolType}
-                  onChange={(e) => setSelectedToolType(e.target.value)}
-                >
-                  <option value="">Select a tool...</option>
-                  {toolTypes.map((tool) => (
-                    <option key={tool.id} value={tool.id}>
-                      {tool.display_name}
-                    </option>
-                  ))}
-                </select>
-              </label>
-              <label className="form-field">
-                Display Name (optional)
-                <input
-                  type="text"
-                  value={displayName}
-                  onChange={(e) => setDisplayName(e.target.value)}
-                  placeholder="My Development Environment"
-                />
-              </label>
-              <div className="dialog-actions">
-                <button
-                  className="secondary-button"
-                  onClick={() => setShowCreate(false)}
-                  type="button"
-                >
-                  Cancel
-                </button>
-                <button
-                  className="primary-button"
-                  onClick={() => void handleCreate()}
-                  disabled={!selectedToolType}
-                  type="button"
-                >
-                  Launch
-                </button>
-              </div>
-            </div>
+            <CreateSessionForm
+              projects={[]}
+              repositories={[]}
+              toolTypes={toolTypes}
+              fixedProjectId={projectId}
+              fixedRepoId={repoId}
+              onSuccess={handleCreateSuccess}
+              onCancel={() => setShowCreate(false)}
+              submitLabel="Launch"
+            />
           </div>
         </div>
       )}