@exagone313/dsh-podman 0.2.0-rc.2

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

@@ -0,0 +1,207 @@
+// SPDX-FileCopyrightText: 2026 Elouan Martinet <exa@elou.world>
+//
+// SPDX-License-Identifier: MIT
+import { createSnapshotStore } from "@deepseek-ai/dsh-client-store";
+import { createCardClient } from "./card-client.js";
+export const CONTAINER_NS = "podman";
+const EMPTY_SNAPSHOT = {
+    version: "",
+    commit: "",
+    projectsRoot: "",
+    workspaces: [],
+    containers: [],
+    images: [],
+    volumes: [],
+    secrets: [],
+    caches: [],
+};
+// The card reads its live state from the host route and its preferences from
+// the settings namespace. A command is one request, so nothing is re-delivered
+// and no document round-trip is involved.
+export class ContainerCardController {
+    scope;
+    store;
+    drafts = new Map();
+    client;
+    snapshot = EMPTY_SNAPSHOT;
+    busy = false;
+    notice = "";
+    directoryPicker;
+    constructor(scope, client = createCardClient()) {
+        this.scope = scope;
+        this.client = client;
+        this.store = createSnapshotStore(this.project());
+        scope.subscribe(() => {
+            this.publish();
+        });
+        void this.reload();
+    }
+    draft(field, current) {
+        return this.drafts.get(field) ?? current;
+    }
+    project() {
+        const snapshot = this.scope.getSnapshot();
+        const value = snapshot.value;
+        return {
+            available: snapshot.status === "ready" && value !== undefined,
+            writable: snapshot.writable,
+            busy: this.busy,
+            notice: this.notice,
+            version: this.snapshot.version,
+            commit: this.snapshot.commit,
+            defaultImage: value?.defaultImage ?? "",
+            defaultImageDraft: this.draft("defaultImage", value?.defaultImage ?? ""),
+            socketsRoot: value?.socketsRoot ?? "",
+            socketsRootDraft: this.draft("socketsRoot", value?.socketsRoot ?? ""),
+            projectsRoot: this.snapshot.projectsRoot,
+            ...(this.directoryPicker === undefined
+                ? {}
+                : { directoryPicker: this.directoryPicker }),
+            workspaces: this.snapshot.workspaces,
+            containers: this.snapshot.containers,
+            images: this.snapshot.images,
+            volumes: this.snapshot.volumes,
+            secrets: this.snapshot.secrets,
+            caches: this.snapshot.caches,
+        };
+    }
+    publish() {
+        this.store.set(this.project());
+    }
+    // setDirectoryPicker records the harness's directory picker (or clears it)
+    // and republishes, so the card shows or hides the browse affordance.
+    setDirectoryPicker(picker) {
+        this.directoryPicker = picker;
+        this.publish();
+    }
+    command(op, workspace, image, extra = {}) {
+        void this.dispatch({
+            op,
+            workspace,
+            image,
+            projectName: extra.projectName ?? "",
+            mounts: extra.mounts ?? [],
+            paths: extra.paths ?? [],
+            value: extra.value ?? "",
+            env: extra.env ?? {},
+            container: extra.container ?? "",
+            secret: extra.secret ?? "",
+            secretEnv: extra.secretEnv ?? "",
+            length: extra.length ?? 0,
+            charset: extra.charset ?? "",
+            packages: extra.packages ?? [],
+            secretEnvMap: extra.secretEnvMap ?? {},
+            cacheMode: extra.cacheMode ?? "",
+            mount: extra.mount ?? null,
+        });
+    }
+    async dispatch(request) {
+        this.busy = true;
+        this.notice = "";
+        this.publish();
+        try {
+            const result = await this.client.command(request);
+            this.notice = result.notice ?? "";
+            this.snapshot = await this.client.snapshot();
+        }
+        catch (error) {
+            this.notice = error instanceof Error ? error.message : String(error);
+        }
+        finally {
+            this.busy = false;
+            this.publish();
+        }
+    }
+    async reload() {
+        try {
+            this.snapshot = await this.client.snapshot();
+            // A refresh clears the previous action's notice, so reopening the
+            // settings does not replay feedback from an earlier session.
+            this.notice = "";
+        }
+        catch (error) {
+            this.notice = error instanceof Error ? error.message : String(error);
+        }
+        this.publish();
+    }
+    edit(field, text) {
+        this.drafts.set(field, text);
+        this.publish();
+    }
+    save(field) {
+        const draft = this.drafts.get(field);
+        if (draft === undefined)
+            return;
+        void this.scope.set(field, draft);
+    }
+    discard(field) {
+        this.drafts.delete(field);
+        this.publish();
+    }
+    inject() {
+        return {
+            hooks: { containerCard: this.store },
+            reload: () => {
+                void this.reload();
+            },
+            remove: (workspace) => this.command("remove", workspace, ""),
+            cleanCaches: (mode) => this.command("cache_clean", "", "", { cacheMode: mode }),
+            removeWorkspace: (workspace) => this.command("workspace_remove", workspace, ""),
+            recreate: (workspace, image, env) => this.command("recreate", workspace, image, { ...(env ? { env } : {}) }),
+            createContainer: (workspace, config) => this.command("create", workspace.workspaceSlug, config?.image ?? (workspace.imageId || this.defaultImage() || ""), {
+                projectName: workspace.projectName,
+                ...(config?.mounts && config.mounts.length > 0 ? { mounts: config.mounts } : {}),
+                ...(config?.env && Object.keys(config.env).length > 0 ? { env: config.env } : {}),
+                ...(config?.paths && config.paths.length > 0 ? { paths: config.paths } : {}),
+                ...(config?.secretEnv && Object.keys(config.secretEnv).length > 0 ? { secretEnvMap: config.secretEnv } : {}),
+            }),
+            startContainer: (workspace, container, config) => this.command("create", workspace.workspaceSlug, config?.image ?? (workspace.imageId || this.defaultImage() || ""), {
+                container,
+                ...(config?.mounts && config.mounts.length > 0 ? { mounts: config.mounts } : {}),
+                ...(config?.env && Object.keys(config.env).length > 0 ? { env: config.env } : {}),
+                ...(config?.paths && config.paths.length > 0 ? { paths: config.paths } : {}),
+                ...(config?.secretEnv && Object.keys(config.secretEnv).length > 0 ? { secretEnvMap: config.secretEnv } : {}),
+            }),
+            addContainerMount: (workspace, container, mount) => this.command("container_mount_add", workspace, "", { container, mount }),
+            removeContainerMount: (workspace, container, mount) => this.command("container_mount_remove", workspace, "", { container, mount }),
+            updateContainerMount: (workspace, container, mount) => this.command("container_mount_update", workspace, "", { container, mount }),
+            setContainerPaths: (workspace, container, paths) => this.command("container_path_set", workspace, "", { container, paths }),
+            createVolume: (name) => this.command("volume_create", name, ""),
+            removeVolume: (name) => this.command("volume_remove", name, ""),
+            removeImage: (imageId) => this.command("image_remove", imageId, ""),
+            rebuildImage: (imageId) => this.command("image_rebuild", imageId, ""),
+            rebuildAllImages: () => this.command("image_rebuild_all", "", ""),
+            buildImage: (imageId, parent, packages) => this.command("image_build", imageId, parent, { packages }),
+            rebuildBaseImage: (name) => this.command("image_base_rebuild", name, ""),
+            pullBaseImage: (name) => this.command("image_base_pull", name, ""),
+            setDefaultImage: (name) => {
+                this.edit("defaultImage", name);
+                this.save("defaultImage");
+            },
+            createSecret: (name, length, charset) => this.command("secret_create", name, "", {
+                ...(length ? { length } : {}),
+                ...(charset ? { charset } : {}),
+            }),
+            removeSecret: (name) => this.command("secret_remove", name, ""),
+            setSecret: (name, value) => this.command("secret_set", name, "", { value }),
+            addContainerSecret: (workspace, envVar, secret) => this.command("container_secret_add", workspace, "", {
+                container: "default",
+                secretEnv: envVar,
+                secret,
+            }),
+            removeContainerSecret: (workspace, envVar) => this.command("container_secret_remove", workspace, "", {
+                container: "default",
+                secretEnv: envVar,
+            }),
+            editDefaultImage: (text) => this.edit("defaultImage", text),
+            saveDefaultImage: () => this.save("defaultImage"),
+            discardDefaultImage: () => this.discard("defaultImage"),
+            editSocketsRoot: (text) => this.edit("socketsRoot", text),
+            saveSocketsRoot: () => this.save("socketsRoot"),
+            discardSocketsRoot: () => this.discard("socketsRoot"),
+        };
+    }
+    defaultImage() {
+        return this.scope.getSnapshot().value?.defaultImage ?? "";
+    }
+}

package/dist/client/container-card-create-modal.d.ts

@@ -0,0 +1,24 @@
+import { type ContainerCreateConfig, type ImageView, 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 CreateContainerModal(props: {
+    t: (key: ContainerPluginKey) => string;
+    workspace: WorkspaceView;
+    images: readonly ImageView[];
+    volumes: readonly {
+        name: string;
+    }[];
+    secrets: readonly {
+        name: string;
+    }[];
+    busy: boolean;
+    defaultImage: string;
+    projectsRoot: string;
+    directoryPicker?: DirectoryPickerFace;
+    named: boolean;
+    existing: readonly string[];
+    open: boolean;
+    onClose: () => void;
+    onCreate: (container: string, config: ContainerCreateConfig) => void;
+}): ReactNode;

package/dist/client/container-card-create-modal.js

@@ -0,0 +1,109 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { EnvEditor, MountsEditor } from "./container-card-editors.js";
+import { PathsList } from "./container-card-paths.js";
+import { Field, namePattern, sanitizeName } from "./container-card-shared.js";
+import { greyId, hint, imageSelect, sectionTitle } from "./container-card-styles.js";
+import { Button, Input, Modal } from "@deepseek-ai/dsh-client-ui-primitives";
+import { useEffect, useId, useState } from "react";
+export function CreateContainerModal(props) {
+    const { t, workspace, images, volumes, secrets, busy, defaultImage, projectsRoot, directoryPicker, named, existing, open, onClose, onCreate, } = props;
+    const [image, setImage] = useState(workspace.imageId || defaultImage);
+    const [name, setName] = useState("");
+    const [env, setEnv] = useState({});
+    const [mounts, setMounts] = useState(() => [
+        {
+            kind: "project",
+            project: workspace.projectName,
+            destination: "",
+            mode: "read_write",
+            volume: "",
+            secret: "",
+        },
+    ]);
+    const [secretEnv, setSecretEnv] = useState({});
+    const [paths, setPaths] = useState([]);
+    const [attachSecret, setAttachSecret] = useState("");
+    const [attachVar, setAttachVar] = useState("");
+    const [submitting, setSubmitting] = useState(false);
+    const imageLabel = useId();
+    const nameLabel = useId();
+    useEffect(() => {
+        if (!open)
+            return;
+        setImage(workspace.imageId || defaultImage);
+        setName("");
+        setEnv({});
+        setMounts([
+            {
+                kind: "project",
+                project: workspace.projectName,
+                destination: "",
+                mode: "read_write",
+                volume: "",
+                secret: "",
+            },
+        ]);
+        setSecretEnv({});
+        setPaths([]);
+        setAttachSecret("");
+        setAttachVar("");
+        setSubmitting(false);
+    }, [open, workspace, defaultImage]);
+    const baseImages = images.filter((image) => image.isBase);
+    const customImages = images.filter((image) => !image.isBase);
+    const candidates = [
+        ...baseImages.map((image) => image.imageId),
+        ...customImages.map((image) => image.imageId),
+    ];
+    const nameTaken = existing.includes(name);
+    const validName = namePattern.test(name) && name !== "default" && !nameTaken;
+    const canCreate = !named || validName;
+    const submit = () => {
+        if (!canCreate || submitting)
+            return;
+        setSubmitting(true);
+        onCreate(named ? name : "", {
+            image,
+            env,
+            mounts,
+            paths: paths.map((entry) => entry.path).filter((path) => path !== ""),
+            secretEnv,
+        });
+    };
+    const attach = () => {
+        const envVar = attachVar.trim();
+        if (envVar === "" || attachSecret === "")
+            return;
+        setSecretEnv({ ...secretEnv, [envVar]: attachSecret });
+        setAttachVar("");
+    };
+    return (_jsx(Modal, { open: open, onClose: onClose, title: named ? t("addContainer") : t("createContainer"), closeLabel: t("cancel"), footer: _jsxs(_Fragment, { children: [_jsx(Button, { variant: "outline", size: "sm", onClick: onClose, children: t("cancel") }), _jsx(Button, { variant: "primary", size: "sm", disabled: !canCreate || submitting, onClick: submit, children: named ? t("addContainer") : t("createContainer") })] }), children: _jsxs("div", { style: {
+                display: "flex",
+                flexDirection: "column",
+                gap: "12px",
+            }, children: [_jsx(Field, { label: t("image"), htmlFor: imageLabel, children: _jsxs("select", { id: imageLabel, style: imageSelect, value: image, disabled: busy, onChange: (event) => setImage(event.target.value), children: [candidates.length === 0 ? (_jsx("option", { value: "", children: t("none") })) : null, candidates.map((imageId) => (_jsx("option", { value: imageId, children: imageId }, imageId)))] }) }), named ? (_jsxs(Field, { label: t("containerName"), htmlFor: nameLabel, children: [_jsx(Input, { id: nameLabel, value: name, disabled: busy, onChange: (event) => setName(sanitizeName(event.target.value)) }), name !== "" && !validName ? (_jsx("p", { style: { ...hint, margin: 0 }, children: nameTaken
+                                ? t("containerNameTaken")
+                                : t("invalidContainerName") })) : null] })) : null, _jsx("div", { style: sectionTitle, children: t("envTitle") }), _jsx(EnvEditor, { t: t, env: env, busy: busy, onChange: setEnv }), _jsx("div", { style: sectionTitle, children: t("mountsTitle") }), _jsx(MountsEditor, { t: t, mounts: mounts, volumes: volumes, secrets: secrets, busy: busy, enabled: !busy, projectsRoot: projectsRoot, directoryPicker: directoryPicker, modeControl: "select", onAdd: (mount) => setMounts([...mounts, mount]), onRemove: (mount) => setMounts(mounts.filter((item) => item !== mount)), onUpdate: (updated, index) => setMounts(mounts.map((item, at) => (at === index ? updated : item))) }), _jsx("div", { style: sectionTitle, children: t("pathsTitle") }), _jsx(PathsList, { t: t, entries: paths, busy: busy, onChange: setPaths }), _jsx("div", { style: sectionTitle, children: t("containerSecretsTitle") }), Object.entries(secretEnv).map(([envVar, secretName]) => (_jsxs("div", { style: {
+                        display: "flex",
+                        flexWrap: "wrap",
+                        alignItems: "center",
+                        gap: "8px",
+                    }, children: [_jsxs("code", { style: {
+                                ...greyId,
+                                flex: 1,
+                                fontSize: "13px",
+                                color: "var(--dsw-alias-label-primary)",
+                            }, children: [envVar, "=", secretName] }), _jsx(Button, { variant: "outline", size: "sm", disabled: busy, onClick: () => {
+                                const next = { ...secretEnv };
+                                delete next[envVar];
+                                setSecretEnv(next);
+                            }, children: t("remove") })] }, envVar))), _jsxs("div", { style: {
+                        display: "flex",
+                        flexWrap: "wrap",
+                        alignItems: "center",
+                        gap: "8px",
+                    }, children: [_jsxs("select", { style: imageSelect, value: attachSecret, disabled: busy, 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: busy, 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: busy || attachVar.trim() === "" || attachSecret === "", onClick: attach, children: t("attachSecret") })] })] }) }));
+}

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

@@ -0,0 +1,5 @@
+import type { Context as ClientContext } from "@deepseek-ai/cordis";
+export declare const DIRECTORY_CLASS = "dsh-podman-directory";
+export declare const DIRECTORY_STYLES = "\n.dsh-podman-directory.dsh-podman-directory {\n  width: min(680px, 100%);\n  height: min(500px, calc(100dvh - 32px));\n  padding: 0;\n  gap: 0;\n  --dsh-scrollbar-thumb: var(--dsw-alias-scrollbar-bg-l2);\n  --dsh-scrollbar-thumb-hover: var(--dsw-alias-scrollbar-hover-l2);\n}\n.dsh-podman-directory-scope {\n  display: contents;\n}\n.dsh-podman-directory-header {\n  display: flex;\n  flex-direction: column;\n  flex: none;\n  gap: 8px;\n  padding: 16px 14px 8px 24px;\n  border-bottom: 0.5px solid var(--dsw-alias-border-l3);\n}\n.dsh-podman-directory-title {\n  margin: 0;\n  min-height: 28px;\n  font-size: 16px;\n  line-height: 24px;\n  font-weight: 510;\n  color: var(--dsw-alias-label-primary);\n}\n.dsh-podman-directory-crumbbar {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  box-sizing: border-box;\n  min-height: 24px;\n  margin-left: -9px;\n  padding: 0 8px;\n  border: 1px solid transparent;\n  border-radius: 8px;\n}\n.dsh-podman-directory-crumbs {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  flex: 0 1 auto;\n  min-width: 0;\n  overflow-x: auto;\n  scrollbar-width: none;\n}\n.dsh-podman-directory-crumbseat {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  flex: none;\n  min-width: 0;\n}\n.dsh-podman-directory-crumb {\n  border: none;\n  background: transparent;\n  padding: 0;\n  max-width: 160px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-size: 13px;\n  line-height: 20px;\n  font-weight: 500;\n  color: var(--dsw-alias-label-tertiary);\n  cursor: pointer;\n}\n.dsh-podman-directory-crumb:hover {\n  color: var(--dsw-alias-label-primary);\n}\n.dsh-podman-directory-crumb:disabled {\n  cursor: default;\n  color: var(--dsw-alias-label-caption);\n}\n.dsh-podman-directory-crumbchevron {\n  flex: none;\n  color: var(--dsw-alias-label-tertiary);\n}\n.dsh-podman-directory-content {\n  display: flex;\n  flex-direction: column;\n  flex: 1 1 0;\n  min-height: 0;\n  position: relative;\n  padding: 16px 16px 16px 24px;\n}\n.dsh-podman-directory-miller {\n  display: flex;\n  align-items: stretch;\n  flex: 1 1 0;\n  min-height: 0;\n  gap: 12px;\n  overflow-x: auto;\n  scrollbar-width: none;\n}\n.dsh-podman-directory-column {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  flex: 1 1 0;\n  min-width: 256px;\n  margin: 0;\n  list-style: none;\n  overflow-y: auto;\n  padding-right: 8px;\n}\n.dsh-podman-directory-divider {\n  flex: none;\n  width: 0.5px;\n  background: var(--dsw-alias-border-l3);\n}\n.dsh-podman-directory-row {\n  width: 100%;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  height: 28px;\n  flex: none;\n  padding: 4px;\n  border: none;\n  border-radius: 6px;\n  background: transparent;\n  text-align: left;\n  cursor: pointer;\n}\n.dsh-podman-directory-seat {\n  display: flex;\n  flex: none;\n}\n.dsh-podman-directory-row:hover:not(:disabled) {\n  background: var(--dsw-alias-interactive-bg-hover);\n}\n.dsh-podman-directory-row-selected,\n.dsh-podman-directory-row-selected:hover:not(:disabled) {\n  background: var(--dsw-alias-interactive-bg-active, var(--dsw-alias-interactive-bg-hover));\n}\n.dsh-podman-directory-row:disabled {\n  cursor: default;\n}\n.dsh-podman-directory-rowicon {\n  flex: none;\n  color: var(--dsw-alias-label-secondary);\n}\n.dsh-podman-directory-rowicon-selected {\n  flex: none;\n  color: var(--dsw-alias-button-info-fill);\n}\n.dsh-podman-directory-rowname {\n  flex: 1 1 0;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-size: 13px;\n  line-height: 20px;\n  font-weight: 500;\n  color: var(--dsw-alias-label-primary);\n}\n.dsh-podman-directory-rowchevron {\n  flex: none;\n  color: var(--dsw-alias-label-tertiary);\n}\n.dsh-podman-directory-status,\n.dsh-podman-directory-error {\n  margin: 0;\n  padding: 4px;\n  font-size: 12px;\n  line-height: 18px;\n}\n.dsh-podman-directory-status {\n  color: var(--dsw-alias-label-secondary);\n}\n.dsh-podman-directory-error {\n  color: var(--dsw-alias-state-error-primary);\n}\n.dsh-podman-directory-loading {\n  position: absolute;\n  right: 16px;\n  bottom: 8px;\n  padding: 2px 8px;\n  font-size: 12px;\n  line-height: 18px;\n  color: var(--dsw-alias-label-secondary);\n  background: var(--dsw-alias-bg-layer-2);\n}\n.dsh-podman-directory-footer {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: 8px;\n  flex: none;\n  padding: 16px 24px;\n  border-top: 0.5px solid var(--dsw-alias-border-l3);\n}\n.dsh-podman-directory-toggle {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 0;\n  border: none;\n  background: transparent;\n  font-size: 13px;\n  line-height: 20px;\n  font-weight: 500;\n  color: var(--dsw-alias-label-secondary);\n  cursor: pointer;\n}\n.dsh-podman-directory-toggle[aria-pressed=\"true\"] {\n  color: var(--dsw-alias-label-primary);\n}\n.dsh-podman-directory-toggle:disabled {\n  cursor: default;\n  color: var(--dsw-alias-label-caption);\n}\n.dsh-podman-directory-gap {\n  flex: 1 1 0;\n}\n.dsh-podman-directory-action {\n  min-width: 72px;\n}\n";
+/** Inject the directory browser stylesheet for the owning plugin lifetime. */
+export declare function installDirectoryStyles(ctx: ClientContext): void;

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

@@ -0,0 +1,246 @@
+// SPDX-FileCopyrightText: 2026 Elouan Martinet <exa@elou.world>
+//
+// SPDX-License-Identifier: MIT
+// The class passed to Modal for the project directory browser. The layout,
+// typography and tokens mirror dsh's own directory browser (680x500 dialog,
+// two Miller columns, chevron breadcrumbs, 28px rows with folder icons), so the
+// plugin's picker reads like the harness's workspace directory selection. The
+// dialog is clamped to the projects root, so its breadcrumb trail starts there.
+export const DIRECTORY_CLASS = "dsh-podman-directory";
+export const DIRECTORY_STYLES = `
+.dsh-podman-directory.dsh-podman-directory {
+  width: min(680px, 100%);
+  height: min(500px, calc(100dvh - 32px));
+  padding: 0;
+  gap: 0;
+  --dsh-scrollbar-thumb: var(--dsw-alias-scrollbar-bg-l2);
+  --dsh-scrollbar-thumb-hover: var(--dsw-alias-scrollbar-hover-l2);
+}
+.dsh-podman-directory-scope {
+  display: contents;
+}
+.dsh-podman-directory-header {
+  display: flex;
+  flex-direction: column;
+  flex: none;
+  gap: 8px;
+  padding: 16px 14px 8px 24px;
+  border-bottom: 0.5px solid var(--dsw-alias-border-l3);
+}
+.dsh-podman-directory-title {
+  margin: 0;
+  min-height: 28px;
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 510;
+  color: var(--dsw-alias-label-primary);
+}
+.dsh-podman-directory-crumbbar {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  box-sizing: border-box;
+  min-height: 24px;
+  margin-left: -9px;
+  padding: 0 8px;
+  border: 1px solid transparent;
+  border-radius: 8px;
+}
+.dsh-podman-directory-crumbs {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex: 0 1 auto;
+  min-width: 0;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+.dsh-podman-directory-crumbseat {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  flex: none;
+  min-width: 0;
+}
+.dsh-podman-directory-crumb {
+  border: none;
+  background: transparent;
+  padding: 0;
+  max-width: 160px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 13px;
+  line-height: 20px;
+  font-weight: 500;
+  color: var(--dsw-alias-label-tertiary);
+  cursor: pointer;
+}
+.dsh-podman-directory-crumb:hover {
+  color: var(--dsw-alias-label-primary);
+}
+.dsh-podman-directory-crumb:disabled {
+  cursor: default;
+  color: var(--dsw-alias-label-caption);
+}
+.dsh-podman-directory-crumbchevron {
+  flex: none;
+  color: var(--dsw-alias-label-tertiary);
+}
+.dsh-podman-directory-content {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 0;
+  min-height: 0;
+  position: relative;
+  padding: 16px 16px 16px 24px;
+}
+.dsh-podman-directory-miller {
+  display: flex;
+  align-items: stretch;
+  flex: 1 1 0;
+  min-height: 0;
+  gap: 12px;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+.dsh-podman-directory-column {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  flex: 1 1 0;
+  min-width: 256px;
+  margin: 0;
+  list-style: none;
+  overflow-y: auto;
+  padding-right: 8px;
+}
+.dsh-podman-directory-divider {
+  flex: none;
+  width: 0.5px;
+  background: var(--dsw-alias-border-l3);
+}
+.dsh-podman-directory-row {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  height: 28px;
+  flex: none;
+  padding: 4px;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  text-align: left;
+  cursor: pointer;
+}
+.dsh-podman-directory-seat {
+  display: flex;
+  flex: none;
+}
+.dsh-podman-directory-row:hover:not(:disabled) {
+  background: var(--dsw-alias-interactive-bg-hover);
+}
+.dsh-podman-directory-row-selected,
+.dsh-podman-directory-row-selected:hover:not(:disabled) {
+  background: var(--dsw-alias-interactive-bg-active, var(--dsw-alias-interactive-bg-hover));
+}
+.dsh-podman-directory-row:disabled {
+  cursor: default;
+}
+.dsh-podman-directory-rowicon {
+  flex: none;
+  color: var(--dsw-alias-label-secondary);
+}
+.dsh-podman-directory-rowicon-selected {
+  flex: none;
+  color: var(--dsw-alias-button-info-fill);
+}
+.dsh-podman-directory-rowname {
+  flex: 1 1 0;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 13px;
+  line-height: 20px;
+  font-weight: 500;
+  color: var(--dsw-alias-label-primary);
+}
+.dsh-podman-directory-rowchevron {
+  flex: none;
+  color: var(--dsw-alias-label-tertiary);
+}
+.dsh-podman-directory-status,
+.dsh-podman-directory-error {
+  margin: 0;
+  padding: 4px;
+  font-size: 12px;
+  line-height: 18px;
+}
+.dsh-podman-directory-status {
+  color: var(--dsw-alias-label-secondary);
+}
+.dsh-podman-directory-error {
+  color: var(--dsw-alias-state-error-primary);
+}
+.dsh-podman-directory-loading {
+  position: absolute;
+  right: 16px;
+  bottom: 8px;
+  padding: 2px 8px;
+  font-size: 12px;
+  line-height: 18px;
+  color: var(--dsw-alias-label-secondary);
+  background: var(--dsw-alias-bg-layer-2);
+}
+.dsh-podman-directory-footer {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+  flex: none;
+  padding: 16px 24px;
+  border-top: 0.5px solid var(--dsw-alias-border-l3);
+}
+.dsh-podman-directory-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  font-size: 13px;
+  line-height: 20px;
+  font-weight: 500;
+  color: var(--dsw-alias-label-secondary);
+  cursor: pointer;
+}
+.dsh-podman-directory-toggle[aria-pressed="true"] {
+  color: var(--dsw-alias-label-primary);
+}
+.dsh-podman-directory-toggle:disabled {
+  cursor: default;
+  color: var(--dsw-alias-label-caption);
+}
+.dsh-podman-directory-gap {
+  flex: 1 1 0;
+}
+.dsh-podman-directory-action {
+  min-width: 72px;
+}
+`;
+/** Inject the directory browser stylesheet for the owning plugin lifetime. */
+export function installDirectoryStyles(ctx) {
+    if (typeof document === "undefined")
+        return;
+    ctx.effect(() => {
+        const tag = document.createElement("style");
+        tag.dataset.plugin = "@exagone313/dsh-podman";
+        tag.textContent = DIRECTORY_STYLES;
+        document.head.appendChild(tag);
+        return () => {
+            tag.remove();
+        };
+    }, "podman: directory styles");
+}

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

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