@exagone313/dsh-podman 0.2.0-rc.3 → 0.2.0

package/dist/client/container-card-default-env.d.ts

@@ -0,0 +1,10 @@
+import type { Translate } from "./locales.js";
+import { type ReactNode } from "react";
+export declare function DefaultEnvironmentSection(props: {
+    t: Translate;
+    env: Record<string, string>;
+    busy: boolean;
+    writable: boolean;
+    onSave: (env: Record<string, string>) => void;
+    onSync: (workspace: string) => void;
+}): ReactNode;

package/dist/client/container-card-default-env.js

@@ -0,0 +1,69 @@
+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
+// The default container environment: the map seeded into every new container,
+// edited with the same EnvEditor a container row uses. The setting is
+// persisted, so the draft is committed with Save, and the git shortcut fills
+// the four identity variables in that same draft.
+import { EnvEditor } from "./container-card-editors.js";
+import { ConfirmButton, Field } from "./container-card-shared.js";
+import { hint, sectionTitle, wsBody } from "./container-card-styles.js";
+import { commitIdentityAction, readGitIdentity, setGitIdentity, } from "../container-env.js";
+import { Button, Input, Modal } from "@deepseek-ai/dsh-client-ui-primitives";
+import { useEffect, useId, useState } from "react";
+export function DefaultEnvironmentSection(props) {
+    const { t, env, busy, writable, onSave, onSync } = props;
+    const [draft, setDraft] = useState(env);
+    const [gitOpen, setGitOpen] = useState(false);
+    const [gitName, setGitName] = useState("");
+    const [gitEmail, setGitEmail] = useState("");
+    const nameId = useId();
+    const emailId = useId();
+    // An external settings change resyncs the draft; an unrelated refresh does
+    // not, so an edit in progress is never clobbered. Same rule as a container
+    // row's environment editor.
+    const serverEnv = JSON.stringify(env);
+    useEffect(() => {
+        setDraft(env);
+    }, [serverEnv]);
+    const dirty = JSON.stringify(draft) !== serverEnv;
+    const disabled = busy || !writable;
+    // The identity popup applies into the draft; when the draft's only drift from
+    // the saved environment is inside the identity keys, it commits straight, so
+    // a name/email edit is not left unsaved behind an easy-to-miss Save click.
+    // When the popup restores the saved identity exactly, its pending change is
+    // discarded and the editor falls back to the persisted defaults, instead of
+    // keeping the stale identity (a no-op save would not resync the draft, since
+    // the server value did not change).
+    const commitIdentity = (next) => {
+        const action = commitIdentityAction(env, draft, next);
+        if (action === "save") {
+            onSave(next);
+        }
+        else if (action === "discard") {
+            setDraft(env);
+        }
+        else {
+            setDraft(next);
+        }
+    };
+    const openGit = () => {
+        const identity = readGitIdentity(draft);
+        setGitName(identity.name);
+        setGitEmail(identity.email);
+        setGitOpen(true);
+    };
+    return (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [_jsx("div", { style: sectionTitle, children: t("defaultEnvironment") }), _jsx("div", { style: wsBody, children: _jsx(EnvEditor, { t: t, env: draft, busy: disabled, onChange: setDraft }) }), _jsxs("div", { style: {
+                    display: "flex",
+                    flexWrap: "wrap",
+                    alignItems: "center",
+                    gap: "8px",
+                }, children: [_jsx(Button, { variant: "outline", size: "sm", disabled: disabled, onClick: openGit, children: t("gitIdentity") }), _jsx(Button, { variant: "primary", size: "sm", disabled: disabled || !dirty, onClick: () => onSave(draft), children: t("save") }), _jsx(Button, { variant: "ghost", size: "sm", disabled: busy || !dirty, onClick: () => setDraft(env), children: t("discard") })] }), _jsx("div", { children: _jsx(ConfirmButton, { t: t, label: t("applyDefaults"), title: t("confirmTitle"), description: t("confirmApplyDefaults"), disabled: disabled || dirty || Object.keys(env).length === 0, onConfirm: () => onSync("") }) }), _jsx("p", { style: { ...hint, margin: 0 }, children: t("defaultEnvironmentHint") }), _jsx(Modal, { open: gitOpen, onClose: () => setGitOpen(false), title: t("gitIdentity"), closeLabel: t("cancel"), footer: _jsxs(_Fragment, { children: [_jsx(Button, { variant: "outline", size: "sm", disabled: busy || readGitIdentity(draft).name === "", onClick: () => {
+                                commitIdentity(setGitIdentity(draft, "", ""));
+                                setGitOpen(false);
+                            }, children: t("clear") }), _jsx(Button, { variant: "outline", size: "sm", onClick: () => setGitOpen(false), children: t("cancel") }), _jsx(Button, { variant: "primary", size: "sm", disabled: busy || gitName === "" || gitEmail === "", onClick: () => {
+                                commitIdentity(setGitIdentity(draft, gitName, gitEmail));
+                                setGitOpen(false);
+                            }, children: t("apply") })] }), children: _jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "12px" }, children: [_jsx(Field, { label: t("gitName"), htmlFor: nameId, children: _jsx(Input, { id: nameId, value: gitName, disabled: busy, onChange: (event) => setGitName(event.target.value) }) }), _jsx(Field, { label: t("gitEmail"), htmlFor: emailId, children: _jsx(Input, { id: emailId, value: gitEmail, disabled: busy, onChange: (event) => setGitEmail(event.target.value) }) }), _jsx("p", { style: { ...hint, margin: 0 }, children: t("gitIdentityHint") })] }) })] }));
+}

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

@@ -1,8 +1,8 @@
 import { type DirectoryPickerFace } from "./directory-picker.js";
-import { type ContainerPluginKey } from "./locales.js";
+import type { Translate } from "./locales.js";
 import { type ReactNode } from "react";
 export declare function DirectoryPickerModal(props: {
-    t: (key: ContainerPluginKey) => string;
+    t: Translate;
     open: boolean;
     root: string;
     start: string;

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

@@ -1,7 +1,7 @@
 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 { confineToRoot, crumbLabel, rootCrumbs } from "../project-path.js";
+import { Button, IconCheckOutlineRegular, IconChevronRightOutlineRegular, IconFolderCloseRegular, IconFolderOpenRegular, 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;
@@ -128,13 +128,21 @@ export function DirectoryPickerModal(props) {
     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") })] })] }) }));
+    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(IconChevronRightOutlineRegular, { 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(IconCheckOutlineRegular, { 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" })] }) }));
+                : "dsh-podman-directory-row", "aria-current": selected ? true : undefined, disabled: busy, onClick: () => onPick(entry), children: [selected
+                    ? (_jsx(IconFolderOpenRegular, { size: 16, className: "dsh-podman-directory-rowicon-selected" }))
+                    : (_jsx(IconFolderCloseRegular, { size: 16, className: "dsh-podman-directory-rowicon" })), _jsx("span", { className: "dsh-podman-directory-rowname", children: entry.name }), _jsx(IconChevronRightOutlineRegular, { size: 12, className: "dsh-podman-directory-rowchevron" })] }) }));
 }
 function toLevel(listing) {
     return {

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

@@ -1,15 +1,15 @@
 import { type MountInput } from "./container-card-controller.js";
 import { type DirectoryPickerFace } from "./directory-picker.js";
-import { type ContainerPluginKey } from "./locales.js";
+import type { Translate } from "./locales.js";
 import { type ReactNode } from "react";
 export declare function EnvEditor(props: {
-    t: (key: ContainerPluginKey) => string;
+    t: Translate;
     env: Record<string, string>;
     busy: boolean;
     onChange: (env: Record<string, string>) => void;
 }): ReactNode;
 export declare function MountsEditor(props: {
-    t: (key: ContainerPluginKey) => string;
+    t: Translate;
     mounts: readonly MountInput[];
     volumes: readonly {
         name: string;

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;