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

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;
     }[];

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

@@ -2,9 +2,9 @@ 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, namePattern, sanitizeName } from "./container-card-shared.js";
-import { greyId, hint, imageSelect, sectionTitle, wsBody } from "./container-card-styles.js";
-import { Button, DisclosureRow, Input, Modal } from "@deepseek-ai/dsh-client-ui-primitives";
+import { ConfirmButton, Field, namePattern, sanitizeName, } from "./container-card-shared.js";
+import { greyId, hint, imageSelect, sectionTitle, wsBody, } from "./container-card-styles.js";
+import { Button, DisclosureRow, Input, Modal, } from "@deepseek-ai/dsh-client-ui-primitives";
 import { useId, useState } from "react";
 export function SecretRow(props) {
     const { t, name, busy, writable, onSet, onRemove } = props;
@@ -29,7 +29,7 @@ export function SecretRow(props) {
                 }, children: name }), _jsx(Input, { type: "password", value: content, disabled: !writable || busy, placeholder: t("setSecret"), onChange: (event) => setContent(event.target.value), onKeyDown: (event) => {
                     if (event.key === "Enter")
                         submit();
-                }, style: { width: "200px" } }), _jsx(ConfirmButton, { t: t, label: t("setSecret"), title: t("confirmTitle"), description: t("confirmSetSecret"), disabled: !writable || !canSave, onConfirm: submit }), _jsx(ConfirmButton, { t: t, label: t("removeSecret"), title: t("confirmTitle"), description: t("confirmRemoveSecret"), disabled: busy, onConfirm: () => onRemove(name) })] }));
+                }, style: { width: "200px" } }), _jsx(ConfirmButton, { t: t, label: t("setSecret"), title: t("confirmTitle"), description: t("confirmSetSecret", { secret: name }), disabled: !writable || !canSave, onConfirm: submit }), _jsx(ConfirmButton, { t: t, label: t("removeSecret"), title: t("confirmTitle"), description: t("confirmRemoveSecret", { secret: name }), disabled: !writable || busy, onConfirm: () => onRemove(name) })] }));
 }
 export function SecretsSection(props) {
     const { t, secrets, busy, writable, onCreate, onRemove, onSet } = props;
@@ -60,12 +60,14 @@ export function SecretsSection(props) {
                     flexWrap: "wrap",
                     alignItems: "center",
                     gap: "8px",
-                }, children: [_jsx("div", { style: { ...sectionTitle, flex: 1 }, children: t("secretsTitle") }), _jsx(Button, { variant: "outline", size: "sm", disabled: !writable || busy, onClick: () => setOpen(true), children: t("createSecret") })] }), secrets.length === 0 ? (_jsx("p", { style: hint, children: t("none") })) : (secrets.map((secret) => (_jsx(DisclosureRow, { icon: _jsx("span", {}), title: secret.name, open: openSecret === secret.name, expandable: true, onToggle: () => setOpenSecret(openSecret === secret.name ? null : secret.name), children: _jsx("div", { style: wsBody, children: _jsx(SecretRow, { t: t, name: secret.name, busy: busy, writable: writable, onSet: onSet, onRemove: onRemove }) }) }, secret.name)))), _jsx(Modal, { open: open, onClose: () => setOpen(false), title: t("secretsTitle"), 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: !canCreate, onClick: submit, children: t("createSecret") })] }), children: _jsxs("div", { style: {
+                }, children: [_jsx("div", { style: { ...sectionTitle, flex: 1 }, children: t("secretsTitle") }), _jsx(Button, { variant: "outline", size: "sm", disabled: !writable || busy, onClick: () => setOpen(true), children: t("createSecret") })] }), secrets.length === 0 ? _jsx("p", { style: hint, children: t("none") }) : (secrets.map((secret) => (_jsx(DisclosureRow, { icon: _jsx("span", {}), title: secret.name, open: openSecret === secret.name, expandable: true, onToggle: () => setOpenSecret(openSecret === secret.name ? null : secret.name), children: _jsx("div", { style: wsBody, children: _jsx(SecretRow, { t: t, name: secret.name, busy: busy, writable: writable, onSet: onSet, onRemove: onRemove }) }) }, secret.name)))), _jsx(Modal, { open: open, onClose: () => setOpen(false), title: t("secretsTitle"), 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: !canCreate, onClick: submit, children: t("createSecret") })] }), children: _jsxs("div", { style: {
                         display: "flex",
                         flexDirection: "column",
                         gap: "12px",
                     }, children: [_jsxs(Field, { label: t("secretName"), htmlFor: secretNameId, children: [_jsx(Input, { id: secretNameId, value: name, disabled: !writable || busy, autoFocus: true, onChange: (event) => setName(sanitizeName(event.target.value)), onKeyDown: (event) => {
                                         if (event.key === "Enter")
                                             submit();
-                                    } }), name !== "" && !namePattern.test(name) ? (_jsx("p", { style: { ...hint, margin: 0 }, children: t("invalidName") })) : null] }), _jsx(Field, { label: t("secretLength"), htmlFor: secretLengthId, children: _jsx(Input, { id: secretLengthId, type: "number", min: 1, max: 1024, value: length, disabled: !writable || busy, onChange: (event) => setLength(event.target.value) }) }), _jsx(Field, { label: t("secretCharset"), htmlFor: secretCharsetId, children: _jsxs("select", { id: secretCharsetId, style: imageSelect, value: charset, disabled: !writable || busy, onChange: (event) => setCharset(event.target.value), children: [_jsx("option", { value: "alphanumeric", children: "alphanumeric" }), _jsx("option", { value: "hex", children: "hex" }), _jsx("option", { value: "base64url", children: "base64url" })] }) })] }) })] }));
+                                    } }), name !== "" && !namePattern.test(name)
+                                    ? _jsx("p", { style: { ...hint, margin: 0 }, children: t("invalidName") })
+                                    : null] }), _jsx(Field, { label: t("secretLength"), htmlFor: secretLengthId, children: _jsx(Input, { id: secretLengthId, type: "number", min: 1, max: 1024, value: length, disabled: !writable || busy, onChange: (event) => setLength(event.target.value) }) }), _jsx(Field, { label: t("secretCharset"), htmlFor: secretCharsetId, children: _jsxs("select", { id: secretCharsetId, style: imageSelect, value: charset, disabled: !writable || busy, onChange: (event) => setCharset(event.target.value), children: [_jsx("option", { value: "alphanumeric", children: "alphanumeric" }), _jsx("option", { value: "hex", children: "hex" }), _jsx("option", { value: "base64url", children: "base64url" })] }) })] }) })] }));
 }

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

@@ -1,21 +1,8 @@
 import { type MountInput, type ProjectMountView } from "./container-card-controller.js";
-import { type ContainerPluginKey } from "./locales.js";
+import { type ContainerPluginKey, type Translate } from "./locales.js";
 import { type StateDotState } from "@deepseek-ai/dsh-client-ui-primitives";
 import { type ReactNode } from "react";
-export declare function CardChevron({ open }: {
-    open: boolean;
-}): ReactNode;
 export declare function containerStateDot(status: string): StateDotState;
-export declare function ConfigField(props: {
-    t: (key: ContainerPluginKey) => string;
-    label: string;
-    value: string;
-    current: string;
-    writable: boolean;
-    onChange: (text: string) => void;
-    onSave: () => void;
-    onDiscard: () => void;
-}): ReactNode;
 export declare function Field(props: {
     label: string;
     htmlFor: string;
@@ -31,7 +18,7 @@ export declare const mountViewToInput: (mount: ProjectMountView) => MountInput;
 export declare const mountLabel: (t: (key: ContainerPluginKey) => string, mount: MountInput, withMode?: boolean) => string;
 export declare const emptyMount: (kind?: string) => MountInput;
 export declare function ConfirmButton(props: {
-    t: (key: ContainerPluginKey) => string;
+    t: Translate;
     label: string;
     title: string;
     description: string;
@@ -40,13 +27,13 @@ export declare function ConfirmButton(props: {
     onConfirm: () => void;
 }): ReactNode;
 export declare function Chip(props: {
-    t: (key: ContainerPluginKey) => string;
+    t: Translate;
     label: string;
     disabled?: boolean;
     onRemove?: () => void;
 }): ReactNode;
 export declare function TagInput(props: {
-    t: (key: ContainerPluginKey) => string;
+    t: Translate;
     value: readonly string[];
     onChange: (tags: string[]) => void;
     placeholder?: string;

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

@@ -3,31 +3,11 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 //
 // SPDX-License-Identifier: MIT
 import { hint } from "./container-card-styles.js";
-import { Button, Input, Modal } from "@deepseek-ai/dsh-client-ui-primitives";
-import { useId, useState } from "react";
-export function CardChevron({ open }) {
-    return (_jsx("svg", { viewBox: "0 0 14 14", width: "14", height: "14", "aria-hidden": "true", style: {
-            flex: "none",
-            color: "var(--dsw-alias-label-tertiary)",
-            transition: "transform .16s",
-            transform: open ? "rotate(180deg)" : undefined,
-        }, children: _jsx("path", { d: "M3 5l4 4 4-4", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
-}
+import { Button, Input, Modal, } from "@deepseek-ai/dsh-client-ui-primitives";
+import { useState } from "react";
 export function containerStateDot(status) {
     return status === "running" ? "done" : "error";
 }
-export function ConfigField(props) {
-    const { t, label, value, current, writable, onChange, onSave, onDiscard } = props;
-    const id = useId();
-    const dirty = value !== current;
-    return (_jsxs("div", { style: {
-            display: "flex",
-            flexWrap: "wrap",
-            alignItems: "center",
-            gap: "8px",
-            padding: "8px 0",
-        }, children: [_jsx("label", { htmlFor: id, style: { fontSize: "13px", color: "var(--dsw-alias-label-secondary)", minWidth: "110px" }, children: label }), _jsx(Input, { id: id, value: value, disabled: !writable, onChange: (event) => onChange(event.target.value), style: { width: "200px" } }), _jsx(Button, { variant: "outline", size: "sm", disabled: !writable || !dirty, onClick: onSave, children: t("save") }), _jsx(Button, { variant: "ghost", size: "sm", disabled: !dirty, onClick: onDiscard, children: t("discard") })] }));
-}
 export function Field(props) {
     return (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "4px" }, children: [_jsx("label", { htmlFor: props.htmlFor, style: { fontSize: "13px", color: "var(--dsw-alias-label-secondary)" }, children: props.label }), props.children] }));
 }
@@ -55,7 +35,7 @@ export const mountViewToInput = (mount) => ({
 });
 export const mountLabel = (t, mount, withMode = true) => {
     if (mount.kind === "tmpfs") {
-        return `tmpfs${mount.destination !== "" ? ` at ${mount.destination}` : ""}`;
+        return `${t("mountTmpfs")}${mount.destination !== "" ? ` ${t("mountAt")} ${mount.destination}` : ""}`;
     }
     if (mount.kind === "volume") {
         return `volume ${mount.volume}${mount.destination !== "" ? ` → ${mount.destination}` : ""}`;
@@ -63,7 +43,11 @@ export const mountLabel = (t, mount, withMode = true) => {
     if (mount.kind === "secret") {
         return `secret ${mount.secret}${mount.destination !== "" ? ` → ${mount.destination}` : ""}`;
     }
-    const mode = withMode ? (mount.mode === "read_only" ? " (ro)" : " (rw)") : "";
+    const mode = withMode
+        ? ` ${t(mount.mode === "read_only"
+            ? "mountReadOnlySuffix"
+            : "mountReadWriteSuffix")}`
+        : "";
     return `${mount.project}${mount.destination !== "" ? ` → ${mount.destination}` : ""}${mode}`;
 };
 // Adding a mount defaults to read-only, so granting write access is always a
@@ -99,7 +83,7 @@ export function Chip(props) {
             fontSize: "12px",
             fontFamily: "var(--dsw-alias-font-mono, ui-monospace, monospace)",
             color: "var(--dsw-alias-label-primary)",
-        }, children: [label, onRemove === undefined ? null : (_jsx(Button, { variant: "ghost", size: "sm", "aria-label": t("removeTag"), disabled: disabled, onClick: onRemove, style: {
+        }, children: [label, onRemove === undefined ? null : (_jsx(Button, { variant: "ghost", size: "sm", "aria-label": `${t("removeTag")} ${label}`, disabled: disabled, onClick: onRemove, style: {
                     padding: 0,
                     minWidth: "18px",
                     height: "18px",

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

@@ -1,15 +1,8 @@
-export declare const cardStyle: React.CSSProperties;
-export declare const cardOpenStyle: React.CSSProperties;
-export declare const cardHoverStyle: React.CSSProperties;
-export declare const cardHeaderStyle: React.CSSProperties;
-export declare const cardHeadTextStyle: React.CSSProperties;
-export declare const cardNameStyle: React.CSSProperties;
-export declare const cardDescriptionStyle: React.CSSProperties;
-export declare const cardBodyStyle: React.CSSProperties;
 export declare const sectionTitle: React.CSSProperties;
 export declare const banner: React.CSSProperties;
 export declare const greyId: React.CSSProperties;
 export declare const hint: React.CSSProperties;
+export declare const fieldLabel: React.CSSProperties;
 export declare const wsBody: React.CSSProperties;
 export declare const containerRow: React.CSSProperties;
 export declare const containerHeader: React.CSSProperties;
@@ -19,3 +12,4 @@ export declare const tableStyle: React.CSSProperties;
 export declare const thStyle: React.CSSProperties;
 export declare const tdStyle: React.CSSProperties;
 export declare const imageSelect: React.CSSProperties;
+export declare const fieldSelect: React.CSSProperties;

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

@@ -1,58 +1,6 @@
 // SPDX-FileCopyrightText: 2026 Elouan Martinet <exa@elou.world>
 //
 // SPDX-License-Identifier: MIT
-export const cardStyle = {
-    listStyle: "none",
-    border: "1px solid var(--dsw-alias-border-l2)",
-    borderRadius: "12px",
-    background: "var(--dsw-alias-bg-layer-3)",
-    transition: "border-color .16s, background .16s",
-};
-export const cardOpenStyle = {
-    background: "var(--dsw-alias-bg-layer-2)",
-    borderColor: "var(--dsw-alias-label-dimmed)",
-};
-export const cardHoverStyle = {
-    borderColor: "var(--dsw-alias-label-dimmed)",
-};
-export const cardHeaderStyle = {
-    width: "100%",
-    appearance: "none",
-    border: 0,
-    background: "none",
-    font: "inherit",
-    color: "inherit",
-    textAlign: "left",
-    cursor: "pointer",
-    display: "flex",
-    alignItems: "center",
-    gap: "12px",
-    padding: "14px 16px",
-    borderRadius: "12px",
-};
-export const cardHeadTextStyle = {
-    flex: 1,
-    minWidth: 0,
-    display: "flex",
-    flexDirection: "column",
-    gap: "4px",
-};
-export const cardNameStyle = {
-    fontSize: "15px",
-    fontWeight: 600,
-    lineHeight: 1.4,
-    color: "var(--dsw-alias-label-primary)",
-};
-export const cardDescriptionStyle = {
-    fontSize: "13px",
-    lineHeight: 1.5,
-    color: "var(--dsw-alias-label-tertiary)",
-};
-export const cardBodyStyle = {
-    borderTop: "1px solid var(--dsw-alias-border-l2)",
-    margin: "0 16px",
-    paddingBottom: "8px",
-};
 export const sectionTitle = {
     fontWeight: 600,
     margin: "16px 0 8px",
@@ -78,6 +26,14 @@ export const hint = {
     color: "var(--dsw-alias-label-tertiary)",
     margin: "8px 0",
 };
+export const fieldLabel = {
+    fontSize: "12px",
+    color: "var(--dsw-alias-label-tertiary)",
+    whiteSpace: "nowrap",
+    // Hugs the control when the label fills a grid cell; an auto-width flex item
+    // (the tab body's toolbar) is unaffected.
+    textAlign: "right",
+};
 export const wsBody = {
     display: "flex",
     flexDirection: "column",
@@ -141,3 +97,9 @@ export const imageSelect = {
     fontSize: "12px",
     maxWidth: "160px",
 };
+// A select that fills its label's row where fields are stacked; the narrow
+// guide card uses it so the container and shell controls share one width.
+export const fieldSelect = {
+    ...imageSelect,
+    width: "100%",
+};

package/dist/client/container-card-volumes.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 VolumesSection(props: {
-    t: (key: ContainerPluginKey) => string;
+    t: Translate;
     volumes: readonly {
         name: string;
     }[];

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

@@ -2,9 +2,9 @@ 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, namePattern, sanitizeName } from "./container-card-shared.js";
+import { ConfirmButton, Field, namePattern, sanitizeName, } from "./container-card-shared.js";
 import { hint, sectionTitle, 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 VolumesSection(props) {
     const { t, volumes, busy, writable, onCreate, onRemove } = props;
@@ -25,13 +25,17 @@ export function VolumesSection(props) {
                     flexWrap: "wrap",
                     alignItems: "center",
                     gap: "8px",
-                }, children: [_jsx("div", { style: { ...sectionTitle, flex: 1 }, children: t("volumesTitle") }), _jsx(Button, { variant: "outline", size: "sm", disabled: !writable || busy, onClick: () => setOpen(true), children: t("createVolume") })] }), volumes.length === 0 ? (_jsx("p", { style: hint, children: t("none") })) : (volumes.map((volume) => (_jsx(DisclosureRow, { icon: _jsx("span", {}), title: volume.name, open: openVolume === volume.name, expandable: true, onToggle: () => setOpenVolume(openVolume === volume.name ? null : volume.name), children: _jsx("div", { style: wsBody, children: _jsx("div", { style: {
+                }, children: [_jsx("div", { style: { ...sectionTitle, flex: 1 }, children: t("volumesTitle") }), _jsx(Button, { variant: "outline", size: "sm", disabled: !writable || busy, onClick: () => setOpen(true), children: t("createVolume") })] }), volumes.length === 0 ? _jsx("p", { style: hint, children: t("none") }) : (volumes.map((volume) => (_jsx(DisclosureRow, { icon: _jsx("span", {}), title: volume.name, open: openVolume === volume.name, expandable: true, onToggle: () => setOpenVolume(openVolume === volume.name ? null : volume.name), children: _jsx("div", { style: wsBody, children: _jsx("div", { style: {
                             display: "flex",
                             flexWrap: "wrap",
                             alignItems: "center",
                             gap: "8px",
-                        }, children: _jsx(ConfirmButton, { t: t, label: t("removeVolume"), title: t("confirmTitle"), description: t("confirmRemoveVolume"), disabled: busy, onConfirm: () => onRemove(volume.name) }) }) }) }, volume.name)))), _jsx(Modal, { open: open, onClose: () => setOpen(false), title: t("volumesTitle"), 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: !canCreate, onClick: submit, children: t("createVolume") })] }), children: _jsxs(Field, { label: t("volumeName"), htmlFor: volumeId, children: [_jsx(Input, { id: volumeId, value: name, disabled: !writable || busy, autoFocus: true, onChange: (event) => setName(sanitizeName(event.target.value)), onKeyDown: (event) => {
+                        }, children: _jsx(ConfirmButton, { t: t, label: t("removeVolume"), title: t("confirmTitle"), description: t("confirmRemoveVolume", {
+                                volume: volume.name,
+                            }), disabled: busy, onConfirm: () => onRemove(volume.name) }) }) }) }, volume.name)))), _jsx(Modal, { open: open, onClose: () => setOpen(false), title: t("volumesTitle"), 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: !canCreate, onClick: submit, children: t("createVolume") })] }), children: _jsxs(Field, { label: t("volumeName"), htmlFor: volumeId, children: [_jsx(Input, { id: volumeId, value: name, disabled: !writable || busy, autoFocus: true, onChange: (event) => setName(sanitizeName(event.target.value)), onKeyDown: (event) => {
                                 if (event.key === "Enter")
                                     submit();
-                            } }), name !== "" && !namePattern.test(name) ? (_jsx("p", { style: { ...hint, margin: 0 }, children: t("invalidName") })) : null] }) })] }));
+                            } }), name !== "" && !namePattern.test(name)
+                            ? _jsx("p", { style: { ...hint, margin: 0 }, children: t("invalidName") })
+                            : null] }) })] }));
 }

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

@@ -1,9 +1,9 @@
 import { type ContainerCreateConfig, type ContainerView, type ImageView, type MountInput, type WorkspaceView } 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 WorkspaceSection(props: {
-    t: (key: ContainerPluginKey) => string;
+    t: Translate;
     workspace: WorkspaceView;
     containers: readonly ContainerView[];
     images: readonly ImageView[];
@@ -17,15 +17,17 @@ export declare function WorkspaceSection(props: {
     defaultImage: string;
     projectsRoot: string;
     directoryPicker?: DirectoryPickerFace;
-    onRemove: (workspace: string) => void;
+    onRemove: (workspace: string, container: string) => void;
     onRemoveWorkspace: (workspace: string) => void;
-    onRecreate: (workspace: string, image: string, env?: Record<string, string>) => void;
+    onRecreate: (workspace: string, container: string, image: string, env?: Record<string, string>) => void;
     onCreate: (workspace: WorkspaceView, config?: ContainerCreateConfig) => void;
     onStartContainer: (workspace: WorkspaceView, container: string, config?: ContainerCreateConfig) => 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;
+    onSyncDefaults: (workspace: string) => void;
+    defaultEnvCount: number;
 }): ReactNode;

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

@@ -5,14 +5,20 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import { ContainerRow, CreateContainerModal } from "./container-card-row.js";
 import { ConfirmButton, containerStateDot } from "./container-card-shared.js";
 import { greyId, hint, wsBody } from "./container-card-styles.js";
-import { Button, DisclosureRow, StateDot } from "@deepseek-ai/dsh-client-ui-primitives";
+import { Button, DisclosureRow, StateDot, } from "@deepseek-ai/dsh-client-ui-primitives";
 import { useState } from "react";
 export function WorkspaceSection(props) {
-    const { t, workspace, containers, images, volumes, secrets, busy, defaultImage, projectsRoot, directoryPicker, onRemove, onRemoveWorkspace, onRecreate, onCreate, onStartContainer, onAddContainerMount, onRemoveContainerMount, onUpdateContainerMount, onSetContainerPaths, onAddContainerSecret, onRemoveContainerSecret, } = props;
+    const { t, workspace, containers, images, volumes, secrets, busy, defaultImage, projectsRoot, directoryPicker, onRemove, onRemoveWorkspace, onRecreate, onCreate, onStartContainer, onAddContainerMount, onRemoveContainerMount, onUpdateContainerMount, onSetContainerPaths, onAddContainerSecret, onRemoveContainerSecret, onSyncDefaults, defaultEnvCount, } = props;
     const [open, setOpen] = useState(false);
     const [createOpen, setCreateOpen] = useState(null);
     const hasContainer = containers.length > 0;
-    return (_jsxs(DisclosureRow, { icon: hasContainer ? (_jsx(StateDot, { state: containerStateDot(containers[0]?.status ?? "") })) : (_jsx("span", {})), title: workspace.projectName, open: open, expandable: true, onToggle: () => setOpen(!open), children: [_jsxs("div", { style: wsBody, children: [_jsx("code", { style: greyId, children: workspace.workspaceSlug }), !hasContainer ? (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [_jsx("p", { style: { ...hint, margin: 0 }, children: t("noContainers") }), _jsx("div", { children: _jsx(Button, { variant: "outline", size: "sm", disabled: busy, onClick: () => setCreateOpen("default"), children: t("createContainer") }) })] })) : (_jsxs(_Fragment, { children: [containers.map((container) => (_jsx(ContainerRow, { t: t, container: container, images: images, volumes: volumes, secrets: secrets, busy: busy, onRemove: onRemove, onRecreate: onRecreate, onAddContainerMount: onAddContainerMount, onRemoveContainerMount: onRemoveContainerMount, onUpdateContainerMount: onUpdateContainerMount, onSetContainerPaths: onSetContainerPaths, projectName: workspace.projectName, projectsRoot: projectsRoot, directoryPicker: directoryPicker, onAddContainerSecret: onAddContainerSecret, onRemoveContainerSecret: onRemoveContainerSecret }, container.containerName))), _jsx("div", { children: _jsx(Button, { variant: "outline", size: "sm", disabled: busy, onClick: () => setCreateOpen("named"), children: t("addContainer") }) })] })), _jsx("div", { children: _jsx(ConfirmButton, { t: t, label: t("removePod"), title: t("confirmTitle"), description: t("confirmRemovePod"), disabled: busy, onConfirm: () => onRemoveWorkspace(workspace.workspaceSlug) }) })] }), _jsx(CreateContainerModal, { t: t, workspace: workspace, images: images, volumes: volumes, secrets: secrets, busy: busy, defaultImage: defaultImage, projectsRoot: projectsRoot, directoryPicker: directoryPicker, named: createOpen === "named", existing: containers.map((container) => container.containerName), open: createOpen !== null, onClose: () => setCreateOpen(null), onCreate: (container, config) => {
+    return (_jsxs(DisclosureRow, { icon: hasContainer
+            ? _jsx(StateDot, { state: containerStateDot(containers[0]?.status ?? "") })
+            : _jsx("span", {}), title: workspace.projectName, open: open, expandable: true, onToggle: () => setOpen(!open), children: [_jsxs("div", { style: wsBody, children: [_jsx("code", { style: greyId, children: workspace.workspaceSlug }), !hasContainer
+                        ? (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [_jsx("p", { style: { ...hint, margin: 0 }, children: t("noContainers") }), _jsx("div", { children: _jsx(Button, { variant: "outline", size: "sm", disabled: busy, onClick: () => setCreateOpen("default"), children: t("createContainer") }) })] }))
+                        : (_jsxs(_Fragment, { children: [containers.map((container) => (_jsx(ContainerRow, { t: t, container: container, images: images, volumes: volumes, secrets: secrets, busy: busy, onRemove: onRemove, onRecreate: onRecreate, onAddContainerMount: onAddContainerMount, onRemoveContainerMount: onRemoveContainerMount, onUpdateContainerMount: onUpdateContainerMount, onSetContainerPaths: onSetContainerPaths, projectName: workspace.projectName, projectsRoot: projectsRoot, directoryPicker: directoryPicker, onAddContainerSecret: onAddContainerSecret, onRemoveContainerSecret: onRemoveContainerSecret }, container.containerName))), _jsx("div", { children: _jsx(Button, { variant: "outline", size: "sm", disabled: busy, onClick: () => setCreateOpen("named"), children: t("addContainer") }) })] })), _jsxs("div", { style: { display: "flex", flexWrap: "wrap", gap: "8px" }, children: [_jsx(ConfirmButton, { t: t, label: t("applyDefaults"), title: t("confirmTitle"), description: t("confirmApplyDefaults"), disabled: busy || defaultEnvCount === 0, onConfirm: () => onSyncDefaults(workspace.workspaceSlug) }), _jsx(ConfirmButton, { t: t, label: t("removePod"), title: t("confirmTitle"), description: t("confirmRemovePod", {
+                                    workspace: workspace.projectName,
+                                }), disabled: busy, onConfirm: () => onRemoveWorkspace(workspace.workspaceSlug) })] })] }), _jsx(CreateContainerModal, { t: t, workspace: workspace, images: images, volumes: volumes, secrets: secrets, busy: busy, defaultImage: defaultImage, projectsRoot: projectsRoot, directoryPicker: directoryPicker, named: createOpen === "named", existing: containers.map((container) => container.containerName), open: createOpen !== null, onClose: () => setCreateOpen(null), onCreate: (container, config) => {
                     if (createOpen === "named") {
                         onStartContainer(workspace, container, config);
                     }

package/dist/client/directory-picker.js

@@ -17,8 +17,9 @@ export class DirectoryPickerError extends Error {
 // then hides the browse affordance and the path stays a plain input).
 export function buildDirectoryPicker(remote) {
     const picker = remote?.directoryPicker;
-    if (picker === undefined || typeof picker.list !== "function")
+    if (picker === undefined || typeof picker.list !== "function") {
         return undefined;
+    }
     return {
         async list(path, signal) {
             const result = await picker.list(path, signal);