@exagone313/dsh-podman 0.2.0-rc.4 → 0.3.0

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

@@ -2,42 +2,83 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // SPDX-FileCopyrightText: 2026 Elouan Martinet <exa@elou.world>
 //
 // SPDX-License-Identifier: MIT
-import { ConfirmButton, Field, emptyMount, mountLabel } from "./container-card-shared.js";
+import { ConfirmButton, emptyMount, Field, 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 { commitEnvDraft, emptyEnvDraft, envRows, removeEnvRow, renameEnvKey, setEnvValue, } from "../env-rows.js";
+import { hostPathForProjectName, projectNameFromHostPath, } from "../project-path.js";
 import { Button, Input, Modal } from "@deepseek-ai/dsh-client-ui-primitives";
-import { useId, useState } from "react";
+import { useId, useRef, useState } from "react";
+// One stable key per env row, so renaming a variable does not remount the row
+// and drop focus mid-keystroke. The parent keeps env as a record; rows are
+// positional, so the id list is aligned by index.
+let nextEnvId = 0;
 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;
+    // The row being typed: it becomes a record entry only once its key is a real,
+    // unused variable name, so an abandoned Add cannot apply a placeholder.
+    const [draft, setDraft] = useState(undefined);
+    const rows = envRows(env, draft);
+    const idsRef = useRef([]);
+    if (idsRef.current.length !== rows.length) {
+        const ids = idsRef.current.slice(0, rows.length);
+        while (ids.length < rows.length)
+            ids.push(nextEnvId++);
+        idsRef.current = ids;
+    }
+    const commitDraft = () => {
+        if (draft === undefined)
+            return;
+        if (draft.key === "") {
+            // An untouched row is dropped rather than kept as an empty entry.
+            setDraft(undefined);
+            return;
+        }
+        const committed = commitEnvDraft(env, draft);
+        // A duplicate key keeps the row open so the caller can fix it.
+        if (committed === undefined)
+            return;
+        setDraft(undefined);
+        onChange(committed);
+    };
+    const updateKey = (index, key) => {
+        const row = rows[index];
+        if (row.pending) {
+            setDraft({ key, value: row.value });
+            return;
         }
-        next[key] = value;
-        onChange(next);
+        onChange(renameEnvKey(env, index, key));
     };
-    const updateValue = (key, value) => {
-        onChange({ ...env, [key]: value });
+    const updateValue = (index, value) => {
+        const row = rows[index];
+        if (row.pending) {
+            setDraft({ key: row.key, value });
+            return;
+        }
+        onChange(setEnvValue(env, index, value));
     };
-    const remove = (key) => {
-        const next = { ...env };
-        delete next[key];
-        onChange(next);
+    const remove = (index) => {
+        if (rows[index]?.pending === true) {
+            setDraft(undefined);
+            return;
+        }
+        onChange(removeEnvRow(env, index));
     };
     const add = () => {
-        onChange({ ...env, "": "" });
+        setDraft((current) => current ?? emptyEnvDraft());
     };
-    return (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [entries.map(([key, value]) => (_jsxs("div", { style: {
+    return (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [rows.map((row, index) => (_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") }) })] }));
+                }, children: [_jsx(Input, { value: row.key, disabled: busy, placeholder: t("envKey"), "aria-label": t("envKey"), autoFocus: row.pending, onChange: (event) => updateKey(index, event.target.value), onBlur: row.pending ? commitDraft : undefined, onKeyDown: row.pending
+                            ? (event) => {
+                                if (event.key === "Enter")
+                                    commitDraft();
+                            }
+                            : undefined, style: { width: "160px" } }), _jsx(Input, { value: row.value, disabled: busy, placeholder: t("envValue"), "aria-label": t("envValue"), onChange: (event) => updateValue(index, event.target.value), onBlur: row.pending ? commitDraft : undefined, style: { width: "200px" } }), _jsx(Button, { variant: "outline", size: "sm", disabled: busy, onClick: () => remove(index), children: t("removeEnv") })] }, idsRef.current[index]))), _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;
@@ -72,12 +113,28 @@ export function MountsEditor(props) {
         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") })] }) })] }));
+    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 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" ||
@@ -93,17 +150,32 @@ export function MountsEditor(props) {
                                 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)));
+                            }, 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", {
+                                        mount: mountLabel(t, mount, false),
+                                    })
+                                    : t("confirmRemountReadWrite", {
+                                        mount: mountLabel(t, mount, false),
+                                    }), disabled: !enabled, onConfirm: () => onUpdate({ ...mount, mode: nextMode }, index) })), removable &&
+                            (confirmRemove
+                                ? (_jsx(ConfirmButton, { t: t, label: t("remove"), title: t("confirmTitle"), description: t("confirmRemoveMount", {
+                                        mount: mountLabel(t, mount, false),
+                                    }), disabled: !enabled, onConfirm: () => onRemove(mount) }))
+                                : (_jsx(Button, { variant: "outline", size: "sm", disabled: !enabled, onClick: () => onRemove(mount), children: t("remove") })))] }, index));
             }), _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) => {
+                    }, 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: t("mountTmpfs") }), _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"));

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

@@ -1,8 +1,8 @@
 import { type ImageView } from "./container-card-controller.js";
-import { type ContainerPluginKey } from "./locales.js";
+import type { Translate } from "./locales.js";
 import { type ReactNode } from "react";
 export declare function ImageItem(props: {
-    t: (key: ContainerPluginKey) => string;
+    t: Translate;
     image: ImageView;
     busy: boolean;
     defaultImage: string;
@@ -11,7 +11,7 @@ export declare function ImageItem(props: {
     onSetDefault: (imageId: string) => void;
 }): ReactNode;
 export declare function BaseImageRow(props: {
-    t: (key: ContainerPluginKey) => string;
+    t: Translate;
     image: ImageView;
     busy: boolean;
     defaultImage: string;
@@ -20,7 +20,7 @@ export declare function BaseImageRow(props: {
     onSetDefault: (imageId: string) => void;
 }): ReactNode;
 export declare function ImageBuildModal(props: {
-    t: (key: ContainerPluginKey) => string;
+    t: Translate;
     images: readonly {
         imageId: string;
         isBase: boolean;

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

@@ -2,22 +2,33 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // 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 { Chip, ConfirmButton, Field, imageIdPattern, sanitizeImageId, TagInput, } 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 { 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") })] })] }) }));
+    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", { image: image.imageId }), disabled: busy, onConfirm: () => onRebuild(image.imageId) }), _jsx(ConfirmButton, { t: t, label: t("removeImage"), title: t("confirmTitle"), description: t("confirmRemoveImage", { image: image.imageId }), 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 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") })] })] }) }));
+    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;
@@ -31,5 +42,7 @@ export function ImageBuildModal(props) {
                 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 }) })] }) }));
+            }, 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

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

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

@@ -5,7 +5,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 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";
+import { useId, useMemo, useState } from "react";
 let nextPathId = 0;
 // pathEntries wraps a stored PATH list for editing.
 export function pathEntries(paths) {
@@ -60,11 +60,13 @@ export function PathsList(props) {
     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))))] }));
+    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.
@@ -72,6 +74,9 @@ export function PathsEditor(props) {
     const { t, paths, busy, enabled, onApply } = props;
     const [open, setOpen] = useState(false);
     const [draft, setDraft] = useState([]);
+    // The read-only rows reuse the same ids as the editor, so two identical PATH
+    // entries never collide on a React key.
+    const shown = useMemo(() => pathEntries(paths), [paths]);
     const openEditor = () => {
         setDraft(pathEntries(paths));
         setOpen(true);
@@ -80,9 +85,11 @@ export function PathsEditor(props) {
         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 }) })] }));
+    return (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [paths.length === 0
+                ? _jsx("p", { style: { ...hint, margin: 0 }, children: t("noPaths") })
+                : (shown.map((entry) => (_jsx("code", { style: {
+                        ...greyId,
+                        fontSize: "13px",
+                        color: "var(--dsw-alias-label-primary)",
+                    }, children: entry.path }, entry.id)))), _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

@@ -1,9 +1,13 @@
 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 ContainerPluginKey, type Translate } from "./locales.js";
 import { type ReactNode } from "react";
+export declare function mountSummaries(mounts: readonly ContainerView["mounts"][number][]): {
+    key: ContainerPluginKey;
+    values: string[];
+}[];
 export declare function ContainerRow(props: {
-    t: (key: ContainerPluginKey) => string;
+    t: Translate;
     container: ContainerView;
     images: readonly {
         imageId: string;
@@ -15,14 +19,14 @@ export declare function ContainerRow(props: {
         name: string;
     }[];
     busy: boolean;
-    onRemove: (workspace: string) => void;
-    onRecreate: (workspace: string, image: string, env?: Record<string, string>) => void;
+    onRemove: (workspace: string, container: string) => void;
+    onRecreate: (workspace: string, container: 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;
+    onAddContainerSecret: (workspace: string, container: string, envVar: string, secret: string) => void;
+    onRemoveContainerSecret: (workspace: string, container: string, envVar: string) => void;
     projectName: string;
     projectsRoot: string;
     directoryPicker?: DirectoryPickerFace;

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

@@ -1,14 +1,62 @@
 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 { ConfirmButton, mountKindShort, 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";
+import { Button, DisclosureRow, Input, Pill, } from "@deepseek-ai/dsh-client-ui-primitives";
+import { useEffect, useState } from "react";
+// The order the summary table lists mount kinds in.
+const MOUNT_ROWS = [
+    { key: "projects", kind: "project" },
+    { key: "volumesTitle", kind: "volume" },
+    { key: "mountTmpfs", kind: "tmpfs" },
+    { key: "secretsTitle", kind: "secret" },
+];
+// One summary row per mount kind present on a container, so a volume, tmpfs or
+// secret never contributes an empty project name to the Projects line. A mount
+// whose identifying field is empty is skipped, and a kind with no mount left
+// gets no row at all.
+export function mountSummaries(mounts) {
+    const buckets = new Map(MOUNT_ROWS.map(({ kind }) => [kind, []]));
+    for (const mount of mounts) {
+        const kind = mountKindShort(mount.kind);
+        const values = buckets.get(kind);
+        if (values === undefined)
+            continue;
+        const identifier = kind === "project"
+            ? mount.projectName
+            : kind === "volume"
+                ? mount.volume
+                : kind === "secret"
+                    ? mount.secret
+                    : mount.destination;
+        if (identifier === "")
+            continue;
+        values.push(kind === "tmpfs" || mount.destination === ""
+            ? identifier
+            : `${identifier} → ${mount.destination}`);
+    }
+    return MOUNT_ROWS.flatMap(({ key, kind }) => {
+        const values = buckets.get(kind) ?? [];
+        return values.length === 0 ? [] : [{ key, values }];
+    });
+}
 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);
+    // The row is keyed by container name, so it survives a snapshot refresh.
+    // Re-sync the image draft when the live image changes, or the select would
+    // keep offering and re-sending the previous one.
+    useEffect(() => {
+        setSelected(container.imageId);
+    }, [container.imageId]);
+    // Env is a fresh object on every snapshot; key the resync on its content so
+    // an unchanged refresh does not clobber an in-progress edit.
+    const serverEnv = JSON.stringify(container.env);
+    useEffect(() => {
+        setEnv(container.env);
+    }, [serverEnv]);
     const [envOpen, setEnvOpen] = useState(false);
     const [mountOpen, setMountOpen] = useState(false);
     const [pathOpen, setPathOpen] = useState(false);
@@ -16,21 +64,36 @@ export function ContainerRow(props) {
     const [attachSecret, setAttachSecret] = useState("");
     const [attachVar, setAttachVar] = useState("");
     const enabled = container.workspaceSlug !== "" && !busy;
-    const projects = container.mounts
-        .map((mount) => mount.projectName)
-        .join(", ");
+    const mountRows = mountSummaries(container.mounts);
     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);
+        onAddContainerSecret(container.workspaceSlug, container.containerName, 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: {
+    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 })] }), mountRows.map(({ key, values }) => (_jsxs("tr", { children: [_jsx("th", { style: thStyle, scope: "row", children: t(key) }), _jsx("td", { style: tdStyle, children: values.join(", ") })] }, key))), 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", {
+                            workspace: projectName,
+                            container: container.containerName,
+                        }), disabled: !enabled, onConfirm: () => onRemove(container.workspaceSlug, container.containerName) }), _jsx(ConfirmButton, { t: t, label: t("recreate"), title: t("confirmTitle"), description: t("confirmRecreate", {
+                            workspace: projectName,
+                            container: container.containerName,
+                        }), disabled: !enabled, onConfirm: () => onRecreate(container.workspaceSlug, container.containerName, "", 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", {
+                            workspace: projectName,
+                            container: container.containerName,
+                        }), disabled: !enabled || selected === "", onConfirm: () => onRecreate(container.workspaceSlug, container.containerName, 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",
@@ -40,15 +103,21 @@ export function ContainerRow(props) {
                                         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: {
+                                    }, children: [envVar, "=", secretName] }), _jsx(ConfirmButton, { t: t, label: t("detachSecret"), title: t("confirmTitle"), description: t("confirmDetachSecret", {
+                                        env: envVar,
+                                        secret: secretName,
+                                    }), disabled: busy, onConfirm: () => onRemoveContainerSecret(container.workspaceSlug, container.containerName, 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) => {
+                            }, 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") })] })] }) })] }));
+                                    }, 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

@@ -1,7 +1,7 @@
-import { type ContainerPluginKey } from "./locales.js";
+import type { Translate } from "./locales.js";
 import { type ReactNode } from "react";
 export declare function SecretRow(props: {
-    t: (key: ContainerPluginKey) => string;
+    t: Translate;
     name: string;
     busy: boolean;
     writable: boolean;
@@ -9,7 +9,7 @@ export declare function SecretRow(props: {
     onRemove: (name: string) => void;
 }): ReactNode;
 export declare function SecretsSection(props: {
-    t: (key: ContainerPluginKey) => string;
+    t: Translate;
     secrets: readonly {
         name: string;
     }[];