fix: add from __future__ import annotations to workspace_manager.py

Fixes NameError: ToolInstance not defined at runtime because
type annotations are evaluated at class definition time.
Deferring annotation evaluation with __future__ annotations
keeps TYPE_CHECKING imports from causing runtime crashes.

Also includes ruff formatting cleanup on workspace-related files.
This commit is contained in:
2026-05-31 23:41:45 +02:00
parent 5bba2bbd92
commit a5d64d1859
15 changed files with 831 additions and 699 deletions
+88 -75
View File
@@ -5,83 +5,96 @@ import { Icon } from "./icon";
import type { Workspace } from "../types/workspace";
export interface StartToolModalProps {
workspace: Workspace;
onClose: () => void;
onStart: (toolTypeId: string, configProfileId?: string) => Promise<void>;
workspace: Workspace;
onClose: () => void;
onStart: (toolTypeId: string, configProfileId?: string) => Promise<void>;
}
export function StartToolModal({ workspace, onClose, onStart }: StartToolModalProps) {
const [toolTypeId, setToolTypeId] = useState("");
const [configProfileId, setConfigProfileId] = useState("");
const [submitting, setSubmitting] = useState(false);
const [error, setError] = useState<string | null>(null);
export function StartToolModal({
workspace,
onClose,
onStart,
}: StartToolModalProps) {
const [toolTypeId, setToolTypeId] = useState("");
const [configProfileId, setConfigProfileId] = useState("");
const [submitting, setSubmitting] = useState(false);
const [error, setError] = useState<string | null>(null);
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
if (!toolTypeId) {
setError("Please select a tool type");
return;
}
setSubmitting(true);
setError(null);
try {
await onStart(toolTypeId, configProfileId || undefined);
onClose();
} catch (err) {
setError(err instanceof Error ? err.message : "Failed to start tool");
} finally {
setSubmitting(false);
}
};
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
if (!toolTypeId) {
setError("Please select a tool type");
return;
}
setSubmitting(true);
setError(null);
try {
await onStart(toolTypeId, configProfileId || undefined);
onClose();
} catch (err) {
setError(err instanceof Error ? err.message : "Failed to start tool");
} finally {
setSubmitting(false);
}
};
return (
<div className="modal-overlay" onClick={onClose}>
<div className="modal-content" onClick={(e) => e.stopPropagation()}>
<div className="modal-header">
<h3>
<Icon name="play" size="sm" /> Start Tool on {workspace.name}
</h3>
<button className="btn btn-icon" onClick={onClose}>
<Icon name="cancel" size="sm" />
</button>
</div>
<form onSubmit={handleSubmit}>
<div className="form-group">
<label htmlFor="tool-type">Tool Type</label>
<select
id="tool-type"
value={toolTypeId}
onChange={(e) => setToolTypeId(e.target.value)}
disabled={submitting}
>
<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>
</select>
</div>
<div className="form-group">
<label htmlFor="config-profile">Config Profile (optional)</label>
<input
id="config-profile"
type="text"
value={configProfileId}
onChange={(e) => setConfigProfileId(e.target.value)}
placeholder="Profile ID"
disabled={submitting}
/>
</div>
{error && <p className="form-error">{error}</p>}
<div className="form-actions">
<button type="button" className="btn btn-secondary" onClick={onClose} disabled={submitting}>
Cancel
</button>
<button type="submit" className="btn btn-primary" disabled={submitting}>
{submitting ? "Starting..." : "Start Tool"}
</button>
</div>
</form>
</div>
</div>
);
return (
<div className="modal-overlay" onClick={onClose}>
<div className="modal-content" onClick={(e) => e.stopPropagation()}>
<div className="modal-header">
<h3>
<Icon name="play" size="sm" /> Start Tool on {workspace.name}
</h3>
<button className="btn btn-icon" onClick={onClose}>
<Icon name="cancel" size="sm" />
</button>
</div>
<form onSubmit={handleSubmit}>
<div className="form-group">
<label htmlFor="tool-type">Tool Type</label>
<select
id="tool-type"
value={toolTypeId}
onChange={(e) => setToolTypeId(e.target.value)}
disabled={submitting}
>
<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>
</select>
</div>
<div className="form-group">
<label htmlFor="config-profile">Config Profile (optional)</label>
<input
id="config-profile"
type="text"
value={configProfileId}
onChange={(e) => setConfigProfileId(e.target.value)}
placeholder="Profile ID"
disabled={submitting}
/>
</div>
{error && <p className="form-error">{error}</p>}
<div className="form-actions">
<button
type="button"
className="btn btn-secondary"
onClick={onClose}
disabled={submitting}
>
Cancel
</button>
<button
type="submit"
className="btn btn-primary"
disabled={submitting}
>
{submitting ? "Starting..." : "Start Tool"}
</button>
</div>
</form>
</div>
</div>
);
}
+63 -61
View File
@@ -4,70 +4,72 @@ import { Icon } from "./icon";
import type { Workspace } from "../types/workspace";
export interface WorkspaceCardProps {
workspace: Workspace;
loading?: boolean;
onStartTool: (workspace: Workspace) => void;
onSync: (workspace: Workspace) => void;
onDelete: (workspace: Workspace) => void;
workspace: Workspace;
loading?: boolean;
onStartTool: (workspace: Workspace) => void;
onSync: (workspace: Workspace) => void;
onDelete: (workspace: Workspace) => void;
}
export function WorkspaceCard({
workspace,
loading = false,
onStartTool,
onSync,
onDelete,
workspace,
loading = false,
onStartTool,
onSync,
onDelete,
}: WorkspaceCardProps) {
const statusClass =
workspace.status === "ready"
? "status-ready"
: workspace.status === "syncing"
? "status-syncing"
: "status-error";
const statusClass =
workspace.status === "ready"
? "status-ready"
: workspace.status === "syncing"
? "status-syncing"
: "status-error";
return (
<article className={`card workspace-card ${loading ? "loading" : ""}`}>
<div className="workspace-header">
<h4>{workspace.name}</h4>
<span className={`status-badge ${statusClass}`}>{workspace.status}</span>
</div>
<div className="workspace-meta">
<p className="workspace-project">
{workspace.project_name} / {workspace.repo_name}
</p>
<p className="workspace-branch">
<Icon name="branch" size="sm" /> {workspace.branch}
</p>
{workspace.instance_count > 0 && (
<p className="workspace-instances">
{workspace.instance_count} active tool
{workspace.instance_count > 1 ? "s" : ""}
</p>
)}
</div>
<div className="workspace-actions">
<button
className="btn btn-primary"
onClick={() => onStartTool(workspace)}
disabled={loading}
>
<Icon name="play" size="sm" /> Start Tool
</button>
<button
className="btn btn-secondary"
onClick={() => onSync(workspace)}
disabled={loading}
>
<Icon name="refresh" size="sm" /> Sync
</button>
<button
className="btn btn-danger"
onClick={() => onDelete(workspace)}
disabled={loading}
>
<Icon name="delete" size="sm" /> Delete
</button>
</div>
</article>
);
return (
<article className={`card workspace-card ${loading ? "loading" : ""}`}>
<div className="workspace-header">
<h4>{workspace.name}</h4>
<span className={`status-badge ${statusClass}`}>
{workspace.status}
</span>
</div>
<div className="workspace-meta">
<p className="workspace-project">
{workspace.project_name} / {workspace.repo_name}
</p>
<p className="workspace-branch">
<Icon name="branch" size="sm" /> {workspace.branch}
</p>
{workspace.instance_count > 0 && (
<p className="workspace-instances">
{workspace.instance_count} active tool
{workspace.instance_count > 1 ? "s" : ""}
</p>
)}
</div>
<div className="workspace-actions">
<button
className="btn btn-primary"
onClick={() => onStartTool(workspace)}
disabled={loading}
>
<Icon name="play" size="sm" /> Start Tool
</button>
<button
className="btn btn-secondary"
onClick={() => onSync(workspace)}
disabled={loading}
>
<Icon name="refresh" size="sm" /> Sync
</button>
<button
className="btn btn-danger"
onClick={() => onDelete(workspace)}
disabled={loading}
>
<Icon name="delete" size="sm" /> Delete
</button>
</div>
</article>
);
}
@@ -5,78 +5,85 @@ import { Icon } from "./icon";
import type { CreateWorkspaceRequest } from "../types/workspace";
export interface WorkspaceCreateFormProps {
projectId: string;
repoId: string;
defaultBranch?: string;
onSubmit: (data: CreateWorkspaceRequest) => Promise<void>;
onCancel: () => void;
projectId: string;
repoId: string;
defaultBranch?: string;
onSubmit: (data: CreateWorkspaceRequest) => Promise<void>;
onCancel: () => void;
}
export function WorkspaceCreateForm({
defaultBranch = "main",
onSubmit,
onCancel,
defaultBranch = "main",
onSubmit,
onCancel,
}: WorkspaceCreateFormProps) {
const [name, setName] = useState("");
const [branch, setBranch] = useState(defaultBranch);
const [submitting, setSubmitting] = useState(false);
const [error, setError] = useState<string | null>(null);
const [name, setName] = useState("");
const [branch, setBranch] = useState(defaultBranch);
const [submitting, setSubmitting] = useState(false);
const [error, setError] = useState<string | null>(null);
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
if (!name.trim()) {
setError("Workspace name is required");
return;
}
setSubmitting(true);
setError(null);
try {
await onSubmit({ name: name.trim(), branch: branch.trim() });
} catch (err) {
setError(err instanceof Error ? err.message : "Failed to create workspace");
} finally {
setSubmitting(false);
}
};
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
if (!name.trim()) {
setError("Workspace name is required");
return;
}
setSubmitting(true);
setError(null);
try {
await onSubmit({ name: name.trim(), branch: branch.trim() });
} catch (err) {
setError(
err instanceof Error ? err.message : "Failed to create workspace",
);
} finally {
setSubmitting(false);
}
};
return (
<form className="workspace-create-form card" onSubmit={handleSubmit}>
<h3>
<Icon name="add" size="sm" /> Create Workspace
</h3>
<div className="form-group">
<label htmlFor="ws-name">Name</label>
<input
id="ws-name"
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
placeholder="e.g., feature-branch"
disabled={submitting}
/>
</div>
<div className="form-group">
<label htmlFor="ws-branch">
<Icon name="branch" size="sm" /> Branch
</label>
<input
id="ws-branch"
type="text"
value={branch}
onChange={(e) => setBranch(e.target.value)}
placeholder="main"
disabled={submitting}
/>
</div>
{error && <p className="form-error">{error}</p>}
<div className="form-actions">
<button type="button" className="btn btn-secondary" onClick={onCancel} disabled={submitting}>
Cancel
</button>
<button type="submit" className="btn btn-primary" disabled={submitting}>
{submitting ? "Creating..." : "Create"}
</button>
</div>
</form>
);
return (
<form className="workspace-create-form card" onSubmit={handleSubmit}>
<h3>
<Icon name="add" size="sm" /> Create Workspace
</h3>
<div className="form-group">
<label htmlFor="ws-name">Name</label>
<input
id="ws-name"
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
placeholder="e.g., feature-branch"
disabled={submitting}
/>
</div>
<div className="form-group">
<label htmlFor="ws-branch">
<Icon name="branch" size="sm" /> Branch
</label>
<input
id="ws-branch"
type="text"
value={branch}
onChange={(e) => setBranch(e.target.value)}
placeholder="main"
disabled={submitting}
/>
</div>
{error && <p className="form-error">{error}</p>}
<div className="form-actions">
<button
type="button"
className="btn btn-secondary"
onClick={onCancel}
disabled={submitting}
>
Cancel
</button>
<button type="submit" className="btn btn-primary" disabled={submitting}>
{submitting ? "Creating..." : "Create"}
</button>
</div>
</form>
);
}