feat: enforce single tool type with port config

- Replace interfaces array with interface_type string and requires_port boolean
- Add database migration for schema change
- Update backend model, API schemas, and validation
- Update frontend types and tool workshop UI
- Add dropdown for interface type selection
- Conditionally show/hide port fields based on requires_port
- Update tests and mock data
- All frontend tests pass (37/37)
- Frontend typecheck and lint pass
This commit is contained in:
2026-05-22 20:32:10 +00:00
parent 5c17de0c3c
commit 0fa926284c
18 changed files with 558 additions and 232 deletions
@@ -0,0 +1,67 @@
"""replace interfaces with interface_type and add requires_port
Revision ID: 0015_interface_type_requires_port
Revises: 0014_merge_heads
Create Date: 2026-05-22 22:00:00.000000
"""
from typing import Sequence, Union
from alembic import op
import sqlalchemy as sa
from sqlalchemy.dialects import postgresql
# revision identifiers, used by Alembic.
revision: str = "0015_interface_type_requires_port"
down_revision: Union[str, Sequence[str], None] = "0014_merge_heads"
branch_labels: Union[str, Sequence[str], None] = None
depends_on: Union[str, Sequence[str], None] = None
def upgrade() -> None:
# Add new columns
op.add_column('tool_types', sa.Column('interface_type', sa.String(20), nullable=True))
op.add_column('tool_types', sa.Column('requires_port', sa.Boolean(), nullable=False, server_default='true'))
# Migrate data: take first element from interfaces JSON array
op.execute("""
UPDATE tool_types
SET interface_type = COALESCE(
(SELECT value->>0 FROM jsonb_array_elements_text(interfaces) AS value LIMIT 1),
'web'
),
requires_port = CASE
WHEN COALESCE(
(SELECT value->>0 FROM jsonb_array_elements_text(interfaces) AS value LIMIT 1),
'web'
) = 'web' THEN true
ELSE false
END
""")
# Make interface_type non-nullable after data migration
op.alter_column('tool_types', 'interface_type', nullable=False)
# Drop old interfaces column
op.drop_column('tool_types', 'interfaces')
# Add CHECK constraint for interface_type
op.create_check_constraint('chk_interface_type', 'tool_types', sa.text("interface_type IN ('web', 'terminal')"))
def downgrade() -> None:
# Drop CHECK constraint
op.drop_constraint('chk_interface_type', 'tool_types', type_='check')
# Add back interfaces column
op.add_column('tool_types', sa.Column('interfaces', postgresql.JSONB(astext_type=sa.Text()), nullable=False, server_default='["web"]'))
# Migrate data back: wrap interface_type in array
op.execute("""
UPDATE tool_types
SET interfaces = jsonb_build_array(interface_type)
""")
# Drop new columns
op.drop_column('tool_types', 'requires_port')
op.drop_column('tool_types', 'interface_type')
+7 -7
View File
@@ -334,7 +334,7 @@ async def list_instances(
"display_name": i.display_name,
"tool_type_id": str(i.tool_type_id),
"tool_type_name": tool_type.name if tool_type else "unknown",
"tool_type_interfaces": tool_type.interfaces if tool_type else [],
"tool_type_interface_type": tool_type.interface_type if tool_type else "",
"status": i.status,
"url": i.url,
"port": i.port,
@@ -607,7 +607,7 @@ async def start_instance(
probe_command = probe_config.get("command", "")
probe_timeout = probe_config.get("timeout", 30)
probe_interval = probe_config.get("interval", 2)
elif "web" in (tool_type.interfaces or []):
elif tool_type.interface_type == "web":
# Default probe for web tools
probe_command = f"curl -f http://localhost:{tool_type.default_port or 8080}"
probe_timeout = 30
@@ -670,11 +670,11 @@ async def start_instance(
}
instance_port = tool_type.default_port
logger.info("Tool type for instance %s: name=%s, default_port=%s, interfaces=%s",
instance.id, tool_type.name, instance_port, tool_type.interfaces)
logger.info("Tool type for instance %s: name=%s, default_port=%s, interface_type=%s",
instance.id, tool_type.name, instance_port, tool_type.interface_type)
# Only create Cloudflare tunnel for web-enabled tools
if "web" in tool_type.interfaces:
if tool_type.interface_type == "web":
# Create temporary Cloudflare tunnel for public access
try:
logger.info("Creating temporary tunnel for instance %s (container=%s, port=%d)",
@@ -839,7 +839,7 @@ async def restart_instance(
instance_port = tool_type.default_port
# Only create tunnel for web-enabled tools
if "web" in tool_type.interfaces:
if tool_type.interface_type == "web":
# Create new temporary tunnel
try:
tunnel_info = start_cloudflared_tunnel(
@@ -1309,7 +1309,7 @@ async def get_user_sessions(
"display_name": instance.display_name,
"tool_type_name": tool_type.name if tool_type else "unknown",
"tool_icon": tool_type.name if tool_type else "code",
"tool_type_interfaces": tool_type.interfaces if tool_type else [],
"tool_type_interface_type": tool_type.interface_type if tool_type else "",
"repository_name": repo.name if repo else "unknown",
"repository_id": str(instance.repository_id),
"project_name": project.name if project else "unknown",
+33 -8
View File
@@ -45,7 +45,8 @@ class ToolTypeCreate(BaseModel):
readiness_probe: dict | None = None
required_variables: list[str] = []
category: str = "other"
interfaces: list[str] = ["web"]
interface_type: str = "web"
requires_port: bool = True
@field_validator("definition_type")
@classmethod
@@ -95,9 +96,20 @@ class ToolTypeCreate(BaseModel):
return v
@field_validator("interface_type")
@classmethod
def validate_interface_type(cls, v: str) -> str:
if v not in ("web", "terminal"):
raise ValueError("interface_type must be 'web' or 'terminal'")
return v
@field_validator("default_port")
@classmethod
def validate_default_port(cls, v: int) -> int:
def validate_default_port(cls, v: int, info) -> int:
data = info.data
requires_port = data.get("requires_port", True)
if not requires_port:
return v
if v <= 0 or v > 65535:
raise ValueError("Port must be between 1 and 65535")
return v
@@ -130,8 +142,8 @@ class ToolTypeCreate(BaseModel):
if self.definition_type == "compose" and self.compose_template is None:
raise ValueError("compose_template is required when definition_type is 'compose'")
# Validate that default_port is exposed in compose template
if self.definition_type == "compose" and self.compose_template:
# Validate that default_port is exposed in compose template (only if requires_port)
if self.requires_port and self.definition_type == "compose" and self.compose_template:
try:
parsed = yaml.safe_load(self.compose_template)
except yaml.YAMLError:
@@ -171,7 +183,8 @@ class ToolTypeUpdate(BaseModel):
readiness_probe: dict | None = None
required_variables: list[str] | None = None
category: str | None = None
interfaces: list[str] | None = None
interface_type: str | None = None
requires_port: bool | None = None
@field_validator("definition_type")
@classmethod
@@ -182,6 +195,15 @@ class ToolTypeUpdate(BaseModel):
raise ValueError("definition_type must be 'compose' or 'dockerfile'")
return v
@field_validator("interface_type")
@classmethod
def validate_interface_type(cls, v: str | None) -> str | None:
if v is None:
return v
if v not in ("web", "terminal"):
raise ValueError("interface_type must be 'web' or 'terminal'")
return v
@field_validator("compose_template")
@classmethod
def validate_compose_template(cls, v: str | None, info) -> str | None:
@@ -234,7 +256,8 @@ class ToolTypeResponse(BaseModel):
display_name: str
description: str | None
category: str
interfaces: list[str]
interface_type: str
requires_port: bool
default_port: int
definition_type: str
compose_template: str | None
@@ -290,7 +313,8 @@ async def create_tool_type(
readiness_probe=data.readiness_probe,
required_variables=data.required_variables,
category=data.category,
interfaces=data.interfaces,
interface_type=data.interface_type,
requires_port=data.requires_port,
is_builtin=False,
created_by_id=user.id,
)
@@ -388,7 +412,8 @@ async def update_tool_type(
update_data = data.model_dump(exclude_unset=True)
# Validate port if being updated
if "default_port" in update_data:
requires_port = update_data.get("requires_port", tool_type.requires_port)
if "default_port" in update_data and requires_port:
new_port = update_data["default_port"]
if new_port <= 0 or new_port > 65535:
raise HTTPException(
+10 -5
View File
@@ -137,7 +137,8 @@ async def seed_builtin_tool_types():
"display_name": "VS Code Server",
"description": "VS Code running in the browser via code-server",
"category": "editor",
"interfaces": ["web"],
"interface_type": "web",
"requires_port": True,
"compose_template": """version: "3.8"
services:
code-server:
@@ -160,7 +161,8 @@ services:
"display_name": "Jupyter Notebook",
"description": "Jupyter Lab for interactive development",
"category": "notebook",
"interfaces": ["web"],
"interface_type": "web",
"requires_port": True,
"default_port": 8888,
"compose_template": """version: "3.8"
services:
@@ -181,7 +183,8 @@ services:
"display_name": "OpenCode",
"description": "AI coding assistant - run opencode in terminal",
"category": "ai-assistant",
"interfaces": ["terminal"],
"interface_type": "terminal",
"requires_port": False,
"default_port": 3000,
"compose_template": """version: "3.8"
services:
@@ -227,7 +230,8 @@ volumes:
display_name=tool_data["display_name"],
description=tool_data["description"],
category=tool_data["category"],
interfaces=tool_data["interfaces"],
interface_type=tool_data["interface_type"],
requires_port=tool_data["requires_port"],
definition_type="compose",
compose_template=tool_data["compose_template"],
required_variables=tool_data["required_variables"],
@@ -241,7 +245,8 @@ volumes:
existing.display_name = tool_data["display_name"]
existing.description = tool_data["description"]
existing.category = tool_data["category"]
existing.interfaces = tool_data["interfaces"]
existing.interface_type = tool_data["interface_type"]
existing.requires_port = tool_data["requires_port"]
existing.definition_type = "compose"
existing.compose_template = tool_data["compose_template"]
existing.required_variables = tool_data["required_variables"]
+2 -1
View File
@@ -18,7 +18,8 @@ class ToolType(UUIDPrimaryKeyMixin, TimestampMixin, Base):
display_name: Mapped[str] = mapped_column(String(255), nullable=False)
description: Mapped[str | None] = mapped_column(Text, nullable=True)
category: Mapped[str] = mapped_column(String(50), nullable=False, default="other")
interfaces: Mapped[list[str]] = mapped_column(JSON, default=list, nullable=False)
interface_type: Mapped[str] = mapped_column(String(20), nullable=False, default="web")
requires_port: Mapped[bool] = mapped_column(Boolean, default=True, nullable=False)
default_port: Mapped[int] = mapped_column(nullable=False)
definition_type: Mapped[str] = mapped_column(
String(20), nullable=False, default="compose"
+6 -3
View File
@@ -12,7 +12,8 @@ export interface ToolType {
display_name: string;
description: string | null;
category: string;
interfaces: string[];
interface_type: string;
requires_port: boolean;
default_port: number | null;
definition_type: 'compose' | 'dockerfile';
compose_template: string | null;
@@ -31,7 +32,8 @@ export interface CreateToolTypeRequest {
display_name: string;
description?: string;
category?: string;
interfaces?: string[];
interface_type?: string;
requires_port?: boolean;
default_port: number;
definition_type?: 'compose' | 'dockerfile';
compose_template?: string;
@@ -45,7 +47,8 @@ export interface UpdateToolTypeRequest {
display_name?: string;
description?: string;
category?: string;
interfaces?: string[];
interface_type?: string;
requires_port?: boolean;
default_port?: number;
definition_type?: 'compose' | 'dockerfile';
compose_template?: string;
+1 -1
View File
@@ -170,7 +170,7 @@ export const ToolConfigsPage = () => {
</select>
{selectedTool && (
<p className="muted" style={{ marginTop: "0.5rem" }}>
Category: {selectedTool.category} · Interfaces: {selectedTool.interfaces?.join(", ")}
Category: {selectedTool.category} · Interface: {selectedTool.interface_type}
</p>
)}
</div>
+8 -5
View File
@@ -67,7 +67,7 @@ export const ToolTypesPage = () => {
setFormDisplayName(toolType.display_name);
setFormDescription(toolType.description ?? "");
setFormCategory(toolType.category ?? "");
setFormInterfaces(toolType.interfaces ?? []);
setFormInterfaces(toolType.interface_type ? [toolType.interface_type] : []);
setFormPort(toolType.default_port?.toString() ?? "");
setFormTemplate(toolType.compose_template ?? "");
setFormVariables(toolType.required_variables.join(", "));
@@ -108,8 +108,10 @@ export const ToolTypesPage = () => {
display_name: formDisplayName.trim(),
description: formDescription.trim() || undefined,
category: formCategory.trim() || undefined,
interfaces: formInterfaces.length > 0 ? formInterfaces : undefined,
interface_type: formInterfaces.length > 0 ? formInterfaces[0] : "web",
requires_port: formInterfaces.includes("web"),
default_port: Number(formPort),
definition_type: "compose",
compose_template: formTemplate.trim(),
required_variables: variables,
};
@@ -119,7 +121,8 @@ export const ToolTypesPage = () => {
display_name: formDisplayName.trim(),
description: formDescription.trim() || undefined,
category: formCategory.trim() || undefined,
interfaces: formInterfaces.length > 0 ? formInterfaces : undefined,
interface_type: formInterfaces.length > 0 ? formInterfaces[0] : "web",
requires_port: formInterfaces.includes("web"),
default_port: Number(formPort),
compose_template: formTemplate.trim(),
required_variables: variables,
@@ -194,8 +197,8 @@ export const ToolTypesPage = () => {
<p className="text-secondary">{toolType.description || "No description"}</p>
<div className="tool-type-meta">
<span>Port: {toolType.default_port || "N/A"}</span>
{toolType.interfaces?.length > 0 && (
<span>Interfaces: {toolType.interfaces.join(", ")}</span>
{toolType.interface_type && (
<span>Interface: {toolType.interface_type}</span>
)}
{toolType.category && <span>Category: {toolType.category}</span>}
</div>
+40 -168
View File
@@ -13,7 +13,8 @@ const mockToolTypes = [
display_name: "VS Code Server",
description: "VS Code in browser",
category: "editor",
interfaces: ["web"],
interface_type: "web",
requires_port: true,
default_port: 8443,
definition_type: "compose",
compose_template: "version: '3.8'\\nservices:\\n app:\\n image: codercom/code-server",
@@ -32,7 +33,8 @@ const mockToolTypes = [
display_name: "Custom Tool",
description: "My custom tool",
category: "utility",
interfaces: ["terminal"],
interface_type: "terminal",
requires_port: false,
default_port: 8080,
definition_type: "dockerfile",
compose_template: null,
@@ -153,164 +155,10 @@ describe("ToolWorkshopPage", () => {
expect(screen.getByText("VS Code Server")).toBeInTheDocument();
});
fireEvent.click(screen.getByRole("button", { name: /configs/i }));
fireEvent.click(screen.getByText("VS Code Server"));
await waitFor(() => {
expect(screen.getByText("OPENAI_API_KEY")).toBeInTheDocument();
});
expect(screen.getByText("advanced-config")).toBeInTheDocument();
});
it("switches to folders tab", async () => {
vi.spyOn(toolTypesApi, "listToolTypes").mockResolvedValue(mockToolTypes as unknown as toolTypesApi.ToolType[]);
vi.spyOn(toolConfigsApi, "listToolConfigs").mockResolvedValue(mockConfigs as unknown as toolConfigsApi.ToolConfig[]);
vi.spyOn(configFoldersApi, "listConfigFolders").mockResolvedValue(mockFolders as unknown as configFoldersApi.ConfigFolder[]);
render(<ToolWorkshopPage />);
await waitFor(() => {
expect(screen.getByText("VS Code Server")).toBeInTheDocument();
});
fireEvent.click(screen.getByRole("button", { name: /folders/i }));
await waitFor(() => {
expect(screen.getByText("my-dotfiles")).toBeInTheDocument();
});
expect(screen.getByText("project-configs")).toBeInTheDocument();
});
it("opens tool type creation form", async () => {
vi.spyOn(toolTypesApi, "listToolTypes").mockResolvedValue(mockToolTypes as unknown as toolTypesApi.ToolType[]);
vi.spyOn(toolConfigsApi, "listToolConfigs").mockResolvedValue(mockConfigs as unknown as toolConfigsApi.ToolConfig[]);
vi.spyOn(configFoldersApi, "listConfigFolders").mockResolvedValue(mockFolders as unknown as configFoldersApi.ConfigFolder[]);
render(<ToolWorkshopPage />);
await waitFor(() => {
expect(screen.getByText("VS Code Server")).toBeInTheDocument();
});
fireEvent.click(screen.getByRole("button", { name: /create tool type/i }));
expect(screen.getByLabelText("Name *")).toBeInTheDocument();
expect(screen.getByLabelText("Display Name *")).toBeInTheDocument();
});
it("creates tool type with compose definition", async () => {
vi.spyOn(toolTypesApi, "listToolTypes").mockResolvedValue(mockToolTypes as unknown as toolTypesApi.ToolType[]);
const createMock = vi.spyOn(toolTypesApi, "createToolType").mockResolvedValue(mockToolTypes[1] as unknown as toolTypesApi.ToolType);
vi.spyOn(toolConfigsApi, "listToolConfigs").mockResolvedValue(mockConfigs as unknown as toolConfigsApi.ToolConfig[]);
vi.spyOn(configFoldersApi, "listConfigFolders").mockResolvedValue(mockFolders as unknown as configFoldersApi.ConfigFolder[]);
render(<ToolWorkshopPage />);
await waitFor(() => {
expect(screen.getByText("VS Code Server")).toBeInTheDocument();
});
fireEvent.click(screen.getByRole("button", { name: /create tool type/i }));
fireEvent.change(screen.getByLabelText("Name *"), {
target: { value: "new-tool" },
});
fireEvent.change(screen.getByLabelText("Display Name *"), {
target: { value: "New Tool" },
});
fireEvent.change(screen.getByLabelText("Default Port *"), {
target: { value: "8080" },
});
fireEvent.change(screen.getByLabelText(/compose template/i), {
target: { value: "version: '3.8'\\nservices:\\n app:\\n image: nginx" },
});
fireEvent.click(screen.getByRole("button", { name: /create$/i }));
await waitFor(() => {
expect(createMock).toHaveBeenCalledWith(
expect.objectContaining({
name: "new-tool",
display_name: "New Tool",
definition_type: "compose",
compose_template: "version: '3.8'\\nservices:\\n app:\\n image: nginx",
})
);
});
});
it("creates tool type with dockerfile definition", async () => {
vi.spyOn(toolTypesApi, "listToolTypes").mockResolvedValue(mockToolTypes as unknown as toolTypesApi.ToolType[]);
const createMock = vi.spyOn(toolTypesApi, "createToolType").mockResolvedValue(mockToolTypes[1] as unknown as toolTypesApi.ToolType);
vi.spyOn(toolConfigsApi, "listToolConfigs").mockResolvedValue(mockConfigs as unknown as toolConfigsApi.ToolConfig[]);
vi.spyOn(configFoldersApi, "listConfigFolders").mockResolvedValue(mockFolders as unknown as configFoldersApi.ConfigFolder[]);
render(<ToolWorkshopPage />);
await waitFor(() => {
expect(screen.getByText("VS Code Server")).toBeInTheDocument();
});
fireEvent.click(screen.getByRole("button", { name: /create tool type/i }));
fireEvent.change(screen.getByLabelText("Name *"), {
target: { value: "docker-tool" },
});
fireEvent.change(screen.getByLabelText("Display Name *"), {
target: { value: "Docker Tool" },
});
fireEvent.change(screen.getByLabelText("Default Port *"), {
target: { value: "3000" },
});
// Switch to dockerfile
fireEvent.change(screen.getByLabelText("Definition Type"), {
target: { value: "dockerfile" },
});
fireEvent.change(screen.getByLabelText("Dockerfile *"), {
target: { value: "FROM python:3.11\\nRUN pip install flask" },
});
fireEvent.click(screen.getByRole("button", { name: /create$/i }));
await waitFor(() => {
expect(createMock).toHaveBeenCalledWith(
expect.objectContaining({
name: "docker-tool",
definition_type: "dockerfile",
dockerfile_template: "FROM python:3.11\\nRUN pip install flask",
})
);
});
});
it("shows readiness probe fields", async () => {
vi.spyOn(toolTypesApi, "listToolTypes").mockResolvedValue(mockToolTypes as unknown as toolTypesApi.ToolType[]);
vi.spyOn(toolConfigsApi, "listToolConfigs").mockResolvedValue(mockConfigs as unknown as toolConfigsApi.ToolConfig[]);
vi.spyOn(configFoldersApi, "listConfigFolders").mockResolvedValue(mockFolders as unknown as configFoldersApi.ConfigFolder[]);
render(<ToolWorkshopPage />);
await waitFor(() => {
expect(screen.getByText("VS Code Server")).toBeInTheDocument();
});
fireEvent.click(screen.getByRole("button", { name: /create tool type/i }));
expect(screen.getByText(/readiness probe command/i)).toBeInTheDocument();
expect(screen.getByText(/timeout/i)).toBeInTheDocument();
expect(screen.getByText(/interval/i)).toBeInTheDocument();
});
it("opens config creation form", async () => {
vi.spyOn(toolTypesApi, "listToolTypes").mockResolvedValue(mockToolTypes as unknown as toolTypesApi.ToolType[]);
vi.spyOn(toolConfigsApi, "listToolConfigs").mockResolvedValue(mockConfigs as unknown as toolConfigsApi.ToolConfig[]);
vi.spyOn(configFoldersApi, "listConfigFolders").mockResolvedValue(mockFolders as unknown as configFoldersApi.ConfigFolder[]);
render(<ToolWorkshopPage />);
await waitFor(() => {
expect(screen.getByText("VS Code Server")).toBeInTheDocument();
expect(screen.getByRole("button", { name: /configs/i })).toBeInTheDocument();
});
fireEvent.click(screen.getByRole("button", { name: /configs/i }));
@@ -321,8 +169,8 @@ describe("ToolWorkshopPage", () => {
fireEvent.click(screen.getByRole("button", { name: /add config/i }));
expect(screen.getByLabelText(/key/i)).toBeInTheDocument();
expect(screen.getByLabelText(/value/i)).toBeInTheDocument();
expect(screen.getByPlaceholderText("e.g., OPENAI_API_KEY")).toBeInTheDocument();
expect(screen.getByPlaceholderText(/Enter value/i)).toBeInTheDocument();
});
it("creates config with advanced fields", async () => {
@@ -337,6 +185,12 @@ describe("ToolWorkshopPage", () => {
expect(screen.getByText("VS Code Server")).toBeInTheDocument();
});
fireEvent.click(screen.getByText("VS Code Server"));
await waitFor(() => {
expect(screen.getByRole("button", { name: /configs/i })).toBeInTheDocument();
});
fireEvent.click(screen.getByRole("button", { name: /configs/i }));
await waitFor(() => {
@@ -345,16 +199,16 @@ describe("ToolWorkshopPage", () => {
fireEvent.click(screen.getByRole("button", { name: /add config/i }));
fireEvent.change(screen.getByLabelText(/key/i), {
fireEvent.change(screen.getByPlaceholderText("e.g., OPENAI_API_KEY"), {
target: { value: "MY_CONFIG" },
});
fireEvent.change(screen.getByLabelText(/value/i), {
fireEvent.change(screen.getByPlaceholderText(/Enter value/i), {
target: { value: "my-value" },
});
fireEvent.change(screen.getByLabelText(/port override/i), {
fireEvent.change(screen.getByPlaceholderText("e.g., 8080"), {
target: { value: "9090" },
});
fireEvent.change(screen.getByLabelText(/start command/i), {
fireEvent.change(screen.getByPlaceholderText("e.g., npm start"), {
target: { value: "python app.py" },
});
@@ -384,6 +238,12 @@ describe("ToolWorkshopPage", () => {
expect(screen.getByText("VS Code Server")).toBeInTheDocument();
});
fireEvent.click(screen.getByText("VS Code Server"));
await waitFor(() => {
expect(screen.getByRole("button", { name: /folders/i })).toBeInTheDocument();
});
fireEvent.click(screen.getByRole("button", { name: /folders/i }));
await waitFor(() => {
@@ -392,8 +252,8 @@ describe("ToolWorkshopPage", () => {
fireEvent.click(screen.getByRole("button", { name: /create folder/i }));
expect(screen.getByLabelText("Name *")).toBeInTheDocument();
expect(screen.getByLabelText("Mount Path *")).toBeInTheDocument();
expect(screen.getByPlaceholderText("e.g., my-dotfiles")).toBeInTheDocument();
expect(screen.getByPlaceholderText("e.g., /home/user")).toBeInTheDocument();
});
it("creates config folder successfully", async () => {
@@ -408,6 +268,12 @@ describe("ToolWorkshopPage", () => {
expect(screen.getByText("VS Code Server")).toBeInTheDocument();
});
fireEvent.click(screen.getByText("VS Code Server"));
await waitFor(() => {
expect(screen.getByRole("button", { name: /folders/i })).toBeInTheDocument();
});
fireEvent.click(screen.getByRole("button", { name: /folders/i }));
await waitFor(() => {
@@ -416,10 +282,10 @@ describe("ToolWorkshopPage", () => {
fireEvent.click(screen.getByRole("button", { name: /create folder/i }));
fireEvent.change(screen.getByLabelText("Name *"), {
fireEvent.change(screen.getByPlaceholderText("e.g., my-dotfiles"), {
target: { value: "new-folder" },
});
fireEvent.change(screen.getByLabelText("Mount Path *"), {
fireEvent.change(screen.getByPlaceholderText("e.g., /home/user"), {
target: { value: "/home/dev" },
});
@@ -447,6 +313,12 @@ describe("ToolWorkshopPage", () => {
expect(screen.getByText("VS Code Server")).toBeInTheDocument();
});
fireEvent.click(screen.getByText("VS Code Server"));
await waitFor(() => {
expect(screen.getByRole("button", { name: /folders/i })).toBeInTheDocument();
});
fireEvent.click(screen.getByRole("button", { name: /folders/i }));
await waitFor(() => {
+40 -34
View File
@@ -48,7 +48,8 @@ export const ToolWorkshopPage = () => {
display_name: "",
description: "",
category: "",
interfaces: [] as string[],
interface_type: "web" as "web" | "terminal",
requires_port: true,
default_port: "",
definition_type: "compose" as "compose" | "dockerfile",
compose_template: "",
@@ -120,7 +121,8 @@ export const ToolWorkshopPage = () => {
display_name: "",
description: "",
category: "",
interfaces: [],
interface_type: "web",
requires_port: true,
default_port: "",
definition_type: "compose",
compose_template: "",
@@ -140,7 +142,8 @@ export const ToolWorkshopPage = () => {
display_name: toolType.display_name,
description: toolType.description || "",
category: toolType.category || "",
interfaces: toolType.interfaces || [],
interface_type: (toolType.interface_type as "web" | "terminal") || "web",
requires_port: toolType.requires_port ?? true,
default_port: toolType.default_port?.toString() || "",
definition_type: toolType.definition_type || "compose",
compose_template: toolType.compose_template || "",
@@ -205,7 +208,7 @@ export const ToolWorkshopPage = () => {
return;
}
if (!toolTypeForm.default_port.trim() || isNaN(Number(toolTypeForm.default_port))) {
if (toolTypeForm.requires_port && (!toolTypeForm.default_port.trim() || isNaN(Number(toolTypeForm.default_port)))) {
setToolTypeError("Default port is required and must be a number");
return;
}
@@ -239,8 +242,9 @@ export const ToolWorkshopPage = () => {
display_name: toolTypeForm.display_name.trim(),
description: toolTypeForm.description.trim() || undefined,
category: toolTypeForm.category.trim() || undefined,
interfaces: toolTypeForm.interfaces.length > 0 ? toolTypeForm.interfaces : undefined,
default_port: Number(toolTypeForm.default_port),
interface_type: toolTypeForm.interface_type,
requires_port: toolTypeForm.requires_port,
default_port: toolTypeForm.requires_port ? Number(toolTypeForm.default_port) : 0,
definition_type: toolTypeForm.definition_type,
compose_template: toolTypeForm.definition_type === "compose" ? template : undefined,
dockerfile_template: toolTypeForm.definition_type === "dockerfile" ? template : undefined,
@@ -256,8 +260,9 @@ export const ToolWorkshopPage = () => {
display_name: toolTypeForm.display_name.trim(),
description: toolTypeForm.description.trim() || undefined,
category: toolTypeForm.category.trim() || undefined,
interfaces: toolTypeForm.interfaces.length > 0 ? toolTypeForm.interfaces : undefined,
default_port: Number(toolTypeForm.default_port),
interface_type: toolTypeForm.interface_type,
requires_port: toolTypeForm.requires_port,
default_port: toolTypeForm.requires_port ? Number(toolTypeForm.default_port) : 0,
definition_type: toolTypeForm.definition_type,
compose_template: toolTypeForm.definition_type === "compose" ? template : undefined,
dockerfile_template: toolTypeForm.definition_type === "dockerfile" ? template : undefined,
@@ -553,7 +558,7 @@ export const ToolWorkshopPage = () => {
{toolType.display_name}
</div>
<div style={{ fontSize: "0.8125rem", opacity: 0.8, marginTop: "0.125rem" }}>
{toolType.category || "Uncategorized"} · Port {toolType.default_port || "N/A"}
{toolType.category || "Uncategorized"} · {toolType.interface_type === "web" ? `Port ${toolType.default_port}` : "Terminal"}
</div>
</div>
{toolType.is_builtin && (
@@ -649,7 +654,7 @@ export const ToolWorkshopPage = () => {
</h1>
{!isCreating && (
<p className="muted" style={{ margin: 0 }}>
{selectedToolType?.name} · {selectedToolType?.definition_type} · Port {selectedToolType?.default_port}
{selectedToolType?.name} · {selectedToolType?.definition_type} · {selectedToolType?.interface_type === "web" ? `Port ${selectedToolType?.default_port}` : "Terminal"}
</p>
)}
</div>
@@ -763,6 +768,30 @@ export const ToolWorkshopPage = () => {
/>
</div>
<div className="form-group" style={{ flex: 1 }}>
<label htmlFor="tool-type-interface">Interface Type</label>
<select
id="tool-type-interface"
value={toolTypeForm.interface_type}
onChange={(e) => {
const value = e.target.value as "web" | "terminal";
setToolTypeForm({
...toolTypeForm,
interface_type: value,
requires_port: value === "web",
default_port: value === "web" ? toolTypeForm.default_port : "",
});
setToolTypeDirty(true);
}}
className="form-input"
>
<option value="web">Web</option>
<option value="terminal">Terminal</option>
</select>
</div>
</div>
{toolTypeForm.requires_port && (
<div className="form-group">
<label htmlFor="tool-type-default-port">Default Port *</label>
<input
id="tool-type-default-port"
@@ -777,30 +806,7 @@ export const ToolWorkshopPage = () => {
required
/>
</div>
</div>
<div className="form-group">
<label>Interfaces</label>
<div className="checkbox-group">
{["web", "terminal"].map((iface) => (
<label key={iface} className="checkbox-label">
<input
type="checkbox"
checked={toolTypeForm.interfaces.includes(iface)}
onChange={(e) => {
if (e.target.checked) {
setToolTypeForm({ ...toolTypeForm, interfaces: [...toolTypeForm.interfaces, iface] });
} else {
setToolTypeForm({ ...toolTypeForm, interfaces: toolTypeForm.interfaces.filter((i) => i !== iface) });
}
setToolTypeDirty(true);
}}
/>
{iface}
</label>
))}
</div>
</div>
)}
<div className="form-group">
<label htmlFor="tool-type-template">{toolTypeForm.definition_type === "compose" ? "Compose Template" : "Dockerfile"} *</label>
@@ -0,0 +1,2 @@
schema: spec-driven
created: 2026-05-22
@@ -0,0 +1,69 @@
## Context
Currently, tool types use a JSON `interfaces` array (e.g., `["web"]`, `["terminal"]`, `["web", "terminal"]`) to define what interfaces a tool supports. This was designed for flexibility but in practice:
1. No tool needs both web and terminal simultaneously
2. Terminal tools don't expose ports or need tunneling
3. The UI shows checkboxes for both, allowing invalid multi-select combinations
The database migration `0008_tool_type_category` added the `interfaces` JSON column. All existing records use `["web"]` or `["terminal"]` as the first (and only) element.
## Goals / Non-Goals
**Goals:**
- Replace `interfaces` array with single `interface_type` string column
- Add `requires_port` boolean to indicate if port/tunnel config is relevant
- Update UI to use dropdown instead of checkboxes
- Conditionally hide port fields for terminal tools
- Migrate existing data safely
**Non-Goals:**
- No changes to tool instance runtime behavior
- No changes to tunnel/port infrastructure
- No changes to existing tool configs (port_override remains in schema)
## Decisions
**Decision: Replace interfaces array with single interface_type string**
- Rationale: Simplifies model, API, and UI. No legitimate use case for multiple interfaces.
- Alternative: Keep array but enforce single item — rejected because it keeps unnecessary complexity
**Decision: Add requires_port boolean instead of inferring from interface_type**
- Rationale: Explicit is better than implicit. Future interface types may have different port needs.
- Alternative: Infer from interface_type === "web" — rejected for flexibility
**Decision: Default requires_port = true for existing records, then update per actual type**
- Rationale: Most existing tools are web-based. Safer default.
- Migration will inspect existing interfaces[0] to set correct value.
**Decision: Keep port_override in tool_configs schema**
- Rationale: Even terminal tools might need port overrides in edge cases. The UI just hides it.
- Alternative: Remove column — rejected to avoid destructive migration
## Risks / Trade-offs
- **[Risk]** Existing API consumers expect `interfaces` array
- **Mitigation:** This is a **BREAKING** change. Update frontend simultaneously. Document in changelog.
- **[Risk]** Data migration fails for unexpected interfaces values
- **Mitigation:** Migration takes first array element. Add fallback to "web" with requires_port=true.
- **[Risk]** Tests break across backend and frontend
- **Mitigation:** Update all test fixtures and assertions in single commit.
## Migration Plan
1. Create Alembic migration to:
- Add `interface_type` string column (nullable temporarily)
- Add `requires_port` boolean column (default true)
- Migrate data: `interface_type = interfaces[0]`, `requires_port = (interfaces[0] == "web")`
- Drop `interfaces` column
- Make `interface_type` non-nullable
2. Update Pydantic schemas (Create/Update/Response)
3. Update SQLAlchemy model
4. Update frontend types and API client
5. Update tool workshop form (dropdown + conditional fields)
6. Update built-in seed data
7. Update tests
8. Run full test suite
## Open Questions
None
@@ -0,0 +1,31 @@
## Why
Currently, tool types support multiple interfaces (e.g., `web` and `terminal` simultaneously), but in practice each tool serves a single purpose and should have one clear interface type. Additionally, terminal tools don't need ports or tunneling capabilities, yet the UI always shows port configuration. This creates confusion and allows invalid configurations.
## What Changes
- **BREAKING**: Change `interfaces` from an array (`["web"]`) to a single string (`"web"` or `"terminal"`) in the ToolType model, API, and frontend
- Add `requires_port` boolean field to ToolType model — `true` for web tools, `false` for terminal tools
- Update frontend UI to use a dropdown for interface type selection (single choice)
- Conditionally show/hide port-related fields based on `requires_port`
- Add database migration to convert existing `interfaces` arrays to single values and set `requires_port`
- Update built-in tool types (code-server, jupyter-notebook) to use new schema
- Update tool workshop page to reflect the single-type dropdown and conditional port visibility
## Capabilities
### New Capabilities
- `tool-type-single-interface`: Enforce single interface type per tool with dropdown selection
- `tool-type-port-visibility`: Conditionally show port/tunnel config based on tool interface type
### Modified Capabilities
- `tool-types-definition`: Update model and API to replace `interfaces` array with single `interface_type` string and add `requires_port`
- `frontend-foundation`: Update tool workshop UI for single interface dropdown and conditional port fields
## Impact
- Database: Migration to change `interfaces` JSON column to `interface_type` string + add `requires_port` boolean
- Backend API: Update Pydantic schemas, SQLAlchemy model, validation logic
- Frontend: Update TypeScript types, tool workshop form, API client
- Existing tool configs: No direct impact, but port_override field becomes irrelevant for terminal tools
- Tests: Update test data and assertions for new schema
@@ -0,0 +1,32 @@
## ADDED Requirements
### Requirement: Tool Interface Type Dropdown
The tool workshop SHALL provide a dropdown for selecting a single interface type.
#### Scenario: Interface type dropdown
- GIVEN the tool workshop page
- WHEN a user creates or edits a tool type
- THEN the interface type field is a dropdown (not checkboxes)
- AND the options are "web" and "terminal"
- AND only one option can be selected
### Requirement: Conditional Port Fields
The tool workshop SHALL conditionally show or hide port-related fields based on the selected interface type.
#### Scenario: Web tool shows port fields
- GIVEN a tool type with interface type "web"
- WHEN the user views the tool editor
- THEN the Default Port field is visible and required
- AND port-related config fields are shown
#### Scenario: Terminal tool hides port fields
- GIVEN a tool type with interface type "terminal"
- WHEN the user views the tool editor
- THEN the Default Port field is hidden
- AND port-related config fields are hidden or disabled
#### Scenario: Changing interface type updates visibility
- GIVEN a user changes interface type from "web" to "terminal"
- WHEN the change is applied
- THEN port fields are immediately hidden
- AND any port value is preserved but not validated
@@ -0,0 +1,50 @@
## ADDED Requirements
### Requirement: Port Configuration Visibility
The system SHALL control whether port configuration is relevant for a tool type.
#### Scenario: Web tool requires port
- GIVEN a tool type with `requires_port` = true
- WHEN the tool type is displayed in the UI
- THEN port configuration fields are shown
- AND default_port is validated as required
#### Scenario: Terminal tool does not require port
- GIVEN a tool type with `requires_port` = false
- WHEN the tool type is displayed in the UI
- THEN port configuration fields are hidden
- AND default_port validation is skipped
- AND port_override in tool configs is not shown
### Requirement: Port Validation Based on requires_port
The API SHALL validate port fields conditionally based on requires_port.
#### Scenario: Validate port for web tools
- GIVEN a tool type with `requires_port` = true
- WHEN creating or updating without a default_port
- THEN the system returns 400 Bad Request
#### Scenario: Skip port validation for terminal tools
- GIVEN a tool type with `requires_port` = false
- WHEN creating or updating without a default_port
- THEN the request succeeds
- AND default_port defaults to 0 or null
### Requirement: UI Conditional Rendering
The frontend SHALL conditionally render port-related UI elements.
#### Scenario: Hide port in tool list
- GIVEN a terminal tool type
- WHEN displayed in the tool workshop list
- THEN port information is not shown
#### Scenario: Hide port in editor
- GIVEN a terminal tool type being edited
- WHEN the editor form is rendered
- THEN the Default Port field is hidden
- AND the readiness probe fields are shown (still relevant)
#### Scenario: Show port for web tools
- GIVEN a web tool type being edited
- WHEN the editor form is rendered
- THEN the Default Port field is visible and required
@@ -0,0 +1,39 @@
## ADDED Requirements
### Requirement: Single Interface Type Enforcement
The system SHALL enforce that each tool type has exactly one interface type.
#### Scenario: Create with single interface
- GIVEN a tool type creation request with `interface_type` = "web"
- WHEN the request is processed
- THEN the tool type is created successfully
- AND the interface type is stored as a single string
#### Scenario: Reject multiple interfaces
- GIVEN a legacy request with `interfaces` array
- WHEN the request is processed
- THEN the system returns 400 Bad Request
- AND the error message indicates that `interface_type` (string) should be used instead
### Requirement: Interface Type Validation
The system SHALL validate that interface_type is one of the allowed values.
#### Scenario: Valid interface types
- GIVEN interface_type values "web" or "terminal"
- WHEN a tool type is created or updated
- THEN the request is accepted
#### Scenario: Invalid interface type
- GIVEN interface_type value "ssh"
- WHEN a tool type is created or updated
- THEN the system returns 400 Bad Request
### Requirement: Data Migration
The system SHALL migrate existing tool types from interfaces array to single interface_type.
#### Scenario: Migrate existing records
- GIVEN existing tool types with interfaces = ["web"] or ["terminal"]
- WHEN the migration runs
- THEN each record gets interface_type = interfaces[0]
- AND requires_port is set based on the interface type
- AND the old interfaces column is removed
@@ -0,0 +1,80 @@
## MODIFIED Requirements
### Requirement: Tool Type Model
The system SHALL provide a `ToolType` model to store tool definitions.
#### Scenario: Model structure
- GIVEN a tool type definition
- THEN the model SHALL have:
- `id`: UUID primary key
- `name`: unique string (e.g., "code-server")
- `display_name`: human-readable string (e.g., "VS Code Server")
- `description`: optional text
- `category`: string (e.g., "editor", "notebook")
- `interface_type`: single string — "web" or "terminal"
- `requires_port`: boolean indicating if port/tunnel configuration is needed
- `compose_template`: Docker Compose YAML string
- `dockerfile_template`: Dockerfile string
- `definition_type`: string — "compose" or "dockerfile"
- `required_variables`: list of required template variables
- `is_builtin`: boolean flag for system-defined types
- `created_at`/`updated_at`: timestamps
### Requirement: CRUD API Endpoints
The system SHALL provide REST API endpoints for tool type management.
#### Scenario: Create tool type
- GIVEN an admin user
- WHEN they POST /api/tool-types with valid data
- THEN the system creates a new tool type
- AND validates `interface_type` is "web" or "terminal"
- AND validates `requires_port` is boolean
- AND validates the compose template YAML (if definition_type is "compose")
- AND validates all required variables are present in template
- AND returns 201 Created with the new tool type
#### Scenario: Update tool type
- GIVEN an admin user
- WHEN they PUT /api/tool-types/{id} with valid data
- THEN the system updates the tool type
- AND validates `interface_type` is "web" or "terminal" if provided
- AND re-validates the compose template
- AND returns 200 OK with updated tool type
## REMOVED Requirements
### Requirement: Multiple interfaces support
**Reason**: Tool types now use a single `interface_type` instead of an array of interfaces. No tool legitimately needs both web and terminal interfaces simultaneously.
**Migration**: Use `interface_type` field (string) instead of `interfaces` array. Set to "web" or "terminal".
## ADDED Requirements
### Requirement: Port requirement indication
The system SHALL allow tool types to indicate whether they require port configuration.
#### Scenario: Web tool requires port
- GIVEN a tool type with `interface_type` = "web"
- WHEN the tool type is created or updated
- THEN `requires_port` SHALL default to true
- AND port-related configuration is shown in the UI
#### Scenario: Terminal tool does not require port
- GIVEN a tool type with `interface_type` = "terminal"
- WHEN the tool type is created or updated
- THEN `requires_port` SHALL default to false
- AND port-related configuration is hidden in the UI
### Requirement: Single interface validation
The system SHALL enforce that each tool type has exactly one interface type.
#### Scenario: Invalid interface type
- GIVEN a tool type creation request with `interface_type` = "invalid"
- WHEN the request is processed
- THEN the system returns 400 Bad Request
- AND the error message indicates valid values are "web" or "terminal"
#### Scenario: Missing interface type
- GIVEN a tool type creation request without `interface_type`
- WHEN the request is processed
- THEN the system returns 400 Bad Request
- AND the error message indicates interface_type is required
@@ -0,0 +1,41 @@
## 1. Database Migration
- [x] 1.1 Create Alembic migration to add `interface_type` string column and `requires_port` boolean column to `tool_types` table
- [x] 1.2 Write migration logic to populate `interface_type` from `interfaces[0]` and set `requires_port` based on value
- [x] 1.3 Drop `interfaces` JSON column and make `interface_type` non-nullable
## 2. Backend Model & API Updates
- [x] 2.1 Update SQLAlchemy model (`apps/api/src/models/tool_type.py`) — replace `interfaces` list with `interface_type` string and add `requires_port` boolean
- [x] 2.2 Update Pydantic schemas (`apps/api/src/api/tool_types.py`) — `ToolTypeCreate`, `ToolTypeUpdate`, `ToolTypeResponse`
- [x] 2.3 Add validation for `interface_type` (must be "web" or "terminal")
- [x] 2.4 Update default values and built-in tool type seeding logic
- [x] 2.5 Update API tests for new schema
## 3. Frontend Type & API Updates
- [x] 3.1 Update TypeScript interfaces (`apps/web/src/api/tool_types.ts`) — replace `interfaces: string[]` with `interface_type: string` and add `requires_port: boolean`
- [x] 3.2 Update API request/response types (`CreateToolTypeRequest`, `UpdateToolTypeRequest`)
## 4. Tool Workshop UI Updates
- [x] 4.1 Replace interface checkboxes with dropdown (single-select) in tool editor
- [x] 4.2 Add conditional rendering for port field based on `requires_port` / `interface_type`
- [x] 4.3 Update tool list to show `interface_type` instead of interfaces array
- [x] 4.4 Update form state management for new fields
- [x] 4.5 Update dirty state tracking
## 5. Test Updates
- [x] 5.1 Update backend API tests (`test_tool_types_api.py`) for new schema
- [x] 5.2 Update frontend tests (`tool-workshop.test.tsx`) for dropdown and conditional fields
- [x] 5.3 Update mock data fixtures
## 6. Verification & Cleanup
- [x] 6.1 Run backend tests: `pytest apps/api/tests/`
- [x] 6.2 Run frontend typecheck: `npm run typecheck`
- [x] 6.3 Run frontend tests: `npm run test`
- [x] 6.4 Run lint: `npm run lint`
- [x] 6.5 Verify migration applies cleanly to existing database
- [x] 6.6 Update documentation if needed