Changed "Run as Task" to use Switch instead of Checkbox (and use disabled state for required/forbidden).

Author: BobDickinson

docs/inspector-client-todo.md

@@ -116,3 +116,16 @@ Better forms (test tool, etc)
 - Use shared functionality from core forms support
 - Functionality (data types, arrays, arrays of objects, etc)
 - UX (cleaner, maybe ditch ink-forms, see if it can be styled better?)
+
+### Server port in-use behavior / bug
+
+- In dev mode (in v1 and v1.5) if the attempted (specified or default) port is in use, Vite will find the next available port and use that
+  - But we will still report that it is listening on the attempted port and will open a browser window at that URL (bug)
+- In prod mode, if the attempted (specified or default) port is in use, the server fails to run
+
+- We should decided what the port-in-use behavior should be and make it consistent between dev and prod - proposed:
+  - If port is specified via param or env var, only use that port (if in use, fail to start)
+  - If default port (6274), use first available starting at that value
+
+- This will require that we run Vite via API instead of spawning it (so we can get the resulting port)
+- It will also require progressive port listening logic for prod to mimic that behavior

web/src/components/ToolsTab.tsx

@@ -3,6 +3,7 @@ import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
 import { TabsContent } from "@/components/ui/tabs";
 import { Textarea } from "@/components/ui/textarea";
 import {
@@ -675,31 +676,26 @@ const ToolsTab = ({
                 <div className="flex items-center space-x-2">
                   {selectedTool && serverSupportsTaskToolCalls && (
                     <>
-                      {taskSupport === "forbidden" ? (
-                        <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
-                          Run as Task: Forbidden
-                        </span>
-                      ) : taskSupport === "required" ? (
-                        <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
-                          Run as Task: Required
-                        </span>
-                      ) : (
-                        <>
-                          <Checkbox
-                            id="run-as-task"
-                            checked={runAsTask}
-                            onCheckedChange={(checked) =>
-                              setRunAsTask(checked === true)
-                            }
-                          />
-                          <Label
-                            htmlFor="run-as-task"
-                            className="text-sm font-medium text-gray-700 dark:text-gray-300 cursor-pointer"
-                          >
-                            Run as task
-                          </Label>
-                        </>
-                      )}
+                      <Switch
+                        id="run-as-task"
+                        checked={effectiveRunAsTask}
+                        disabled={
+                          taskSupport === "forbidden" ||
+                          taskSupport === "required"
+                        }
+                        onCheckedChange={(checked) =>
+                          setRunAsTask(checked === true)
+                        }
+                      />
+                      <Label
+                        htmlFor="run-as-task"
+                        className={cn(
+                          "text-sm font-medium text-gray-700 dark:text-gray-300",
+                          taskSupport === "optional" && "cursor-pointer",
+                        )}
+                      >
+                        Run as task
+                      </Label>
                     </>
                   )}
                   <Button

web/src/components/__tests__/ToolsTab.test.tsx

@@ -177,14 +177,12 @@ describe("ToolsTab", () => {
       execution: { taskSupport: "required" },
     };
 
-    it("should not show Run as task checkbox when server does not support task tool calls", () => {
+    it("should not show Run as task switch when server does not support task tool calls", () => {
       renderToolsTab({
         selectedTool: mockTools[0],
         serverSupportsTaskToolCalls: false,
       });
-      expect(
-        screen.queryByRole("checkbox", { name: /run as task/i }),
-      ).toBeNull();
+      expect(screen.queryByRole("switch", { name: /run as task/i })).toBeNull();
     });
 
     it("should show Run as task control when server supports task tool calls and a tool is selected", () => {
@@ -193,56 +191,60 @@ describe("ToolsTab", () => {
         serverSupportsTaskToolCalls: true,
       });
       expect(
-        screen.getByRole("checkbox", { name: /run as task/i }),
+        screen.getByRole("switch", { name: /run as task/i }),
       ).toBeInTheDocument();
     });
 
-    it("should show checkbox unchecked and enabled when tool taskSupport is optional", async () => {
+    it("should show switch unchecked and enabled when tool taskSupport is optional", async () => {
       renderToolsTab({
         selectedTool: toolWithOptionalTask,
         serverSupportsTaskToolCalls: true,
       });
-      const checkbox = screen.getByRole("checkbox", { name: /run as task/i });
-      expect(checkbox).not.toBeChecked();
-      expect(checkbox).not.toBeDisabled();
+      const runAsTaskSwitch = screen.getByRole("switch", {
+        name: /run as task/i,
+      });
+      expect(runAsTaskSwitch).not.toBeChecked();
+      expect(runAsTaskSwitch).not.toBeDisabled();
     });
 
-    it("should show Run as Task: Forbidden when tool taskSupport is forbidden", () => {
+    it("should show switch off and disabled when tool taskSupport is forbidden", () => {
       renderToolsTab({
         selectedTool: toolWithForbiddenTask,
         serverSupportsTaskToolCalls: true,
       });
-      expect(screen.getByText(/run as task: forbidden/i)).toBeInTheDocument();
-      expect(
-        screen.queryByRole("checkbox", { name: /run as task/i }),
-      ).toBeNull();
+      const runAsTaskSwitch = screen.getByRole("switch", {
+        name: /run as task/i,
+      });
+      expect(runAsTaskSwitch).not.toBeChecked();
+      expect(runAsTaskSwitch).toBeDisabled();
     });
 
-    it("should show Run as Task: Required when tool taskSupport is required", () => {
+    it("should show switch on and disabled when tool taskSupport is required", () => {
       renderToolsTab({
         selectedTool: toolWithRequiredTask,
         serverSupportsTaskToolCalls: true,
       });
-      expect(screen.getByText(/run as task: required/i)).toBeInTheDocument();
-      expect(
-        screen.queryByRole("checkbox", { name: /run as task/i }),
-      ).toBeNull();
+      const runAsTaskSwitch = screen.getByRole("switch", {
+        name: /run as task/i,
+      });
+      expect(runAsTaskSwitch).toBeChecked();
+      expect(runAsTaskSwitch).toBeDisabled();
     });
 
-    it("should call callTool with runAsTask true when optional and checkbox is checked and Run Tool clicked", async () => {
+    it("should call callTool with runAsTask true when optional and switch is on and Run Tool clicked", async () => {
       const mockCallTool = vi.fn(async () => {});
       renderToolsTab({
         selectedTool: toolWithOptionalTask,
         serverSupportsTaskToolCalls: true,
         callTool: mockCallTool,
       });
-      const runAsTaskCheckbox = screen.getByRole("checkbox", {
+      const runAsTaskSwitch = screen.getByRole("switch", {
         name: /run as task/i,
       });
       await act(async () => {
-        fireEvent.click(runAsTaskCheckbox);
+        fireEvent.click(runAsTaskSwitch);
       });
-      expect(runAsTaskCheckbox).toBeChecked();
+      expect(runAsTaskSwitch).toBeChecked();
       const runButton = screen.getByRole("button", { name: /run tool/i });
       await act(async () => {
         fireEvent.click(runButton);