@exagone313/dsh-podman 0.2.0-rc.2

package/dist/client/container-card-directory.js

@@ -0,0 +1,144 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DIRECTORY_CLASS } from "./container-card-directory-styles.js";
+import { confineToRoot, crumbLabel, rootCrumbs, } from "../project-path.js";
+import { Button, IconCheckOutline16, IconChevronRightOutline14, IconFolderClose16, IconFolderOpen16, Modal, } from "@deepseek-ai/dsh-client-ui-primitives";
+import { useEffect, useRef, useState } from "react";
+// How long a listing may take before the browser admits it is still loading.
+const SLOW_SCAN_DELAY_MS = 300;
+// The directory browser a project mount path is chosen with. Its layout mirrors
+// dsh's own directory browser — a 680x500 dialog with two Miller columns,
+// chevron breadcrumbs and 28px folder rows — and it lists through the harness's
+// own host-side picker, never a container or the orchestrator. It is confined
+// to the projects root: the breadcrumb trail starts there, the browser never
+// navigates above it, and so it can only ever produce a path a project mount
+// accepts.
+export function DirectoryPickerModal(props) {
+    const { t, open, root, start, picker, onSelect, onClose } = props;
+    const [path, setPath] = useState(() => confineToRoot(root, start));
+    const [level, setLevel] = useState(undefined);
+    const [selected, setSelected] = useState(null);
+    const [child, setChild] = useState(undefined);
+    const [showHidden, setShowHidden] = useState(false);
+    const [error, setError] = useState("");
+    const [busy, setBusy] = useState(false);
+    const [slow, setSlow] = useState(false);
+    // The locale binding is read through a ref so a new function identity per
+    // render cannot restart a listing.
+    const tRef = useRef(t);
+    tRef.current = t;
+    const trailRef = useRef(null);
+    // Every open starts at the field's value (clamped to the projects root).
+    useEffect(() => {
+        if (!open)
+            return;
+        setPath(confineToRoot(root, start));
+        setSelected(null);
+        setShowHidden(false);
+    }, [open, root, start]);
+    useEffect(() => {
+        if (!open)
+            return;
+        const controller = new AbortController();
+        let cancelled = false;
+        setBusy(true);
+        setSlow(false);
+        const timer = setTimeout(() => {
+            if (!cancelled)
+                setSlow(true);
+        }, SLOW_SCAN_DELAY_MS);
+        picker
+            .list(path, controller.signal)
+            .then((listing) => {
+            if (cancelled)
+                return;
+            setLevel(toLevel(listing));
+            setError("");
+        })
+            .catch((failure) => {
+            if (cancelled)
+                return;
+            const code = failure?.code;
+            setLevel(undefined);
+            setError(code === "directory-picker/unavailable"
+                ? tRef.current("browseUnavailable")
+                : tRef.current("browseError"));
+        })
+            .finally(() => {
+            if (cancelled)
+                return;
+            clearTimeout(timer);
+            setSlow(false);
+            setBusy(false);
+        });
+        return () => {
+            cancelled = true;
+            clearTimeout(timer);
+            controller.abort();
+        };
+    }, [open, path, picker]);
+    useEffect(() => {
+        if (!open || selected === null) {
+            setChild(undefined);
+            return;
+        }
+        const controller = new AbortController();
+        let cancelled = false;
+        setBusy(true);
+        picker
+            .list(selected.path, controller.signal)
+            .then((listing) => {
+            if (!cancelled)
+                setChild(toLevel(listing));
+        })
+            .catch(() => {
+            if (!cancelled)
+                setChild(undefined);
+        })
+            .finally(() => {
+            if (!cancelled)
+                setBusy(false);
+        });
+        return () => {
+            cancelled = true;
+            controller.abort();
+        };
+    }, [open, selected, picker]);
+    // Selecting previews the directory; the right pane lists its children.
+    const select = (entry) => {
+        setSelected(entry);
+    };
+    // A click in the preview pane descends one level, exactly like the built-in
+    // browser: the previewed directory becomes the listed level and the clicked
+    // entry becomes the new selection.
+    const advance = (entry) => {
+        if (selected !== null)
+            setPath(selected.path);
+        setSelected(entry);
+    };
+    const navigate = (target) => {
+        setPath(confineToRoot(root, target));
+        setSelected(null);
+    };
+    // Keep the deepest crumb in view, like the built-in browser.
+    useEffect(() => {
+        const trail = trailRef.current;
+        if (trail !== null)
+            trail.scrollLeft = trail.scrollWidth;
+    }, [path, open]);
+    const crumbs = rootCrumbs(root, path);
+    const visible = (entries) => entries.filter((entry) => showHidden || !entry.hidden);
+    const truncated = level?.truncated === true || child?.truncated === true;
+    return (_jsx(Modal, { open: open, onClose: onClose, title: t("browseTitle"), className: DIRECTORY_CLASS, headless: true, children: _jsxs("div", { className: "dsh-podman-directory-scope", children: [_jsxs("div", { className: "dsh-podman-directory-header", children: [_jsx("h2", { className: "dsh-podman-directory-title", children: t("browseTitle") }), _jsx("div", { className: "dsh-podman-directory-crumbbar", children: _jsxs("nav", { ref: trailRef, className: "dsh-podman-directory-crumbs", "aria-label": t("browseTitle"), children: [_jsx("span", { className: "dsh-podman-directory-crumbseat", children: _jsx("button", { type: "button", className: "dsh-podman-directory-crumb", disabled: busy, onClick: () => navigate(root), children: crumbLabel(root) }) }), crumbs.map((crumb) => (_jsxs("span", { className: "dsh-podman-directory-crumbseat", children: [_jsx(IconChevronRightOutline14, { size: 12, className: "dsh-podman-directory-crumbchevron" }), _jsx("button", { type: "button", className: "dsh-podman-directory-crumb", disabled: busy, onClick: () => navigate(crumb), children: crumbLabel(crumb) })] }, crumb)))] }) })] }), _jsxs("div", { className: "dsh-podman-directory-content", children: [_jsxs("div", { className: "dsh-podman-directory-miller", children: [_jsx("ul", { className: "dsh-podman-directory-column", children: (level?.entries ?? []).length === 0 ? null : (visible(level?.entries ?? []).map((entry) => (_jsx(DirectoryRow, { entry: entry, selected: selected?.path === entry.path, busy: busy, onPick: select }, entry.path)))) }), selected === null ? null : (_jsxs(_Fragment, { children: [_jsx("span", { className: "dsh-podman-directory-divider" }), _jsx("ul", { className: "dsh-podman-directory-column", children: visible(child?.entries ?? []).map((entry) => (_jsx(DirectoryRow, { entry: entry, selected: false, busy: busy, onPick: advance }, entry.path))) })] }))] }), error === "" ? null : (_jsx("p", { className: "dsh-podman-directory-error", role: "alert", children: error })), error === "" && truncated ? (_jsx("p", { className: "dsh-podman-directory-status", role: "status", children: t("browseTruncated") })) : null, slow ? (_jsx("span", { className: "dsh-podman-directory-loading", role: "status", children: t("browseLoading") })) : null] }), _jsxs("div", { className: "dsh-podman-directory-footer", children: [_jsxs("button", { type: "button", className: "dsh-podman-directory-toggle", "aria-pressed": showHidden, disabled: busy, onClick: () => setShowHidden((previous) => !previous), children: [t("browseHidden"), showHidden ? _jsx(IconCheckOutline16, { size: 14 }) : null] }), _jsx("span", { className: "dsh-podman-directory-gap" }), _jsx(Button, { variant: "outline", className: "dsh-podman-directory-action", disabled: busy, onClick: onClose, children: t("cancel") }), _jsx(Button, { variant: "primary", className: "dsh-podman-directory-action", disabled: busy || error !== "", onClick: () => onSelect(selected?.path ?? path), children: t("browseSelect") })] })] }) }));
+}
+function DirectoryRow(props) {
+    const { entry, selected, busy, onPick } = props;
+    return (_jsx("li", { className: "dsh-podman-directory-seat", children: _jsxs("button", { type: "button", className: selected
+                ? "dsh-podman-directory-row dsh-podman-directory-row-selected"
+                : "dsh-podman-directory-row", "aria-current": selected ? true : undefined, disabled: busy, onClick: () => onPick(entry), children: [selected ? (_jsx(IconFolderOpen16, { size: 16, className: "dsh-podman-directory-rowicon-selected" })) : (_jsx(IconFolderClose16, { size: 16, className: "dsh-podman-directory-rowicon" })), _jsx("span", { className: "dsh-podman-directory-rowname", children: entry.name }), _jsx(IconChevronRightOutline14, { size: 12, className: "dsh-podman-directory-rowchevron" })] }) }));
+}
+function toLevel(listing) {
+    return {
+        entries: listing.entries ?? [],
+        truncated: listing.truncated === true,
+    };
+}

package/dist/client/container-card-editors.d.ts

@@ -0,0 +1,30 @@
+import { type MountInput } from "./container-card-controller.js";
+import { type DirectoryPickerFace } from "./directory-picker.js";
+import { type ContainerPluginKey } from "./locales.js";
+import { type ReactNode } from "react";
+export declare function EnvEditor(props: {
+    t: (key: ContainerPluginKey) => string;
+    env: Record<string, string>;
+    busy: boolean;
+    onChange: (env: Record<string, string>) => void;
+}): ReactNode;
+export declare function MountsEditor(props: {
+    t: (key: ContainerPluginKey) => string;
+    mounts: readonly MountInput[];
+    volumes: readonly {
+        name: string;
+    }[];
+    secrets: readonly {
+        name: string;
+    }[];
+    busy: boolean;
+    enabled: boolean;
+    projectsRoot: string;
+    directoryPicker?: DirectoryPickerFace;
+    confirmRemove?: boolean;
+    modeControl?: "remount" | "select";
+    primaryProject?: string;
+    onAdd: (mount: MountInput) => void;
+    onRemove: (mount: MountInput) => void;
+    onUpdate?: (mount: MountInput, index: number) => void;
+}): ReactNode;

package/dist/client/container-card-editors.js

@@ -0,0 +1,116 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// SPDX-FileCopyrightText: 2026 Elouan Martinet <exa@elou.world>
+//
+// SPDX-License-Identifier: MIT
+import { ConfirmButton, Field, emptyMount, mountLabel } from "./container-card-shared.js";
+import { greyId, imageSelect } from "./container-card-styles.js";
+import { DirectoryPickerModal } from "./container-card-directory.js";
+import { forcedMountMode } from "../mount-enums.js";
+import { hostPathForProjectName, projectNameFromHostPath } from "../project-path.js";
+import { Button, Input, Modal } from "@deepseek-ai/dsh-client-ui-primitives";
+import { useId, useState } from "react";
+export function EnvEditor(props) {
+    const { t, env, busy, onChange } = props;
+    const entries = Object.entries(env);
+    const updateKey = (oldKey, key, value) => {
+        const next = {};
+        for (const [k, v] of entries) {
+            if (k !== oldKey)
+                next[k] = v;
+        }
+        next[key] = value;
+        onChange(next);
+    };
+    const updateValue = (key, value) => {
+        onChange({ ...env, [key]: value });
+    };
+    const remove = (key) => {
+        const next = { ...env };
+        delete next[key];
+        onChange(next);
+    };
+    const add = () => {
+        onChange({ ...env, "": "" });
+    };
+    return (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [entries.map(([key, value]) => (_jsxs("div", { style: {
+                    display: "flex",
+                    flexWrap: "wrap",
+                    alignItems: "center",
+                    gap: "8px",
+                }, children: [_jsx(Input, { value: key, disabled: busy, placeholder: t("envKey"), "aria-label": t("envKey"), onChange: (event) => updateKey(key, event.target.value, value), style: { width: "160px" } }), _jsx(Input, { value: value, disabled: busy, placeholder: t("envValue"), "aria-label": t("envValue"), onChange: (event) => updateValue(key, event.target.value), style: { width: "200px" } }), _jsx(Button, { variant: "outline", size: "sm", disabled: busy, onClick: () => remove(key), children: t("removeEnv") })] }, key))), _jsx("div", { children: _jsx(Button, { variant: "outline", size: "sm", disabled: busy, onClick: add, children: t("addEnv") }) })] }));
+}
+export function MountsEditor(props) {
+    const { t, mounts, volumes, secrets, busy, enabled, projectsRoot, directoryPicker, confirmRemove, modeControl = "remount", primaryProject = "", onAdd, onRemove, onUpdate, } = props;
+    const [adding, setAdding] = useState(false);
+    const [browsing, setBrowsing] = useState(false);
+    const [browseError, setBrowseError] = useState("");
+    const [draft, setDraft] = useState(emptyMount());
+    const mountKindId = useId();
+    const mountProjectId = useId();
+    const mountDestinationId = useId();
+    const mountModeId = useId();
+    const mountVolumeId = useId();
+    const mountSecretId = useId();
+    const updateDraft = (patch) => {
+        setDraft((prev) => ({ ...prev, ...patch }));
+    };
+    const canAdd = draft.kind === "project"
+        ? draft.project.trim() !== ""
+        : draft.kind === "volume"
+            ? draft.volume !== ""
+            : draft.kind === "secret"
+                ? draft.secret !== ""
+                : true;
+    const openAdd = () => {
+        setDraft(emptyMount());
+        setBrowseError("");
+        setAdding(true);
+    };
+    const submit = () => {
+        if (!canAdd)
+            return;
+        onAdd(draft);
+        setAdding(false);
+    };
+    const kindField = draft.kind === "tmpfs" ? (_jsx(Field, { label: t("mountDestination"), htmlFor: mountDestinationId, children: _jsx(Input, { id: mountDestinationId, value: draft.destination, disabled: busy, onChange: (event) => updateDraft({ destination: event.target.value }) }) })) : draft.kind === "volume" ? (_jsxs(_Fragment, { children: [_jsx(Field, { label: t("mountVolume"), htmlFor: mountVolumeId, children: _jsxs("select", { id: mountVolumeId, style: imageSelect, value: draft.volume, disabled: busy, onChange: (event) => updateDraft({ volume: event.target.value }), children: [volumes.length === 0 ? (_jsx("option", { value: "", children: t("none") })) : null, volumes.map((volume) => (_jsx("option", { value: volume.name, children: volume.name }, volume.name)))] }) }), _jsx(Field, { label: t("mountDestination"), htmlFor: mountDestinationId, children: _jsx(Input, { id: mountDestinationId, value: draft.destination, disabled: busy, onChange: (event) => updateDraft({ destination: event.target.value }) }) }), _jsx(Field, { label: t("mountMode"), htmlFor: mountModeId, children: _jsxs("select", { id: mountModeId, style: imageSelect, value: draft.mode, disabled: busy, onChange: (event) => updateDraft({ mode: event.target.value }), children: [_jsx("option", { value: "read_only", children: t("readOnly") }), _jsx("option", { value: "read_write", children: t("readWrite") })] }) })] })) : draft.kind === "secret" ? (_jsxs(_Fragment, { children: [_jsx(Field, { label: t("mountSecret"), htmlFor: mountSecretId, children: _jsxs("select", { id: mountSecretId, style: imageSelect, value: draft.secret, disabled: busy, onChange: (event) => updateDraft({ secret: event.target.value }), children: [secrets.length === 0 ? (_jsx("option", { value: "", children: t("none") })) : null, secrets.map((secret) => (_jsx("option", { value: secret.name, children: secret.name }, secret.name)))] }) }), _jsx(Field, { label: t("mountDestination"), htmlFor: mountDestinationId, children: _jsx(Input, { id: mountDestinationId, value: draft.destination, disabled: busy, onChange: (event) => updateDraft({ destination: event.target.value }) }) })] })) : (_jsxs(_Fragment, { children: [_jsx(Field, { label: t("mountProjectPath"), htmlFor: mountProjectId, children: _jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [_jsx(Input, { id: mountProjectId, value: draft.project, disabled: busy, onChange: (event) => updateDraft({ project: event.target.value }) }), directoryPicker !== undefined ? (_jsx(Button, { variant: "outline", size: "sm", disabled: busy, onClick: () => {
+                                setBrowseError("");
+                                setBrowsing(true);
+                            }, children: t("browse") })) : null] }) }), browseError === "" ? null : (_jsx("p", { style: { margin: 0, fontSize: "13px" }, role: "alert", children: browseError })), _jsx(Field, { label: t("mountMode"), htmlFor: mountModeId, children: _jsxs("select", { id: mountModeId, style: imageSelect, value: draft.mode, disabled: busy, onChange: (event) => updateDraft({ mode: event.target.value }), children: [_jsx("option", { value: "read_only", children: t("readOnly") }), _jsx("option", { value: "read_write", children: t("readWrite") })] }) })] }));
+    return (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [mounts.map((mount, index) => {
+                const nextMode = mount.mode === "read_write" ? "read_only" : "read_write";
+                const forced = forcedMountMode(mount.kind);
+                const editable = mount.kind === "project" || mount.kind === "volume";
+                const removable = mount.kind !== "project" ||
+                    primaryProject === "" ||
+                    mount.project !== primaryProject;
+                return (_jsxs("div", { style: {
+                        display: "flex",
+                        flexWrap: "wrap",
+                        alignItems: "center",
+                        gap: "8px",
+                    }, children: [_jsx("code", { style: {
+                                ...greyId,
+                                flex: 1,
+                                fontSize: "13px",
+                                color: "var(--dsw-alias-label-primary)",
+                            }, children: mountLabel(t, mount, modeControl !== "select") }), modeControl === "select" && (editable || forced !== undefined) ? (_jsx("select", { style: imageSelect, value: forced ?? mount.mode, disabled: !enabled || forced !== undefined, "aria-label": t("mountMode"), onChange: (event) => onUpdate?.({ ...mount, mode: event.target.value }, index), children: forced !== undefined ? (_jsx("option", { value: forced, children: forced === "read_write" ? t("readWrite") : t("readOnly") })) : (_jsxs(_Fragment, { children: [_jsx("option", { value: "read_only", children: t("readOnly") }), _jsx("option", { value: "read_write", children: t("readWrite") })] })) })) : null, modeControl === "remount" && editable && onUpdate !== undefined && (_jsx(ConfirmButton, { t: t, label: nextMode === "read_only"
+                                ? t("remountReadOnly")
+                                : t("remountReadWrite"), title: t("confirmTitle"), description: nextMode === "read_only"
+                                ? t("confirmRemountReadOnly")
+                                : t("confirmRemountReadWrite"), disabled: !enabled, onConfirm: () => onUpdate({ ...mount, mode: nextMode }, index) })), removable &&
+                            (confirmRemove ? (_jsx(ConfirmButton, { t: t, label: t("remove"), title: t("confirmTitle"), description: t("confirmRemoveMount"), disabled: !enabled, onConfirm: () => onRemove(mount) })) : (_jsx(Button, { variant: "outline", size: "sm", disabled: !enabled, onClick: () => onRemove(mount), children: t("remove") })))] }, mountLabel(t, mount)));
+            }), _jsx("div", { children: _jsx(Button, { variant: "outline", size: "sm", disabled: !enabled, onClick: openAdd, children: t("addMount") }) }), _jsx(Modal, { open: adding, onClose: () => setAdding(false), title: t("addMount"), closeLabel: t("cancel"), footer: _jsxs(_Fragment, { children: [_jsx(Button, { variant: "outline", size: "sm", onClick: () => setAdding(false), children: t("cancel") }), _jsx(Button, { variant: "primary", size: "sm", disabled: busy || !canAdd, onClick: submit, children: t("addMount") })] }), children: _jsxs("div", { style: {
+                        display: "flex",
+                        flexDirection: "column",
+                        gap: "12px",
+                    }, children: [_jsx(Field, { label: t("mountKind"), htmlFor: mountKindId, children: _jsxs("select", { id: mountKindId, style: imageSelect, value: draft.kind, disabled: busy, onChange: (event) => setDraft(emptyMount(event.target.value)), children: [_jsx("option", { value: "project", children: t("mountProject") }), _jsx("option", { value: "tmpfs", children: "tmpfs" }), _jsx("option", { value: "volume", children: t("mountVolume") }), _jsx("option", { value: "secret", children: t("mountSecret") })] }) }), kindField] }) }), directoryPicker === undefined ? null : (_jsx(DirectoryPickerModal, { t: t, open: browsing, root: projectsRoot, start: hostPathForProjectName(projectsRoot, draft.project), picker: directoryPicker, onSelect: (path) => {
+                    const project = projectNameFromHostPath(projectsRoot, path);
+                    if (project === undefined) {
+                        setBrowseError(t("browseOutsideRoot"));
+                        return;
+                    }
+                    updateDraft({ project });
+                    setBrowseError("");
+                    setBrowsing(false);
+                }, onClose: () => setBrowsing(false) }))] }));
+}

package/dist/client/container-card-images.d.ts

@@ -0,0 +1,37 @@
+import { type ImageView } from "./container-card-controller.js";
+import { type ContainerPluginKey } from "./locales.js";
+import { type ReactNode } from "react";
+export declare function ImageItem(props: {
+    t: (key: ContainerPluginKey) => string;
+    image: ImageView;
+    busy: boolean;
+    defaultImage: string;
+    onRemove: (imageId: string) => void;
+    onRebuild: (imageId: string) => void;
+    onSetDefault: (imageId: string) => void;
+}): ReactNode;
+export declare function BaseImageRow(props: {
+    t: (key: ContainerPluginKey) => string;
+    image: ImageView;
+    busy: boolean;
+    defaultImage: string;
+    onRebuild: (name: string) => void;
+    onPull: (name: string) => void;
+    onSetDefault: (imageId: string) => void;
+}): ReactNode;
+export declare function ImageBuildModal(props: {
+    t: (key: ContainerPluginKey) => string;
+    images: readonly {
+        imageId: string;
+        isBase: boolean;
+    }[];
+    open: boolean;
+    imageId: string;
+    parent: string;
+    packages: readonly string[];
+    onImageId: (value: string) => void;
+    onParent: (value: string) => void;
+    onPackages: (tags: string[]) => void;
+    onClose: () => void;
+    onBuild: () => void;
+}): ReactNode;

package/dist/client/container-card-images.js

@@ -0,0 +1,35 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// SPDX-FileCopyrightText: 2026 Elouan Martinet <exa@elou.world>
+//
+// SPDX-License-Identifier: MIT
+import { Chip, ConfirmButton, Field, TagInput, imageIdPattern, sanitizeImageId, } from "./container-card-shared.js";
+import { actions, hint, imageSelect, tableStyle, tdStyle, thStyle, wsBody, } from "./container-card-styles.js";
+import { Button, DisclosureRow, Input, Modal } from "@deepseek-ai/dsh-client-ui-primitives";
+import { useId, useState } from "react";
+export function ImageItem(props) {
+    const { t, image, busy, defaultImage, onRemove, onRebuild, onSetDefault } = props;
+    const [open, setOpen] = useState(false);
+    return (_jsx(DisclosureRow, { icon: _jsx("span", {}), title: image.imageId, open: open, expandable: true, onToggle: () => setOpen(!open), children: _jsxs("div", { style: wsBody, children: [_jsx("table", { style: tableStyle, children: _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("th", { style: thStyle, scope: "row", children: t("parent") }), _jsx("td", { style: tdStyle, children: image.parent })] }), _jsxs("tr", { children: [_jsx("th", { style: thStyle, scope: "row", children: t("imageTag") }), _jsx("td", { style: tdStyle, children: image.imageTag })] }), _jsxs("tr", { children: [_jsx("th", { style: thStyle, scope: "row", children: t("builtAt") }), _jsx("td", { style: tdStyle, children: image.builtAt })] }), _jsxs("tr", { children: [_jsx("th", { style: thStyle, scope: "row", children: t("packages") }), _jsx("td", { style: tdStyle, children: image.packages.length === 0 ? (t("none")) : (_jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: "6px" }, children: image.packages.map((pkg) => (_jsx(Chip, { t: t, label: pkg }, pkg))) })) })] })] }) }), _jsxs("div", { style: actions, children: [_jsx(ConfirmButton, { t: t, label: t("rebuildImage"), title: t("confirmTitle"), description: t("confirmRebuildImage"), disabled: busy, onConfirm: () => onRebuild(image.imageId) }), _jsx(ConfirmButton, { t: t, label: t("removeImage"), title: t("confirmTitle"), description: t("confirmRemoveImage"), disabled: busy, onConfirm: () => onRemove(image.imageId) }), _jsx(Button, { variant: "outline", size: "sm", disabled: busy || image.imageId === defaultImage, onClick: () => onSetDefault(image.imageId), children: t("setDefaultImage") })] })] }) }));
+}
+export function BaseImageRow(props) {
+    const { t, image, busy, defaultImage, onRebuild, onPull, onSetDefault } = props;
+    const [open, setOpen] = useState(false);
+    const pull = image.basePublic && (image.status === "missing" || image.status === "pulled");
+    const build = !image.basePublic && image.status === "missing";
+    const rebuild = !image.basePublic && image.status === "built";
+    return (_jsx(DisclosureRow, { icon: _jsx("span", {}), title: image.imageId, open: open, expandable: true, onToggle: () => setOpen(!open), children: _jsxs("div", { style: wsBody, children: [_jsx("table", { style: tableStyle, children: _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("th", { style: thStyle, scope: "row", children: t("primitive") }), _jsx("td", { style: tdStyle, children: image.primitive })] }), _jsxs("tr", { children: [_jsx("th", { style: thStyle, scope: "row", children: t("packageManager") }), _jsx("td", { style: tdStyle, children: image.packageManager })] }), _jsxs("tr", { children: [_jsx("th", { style: thStyle, scope: "row", children: t("status") }), _jsx("td", { style: tdStyle, children: image.status })] }), _jsxs("tr", { children: [_jsx("th", { style: thStyle, scope: "row", children: t("builtAt") }), _jsx("td", { style: tdStyle, children: image.builtAt === "" ? t("none") : image.builtAt })] }), _jsxs("tr", { children: [_jsx("th", { style: thStyle, scope: "row", children: t("packages") }), _jsx("td", { style: tdStyle, children: image.packages.length === 0 ? (t("none")) : (_jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: "6px" }, children: image.packages.map((pkg) => (_jsx(Chip, { t: t, label: pkg }, pkg))) })) })] })] }) }), _jsxs("div", { style: actions, children: [pull ? (_jsx(Button, { variant: "outline", size: "sm", disabled: busy, onClick: () => onPull(image.imageId), children: t("pullImage") })) : null, build ? (_jsx(Button, { variant: "outline", size: "sm", disabled: busy, onClick: () => onRebuild(image.imageId), children: t("build") })) : null, rebuild ? (_jsx(Button, { variant: "outline", size: "sm", disabled: busy, onClick: () => onRebuild(image.imageId), children: t("rebuildImage") })) : null, _jsx(Button, { variant: "outline", size: "sm", disabled: busy || image.imageId === defaultImage, onClick: () => onSetDefault(image.imageId), children: t("setDefaultImage") })] })] }) }));
+}
+export function ImageBuildModal(props) {
+    const { t, images, open, imageId, parent, packages, onImageId, onParent, onPackages, onClose, onBuild, } = props;
+    const canBuild = imageIdPattern.test(imageId) && parent.trim() !== "";
+    const imageIdLabel = useId();
+    const parentLabel = useId();
+    const packagesLabel = useId();
+    const baseImages = images.filter((image) => image.isBase);
+    const customImages = images.filter((image) => !image.isBase);
+    return (_jsx(Modal, { open: open, onClose: onClose, title: t("buildImageTitle"), closeLabel: t("cancel"), footer: _jsxs(_Fragment, { children: [_jsx(Button, { variant: "outline", size: "sm", onClick: onClose, children: t("cancel") }), _jsx(Button, { variant: "primary", size: "sm", disabled: !canBuild, onClick: onBuild, children: t("buildImage") })] }), children: _jsxs("div", { style: {
+                display: "flex",
+                flexDirection: "column",
+                gap: "12px",
+            }, children: [_jsxs(Field, { label: t("imageId"), htmlFor: imageIdLabel, children: [_jsx(Input, { id: imageIdLabel, value: imageId, onChange: (event) => onImageId(sanitizeImageId(event.target.value)) }), imageId !== "" && !imageIdPattern.test(imageId) ? (_jsx("p", { style: { ...hint, margin: 0 }, children: t("invalidImageId") })) : null] }), _jsx(Field, { label: t("parent"), htmlFor: parentLabel, children: _jsxs("select", { id: parentLabel, style: imageSelect, value: parent, onChange: (event) => onParent(event.target.value), children: [_jsx("option", { value: "", children: t("selectImage") }), baseImages.map((image) => (_jsx("option", { value: image.imageId, children: image.imageId }, image.imageId))), customImages.map((image) => (_jsx("option", { value: image.imageId, children: image.imageId }, image.imageId)))] }) }), _jsx(Field, { label: t("packages"), htmlFor: packagesLabel, children: _jsx(TagInput, { id: packagesLabel, t: t, value: packages, onChange: onPackages }) })] }) }));
+}

package/dist/client/container-card-paths.d.ts

@@ -0,0 +1,20 @@
+import { type ContainerPluginKey } from "./locales.js";
+import { type ReactNode } from "react";
+export interface PathEntry {
+    id: number;
+    path: string;
+}
+export declare function pathEntries(paths: readonly string[]): PathEntry[];
+export declare function PathsList(props: {
+    t: (key: ContainerPluginKey) => string;
+    entries: readonly PathEntry[];
+    busy: boolean;
+    onChange: (entries: PathEntry[]) => void;
+}): ReactNode;
+export declare function PathsEditor(props: {
+    t: (key: ContainerPluginKey) => string;
+    paths: readonly string[];
+    busy: boolean;
+    enabled: boolean;
+    onApply: (paths: string[]) => void;
+}): ReactNode;

package/dist/client/container-card-paths.js

@@ -0,0 +1,88 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// SPDX-FileCopyrightText: 2026 Elouan Martinet <exa@elou.world>
+//
+// SPDX-License-Identifier: MIT
+import { Field } from "./container-card-shared.js";
+import { greyId, hint } from "./container-card-styles.js";
+import { Button, Input, Modal } from "@deepseek-ai/dsh-client-ui-primitives";
+import { useId, useState } from "react";
+let nextPathId = 0;
+// pathEntries wraps a stored PATH list for editing.
+export function pathEntries(paths) {
+    return paths.map((path) => ({ id: nextPathId++, path }));
+}
+// The row keeps the handle, the path, and the three controls on one line; the
+// controls are compact symbols, so their meaning lives in the title and the
+// accessible name instead of a label.
+const pathRow = {
+    display: "flex",
+    alignItems: "center",
+    gap: "6px",
+};
+const pathInput = {
+    flex: 1,
+    minWidth: "120px",
+};
+const rowButton = {
+    padding: 0,
+    minWidth: "28px",
+};
+const dragHandle = {
+    cursor: "grab",
+    background: "none",
+    border: "none",
+    padding: 0,
+    color: "var(--dsw-alias-label-tertiary)",
+};
+// PathsList edits one ordered PATH-addition list: add (prepends), reorder by
+// dragging the handle or with the move buttons, edit in place, and remove. It
+// is controlled: every change reports the whole list through onChange.
+export function PathsList(props) {
+    const { t, entries, busy, onChange } = props;
+    const [draft, setDraft] = useState("");
+    const [dragIndex, setDragIndex] = useState(null);
+    const addId = useId();
+    const move = (from, to) => {
+        if (from === to || to < 0 || to >= entries.length)
+            return;
+        const next = [...entries];
+        const [item] = next.splice(from, 1);
+        next.splice(to, 0, item);
+        onChange(next);
+    };
+    const add = () => {
+        const path = draft.trim();
+        if (path === "")
+            return;
+        onChange([{ id: nextPathId++, path }, ...entries]);
+        setDraft("");
+    };
+    const update = (index, path) => {
+        onChange(entries.map((entry, at) => (at === index ? { ...entry, path } : entry)));
+    };
+    return (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [_jsx(Field, { label: t("addPath"), htmlFor: addId, children: _jsxs("div", { style: { ...pathRow, gap: "8px" }, children: [_jsx(Input, { id: addId, value: draft, disabled: busy, onChange: (event) => setDraft(event.target.value), style: pathInput }), _jsx(Button, { variant: "outline", size: "sm", disabled: busy || draft.trim() === "", onClick: add, children: t("add") })] }) }), entries.length === 0 ? (_jsx("p", { style: { ...hint, margin: 0 }, children: t("noPaths") })) : (entries.map((entry, index) => (_jsxs("div", { style: pathRow, children: [_jsx("button", { type: "button", title: t("dragToReorder"), "aria-label": t("dragToReorder"), draggable: !busy, onDragStart: () => setDragIndex(index), onDragOver: (event) => event.preventDefault(), onDrop: () => {
+                            if (dragIndex !== null)
+                                move(dragIndex, index);
+                            setDragIndex(null);
+                        }, style: dragHandle, children: "\u2261" }), _jsx(Input, { value: entry.path, disabled: busy, onChange: (event) => update(index, event.target.value), style: pathInput }), _jsx(Button, { variant: "outline", size: "sm", title: t("moveUp"), "aria-label": t("moveUp"), disabled: busy || index === 0, onClick: () => move(index, index - 1), style: rowButton, children: "\u2191" }), _jsx(Button, { variant: "outline", size: "sm", title: t("moveDown"), "aria-label": t("moveDown"), disabled: busy || index === entries.length - 1, onClick: () => move(index, index + 1), style: rowButton, children: "\u2193" }), _jsx(Button, { variant: "outline", size: "sm", title: t("remove"), "aria-label": t("remove"), disabled: busy, onClick: () => onChange(entries.filter((_, at) => at !== index)), style: rowButton, children: "\u00D7" })] }, entry.id))))] }));
+}
+// PathsEditor shows the container's ordered PATH additions and edits them in a
+// modal around PathsList. Apply sends the whole list at once.
+export function PathsEditor(props) {
+    const { t, paths, busy, enabled, onApply } = props;
+    const [open, setOpen] = useState(false);
+    const [draft, setDraft] = useState([]);
+    const openEditor = () => {
+        setDraft(pathEntries(paths));
+        setOpen(true);
+    };
+    const apply = () => {
+        onApply(draft.map((entry) => entry.path));
+        setOpen(false);
+    };
+    return (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [paths.length === 0 ? (_jsx("p", { style: { ...hint, margin: 0 }, children: t("noPaths") })) : (paths.map((path) => (_jsx("code", { style: {
+                    ...greyId,
+                    fontSize: "13px",
+                    color: "var(--dsw-alias-label-primary)",
+                }, children: path }, path)))), _jsx("div", { children: _jsx(Button, { variant: "outline", size: "sm", disabled: !enabled, onClick: openEditor, children: t("editPaths") }) }), _jsx(Modal, { open: open, onClose: () => setOpen(false), title: t("pathsTitle"), closeLabel: t("cancel"), footer: _jsxs(_Fragment, { children: [_jsx(Button, { variant: "outline", size: "sm", onClick: () => setOpen(false), children: t("cancel") }), _jsx(Button, { variant: "primary", size: "sm", disabled: busy, onClick: apply, children: t("apply") })] }), children: _jsx(PathsList, { t: t, entries: draft, busy: busy, onChange: setDraft }) })] }));
+}

package/dist/client/container-card-row.d.ts

@@ -0,0 +1,30 @@
+import { type ContainerView, type MountInput } from "./container-card-controller.js";
+import { type DirectoryPickerFace } from "./directory-picker.js";
+import { type ContainerPluginKey } from "./locales.js";
+import { type ReactNode } from "react";
+export declare function ContainerRow(props: {
+    t: (key: ContainerPluginKey) => string;
+    container: ContainerView;
+    images: readonly {
+        imageId: string;
+    }[];
+    volumes: readonly {
+        name: string;
+    }[];
+    secrets: readonly {
+        name: string;
+    }[];
+    busy: boolean;
+    onRemove: (workspace: string) => void;
+    onRecreate: (workspace: string, image: string, env?: Record<string, string>) => void;
+    onAddContainerMount: (workspace: string, container: string, mount: MountInput) => void;
+    onRemoveContainerMount: (workspace: string, container: string, mount: MountInput) => void;
+    onUpdateContainerMount: (workspace: string, container: string, mount: MountInput) => void;
+    onSetContainerPaths: (workspace: string, container: string, paths: readonly string[]) => void;
+    onAddContainerSecret: (workspace: string, envVar: string, secret: string) => void;
+    onRemoveContainerSecret: (workspace: string, envVar: string) => void;
+    projectName: string;
+    projectsRoot: string;
+    directoryPicker?: DirectoryPickerFace;
+}): ReactNode;
+export { CreateContainerModal } from "./container-card-create-modal.js";

package/dist/client/container-card-row.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { EnvEditor, MountsEditor } from "./container-card-editors.js";
+import { PathsEditor } from "./container-card-paths.js";
+import { ConfirmButton, mountViewToInput } from "./container-card-shared.js";
+import { actions, containerHeader, containerRow, greyId, imageSelect, tableStyle, tdStyle, thStyle, wsBody, } from "./container-card-styles.js";
+import { Button, DisclosureRow, Input, Pill } from "@deepseek-ai/dsh-client-ui-primitives";
+import { useState } from "react";
+export function ContainerRow(props) {
+    const { t, container, images, volumes, secrets, busy, onRemove, onRecreate, onAddContainerMount, onRemoveContainerMount, onUpdateContainerMount, onSetContainerPaths, onAddContainerSecret, onRemoveContainerSecret, projectName, projectsRoot, directoryPicker, } = props;
+    const [selected, setSelected] = useState(container.imageId);
+    const [env, setEnv] = useState(container.env);
+    const [envOpen, setEnvOpen] = useState(false);
+    const [mountOpen, setMountOpen] = useState(false);
+    const [pathOpen, setPathOpen] = useState(false);
+    const [secretOpen, setSecretOpen] = useState(false);
+    const [attachSecret, setAttachSecret] = useState("");
+    const [attachVar, setAttachVar] = useState("");
+    const enabled = container.workspaceSlug !== "" && !busy;
+    const projects = container.mounts
+        .map((mount) => mount.projectName)
+        .join(", ");
+    const envEntries = Object.entries(container.env);
+    const secretEntries = Object.entries(container.secretEnv);
+    const attach = () => {
+        const envVar = attachVar.trim();
+        if (envVar === "" || attachSecret === "")
+            return;
+        onAddContainerSecret(container.workspaceSlug, envVar, attachSecret);
+        setAttachVar("");
+    };
+    return (_jsxs("div", { style: containerRow, children: [_jsxs("div", { style: containerHeader, children: [_jsx("strong", { style: { color: "var(--dsw-alias-label-primary)" }, children: container.containerName }), _jsx(Pill, { children: container.status })] }), _jsx("table", { style: tableStyle, children: _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("th", { style: thStyle, scope: "row", children: t("image") }), _jsx("td", { style: tdStyle, children: container.imageId })] }), _jsxs("tr", { children: [_jsx("th", { style: thStyle, scope: "row", children: t("created") }), _jsx("td", { style: tdStyle, children: container.createdAt })] }), projects !== "" ? (_jsxs("tr", { children: [_jsx("th", { style: thStyle, scope: "row", children: t("projects") }), _jsx("td", { style: tdStyle, children: projects })] })) : null, envEntries.length > 0 ? (_jsxs("tr", { children: [_jsx("th", { style: thStyle, scope: "row", children: t("env") }), _jsx("td", { style: tdStyle, children: envEntries.map(([key]) => key).join(", ") })] })) : null, secretEntries.length > 0 ? (_jsxs("tr", { children: [_jsx("th", { style: thStyle, scope: "row", children: t("secretEnv") }), _jsx("td", { style: tdStyle, children: secretEntries
+                                        .map(([envVar, secretName]) => `${envVar}=${secretName}`)
+                                        .join(", ") })] })) : null] }) }), _jsxs("div", { style: actions, children: [_jsx(ConfirmButton, { t: t, label: t("remove"), title: t("confirmTitle"), description: t("confirmRemoveContainer"), disabled: !enabled, onConfirm: () => onRemove(container.workspaceSlug) }), _jsx(ConfirmButton, { t: t, label: t("recreate"), title: t("confirmTitle"), description: t("confirmRecreate"), disabled: !enabled, onConfirm: () => onRecreate(container.workspaceSlug, "", env) }), _jsxs("select", { style: imageSelect, value: selected, disabled: !enabled, onChange: (event) => setSelected(event.target.value), "aria-label": t("recreateWithImage"), children: [container.imageId === "" ? (_jsx("option", { value: "", children: t("none") })) : null, images.map((image) => (_jsx("option", { value: image.imageId, children: image.imageId }, image.imageId)))] }), _jsx(ConfirmButton, { t: t, label: t("recreateWithImage"), title: t("confirmTitle"), description: t("confirmRecreate"), disabled: !enabled || selected === "", onConfirm: () => onRecreate(container.workspaceSlug, selected, env) })] }), _jsx(DisclosureRow, { icon: _jsx("span", {}), title: t("envTitle"), open: envOpen, expandable: true, onToggle: () => setEnvOpen(!envOpen), children: _jsx("div", { style: wsBody, children: _jsx(EnvEditor, { t: t, env: env, busy: busy, onChange: setEnv }) }) }), _jsx(DisclosureRow, { icon: _jsx("span", {}), title: t("mountsTitle"), open: mountOpen, expandable: true, onToggle: () => setMountOpen(!mountOpen), children: _jsx("div", { style: wsBody, children: _jsx(MountsEditor, { t: t, mounts: container.mounts.map(mountViewToInput), volumes: volumes, secrets: secrets, busy: busy, enabled: enabled, projectsRoot: projectsRoot, directoryPicker: directoryPicker, confirmRemove: true, primaryProject: container.containerName === "default" ? projectName : "", onUpdate: (mount) => onUpdateContainerMount(container.workspaceSlug, container.containerName, mount), onRemove: (mount) => onRemoveContainerMount(container.workspaceSlug, container.containerName, mount), onAdd: (mount) => onAddContainerMount(container.workspaceSlug, container.containerName, mount) }) }) }), _jsx(DisclosureRow, { icon: _jsx("span", {}), title: t("pathsTitle"), open: pathOpen, expandable: true, onToggle: () => setPathOpen(!pathOpen), children: _jsx("div", { style: wsBody, children: _jsx(PathsEditor, { t: t, paths: container.paths, busy: busy, enabled: enabled, onApply: (paths) => onSetContainerPaths(container.workspaceSlug, container.containerName, paths) }) }) }), _jsx(DisclosureRow, { icon: _jsx("span", {}), title: t("containerSecretsTitle"), open: secretOpen, expandable: true, onToggle: () => setSecretOpen(!secretOpen), children: _jsxs("div", { style: wsBody, children: [secretEntries.map(([envVar, secretName]) => (_jsxs("div", { style: {
+                                display: "flex",
+                                flexWrap: "wrap",
+                                alignItems: "center",
+                                gap: "8px",
+                            }, children: [_jsxs("code", { style: {
+                                        ...greyId,
+                                        flex: 1,
+                                        fontSize: "13px",
+                                        color: "var(--dsw-alias-label-primary)",
+                                    }, children: [envVar, "=", secretName] }), _jsx(ConfirmButton, { t: t, label: t("detachSecret"), title: t("confirmTitle"), description: t("confirmDetachSecret"), disabled: busy, onConfirm: () => onRemoveContainerSecret(container.workspaceSlug, envVar) })] }, envVar))), _jsxs("div", { style: {
+                                display: "flex",
+                                flexWrap: "wrap",
+                                alignItems: "center",
+                                gap: "8px",
+                                paddingTop: "8px",
+                            }, children: [_jsxs("select", { style: imageSelect, value: attachSecret, disabled: !enabled, onChange: (event) => setAttachSecret(event.target.value), "aria-label": t("attachSecret"), children: [secrets.length === 0 ? (_jsx("option", { value: "", children: t("none") })) : null, secrets.map((secret) => (_jsx("option", { value: secret.name, children: secret.name }, secret.name)))] }), _jsx(Input, { value: attachVar, disabled: !enabled, placeholder: t("secretEnvName"), onChange: (event) => setAttachVar(event.target.value), onKeyDown: (event) => {
+                                        if (event.key === "Enter")
+                                            attach();
+                                    }, style: { width: "200px" } }), _jsx(Button, { variant: "outline", size: "sm", disabled: !enabled || attachVar.trim() === "" || attachSecret === "", onClick: attach, children: t("attachSecret") })] })] }) })] }));
+}
+export { CreateContainerModal } from "./container-card-create-modal.js";

package/dist/client/container-card-secrets.d.ts

@@ -0,0 +1,21 @@
+import { type ContainerPluginKey } from "./locales.js";
+import { type ReactNode } from "react";
+export declare function SecretRow(props: {
+    t: (key: ContainerPluginKey) => string;
+    name: string;
+    busy: boolean;
+    writable: boolean;
+    onSet: (name: string, value: string) => void;
+    onRemove: (name: string) => void;
+}): ReactNode;
+export declare function SecretsSection(props: {
+    t: (key: ContainerPluginKey) => string;
+    secrets: readonly {
+        name: string;
+    }[];
+    busy: boolean;
+    writable: boolean;
+    onCreate: (name: string, length?: number, charset?: string) => void;
+    onRemove: (name: string) => void;
+    onSet: (name: string, value: string) => void;
+}): ReactNode;