From 2cef9eb7439e559a7cbd5d75da18a0beee8708f8 Mon Sep 17 00:00:00 2001
From: nfebe <fenn25.fn@gmail.com>
Date: Wed, 15 Jul 2026 15:41:35 +0100
Subject: [PATCH 1/4] feat(deployments): Add a container files tab

A deployment's own directory is browsable and editable, but whatever the
running service keeps to itself is not, and that is usually where the
configuration a user wants to read lives. Today the only way to it is a
terminal.

The new tab lists what a running service holds and can bring any path onto
the host, after which the existing Files tab edits it and the container
reads the same content. This is the opposite direction to mounting a host
path into a container, which hides whatever was there.

Browsing needs the service running and an image that ships a shell, since
the engine cannot list a directory. That case is explained rather than
left as a bare failure.
---
 src/components/ContainerFilesTab.test.ts | 112 +++++++
 src/components/ContainerFilesTab.vue     | 372 +++++++++++++++++++++++
 src/services/api.ts                      |  26 ++
 src/views/DeploymentDetailView.test.ts   |   5 +-
 src/views/DeploymentDetailView.vue       |  21 +-
 5 files changed, 533 insertions(+), 3 deletions(-)
 create mode 100644 src/components/ContainerFilesTab.test.ts
 create mode 100644 src/components/ContainerFilesTab.vue

diff --git a/src/components/ContainerFilesTab.test.ts b/src/components/ContainerFilesTab.test.ts
new file mode 100644
index 0000000..6b7521d
--- /dev/null
+++ b/src/components/ContainerFilesTab.test.ts
@@ -0,0 +1,112 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { mount, flushPromises } from "@vue/test-utils";
+import { createTestingPinia } from "@pinia/testing";
+import ContainerFilesTab from "./ContainerFilesTab.vue";
+import { containerFilesApi } from "@/services/api";
+
+vi.mock("@/services/api", () => ({
+  containerFilesApi: {
+    list: vi.fn(),
+    materialize: vi.fn(),
+  },
+}));
+
+// Shaped like what the agent returns, which mirrors a real `ls -lA` line from
+// nginx:alpine.
+const listing = {
+  data: {
+    path: "/etc/nginx",
+    service: "app",
+    files: [
+      { name: "conf.d", path: "/etc/nginx/conf.d", size: 4096, mode: "drwxr-xr-x", is_dir: true, is_symlink: false },
+      {
+        name: "nginx.conf",
+        path: "/etc/nginx/nginx.conf",
+        size: 648,
+        mode: "-rw-r--r--",
+        is_dir: false,
+        is_symlink: false,
+        modified_raw: "Jun 17 15:58",
+      },
+    ],
+  },
+};
+
+const mountTab = () =>
+  mount(ContainerFilesTab, {
+    props: { deploymentName: "test-app", serviceNames: ["app", "db"] },
+    global: {
+      plugins: [createTestingPinia({ createSpy: vi.fn })],
+      stubs: { ConfirmModal: { template: "<div />", props: ["visible"] } },
+    },
+  });
+
+describe("ContainerFilesTab", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    vi.mocked(containerFilesApi.list).mockResolvedValue(listing as any);
+  });
+
+  it("lists what the running service holds", async () => {
+    const wrapper = mountTab();
+    await flushPromises();
+
+    expect(containerFilesApi.list).toHaveBeenCalledWith("test-app", "app", "/");
+    expect(wrapper.text()).toContain("conf.d");
+    expect(wrapper.text()).toContain("nginx.conf");
+  });
+
+  it("navigates into a directory", async () => {
+    const wrapper = mountTab();
+    await flushPromises();
+
+    const confd = wrapper.findAll(".cf-name").find((b) => b.text().includes("conf.d"));
+    await confd!.trigger("click");
+    await flushPromises();
+
+    expect(containerFilesApi.list).toHaveBeenLastCalledWith("test-app", "app", "/etc/nginx/conf.d");
+  });
+
+  it("brings a path onto the host and reports where it landed", async () => {
+    vi.mocked(containerFilesApi.materialize).mockResolvedValue({
+      data: {
+        deployment: "test-app",
+        service: "app",
+        container_path: "/etc/nginx/nginx.conf",
+        host_path: "./nginx.conf",
+      },
+    } as any);
+
+    const wrapper = mountTab();
+    await flushPromises();
+
+    // The row action confirms first, so drive the confirmed path directly.
+    (wrapper.vm as any).pending = "/etc/nginx/nginx.conf";
+    await (wrapper.vm as any).materialize();
+    await flushPromises();
+
+    expect(containerFilesApi.materialize).toHaveBeenCalledWith("test-app", "app", {
+      container_path: "/etc/nginx/nginx.conf",
+    });
+    expect(wrapper.emitted("materialized")?.[0]).toEqual([
+      { hostPath: "./nginx.conf", containerPath: "/etc/nginx/nginx.conf" },
+    ]);
+  });
+
+  it("explains why an image without a shell cannot be browsed", async () => {
+    vi.mocked(containerFilesApi.list).mockRejectedValue({
+      response: {
+        data: {
+          error: "failed to list /: no shell",
+          hint: "the service must be running and its image must provide a shell to be browsed",
+        },
+      },
+    });
+
+    const wrapper = mountTab();
+    await flushPromises();
+
+    expect(wrapper.text()).toContain("no shell");
+    expect(wrapper.text()).toContain("must provide a shell");
+  });
+});
diff --git a/src/components/ContainerFilesTab.vue b/src/components/ContainerFilesTab.vue
new file mode 100644
index 0000000..caf4912
--- /dev/null
+++ b/src/components/ContainerFilesTab.vue
@@ -0,0 +1,372 @@
+<template>
+  <div class="container-files-tab">
+    <div class="cf-header">
+      <div class="cf-heading">
+        <h3>Container Files</h3>
+        <p class="cf-subtitle">
+          What the running service holds. Bring a path onto the host to edit it under Files, where the container reads
+          the same content.
+        </p>
+      </div>
+      <div class="cf-controls">
+        <select v-model="service" class="form-select" :disabled="loading" @change="browse('/')">
+          <option v-for="name in serviceNames" :key="name" :value="name">{{ name }}</option>
+        </select>
+        <button class="btn btn-secondary" :disabled="loading" @click="browse(path)">
+          <Icon name="refresh-cw" :size="15" :spin="loading" />
+          Refresh
+        </button>
+      </div>
+    </div>
+
+    <nav class="cf-breadcrumb" aria-label="Container path">
+      <button class="cf-crumb" :disabled="loading" @click="browse('/')">
+        <Icon name="hard-drive" :size="14" />
+        /
+      </button>
+      <template v-for="(crumb, i) in crumbs" :key="crumb.path">
+        <Icon name="chevron-right" :size="13" class="cf-crumb-sep" />
+        <button class="cf-crumb" :disabled="loading || i === crumbs.length - 1" @click="browse(crumb.path)">
+          {{ crumb.name }}
+        </button>
+      </template>
+      <button v-if="path !== '/'" class="btn btn-primary cf-bring-current" :disabled="busy" @click="confirm(path)">
+        <Icon name="download" :size="15" />
+        Bring this folder onto the host
+      </button>
+    </nav>
+
+    <div v-if="loading" class="loading-state">
+      <Icon name="loader" :size="18" spin />
+      Reading the container...
+    </div>
+
+    <div v-else-if="error" class="cf-error">
+      <Icon name="triangle-alert" :size="18" />
+      <div>
+        <p class="cf-error-msg">{{ error }}</p>
+        <p v-if="hint" class="cf-error-hint">{{ hint }}</p>
+      </div>
+    </div>
+
+    <div v-else-if="!files.length" class="empty-state">
+      <Icon name="folder-open" :size="28" />
+      <h4>Nothing here</h4>
+      <p>This directory is empty.</p>
+    </div>
+
+    <table v-else class="cf-table">
+      <thead>
+        <tr>
+          <th>Name</th>
+          <th class="cf-num">Size</th>
+          <th>Modified</th>
+          <th class="cf-actions-col">Host</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-if="path !== '/'" class="cf-row">
+          <td colspan="4">
+            <button class="cf-name cf-up" @click="browse(parentPath)">
+              <Icon name="corner-left-up" :size="15" />
+              ..
+            </button>
+          </td>
+        </tr>
+        <tr v-for="file in files" :key="file.path" class="cf-row">
+          <td>
+            <button v-if="file.is_dir" class="cf-name" @click="browse(file.path)">
+              <Icon name="folder" :size="15" class="cf-icon-dir" />
+              {{ file.name }}
+            </button>
+            <span v-else class="cf-name cf-name-static">
+              <Icon :name="file.is_symlink ? 'link' : 'file'" :size="15" />
+              {{ file.name }}
+              <span v-if="file.link_target" class="cf-link-target">to {{ file.link_target }}</span>
+            </span>
+          </td>
+          <td class="cf-num">{{ file.is_dir ? "" : formatBytes(file.size) }}</td>
+          <td class="cf-modified">{{ file.modified_raw }}</td>
+          <td class="cf-actions-col">
+            <button
+              class="btn btn-sm btn-secondary"
+              :disabled="busy || file.is_symlink"
+              :title="
+                file.is_symlink ? 'A symlink points elsewhere; bring its target out instead' : 'Copy onto the host'
+              "
+              @click="confirm(file.path)"
+            >
+              <Icon name="download" :size="14" />
+            </button>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+
+    <ConfirmModal
+      :visible="!!pending"
+      title="Bring onto the host"
+      :message="confirmMessage"
+      variant="warning"
+      warning="The service restarts to pick up the mount."
+      confirm-text="Bring it out"
+      :loading="busy"
+      @confirm="materialize"
+      @cancel="pending = null"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from "vue";
+import { containerFilesApi } from "@/services/api";
+import type { ContainerFile } from "@/services/api";
+import { useNotificationsStore } from "@/stores/notifications";
+import Icon from "@/components/base/Icon.vue";
+import ConfirmModal from "@/components/ConfirmModal.vue";
+
+const props = defineProps<{
+  deploymentName: string;
+  serviceNames: string[];
+}>();
+
+const emit = defineEmits<{ materialized: [{ hostPath: string; containerPath: string }] }>();
+
+const notifications = useNotificationsStore();
+
+const service = ref(props.serviceNames[0] || "");
+const path = ref("/");
+const files = ref<ContainerFile[]>([]);
+const loading = ref(false);
+const busy = ref(false);
+const error = ref("");
+const hint = ref("");
+const pending = ref<string | null>(null);
+
+const crumbs = computed(() => {
+  const parts = path.value.split("/").filter(Boolean);
+  return parts.map((name, i) => ({ name, path: "/" + parts.slice(0, i + 1).join("/") }));
+});
+
+const parentPath = computed(() => {
+  const parts = path.value.split("/").filter(Boolean);
+  parts.pop();
+  return "/" + parts.join("/");
+});
+
+const confirmMessage = computed(
+  () =>
+    `${pending.value} will be copied onto the host and mounted back, so ${service.value} keeps the content it is running now. ` +
+    `Afterwards you can edit it under Files.`,
+);
+
+const browse = async (target: string) => {
+  if (!service.value) return;
+  loading.value = true;
+  error.value = "";
+  hint.value = "";
+  try {
+    const response = await containerFilesApi.list(props.deploymentName, service.value, target || "/");
+    files.value = response.data.files || [];
+    path.value = response.data.path || target || "/";
+  } catch (err: any) {
+    files.value = [];
+    error.value = err.response?.data?.error || err.message || "Could not read the container";
+    hint.value = err.response?.data?.hint || "";
+  } finally {
+    loading.value = false;
+  }
+};
+
+const confirm = (target: string) => {
+  pending.value = target;
+};
+
+const materialize = async () => {
+  if (!pending.value) return;
+  busy.value = true;
+  const containerPath = pending.value;
+  try {
+    const response = await containerFilesApi.materialize(props.deploymentName, service.value, {
+      container_path: containerPath,
+    });
+    notifications.success("Now on the host", `${containerPath} is at ${response.data.host_path} and editable.`);
+    emit("materialized", { hostPath: response.data.host_path, containerPath });
+    pending.value = null;
+    await browse(path.value);
+  } catch (err: any) {
+    notifications.error("Could not bring it out", err.response?.data?.error || err.message);
+  } finally {
+    busy.value = false;
+  }
+};
+
+const formatBytes = (bytes: number) => {
+  if (!bytes) return "0 B";
+  const units = ["B", "KB", "MB", "GB"];
+  const i = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1);
+  return `${(bytes / Math.pow(1024, i)).toFixed(i ? 1 : 0)} ${units[i]}`;
+};
+
+onMounted(() => browse("/"));
+</script>
+
+<style scoped>
+.container-files-tab {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.cf-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+
+.cf-heading h3 {
+  margin: 0 0 0.25rem;
+}
+
+.cf-subtitle {
+  margin: 0;
+  max-width: 60ch;
+  color: var(--text-secondary);
+  font-size: 0.85rem;
+}
+
+.cf-controls {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.cf-breadcrumb {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  flex-wrap: wrap;
+  padding: 0.5rem 0.75rem;
+  background: var(--surface-2, rgba(127, 127, 127, 0.08));
+  border-radius: 8px;
+}
+
+.cf-crumb {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+  border: 0;
+  background: none;
+  color: var(--text-primary);
+  cursor: pointer;
+  padding: 0.15rem 0.35rem;
+  border-radius: 6px;
+  font-size: 0.85rem;
+}
+
+.cf-crumb:hover:not(:disabled) {
+  background: var(--surface-3, rgba(127, 127, 127, 0.16));
+}
+
+.cf-crumb:disabled {
+  cursor: default;
+  color: var(--text-secondary);
+}
+
+.cf-crumb-sep {
+  color: var(--text-secondary);
+}
+
+.cf-bring-current {
+  margin-left: auto;
+}
+
+.cf-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.cf-table th {
+  text-align: left;
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--text-secondary);
+  padding: 0.5rem;
+  border-bottom: 1px solid var(--border-color, rgba(127, 127, 127, 0.2));
+}
+
+.cf-row td {
+  padding: 0.4rem 0.5rem;
+  border-bottom: 1px solid var(--border-color, rgba(127, 127, 127, 0.12));
+  font-size: 0.85rem;
+}
+
+.cf-name {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45rem;
+  border: 0;
+  background: none;
+  color: var(--text-primary);
+  cursor: pointer;
+  font-size: 0.85rem;
+  padding: 0;
+}
+
+.cf-name-static {
+  cursor: default;
+  color: var(--text-secondary);
+}
+
+.cf-name:hover:not(.cf-name-static) {
+  text-decoration: underline;
+}
+
+.cf-icon-dir {
+  color: var(--primary-color, #6366f1);
+}
+
+.cf-link-target {
+  color: var(--text-secondary);
+  font-size: 0.75rem;
+}
+
+.cf-num {
+  text-align: right;
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+}
+
+.cf-modified,
+.cf-actions-col {
+  color: var(--text-secondary);
+  white-space: nowrap;
+}
+
+.cf-actions-col {
+  text-align: right;
+}
+
+.cf-error {
+  display: flex;
+  gap: 0.6rem;
+  padding: 0.75rem 1rem;
+  border-radius: 8px;
+  background: var(--danger-bg, rgba(239, 68, 68, 0.08));
+  color: var(--danger-color, #ef4444);
+}
+
+.cf-error-msg {
+  margin: 0;
+  font-size: 0.85rem;
+}
+
+.cf-error-hint {
+  margin: 0.25rem 0 0;
+  font-size: 0.8rem;
+  color: var(--text-secondary);
+}
+</style>
diff --git a/src/services/api.ts b/src/services/api.ts
index eb59b1d..5728f6f 100755
--- a/src/services/api.ts
+++ b/src/services/api.ts
@@ -643,6 +643,32 @@ export interface FilesInfo {
   file_count: number;
 }
 
+export interface ContainerFile {
+  name: string;
+  path: string;
+  size: number;
+  mode: string;
+  is_dir: boolean;
+  is_symlink: boolean;
+  link_target?: string;
+  modified_raw?: string;
+}
+
+export const containerFilesApi = {
+  list: (deploymentName: string, service: string, path: string = "/") =>
+    apiClient.get<{ path: string; service: string; files: ContainerFile[] }>(
+      `/deployments/${deploymentName}/container-files/${service}`,
+      { params: { path } },
+    ),
+  // Copies a container path onto the host and mounts it back, so it becomes an
+  // ordinary file the deployment's own file browser can edit.
+  materialize: (deploymentName: string, service: string, data: { container_path: string; host_path?: string }) =>
+    apiClient.post<{ deployment: string; service: string; container_path: string; host_path: string }>(
+      `/deployments/${deploymentName}/container-files/${service}/materialize`,
+      data,
+    ),
+};
+
 export const filesApi = {
   list: (deploymentName: string, path: string = "/") =>
     apiClient.get<{ files: FileInfo[] }>(`/deployments/${deploymentName}/files`, {
diff --git a/src/views/DeploymentDetailView.test.ts b/src/views/DeploymentDetailView.test.ts
index 5ab4634..5c06290 100644
--- a/src/views/DeploymentDetailView.test.ts
+++ b/src/views/DeploymentDetailView.test.ts
@@ -159,11 +159,11 @@ describe("DeploymentDetailView", () => {
   });
 
   describe("Tab navigation", () => {
-    it("displays all nine tabs", async () => {
+    it("displays all ten tabs", async () => {
       const wrapper = mountView();
       await flushPromises();
       const tabs = wrapper.findAll(".tab-btn");
-      expect(tabs.length).toBe(9);
+      expect(tabs.length).toBe(10);
     });
 
     it("has Overview tab", async () => {
@@ -252,6 +252,7 @@ describe("DeploymentDetailView", () => {
       expect((wrapper.vm as any).tabs).toEqual([
         { id: "overview", label: "Overview", icon: "pi pi-info-circle" },
         { id: "files", label: "Files", icon: "pi pi-folder" },
+        { id: "container-files", label: "Container Files", icon: "lucide:box" },
         { id: "logs", label: "Logs", icon: "pi pi-file-edit" },
         { id: "terminal", label: "Terminal", icon: "pi pi-desktop" },
         { id: "environment", label: "Environment", icon: "pi pi-list" },
diff --git a/src/views/DeploymentDetailView.vue b/src/views/DeploymentDetailView.vue
index 99f4555..0a6c5e2 100755
--- a/src/views/DeploymentDetailView.vue
+++ b/src/views/DeploymentDetailView.vue
@@ -86,7 +86,8 @@
           :class="{ active: activeTab === tab.id }"
           @click="activeTab = tab.id"
         >
-          <i :class="tab.icon" />
+          <Icon v-if="tab.icon.startsWith('lucide:')" :name="tab.icon" :size="15" />
+          <i v-else :class="tab.icon" />
           {{ tab.label }}
         </button>
         <button
@@ -566,6 +567,14 @@
           />
         </div>
 
+        <div v-if="activeTab === 'container-files'" class="container-files-tab-wrap">
+          <ContainerFilesTab
+            :deployment-name="route.params.name as string"
+            :service-names="composeServiceNames"
+            @materialized="handleMaterialized"
+          />
+        </div>
+
         <div v-if="activeTab === 'logs'" class="logs-tab">
           <LogViewer
             :logs="logs"
@@ -1835,6 +1844,7 @@ import type {
   ProtectedModeConfig,
 } from "@/types";
 import FileBrowser from "@/components/FileBrowser.vue";
+import ContainerFilesTab from "@/components/ContainerFilesTab.vue";
 import LogViewer from "@/components/LogViewer.vue";
 import ConfirmModal from "@/components/ConfirmModal.vue";
 import ContainerTerminal from "@/components/ContainerTerminal.vue";
@@ -1950,6 +1960,7 @@ const protectedPathPresets = [
 const tabs = [
   { id: "overview", label: "Overview", icon: "pi pi-info-circle" },
   { id: "files", label: "Files", icon: "pi pi-folder" },
+  { id: "container-files", label: "Container Files", icon: "lucide:box" },
   { id: "logs", label: "Logs", icon: "pi pi-file-edit" },
   { id: "terminal", label: "Terminal", icon: "pi pi-desktop" },
   { id: "environment", label: "Environment", icon: "pi pi-list" },
@@ -3075,6 +3086,14 @@ const saveCredential = async () => {
   }
 };
 
+// A path brought out of the container is an ordinary file on the host now, so
+// send the user to the browser that edits it, and refresh the compose view that
+// just gained the mount.
+const handleMaterialized = async () => {
+  await fetchDeployment();
+  activeTab.value = "files";
+};
+
 const handleComposeMount = async (mount: {
   sourcePath: string;
   targetPath: string;

From 3591dce3bce76fa74d1bc80ac84b6651b7a83d39 Mon Sep 17 00:00:00 2001
From: nfebe <fenn25.fn@gmail.com>
Date: Wed, 15 Jul 2026 15:58:38 +0100
Subject: [PATCH 2/4] fix(deployments): Move container files under the Files
 tab

Container files were their own tab, which split browsing across two
places when the two are the same task: find a path, then read or edit it.
Files now switches between the host and a running service, and bringing a
path out of the container drops straight back to the host view where it
can be edited.

The panel had also styled itself, so it sat flush against the tab's edges
and drew colours the theme does not set, which left it looking unlike the
rest of the app in either theme. It uses the design tokens now, and scrolls
a long directory inside the pane rather than stretching the tab.
---
 ...ab.test.ts => ContainerFilesPanel.test.ts} |   6 +-
 ...erFilesTab.vue => ContainerFilesPanel.vue} | 219 ++++++++++--------
 src/views/DeploymentDetailView.test.ts        |   5 +-
 src/views/DeploymentDetailView.vue            |  82 ++++++-
 4 files changed, 201 insertions(+), 111 deletions(-)
 rename src/components/{ContainerFilesTab.test.ts => ContainerFilesPanel.test.ts} (96%)
 rename src/components/{ContainerFilesTab.vue => ContainerFilesPanel.vue} (62%)

diff --git a/src/components/ContainerFilesTab.test.ts b/src/components/ContainerFilesPanel.test.ts
similarity index 96%
rename from src/components/ContainerFilesTab.test.ts
rename to src/components/ContainerFilesPanel.test.ts
index 6b7521d..c5e0dbb 100644
--- a/src/components/ContainerFilesTab.test.ts
+++ b/src/components/ContainerFilesPanel.test.ts
@@ -1,7 +1,7 @@
 import { describe, it, expect, vi, beforeEach } from "vitest";
 import { mount, flushPromises } from "@vue/test-utils";
 import { createTestingPinia } from "@pinia/testing";
-import ContainerFilesTab from "./ContainerFilesTab.vue";
+import ContainerFilesPanel from "./ContainerFilesPanel.vue";
 import { containerFilesApi } from "@/services/api";
 
 vi.mock("@/services/api", () => ({
@@ -33,7 +33,7 @@ const listing = {
 };
 
 const mountTab = () =>
-  mount(ContainerFilesTab, {
+  mount(ContainerFilesPanel, {
     props: { deploymentName: "test-app", serviceNames: ["app", "db"] },
     global: {
       plugins: [createTestingPinia({ createSpy: vi.fn })],
@@ -41,7 +41,7 @@ const mountTab = () =>
     },
   });
 
-describe("ContainerFilesTab", () => {
+describe("ContainerFilesPanel", () => {
   beforeEach(() => {
     vi.clearAllMocks();
     vi.mocked(containerFilesApi.list).mockResolvedValue(listing as any);
diff --git a/src/components/ContainerFilesTab.vue b/src/components/ContainerFilesPanel.vue
similarity index 62%
rename from src/components/ContainerFilesTab.vue
rename to src/components/ContainerFilesPanel.vue
index caf4912..a69d902 100644
--- a/src/components/ContainerFilesTab.vue
+++ b/src/components/ContainerFilesPanel.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="container-files-tab">
+  <div class="container-files-panel">
     <div class="cf-header">
       <div class="cf-heading">
         <h3>Container Files</h3>
@@ -55,53 +55,55 @@
       <p>This directory is empty.</p>
     </div>
 
-    <table v-else class="cf-table">
-      <thead>
-        <tr>
-          <th>Name</th>
-          <th class="cf-num">Size</th>
-          <th>Modified</th>
-          <th class="cf-actions-col">Host</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr v-if="path !== '/'" class="cf-row">
-          <td colspan="4">
-            <button class="cf-name cf-up" @click="browse(parentPath)">
-              <Icon name="corner-left-up" :size="15" />
-              ..
-            </button>
-          </td>
-        </tr>
-        <tr v-for="file in files" :key="file.path" class="cf-row">
-          <td>
-            <button v-if="file.is_dir" class="cf-name" @click="browse(file.path)">
-              <Icon name="folder" :size="15" class="cf-icon-dir" />
-              {{ file.name }}
-            </button>
-            <span v-else class="cf-name cf-name-static">
-              <Icon :name="file.is_symlink ? 'link' : 'file'" :size="15" />
-              {{ file.name }}
-              <span v-if="file.link_target" class="cf-link-target">to {{ file.link_target }}</span>
-            </span>
-          </td>
-          <td class="cf-num">{{ file.is_dir ? "" : formatBytes(file.size) }}</td>
-          <td class="cf-modified">{{ file.modified_raw }}</td>
-          <td class="cf-actions-col">
-            <button
-              class="btn btn-sm btn-secondary"
-              :disabled="busy || file.is_symlink"
-              :title="
-                file.is_symlink ? 'A symlink points elsewhere; bring its target out instead' : 'Copy onto the host'
-              "
-              @click="confirm(file.path)"
-            >
-              <Icon name="download" :size="14" />
-            </button>
-          </td>
-        </tr>
-      </tbody>
-    </table>
+    <div v-else class="cf-listing">
+      <table class="cf-table">
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th class="cf-num">Size</th>
+            <th>Modified</th>
+            <th class="cf-actions-col">Host</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-if="path !== '/'" class="cf-row">
+            <td colspan="4">
+              <button class="cf-name cf-up" @click="browse(parentPath)">
+                <Icon name="corner-left-up" :size="15" />
+                ..
+              </button>
+            </td>
+          </tr>
+          <tr v-for="file in files" :key="file.path" class="cf-row">
+            <td>
+              <button v-if="file.is_dir" class="cf-name" @click="browse(file.path)">
+                <Icon name="folder" :size="15" class="cf-icon-dir" />
+                {{ file.name }}
+              </button>
+              <span v-else class="cf-name cf-name-static">
+                <Icon :name="file.is_symlink ? 'link' : 'file'" :size="15" />
+                {{ file.name }}
+                <span v-if="file.link_target" class="cf-link-target">to {{ file.link_target }}</span>
+              </span>
+            </td>
+            <td class="cf-num">{{ file.is_dir ? "" : formatBytes(file.size) }}</td>
+            <td class="cf-modified">{{ file.modified_raw }}</td>
+            <td class="cf-actions-col">
+              <button
+                class="btn btn-sm btn-secondary"
+                :disabled="busy || file.is_symlink"
+                :title="
+                  file.is_symlink ? 'A symlink points elsewhere; bring its target out instead' : 'Copy onto the host'
+                "
+                @click="confirm(file.path)"
+              >
+                <Icon name="download" :size="14" />
+              </button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
 
     <ConfirmModal
       :visible="!!pending"
@@ -212,113 +214,140 @@ onMounted(() => browse("/"));
 </script>
 
 <style scoped>
-.container-files-tab {
+/* The panel fills the file pane and scrolls its own listing, so the tab's
+   height stays put no matter how long a directory is. */
+.container-files-panel {
   display: flex;
   flex-direction: column;
-  gap: 1rem;
+  gap: var(--space-3);
+  height: 100%;
+  min-height: 0;
+  padding: var(--space-4);
 }
 
 .cf-header {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
-  gap: 1rem;
+  gap: var(--space-4);
   flex-wrap: wrap;
+  flex-shrink: 0;
 }
 
 .cf-heading h3 {
-  margin: 0 0 0.25rem;
+  margin: 0 0 var(--space-1);
+  font-size: var(--text-md);
 }
 
 .cf-subtitle {
   margin: 0;
-  max-width: 60ch;
-  color: var(--text-secondary);
-  font-size: 0.85rem;
+  max-width: 62ch;
+  color: var(--text-muted);
+  font-size: var(--text-sm);
 }
 
 .cf-controls {
   display: flex;
-  gap: 0.5rem;
+  gap: var(--space-2);
   align-items: center;
 }
 
 .cf-breadcrumb {
   display: flex;
   align-items: center;
-  gap: 0.25rem;
+  gap: var(--space-1);
   flex-wrap: wrap;
-  padding: 0.5rem 0.75rem;
-  background: var(--surface-2, rgba(127, 127, 127, 0.08));
-  border-radius: 8px;
+  padding: var(--space-2) var(--space-3);
+  background: var(--surface-inset);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-sm);
+  flex-shrink: 0;
 }
 
 .cf-crumb {
   display: inline-flex;
   align-items: center;
-  gap: 0.3rem;
+  gap: var(--space-1);
   border: 0;
   background: none;
-  color: var(--text-primary);
+  color: var(--text);
   cursor: pointer;
-  padding: 0.15rem 0.35rem;
-  border-radius: 6px;
-  font-size: 0.85rem;
+  padding: var(--space-1) var(--space-2);
+  border-radius: var(--radius-xs);
+  font-size: var(--text-sm);
 }
 
 .cf-crumb:hover:not(:disabled) {
-  background: var(--surface-3, rgba(127, 127, 127, 0.16));
+  background: var(--surface-raised);
 }
 
 .cf-crumb:disabled {
   cursor: default;
-  color: var(--text-secondary);
+  color: var(--text-muted);
 }
 
 .cf-crumb-sep {
-  color: var(--text-secondary);
+  color: var(--text-subtle);
 }
 
 .cf-bring-current {
   margin-left: auto;
 }
 
+.cf-listing {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-sm);
+}
+
 .cf-table {
   width: 100%;
   border-collapse: collapse;
 }
 
 .cf-table th {
+  position: sticky;
+  top: 0;
+  background: var(--surface-raised);
   text-align: left;
-  font-size: 0.75rem;
+  font-size: var(--text-xs);
   text-transform: uppercase;
   letter-spacing: 0.04em;
-  color: var(--text-secondary);
-  padding: 0.5rem;
-  border-bottom: 1px solid var(--border-color, rgba(127, 127, 127, 0.2));
+  color: var(--text-muted);
+  padding: var(--space-2) var(--space-3);
+  border-bottom: 1px solid var(--border);
 }
 
 .cf-row td {
-  padding: 0.4rem 0.5rem;
-  border-bottom: 1px solid var(--border-color, rgba(127, 127, 127, 0.12));
-  font-size: 0.85rem;
+  padding: var(--space-2) var(--space-3);
+  border-bottom: 1px solid var(--border-subtle);
+  font-size: var(--text-sm);
+}
+
+.cf-row:last-child td {
+  border-bottom: 0;
+}
+
+.cf-row:hover td {
+  background: var(--surface-raised);
 }
 
 .cf-name {
   display: inline-flex;
   align-items: center;
-  gap: 0.45rem;
+  gap: var(--space-2);
   border: 0;
   background: none;
-  color: var(--text-primary);
+  color: var(--text);
   cursor: pointer;
-  font-size: 0.85rem;
+  font-size: var(--text-sm);
   padding: 0;
 }
 
 .cf-name-static {
   cursor: default;
-  color: var(--text-secondary);
 }
 
 .cf-name:hover:not(.cf-name-static) {
@@ -326,47 +355,49 @@ onMounted(() => browse("/"));
 }
 
 .cf-icon-dir {
-  color: var(--primary-color, #6366f1);
+  color: var(--accent);
 }
 
 .cf-link-target {
-  color: var(--text-secondary);
-  font-size: 0.75rem;
+  color: var(--text-subtle);
+  font-size: var(--text-xs);
 }
 
 .cf-num {
   text-align: right;
   white-space: nowrap;
   font-variant-numeric: tabular-nums;
+  color: var(--text-muted);
 }
 
-.cf-modified,
-.cf-actions-col {
-  color: var(--text-secondary);
+.cf-modified {
+  color: var(--text-muted);
   white-space: nowrap;
 }
 
 .cf-actions-col {
   text-align: right;
+  white-space: nowrap;
 }
 
 .cf-error {
   display: flex;
-  gap: 0.6rem;
-  padding: 0.75rem 1rem;
-  border-radius: 8px;
-  background: var(--danger-bg, rgba(239, 68, 68, 0.08));
-  color: var(--danger-color, #ef4444);
+  gap: var(--space-3);
+  padding: var(--space-3) var(--space-4);
+  border-radius: var(--radius-sm);
+  background: var(--color-danger-50);
+  border: 1px solid var(--color-danger-200);
+  color: var(--color-danger-700);
 }
 
 .cf-error-msg {
   margin: 0;
-  font-size: 0.85rem;
+  font-size: var(--text-sm);
 }
 
 .cf-error-hint {
-  margin: 0.25rem 0 0;
-  font-size: 0.8rem;
-  color: var(--text-secondary);
+  margin: var(--space-1) 0 0;
+  font-size: var(--text-xs);
+  color: var(--color-danger-600);
 }
 </style>
diff --git a/src/views/DeploymentDetailView.test.ts b/src/views/DeploymentDetailView.test.ts
index 5c06290..5ab4634 100644
--- a/src/views/DeploymentDetailView.test.ts
+++ b/src/views/DeploymentDetailView.test.ts
@@ -159,11 +159,11 @@ describe("DeploymentDetailView", () => {
   });
 
   describe("Tab navigation", () => {
-    it("displays all ten tabs", async () => {
+    it("displays all nine tabs", async () => {
       const wrapper = mountView();
       await flushPromises();
       const tabs = wrapper.findAll(".tab-btn");
-      expect(tabs.length).toBe(10);
+      expect(tabs.length).toBe(9);
     });
 
     it("has Overview tab", async () => {
@@ -252,7 +252,6 @@ describe("DeploymentDetailView", () => {
       expect((wrapper.vm as any).tabs).toEqual([
         { id: "overview", label: "Overview", icon: "pi pi-info-circle" },
         { id: "files", label: "Files", icon: "pi pi-folder" },
-        { id: "container-files", label: "Container Files", icon: "lucide:box" },
         { id: "logs", label: "Logs", icon: "pi pi-file-edit" },
         { id: "terminal", label: "Terminal", icon: "pi pi-desktop" },
         { id: "environment", label: "Environment", icon: "pi pi-list" },
diff --git a/src/views/DeploymentDetailView.vue b/src/views/DeploymentDetailView.vue
index 0a6c5e2..9f06fc4 100755
--- a/src/views/DeploymentDetailView.vue
+++ b/src/views/DeploymentDetailView.vue
@@ -86,8 +86,7 @@
           :class="{ active: activeTab === tab.id }"
           @click="activeTab = tab.id"
         >
-          <Icon v-if="tab.icon.startsWith('lucide:')" :name="tab.icon" :size="15" />
-          <i v-else :class="tab.icon" />
+          <i :class="tab.icon" />
           {{ tab.label }}
         </button>
         <button
@@ -558,17 +557,33 @@
         </div>
 
         <div v-if="activeTab === 'files'" class="files-tab">
+          <div class="files-source" role="tablist" aria-label="File source">
+            <button
+              v-for="source in fileSources"
+              :key="source.id"
+              class="files-source-btn"
+              :class="{ active: filesSource === source.id }"
+              role="tab"
+              :aria-selected="filesSource === source.id"
+              @click="filesSource = source.id"
+            >
+              <Icon :name="source.icon" :size="14" />
+              {{ source.label }}
+            </button>
+          </div>
+
           <FileBrowser
+            v-if="filesSource === 'host'"
+            class="files-pane"
             :deployment-name="route.params.name as string"
             :service-names="composeServiceNames"
             :mounts="composeMounts"
             :enable-mount="true"
             @mount-compose="handleComposeMount"
           />
-        </div>
-
-        <div v-if="activeTab === 'container-files'" class="container-files-tab-wrap">
-          <ContainerFilesTab
+          <ContainerFilesPanel
+            v-else
+            class="files-pane"
             :deployment-name="route.params.name as string"
             :service-names="composeServiceNames"
             @materialized="handleMaterialized"
@@ -1844,7 +1859,7 @@ import type {
   ProtectedModeConfig,
 } from "@/types";
 import FileBrowser from "@/components/FileBrowser.vue";
-import ContainerFilesTab from "@/components/ContainerFilesTab.vue";
+import ContainerFilesPanel from "@/components/ContainerFilesPanel.vue";
 import LogViewer from "@/components/LogViewer.vue";
 import ConfirmModal from "@/components/ConfirmModal.vue";
 import ContainerTerminal from "@/components/ContainerTerminal.vue";
@@ -1960,7 +1975,6 @@ const protectedPathPresets = [
 const tabs = [
   { id: "overview", label: "Overview", icon: "pi pi-info-circle" },
   { id: "files", label: "Files", icon: "pi pi-folder" },
-  { id: "container-files", label: "Container Files", icon: "lucide:box" },
   { id: "logs", label: "Logs", icon: "pi pi-file-edit" },
   { id: "terminal", label: "Terminal", icon: "pi pi-desktop" },
   { id: "environment", label: "Environment", icon: "pi pi-list" },
@@ -3086,12 +3100,18 @@ const saveCredential = async () => {
   }
 };
 
+const fileSources = [
+  { id: "host", label: "Host", icon: "hard-drive" },
+  { id: "container", label: "Container", icon: "box" },
+];
+const filesSource = ref("host");
+
 // A path brought out of the container is an ordinary file on the host now, so
-// send the user to the browser that edits it, and refresh the compose view that
-// just gained the mount.
+// switch to the browser that edits it, and refresh the compose view that just
+// gained the mount.
 const handleMaterialized = async () => {
   await fetchDeployment();
-  activeTab.value = "files";
+  filesSource.value = "host";
 };
 
 const handleComposeMount = async (mount: {
@@ -4338,6 +4358,46 @@ onUnmounted(() => {
 
 .files-tab {
   height: 600px;
+  display: flex;
+  flex-direction: column;
+}
+
+.files-source {
+  display: flex;
+  gap: var(--space-1);
+  padding: var(--space-3) var(--space-4) 0;
+  flex-shrink: 0;
+}
+
+.files-source-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-2) var(--space-3);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--surface);
+  color: var(--text-muted);
+  font-size: var(--text-sm);
+  cursor: pointer;
+}
+
+.files-source-btn:hover {
+  color: var(--text);
+  border-color: var(--border-subtle);
+}
+
+.files-source-btn.active {
+  background: var(--accent-subtle);
+  border-color: var(--accent);
+  color: var(--accent);
+}
+
+/* The browsers size themselves to their container, so the pane takes what the
+   source switcher leaves. */
+.files-pane {
+  flex: 1;
+  min-height: 0;
 }
 
 .domain-settings-modal {

From aa328e9b6b9610e991739c9b19ecf14c4f185d06 Mon Sep 17 00:00:00 2001
From: nfebe <fenn25.fn@gmail.com>
Date: Wed, 15 Jul 2026 16:00:56 +0100
Subject: [PATCH 3/4] fix(deployments): Centre the file source switcher in its
 row

The switcher had space above it and none below, so it sat high in its row
rather than centred, and its row did not line up with the file browser's
toolbar directly beneath it.
---
 src/views/DeploymentDetailView.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/views/DeploymentDetailView.vue b/src/views/DeploymentDetailView.vue
index 9f06fc4..069c190 100755
--- a/src/views/DeploymentDetailView.vue
+++ b/src/views/DeploymentDetailView.vue
@@ -4362,10 +4362,14 @@ onUnmounted(() => {
   flex-direction: column;
 }
 
+/* Matches the file browser's own toolbar padding, so the switcher and the
+   toolbar beneath it read as one stack rather than two misaligned bars. The
+   browser's toolbar draws the rule; a second one here would double it. */
 .files-source {
   display: flex;
+  align-items: center;
   gap: var(--space-1);
-  padding: var(--space-3) var(--space-4) 0;
+  padding: var(--space-3) var(--space-4);
   flex-shrink: 0;
 }
 

From 6c18b2c393750cb24d7ff5644fe26793b9dcf765 Mon Sep 17 00:00:00 2001
From: nfebe <fenn25.fn@gmail.com>
Date: Wed, 15 Jul 2026 16:46:56 +0100
Subject: [PATCH 4/4] feat(deployments): Tag mounted paths and let them be
 unmounted

A path a container reads through a bind mount looked like any other file,
so there was nothing to say that editing or deleting it reaches inside the
running container, and no way to disconnect it short of editing the compose
file by hand.

Mounted paths now carry a tag naming what reads them and where, and can be
unmounted from the row menu. The warnings follow what actually happens:
deleting a mounted path takes it from the container too, because the host
copy is what the container reads; unmounting first sends the service back
to its image's content and leaves the copy on the host, where deleting it
is then harmless.
---
 src/components/FileBrowser.test.ts | 128 +++++++++++++++++++++++++++
 src/components/FileBrowser.vue     | 136 ++++++++++++++++++++++++++++-
 src/services/api.ts                |  19 ++++
 src/views/DeploymentDetailView.vue |   1 +
 4 files changed, 282 insertions(+), 2 deletions(-)
 create mode 100644 src/components/FileBrowser.test.ts

diff --git a/src/components/FileBrowser.test.ts b/src/components/FileBrowser.test.ts
new file mode 100644
index 0000000..3c7a574
--- /dev/null
+++ b/src/components/FileBrowser.test.ts
@@ -0,0 +1,128 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { mount, flushPromises } from "@vue/test-utils";
+import { createTestingPinia } from "@pinia/testing";
+import FileBrowser from "./FileBrowser.vue";
+import { deploymentsApi } from "@/services/api";
+import type { FileBrowserApi, FileInfo } from "@/services/api";
+import type { ComposeMount } from "@/utils/compose";
+
+vi.mock("@/services/api", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("@/services/api")>();
+  return {
+    ...actual,
+    deploymentsApi: { removeComposeMount: vi.fn() },
+    configApi: { get: vi.fn().mockResolvedValue({ data: {} }) },
+  };
+});
+
+const files: FileInfo[] = [
+  { name: "conf.d", path: "/conf.d", size: 4096, is_dir: true, mod_time: "2026-07-14T00:00:00Z", permissions: "755" },
+  {
+    name: "notes.txt",
+    path: "/notes.txt",
+    size: 12,
+    is_dir: false,
+    mod_time: "2026-07-14T00:00:00Z",
+    permissions: "644",
+  },
+];
+
+// Only conf.d is mounted, so the two rows should be treated differently.
+const mounts: ComposeMount[] = [{ service: "app", source: "./conf.d", target: "/etc/nginx/conf.d", readOnly: false }];
+
+const fakeApi = (): FileBrowserApi => ({
+  list: vi.fn().mockResolvedValue({ data: { files } }),
+  getInfo: vi.fn().mockResolvedValue({ data: { total_size: 0, file_count: 0 } }),
+  upload: vi.fn(),
+  download: vi.fn(),
+  createDir: vi.fn(),
+  createFile: vi.fn(),
+  chmod: vi.fn(),
+  delete: vi.fn().mockResolvedValue({}),
+  getContent: vi.fn().mockResolvedValue({ data: "" }),
+});
+
+const mountBrowser = () =>
+  mount(FileBrowser, {
+    props: { deploymentName: "test-app", api: fakeApi(), mounts, serviceNames: ["app"], enableMount: true },
+    global: { plugins: [createTestingPinia({ createSpy: vi.fn })] },
+  });
+
+describe("FileBrowser mounted paths", () => {
+  beforeEach(() => vi.clearAllMocks());
+
+  it("tags a path the container reads, and says where", async () => {
+    const wrapper = mountBrowser();
+    await flushPromises();
+
+    const tags = wrapper.findAll(".mount-tag");
+    expect(tags).toHaveLength(1);
+    expect(tags[0].attributes("title")).toContain("app reads this at /etc/nginx/conf.d");
+  });
+
+  it("offers Unmount only for a path that is mounted", async () => {
+    const wrapper = mountBrowser();
+    await flushPromises();
+
+    (wrapper.vm as any).toggleRowMenu("/conf.d");
+    await flushPromises();
+    expect(wrapper.text()).toContain("Unmount");
+
+    (wrapper.vm as any).toggleRowMenu("/notes.txt");
+    await flushPromises();
+    expect(wrapper.text()).not.toContain("Unmount");
+  });
+
+  it("unmounts every service reading the path, then reports it", async () => {
+    vi.mocked(deploymentsApi.removeComposeMount).mockResolvedValue({ data: {} } as any);
+
+    const wrapper = mountBrowser();
+    await flushPromises();
+
+    (wrapper.vm as any).fileToUnmount = files[0];
+    await (wrapper.vm as any).unmountFile();
+    await flushPromises();
+
+    expect(deploymentsApi.removeComposeMount).toHaveBeenCalledWith("test-app", {
+      source_path: "./conf.d",
+      target_path: "/etc/nginx/conf.d",
+      service_name: "app",
+    });
+    expect(wrapper.emitted("unmounted")).toBeTruthy();
+  });
+
+  // The modals are teleported to the body, so they are read from there.
+  it("warns that deleting a mounted path takes it from the container too", async () => {
+    const wrapper = mountBrowser();
+    await flushPromises();
+
+    (wrapper.vm as any).confirmDelete(files[0]);
+    await flushPromises();
+    expect(document.body.textContent).toContain("takes it from the running container too");
+
+    wrapper.unmount();
+  });
+
+  it("does not warn about the container when the path is not mounted", async () => {
+    const wrapper = mountBrowser();
+    await flushPromises();
+
+    (wrapper.vm as any).confirmDelete(files[1]);
+    await flushPromises();
+    expect(document.body.textContent).not.toContain("takes it from the running container too");
+
+    wrapper.unmount();
+  });
+
+  it("explains that an unmount leaves the host copy behind", async () => {
+    const wrapper = mountBrowser();
+    await flushPromises();
+
+    (wrapper.vm as any).confirmUnmount(files[0]);
+    await flushPromises();
+    expect(document.body.textContent).toContain("stays on the host");
+    expect(document.body.textContent).toContain("will not touch the container");
+
+    wrapper.unmount();
+  });
+});
diff --git a/src/components/FileBrowser.vue b/src/components/FileBrowser.vue
index cf5bea7..1e5b853 100644
--- a/src/components/FileBrowser.vue
+++ b/src/components/FileBrowser.vue
@@ -114,6 +114,10 @@
           <span class="col-name">
             <i :class="getFileIcon(file)" />
             <span class="file-name">{{ file.name }}</span>
+            <span v-if="fileMounts(file).length > 0" class="mount-tag" :title="mountSummary(file)">
+              <i class="pi pi-link" />
+              Mounted
+            </span>
             <span v-if="file.is_dir && file.child_count !== undefined" class="child-count">
               {{ file.child_count }} items
             </span>
@@ -153,6 +157,14 @@
                   <i class="pi pi-link" />
                   <span>{{ fileMounts(file).length > 0 ? "Edit mount" : "Add compose mount" }}</span>
                 </button>
+                <button
+                  v-if="mountAvailable && fileMounts(file).length > 0"
+                  class="menu-item"
+                  @click="onMenuAction('unmount', file)"
+                >
+                  <i class="pi pi-times-circle" />
+                  <span>Unmount</span>
+                </button>
                 <button class="menu-item" @click="onMenuAction('permissions', file)">
                   <i class="pi pi-key" />
                   <span>Permissions</span>
@@ -180,6 +192,10 @@
             <i :class="getFileIcon(file)" />
           </div>
           <div class="grid-item-name">{{ file.name }}</div>
+          <div v-if="fileMounts(file).length > 0" class="mount-tag" :title="mountSummary(file)">
+            <i class="pi pi-link" />
+            Mounted
+          </div>
           <div class="grid-item-meta">
             {{
               file.is_dir
@@ -218,6 +234,14 @@
                   <i class="pi pi-link" />
                   <span>{{ fileMounts(file).length > 0 ? "Edit mount" : "Add compose mount" }}</span>
                 </button>
+                <button
+                  v-if="mountAvailable && fileMounts(file).length > 0"
+                  class="menu-item"
+                  @click="onMenuAction('unmount', file)"
+                >
+                  <i class="pi pi-times-circle" />
+                  <span>Unmount</span>
+                </button>
                 <button class="menu-item" @click="onMenuAction('permissions', file)">
                   <i class="pi pi-key" />
                   <span>Permissions</span>
@@ -314,6 +338,15 @@
               >?
             </p>
             <p v-if="fileToDelete?.is_dir" class="warning-text">This will delete all contents inside the folder.</p>
+            <p v-if="fileToDelete && fileMounts(fileToDelete).length > 0" class="warning-text">
+              This is what
+              {{
+                fileMounts(fileToDelete)
+                  .map((m) => `${m.service} reads at ${m.target}`)
+                  .join(", ")
+              }}, so deleting it here takes it from the running container too. Unmount it first to keep the container on
+              its image's own content.
+            </p>
           </div>
           <div class="modal-footer">
             <button class="btn btn-secondary" @click="showDeleteModal = false">Cancel</button>
@@ -325,6 +358,46 @@
         </div>
       </div>
 
+      <div v-if="showUnmountModal" class="modal-overlay" @click.self="showUnmountModal = false">
+        <div class="modal-container small">
+          <div class="modal-header">
+            <h3>
+              <i class="pi pi-times-circle" />
+              Unmount
+            </h3>
+          </div>
+          <div class="modal-body">
+            <p>
+              Stop
+              {{
+                fileToUnmount
+                  ? fileMounts(fileToUnmount)
+                      .map((m) => `${m.service} reading ${m.target}`)
+                      .join(" and ")
+                  : ""
+              }}
+              from <strong>{{ fileToUnmount?.name }}</strong
+              >?
+            </p>
+            <p class="warning-text">
+              The service restarts and goes back to whatever its image holds there, so anything only in this copy stops
+              being used.
+            </p>
+            <p>
+              <strong>{{ fileToUnmount?.name }}</strong> stays on the host. Deleting it afterwards will not touch the
+              container.
+            </p>
+          </div>
+          <div class="modal-footer">
+            <button class="btn btn-secondary" @click="showUnmountModal = false">Cancel</button>
+            <button class="btn btn-primary" :disabled="unmounting" @click="unmountFile">
+              <i :class="unmounting ? 'pi pi-spin pi-spinner' : 'pi pi-times-circle'" />
+              Unmount
+            </button>
+          </div>
+        </div>
+      </div>
+
       <div v-if="showMountModal" class="modal-overlay" @click.self="showMountModal = false">
         <div class="modal-container small">
           <div class="modal-header">
@@ -488,7 +561,7 @@ import { ref, reactive, computed, onMounted, onBeforeUnmount, watch } from "vue"
 import { Codemirror } from "vue-codemirror";
 import { yaml } from "@codemirror/lang-yaml";
 import { oneDark } from "@codemirror/theme-one-dark";
-import { configApi, createDeploymentFileApi, type FileBrowserApi, type FileInfo } from "@/services/api";
+import { configApi, createDeploymentFileApi, deploymentsApi, type FileBrowserApi, type FileInfo } from "@/services/api";
 import { useNotificationsStore } from "@/stores/notifications";
 import { toComposeRelativePath, type ComposeMount } from "@/utils/compose";
 import Icon from "@/components/base/Icon.vue";
@@ -529,6 +602,7 @@ const emit = defineEmits<{
       name: string;
     },
   ];
+  unmounted: [];
 }>();
 
 const notifications = useNotificationsStore();
@@ -561,19 +635,55 @@ const mountServiceName = ref("");
 const mountTargetPath = ref("");
 const mountReadOnly = ref(false);
 
+const showUnmountModal = ref(false);
+const fileToUnmount = ref<FileInfo | null>(null);
+const unmounting = ref(false);
+
 const rowMenuOpenFor = ref<string | null>(null);
 
 const toggleRowMenu = (path: string) => {
   rowMenuOpenFor.value = rowMenuOpenFor.value === path ? null : path;
 };
 
-const onMenuAction = (action: "mount" | "permissions" | "delete", file: FileInfo) => {
+const onMenuAction = (action: "mount" | "unmount" | "permissions" | "delete", file: FileInfo) => {
   rowMenuOpenFor.value = null;
   if (action === "mount") openMountModal(file);
+  else if (action === "unmount") confirmUnmount(file);
   else if (action === "permissions") openPermissionsModal(file);
   else if (action === "delete") confirmDelete(file);
 };
 
+const confirmUnmount = (file: FileInfo) => {
+  fileToUnmount.value = file;
+  showUnmountModal.value = true;
+};
+
+const unmountFile = async () => {
+  const file = fileToUnmount.value;
+  const mounts = file ? fileMounts(file) : [];
+  if (!file || !mounts.length || !props.deploymentName) return;
+
+  unmounting.value = true;
+  try {
+    // A path can be mounted into more than one service, and it stays mounted
+    // until the last one lets go.
+    for (const mount of mounts) {
+      await deploymentsApi.removeComposeMount(props.deploymentName, {
+        source_path: mount.source,
+        target_path: mount.target,
+        service_name: mount.service,
+      });
+    }
+    emit("unmounted");
+    showUnmountModal.value = false;
+    fileToUnmount.value = null;
+  } catch (err: any) {
+    error.value = err.response?.data?.error || err.message || "Could not unmount";
+  } finally {
+    unmounting.value = false;
+  }
+};
+
 const onDocumentClick = () => {
   if (rowMenuOpenFor.value !== null) rowMenuOpenFor.value = null;
 };
@@ -680,6 +790,11 @@ const fileMounts = (file: FileInfo): ComposeMount[] => {
   return mountsBySource.value.get(toComposeRelativePath(file.path)) || [];
 };
 
+const mountSummary = (file: FileInfo): string =>
+  fileMounts(file)
+    .map((m) => `${m.service} reads this at ${m.target}${m.readOnly ? " (read only)" : ""}`)
+    .join("\n");
+
 const pathParts = computed(() => {
   return currentPath.value.split("/").filter((p) => p.length > 0);
 });
@@ -1148,6 +1263,23 @@ onBeforeUnmount(() => {
   min-height: 500px;
 }
 
+/* Marks a path a container reads through a bind mount, so it is clear before
+   editing or deleting that the change reaches inside the container. */
+.mount-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  padding: 0 var(--space-2);
+  border: 1px solid var(--accent);
+  border-radius: var(--radius-full);
+  background: var(--accent-subtle);
+  color: var(--accent);
+  font-size: var(--text-xs);
+  line-height: 1.6;
+  white-space: nowrap;
+  cursor: help;
+}
+
 .browser-toolbar {
   display: flex;
   justify-content: space-between;
diff --git a/src/services/api.ts b/src/services/api.ts
index 5728f6f..e42a77c 100755
--- a/src/services/api.ts
+++ b/src/services/api.ts
@@ -214,6 +214,25 @@ export const deploymentsApi = {
       mount: string;
       added: boolean;
     }>(`/deployments/${name}/compose/mount`, mount),
+  // Removes a bind mount and recreates the service, which returns it to what its
+  // image holds there. The host copy is left alone.
+  removeComposeMount: (
+    name: string,
+    mount: {
+      source_path: string;
+      target_path: string;
+      service_name: string;
+    },
+  ) =>
+    apiClient.post<{
+      message: string;
+      name: string;
+      filename: string;
+      content: string;
+      service_name: string;
+      source_path: string;
+      target_path: string;
+    }>(`/deployments/${name}/compose/unmount`, mount),
   getStats: (name: string) =>
     apiClient.get<{
       deployment: string;
diff --git a/src/views/DeploymentDetailView.vue b/src/views/DeploymentDetailView.vue
index 069c190..02f7d2f 100755
--- a/src/views/DeploymentDetailView.vue
+++ b/src/views/DeploymentDetailView.vue
@@ -580,6 +580,7 @@
             :mounts="composeMounts"
             :enable-mount="true"
             @mount-compose="handleComposeMount"
+            @unmounted="fetchDeployment"
           />
           <ContainerFilesPanel
             v-else