@exagone313/dsh-podman 0.2.0-rc.2

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

@@ -0,0 +1,71 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// SPDX-FileCopyrightText: 2026 Elouan Martinet <exa@elou.world>
+//
+// SPDX-License-Identifier: MIT
+import { ConfirmButton, Field, 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;
+    const [content, setContent] = useState("");
+    const canSave = content !== "" && !busy;
+    const submit = () => {
+        if (content === "")
+            return;
+        onSet(name, content);
+        setContent("");
+    };
+    return (_jsxs("div", { style: {
+            display: "flex",
+            flexWrap: "wrap",
+            alignItems: "center",
+            gap: "8px",
+        }, children: [_jsx("code", { style: {
+                    ...greyId,
+                    flex: 1,
+                    fontSize: "13px",
+                    color: "var(--dsw-alias-label-primary)",
+                }, children: 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) })] }));
+}
+export function SecretsSection(props) {
+    const { t, secrets, busy, writable, onCreate, onRemove, onSet } = props;
+    const [open, setOpen] = useState(false);
+    const [openSecret, setOpenSecret] = useState(null);
+    const [name, setName] = useState("");
+    const [length, setLength] = useState("32");
+    const [charset, setCharset] = useState("alphanumeric");
+    const secretNameId = useId();
+    const secretLengthId = useId();
+    const secretCharsetId = useId();
+    const canCreate = namePattern.test(name);
+    const submit = () => {
+        if (!namePattern.test(name))
+            return;
+        const parsedLength = parseInt(length, 10);
+        const normalized = length.trim() === "" || Number.isNaN(parsedLength) || parsedLength < 1
+            ? undefined
+            : parsedLength;
+        onCreate(name.trim(), normalized, charset);
+        setName("");
+        setLength("32");
+        setCharset("alphanumeric");
+        setOpen(false);
+    };
+    return (_jsxs("section", { children: [_jsxs("div", { style: {
+                    display: "flex",
+                    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: {
+                        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" })] }) })] }) })] }));
+}

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

@@ -0,0 +1,55 @@
+import { type MountInput, type ProjectMountView } from "./container-card-controller.js";
+import { type ContainerPluginKey } 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;
+    children: ReactNode;
+}): ReactNode;
+export declare const namePattern: RegExp;
+export declare const imageIdPattern: RegExp;
+export declare const sanitizeName: (raw: string) => string;
+export declare const sanitizeImageId: (raw: string) => string;
+export declare const mountKindShort: (kind: string) => string;
+export declare const mountModeShort: (mode: string) => string;
+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;
+    label: string;
+    title: string;
+    description: string;
+    disabled?: boolean;
+    ariaLabel?: string;
+    onConfirm: () => void;
+}): ReactNode;
+export declare function Chip(props: {
+    t: (key: ContainerPluginKey) => string;
+    label: string;
+    disabled?: boolean;
+    onRemove?: () => void;
+}): ReactNode;
+export declare function TagInput(props: {
+    t: (key: ContainerPluginKey) => string;
+    value: readonly string[];
+    onChange: (tags: string[]) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    id?: string;
+}): ReactNode;

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

@@ -0,0 +1,152 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// SPDX-FileCopyrightText: 2026 Elouan Martinet <exa@elou.world>
+//
+// SPDX-License-Identifier: MIT
+import { 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" }) }));
+}
+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] }));
+}
+export const namePattern = /^[a-zA-Z0-9][a-zA-Z0-9_.-]{0,63}$/;
+export const imageIdPattern = /^[a-zA-Z0-9_][a-zA-Z0-9_.\-/:]{0,127}$/;
+export const sanitizeName = (raw) => raw.replace(/[^a-zA-Z0-9_.-]/g, "");
+export const sanitizeImageId = (raw) => raw.replace(/[^a-zA-Z0-9_.\-/:]/g, "");
+export const mountKindShort = (kind) => {
+    if (kind === "MOUNT_KIND_TMPFS")
+        return "tmpfs";
+    if (kind === "MOUNT_KIND_VOLUME")
+        return "volume";
+    if (kind === "MOUNT_KIND_SECRET")
+        return "secret";
+    return "project";
+};
+export const mountModeShort = (mode) => mode === "MOUNT_MODE_READ_ONLY" ? "read_only" : "read_write";
+export const mountViewToInput = (mount) => ({
+    kind: mountKindShort(mount.kind),
+    project: mount.projectName,
+    destination: mount.destination,
+    mode: mountModeShort(mount.mode),
+    volume: mount.volume,
+    secret: mount.secret,
+});
+export const mountLabel = (t, mount, withMode = true) => {
+    if (mount.kind === "tmpfs") {
+        return `tmpfs${mount.destination !== "" ? ` at ${mount.destination}` : ""}`;
+    }
+    if (mount.kind === "volume") {
+        return `volume ${mount.volume}${mount.destination !== "" ? ` → ${mount.destination}` : ""}`;
+    }
+    if (mount.kind === "secret") {
+        return `secret ${mount.secret}${mount.destination !== "" ? ` → ${mount.destination}` : ""}`;
+    }
+    const mode = withMode ? (mount.mode === "read_only" ? " (ro)" : " (rw)") : "";
+    return `${mount.project}${mount.destination !== "" ? ` → ${mount.destination}` : ""}${mode}`;
+};
+// Adding a mount defaults to read-only, so granting write access is always a
+// deliberate choice. tmpfs is scratch space and must be writable.
+export const emptyMount = (kind = "project") => ({
+    kind,
+    project: "",
+    destination: "",
+    mode: kind === "tmpfs" ? "read_write" : "read_only",
+    volume: "",
+    secret: "",
+});
+export function ConfirmButton(props) {
+    const { t, label, title, description, disabled, ariaLabel, onConfirm } = props;
+    const [open, setOpen] = useState(false);
+    const confirm = () => {
+        setOpen(false);
+        onConfirm();
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "outline", size: "sm", disabled: disabled, "aria-label": ariaLabel, onClick: () => setOpen(true), children: label }), _jsx(Modal, { open: open, onClose: () => setOpen(false), title: title, 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", onClick: confirm, children: t("confirm") })] }), children: _jsx("p", { style: { ...hint, margin: 0 }, children: description }) })] }));
+}
+export function Chip(props) {
+    const { t, label, disabled, onRemove } = props;
+    return (_jsxs("span", { style: {
+            display: "inline-flex",
+            alignItems: "center",
+            gap: "2px",
+            height: "24px",
+            padding: onRemove === undefined ? "0 8px" : "0 4px 0 8px",
+            borderRadius: "999px",
+            border: "1px solid var(--dsw-alias-border-l2)",
+            background: "var(--dsw-alias-bg-layer-3)",
+            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: {
+                    padding: 0,
+                    minWidth: "18px",
+                    height: "18px",
+                    lineHeight: 1,
+                    fontSize: "13px",
+                    color: "var(--dsw-alias-label-tertiary)",
+                }, children: "\u00D7" }))] }));
+}
+export function TagInput(props) {
+    const { t, value, onChange, placeholder, disabled, id } = props;
+    const [draft, setDraft] = useState("");
+    const commit = (raw) => {
+        const tag = raw.trim();
+        if (tag === "" || value.includes(tag))
+            return;
+        onChange([...value, tag]);
+    };
+    return (_jsxs("div", { style: {
+            display: "flex",
+            flexWrap: "wrap",
+            alignItems: "center",
+            gap: "6px",
+        }, children: [value.map((tag) => (_jsx(Chip, { t: t, label: tag, disabled: disabled, onRemove: () => onChange(value.filter((item) => item !== tag)) }, tag))), _jsx(Input, { id: id, value: draft, disabled: disabled, placeholder: placeholder, onChange: (event) => setDraft(event.target.value), onKeyDown: (event) => {
+                    if (event.key === " " || event.key === "," || event.key === "Enter") {
+                        if (event.key === " " || event.key === ",")
+                            event.preventDefault();
+                        commit(draft);
+                        setDraft("");
+                    }
+                    else if (event.key === "Backspace" && draft === "") {
+                        const last = value[value.length - 1];
+                        if (last !== undefined)
+                            onChange(value.slice(0, -1));
+                    }
+                }, onPaste: (event) => {
+                    const text = event.clipboardData.getData("text");
+                    if (text === "")
+                        return;
+                    event.preventDefault();
+                    const tokens = text.split(/[\s,]+/);
+                    const next = [...value];
+                    for (const token of tokens) {
+                        const tag = token.trim();
+                        if (tag !== "" && !next.includes(tag))
+                            next.push(tag);
+                    }
+                    if (next.length !== value.length)
+                        onChange(next);
+                }, style: { flex: 1, minWidth: "160px" } })] }));
+}

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

@@ -0,0 +1,21 @@
+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 wsBody: React.CSSProperties;
+export declare const containerRow: React.CSSProperties;
+export declare const containerHeader: React.CSSProperties;
+export declare const actions: React.CSSProperties;
+export declare const footerRow: React.CSSProperties;
+export declare const tableStyle: React.CSSProperties;
+export declare const thStyle: React.CSSProperties;
+export declare const tdStyle: React.CSSProperties;
+export declare const imageSelect: React.CSSProperties;

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

@@ -0,0 +1,143 @@
+// 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",
+    fontSize: "13px",
+    color: "var(--dsw-alias-label-secondary)",
+    textTransform: "uppercase",
+    letterSpacing: "0.04em",
+};
+export const banner = {
+    padding: "6px 10px",
+    borderRadius: "6px",
+    border: "1px solid rgba(210,153,34,0.6)",
+    margin: "12px 0",
+    fontSize: "13px",
+};
+export const greyId = {
+    color: "var(--dsw-alias-label-tertiary)",
+    fontSize: "12px",
+    fontFamily: "var(--dsw-alias-font-mono, ui-monospace, monospace)",
+};
+export const hint = {
+    fontSize: "13px",
+    color: "var(--dsw-alias-label-tertiary)",
+    margin: "8px 0",
+};
+export const wsBody = {
+    display: "flex",
+    flexDirection: "column",
+    gap: "8px",
+    padding: "10px 0 12px",
+};
+export const containerRow = {
+    display: "flex",
+    flexDirection: "column",
+    gap: "8px",
+    padding: "10px 12px",
+    border: "1px solid var(--dsw-alias-border-l2)",
+    borderRadius: "10px",
+    background: "var(--dsw-alias-bg-layer-3)",
+};
+export const containerHeader = {
+    display: "flex",
+    flexWrap: "wrap",
+    alignItems: "center",
+    gap: "8px",
+};
+export const actions = {
+    display: "flex",
+    flexWrap: "wrap",
+    gap: "8px",
+    alignItems: "center",
+};
+export const footerRow = {
+    display: "flex",
+    justifyContent: "flex-end",
+    paddingTop: "12px",
+    marginTop: "12px",
+    borderTop: "1px solid var(--dsw-alias-border-l2)",
+};
+export const tableStyle = {
+    width: "100%",
+    borderCollapse: "collapse",
+    fontSize: "13px",
+};
+export const thStyle = {
+    textAlign: "left",
+    padding: "6px 10px",
+    borderBottom: "1px solid var(--dsw-alias-border-l2)",
+    color: "var(--dsw-alias-label-secondary)",
+    fontWeight: 600,
+    whiteSpace: "nowrap",
+};
+export const tdStyle = {
+    padding: "6px 10px",
+    borderBottom: "1px solid var(--dsw-alias-border-l2)",
+    color: "var(--dsw-alias-label-primary)",
+    verticalAlign: "top",
+};
+export const imageSelect = {
+    appearance: "none",
+    padding: "4px 8px",
+    borderRadius: "8px",
+    border: "1px solid var(--dsw-alias-border-l2)",
+    background: "var(--dsw-alias-bg-layer-3)",
+    color: "inherit",
+    fontSize: "12px",
+    maxWidth: "160px",
+};

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

@@ -0,0 +1,12 @@
+import { type ContainerPluginKey } from "./locales.js";
+import { type ReactNode } from "react";
+export declare function VolumesSection(props: {
+    t: (key: ContainerPluginKey) => string;
+    volumes: readonly {
+        name: string;
+    }[];
+    busy: boolean;
+    writable: boolean;
+    onCreate: (name: string) => void;
+    onRemove: (name: string) => void;
+}): ReactNode;

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

@@ -0,0 +1,37 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// SPDX-FileCopyrightText: 2026 Elouan Martinet <exa@elou.world>
+//
+// SPDX-License-Identifier: MIT
+import { ConfirmButton, Field, 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 { useId, useState } from "react";
+export function VolumesSection(props) {
+    const { t, volumes, busy, writable, onCreate, onRemove } = props;
+    const [open, setOpen] = useState(false);
+    const [openVolume, setOpenVolume] = useState(null);
+    const [name, setName] = useState("");
+    const volumeId = useId();
+    const canCreate = namePattern.test(name);
+    const submit = () => {
+        if (!namePattern.test(name))
+            return;
+        onCreate(name.trim());
+        setName("");
+        setOpen(false);
+    };
+    return (_jsxs("section", { children: [_jsxs("div", { style: {
+                    display: "flex",
+                    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: {
+                            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) => {
+                                if (event.key === "Enter")
+                                    submit();
+                            } }), name !== "" && !namePattern.test(name) ? (_jsx("p", { style: { ...hint, margin: 0 }, children: t("invalidName") })) : null] }) })] }));
+}

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

@@ -0,0 +1,31 @@
+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 ReactNode } from "react";
+export declare function WorkspaceSection(props: {
+    t: (key: ContainerPluginKey) => string;
+    workspace: WorkspaceView;
+    containers: readonly ContainerView[];
+    images: readonly ImageView[];
+    volumes: readonly {
+        name: string;
+    }[];
+    secrets: readonly {
+        name: string;
+    }[];
+    busy: boolean;
+    defaultImage: string;
+    projectsRoot: string;
+    directoryPicker?: DirectoryPickerFace;
+    onRemove: (workspace: string) => void;
+    onRemoveWorkspace: (workspace: string) => void;
+    onRecreate: (workspace: 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;
+}): ReactNode;

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

@@ -0,0 +1,24 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// SPDX-FileCopyrightText: 2026 Elouan Martinet <exa@elou.world>
+//
+// SPDX-License-Identifier: MIT
+import { 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 { 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 [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) => {
+                    if (createOpen === "named") {
+                        onStartContainer(workspace, container, config);
+                    }
+                    else {
+                        onCreate(workspace, config);
+                    }
+                    setCreateOpen(null);
+                } })] }));
+}

package/dist/client/directory-picker.d.ts

@@ -0,0 +1,12 @@
+import type { DirectoryListing } from "@deepseek-ai/dsh-api-workspace-controller/types";
+export interface DirectoryPickerFace {
+    list(path: string, signal?: AbortSignal): Promise<DirectoryListing>;
+}
+export declare class DirectoryPickerError extends Error {
+    readonly code: string;
+    constructor(failure: {
+        code?: unknown;
+        message?: unknown;
+    } | undefined);
+}
+export declare function buildDirectoryPicker(remote: any): DirectoryPickerFace | undefined;

package/dist/client/directory-picker.js

@@ -0,0 +1,30 @@
+// SPDX-FileCopyrightText: 2026 Elouan Martinet <exa@elou.world>
+//
+// SPDX-License-Identifier: MIT
+// A listing failure, carrying the harness's stable code so the dialog can name
+// an unavailable backend apart from an unreadable directory.
+export class DirectoryPickerError extends Error {
+    code;
+    constructor(failure) {
+        super(typeof failure?.message === "string" && failure.message !== ""
+            ? failure.message
+            : "directory listing failed");
+        this.code = typeof failure?.code === "string" ? failure.code : "";
+    }
+}
+// buildDirectoryPicker adapts the injected Remote namespace to the face, or
+// returns undefined when this deployment mounts no directory picker (the card
+// 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")
+        return undefined;
+    return {
+        async list(path, signal) {
+            const result = await picker.list(path, signal);
+            if (result?.ok === false)
+                throw new DirectoryPickerError(result.error);
+            return result.value;
+        },
+    };
+}

package/dist/client/index.d.ts

@@ -0,0 +1,5 @@
+import type { Context as ClientContext } from "@deepseek-ai/cordis";
+export type { ContainerCardProps } from "./ContainerCard.js";
+export declare const name = "podman";
+export declare const inject: string[];
+export declare function apply(ctx: ClientContext): void;