feat: Tool Workshop manifest editor (PR 2)
- Add tool_definitions API client with types for manifests - Add ManifestEditor component: base image selector, package editors (apt/npm/pip/node), script editors (build/startup), mount schema designer, runtime config, and live preview panel - Integrate ManifestEditor into Tool Workshop as 'Manifest (Declarative)' definition type alongside Compose and Dockerfile - Update ToolType API types to include manifest_id and 'manifest' definition_type - Frontend builds clean, TypeScript typecheck passes
This commit is contained in:
Alex Blank
@@ -0,0 +1,108 @@
|
||||
import { apiClient } from "./client";
|
||||
|
||||
export interface ToolDefinitionManifest {
|
||||
id: string;
|
||||
name: string;
|
||||
display_name: string;
|
||||
description: string | null;
|
||||
category: string | null;
|
||||
interface_type: string;
|
||||
base_image: string | null;
|
||||
base_definition_id: string | null;
|
||||
base_version: string;
|
||||
manifest: Record<string, unknown>;
|
||||
dockerfile_cache: string | null;
|
||||
compose_cache: string | null;
|
||||
version: string;
|
||||
is_base: boolean;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
export interface CreateToolDefinitionRequest {
|
||||
name: string;
|
||||
display_name: string;
|
||||
description?: string;
|
||||
category?: string;
|
||||
interface_type?: string;
|
||||
base_image?: string;
|
||||
base_definition_id?: string;
|
||||
base_version?: string;
|
||||
manifest: Record<string, unknown>;
|
||||
}
|
||||
|
||||
export interface UpdateToolDefinitionRequest {
|
||||
display_name?: string;
|
||||
description?: string;
|
||||
category?: string;
|
||||
manifest?: Record<string, unknown>;
|
||||
base_version?: string;
|
||||
}
|
||||
|
||||
export interface CompileResult {
|
||||
id: string;
|
||||
name: string;
|
||||
dockerfile: string;
|
||||
entrypoint: string;
|
||||
compose: string;
|
||||
image_tag: string;
|
||||
}
|
||||
|
||||
export const listToolDefinitions = async (
|
||||
includeBases = true,
|
||||
): Promise<ToolDefinitionManifest[]> => {
|
||||
const response = await apiClient.get<{
|
||||
definitions: ToolDefinitionManifest[];
|
||||
}>("/tool-definitions", {
|
||||
params: { include_bases: includeBases },
|
||||
});
|
||||
return response.data.definitions;
|
||||
};
|
||||
|
||||
export const getToolDefinition = async (
|
||||
id: string,
|
||||
): Promise<ToolDefinitionManifest> => {
|
||||
const response = await apiClient.get<ToolDefinitionManifest>(
|
||||
`/tool-definitions/${id}`,
|
||||
);
|
||||
return response.data;
|
||||
};
|
||||
|
||||
export const createToolDefinition = async (
|
||||
data: CreateToolDefinitionRequest,
|
||||
): Promise<ToolDefinitionManifest> => {
|
||||
const response = await apiClient.post<ToolDefinitionManifest>(
|
||||
"/tool-definitions",
|
||||
data,
|
||||
);
|
||||
return response.data;
|
||||
};
|
||||
|
||||
export const updateToolDefinition = async (
|
||||
id: string,
|
||||
data: UpdateToolDefinitionRequest,
|
||||
): Promise<ToolDefinitionManifest> => {
|
||||
const response = await apiClient.put<ToolDefinitionManifest>(
|
||||
`/tool-definitions/${id}`,
|
||||
data,
|
||||
);
|
||||
return response.data;
|
||||
};
|
||||
|
||||
export const deleteToolDefinition = async (
|
||||
id: string,
|
||||
): Promise<{ status: string; id: string }> => {
|
||||
const response = await apiClient.delete<{ status: string; id: string }>(
|
||||
`/tool-definitions/${id}`,
|
||||
);
|
||||
return response.data;
|
||||
};
|
||||
|
||||
export const compileToolDefinition = async (
|
||||
id: string,
|
||||
): Promise<CompileResult> => {
|
||||
const response = await apiClient.post<CompileResult>(
|
||||
`/tool-definitions/${id}/compile`,
|
||||
);
|
||||
return response.data;
|
||||
};
|
||||
@@ -1,90 +1,102 @@
|
||||
import { apiClient } from "./client";
|
||||
|
||||
export interface ReadinessProbe {
|
||||
command: string;
|
||||
timeout: number;
|
||||
interval: number;
|
||||
command: string;
|
||||
timeout: number;
|
||||
interval: number;
|
||||
}
|
||||
|
||||
export interface ToolType {
|
||||
id: string;
|
||||
name: string;
|
||||
display_name: string;
|
||||
description: string | null;
|
||||
category: string;
|
||||
interface_type: string;
|
||||
requires_port: boolean;
|
||||
default_port: number | null;
|
||||
definition_type: 'compose' | 'dockerfile';
|
||||
compose_template: string | null;
|
||||
dockerfile_template: string | null;
|
||||
build_context: Record<string, string> | null;
|
||||
readiness_probe: ReadinessProbe | null;
|
||||
startup_command: string | null;
|
||||
required_variables: string[];
|
||||
created_by_id: string | null;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
id: string;
|
||||
name: string;
|
||||
display_name: string;
|
||||
description: string | null;
|
||||
category: string;
|
||||
interface_type: string;
|
||||
requires_port: boolean;
|
||||
default_port: number | null;
|
||||
definition_type: "compose" | "dockerfile" | "manifest";
|
||||
manifest_id: string | null;
|
||||
compose_template: string | null;
|
||||
dockerfile_template: string | null;
|
||||
build_context: Record<string, string> | null;
|
||||
readiness_probe: ReadinessProbe | null;
|
||||
startup_command: string | null;
|
||||
required_variables: string[];
|
||||
created_by_id: string | null;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
export interface CreateToolTypeRequest {
|
||||
name: string;
|
||||
display_name: string;
|
||||
description?: string;
|
||||
category?: string;
|
||||
interface_type?: string;
|
||||
requires_port?: boolean;
|
||||
default_port: number;
|
||||
definition_type?: 'compose' | 'dockerfile';
|
||||
compose_template?: string;
|
||||
dockerfile_template?: string;
|
||||
build_context?: Record<string, string>;
|
||||
readiness_probe?: ReadinessProbe;
|
||||
startup_command?: string;
|
||||
required_variables: string[];
|
||||
name: string;
|
||||
display_name: string;
|
||||
description?: string;
|
||||
category?: string;
|
||||
interface_type?: string;
|
||||
requires_port?: boolean;
|
||||
default_port: number;
|
||||
definition_type?: "compose" | "dockerfile" | "manifest";
|
||||
manifest_id?: string;
|
||||
compose_template?: string;
|
||||
dockerfile_template?: string;
|
||||
build_context?: Record<string, string>;
|
||||
readiness_probe?: ReadinessProbe;
|
||||
startup_command?: string;
|
||||
required_variables: string[];
|
||||
}
|
||||
|
||||
export interface UpdateToolTypeRequest {
|
||||
display_name?: string;
|
||||
description?: string;
|
||||
category?: string;
|
||||
interface_type?: string;
|
||||
requires_port?: boolean;
|
||||
default_port?: number;
|
||||
definition_type?: 'compose' | 'dockerfile';
|
||||
compose_template?: string;
|
||||
dockerfile_template?: string;
|
||||
build_context?: Record<string, string>;
|
||||
readiness_probe?: ReadinessProbe;
|
||||
startup_command?: string;
|
||||
required_variables?: string[];
|
||||
display_name?: string;
|
||||
description?: string;
|
||||
category?: string;
|
||||
interface_type?: string;
|
||||
requires_port?: boolean;
|
||||
default_port?: number;
|
||||
definition_type?: "compose" | "dockerfile" | "manifest";
|
||||
manifest_id?: string;
|
||||
compose_template?: string;
|
||||
dockerfile_template?: string;
|
||||
build_context?: Record<string, string>;
|
||||
readiness_probe?: ReadinessProbe;
|
||||
startup_command?: string;
|
||||
required_variables?: string[];
|
||||
}
|
||||
|
||||
export const listToolTypes = async (): Promise<ToolType[]> => {
|
||||
const response = await apiClient.get<ToolType[]>("/tool-types");
|
||||
return response.data;
|
||||
const response = await apiClient.get<ToolType[]>("/tool-types");
|
||||
return response.data;
|
||||
};
|
||||
|
||||
export const getToolType = async (id: string): Promise<ToolType> => {
|
||||
const response = await apiClient.get<ToolType>(`/tool-types/${id}`);
|
||||
return response.data;
|
||||
const response = await apiClient.get<ToolType>(`/tool-types/${id}`);
|
||||
return response.data;
|
||||
};
|
||||
|
||||
export const createToolType = async (data: CreateToolTypeRequest): Promise<ToolType> => {
|
||||
const response = await apiClient.post<ToolType>("/tool-types", data);
|
||||
return response.data;
|
||||
export const createToolType = async (
|
||||
data: CreateToolTypeRequest,
|
||||
): Promise<ToolType> => {
|
||||
const response = await apiClient.post<ToolType>("/tool-types", data);
|
||||
return response.data;
|
||||
};
|
||||
|
||||
export const updateToolType = async (id: string, data: UpdateToolTypeRequest): Promise<ToolType> => {
|
||||
const response = await apiClient.put<ToolType>(`/tool-types/${id}`, data);
|
||||
return response.data;
|
||||
export const updateToolType = async (
|
||||
id: string,
|
||||
data: UpdateToolTypeRequest,
|
||||
): Promise<ToolType> => {
|
||||
const response = await apiClient.put<ToolType>(`/tool-types/${id}`, data);
|
||||
return response.data;
|
||||
};
|
||||
|
||||
export const deleteToolType = async (id: string): Promise<void> => {
|
||||
await apiClient.delete(`/tool-types/${id}`);
|
||||
await apiClient.delete(`/tool-types/${id}`);
|
||||
};
|
||||
|
||||
export const validateToolType = async (id: string): Promise<{ valid: boolean; errors?: string[] }> => {
|
||||
const response = await apiClient.get<{ valid: boolean; errors?: string[] }>(`/tool-types/${id}/validate`);
|
||||
return response.data;
|
||||
export const validateToolType = async (
|
||||
id: string,
|
||||
): Promise<{ valid: boolean; errors?: string[] }> => {
|
||||
const response = await apiClient.get<{ valid: boolean; errors?: string[] }>(
|
||||
`/tool-types/${id}/validate`,
|
||||
);
|
||||
return response.data;
|
||||
};
|
||||
|
||||
@@ -0,0 +1,849 @@
|
||||
import { useState, useEffect, useCallback } from "react";
|
||||
import { Icon } from "./icon";
|
||||
import { extractErrorMessage } from "../utils/errors";
|
||||
import {
|
||||
compileToolDefinition,
|
||||
type ToolDefinitionManifest,
|
||||
} from "../api/tool_definitions";
|
||||
|
||||
interface PackageEntry {
|
||||
name: string;
|
||||
}
|
||||
|
||||
interface MountEntry {
|
||||
name: string;
|
||||
target: string;
|
||||
source_type: string;
|
||||
writable: boolean;
|
||||
owner: string;
|
||||
mode: string;
|
||||
file_mode: string;
|
||||
readonly: boolean;
|
||||
git_mount_ref: string;
|
||||
}
|
||||
|
||||
interface ManifestEditorProps {
|
||||
manifest: Record<string, unknown> | null;
|
||||
baseDefinitions: ToolDefinitionManifest[];
|
||||
onChange: (manifest: Record<string, unknown>) => void;
|
||||
definitionId?: string | null;
|
||||
}
|
||||
|
||||
export const ManifestEditor = ({
|
||||
manifest,
|
||||
baseDefinitions,
|
||||
onChange,
|
||||
definitionId,
|
||||
}: ManifestEditorProps) => {
|
||||
const [baseImage, setBaseImage] = useState("");
|
||||
const [baseDefinitionId, setBaseDefinitionId] = useState("");
|
||||
const [aptPackages, setAptPackages] = useState<PackageEntry[]>([]);
|
||||
const [npmPackages, setNpmPackages] = useState<PackageEntry[]>([]);
|
||||
const [pipPackages, setPipPackages] = useState<PackageEntry[]>([]);
|
||||
const [nodeVersion, setNodeVersion] = useState("");
|
||||
const [userName, setUserName] = useState("user");
|
||||
const [userUid, setUserUid] = useState("1000");
|
||||
const [userGid, setUserGid] = useState("1000");
|
||||
const [envVars, setEnvVars] = useState<{ key: string; value: string }[]>([]);
|
||||
const [buildScripts, setBuildScripts] = useState<string[]>([""]);
|
||||
const [startupScripts, setStartupScripts] = useState<string[]>([""]);
|
||||
const [mounts, setMounts] = useState<MountEntry[]>([]);
|
||||
const [command, setCommand] = useState<string[]>([""]);
|
||||
const [workingDir, setWorkingDir] = useState("/workspace");
|
||||
const [stdinOpen, setStdinOpen] = useState(true);
|
||||
const [tty, setTty] = useState(true);
|
||||
|
||||
const [preview, setPreview] = useState<{
|
||||
dockerfile: string;
|
||||
compose: string;
|
||||
entrypoint: string;
|
||||
} | null>(null);
|
||||
const [previewLoading, setPreviewLoading] = useState(false);
|
||||
const [previewError, setPreviewError] = useState<string | null>(null);
|
||||
|
||||
// Load manifest into form
|
||||
useEffect(() => {
|
||||
if (!manifest) return;
|
||||
|
||||
const pkgs = (manifest.packages as Record<string, unknown>) || {};
|
||||
setBaseImage((manifest.base_image as string) || "");
|
||||
setBaseDefinitionId((manifest.base_definition_id as string) || "");
|
||||
setAptPackages(((pkgs.apt as string[]) || []).map((p) => ({ name: p })));
|
||||
setNpmPackages(
|
||||
((pkgs.npm_global as string[]) || []).map((p) => ({ name: p })),
|
||||
);
|
||||
setPipPackages(((pkgs.pip as string[]) || []).map((p) => ({ name: p })));
|
||||
setNodeVersion((pkgs.node as Record<string, string>)?.version || "");
|
||||
|
||||
const user = (manifest.user as Record<string, unknown>) || {};
|
||||
setUserName((user.name as string) || "user");
|
||||
setUserUid(String(user.uid || "1000"));
|
||||
setUserGid(String(user.gid || "1000"));
|
||||
|
||||
const env = (manifest.env as Record<string, string>) || {};
|
||||
setEnvVars(Object.entries(env).map(([key, value]) => ({ key, value })));
|
||||
|
||||
const scripts = (manifest.scripts as Record<string, string[]>) || {};
|
||||
setBuildScripts((scripts.build || []).length > 0 ? scripts.build : [""]);
|
||||
setStartupScripts(
|
||||
(scripts.startup || []).length > 0 ? scripts.startup : [""],
|
||||
);
|
||||
|
||||
const mts = (manifest.mounts as MountEntry[]) || [];
|
||||
setMounts(mts);
|
||||
|
||||
const runtime = (manifest.runtime as Record<string, unknown>) || {};
|
||||
setCommand((runtime.command as string[]) || [""]);
|
||||
setWorkingDir((runtime.working_dir as string) || "/workspace");
|
||||
setStdinOpen((runtime.stdin_open as boolean) ?? true);
|
||||
setTty((runtime.tty as boolean) ?? true);
|
||||
}, [manifest]);
|
||||
|
||||
// Build manifest from form state
|
||||
const buildManifest = useCallback((): Record<string, unknown> => {
|
||||
const packages: Record<string, unknown> = {};
|
||||
const apt = aptPackages.map((p) => p.name).filter(Boolean);
|
||||
if (apt.length) packages.apt = apt;
|
||||
const npm = npmPackages.map((p) => p.name).filter(Boolean);
|
||||
if (npm.length) packages.npm_global = npm;
|
||||
const pip = pipPackages.map((p) => p.name).filter(Boolean);
|
||||
if (pip.length) packages.pip = pip;
|
||||
if (nodeVersion) packages.node = { version: nodeVersion };
|
||||
|
||||
const env: Record<string, string> = {};
|
||||
envVars.forEach(({ key, value }) => {
|
||||
if (key) env[key] = value;
|
||||
});
|
||||
|
||||
const scripts: Record<string, string[]> = {};
|
||||
const build = buildScripts.filter(Boolean);
|
||||
if (build.length) scripts.build = build;
|
||||
const startup = startupScripts.filter(Boolean);
|
||||
if (startup.length) scripts.startup = startup;
|
||||
|
||||
const mts = mounts.filter((m) => m.name && m.target);
|
||||
|
||||
const result: Record<string, unknown> = {
|
||||
packages,
|
||||
user: {
|
||||
name: userName,
|
||||
uid: parseInt(userUid) || 1000,
|
||||
gid: parseInt(userGid) || 1000,
|
||||
create_home: true,
|
||||
shell: "/bin/bash",
|
||||
},
|
||||
env,
|
||||
scripts,
|
||||
mounts: mts,
|
||||
runtime: {
|
||||
command:
|
||||
command.filter(Boolean).length > 0
|
||||
? command.filter(Boolean)
|
||||
: ["/bin/bash"],
|
||||
stdin_open: stdinOpen,
|
||||
tty: tty,
|
||||
working_dir: workingDir,
|
||||
},
|
||||
};
|
||||
|
||||
if (baseImage) result.base_image = baseImage;
|
||||
if (baseDefinitionId) result.base_definition_id = baseDefinitionId;
|
||||
|
||||
return result;
|
||||
}, [
|
||||
aptPackages,
|
||||
npmPackages,
|
||||
pipPackages,
|
||||
nodeVersion,
|
||||
userName,
|
||||
userUid,
|
||||
userGid,
|
||||
envVars,
|
||||
buildScripts,
|
||||
startupScripts,
|
||||
mounts,
|
||||
command,
|
||||
workingDir,
|
||||
stdinOpen,
|
||||
tty,
|
||||
baseImage,
|
||||
baseDefinitionId,
|
||||
]);
|
||||
|
||||
// Notify parent of changes
|
||||
useEffect(() => {
|
||||
const m = buildManifest();
|
||||
onChange(m);
|
||||
}, [buildManifest, onChange]);
|
||||
|
||||
const handlePreview = async () => {
|
||||
if (!definitionId) {
|
||||
setPreviewError("Save the tool definition first to preview");
|
||||
return;
|
||||
}
|
||||
setPreviewLoading(true);
|
||||
setPreviewError(null);
|
||||
try {
|
||||
const result = await compileToolDefinition(definitionId);
|
||||
setPreview({
|
||||
dockerfile: result.dockerfile,
|
||||
compose: result.compose,
|
||||
entrypoint: result.entrypoint,
|
||||
});
|
||||
} catch (err) {
|
||||
setPreviewError(extractErrorMessage(err));
|
||||
} finally {
|
||||
setPreviewLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const addAptPackage = () => setAptPackages([...aptPackages, { name: "" }]);
|
||||
const removeAptPackage = (idx: number) =>
|
||||
setAptPackages(aptPackages.filter((_, i) => i !== idx));
|
||||
const updateAptPackage = (idx: number, name: string) => {
|
||||
const copy = [...aptPackages];
|
||||
copy[idx] = { name };
|
||||
setAptPackages(copy);
|
||||
};
|
||||
|
||||
const addNpmPackage = () => setNpmPackages([...npmPackages, { name: "" }]);
|
||||
const removeNpmPackage = (idx: number) =>
|
||||
setNpmPackages(npmPackages.filter((_, i) => i !== idx));
|
||||
const updateNpmPackage = (idx: number, name: string) => {
|
||||
const copy = [...npmPackages];
|
||||
copy[idx] = { name };
|
||||
setNpmPackages(copy);
|
||||
};
|
||||
|
||||
const addPipPackage = () => setPipPackages([...pipPackages, { name: "" }]);
|
||||
const removePipPackage = (idx: number) =>
|
||||
setPipPackages(pipPackages.filter((_, i) => i !== idx));
|
||||
const updatePipPackage = (idx: number, name: string) => {
|
||||
const copy = [...pipPackages];
|
||||
copy[idx] = { name };
|
||||
setPipPackages(copy);
|
||||
};
|
||||
|
||||
const addEnvVar = () => setEnvVars([...envVars, { key: "", value: "" }]);
|
||||
const removeEnvVar = (idx: number) =>
|
||||
setEnvVars(envVars.filter((_, i) => i !== idx));
|
||||
const updateEnvVar = (idx: number, field: "key" | "value", val: string) => {
|
||||
const copy = [...envVars];
|
||||
copy[idx] = { ...copy[idx], [field]: val };
|
||||
setEnvVars(copy);
|
||||
};
|
||||
|
||||
const addBuildScript = () => setBuildScripts([...buildScripts, ""]);
|
||||
const removeBuildScript = (idx: number) =>
|
||||
setBuildScripts(buildScripts.filter((_, i) => i !== idx));
|
||||
const updateBuildScript = (idx: number, val: string) => {
|
||||
const copy = [...buildScripts];
|
||||
copy[idx] = val;
|
||||
setBuildScripts(copy);
|
||||
};
|
||||
|
||||
const addStartupScript = () => setStartupScripts([...startupScripts, ""]);
|
||||
const removeStartupScript = (idx: number) =>
|
||||
setStartupScripts(startupScripts.filter((_, i) => i !== idx));
|
||||
const updateStartupScript = (idx: number, val: string) => {
|
||||
const copy = [...startupScripts];
|
||||
copy[idx] = val;
|
||||
setStartupScripts(copy);
|
||||
};
|
||||
|
||||
const addMount = () =>
|
||||
setMounts([
|
||||
...mounts,
|
||||
{
|
||||
name: "",
|
||||
target: "",
|
||||
source_type: "repo",
|
||||
writable: true,
|
||||
owner: "",
|
||||
mode: "",
|
||||
file_mode: "",
|
||||
readonly: false,
|
||||
git_mount_ref: "",
|
||||
},
|
||||
]);
|
||||
const removeMount = (idx: number) =>
|
||||
setMounts(mounts.filter((_, i) => i !== idx));
|
||||
const updateMount = (idx: number, field: keyof MountEntry, val: unknown) => {
|
||||
const copy = [...mounts];
|
||||
copy[idx] = { ...copy[idx], [field]: val };
|
||||
setMounts(copy);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="stack" style={{ gap: "1.5rem" }}>
|
||||
{/* Base Image */}
|
||||
<div className="card stack" style={{ gap: "1rem", padding: "1rem" }}>
|
||||
<h4 style={{ margin: 0 }}>Base Image</h4>
|
||||
<div className="row" style={{ gap: "1rem" }}>
|
||||
<div className="form-group" style={{ flex: 1 }}>
|
||||
<label>Base Definition</label>
|
||||
<select
|
||||
value={baseDefinitionId}
|
||||
onChange={(e) => {
|
||||
setBaseDefinitionId(e.target.value);
|
||||
setBaseImage("");
|
||||
}}
|
||||
className="form-input"
|
||||
>
|
||||
<option value="">Custom image...</option>
|
||||
{baseDefinitions.map((b) => (
|
||||
<option key={b.id} value={b.id}>
|
||||
{b.display_name} ({b.version})
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div className="form-group" style={{ flex: 1 }}>
|
||||
<label>Custom Base Image</label>
|
||||
<input
|
||||
type="text"
|
||||
value={baseImage}
|
||||
onChange={(e) => {
|
||||
setBaseImage(e.target.value);
|
||||
setBaseDefinitionId("");
|
||||
}}
|
||||
placeholder="e.g., ubuntu:24.04"
|
||||
className="form-input"
|
||||
disabled={!!baseDefinitionId}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Packages */}
|
||||
<div className="card stack" style={{ gap: "1rem", padding: "1rem" }}>
|
||||
<h4 style={{ margin: 0 }}>Packages</h4>
|
||||
|
||||
<div className="form-group">
|
||||
<label>Node.js Version</label>
|
||||
<input
|
||||
type="text"
|
||||
value={nodeVersion}
|
||||
onChange={(e) => setNodeVersion(e.target.value)}
|
||||
placeholder="e.g., 20"
|
||||
className="form-input"
|
||||
style={{ width: "120px" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label>APT Packages</label>
|
||||
<div className="stack" style={{ gap: "0.5rem", marginTop: "0.5rem" }}>
|
||||
{aptPackages.map((pkg, idx) => (
|
||||
<div key={idx} className="row" style={{ gap: "0.5rem" }}>
|
||||
<input
|
||||
type="text"
|
||||
value={pkg.name}
|
||||
onChange={(e) => updateAptPackage(idx, e.target.value)}
|
||||
placeholder="e.g., neovim"
|
||||
className="form-input"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => removeAptPackage(idx)}
|
||||
className="button-icon"
|
||||
title="Remove"
|
||||
>
|
||||
<Icon name="delete" size="sm" />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
<button
|
||||
type="button"
|
||||
onClick={addAptPackage}
|
||||
className="button-secondary"
|
||||
style={{ width: "fit-content" }}
|
||||
>
|
||||
<Icon name="add" size="sm" /> Add APT Package
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label>NPM Global Packages</label>
|
||||
<div className="stack" style={{ gap: "0.5rem", marginTop: "0.5rem" }}>
|
||||
{npmPackages.map((pkg, idx) => (
|
||||
<div key={idx} className="row" style={{ gap: "0.5rem" }}>
|
||||
<input
|
||||
type="text"
|
||||
value={pkg.name}
|
||||
onChange={(e) => updateNpmPackage(idx, e.target.value)}
|
||||
placeholder="e.g., @scope/pkg"
|
||||
className="form-input"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => removeNpmPackage(idx)}
|
||||
className="button-icon"
|
||||
title="Remove"
|
||||
>
|
||||
<Icon name="delete" size="sm" />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
<button
|
||||
type="button"
|
||||
onClick={addNpmPackage}
|
||||
className="button-secondary"
|
||||
style={{ width: "fit-content" }}
|
||||
>
|
||||
<Icon name="add" size="sm" /> Add NPM Package
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label>Pip Packages</label>
|
||||
<div className="stack" style={{ gap: "0.5rem", marginTop: "0.5rem" }}>
|
||||
{pipPackages.map((pkg, idx) => (
|
||||
<div key={idx} className="row" style={{ gap: "0.5rem" }}>
|
||||
<input
|
||||
type="text"
|
||||
value={pkg.name}
|
||||
onChange={(e) => updatePipPackage(idx, e.target.value)}
|
||||
placeholder="e.g., requests"
|
||||
className="form-input"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => removePipPackage(idx)}
|
||||
className="button-icon"
|
||||
title="Remove"
|
||||
>
|
||||
<Icon name="delete" size="sm" />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
<button
|
||||
type="button"
|
||||
onClick={addPipPackage}
|
||||
className="button-secondary"
|
||||
style={{ width: "fit-content" }}
|
||||
>
|
||||
<Icon name="add" size="sm" /> Add Pip Package
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Runtime User */}
|
||||
<div className="card stack" style={{ gap: "1rem", padding: "1rem" }}>
|
||||
<h4 style={{ margin: 0 }}>Runtime User</h4>
|
||||
<div className="row" style={{ gap: "1rem" }}>
|
||||
<div className="form-group" style={{ flex: 1 }}>
|
||||
<label>User Name</label>
|
||||
<input
|
||||
type="text"
|
||||
value={userName}
|
||||
onChange={(e) => setUserName(e.target.value)}
|
||||
className="form-input"
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group" style={{ flex: 1 }}>
|
||||
<label>UID</label>
|
||||
<input
|
||||
type="number"
|
||||
value={userUid}
|
||||
onChange={(e) => setUserUid(e.target.value)}
|
||||
className="form-input"
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group" style={{ flex: 1 }}>
|
||||
<label>GID</label>
|
||||
<input
|
||||
type="number"
|
||||
value={userGid}
|
||||
onChange={(e) => setUserGid(e.target.value)}
|
||||
className="form-input"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Environment */}
|
||||
<div className="card stack" style={{ gap: "1rem", padding: "1rem" }}>
|
||||
<h4 style={{ margin: 0 }}>Environment Variables</h4>
|
||||
<div className="stack" style={{ gap: "0.5rem" }}>
|
||||
{envVars.map((ev, idx) => (
|
||||
<div key={idx} className="row" style={{ gap: "0.5rem" }}>
|
||||
<input
|
||||
type="text"
|
||||
value={ev.key}
|
||||
onChange={(e) => updateEnvVar(idx, "key", e.target.value)}
|
||||
placeholder="KEY"
|
||||
className="form-input"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
value={ev.value}
|
||||
onChange={(e) => updateEnvVar(idx, "value", e.target.value)}
|
||||
placeholder="value"
|
||||
className="form-input"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => removeEnvVar(idx)}
|
||||
className="button-icon"
|
||||
title="Remove"
|
||||
>
|
||||
<Icon name="delete" size="sm" />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
<button
|
||||
type="button"
|
||||
onClick={addEnvVar}
|
||||
className="button-secondary"
|
||||
style={{ width: "fit-content" }}
|
||||
>
|
||||
<Icon name="add" size="sm" /> Add Env Var
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Build Scripts */}
|
||||
<div className="card stack" style={{ gap: "1rem", padding: "1rem" }}>
|
||||
<h4 style={{ margin: 0 }}>Build Scripts (run during docker build)</h4>
|
||||
<div className="stack" style={{ gap: "0.5rem" }}>
|
||||
{buildScripts.map((script, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className="row"
|
||||
style={{ gap: "0.5rem", alignItems: "flex-start" }}
|
||||
>
|
||||
<textarea
|
||||
value={script}
|
||||
onChange={(e) => updateBuildScript(idx, e.target.value)}
|
||||
placeholder="git config --global user.email 'dev@example.com'"
|
||||
className="form-input"
|
||||
rows={2}
|
||||
style={{
|
||||
fontFamily: "monospace",
|
||||
fontSize: "0.8125rem",
|
||||
flex: 1,
|
||||
}}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => removeBuildScript(idx)}
|
||||
className="button-icon"
|
||||
title="Remove"
|
||||
>
|
||||
<Icon name="delete" size="sm" />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
<button
|
||||
type="button"
|
||||
onClick={addBuildScript}
|
||||
className="button-secondary"
|
||||
style={{ width: "fit-content" }}
|
||||
>
|
||||
<Icon name="add" size="sm" /> Add Build Script
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Startup Scripts */}
|
||||
<div className="card stack" style={{ gap: "1rem", padding: "1rem" }}>
|
||||
<h4 style={{ margin: 0 }}>
|
||||
Startup Scripts (run when container starts)
|
||||
</h4>
|
||||
<div className="stack" style={{ gap: "0.5rem" }}>
|
||||
{startupScripts.map((script, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className="row"
|
||||
style={{ gap: "0.5rem", alignItems: "flex-start" }}
|
||||
>
|
||||
<textarea
|
||||
value={script}
|
||||
onChange={(e) => updateStartupScript(idx, e.target.value)}
|
||||
placeholder="chown -R user:user /workspace"
|
||||
className="form-input"
|
||||
rows={2}
|
||||
style={{
|
||||
fontFamily: "monospace",
|
||||
fontSize: "0.8125rem",
|
||||
flex: 1,
|
||||
}}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => removeStartupScript(idx)}
|
||||
className="button-icon"
|
||||
title="Remove"
|
||||
>
|
||||
<Icon name="delete" size="sm" />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
<button
|
||||
type="button"
|
||||
onClick={addStartupScript}
|
||||
className="button-secondary"
|
||||
style={{ width: "fit-content" }}
|
||||
>
|
||||
<Icon name="add" size="sm" /> Add Startup Script
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mounts */}
|
||||
<div className="card stack" style={{ gap: "1rem", padding: "1rem" }}>
|
||||
<h4 style={{ margin: 0 }}>Mount Schema</h4>
|
||||
<div className="stack" style={{ gap: "1rem" }}>
|
||||
{mounts.map((mount, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className="stack"
|
||||
style={{
|
||||
gap: "0.5rem",
|
||||
padding: "0.75rem",
|
||||
border: "1px solid var(--border)",
|
||||
borderRadius: "0.375rem",
|
||||
}}
|
||||
>
|
||||
<div className="row" style={{ gap: "0.5rem" }}>
|
||||
<input
|
||||
type="text"
|
||||
value={mount.name}
|
||||
onChange={(e) => updateMount(idx, "name", e.target.value)}
|
||||
placeholder="Name (e.g., workspace)"
|
||||
className="form-input"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
value={mount.target}
|
||||
onChange={(e) => updateMount(idx, "target", e.target.value)}
|
||||
placeholder="Target (e.g., /workspace)"
|
||||
className="form-input"
|
||||
/>
|
||||
<select
|
||||
value={mount.source_type}
|
||||
onChange={(e) =>
|
||||
updateMount(idx, "source_type", e.target.value)
|
||||
}
|
||||
className="form-input"
|
||||
>
|
||||
<option value="repo">Repository</option>
|
||||
<option value="ssh_key">SSH Key</option>
|
||||
<option value="instance">Instance</option>
|
||||
<option value="git_mount">Git Mount</option>
|
||||
<option value="host_path">Host Path</option>
|
||||
</select>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => removeMount(idx)}
|
||||
className="button-icon"
|
||||
title="Remove"
|
||||
>
|
||||
<Icon name="delete" size="sm" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="row" style={{ gap: "0.5rem" }}>
|
||||
<label
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "0.25rem",
|
||||
fontSize: "0.875rem",
|
||||
}}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={mount.writable}
|
||||
onChange={(e) =>
|
||||
updateMount(idx, "writable", e.target.checked)
|
||||
}
|
||||
/>
|
||||
Writable
|
||||
</label>
|
||||
<label
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "0.25rem",
|
||||
fontSize: "0.875rem",
|
||||
}}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={mount.readonly}
|
||||
onChange={(e) =>
|
||||
updateMount(idx, "readonly", e.target.checked)
|
||||
}
|
||||
/>
|
||||
Read-only
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={mount.owner}
|
||||
onChange={(e) => updateMount(idx, "owner", e.target.value)}
|
||||
placeholder="Owner (e.g., user)"
|
||||
className="form-input"
|
||||
style={{ width: "120px" }}
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
value={mount.mode}
|
||||
onChange={(e) => updateMount(idx, "mode", e.target.value)}
|
||||
placeholder="Mode (e.g., 0755)"
|
||||
className="form-input"
|
||||
style={{ width: "100px" }}
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
value={mount.file_mode}
|
||||
onChange={(e) =>
|
||||
updateMount(idx, "file_mode", e.target.value)
|
||||
}
|
||||
placeholder="File mode (e.g., 0644)"
|
||||
className="form-input"
|
||||
style={{ width: "120px" }}
|
||||
/>
|
||||
{mount.source_type === "git_mount" && (
|
||||
<input
|
||||
type="text"
|
||||
value={mount.git_mount_ref}
|
||||
onChange={(e) =>
|
||||
updateMount(idx, "git_mount_ref", e.target.value)
|
||||
}
|
||||
placeholder="Git mount ref"
|
||||
className="form-input"
|
||||
style={{ width: "120px" }}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
<button
|
||||
type="button"
|
||||
onClick={addMount}
|
||||
className="button-secondary"
|
||||
style={{ width: "fit-content" }}
|
||||
>
|
||||
<Icon name="add" size="sm" /> Add Mount
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Runtime */}
|
||||
<div className="card stack" style={{ gap: "1rem", padding: "1rem" }}>
|
||||
<h4 style={{ margin: 0 }}>Runtime</h4>
|
||||
<div className="row" style={{ gap: "1rem" }}>
|
||||
<div className="form-group" style={{ flex: 1 }}>
|
||||
<label>Command</label>
|
||||
<input
|
||||
type="text"
|
||||
value={command.join(" ")}
|
||||
onChange={(e) => setCommand(e.target.value.split(" "))}
|
||||
placeholder="/bin/bash"
|
||||
className="form-input"
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group" style={{ flex: 1 }}>
|
||||
<label>Working Directory</label>
|
||||
<input
|
||||
type="text"
|
||||
value={workingDir}
|
||||
onChange={(e) => setWorkingDir(e.target.value)}
|
||||
placeholder="/workspace"
|
||||
className="form-input"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row" style={{ gap: "1rem" }}>
|
||||
<label
|
||||
style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={stdinOpen}
|
||||
onChange={(e) => setStdinOpen(e.target.checked)}
|
||||
/>
|
||||
stdin_open
|
||||
</label>
|
||||
<label
|
||||
style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={tty}
|
||||
onChange={(e) => setTty(e.target.checked)}
|
||||
/>
|
||||
tty
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Preview */}
|
||||
<div className="card stack" style={{ gap: "1rem", padding: "1rem" }}>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<h4 style={{ margin: 0 }}>Live Preview</h4>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handlePreview}
|
||||
disabled={previewLoading}
|
||||
className="button-secondary"
|
||||
>
|
||||
<Icon name="refresh" size="sm" />
|
||||
{previewLoading ? "Compiling..." : "Preview"}
|
||||
</button>
|
||||
</div>
|
||||
{previewError && <p className="text-error">{previewError}</p>}
|
||||
{preview && (
|
||||
<div className="stack" style={{ gap: "1rem" }}>
|
||||
<div>
|
||||
<label style={{ fontWeight: 600, fontSize: "0.875rem" }}>
|
||||
Dockerfile
|
||||
</label>
|
||||
<pre
|
||||
style={{
|
||||
background: "var(--code-bg, #1e1e1e)",
|
||||
color: "var(--code-fg, #d4d4d4)",
|
||||
padding: "1rem",
|
||||
borderRadius: "0.375rem",
|
||||
overflow: "auto",
|
||||
fontSize: "0.8125rem",
|
||||
maxHeight: "300px",
|
||||
}}
|
||||
>
|
||||
{preview.dockerfile}
|
||||
</pre>
|
||||
</div>
|
||||
<div>
|
||||
<label style={{ fontWeight: 600, fontSize: "0.875rem" }}>
|
||||
Compose
|
||||
</label>
|
||||
<pre
|
||||
style={{
|
||||
background: "var(--code-bg, #1e1e1e)",
|
||||
color: "var(--code-fg, #d4d4d4)",
|
||||
padding: "1rem",
|
||||
borderRadius: "0.375rem",
|
||||
overflow: "auto",
|
||||
fontSize: "0.8125rem",
|
||||
maxHeight: "200px",
|
||||
}}
|
||||
>
|
||||
{preview.compose}
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
+1965
-1459
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user