From c7785f5b1c367ca59dafdf0e1ba9f35482880c43 Mon Sep 17 00:00:00 2001
From: nfebe <fenn25.fn@gmail.com>
Date: Mon, 25 May 2026 11:21:06 +0100
Subject: [PATCH 1/4] fix(ui): Unblock /api-keys refresh by tightening the dev
 proxy

The dev server proxied any path starting with the literal string "api"
to the agent. The path "/api-keys" matched that prefix and was being
sent to a backend that has no such endpoint, so refreshing the API
keys page returned a 404 instead of letting the SPA router handle
the route.

The proxy now matches only paths starting with "/api/", so the front
end's own routes that share the "api" prefix fall through to the SPA
fallback as expected.
---
 vite.config.ts | 28 ++++++++++++++--------------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/vite.config.ts b/vite.config.ts
index 869245a..6633826 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,25 +1,25 @@
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
-import { fileURLToPath, URL } from 'node:url'
-import pkg from './package.json'
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+import { fileURLToPath, URL } from "node:url";
+import pkg from "./package.json";
 
 export default defineConfig({
   plugins: [vue()],
   define: {
-    __APP_VERSION__: JSON.stringify(pkg.version)
+    __APP_VERSION__: JSON.stringify(pkg.version),
   },
   resolve: {
     alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url))
-    }
+      "@": fileURLToPath(new URL("./src", import.meta.url)),
+    },
   },
   server: {
     port: 5173,
     proxy: {
-      '/api': {
-        target: 'http://localhost:8090',
-        changeOrigin: true
-      }
-    }
-  }
-})
+      "^/api/": {
+        target: "http://localhost:8090",
+        changeOrigin: true,
+      },
+    },
+  },
+});

From c26a05a262b9a19f226ee60b46d7b5a9bf5e1fff Mon Sep 17 00:00:00 2001
From: nfebe <fenn25.fn@gmail.com>
Date: Mon, 25 May 2026 11:21:31 +0100
Subject: [PATCH 2/4] feat: Add API key edit, protected mode UI, file manager
 improvements, system views

API keys can now be edited from the UI in a tabbed dialog that mirrors
the user dialog: profile, permissions, and a deployment access tab
that grants per-deployment read, write, or admin level. The tabbed
modal shell and the deployment access field are extracted into shared
components so the user dialog and the API key dialog use exactly the
same primitives. The blanket 401 interceptor that logged people out
on any per-resource auth error is narrowed to only redirect on session
endpoints, so a refused create or update surfaces as a toast instead
of a forced sign-out.

The deployment protected-mode panel and the global system-terminal
protection panel share a single explainer helper, so each blocked
command rule renders a human-readable description ("blocks any
command containing rm -rf") and the add form previews the rule as
it is typed. Tooltips on the blocked-action chips state what each
action covers.

The file browser becomes context-agnostic: it accepts an injected
API adapter and renders the same UI for deployment files and for a
new system-wide file manager. Files and folders can be created in
place, permissions edited through a per-bit chmod dialog, and row
actions are collapsed into an overflow menu to reduce accidental
clicks. Hidden and system folders are hidden by default with toggles
to reveal them, and the manager opens in the user's home directory
while still allowing navigation up to the configured root.

New routes mount the system-wide file manager and the system terminal
in the dashboard, both gated by the corresponding new permissions
threaded through the role defaults.

Closes #117
Closes #122
Closes #123
---
 src/components/ContainerTerminal.test.ts |  34 +-
 src/components/ContainerTerminal.vue     |  22 +-
 src/components/DeploymentAccessField.vue | 252 +++++++++++
 src/components/FileBrowser.vue           | 508 +++++++++++++++++++++--
 src/components/TabbedFormModal.vue       | 227 ++++++++++
 src/layouts/DashboardLayout.vue          |  29 +-
 src/router/index.ts                      |  12 +
 src/services/api.ts                      |  74 +++-
 src/stores/users.ts                      |  28 +-
 src/types/index.ts                       |  27 +-
 src/utils/permissions.ts                 |   1 +
 src/utils/protectedMode.ts               |  32 ++
 src/views/APIKeysView.vue                | 367 ++++++++++++----
 src/views/DeploymentDetailView.vue       | 353 +++++++++++++++-
 src/views/SettingsView.vue               | 299 ++++++++++++-
 src/views/SystemFilesView.vue            |  41 ++
 src/views/SystemTerminalView.vue         | 238 +++++++++++
 src/views/UsersView.vue                  | 342 ++++++---------
 18 files changed, 2539 insertions(+), 347 deletions(-)
 create mode 100644 src/components/DeploymentAccessField.vue
 create mode 100644 src/components/TabbedFormModal.vue
 create mode 100644 src/utils/protectedMode.ts
 create mode 100644 src/views/SystemFilesView.vue
 create mode 100644 src/views/SystemTerminalView.vue

diff --git a/src/components/ContainerTerminal.test.ts b/src/components/ContainerTerminal.test.ts
index 3a92226..60c1464 100644
--- a/src/components/ContainerTerminal.test.ts
+++ b/src/components/ContainerTerminal.test.ts
@@ -121,8 +121,15 @@ describe("ContainerTerminal", () => {
       }
     } as any;
 
-    // Mock localStorage
-    vi.spyOn(Storage.prototype, "getItem").mockReturnValue("test-token");
+    Object.defineProperty(window, "localStorage", {
+      value: {
+        getItem: vi.fn().mockReturnValue("test-token"),
+        setItem: vi.fn(),
+        removeItem: vi.fn(),
+        clear: vi.fn(),
+      },
+      configurable: true,
+    });
   });
 
   afterEach(() => {
@@ -223,6 +230,29 @@ describe("ContainerTerminal", () => {
       expect(wrapper.emitted("connected")).toBeTruthy();
     });
 
+    it("shows terminal disabled denial before auth success", async () => {
+      const wrapper = mountTerminal();
+      const button = wrapper.find(".terminal-overlay button");
+      await button.trigger("click");
+
+      mockWebSocket.onopen();
+      mockWebSocket.onmessage({
+        data: JSON.stringify({
+          type: "error",
+          code: "protected_mode",
+          message: "Terminal access is disabled for this deployment by protected mode settings",
+        }),
+      });
+      mockWebSocket.onclose();
+
+      await wrapper.vm.$nextTick();
+
+      expect(wrapper.text()).toContain("Terminal access is disabled for this deployment by protected mode settings");
+      expect(wrapper.emitted("error")?.[0]).toEqual([
+        "Terminal access is disabled for this deployment by protected mode settings",
+      ]);
+    });
+
     it("sends resize message after auth success", async () => {
       const wrapper = mountTerminal();
       const button = wrapper.find(".terminal-overlay button");
diff --git a/src/components/ContainerTerminal.vue b/src/components/ContainerTerminal.vue
index df7e4ff..3c6ab8d 100644
--- a/src/components/ContainerTerminal.vue
+++ b/src/components/ContainerTerminal.vue
@@ -47,6 +47,7 @@ let resizeObserver: ResizeObserver | null = null;
 let resizeTimeout: ReturnType<typeof setTimeout> | null = null;
 let lastRows = 0;
 let lastCols = 0;
+let explicitCloseMessage = "";
 
 const getWebSocketUrl = () => {
   const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
@@ -70,6 +71,7 @@ const connect = () => {
   connectionStatus.value = "connecting";
   statusMessage.value = "Connecting...";
   authenticated = false;
+  explicitCloseMessage = "";
 
   socket = new WebSocket(getWebSocketUrl());
   socket.binaryType = "arraybuffer";
@@ -123,10 +125,26 @@ const connect = () => {
           }
           return;
         }
+        if (parsed.type === "error") {
+          const message = parsed.message || "Terminal connection denied";
+          explicitCloseMessage = message;
+          connectionStatus.value = "error";
+          statusMessage.value = message;
+          emit("error", message);
+          socket?.close();
+          return;
+        }
       } catch {
         // Not JSON, might be an error message before auth
       }
       // If we get data before auth_success, show as error
+      const text = data.replace(/\x1b\[[0-9;]*m/g, "").trim();
+      if (text) {
+        explicitCloseMessage = text;
+        connectionStatus.value = "error";
+        statusMessage.value = text;
+        emit("error", text);
+      }
       if (terminal) {
         terminal.write(data);
       }
@@ -139,8 +157,8 @@ const connect = () => {
   };
 
   socket.onclose = () => {
-    connectionStatus.value = "disconnected";
-    statusMessage.value = "Connection closed. Click Connect to reconnect.";
+    connectionStatus.value = explicitCloseMessage ? "error" : "disconnected";
+    statusMessage.value = explicitCloseMessage || "Connection closed. Click Connect to reconnect.";
     authenticated = false;
     emit("disconnected");
   };
diff --git a/src/components/DeploymentAccessField.vue b/src/components/DeploymentAccessField.vue
new file mode 100644
index 0000000..40dabf0
--- /dev/null
+++ b/src/components/DeploymentAccessField.vue
@@ -0,0 +1,252 @@
+<template>
+  <div class="deployment-access-field">
+    <p v-if="hint" class="tab-hint">{{ hint }}</p>
+    <div v-if="readOnly" class="readonly-view">
+      <div v-if="!entries.length" class="empty-state">
+        <i class="pi pi-info-circle" />
+        <span>No deployment access</span>
+      </div>
+      <div v-else class="entries-list">
+        <div v-for="entry in entries" :key="entry.name" class="entry-row readonly">
+          <span class="entry-name">{{ entry.name }}</span>
+          <span class="entry-level" :class="entry.level">{{ entry.level }}</span>
+        </div>
+      </div>
+    </div>
+
+    <template v-else>
+      <div class="add-form">
+        <select v-model="newName" class="form-input">
+          <option value="">Select deployment...</option>
+          <option v-for="d in selectable" :key="d" :value="d">{{ d }}</option>
+        </select>
+        <select v-model="newLevel" class="form-input">
+          <option value="read">Read</option>
+          <option value="write">Write</option>
+          <option value="admin">Admin</option>
+        </select>
+        <button type="button" class="btn btn-primary btn-sm" :disabled="!newName" @click="addEntry">Add</button>
+      </div>
+
+      <div v-if="entries.length" class="entries-list">
+        <div v-for="entry in entries" :key="entry.name" class="entry-row">
+          <span class="entry-name">{{ entry.name }}</span>
+          <select :value="entry.level" @change="setLevel(entry.name, ($event.target as HTMLSelectElement).value)">
+            <option value="read">Read</option>
+            <option value="write">Write</option>
+            <option value="admin">Admin</option>
+          </select>
+          <button type="button" class="btn btn-icon btn-sm" title="Remove" @click="removeEntry(entry.name)">
+            <i class="pi pi-times" />
+          </button>
+        </div>
+      </div>
+      <div v-else class="empty-state">
+        <i class="pi pi-info-circle" />
+        <span>{{ emptyHint || "No deployments selected" }}</span>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import type { DeploymentAccessLevel, DeploymentAccessMap } from "@/types";
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: DeploymentAccessMap;
+    available: string[];
+    hint?: string;
+    emptyHint?: string;
+    readOnly?: boolean;
+    defaultLevel?: DeploymentAccessLevel;
+  }>(),
+  {
+    readOnly: false,
+    defaultLevel: "read",
+  },
+);
+
+const emit = defineEmits<{
+  "update:modelValue": [value: DeploymentAccessMap];
+}>();
+
+const newName = ref("");
+const newLevel = ref<DeploymentAccessLevel>(props.defaultLevel);
+
+const entries = computed(() =>
+  Object.entries(props.modelValue || {})
+    .map(([name, level]) => ({ name, level: level as DeploymentAccessLevel }))
+    .sort((a, b) => a.name.localeCompare(b.name)),
+);
+
+const selectable = computed(() =>
+  props.available.filter((d) => !(d in (props.modelValue || {}))).sort((a, b) => a.localeCompare(b)),
+);
+
+const addEntry = () => {
+  if (!newName.value) return;
+  emit("update:modelValue", { ...(props.modelValue || {}), [newName.value]: newLevel.value });
+  newName.value = "";
+  newLevel.value = props.defaultLevel;
+};
+
+const setLevel = (name: string, level: string) => {
+  emit("update:modelValue", { ...(props.modelValue || {}), [name]: level as DeploymentAccessLevel });
+};
+
+const removeEntry = (name: string) => {
+  const next = { ...(props.modelValue || {}) };
+  delete next[name];
+  emit("update:modelValue", next);
+};
+</script>
+
+<style scoped>
+.deployment-access-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.625rem;
+}
+
+.tab-hint {
+  margin: 0;
+  font-size: 0.8125rem;
+  color: var(--color-gray-600);
+  line-height: 1.4;
+}
+
+.add-form {
+  display: grid;
+  grid-template-columns: 1fr auto auto;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.add-form .form-input {
+  width: 100%;
+  padding: 0.4375rem 0.625rem;
+  border: 1px solid var(--color-gray-300);
+  border-radius: 6px;
+  font-size: 0.875rem;
+  background: var(--surface-card, white);
+}
+
+.add-form select:nth-child(2) {
+  min-width: 100px;
+}
+
+.entries-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+
+.entry-row {
+  display: grid;
+  grid-template-columns: 1fr auto auto;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.4375rem 0.625rem;
+  background: var(--color-gray-50);
+  border: 1px solid var(--color-gray-200);
+  border-radius: 6px;
+}
+
+.entry-row.readonly {
+  grid-template-columns: 1fr auto;
+}
+
+.entry-row select {
+  padding: 0.25rem 0.5rem;
+  border: 1px solid var(--color-gray-300);
+  border-radius: 4px;
+  font-size: 0.8125rem;
+  background: var(--surface-card, white);
+}
+
+.entry-name {
+  font-size: 0.875rem;
+  color: var(--color-gray-800);
+  word-break: break-all;
+}
+
+.entry-level {
+  font-size: 0.6875rem;
+  padding: 0.125rem 0.5rem;
+  border-radius: 4px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  font-weight: 500;
+  background: var(--color-gray-200);
+  color: var(--color-gray-700);
+}
+
+.entry-level.read {
+  background: var(--color-info-50, #eff6ff);
+  color: var(--color-info-700, #1d4ed8);
+}
+
+.entry-level.write {
+  background: var(--color-warning-50, #fffbeb);
+  color: var(--color-warning-700, #b45309);
+}
+
+.entry-level.admin {
+  background: var(--color-danger-50, #fef2f2);
+  color: var(--color-danger-700, #b91c1c);
+}
+
+.empty-state {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.5rem 0;
+  font-size: 0.8125rem;
+  color: var(--color-gray-500);
+}
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.4375rem 0.75rem;
+  border: 1px solid var(--color-gray-300);
+  border-radius: 6px;
+  background: var(--surface-card, white);
+  color: var(--color-gray-700);
+  cursor: pointer;
+  font-size: 0.8125rem;
+}
+
+.btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.btn-sm {
+  padding: 0.25rem 0.5rem;
+}
+
+.btn-icon {
+  padding: 0.3125rem;
+  background: transparent;
+  border-color: transparent;
+}
+
+.btn-icon:hover {
+  background: var(--color-gray-100);
+}
+
+.btn-primary {
+  background: var(--color-primary-500, #3b82f6);
+  color: white;
+  border-color: var(--color-primary-500, #3b82f6);
+}
+
+.btn-primary:hover:not(:disabled) {
+  background: var(--color-primary-600, #2563eb);
+  border-color: var(--color-primary-600, #2563eb);
+}
+</style>
diff --git a/src/components/FileBrowser.vue b/src/components/FileBrowser.vue
index e449da1..07f07f1 100644
--- a/src/components/FileBrowser.vue
+++ b/src/components/FileBrowser.vue
@@ -18,6 +18,11 @@
           <i class="pi pi-eye" />
           Hidden
         </label>
+        <label v-if="!mountAvailable" class="view-toggle" :class="{ active: !hideSystemFolders }">
+          <input v-model="hideSystemFolders" type="checkbox" />
+          <i class="pi pi-shield" />
+          Hide system
+        </label>
         <div class="view-mode-toggle">
           <button
             class="view-mode-btn"
@@ -45,6 +50,10 @@
           <i class="pi pi-folder-plus" />
           New Folder
         </button>
+        <button class="btn btn-sm btn-secondary" @click="showNewFileModal = true">
+          <i class="pi pi-file-plus" />
+          New File
+        </button>
         <label class="btn btn-sm btn-primary upload-btn">
           <i class="pi pi-upload" />
           Upload
@@ -60,6 +69,10 @@
       <span class="progress-text">Uploading {{ uploadFileName }}...</span>
     </div>
 
+    <div v-else-if="busy && files.length > 0" class="busy-indicator" aria-hidden="true">
+      <div class="busy-bar" />
+    </div>
+
     <div class="browser-content">
       <div v-if="loading && files.length === 0" class="loading-state">
         <i class="pi pi-spin pi-spinner" />
@@ -126,17 +139,30 @@
             <button v-if="!file.is_dir" class="action-btn" title="Download" @click="downloadFile(file)">
               <i class="pi pi-download" />
             </button>
-            <button
-              class="action-btn"
-              :class="{ 'is-mounted': fileMounts(file).length > 0 }"
-              :title="mountTooltip(file)"
-              @click="openMountModal(file)"
-            >
-              <i class="pi pi-link" />
-            </button>
-            <button class="action-btn delete" title="Delete" @click="confirmDelete(file)">
-              <i class="pi pi-trash" />
-            </button>
+            <div class="action-menu-wrap">
+              <button class="action-btn" title="More" @click.stop="toggleRowMenu(file.path)">
+                <i class="pi pi-ellipsis-v" />
+              </button>
+              <div v-if="rowMenuOpenFor === file.path" class="action-menu" @click.stop>
+                <button
+                  v-if="mountAvailable"
+                  class="menu-item"
+                  :class="{ 'is-mounted': fileMounts(file).length > 0 }"
+                  @click="onMenuAction('mount', file)"
+                >
+                  <i class="pi pi-link" />
+                  <span>{{ fileMounts(file).length > 0 ? "Edit mount" : "Add compose mount" }}</span>
+                </button>
+                <button class="menu-item" @click="onMenuAction('permissions', file)">
+                  <i class="pi pi-key" />
+                  <span>Permissions</span>
+                </button>
+                <button class="menu-item danger" @click="onMenuAction('delete', file)">
+                  <i class="pi pi-trash" />
+                  <span>Delete</span>
+                </button>
+              </div>
+            </div>
           </span>
         </div>
       </div>
@@ -178,17 +204,30 @@
             <button v-if="!file.is_dir" class="action-btn" title="Download" @click="downloadFile(file)">
               <i class="pi pi-download" />
             </button>
-            <button
-              class="action-btn"
-              :class="{ 'is-mounted': fileMounts(file).length > 0 }"
-              :title="mountTooltip(file)"
-              @click="openMountModal(file)"
-            >
-              <i class="pi pi-link" />
-            </button>
-            <button class="action-btn delete" title="Delete" @click="confirmDelete(file)">
-              <i class="pi pi-trash" />
-            </button>
+            <div class="action-menu-wrap">
+              <button class="action-btn" title="More" @click.stop="toggleRowMenu(file.path)">
+                <i class="pi pi-ellipsis-v" />
+              </button>
+              <div v-if="rowMenuOpenFor === file.path" class="action-menu" @click.stop>
+                <button
+                  v-if="mountAvailable"
+                  class="menu-item"
+                  :class="{ 'is-mounted': fileMounts(file).length > 0 }"
+                  @click="onMenuAction('mount', file)"
+                >
+                  <i class="pi pi-link" />
+                  <span>{{ fileMounts(file).length > 0 ? "Edit mount" : "Add compose mount" }}</span>
+                </button>
+                <button class="menu-item" @click="onMenuAction('permissions', file)">
+                  <i class="pi pi-key" />
+                  <span>Permissions</span>
+                </button>
+                <button class="menu-item danger" @click="onMenuAction('delete', file)">
+                  <i class="pi pi-trash" />
+                  <span>Delete</span>
+                </button>
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -230,6 +269,36 @@
         </div>
       </div>
 
+      <div v-if="showNewFileModal" class="modal-overlay" @click.self="showNewFileModal = false">
+        <div class="modal-container small">
+          <div class="modal-header">
+            <h3>
+              <i class="pi pi-file-plus" />
+              New File
+            </h3>
+          </div>
+          <div class="modal-body">
+            <div class="form-group">
+              <label>File Name</label>
+              <input
+                v-model="newFileName"
+                type="text"
+                class="form-input"
+                placeholder=".env"
+                @keyup.enter="createFile"
+              />
+            </div>
+          </div>
+          <div class="modal-footer">
+            <button class="btn btn-secondary" @click="showNewFileModal = false">Cancel</button>
+            <button class="btn btn-primary" :disabled="!newFileName.trim() || creatingFile" @click="createFile">
+              <i :class="creatingFile ? 'pi pi-spin pi-spinner' : 'pi pi-check'" />
+              Create
+            </button>
+          </div>
+        </div>
+      </div>
+
       <div v-if="showDeleteModal" class="modal-overlay" @click.self="showDeleteModal = false">
         <div class="modal-container small">
           <div class="modal-header danger">
@@ -302,6 +371,54 @@
         </div>
       </div>
 
+      <div v-if="showPermissionsModal" class="modal-overlay" @click.self="showPermissionsModal = false">
+        <div class="modal-container small">
+          <div class="modal-header">
+            <h3>
+              <i class="pi pi-key" />
+              Permissions
+            </h3>
+          </div>
+          <div class="modal-body">
+            <div class="mount-source">
+              <span>Path</span>
+              <code>{{ permissionsFile?.path }}</code>
+            </div>
+            <div class="permissions-grid">
+              <div class="permissions-grid-header">
+                <span></span>
+                <span>Read</span>
+                <span>Write</span>
+                <span>Execute</span>
+              </div>
+              <template v-for="who in ['owner', 'group', 'other'] as const" :key="who">
+                <span class="perm-row-label">{{ who }}</span>
+                <label class="perm-cell"
+                  ><input v-model="permissionsBits[who].r" type="checkbox" @change="updatePermissionsMode"
+                /></label>
+                <label class="perm-cell"
+                  ><input v-model="permissionsBits[who].w" type="checkbox" @change="updatePermissionsMode"
+                /></label>
+                <label class="perm-cell"
+                  ><input v-model="permissionsBits[who].x" type="checkbox" @change="updatePermissionsMode"
+                /></label>
+              </template>
+            </div>
+            <div class="permissions-summary">
+              <code>{{ permissionsModeOctal }}</code>
+              <span class="permissions-help">Symbolic permissions in octal form (e.g. 755)</span>
+            </div>
+          </div>
+          <div class="modal-footer">
+            <button class="btn btn-secondary" @click="showPermissionsModal = false">Cancel</button>
+            <button class="btn btn-primary" :disabled="savingPermissions" @click="savePermissions">
+              <i class="pi pi-check" />
+              {{ savingPermissions ? "Saving..." : "Apply" }}
+            </button>
+          </div>
+        </div>
+      </div>
+
       <div v-if="showEditorModal" class="modal-overlay">
         <div class="modal-container editor-modal">
           <div class="modal-header">
@@ -354,19 +471,36 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, watch } from "vue";
+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 { filesApi, type FileInfo } from "@/services/api";
+import { createDeploymentFileApi, type FileBrowserApi, type FileInfo } from "@/services/api";
 import { useNotificationsStore } from "@/stores/notifications";
 import { toComposeRelativePath, type ComposeMount } from "@/utils/compose";
 
-const props = defineProps<{
-  deploymentName: string;
-  serviceNames?: string[];
-  mounts?: ComposeMount[];
-}>();
+const props = withDefaults(
+  defineProps<{
+    deploymentName?: string;
+    api?: FileBrowserApi;
+    serviceNames?: string[];
+    mounts?: ComposeMount[];
+    enableMount?: boolean;
+    initialPath?: string;
+  }>(),
+  {
+    enableMount: false,
+    initialPath: "/",
+  },
+);
+
+const fileApi = computed<FileBrowserApi>(() => {
+  if (props.api) return props.api;
+  if (props.deploymentName) return createDeploymentFileApi(props.deploymentName);
+  throw new Error("FileBrowser requires either an `api` prop or a `deploymentName`");
+});
+
+const mountAvailable = computed(() => props.enableMount && !!props.deploymentName);
 
 const emit = defineEmits<{
   mountCompose: [
@@ -383,10 +517,10 @@ const emit = defineEmits<{
 
 const notifications = useNotificationsStore();
 
-const currentPath = ref("/");
+const currentPath = ref(props.initialPath || "/");
 const files = ref<FileInfo[]>([]);
 const filesInfo = ref<{ total_size: number; file_count: number } | null>(null);
-const loading = ref(false);
+const loading = ref(true);
 const error = ref("");
 const selectedFiles = ref<string[]>([]);
 
@@ -397,6 +531,9 @@ const uploadFileName = ref("");
 const showNewFolderModal = ref(false);
 const newFolderName = ref("");
 const creatingFolder = ref(false);
+const showNewFileModal = ref(false);
+const newFileName = ref("");
+const creatingFile = ref(false);
 
 const showDeleteModal = ref(false);
 const fileToDelete = ref<FileInfo | null>(null);
@@ -408,7 +545,45 @@ const mountServiceName = ref("");
 const mountTargetPath = ref("");
 const mountReadOnly = ref(false);
 
-const showHiddenFiles = ref(true);
+const rowMenuOpenFor = ref<string | null>(null);
+
+const toggleRowMenu = (path: string) => {
+  rowMenuOpenFor.value = rowMenuOpenFor.value === path ? null : path;
+};
+
+const closeRowMenu = () => {
+  rowMenuOpenFor.value = null;
+};
+
+const onMenuAction = (action: "mount" | "permissions" | "delete", file: FileInfo) => {
+  rowMenuOpenFor.value = null;
+  if (action === "mount") openMountModal(file);
+  else if (action === "permissions") openPermissionsModal(file);
+  else if (action === "delete") confirmDelete(file);
+};
+
+const onDocumentClick = () => {
+  if (rowMenuOpenFor.value !== null) rowMenuOpenFor.value = null;
+};
+
+const showPermissionsModal = ref(false);
+const permissionsFile = ref<FileInfo | null>(null);
+const savingPermissions = ref(false);
+const permissionsBits = reactive({
+  owner: { r: false, w: false, x: false },
+  group: { r: false, w: false, x: false },
+  other: { r: false, w: false, x: false },
+});
+const permissionsModeNumber = ref(0);
+const permissionsModeOctal = computed(() => {
+  const n = permissionsModeNumber.value;
+  return "0" + ((n >> 6) & 7) + ((n >> 3) & 7) + (n & 7);
+});
+
+const showHiddenFiles = ref(false);
+const hideSystemFolders = ref(true);
+
+const SYSTEM_FOLDER_NAMES = new Set(["proc", "sys", "dev", "boot", "run", "lost+found", "var", "tmp", "snap"]);
 const viewMode = ref<"list" | "grid">("list");
 
 const showEditorModal = ref(false);
@@ -417,6 +592,18 @@ const fileContent = ref("");
 const originalContent = ref("");
 const loadingFileContent = ref(false);
 const savingFile = ref(false);
+
+const busy = computed(
+  () =>
+    loading.value ||
+    uploading.value ||
+    creatingFolder.value ||
+    creatingFile.value ||
+    deleting.value ||
+    savingPermissions.value ||
+    loadingFileContent.value ||
+    savingFile.value,
+);
 const viewOnly = ref(false);
 
 const editorExtensions = [yaml(), oneDark];
@@ -471,11 +658,14 @@ const fetchFiles = async () => {
   loading.value = true;
   error.value = "";
   try {
-    const response = await filesApi.list(props.deploymentName, currentPath.value);
+    const response = await fileApi.value.list(currentPath.value);
     let fileList = response.data.files || [];
     if (!showHiddenFiles.value) {
       fileList = fileList.filter((f) => !f.name.startsWith("."));
     }
+    if (!mountAvailable.value && hideSystemFolders.value && currentPath.value === "/") {
+      fileList = fileList.filter((f) => !(f.is_dir && SYSTEM_FOLDER_NAMES.has(f.name)));
+    }
     files.value = fileList;
   } catch (err: any) {
     error.value = err.response?.data?.error || err.message || "Failed to load files";
@@ -487,7 +677,7 @@ const fetchFiles = async () => {
 
 const fetchFilesInfo = async () => {
   try {
-    const response = await filesApi.getInfo(props.deploymentName);
+    const response = await fileApi.value.getInfo();
     filesInfo.value = response.data;
   } catch {
     filesInfo.value = null;
@@ -536,7 +726,7 @@ const uploadFile = async (file: File) => {
   try {
     const targetPath = currentPath.value === "/" ? `/${file.name}` : `${currentPath.value}/${file.name}`;
 
-    await filesApi.upload(props.deploymentName, targetPath, file);
+    await fileApi.value.upload(targetPath, file);
     uploadProgress.value = 100;
     notifications.success("Upload Complete", `${file.name} uploaded successfully`);
   } catch (err: any) {
@@ -550,7 +740,7 @@ const uploadFile = async (file: File) => {
 
 const downloadFile = async (file: FileInfo) => {
   try {
-    const response = await filesApi.download(props.deploymentName, file.path);
+    const response = await fileApi.value.download(file.path);
     const blob = new Blob([response.data]);
     const url = window.URL.createObjectURL(blob);
     const link = document.createElement("a");
@@ -572,7 +762,7 @@ const createFolder = async () => {
     const targetPath =
       currentPath.value === "/" ? `/${newFolderName.value}` : `${currentPath.value}/${newFolderName.value}`;
 
-    await filesApi.createDir(props.deploymentName, targetPath);
+    await fileApi.value.createDir(targetPath);
     notifications.success("Folder Created", `${newFolderName.value} created successfully`);
     showNewFolderModal.value = false;
     newFolderName.value = "";
@@ -585,14 +775,104 @@ const createFolder = async () => {
   }
 };
 
+const createFile = async () => {
+  if (!newFileName.value.trim()) return;
+
+  creatingFile.value = true;
+  try {
+    const targetPath =
+      currentPath.value === "/" ? `/${newFileName.value}` : `${currentPath.value}/${newFileName.value}`;
+
+    await fileApi.value.createFile(targetPath);
+    notifications.success("File Created", `${newFileName.value} created successfully`);
+    showNewFileModal.value = false;
+    newFileName.value = "";
+    refreshFiles();
+  } catch (err: any) {
+    const msg = err.response?.data?.error || err.message || "Failed to create file";
+    notifications.error("Error", msg);
+  } finally {
+    creatingFile.value = false;
+  }
+};
+
 const confirmDelete = (file: FileInfo) => {
   fileToDelete.value = file;
   showDeleteModal.value = true;
 };
 
+const parsePermissionsMode = (permissions: string | undefined, isDir: boolean): number => {
+  if (!permissions) return isDir ? 0o755 : 0o644;
+  const symbolic = permissions.length === 10 ? permissions.slice(1) : permissions;
+  if (symbolic.length === 9) {
+    let n = 0;
+    if (symbolic[0] === "r") n |= 0o400;
+    if (symbolic[1] === "w") n |= 0o200;
+    if (symbolic[2] === "x") n |= 0o100;
+    if (symbolic[3] === "r") n |= 0o040;
+    if (symbolic[4] === "w") n |= 0o020;
+    if (symbolic[5] === "x") n |= 0o010;
+    if (symbolic[6] === "r") n |= 0o004;
+    if (symbolic[7] === "w") n |= 0o002;
+    if (symbolic[8] === "x") n |= 0o001;
+    return n;
+  }
+  const numeric = parseInt(permissions, 8);
+  if (!Number.isNaN(numeric)) return numeric & 0o777;
+  return isDir ? 0o755 : 0o644;
+};
+
+const setPermissionsBitsFromNumber = (n: number) => {
+  permissionsBits.owner.r = !!(n & 0o400);
+  permissionsBits.owner.w = !!(n & 0o200);
+  permissionsBits.owner.x = !!(n & 0o100);
+  permissionsBits.group.r = !!(n & 0o040);
+  permissionsBits.group.w = !!(n & 0o020);
+  permissionsBits.group.x = !!(n & 0o010);
+  permissionsBits.other.r = !!(n & 0o004);
+  permissionsBits.other.w = !!(n & 0o002);
+  permissionsBits.other.x = !!(n & 0o001);
+  permissionsModeNumber.value = n;
+};
+
+const updatePermissionsMode = () => {
+  let n = 0;
+  if (permissionsBits.owner.r) n |= 0o400;
+  if (permissionsBits.owner.w) n |= 0o200;
+  if (permissionsBits.owner.x) n |= 0o100;
+  if (permissionsBits.group.r) n |= 0o040;
+  if (permissionsBits.group.w) n |= 0o020;
+  if (permissionsBits.group.x) n |= 0o010;
+  if (permissionsBits.other.r) n |= 0o004;
+  if (permissionsBits.other.w) n |= 0o002;
+  if (permissionsBits.other.x) n |= 0o001;
+  permissionsModeNumber.value = n;
+};
+
+const openPermissionsModal = (file: FileInfo) => {
+  permissionsFile.value = file;
+  setPermissionsBitsFromNumber(parsePermissionsMode((file as any).permissions, file.is_dir));
+  showPermissionsModal.value = true;
+};
+
+const savePermissions = async () => {
+  if (!permissionsFile.value) return;
+  savingPermissions.value = true;
+  try {
+    await fileApi.value.chmod(permissionsFile.value.path, permissionsModeNumber.value);
+    notifications.success("Permissions Updated", `${permissionsFile.value.name} is now ${permissionsModeOctal.value}`);
+    showPermissionsModal.value = false;
+    refreshFiles();
+  } catch (err: any) {
+    notifications.error("Update Failed", err.response?.data?.error || err.message || "Could not change permissions");
+  } finally {
+    savingPermissions.value = false;
+  }
+};
+
 const openMountModal = (file: FileInfo) => {
   fileToMount.value = file;
-  mountServiceName.value = mountServiceOptions.value[0] || props.deploymentName;
+  mountServiceName.value = mountServiceOptions.value[0] || props.deploymentName || "";
   mountTargetPath.value = file.path;
   mountReadOnly.value = !file.is_dir;
   showMountModal.value = true;
@@ -618,7 +898,7 @@ const deleteFile = async () => {
 
   deleting.value = true;
   try {
-    await filesApi.delete(props.deploymentName, fileToDelete.value.path);
+    await fileApi.value.delete(fileToDelete.value.path);
     notifications.success("Deleted", `${fileToDelete.value.name} deleted successfully`);
     showDeleteModal.value = false;
     fileToDelete.value = null;
@@ -733,7 +1013,7 @@ const viewFile = async (file: FileInfo) => {
   originalContent.value = "";
 
   try {
-    const response = await filesApi.getContent(props.deploymentName, file.path);
+    const response = await fileApi.value.getContent(file.path);
     fileContent.value = response.data;
     originalContent.value = response.data;
   } catch (err: any) {
@@ -754,7 +1034,7 @@ const openFileEditor = async (file: FileInfo) => {
   originalContent.value = "";
 
   try {
-    const response = await filesApi.getContent(props.deploymentName, file.path);
+    const response = await fileApi.value.getContent(file.path);
     fileContent.value = response.data;
     originalContent.value = response.data;
   } catch (err: any) {
@@ -786,7 +1066,7 @@ const saveFile = async () => {
   try {
     const blob = new Blob([fileContent.value], { type: "text/plain" });
     const file = new File([blob], editingFile.value.name);
-    await filesApi.upload(props.deploymentName, editingFile.value.path, file);
+    await fileApi.value.upload(editingFile.value.path, file);
     originalContent.value = fileContent.value;
     notifications.success("Saved", `${editingFile.value.name} saved successfully`);
   } catch (err: any) {
@@ -801,12 +1081,21 @@ watch(currentPath, () => {
   fetchFiles();
 });
 
+watch(hideSystemFolders, () => {
+  refreshFiles();
+});
+
 watch(showHiddenFiles, () => {
   fetchFiles();
 });
 
 onMounted(() => {
   refreshFiles();
+  document.addEventListener("click", onDocumentClick);
+});
+
+onBeforeUnmount(() => {
+  document.removeEventListener("click", onDocumentClick);
 });
 </script>
 
@@ -928,6 +1217,28 @@ onMounted(() => {
   white-space: nowrap;
 }
 
+.busy-indicator {
+  height: 2px;
+  background: var(--color-gray-100);
+  overflow: hidden;
+}
+
+.busy-bar {
+  height: 100%;
+  width: 30%;
+  background: var(--color-primary-500);
+  animation: busy-slide 1s linear infinite;
+}
+
+@keyframes busy-slide {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(400%);
+  }
+}
+
 .browser-content {
   flex: 1;
   overflow: auto;
@@ -1065,6 +1376,63 @@ onMounted(() => {
   color: var(--color-success-700);
 }
 
+.action-menu-wrap {
+  position: relative;
+  display: inline-flex;
+}
+
+.action-menu {
+  position: absolute;
+  top: calc(100% + 4px);
+  right: 0;
+  z-index: 10;
+  min-width: 180px;
+  background: var(--surface-card, white);
+  border: 1px solid var(--color-gray-200);
+  border-radius: var(--radius-md);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+  padding: var(--space-1);
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+
+.menu-item {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-2) var(--space-3);
+  background: transparent;
+  border: none;
+  border-radius: var(--radius-sm);
+  font-size: var(--text-sm);
+  color: var(--color-gray-700);
+  cursor: pointer;
+  text-align: left;
+}
+
+.menu-item:hover {
+  background: var(--color-gray-100);
+  color: var(--color-gray-900);
+}
+
+.menu-item.danger {
+  color: var(--color-danger-600);
+}
+
+.menu-item.danger:hover {
+  background: var(--color-danger-50);
+}
+
+.menu-item.is-mounted {
+  color: var(--color-success-700);
+}
+
+.menu-item .pi {
+  font-size: var(--text-sm);
+  width: 16px;
+}
+
 .action-btn.is-mounted:hover {
   background: var(--color-success-100);
 }
@@ -1161,6 +1529,62 @@ onMounted(() => {
   word-break: break-all;
 }
 
+.permissions-grid {
+  display: grid;
+  grid-template-columns: 80px repeat(3, 1fr);
+  gap: var(--space-2);
+  align-items: center;
+  margin: var(--space-3) 0 var(--space-2);
+}
+
+.permissions-grid-header {
+  display: contents;
+}
+
+.permissions-grid-header span {
+  font-size: var(--text-xs);
+  font-weight: var(--font-medium);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--color-gray-500);
+  text-align: center;
+}
+
+.perm-row-label {
+  font-size: var(--text-sm);
+  color: var(--color-gray-700);
+  text-transform: capitalize;
+}
+
+.perm-cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.permissions-summary {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding-top: var(--space-2);
+  border-top: 1px solid var(--color-gray-200);
+}
+
+.permissions-summary code {
+  font-size: var(--text-base);
+  font-weight: var(--font-medium);
+  padding: var(--space-1) var(--space-2);
+  background: var(--color-gray-100);
+  color: var(--color-gray-900);
+  border-radius: var(--radius-sm);
+}
+
+.permissions-help {
+  font-size: var(--text-xs);
+  color: var(--color-gray-500);
+}
+
 .checkbox-label {
   display: flex;
   align-items: center;
diff --git a/src/components/TabbedFormModal.vue b/src/components/TabbedFormModal.vue
new file mode 100644
index 0000000..e6276ca
--- /dev/null
+++ b/src/components/TabbedFormModal.vue
@@ -0,0 +1,227 @@
+<template>
+  <div class="modal-overlay" @click.self="$emit('close')">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h2>{{ title }}</h2>
+        <button class="btn btn-icon" type="button" @click="$emit('close')">
+          <i class="pi pi-times" />
+        </button>
+      </div>
+
+      <div class="dialog-tabs">
+        <button
+          v-for="tab in visibleTabs"
+          :key="tab.id"
+          class="tab-btn"
+          :class="{ active: activeTab === tab.id }"
+          type="button"
+          @click="$emit('update:activeTab', tab.id)"
+        >
+          <i v-if="tab.icon" :class="tab.icon" />
+          {{ tab.label }}
+          <span v-if="tab.count !== undefined && tab.count > 0" class="tab-count">{{ tab.count }}</span>
+        </button>
+      </div>
+
+      <form @submit.prevent="$emit('submit')">
+        <div v-for="tab in visibleTabs" :key="tab.id" v-show="activeTab === tab.id" class="tab-panel">
+          <slot :name="tab.id" />
+        </div>
+        <div class="modal-actions">
+          <button type="button" class="btn" @click="$emit('close')">{{ cancelLabel }}</button>
+          <button type="submit" class="btn btn-primary" :disabled="submitting">
+            {{ submitting ? submittingLabel : submitLabel }}
+          </button>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+
+export interface TabbedFormModalTab {
+  id: string;
+  label: string;
+  icon?: string;
+  count?: number;
+  visible?: boolean;
+}
+
+const props = withDefaults(
+  defineProps<{
+    title: string;
+    tabs: TabbedFormModalTab[];
+    activeTab: string;
+    submitting?: boolean;
+    submitLabel?: string;
+    submittingLabel?: string;
+    cancelLabel?: string;
+  }>(),
+  {
+    submitting: false,
+    submitLabel: "Save",
+    submittingLabel: "Saving...",
+    cancelLabel: "Cancel",
+  },
+);
+
+defineEmits<{
+  close: [];
+  submit: [];
+  "update:activeTab": [value: string];
+}>();
+
+const visibleTabs = computed(() => props.tabs.filter((t) => t.visible !== false));
+</script>
+
+<style scoped>
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  padding: 1rem;
+}
+
+.modal-content {
+  background: var(--surface-card, white);
+  border-radius: 8px;
+  width: 100%;
+  max-width: 640px;
+  max-height: 90vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem 1.5rem;
+  border-bottom: 1px solid var(--surface-border, var(--color-gray-200));
+}
+
+.modal-header h2 {
+  font-size: 1.125rem;
+  font-weight: 600;
+  margin: 0;
+}
+
+.modal-content form {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  flex: 1;
+}
+
+.dialog-tabs {
+  display: flex;
+  border-bottom: 1px solid var(--surface-border, var(--color-gray-200));
+  padding: 0 1.5rem;
+  gap: 0.25rem;
+  flex-shrink: 0;
+}
+
+.tab-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.625rem 1rem;
+  background: transparent;
+  border: none;
+  border-bottom: 2px solid transparent;
+  color: var(--color-gray-600);
+  font-size: 0.875rem;
+  cursor: pointer;
+  transition: all 0.15s;
+  margin-bottom: -1px;
+}
+
+.tab-btn:hover {
+  color: var(--color-gray-900);
+}
+
+.tab-btn.active {
+  color: var(--color-primary-600, #2563eb);
+  border-bottom-color: var(--color-primary-500, #3b82f6);
+}
+
+.tab-count {
+  font-size: 0.6875rem;
+  padding: 0.0625rem 0.375rem;
+  border-radius: 999px;
+  background: var(--color-gray-100);
+  color: var(--color-gray-700);
+  font-weight: 500;
+}
+
+.tab-btn.active .tab-count {
+  background: var(--color-primary-50, #dbeafe);
+  color: var(--color-primary-700, #1d4ed8);
+}
+
+.tab-panel {
+  padding: 1.25rem 1.5rem;
+  overflow-y: auto;
+}
+
+.modal-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  padding: 1rem 1.5rem;
+  border-top: 1px solid var(--surface-border, var(--color-gray-200));
+  flex-shrink: 0;
+}
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.5rem 0.875rem;
+  border: 1px solid var(--color-gray-300);
+  border-radius: 6px;
+  background: var(--surface-card, white);
+  color: var(--color-gray-700);
+  cursor: pointer;
+  font-size: 0.875rem;
+  transition: all 0.15s;
+}
+
+.btn:hover {
+  background: var(--color-gray-50);
+}
+
+.btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.btn-icon {
+  padding: 0.375rem;
+  border-color: transparent;
+  background: transparent;
+}
+
+.btn-icon:hover {
+  background: var(--color-gray-100);
+}
+
+.btn-primary {
+  background: var(--color-primary-500, #3b82f6);
+  color: white;
+  border-color: var(--color-primary-500, #3b82f6);
+  font-weight: 600;
+}
+
+.btn-primary:hover {
+  background: var(--color-primary-600, #2563eb);
+  border-color: var(--color-primary-600, #2563eb);
+}
+</style>
diff --git a/src/layouts/DashboardLayout.vue b/src/layouts/DashboardLayout.vue
index 83d1079..9380646 100644
--- a/src/layouts/DashboardLayout.vue
+++ b/src/layouts/DashboardLayout.vue
@@ -157,6 +157,22 @@
             >
               Server Info
             </router-link>
+            <router-link
+              v-if="authStore.hasPermission('system:write')"
+              to="/system-terminal"
+              class="nav-subitem"
+              active-class="active"
+            >
+              Terminal
+            </router-link>
+            <router-link
+              v-if="authStore.hasPermission('system:files')"
+              to="/system/files"
+              class="nav-subitem"
+              active-class="active"
+            >
+              Files
+            </router-link>
             <router-link
               v-if="authStore.hasPermission('cluster:read')"
               to="/cluster"
@@ -512,6 +528,8 @@ const currentPageTitle = computed(() => {
     services: "System Services",
     "cron-jobs": "Cron Jobs",
     "server-info": "Server Info",
+    "system-terminal": "System Terminal",
+    "system-files": "System Files",
     cluster: "Cluster",
     databases: "Database Servers",
     security: "Security & Monitoring",
@@ -539,7 +557,16 @@ const breadcrumbs = computed(() => {
     crumbs.push({ label: "Docker", path: "" });
     crumbs.push({ label: currentPageTitle.value, path: "" });
   } else if (
-    ["infrastructure", "system-ports", "services", "cron-jobs", "server-info", "cluster"].includes(routeName)
+    [
+      "infrastructure",
+      "system-ports",
+      "services",
+      "cron-jobs",
+      "server-info",
+      "system-terminal",
+      "system-files",
+      "cluster",
+    ].includes(routeName)
   ) {
     crumbs.push({ label: "System", path: "" });
     crumbs.push({ label: currentPageTitle.value, path: "" });
diff --git a/src/router/index.ts b/src/router/index.ts
index 555867c..3c2ea95 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -136,6 +136,18 @@ const routes: RouteRecordRaw[] = [
         component: () => import("@/views/ServerInfoView.vue"),
         meta: { permission: "system:read" },
       },
+      {
+        path: "system-terminal",
+        name: "system-terminal",
+        component: () => import("@/views/SystemTerminalView.vue"),
+        meta: { permission: "system:write" },
+      },
+      {
+        path: "system/files",
+        name: "system-files",
+        component: () => import("@/views/SystemFilesView.vue"),
+        meta: { permission: "system:files" },
+      },
       {
         path: "cluster",
         name: "cluster",
diff --git a/src/services/api.ts b/src/services/api.ts
index b890bfc..9dc5c7a 100755
--- a/src/services/api.ts
+++ b/src/services/api.ts
@@ -15,6 +15,7 @@ import type {
   ProtectedRoute,
   DeploymentSecurityConfig,
   DomainConfig,
+  ProtectedModeConfig,
 } from "@/types";
 
 export const apiClient = axios.create({
@@ -36,8 +37,12 @@ apiClient.interceptors.response.use(
   (response) => response,
   (error) => {
     if (error.response?.status === 401 && !window.location.pathname.includes("/setup")) {
-      localStorage.removeItem("auth_token");
-      window.location.href = "/login";
+      const failedURL: string = error.config?.url || "";
+      const isSessionEndpoint = /\/auth\/|\/users\/me(\b|\/)/.test(failedURL);
+      if (isSessionEndpoint) {
+        localStorage.removeItem("auth_token");
+        window.location.href = "/login";
+      }
     }
     return Promise.reject(error);
   },
@@ -62,6 +67,7 @@ export interface ServiceMetadata {
     path: string;
     interval: string;
   };
+  protected_mode?: ProtectedModeConfig;
   credential_id?: string;
   service_credentials?: Record<string, string>;
 }
@@ -78,6 +84,11 @@ export const deploymentsApi = {
   update: (name: string, data: any) => apiClient.put(`/deployments/${name}`, data),
   updateMetadata: (name: string, metadata: Partial<ServiceMetadata>) =>
     apiClient.put(`/deployments/${name}/metadata`, metadata),
+  updateProtectedMode: (name: string, protectedMode: ProtectedModeConfig) =>
+    apiClient.put<{ message: string; name: string; protected_mode: ProtectedModeConfig }>(
+      `/deployments/${name}/protected-mode`,
+      protectedMode,
+    ),
   delete: (name: string, options?: { deleteSSL?: boolean; deleteDatabase?: boolean; deleteVhost?: boolean }) => {
     const params = new URLSearchParams();
     if (options?.deleteSSL !== undefined) params.set("delete_ssl", String(options.deleteSSL));
@@ -445,6 +456,9 @@ export const filesApi = {
     });
   },
   createDir: (deploymentName: string, path: string) => apiClient.post(`/deployments/${deploymentName}/mkdir${path}`),
+  createFile: (deploymentName: string, path: string) => apiClient.post(`/deployments/${deploymentName}/touch${path}`),
+  chmod: (deploymentName: string, path: string, mode: number) =>
+    apiClient.put(`/deployments/${deploymentName}/permissions${path}`, { mode }),
   delete: (deploymentName: string, path: string) => apiClient.delete(`/deployments/${deploymentName}/files${path}`),
   getContent: (deploymentName: string, path: string) =>
     apiClient.get<string>(`/deployments/${deploymentName}/files${path}`, {
@@ -452,6 +466,46 @@ export const filesApi = {
     }),
 };
 
+export interface FileBrowserApi {
+  list(path: string): Promise<{ data: { files: FileInfo[] } }>;
+  getInfo(): Promise<{ data: FilesInfo }>;
+  upload(path: string, file: File): Promise<any>;
+  download(path: string): Promise<{ data: Blob }>;
+  createDir(path: string): Promise<any>;
+  createFile(path: string): Promise<any>;
+  chmod(path: string, mode: number): Promise<any>;
+  delete(path: string): Promise<any>;
+  getContent(path: string): Promise<{ data: string }>;
+}
+
+export const createFileBrowserApi = (basePath: string): FileBrowserApi => ({
+  list: (path = "/") =>
+    apiClient.get<{ files: FileInfo[] }>(`${basePath}/files`, { params: { path } }) as Promise<{
+      data: { files: FileInfo[] };
+    }>,
+  getInfo: () => apiClient.get<FilesInfo>(`${basePath}/files-info`) as Promise<{ data: FilesInfo }>,
+  upload: (path: string, file: File) => {
+    const formData = new FormData();
+    formData.append("file", file);
+    return apiClient.post(`${basePath}/files${path}`, formData, {
+      headers: { "Content-Type": "multipart/form-data" },
+    });
+  },
+  download: (path: string) =>
+    apiClient.get(`${basePath}/files${path}`, { responseType: "blob" }) as Promise<{ data: Blob }>,
+  createDir: (path: string) => apiClient.post(`${basePath}/mkdir${path}`),
+  createFile: (path: string) => apiClient.post(`${basePath}/touch${path}`),
+  chmod: (path: string, mode: number) => apiClient.put(`${basePath}/permissions${path}`, { mode }),
+  delete: (path: string) => apiClient.delete(`${basePath}/files${path}`),
+  getContent: (path: string) =>
+    apiClient.get<string>(`${basePath}/files${path}`, { responseType: "text" }) as Promise<{ data: string }>,
+});
+
+export const createDeploymentFileApi = (deploymentName: string): FileBrowserApi =>
+  createFileBrowserApi(`/deployments/${deploymentName}`);
+
+export const createSystemFileApi = (): FileBrowserApi => createFileBrowserApi(`/system`);
+
 export const portsApi = {
   list: () => apiClient.get<{ ports: any[] }>("/ports"),
   kill: (pid: number) => apiClient.post(`/ports/${pid}/kill`),
@@ -1242,7 +1296,7 @@ export const clusterApi = {
   getAggregatedStats: () => apiClient.get("/cluster/stats"),
 };
 
-import type { User, APIKey, UserRole, UserDeploymentAccess } from "@/types";
+import type { User, APIKey, UserRole, UserDeploymentAccess, DeploymentAccessMap } from "@/types";
 
 export const usersApi = {
   list: () => apiClient.get<{ users: User[] }>("/users"),
@@ -1289,11 +1343,23 @@ export const apiKeysApi = {
     description?: string;
     role?: UserRole;
     permissions?: string[];
-    deployments?: string[];
+    deployments?: DeploymentAccessMap;
     expires_in?: number;
     user_id?: number;
   }) => apiClient.post<{ api_key: APIKey; message: string }>("/apikeys", data),
 
+  update: (
+    id: number,
+    data: {
+      name?: string;
+      description?: string;
+      role?: UserRole | "";
+      permissions?: string[];
+      deployments?: DeploymentAccessMap;
+      expires_in?: number;
+    },
+  ) => apiClient.put<{ api_key: APIKey }>(`/apikeys/${id}`, data),
+
   delete: (id: number) => apiClient.delete(`/apikeys/${id}`),
 
   revoke: (id: number) => apiClient.post(`/apikeys/${id}/revoke`),
diff --git a/src/stores/users.ts b/src/stores/users.ts
index aa355c6..d8200ed 100644
--- a/src/stores/users.ts
+++ b/src/stores/users.ts
@@ -1,6 +1,6 @@
 import { defineStore } from "pinia";
 import { ref } from "vue";
-import type { User, APIKey, UserRole, UserDeploymentAccess } from "@/types";
+import type { User, APIKey, UserRole, UserDeploymentAccess, DeploymentAccessMap } from "@/types";
 import { usersApi, apiKeysApi } from "@/services/api";
 
 export const useUsersStore = defineStore("users", () => {
@@ -123,7 +123,7 @@ export const useUsersStore = defineStore("users", () => {
     description?: string;
     role?: UserRole;
     permissions?: string[];
-    deployments?: string[];
+    deployments?: DeploymentAccessMap;
     expires_in?: number;
     user_id?: number;
   }) => {
@@ -136,6 +136,29 @@ export const useUsersStore = defineStore("users", () => {
     }
   };
 
+  const updateAPIKey = async (
+    id: number,
+    data: {
+      name?: string;
+      description?: string;
+      role?: UserRole | "";
+      permissions?: string[];
+      deployments?: DeploymentAccessMap;
+      expires_in?: number;
+    },
+  ) => {
+    try {
+      const response = await apiKeysApi.update(id, data);
+      const index = apiKeys.value.findIndex((k) => k.id === id);
+      if (index !== -1) {
+        apiKeys.value[index] = response.data.api_key;
+      }
+      return response.data.api_key;
+    } catch (e: any) {
+      throw new Error(e.response?.data?.error || "Failed to update API key");
+    }
+  };
+
   const deleteAPIKey = async (id: number) => {
     try {
       await apiKeysApi.delete(id);
@@ -173,6 +196,7 @@ export const useUsersStore = defineStore("users", () => {
     removeDeploymentAccess,
     fetchAPIKeys,
     createAPIKey,
+    updateAPIKey,
     deleteAPIKey,
     revokeAPIKey,
   };
diff --git a/src/types/index.ts b/src/types/index.ts
index 7125862..c21ed3c 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -27,6 +27,7 @@ export interface ServiceMetadata {
   healthcheck: HealthCheckConfig;
   quick_actions?: QuickAction[];
   security?: DeploymentSecurityConfig;
+  protected_mode?: ProtectedModeConfig;
   credential_id?: string;
   service_credentials?: Record<string, string>;
   domains?: DomainConfig[];
@@ -68,6 +69,22 @@ export interface QuickAction {
   service?: string;
 }
 
+export interface ProtectedModeConfig {
+  enabled: boolean;
+  blocked_actions?: string[];
+  blocked_command_rules?: ProtectedCommandRule[];
+  disable_terminal?: boolean;
+}
+
+export interface ProtectedCommandRule {
+  id?: string;
+  name?: string;
+  match: "contains" | "equals" | "prefix" | "suffix" | "matches";
+  pattern: string;
+  case_sensitive?: boolean;
+  description?: string;
+}
+
 export interface NetworkingConfig {
   expose: boolean;
   domain: string;
@@ -266,6 +283,9 @@ export interface UserDeploymentAccess {
   created_at: string;
 }
 
+export type DeploymentAccessLevel = "read" | "write" | "admin";
+export type DeploymentAccessMap = Record<string, DeploymentAccessLevel>;
+
 export interface APIKey {
   id: number;
   key_id: string;
@@ -275,9 +295,9 @@ export interface APIKey {
   key_prefix: string;
   role?: UserRole;
   permissions?: string[];
-  deployments?: string[];
-  expires_at?: string;
-  last_used_at?: string;
+  deployments?: DeploymentAccessMap;
+  expires_at?: string | null;
+  last_used_at?: string | null;
   last_used_ip?: string;
   is_active: boolean;
   created_at: string;
@@ -327,6 +347,7 @@ export type Permission =
   | "scheduler:delete"
   | "system:read"
   | "system:write"
+  | "system:files"
   | "dns:read"
   | "dns:write"
   | "registries:read"
diff --git a/src/utils/permissions.ts b/src/utils/permissions.ts
index 9d521fb..4f5cc4f 100644
--- a/src/utils/permissions.ts
+++ b/src/utils/permissions.ts
@@ -43,6 +43,7 @@ const adminPermissions: string[] = [
   "scheduler:delete",
   "system:read",
   "system:write",
+  "system:files",
   "dns:read",
   "dns:write",
   "registries:read",
diff --git a/src/utils/protectedMode.ts b/src/utils/protectedMode.ts
new file mode 100644
index 0000000..3b723cd
--- /dev/null
+++ b/src/utils/protectedMode.ts
@@ -0,0 +1,32 @@
+export const matchTypeHints: Record<string, string> = {
+  contains: "Blocks any command containing this text",
+  equals: "Blocks commands that exactly match this text",
+  prefix: "Blocks commands starting with this text",
+  suffix: "Blocks commands ending with this text",
+  matches: "Blocks commands matching this regular expression",
+};
+
+export interface DescribableRule {
+  match?: string;
+  pattern?: string;
+  case_sensitive?: boolean;
+}
+
+export const describeBlockedRule = (rule: DescribableRule): string => {
+  const pattern = rule.pattern || "...";
+  const cs = rule.case_sensitive ? " (case sensitive)" : "";
+  switch (rule.match) {
+    case "contains":
+      return `Blocks any command containing "${pattern}"${cs}`;
+    case "equals":
+      return `Blocks commands that exactly match "${pattern}"${cs}`;
+    case "prefix":
+      return `Blocks commands starting with "${pattern}"${cs}`;
+    case "suffix":
+      return `Blocks commands ending with "${pattern}"${cs}`;
+    case "matches":
+      return `Blocks commands matching regex /${pattern}/${rule.case_sensitive ? "" : "i"}`;
+    default:
+      return `Blocks "${pattern}"`;
+  }
+};
diff --git a/src/views/APIKeysView.vue b/src/views/APIKeysView.vue
index ea125f5..acf3f0e 100644
--- a/src/views/APIKeysView.vue
+++ b/src/views/APIKeysView.vue
@@ -6,7 +6,7 @@
         <button class="btn btn-icon" :disabled="loading" @click="loadAPIKeys">
           <i class="pi pi-refresh" :class="{ 'pi-spin': loading }" />
         </button>
-        <button v-if="canWrite" class="btn btn-primary" @click="showCreateDialog = true">
+        <button v-if="canWrite" class="btn btn-primary" @click="openCreateDialog">
           <i class="pi pi-plus" />
           <span>Create API Key</span>
         </button>
@@ -62,6 +62,9 @@
               <td>{{ formatDate(key.last_used_at) }}</td>
               <td>{{ formatExpiry(key.expires_at) }}</td>
               <td class="actions-cell">
+                <button v-if="canWrite" class="btn btn-icon btn-sm" title="Edit" @click="confirmEdit(key)">
+                  <i class="pi pi-pencil" />
+                </button>
                 <button
                   v-if="key.is_active && canWrite"
                   class="btn btn-icon btn-sm"
@@ -86,68 +89,142 @@
     </div>
 
     <!-- Create Dialog -->
-    <div v-if="showCreateDialog" class="modal-overlay" @click.self="closeDialogs">
-      <div class="modal-content">
-        <div class="modal-header">
-          <h2>Create API Key</h2>
-          <button class="btn btn-icon" @click="closeDialogs">
-            <i class="pi pi-times" />
-          </button>
+    <TabbedFormModal
+      v-if="showCreateDialog"
+      :title="'Create API Key'"
+      :tabs="createTabs"
+      :active-tab="activeTab"
+      :submitting="saving"
+      submit-label="Create"
+      submitting-label="Creating..."
+      @update:active-tab="activeTab = $event as 'profile' | 'permissions' | 'deployments'"
+      @close="closeDialogs"
+      @submit="createAPIKey"
+    >
+      <template #profile>
+        <div class="form-group">
+          <label>Name</label>
+          <input v-model="formData.name" type="text" placeholder="e.g., CI/CD Pipeline" required />
         </div>
-        <form @submit.prevent="createAPIKey">
-          <div class="form-group">
-            <label>Name</label>
-            <input v-model="formData.name" type="text" placeholder="e.g., CI/CD Pipeline" required />
-          </div>
-          <div class="form-group">
-            <label>Description (optional)</label>
-            <input v-model="formData.description" type="text" placeholder="What is this key used for?" />
-          </div>
-          <div class="form-group">
-            <label>Role Override (optional)</label>
-            <select v-model="formData.role" @change="onRoleChange">
-              <option value="">Inherit from user</option>
-              <option v-if="authStore.isAdmin" value="admin">Admin</option>
-              <option value="operator">Operator</option>
-              <option value="viewer">Viewer</option>
-            </select>
-            <small>Leave empty to inherit the role from the user account</small>
-          </div>
-          <div class="form-group">
-            <label class="checkbox-label">
-              <input v-model="formData.useCustomPermissions" type="checkbox" @change="onCustomPermissionsToggle" />
-              <span>Customize permissions</span>
-            </label>
-            <small>Override the default permissions for the selected role</small>
-          </div>
-          <div v-if="formData.useCustomPermissions" class="form-group">
-            <label>Permissions</label>
-            <PermissionPicker v-model="formData.permissions" />
-          </div>
-          <div v-else-if="formData.role" class="form-group">
-            <label>Role permissions ({{ formData.role }})</label>
-            <PermissionPicker :model-value="roleDefaultPermissions" readonly />
-          </div>
-          <div class="form-group">
-            <label>Expiration</label>
-            <select v-model="formData.expires_in">
-              <option :value="0">Never</option>
-              <option :value="86400">1 day</option>
-              <option :value="604800">7 days</option>
-              <option :value="2592000">30 days</option>
-              <option :value="7776000">90 days</option>
-              <option :value="31536000">1 year</option>
-            </select>
-          </div>
-          <div class="modal-actions">
-            <button type="button" class="btn" @click="closeDialogs">Cancel</button>
-            <button type="submit" class="btn btn-primary" :disabled="saving">
-              {{ saving ? "Creating..." : "Create" }}
-            </button>
-          </div>
-        </form>
-      </div>
-    </div>
+        <div class="form-group">
+          <label>Description (optional)</label>
+          <input v-model="formData.description" type="text" placeholder="What is this key used for?" />
+        </div>
+        <div class="form-group">
+          <label>Role Override (optional)</label>
+          <select v-model="formData.role" @change="onRoleChange">
+            <option value="">Inherit from user</option>
+            <option v-if="authStore.isAdmin" value="admin">Admin</option>
+            <option value="operator">Operator</option>
+            <option value="viewer">Viewer</option>
+          </select>
+          <small>Leave empty to inherit the role from the user account.</small>
+        </div>
+        <div class="form-group">
+          <label>Expiration</label>
+          <select v-model="formData.expires_in">
+            <option :value="0">Never</option>
+            <option :value="86400">1 day</option>
+            <option :value="604800">7 days</option>
+            <option :value="2592000">30 days</option>
+            <option :value="7776000">90 days</option>
+            <option :value="31536000">1 year</option>
+          </select>
+        </div>
+      </template>
+
+      <template #permissions>
+        <div class="form-group">
+          <label class="checkbox-label">
+            <input v-model="formData.useCustomPermissions" type="checkbox" @change="onCustomPermissionsToggle" />
+            <span>Customize permissions</span>
+          </label>
+          <p v-if="!formData.useCustomPermissions" class="tab-hint">
+            Using
+            <span class="role-perm-badge" :class="formData.role || 'inherit'">{{ formData.role || "inherited" }}</span>
+            defaults. Enable the checkbox to override.
+          </p>
+        </div>
+        <PermissionPicker v-if="formData.useCustomPermissions" v-model="formData.permissions" />
+        <PermissionPicker v-else :model-value="roleDefaultPermissions" readonly />
+      </template>
+
+      <template #deployments>
+        <DeploymentAccessField
+          v-model="formData.deployments"
+          :available="availableDeployments"
+          hint="Leave empty to allow access to any deployment the user can reach. Listed deployments cap this key to those (and at most the chosen level). System-level permissions are not affected."
+          empty-hint="No deployment restrictions"
+          default-level="read"
+        />
+      </template>
+    </TabbedFormModal>
+
+    <!-- Edit Dialog -->
+    <TabbedFormModal
+      v-if="showEditDialog"
+      :title="'Edit API Key'"
+      :tabs="editTabs"
+      :active-tab="activeTab"
+      :submitting="saving"
+      submit-label="Save"
+      submitting-label="Saving..."
+      @update:active-tab="activeTab = $event as 'profile' | 'permissions' | 'deployments'"
+      @close="closeDialogs"
+      @submit="updateKey"
+    >
+      <template #profile>
+        <div class="form-group">
+          <label>Name</label>
+          <input v-model="editFormData.name" type="text" required />
+        </div>
+        <div class="form-group">
+          <label>Description (optional)</label>
+          <input v-model="editFormData.description" type="text" />
+        </div>
+        <div class="form-group">
+          <label>Role Override (optional)</label>
+          <select v-model="editFormData.role">
+            <option value="">Inherit from user</option>
+            <option v-if="authStore.isAdmin" value="admin">Admin</option>
+            <option value="operator">Operator</option>
+            <option value="viewer">Viewer</option>
+          </select>
+        </div>
+        <div class="form-group">
+          <label>Extend expiration (optional)</label>
+          <select v-model="editFormData.expires_in">
+            <option :value="0">Keep current</option>
+            <option :value="86400">1 day from now</option>
+            <option :value="604800">7 days from now</option>
+            <option :value="2592000">30 days from now</option>
+            <option :value="7776000">90 days from now</option>
+            <option :value="31536000">1 year from now</option>
+          </select>
+          <small>"Keep current" leaves expiration untouched; pick a duration to reset it.</small>
+        </div>
+      </template>
+
+      <template #permissions>
+        <div class="form-group">
+          <label class="checkbox-label">
+            <input v-model="editFormData.useCustomPermissions" type="checkbox" />
+            <span>Customize permissions</span>
+          </label>
+        </div>
+        <PermissionPicker v-if="editFormData.useCustomPermissions" v-model="editFormData.permissions" />
+      </template>
+
+      <template #deployments>
+        <DeploymentAccessField
+          v-model="editFormData.deployments"
+          :available="availableDeployments"
+          hint="Leave empty to allow access to any deployment. Listed deployments cap this key to those (and at most the chosen level). System-level permissions are not affected."
+          empty-hint="No deployment restrictions"
+          default-level="read"
+        />
+      </template>
+    </TabbedFormModal>
 
     <!-- New Key Dialog -->
     <div v-if="showNewKeyDialog" class="modal-overlay">
@@ -220,9 +297,15 @@ import { useUsersStore } from "@/stores/users";
 import { useAuthStore } from "@/stores/auth";
 import PermissionPicker from "@/components/PermissionPicker.vue";
 import { getRolePermissions } from "@/utils/permissions";
+import { deploymentsApi } from "@/services/api";
+import { useNotificationsStore } from "@/stores/notifications";
+import TabbedFormModal, { type TabbedFormModalTab } from "@/components/TabbedFormModal.vue";
+import DeploymentAccessField from "@/components/DeploymentAccessField.vue";
+import type { DeploymentAccessMap } from "@/types";
 
 const usersStore = useUsersStore();
 const authStore = useAuthStore();
+const notifications = useNotificationsStore();
 
 const apiKeys = computed(() => usersStore.apiKeys);
 const loading = computed(() => usersStore.loading);
@@ -239,15 +322,47 @@ const newKeyValue = ref("");
 const copied = ref(false);
 const saving = ref(false);
 
-const formData = ref({
+const availableDeployments = ref<string[]>([]);
+
+const showEditDialog = ref(false);
+const editingKeyId = ref<number | null>(null);
+const activeTab = ref<"profile" | "permissions" | "deployments">("profile");
+
+const createTabs = computed<TabbedFormModalTab[]>(() => [
+  { id: "profile", label: "Profile", icon: "pi pi-user" },
+  { id: "permissions", label: "Permissions", icon: "pi pi-shield" },
+  {
+    id: "deployments",
+    label: "Deployments",
+    icon: "pi pi-box",
+    count: Object.keys(formData.value.deployments).length || undefined,
+  },
+]);
+
+const editTabs = computed<TabbedFormModalTab[]>(() => [
+  { id: "profile", label: "Profile", icon: "pi pi-user" },
+  { id: "permissions", label: "Permissions", icon: "pi pi-shield" },
+  {
+    id: "deployments",
+    label: "Deployments",
+    icon: "pi pi-box",
+    count: Object.keys(editFormData.value.deployments).length || undefined,
+  },
+]);
+
+const blankForm = () => ({
   name: "",
   description: "",
   role: "" as UserRole | "",
   expires_in: 0,
   useCustomPermissions: false,
   permissions: [] as string[],
+  deployments: {} as DeploymentAccessMap,
 });
 
+const formData = ref(blankForm());
+const editFormData = ref(blankForm());
+
 const roleDefaultPermissions = computed(() => {
   if (!formData.value.role) return [];
   return getRolePermissions(formData.value.role as UserRole);
@@ -278,21 +393,69 @@ const createAPIKey = async () => {
       description: formData.value.description || undefined,
       role: formData.value.role || undefined,
       permissions: formData.value.useCustomPermissions ? formData.value.permissions : undefined,
+      deployments: Object.keys(formData.value.deployments).length ? formData.value.deployments : undefined,
       expires_in: formData.value.expires_in || undefined,
     });
     newKeyValue.value = result.api_key.key || "";
     showCreateDialog.value = false;
     showNewKeyDialog.value = true;
-    formData.value = {
-      name: "",
-      description: "",
-      role: "",
-      expires_in: 0,
-      useCustomPermissions: false,
-      permissions: [],
+    formData.value = blankForm();
+  } catch (e: any) {
+    notifications.error("Create Failed", e.message || "Could not create API key");
+  } finally {
+    saving.value = false;
+  }
+};
+
+const openCreateDialog = () => {
+  formData.value = blankForm();
+  activeTab.value = "profile";
+  showCreateDialog.value = true;
+};
+
+const confirmEdit = (key: APIKey) => {
+  selectedKey.value = key;
+  editingKeyId.value = key.id;
+  activeTab.value = "profile";
+  editFormData.value = {
+    name: key.name,
+    description: key.description || "",
+    role: (key.role as UserRole | "") || "",
+    expires_in: 0,
+    useCustomPermissions: Array.isArray(key.permissions) && key.permissions.length > 0,
+    permissions: Array.isArray(key.permissions) ? [...key.permissions] : [],
+    deployments:
+      key.deployments && typeof key.deployments === "object" ? { ...key.deployments } : ({} as DeploymentAccessMap),
+  };
+  showEditDialog.value = true;
+};
+
+const updateKey = async () => {
+  if (editingKeyId.value === null) return;
+  saving.value = true;
+  try {
+    const payload: {
+      name: string;
+      description: string;
+      role: UserRole | "";
+      permissions: string[];
+      deployments: DeploymentAccessMap;
+      expires_in?: number;
+    } = {
+      name: editFormData.value.name,
+      description: editFormData.value.description,
+      role: editFormData.value.role,
+      permissions: editFormData.value.useCustomPermissions ? editFormData.value.permissions : [],
+      deployments: editFormData.value.deployments,
     };
+    if (editFormData.value.expires_in > 0) {
+      payload.expires_in = editFormData.value.expires_in;
+    }
+    await usersStore.updateAPIKey(editingKeyId.value, payload);
+    notifications.success("Updated", `API key "${editFormData.value.name}" updated.`);
+    closeDialogs();
   } catch (e: any) {
-    alert(e.message);
+    notifications.error("Update Failed", e.message || "Could not update API key");
   } finally {
     saving.value = false;
   }
@@ -312,10 +475,12 @@ const revokeKey = async () => {
   if (!selectedKey.value) return;
   saving.value = true;
   try {
+    const name = selectedKey.value.name;
     await usersStore.revokeAPIKey(selectedKey.value.id);
+    notifications.success("Revoked", `API key "${name}" was revoked.`);
     closeDialogs();
   } catch (e: any) {
-    alert(e.message);
+    notifications.error("Revoke Failed", e.message || "Could not revoke API key");
   } finally {
     saving.value = false;
   }
@@ -325,10 +490,12 @@ const deleteKey = async () => {
   if (!selectedKey.value) return;
   saving.value = true;
   try {
+    const name = selectedKey.value.name;
     await usersStore.deleteAPIKey(selectedKey.value.id);
+    notifications.success("Deleted", `API key "${name}" was deleted.`);
     closeDialogs();
   } catch (e: any) {
-    alert(e.message);
+    notifications.error("Delete Failed", e.message || "Could not delete API key");
   } finally {
     saving.value = false;
   }
@@ -348,9 +515,11 @@ const copyKey = async () => {
 
 const closeDialogs = () => {
   showCreateDialog.value = false;
+  showEditDialog.value = false;
   showRevokeDialog.value = false;
   showDeleteDialog.value = false;
   selectedKey.value = null;
+  editingKeyId.value = null;
 };
 
 const closeNewKeyDialog = () => {
@@ -358,9 +527,15 @@ const closeNewKeyDialog = () => {
   newKeyValue.value = "";
 };
 
-const formatDate = (date?: string) => {
-  if (!date) return "Never";
-  return new Date(date).toLocaleDateString(undefined, {
+const isMeaningfulDate = (date?: string | null) => {
+  if (!date) return false;
+  const d = new Date(date);
+  return !Number.isNaN(d.getTime()) && d.getFullYear() > 1;
+};
+
+const formatDate = (date?: string | null) => {
+  if (!isMeaningfulDate(date)) return "Never";
+  return new Date(date as string).toLocaleDateString(undefined, {
     year: "numeric",
     month: "short",
     day: "numeric",
@@ -369,9 +544,9 @@ const formatDate = (date?: string) => {
   });
 };
 
-const formatExpiry = (date?: string) => {
-  if (!date) return "Never";
-  const d = new Date(date);
+const formatExpiry = (date?: string | null) => {
+  if (!isMeaningfulDate(date)) return "Never";
+  const d = new Date(date as string);
   if (d < new Date()) return "Expired";
   return d.toLocaleDateString(undefined, {
     year: "numeric",
@@ -380,8 +555,18 @@ const formatExpiry = (date?: string) => {
   });
 };
 
+const loadDeployments = async () => {
+  try {
+    const response = await deploymentsApi.list();
+    availableDeployments.value = response.data.deployments.map((d) => d.name).filter((n): n is string => !!n);
+  } catch {
+    availableDeployments.value = [];
+  }
+};
+
 onMounted(() => {
   loadAPIKeys();
+  loadDeployments();
 });
 </script>
 
@@ -551,7 +736,7 @@ code {
   background: var(--surface-card);
   border-radius: 8px;
   width: 100%;
-  max-width: 720px;
+  max-width: 960px;
   max-height: 90vh;
   overflow-y: auto;
 }
@@ -560,6 +745,24 @@ code {
   max-width: 400px;
 }
 
+.form-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+.form-col {
+  min-width: 0;
+}
+
+@media (min-width: 720px) {
+  .form-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1.5rem;
+  }
+}
+
 .modal-header {
   display: flex;
   justify-content: space-between;
@@ -690,12 +893,12 @@ code {
 }
 
 .btn-danger {
-  background: var(--danger);
+  background: var(--color-danger-500, #ef4444);
   color: white;
 }
 
 .btn-danger:hover {
-  background: var(--danger-dark);
+  background: var(--color-danger-600, #dc2626);
 }
 
 .btn-icon {
diff --git a/src/views/DeploymentDetailView.vue b/src/views/DeploymentDetailView.vue
index ca0d197..e542c8a 100755
--- a/src/views/DeploymentDetailView.vue
+++ b/src/views/DeploymentDetailView.vue
@@ -865,6 +865,153 @@
           </div>
         </div>
 
+        <div v-if="activeTab === 'settings'" class="settings-tab">
+          <div class="security-section protected-mode-section">
+            <div class="section-header">
+              <div class="section-title">
+                <i class="pi pi-lock" />
+                <h3>Protected Mode</h3>
+              </div>
+              <label class="toggle-switch">
+                <input
+                  v-model="protectedMode.enabled"
+                  type="checkbox"
+                  :disabled="savingProtectedMode"
+                  @change="saveProtectedMode"
+                />
+                <span class="toggle-slider" />
+              </label>
+            </div>
+            <p class="section-description">
+              When enabled, the actions selected below are refused with a 423 Locked status. Use this on production
+              deployments to prevent accidental destructive operations.
+            </p>
+            <div class="section-body">
+              <div class="protected-mode-grid">
+                <label class="delete-option compact">
+                  <input
+                    v-model="protectedMode.disable_terminal"
+                    type="checkbox"
+                    :disabled="!protectedMode.enabled || savingProtectedMode"
+                    @change="saveProtectedMode"
+                  />
+                  <span class="option-content">
+                    <span class="option-label">Disable terminal</span>
+                    <span class="option-hint">Block interactive shell sessions</span>
+                  </span>
+                </label>
+                <div class="blocked-actions">
+                  <span class="field-label">Blocked actions</span>
+                  <span class="field-help"
+                    >Click an action to toggle whether it is refused while protected mode is on.</span
+                  >
+                  <div class="action-chips">
+                    <button
+                      v-for="action in protectedActionOptions"
+                      :key="action.value"
+                      class="preset-btn"
+                      :class="{ active: isProtectedActionBlocked(action.value) }"
+                      :disabled="!protectedMode.enabled || savingProtectedMode"
+                      :title="action.hint"
+                      @click="toggleProtectedAction(action.value)"
+                    >
+                      <i :class="isProtectedActionBlocked(action.value) ? 'pi pi-check' : 'pi pi-plus'" />
+                      {{ action.label }}
+                    </button>
+                  </div>
+                </div>
+              </div>
+
+              <div class="command-rules">
+                <div class="rules-header">
+                  <span class="field-label">Blocked commands</span>
+                  <span class="enable-bar-status" :class="{ active: protectedMode.enabled }">
+                    {{ protectedMode.blocked_command_rules?.length || 0 }}
+                  </span>
+                </div>
+                <p class="field-help">
+                  Each rule refuses terminal commands and quick actions whose command string matches the pattern. Rules
+                  apply only while protected mode is on.
+                </p>
+                <div v-if="!(protectedMode.blocked_command_rules || []).length" class="empty-state horizontal">
+                  <i class="pi pi-code" />
+                  <div class="empty-text">
+                    <p>No command rules yet</p>
+                    <span>Add a pattern below (e.g. contains "rm -rf") to start blocking commands.</span>
+                  </div>
+                </div>
+                <div v-else class="items-list">
+                  <div
+                    v-for="(rule, index) in protectedMode.blocked_command_rules"
+                    :key="rule.id || index"
+                    class="list-item command-rule-item"
+                  >
+                    <div class="rule-summary">
+                      <code class="rule-pattern">{{ rule.pattern }}</code>
+                      <div class="rule-meta">
+                        <span class="rule-badge">{{ rule.match }}</span>
+                        <span v-if="rule.case_sensitive" class="rule-badge subtle">case sensitive</span>
+                      </div>
+                      <p class="rule-explanation">{{ describeBlockedRule(rule) }}</p>
+                    </div>
+                    <div class="item-actions">
+                      <button
+                        class="btn btn-icon btn-sm btn-ghost"
+                        :disabled="savingProtectedMode"
+                        title="Remove"
+                        @click="removeProtectedCommandRule(index)"
+                      >
+                        <i class="pi pi-times" />
+                      </button>
+                    </div>
+                  </div>
+                </div>
+                <div class="add-form command-rule-form">
+                  <div class="command-rule-form-row">
+                    <select v-model="newCommandRule.match" class="form-select" :disabled="!protectedMode.enabled">
+                      <option value="contains">Contains</option>
+                      <option value="equals">Equals</option>
+                      <option value="prefix">Prefix</option>
+                      <option value="suffix">Suffix</option>
+                      <option value="matches">Regex</option>
+                    </select>
+                    <input
+                      v-model="newCommandRule.pattern"
+                      type="text"
+                      class="form-input"
+                      placeholder="Command pattern (e.g. rm -rf)"
+                      :disabled="!protectedMode.enabled"
+                      @keyup.enter="addProtectedCommandRule"
+                    />
+                    <label class="case-toggle">
+                      <input
+                        v-model="newCommandRule.case_sensitive"
+                        type="checkbox"
+                        :disabled="!protectedMode.enabled"
+                      />
+                      <span>Case</span>
+                    </label>
+                    <button
+                      class="btn btn-sm btn-primary"
+                      :disabled="!protectedMode.enabled || !newCommandRule.pattern"
+                      @click="addProtectedCommandRule"
+                    >
+                      <i class="pi pi-plus" /> Add
+                    </button>
+                  </div>
+                  <p class="rule-preview">
+                    <i class="pi pi-info-circle" />
+                    {{ matchTypeHints[newCommandRule.match] }}.
+                    <span v-if="newCommandRule.pattern" class="rule-preview-sentence">
+                      Preview: {{ describeBlockedRule(newCommandRule) }}.
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
         <div v-if="activeTab === 'config'" class="config-tab">
           <div class="config-sub-tabs">
             <button
@@ -1473,7 +1620,15 @@ import {
 } from "@/services/api";
 import { useNotificationsStore } from "@/stores/notifications";
 import { useAuthStore } from "@/stores/auth";
-import type { ProxyStatus, QuickAction, SecurityEvent, DeploymentSecurityConfig, RegistryCredential } from "@/types";
+import type {
+  ProxyStatus,
+  QuickAction,
+  SecurityEvent,
+  DeploymentSecurityConfig,
+  RegistryCredential,
+  ProtectedCommandRule,
+  ProtectedModeConfig,
+} from "@/types";
 import FileBrowser from "@/components/FileBrowser.vue";
 import LogViewer from "@/components/LogViewer.vue";
 import ConfirmModal from "@/components/ConfirmModal.vue";
@@ -1483,6 +1638,7 @@ import DomainsManager from "@/components/DomainsManager.vue";
 import DomainFormModal from "@/components/DomainFormModal.vue";
 import ContainerResourcesModal from "@/components/ContainerResourcesModal.vue";
 import { extractComposeMounts, extractComposeServiceNames } from "@/utils/compose";
+import { matchTypeHints, describeBlockedRule } from "@/utils/protectedMode";
 
 const route = useRoute();
 const router = useRouter();
@@ -1523,10 +1679,32 @@ const securityConfig = ref<DeploymentSecurityConfig>({
   protected_paths: [],
   rate_limits: [],
 });
+const protectedMode = ref<ProtectedModeConfig>({
+  enabled: false,
+  blocked_actions: [],
+  blocked_command_rules: [],
+  disable_terminal: false,
+});
+const savingProtectedMode = ref(false);
+const newCommandRule = ref<ProtectedCommandRule>({
+  match: "contains",
+  pattern: "",
+  case_sensitive: false,
+});
 const securityEvents = ref<SecurityEvent[]>([]);
 const newProtectedPath = ref("");
 const newRateLimit = ref({ path: "", rate: 10, burst: 5, enabled: true });
 
+const protectedActionOptions = [
+  { value: "delete_deployment", label: "Delete", hint: "Block deleting this deployment" },
+  { value: "update_deployment", label: "Compose", hint: "Block editing the compose file" },
+  { value: "update_env", label: "Env", hint: "Block editing environment variables" },
+  { value: "delete_file", label: "Files", hint: "Block deleting files in the deployment directory" },
+  { value: "rebuild_deployment", label: "Rebuild", hint: "Block rebuilding (recreate containers from compose)" },
+  { value: "quick_action", label: "Actions", hint: "Block running quick actions" },
+  { value: "exec", label: "Exec", hint: "Block direct command execution in containers" },
+];
+
 const protectedPathPresets = [
   { pattern: "/.env", label: ".env" },
   { pattern: "/.git", label: ".git" },
@@ -1545,6 +1723,7 @@ const tabs = [
   { id: "actions", label: "Quick Actions", icon: "pi pi-bolt" },
   { id: "backups", label: "Backups", icon: "pi pi-history" },
   { id: "security", label: "Security", icon: "pi pi-shield" },
+  { id: "settings", label: "Settings", icon: "pi pi-sliders-h" },
   { id: "config", label: "Configuration", icon: "pi pi-cog" },
 ];
 
@@ -1730,6 +1909,71 @@ const saveSecurityConfig = async () => {
   }
 };
 
+const syncProtectedModeFromDeployment = () => {
+  const current = deployment.value?.metadata?.protected_mode;
+  protectedMode.value = {
+    enabled: current?.enabled || false,
+    blocked_actions: [...(current?.blocked_actions || [])],
+    blocked_command_rules: [...(current?.blocked_command_rules || [])],
+    disable_terminal: current?.disable_terminal || false,
+  };
+};
+
+const saveProtectedMode = async () => {
+  savingProtectedMode.value = true;
+  try {
+    const response = await deploymentsApi.updateProtectedMode(route.params.name as string, protectedMode.value);
+    protectedMode.value = response.data.protected_mode;
+    if (deployment.value?.metadata) {
+      deployment.value.metadata.protected_mode = response.data.protected_mode;
+    }
+    notifications.success("Saved", "Protected mode updated");
+  } catch (e: any) {
+    notifications.error("Error", e.response?.data?.error || "Failed to save protected mode");
+    syncProtectedModeFromDeployment();
+  } finally {
+    savingProtectedMode.value = false;
+  }
+};
+
+const isProtectedActionBlocked = (action: string) => {
+  return (protectedMode.value.blocked_actions || []).includes(action);
+};
+
+const toggleProtectedAction = async (action: string) => {
+  const actions = protectedMode.value.blocked_actions || [];
+  if (actions.includes(action)) {
+    protectedMode.value.blocked_actions = actions.filter((item) => item !== action);
+  } else {
+    protectedMode.value.blocked_actions = [...actions, action];
+  }
+  await saveProtectedMode();
+};
+
+const addProtectedCommandRule = async () => {
+  const pattern = newCommandRule.value.pattern.trim();
+  if (!pattern) return;
+
+  protectedMode.value.blocked_command_rules = [
+    ...(protectedMode.value.blocked_command_rules || []),
+    {
+      id: `rule-${Date.now()}`,
+      match: newCommandRule.value.match,
+      pattern,
+      case_sensitive: newCommandRule.value.case_sensitive,
+    },
+  ];
+  newCommandRule.value = { match: "contains", pattern: "", case_sensitive: false };
+  await saveProtectedMode();
+};
+
+const removeProtectedCommandRule = async (index: number) => {
+  protectedMode.value.blocked_command_rules = (protectedMode.value.blocked_command_rules || []).filter(
+    (_, i) => i !== index,
+  );
+  await saveProtectedMode();
+};
+
 const isPathProtected = (pattern: string) => {
   return (securityConfig.value.protected_paths || []).some((p) => p.pattern === pattern);
 };
@@ -1804,6 +2048,7 @@ const fetchDeployment = async () => {
     const response = await deploymentsApi.get(route.params.name as string);
     const data = response.data as any;
     deployment.value = data.deployment || data;
+    syncProtectedModeFromDeployment();
 
     if (data.proxy_status) {
       proxyStatus.value = data.proxy_status;
@@ -4616,6 +4861,112 @@ onUnmounted(() => {
   color: #6b7280;
 }
 
+.section-description {
+  margin: 0;
+  padding: 0.5rem 1.25rem 0;
+  font-size: 0.8125rem;
+  color: var(--color-gray-600);
+  line-height: 1.4;
+}
+
+.field-help {
+  display: block;
+  margin: 0.125rem 0 0.375rem;
+  font-size: 0.75rem;
+  color: var(--color-gray-500);
+  line-height: 1.35;
+}
+
+.action-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.375rem;
+}
+
+.command-rule-item {
+  align-items: center;
+  padding: 0.375rem 0.625rem;
+}
+
+.rule-summary {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+  min-width: 0;
+  flex: 1;
+  row-gap: 0.125rem;
+}
+
+.rule-pattern {
+  font-family: "SF Mono", "Fira Code", monospace;
+  font-size: 0.8125rem;
+  background: var(--color-gray-100);
+  padding: 0.0625rem 0.375rem;
+  border-radius: var(--radius-sm);
+  word-break: break-all;
+}
+
+.rule-meta {
+  display: flex;
+  gap: 0.25rem;
+}
+
+.rule-badge {
+  font-size: 0.625rem;
+  padding: 0.0625rem 0.375rem;
+  border-radius: var(--radius-sm);
+  background: var(--color-primary-50);
+  color: var(--color-primary-700);
+  text-transform: lowercase;
+  font-weight: var(--font-medium);
+  line-height: 1.4;
+}
+
+.rule-badge.subtle {
+  background: var(--color-gray-100);
+  color: var(--color-gray-600);
+}
+
+.rule-explanation {
+  flex-basis: 100%;
+  margin: 0;
+  font-size: 0.75rem;
+  color: var(--color-gray-500);
+  line-height: 1.3;
+}
+
+.command-rule-form-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.command-rule-form-row .form-input {
+  flex: 1;
+  min-width: 200px;
+}
+
+.rule-preview {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.375rem;
+  margin: 0.375rem 0 0;
+  font-size: 0.75rem;
+  color: var(--color-gray-500);
+  line-height: 1.35;
+}
+
+.rule-preview .pi {
+  color: var(--color-primary-500);
+}
+
+.rule-preview-sentence {
+  color: var(--color-gray-700);
+}
+
 .add-form {
   display: flex;
   gap: 0.5rem;
diff --git a/src/views/SettingsView.vue b/src/views/SettingsView.vue
index 575d31f..e661ed5 100644
--- a/src/views/SettingsView.vue
+++ b/src/views/SettingsView.vue
@@ -618,6 +618,122 @@
         </div>
       </div>
 
+      <div v-show="activeTab === 'terminal'" class="tab-content">
+        <div class="settings-card">
+          <div class="card-header">
+            <i class="pi pi-desktop" />
+            <h3>System Terminal Protection</h3>
+            <label class="toggle-switch">
+              <input v-model="systemTerminalProtectedMode.enabled" type="checkbox" :disabled="!canWriteSettings" />
+              <span class="toggle-slider" />
+            </label>
+          </div>
+          <p class="card-description">
+            When enabled, commands typed in the system terminal are checked against the rules below. Matching commands
+            are refused with a 423 Locked status. Use this to keep destructive commands out of the host shell.
+          </p>
+          <div class="card-body">
+            <div class="form-grid">
+              <div class="form-group full-width">
+                <div class="toggle-row">
+                  <div class="toggle-info">
+                    <label class="form-label">Disable System Terminal</label>
+                    <span class="form-hint">Block all system terminal sessions, regardless of command rules.</span>
+                  </div>
+                  <label class="toggle-switch">
+                    <input
+                      v-model="systemTerminalProtectedMode.disable_terminal"
+                      type="checkbox"
+                      :disabled="!canWriteSettings || !systemTerminalProtectedMode.enabled"
+                    />
+                    <span class="toggle-slider" />
+                  </label>
+                </div>
+              </div>
+
+              <div class="form-group full-width">
+                <label class="form-label">Blocked commands</label>
+                <span class="form-hint">
+                  Each rule refuses commands whose text matches the pattern. Rules only apply while protection is on.
+                </span>
+                <div v-if="!systemTerminalProtectedMode.blocked_command_rules?.length" class="empty-rules">
+                  No command rules yet. Add a pattern below (e.g. contains "rm -rf") to start blocking commands.
+                </div>
+                <div v-else class="rules-list">
+                  <div
+                    v-for="(rule, index) in systemTerminalProtectedMode.blocked_command_rules"
+                    :key="rule.id || index"
+                    class="rule-row"
+                  >
+                    <div class="rule-summary">
+                      <code class="rule-pattern">{{ rule.pattern }}</code>
+                      <div class="rule-meta">
+                        <span class="rule-badge">{{ rule.match }}</span>
+                        <span v-if="rule.case_sensitive" class="rule-badge subtle">case sensitive</span>
+                      </div>
+                      <p class="rule-explanation">{{ describeBlockedRule(rule) }}</p>
+                    </div>
+                    <button
+                      v-if="canWriteSettings"
+                      class="btn btn-icon btn-sm"
+                      title="Remove rule"
+                      @click="removeSystemTerminalRule(index)"
+                    >
+                      <i class="pi pi-times" />
+                    </button>
+                  </div>
+                </div>
+              </div>
+
+              <div v-if="canWriteSettings" class="form-group full-width">
+                <div class="terminal-rule-form">
+                  <select v-model="newSystemTerminalRule.match" class="form-select">
+                    <option value="contains">Contains</option>
+                    <option value="equals">Equals</option>
+                    <option value="prefix">Prefix</option>
+                    <option value="suffix">Suffix</option>
+                    <option value="matches">Regex</option>
+                  </select>
+                  <input
+                    v-model="newSystemTerminalRule.pattern"
+                    type="text"
+                    class="form-input"
+                    placeholder="Command pattern (e.g. rm -rf)"
+                    @keyup.enter="addSystemTerminalRule"
+                  />
+                  <label class="checkbox-label">
+                    <input v-model="newSystemTerminalRule.case_sensitive" type="checkbox" />
+                    <span>Case</span>
+                  </label>
+                  <button
+                    class="btn btn-secondary"
+                    :disabled="!newSystemTerminalRule.pattern.trim()"
+                    @click="addSystemTerminalRule"
+                  >
+                    <i class="pi pi-plus" />
+                    Add Rule
+                  </button>
+                </div>
+                <p class="rule-preview">
+                  <i class="pi pi-info-circle" />
+                  {{ matchTypeHints[newSystemTerminalRule.match] }}.
+                  <span v-if="newSystemTerminalRule.pattern.trim()" class="rule-preview-sentence">
+                    Preview: {{ describeBlockedRule(newSystemTerminalRule) }}.
+                  </span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div v-if="canWriteSettings" class="card-footer">
+            <button class="btn btn-primary" :disabled="savingSystemTerminal" @click="saveSystemTerminalSettings">
+              <i v-if="savingSystemTerminal" class="pi pi-spin pi-spinner" />
+              <i v-else class="pi pi-save" />
+              <span>Save Terminal Settings</span>
+            </button>
+          </div>
+        </div>
+      </div>
+
       <!-- Health Checks Tab -->
       <div v-show="activeTab === 'healthchecks'" class="tab-content">
         <SecurityHealthCard :auto-fetch="true" />
@@ -798,10 +914,11 @@
 import { ref, reactive, computed, onMounted } from "vue";
 import { settingsApi, healthApi, templatesApi, credentialsApi, registriesApi } from "@/services/api";
 import type { DomainSettings } from "@/services/api";
-import type { RegistryCredential, RegistryType } from "@/types";
+import type { ProtectedCommandRule, ProtectedModeConfig, RegistryCredential, RegistryType } from "@/types";
 import { useNotificationsStore } from "@/stores/notifications";
 import { useAuthStore } from "@/stores/auth";
 import SecurityHealthCard from "@/components/SecurityHealthCard.vue";
+import { matchTypeHints, describeBlockedRule } from "@/utils/protectedMode";
 
 declare const __APP_VERSION__: string;
 
@@ -823,6 +940,7 @@ const tabs = [
   { id: "domain", label: "Domain", icon: "pi pi-globe" },
   { id: "infrastructure", label: "Infrastructure", icon: "pi pi-server" },
   { id: "security", label: "Security & Monitoring", icon: "pi pi-shield" },
+  { id: "terminal", label: "Terminal", icon: "pi pi-desktop" },
   { id: "healthchecks", label: "Health Checks", icon: "pi pi-heart" },
   { id: "credentials", label: "Credentials", icon: "pi pi-key" },
 ];
@@ -896,6 +1014,18 @@ const securitySettings = reactive({
 });
 
 const savingSecurity = ref(false);
+const savingSystemTerminal = ref(false);
+const systemTerminalProtectedMode = reactive<ProtectedModeConfig>({
+  enabled: false,
+  blocked_actions: [],
+  blocked_command_rules: [],
+  disable_terminal: false,
+});
+const newSystemTerminalRule = reactive<ProtectedCommandRule>({
+  match: "contains",
+  pattern: "",
+  case_sensitive: false,
+});
 
 const credentials = ref<RegistryCredential[]>([]);
 const loadingCredentials = ref(false);
@@ -1113,6 +1243,14 @@ const fetchSettings = async () => {
       securitySettings.unique_paths_threshold = data.security.unique_paths_threshold || 20;
       securitySettings.repeated_hits_threshold = data.security.repeated_hits_threshold || 30;
     }
+
+    if (data.system_terminal?.protected_mode) {
+      const protectedMode = data.system_terminal.protected_mode;
+      systemTerminalProtectedMode.enabled = protectedMode.enabled ?? false;
+      systemTerminalProtectedMode.disable_terminal = protectedMode.disable_terminal ?? false;
+      systemTerminalProtectedMode.blocked_actions = protectedMode.blocked_actions || [];
+      systemTerminalProtectedMode.blocked_command_rules = protectedMode.blocked_command_rules || [];
+    }
   } catch (e: any) {
     notifications.error("Error", "Failed to load settings");
   } finally {
@@ -1120,6 +1258,51 @@ const fetchSettings = async () => {
   }
 };
 
+const addSystemTerminalRule = () => {
+  const pattern = newSystemTerminalRule.pattern.trim();
+  if (!pattern) return;
+
+  systemTerminalProtectedMode.blocked_command_rules = [
+    ...(systemTerminalProtectedMode.blocked_command_rules || []),
+    {
+      id: `rule-${Date.now()}`,
+      match: newSystemTerminalRule.match,
+      pattern,
+      case_sensitive: newSystemTerminalRule.case_sensitive,
+    },
+  ];
+  newSystemTerminalRule.match = "contains";
+  newSystemTerminalRule.pattern = "";
+  newSystemTerminalRule.case_sensitive = false;
+};
+
+const removeSystemTerminalRule = (index: number) => {
+  systemTerminalProtectedMode.blocked_command_rules = (systemTerminalProtectedMode.blocked_command_rules || []).filter(
+    (_, i) => i !== index,
+  );
+};
+
+const saveSystemTerminalSettings = async () => {
+  savingSystemTerminal.value = true;
+  try {
+    await settingsApi.update({
+      system_terminal: {
+        protected_mode: {
+          enabled: systemTerminalProtectedMode.enabled,
+          disable_terminal: systemTerminalProtectedMode.disable_terminal,
+          blocked_actions: systemTerminalProtectedMode.blocked_actions || [],
+          blocked_command_rules: systemTerminalProtectedMode.blocked_command_rules || [],
+        },
+      },
+    });
+    notifications.success("Settings Saved", "System terminal protection has been updated");
+  } catch (e: any) {
+    notifications.error("Error", e.response?.data?.error || "Failed to save terminal settings");
+  } finally {
+    savingSystemTerminal.value = false;
+  }
+};
+
 const saveDomainSettings = async () => {
   savingDomain.value = true;
 
@@ -2169,4 +2352,118 @@ onMounted(() => {
 .content-grid.single-column {
   grid-template-columns: 1fr;
 }
+
+.card-description {
+  margin: 0;
+  padding: 0.5rem 1.25rem;
+  font-size: 0.8125rem;
+  color: var(--color-gray-600);
+  line-height: 1.4;
+  border-bottom: 1px solid var(--color-gray-100);
+}
+
+.empty-rules {
+  padding: 0.5rem 0.75rem;
+  margin: 0.5rem 0;
+  font-size: 0.8125rem;
+  color: var(--color-gray-500);
+  background: var(--color-gray-50);
+  border-radius: var(--radius-md);
+}
+
+.rules-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+  margin: 0.5rem 0;
+}
+
+.rule-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding: 0.4375rem 0.625rem;
+  background: var(--color-gray-50);
+  border: 1px solid var(--color-gray-200);
+  border-radius: var(--radius-md);
+}
+
+.rule-summary {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+  min-width: 0;
+  flex: 1;
+  row-gap: 0.125rem;
+}
+
+.rule-pattern {
+  font-family: "SF Mono", "Fira Code", monospace;
+  font-size: 0.8125rem;
+  padding: 0.0625rem 0.375rem;
+  background: var(--color-gray-100);
+  border-radius: var(--radius-sm);
+  word-break: break-all;
+}
+
+.rule-meta {
+  display: flex;
+  gap: 0.25rem;
+}
+
+.rule-badge {
+  font-size: 0.625rem;
+  padding: 0.0625rem 0.375rem;
+  border-radius: var(--radius-sm);
+  background: var(--color-primary-50);
+  color: var(--color-primary-700);
+  text-transform: lowercase;
+  font-weight: 500;
+}
+
+.rule-badge.subtle {
+  background: var(--color-gray-100);
+  color: var(--color-gray-600);
+}
+
+.rule-explanation {
+  flex-basis: 100%;
+  margin: 0;
+  font-size: 0.75rem;
+  color: var(--color-gray-500);
+  line-height: 1.3;
+}
+
+.terminal-rule-form {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.terminal-rule-form .form-input {
+  flex: 1;
+  min-width: 200px;
+}
+
+.rule-preview {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.375rem;
+  margin: 0.375rem 0 0;
+  font-size: 0.75rem;
+  color: var(--color-gray-500);
+  line-height: 1.35;
+}
+
+.rule-preview .pi {
+  color: var(--color-primary-500);
+}
+
+.rule-preview-sentence {
+  color: var(--color-gray-700);
+}
 </style>
diff --git a/src/views/SystemFilesView.vue b/src/views/SystemFilesView.vue
new file mode 100644
index 0000000..a53c8f3
--- /dev/null
+++ b/src/views/SystemFilesView.vue
@@ -0,0 +1,41 @@
+<template>
+  <div class="system-files-view">
+    <div class="view-header">
+      <h1>System Files</h1>
+    </div>
+    <FileBrowser v-if="initialPathReady" :api="api" :enable-mount="false" :initial-path="initialPath" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import FileBrowser from "@/components/FileBrowser.vue";
+import { createSystemFileApi, apiClient } from "@/services/api";
+
+const api = createSystemFileApi();
+const initialPath = ref("/");
+const initialPathReady = ref(false);
+
+onMounted(async () => {
+  try {
+    const response = await apiClient.get<{ home_path?: string }>("/system/files-info?usage=false");
+    if (response.data?.home_path) {
+      initialPath.value = response.data.home_path;
+    }
+  } catch {
+    // Fall back to root if the info endpoint is unavailable.
+  } finally {
+    initialPathReady.value = true;
+  }
+});
+</script>
+
+<style scoped>
+.system-files-view {
+  padding: 1.5rem;
+}
+.view-header h1 {
+  margin: 0 0 1rem;
+  font-size: 1.5rem;
+}
+</style>
diff --git a/src/views/SystemTerminalView.vue b/src/views/SystemTerminalView.vue
new file mode 100644
index 0000000..773bcee
--- /dev/null
+++ b/src/views/SystemTerminalView.vue
@@ -0,0 +1,238 @@
+<template>
+  <div class="system-terminal-view">
+    <div class="view-header">
+      <div class="header-content">
+        <h1>System Terminal</h1>
+        <p class="subtitle">Host shell governed by global terminal protection settings</p>
+      </div>
+      <div class="header-actions">
+        <button class="btn btn-secondary" :disabled="connected || connecting" @click="connect">
+          <i :class="connecting ? 'pi pi-spin pi-spinner' : 'pi pi-desktop'" />
+          Connect
+        </button>
+        <button class="btn btn-secondary" :disabled="!connected" @click="disconnect">
+          <i class="pi pi-times" />
+          Disconnect
+        </button>
+      </div>
+    </div>
+
+    <div class="terminal-card">
+      <div ref="terminalRef" class="terminal-element" />
+      <div v-if="!connected" class="terminal-overlay">
+        <div class="overlay-content">
+          <i :class="connecting ? 'pi pi-spin pi-spinner' : error ? 'pi pi-exclamation-circle' : 'pi pi-desktop'" />
+          <p>{{ error || (connecting ? "Connecting..." : "Click Connect to open system terminal") }}</p>
+        </div>
+      </div>
+    </div>
+
+    <div class="terminal-note">
+      <i class="pi pi-shield" />
+      <span>Command restrictions are configured in Settings → Terminal.</span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref } from "vue";
+import { Terminal } from "@xterm/xterm";
+import { FitAddon } from "@xterm/addon-fit";
+import { WebLinksAddon } from "@xterm/addon-web-links";
+import "@xterm/xterm/css/xterm.css";
+
+const terminalRef = ref<HTMLElement | null>(null);
+const connected = ref(false);
+const connecting = ref(false);
+const error = ref("");
+
+let terminal: Terminal | null = null;
+let fitAddon: FitAddon | null = null;
+let socket: WebSocket | null = null;
+let commandBuffer = "";
+
+const getWebSocketUrl = () => {
+  const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+  const apiUrl = import.meta.env.VITE_API_URL || "";
+  if (apiUrl.startsWith("http")) {
+    const url = new URL(apiUrl);
+    return `${protocol}//${url.host}/api/system/terminal`;
+  }
+  return `${protocol}//${window.location.host}/api/system/terminal`;
+};
+
+const initTerminal = () => {
+  if (!terminalRef.value) return;
+  terminal = new Terminal({
+    cursorBlink: true,
+    convertEol: true,
+    fontSize: 14,
+    fontFamily: '"Fira Code", "Cascadia Code", Menlo, Monaco, "Courier New", monospace',
+    theme: {
+      background: "#111827",
+      foreground: "#e5e7eb",
+      cursor: "#f9fafb",
+      selectionBackground: "#374151",
+    },
+  });
+  fitAddon = new FitAddon();
+  terminal.loadAddon(fitAddon);
+  terminal.loadAddon(new WebLinksAddon());
+  terminal.open(terminalRef.value);
+  fitAddon.fit();
+
+  terminal.onData((data) => {
+    if (!connected.value || !socket || socket.readyState !== WebSocket.OPEN) return;
+    for (const char of data) {
+      if (char === "\r") {
+        terminal?.write("\r\n");
+        socket.send(JSON.stringify({ type: "command", command: commandBuffer }));
+        commandBuffer = "";
+      } else if (char === "\u007f") {
+        if (commandBuffer.length > 0) {
+          commandBuffer = commandBuffer.slice(0, -1);
+          terminal?.write("\b \b");
+        }
+      } else if (char >= " ") {
+        commandBuffer += char;
+        terminal?.write(char);
+      }
+    }
+  });
+};
+
+const connect = () => {
+  if (connected.value || connecting.value) return;
+  connecting.value = true;
+  error.value = "";
+
+  socket = new WebSocket(getWebSocketUrl());
+  socket.onopen = () => {
+    const token = localStorage.getItem("auth_token");
+    if (token) {
+      socket?.send(JSON.stringify({ type: "auth", token }));
+    }
+  };
+  socket.onmessage = (event) => {
+    let data: any;
+    try {
+      data = JSON.parse(event.data);
+    } catch {
+      return;
+    }
+    if (data.type === "auth_success") {
+      connected.value = true;
+      connecting.value = false;
+      terminal?.clear();
+      terminal?.focus();
+      return;
+    }
+    if (data.type === "output") {
+      terminal?.write(data.data || "");
+      return;
+    }
+    if (data.type === "error") {
+      error.value = data.message || "System terminal error";
+      terminal?.write(`\r\n\x1b[31m${error.value}\x1b[0m\r\n`);
+    }
+  };
+  socket.onerror = () => {
+    error.value = "Failed to connect to system terminal";
+    connecting.value = false;
+  };
+  socket.onclose = () => {
+    connected.value = false;
+    connecting.value = false;
+  };
+};
+
+const disconnect = () => {
+  socket?.close();
+  socket = null;
+};
+
+onMounted(() => {
+  initTerminal();
+});
+
+onUnmounted(() => {
+  disconnect();
+  terminal?.dispose();
+});
+</script>
+
+<style scoped>
+.system-terminal-view {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.view-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: white;
+  padding: 1.25rem;
+  border-radius: var(--radius-sm);
+  border: 1px solid #e5e7eb;
+}
+
+.header-content h1 {
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: #1f2937;
+  margin: 0;
+}
+
+.subtitle {
+  font-size: 0.875rem;
+  color: #6b7280;
+  margin: 0.25rem 0 0 0;
+}
+
+.header-actions {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.terminal-card {
+  position: relative;
+  min-height: 560px;
+  background: #111827;
+  border-radius: var(--radius-sm);
+  overflow: hidden;
+  border: 1px solid #1f2937;
+}
+
+.terminal-element {
+  width: 100%;
+  height: 560px;
+  padding: 0.75rem;
+}
+
+.terminal-overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(17, 24, 39, 0.82);
+  color: #e5e7eb;
+}
+
+.overlay-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.terminal-note {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+  color: #6b7280;
+  font-size: 0.875rem;
+}
+</style>
diff --git a/src/views/UsersView.vue b/src/views/UsersView.vue
index ade2c0c..ac4e00b 100644
--- a/src/views/UsersView.vue
+++ b/src/views/UsersView.vue
@@ -82,149 +82,72 @@
     </div>
 
     <!-- Create/Edit Dialog -->
-    <div v-if="showCreateDialog || showEditDialog" class="modal-overlay" @click.self="closeDialogs">
-      <div class="modal-content">
-        <div class="modal-header">
-          <h2>{{ showEditDialog ? "Edit User" : "Create User" }}</h2>
-          <button class="btn btn-icon" @click="closeDialogs">
-            <i class="pi pi-times" />
-          </button>
+    <TabbedFormModal
+      v-if="showCreateDialog || showEditDialog"
+      :title="showEditDialog ? 'Edit User' : 'Create User'"
+      :tabs="userTabs"
+      :active-tab="activeTab"
+      :submitting="saving"
+      :submit-label="showEditDialog ? 'Update' : 'Create'"
+      submitting-label="Saving..."
+      @update:active-tab="activeTab = $event as 'profile' | 'permissions' | 'deployments'"
+      @close="closeDialogs"
+      @submit="showEditDialog ? updateUser() : createUser()"
+    >
+      <template #profile>
+        <div class="form-group">
+          <label>Username</label>
+          <input v-model="formData.username" type="text" required :disabled="showEditDialog" />
         </div>
-        <div class="dialog-tabs">
-          <button
-            class="tab-btn"
-            :class="{ active: activeTab === 'profile' }"
-            type="button"
-            @click="activeTab = 'profile'"
-          >
-            <i class="pi pi-user" />
-            Profile
-          </button>
-          <button
-            class="tab-btn"
-            :class="{ active: activeTab === 'permissions' }"
-            type="button"
-            @click="activeTab = 'permissions'"
-          >
-            <i class="pi pi-shield" />
-            Permissions
-          </button>
-          <button
-            v-if="showEditDialog"
-            class="tab-btn"
-            :class="{ active: activeTab === 'deployments' }"
-            type="button"
-            @click="activeTab = 'deployments'"
-          >
-            <i class="pi pi-box" />
-            Deployments
-            <span v-if="userDeployments.length" class="tab-count">{{ userDeployments.length }}</span>
-          </button>
+        <div class="form-group">
+          <label>Email</label>
+          <input v-model="formData.email" type="email" />
         </div>
-        <form @submit.prevent="showEditDialog ? updateUser() : createUser()">
-          <!-- Profile Tab -->
-          <div v-show="activeTab === 'profile'" class="tab-panel">
-            <div class="form-group">
-              <label>Username</label>
-              <input v-model="formData.username" type="text" required :disabled="showEditDialog" />
-            </div>
-            <div class="form-group">
-              <label>Email</label>
-              <input v-model="formData.email" type="email" />
-            </div>
-            <div v-if="!showEditDialog" class="form-group">
-              <label>Password</label>
-              <input v-model="formData.password" type="password" required />
-            </div>
-            <div class="form-group">
-              <label>Role</label>
-              <select v-model="formData.role" required>
-                <option value="admin">Admin</option>
-                <option value="operator">Operator</option>
-                <option value="viewer">Viewer</option>
-              </select>
-            </div>
-            <div v-if="showEditDialog" class="form-group">
-              <label class="checkbox-label">
-                <input v-model="formData.is_active" type="checkbox" />
-                <span>Active</span>
-              </label>
-            </div>
-          </div>
-
-          <!-- Permissions Tab -->
-          <div v-show="activeTab === 'permissions'" class="tab-panel">
-            <div class="form-group">
-              <label class="checkbox-label">
-                <input v-model="formData.useCustomPermissions" type="checkbox" @change="onCustomPermissionsToggle" />
-                <span>Customize permissions</span>
-              </label>
-              <p v-if="!formData.useCustomPermissions" class="tab-hint">
-                Using <span class="role-perm-badge" :class="formData.role">{{ formData.role }}</span> role defaults.
-                Enable the checkbox above to override.
-              </p>
-            </div>
-            <PermissionPicker v-if="formData.useCustomPermissions" v-model="formData.customPermissions" />
-            <PermissionPicker v-else :model-value="selectedRolePermissions" readonly />
-          </div>
-
-          <!-- Deployments Tab (edit only) -->
-          <div v-if="showEditDialog" v-show="activeTab === 'deployments'" class="tab-panel">
-            <p class="tab-hint">Control which deployments this user can access and at what level.</p>
-            <div class="add-deployment-form">
-              <select v-model="newDeployment.name">
-                <option value="">Select deployment...</option>
-                <option v-for="dep in availableDeployments" :key="dep" :value="dep">{{ dep }}</option>
-              </select>
-              <select v-model="newDeployment.access_level">
-                <option value="read">Read</option>
-                <option value="write">Write</option>
-                <option value="admin">Admin</option>
-              </select>
-              <button
-                type="button"
-                class="btn btn-primary btn-sm"
-                :disabled="!newDeployment.name"
-                @click="addDeploymentAccess"
-              >
-                Add
-              </button>
-            </div>
-            <div v-if="userDeployments.length" class="deployments-list">
-              <div v-for="dep in userDeployments" :key="dep.deployment_name" class="deployment-item">
-                <span class="deployment-name">{{ dep.deployment_name }}</span>
-                <select
-                  :value="dep.access_level"
-                  @change="updateDeploymentAccess(dep.deployment_name, ($event.target as HTMLSelectElement).value)"
-                >
-                  <option value="read">Read</option>
-                  <option value="write">Write</option>
-                  <option value="admin">Admin</option>
-                </select>
-                <button
-                  type="button"
-                  class="btn btn-icon btn-sm btn-danger"
-                  @click="removeDeploymentAccess(dep.deployment_name)"
-                >
-                  <i class="pi pi-times" />
-                </button>
-              </div>
-            </div>
-            <div v-else class="no-deployments">
-              <i class="pi pi-info-circle" />
-              <span>No deployment access assigned</span>
-            </div>
-          </div>
-
-          <div class="modal-actions">
-            <button type="button" class="btn" @click="closeDialogs">Cancel</button>
-            <button type="submit" class="btn btn-primary" :disabled="saving">
-              {{ saving ? "Saving..." : showEditDialog ? "Update" : "Create" }}
-            </button>
-          </div>
-        </form>
-      </div>
-    </div>
+        <div v-if="!showEditDialog" class="form-group">
+          <label>Password</label>
+          <input v-model="formData.password" type="password" required />
+        </div>
+        <div class="form-group">
+          <label>Role</label>
+          <select v-model="formData.role" required>
+            <option value="admin">Admin</option>
+            <option value="operator">Operator</option>
+            <option value="viewer">Viewer</option>
+          </select>
+        </div>
+        <div v-if="showEditDialog" class="form-group">
+          <label class="checkbox-label">
+            <input v-model="formData.is_active" type="checkbox" />
+            <span>Active</span>
+          </label>
+        </div>
+      </template>
+
+      <template #permissions>
+        <div class="form-group">
+          <label class="checkbox-label">
+            <input v-model="formData.useCustomPermissions" type="checkbox" @change="onCustomPermissionsToggle" />
+            <span>Customize permissions</span>
+          </label>
+          <p v-if="!formData.useCustomPermissions" class="tab-hint">
+            Using <span class="role-perm-badge" :class="formData.role">{{ formData.role }}</span> role defaults. Enable
+            the checkbox above to override.
+          </p>
+        </div>
+        <PermissionPicker v-if="formData.useCustomPermissions" v-model="formData.customPermissions" />
+        <PermissionPicker v-else :model-value="selectedRolePermissions" readonly />
+      </template>
+
+      <template #deployments>
+        <DeploymentAccessField
+          v-model="userDeploymentsMap"
+          :available="allDeployments"
+          hint="Control which deployments this user can access and at what level. Changes take effect when you save."
+          empty-hint="No deployment access assigned"
+          default-level="read"
+        />
+      </template>
+    </TabbedFormModal>
 
     <!-- Delete Confirmation -->
     <div v-if="showDeleteDialog" class="modal-overlay" @click.self="closeDialogs">
@@ -248,13 +171,18 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, computed } from "vue";
-import type { User, UserRole, UserDeploymentAccess, Permission } from "@/types";
+import { ref, onMounted, computed, watch } from "vue";
+import type { User, UserRole, UserDeploymentAccess, Permission, DeploymentAccessMap } from "@/types";
 import { useUsersStore } from "@/stores/users";
 import { useAuthStore } from "@/stores/auth";
 import { deploymentsApi } from "@/services/api";
 import PermissionPicker from "@/components/PermissionPicker.vue";
+import TabbedFormModal, { type TabbedFormModalTab } from "@/components/TabbedFormModal.vue";
+import DeploymentAccessField from "@/components/DeploymentAccessField.vue";
 import { getRolePermissions } from "@/utils/permissions";
+import { useNotificationsStore } from "@/stores/notifications";
+
+const notifications = useNotificationsStore();
 
 const usersStore = useUsersStore();
 const authStore = useAuthStore();
@@ -284,8 +212,9 @@ const formData = ref({
 });
 
 const userDeployments = ref<UserDeploymentAccess[]>([]);
+const userDeploymentsMap = ref<DeploymentAccessMap>({});
+const userDeploymentsBaseline = ref<DeploymentAccessMap>({});
 const allDeployments = ref<string[]>([]);
-const newDeployment = ref({ name: "", access_level: "read" });
 
 const selectedRolePermissions = computed(() => getRolePermissions(formData.value.role));
 
@@ -295,9 +224,20 @@ const onCustomPermissionsToggle = () => {
   }
 };
 
-const availableDeployments = computed(() => {
-  const assigned = new Set(userDeployments.value.map((d) => d.deployment_name));
-  return allDeployments.value.filter((d) => !assigned.has(d));
+const userTabs = computed<TabbedFormModalTab[]>(() => [
+  { id: "profile", label: "Profile", icon: "pi pi-user" },
+  { id: "permissions", label: "Permissions", icon: "pi pi-shield" },
+  {
+    id: "deployments",
+    label: "Deployments",
+    icon: "pi pi-box",
+    visible: showEditDialog.value,
+    count: Object.keys(userDeploymentsMap.value).length || undefined,
+  },
+]);
+
+watch([showCreateDialog, showEditDialog], ([create, edit]) => {
+  if (create || edit) activeTab.value = "profile";
 });
 
 const loadUsers = async () => {
@@ -330,6 +270,12 @@ const editUser = async (user: User) => {
   } catch {
     userDeployments.value = [];
   }
+  const initial: DeploymentAccessMap = {};
+  for (const dep of userDeployments.value) {
+    initial[dep.deployment_name] = dep.access_level as DeploymentAccessMap[string];
+  }
+  userDeploymentsMap.value = { ...initial };
+  userDeploymentsBaseline.value = { ...initial };
   showEditDialog.value = true;
 };
 
@@ -348,9 +294,10 @@ const createUser = async () => {
       role: formData.value.role,
       permissions: formData.value.useCustomPermissions ? formData.value.customPermissions : undefined,
     });
+    notifications.success("User Created", `${formData.value.username} added.`);
     closeDialogs();
   } catch (e: any) {
-    alert(e.message);
+    notifications.error("Create Failed", e.message || "Could not create user");
   } finally {
     saving.value = false;
   }
@@ -373,9 +320,11 @@ const updateUser = async () => {
       is_active: formData.value.is_active,
       permissions,
     });
+    await applyDeploymentChanges(selectedUser.value.id);
+    notifications.success("User Updated", `${selectedUser.value.username} saved.`);
     closeDialogs();
   } catch (e: any) {
-    alert(e.message);
+    notifications.error("Update Failed", e.message || "Could not update user");
   } finally {
     saving.value = false;
   }
@@ -385,54 +334,32 @@ const deleteUser = async () => {
   if (!selectedUser.value) return;
   saving.value = true;
   try {
+    const name = selectedUser.value.username;
     await usersStore.deleteUser(selectedUser.value.id);
+    notifications.success("User Deleted", `${name} removed.`);
     closeDialogs();
   } catch (e: any) {
-    alert(e.message);
+    notifications.error("Delete Failed", e.message || "Could not delete user");
   } finally {
     saving.value = false;
   }
 };
 
-const addDeploymentAccess = async () => {
-  if (!selectedUser.value || !newDeployment.value.name) return;
-  try {
-    await usersStore.assignDeployment(
-      selectedUser.value.id,
-      newDeployment.value.name,
-      newDeployment.value.access_level,
-    );
-    userDeployments.value.push({
-      deployment_name: newDeployment.value.name,
-      access_level: newDeployment.value.access_level as "read" | "write" | "admin",
-      created_at: new Date().toISOString(),
-    });
-    newDeployment.value = { name: "", access_level: "read" };
-  } catch (e: any) {
-    alert(e.message);
-  }
-};
-
-const updateDeploymentAccess = async (deploymentName: string, accessLevel: string) => {
-  if (!selectedUser.value) return;
-  try {
-    await usersStore.updateDeploymentAccess(selectedUser.value.id, deploymentName, accessLevel);
-    const dep = userDeployments.value.find((d) => d.deployment_name === deploymentName);
-    if (dep) {
-      dep.access_level = accessLevel as "read" | "write" | "admin";
+const applyDeploymentChanges = async (userId: number) => {
+  const next = userDeploymentsMap.value;
+  const baseline = userDeploymentsBaseline.value;
+  for (const name of Object.keys(baseline)) {
+    if (!(name in next)) {
+      await usersStore.removeDeploymentAccess(userId, name);
     }
-  } catch (e: any) {
-    alert(e.message);
   }
-};
-
-const removeDeploymentAccess = async (deploymentName: string) => {
-  if (!selectedUser.value) return;
-  try {
-    await usersStore.removeDeploymentAccess(selectedUser.value.id, deploymentName);
-    userDeployments.value = userDeployments.value.filter((d) => d.deployment_name !== deploymentName);
-  } catch (e: any) {
-    alert(e.message);
+  for (const [name, level] of Object.entries(next)) {
+    const prior = baseline[name];
+    if (!prior) {
+      await usersStore.assignDeployment(userId, name, level);
+    } else if (prior !== level) {
+      await usersStore.updateDeploymentAccess(userId, name, level);
+    }
   }
 };
 
@@ -451,7 +378,8 @@ const closeDialogs = () => {
     customPermissions: [],
   };
   userDeployments.value = [];
-  newDeployment.value = { name: "", access_level: "read" };
+  userDeploymentsMap.value = {};
+  userDeploymentsBaseline.value = {};
   activeTab.value = "profile";
 };
 
@@ -496,7 +424,7 @@ onMounted(() => {
 }
 
 .error-state {
-  color: var(--danger);
+  color: var(--color-danger-600, #dc2626);
 }
 
 .users-table-container {
@@ -546,18 +474,18 @@ onMounted(() => {
 }
 
 .role-badge.admin {
-  background: rgba(var(--danger-rgb), 0.1);
-  color: var(--danger);
+  background: var(--color-danger-50, #fef2f2);
+  color: var(--color-danger-700, #b91c1c);
 }
 
 .role-badge.operator {
-  background: rgba(var(--warning-rgb), 0.1);
-  color: var(--warning);
+  background: var(--color-warning-50, #fffbeb);
+  color: var(--color-warning-700, #b45309);
 }
 
 .role-badge.viewer {
-  background: rgba(var(--info-rgb), 0.1);
-  color: var(--info);
+  background: var(--color-info-50, #eff6ff);
+  color: var(--color-info-700, #1d4ed8);
 }
 
 .status-badge {
@@ -569,12 +497,12 @@ onMounted(() => {
 }
 
 .status-badge.active {
-  background: rgba(var(--success-rgb), 0.1);
+  background: var(--color-success-50, #f0fdf4);
   color: var(--success);
 }
 
 .status-badge.inactive {
-  background: rgba(var(--text-secondary-rgb), 0.1);
+  background: var(--color-gray-100, #f3f4f6);
   color: var(--text-secondary);
 }
 
@@ -587,8 +515,8 @@ onMounted(() => {
 }
 
 .perm-indicator.custom {
-  background: rgba(var(--warning-rgb), 0.1);
-  color: var(--warning);
+  background: var(--color-warning-50, #fffbeb);
+  color: var(--color-warning-700, #b45309);
 }
 
 .perm-indicator.default {
@@ -761,18 +689,18 @@ onMounted(() => {
 }
 
 .role-perm-badge.admin {
-  background: rgba(var(--danger-rgb), 0.1);
-  color: var(--danger);
+  background: var(--color-danger-50, #fef2f2);
+  color: var(--color-danger-700, #b91c1c);
 }
 
 .role-perm-badge.operator {
-  background: rgba(var(--warning-rgb), 0.1);
-  color: var(--warning);
+  background: var(--color-warning-50, #fffbeb);
+  color: var(--color-warning-700, #b45309);
 }
 
 .role-perm-badge.viewer {
-  background: rgba(var(--info-rgb), 0.1);
-  color: var(--info);
+  background: var(--color-info-50, #eff6ff);
+  color: var(--color-info-700, #1d4ed8);
 }
 
 .modal-actions {
@@ -866,12 +794,12 @@ onMounted(() => {
 }
 
 .btn-danger {
-  background: var(--danger);
+  background: var(--color-danger-500, #ef4444);
   color: white;
 }
 
 .btn-danger:hover {
-  background: var(--danger-dark);
+  background: var(--color-danger-600, #dc2626);
 }
 
 .btn-icon {

From dd5e86e1c5e9860d0187358405a23fede240196a Mon Sep 17 00:00:00 2001
From: nfebe <fenn25.fn@gmail.com>
Date: Mon, 25 May 2026 12:20:51 +0100
Subject: [PATCH 3/4] fix(ui): Resolve lint error and update tab-count tests
 for new tabs

ESLint flagged the ANSI-stripping regex in the container terminal as
no-control-regex; the disable comment is added inline so the intent
stays scoped to that one expression.

Two dead helpers in the file browser (a row-menu closer and a mount
tooltip generator) were left over after the overflow menu refactor;
removed them so unused-vars passes cleanly.

Settings now ships a System Terminal protection tab and the
deployment detail view now ships a Settings (protected mode) tab, so
the tab-count assertions are bumped from six to seven and from nine
to ten, with coverage for each new tab label.
---
 src/components/ContainerTerminal.vue   |  1 +
 src/components/FileBrowser.vue         | 13 +------------
 src/views/DeploymentDetailView.test.ts | 11 +++++++++--
 src/views/SettingsView.test.ts         |  9 +++++++--
 4 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/src/components/ContainerTerminal.vue b/src/components/ContainerTerminal.vue
index 3c6ab8d..8c59595 100644
--- a/src/components/ContainerTerminal.vue
+++ b/src/components/ContainerTerminal.vue
@@ -138,6 +138,7 @@ const connect = () => {
         // Not JSON, might be an error message before auth
       }
       // If we get data before auth_success, show as error
+      // eslint-disable-next-line no-control-regex
       const text = data.replace(/\x1b\[[0-9;]*m/g, "").trim();
       if (text) {
         explicitCloseMessage = text;
diff --git a/src/components/FileBrowser.vue b/src/components/FileBrowser.vue
index 07f07f1..ff99a2d 100644
--- a/src/components/FileBrowser.vue
+++ b/src/components/FileBrowser.vue
@@ -386,7 +386,7 @@
             </div>
             <div class="permissions-grid">
               <div class="permissions-grid-header">
-                <span></span>
+                <span />
                 <span>Read</span>
                 <span>Write</span>
                 <span>Execute</span>
@@ -551,10 +551,6 @@ const toggleRowMenu = (path: string) => {
   rowMenuOpenFor.value = rowMenuOpenFor.value === path ? null : path;
 };
 
-const closeRowMenu = () => {
-  rowMenuOpenFor.value = null;
-};
-
 const onMenuAction = (action: "mount" | "permissions" | "delete", file: FileInfo) => {
   rowMenuOpenFor.value = null;
   if (action === "mount") openMountModal(file);
@@ -634,13 +630,6 @@ const fileMounts = (file: FileInfo): ComposeMount[] => {
   return mountsBySource.value.get(toComposeRelativePath(file.path)) || [];
 };
 
-const mountTooltip = (file: FileInfo): string => {
-  const matches = fileMounts(file);
-  if (matches.length === 0) return "Add compose mount";
-  const services = Array.from(new Set(matches.map((m) => m.service))).join(", ");
-  return `Mounted in ${services}`;
-};
-
 const pathParts = computed(() => {
   return currentPath.value.split("/").filter((p) => p.length > 0);
 });
diff --git a/src/views/DeploymentDetailView.test.ts b/src/views/DeploymentDetailView.test.ts
index 41eb02b..d8e0464 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 () => {
@@ -214,6 +214,13 @@ describe("DeploymentDetailView", () => {
       expect(wrapper.text()).toContain("Security");
     });
 
+    it("has Settings tab", async () => {
+      const wrapper = mountView();
+      await flushPromises();
+      const tabs = wrapper.findAll(".tab-btn");
+      expect(tabs.some((t) => t.text().trim() === "Settings")).toBe(true);
+    });
+
     it("has Configuration tab", async () => {
       const wrapper = mountView();
       await flushPromises();
diff --git a/src/views/SettingsView.test.ts b/src/views/SettingsView.test.ts
index f07585e..469b995 100644
--- a/src/views/SettingsView.test.ts
+++ b/src/views/SettingsView.test.ts
@@ -97,10 +97,10 @@ describe("SettingsView", () => {
   });
 
   describe("Tab navigation", () => {
-    it("displays all six tabs", () => {
+    it("displays all seven tabs", () => {
       const wrapper = mountView();
       const tabs = wrapper.findAll(".tab");
-      expect(tabs.length).toBe(6);
+      expect(tabs.length).toBe(7);
     });
 
     it("has General tab", () => {
@@ -128,6 +128,11 @@ describe("SettingsView", () => {
       expect(wrapper.text()).toContain("Credentials");
     });
 
+    it("has Terminal tab", () => {
+      const wrapper = mountView();
+      expect(wrapper.text()).toContain("Terminal");
+    });
+
     it("General tab is active by default", () => {
       const wrapper = mountView();
       const activeTab = wrapper.find(".tab.active");

From ff48be52aa0f48830499b119b6eb33d270eea032 Mon Sep 17 00:00:00 2001
From: nfebe <fenn25.fn@gmail.com>
Date: Mon, 25 May 2026 12:23:37 +0100
Subject: [PATCH 4/4] test(ui): Sync tab-structure assertions with new Terminal
 and Settings tabs

The deep-equal assertions in the tab-definitions specs were not
updated when the new tabs were introduced, so they still listed nine
and six tabs respectively while the views render ten and seven.
Adding the missing entries (Terminal in settings, Settings in the
deployment detail view) brings the specs back in sync.
---
 src/views/DeploymentDetailView.test.ts | 1 +
 src/views/SettingsView.test.ts         | 1 +
 2 files changed, 2 insertions(+)

diff --git a/src/views/DeploymentDetailView.test.ts b/src/views/DeploymentDetailView.test.ts
index d8e0464..78f4c26 100644
--- a/src/views/DeploymentDetailView.test.ts
+++ b/src/views/DeploymentDetailView.test.ts
@@ -258,6 +258,7 @@ describe("DeploymentDetailView", () => {
         { id: "actions", label: "Quick Actions", icon: "pi pi-bolt" },
         { id: "backups", label: "Backups", icon: "pi pi-history" },
         { id: "security", label: "Security", icon: "pi pi-shield" },
+        { id: "settings", label: "Settings", icon: "pi pi-sliders-h" },
         { id: "config", label: "Configuration", icon: "pi pi-cog" },
       ]);
     });
diff --git a/src/views/SettingsView.test.ts b/src/views/SettingsView.test.ts
index 469b995..a250c9d 100644
--- a/src/views/SettingsView.test.ts
+++ b/src/views/SettingsView.test.ts
@@ -378,6 +378,7 @@ describe("SettingsView", () => {
         { id: "domain", label: "Domain", icon: "pi pi-globe" },
         { id: "infrastructure", label: "Infrastructure", icon: "pi pi-server" },
         { id: "security", label: "Security & Monitoring", icon: "pi pi-shield" },
+        { id: "terminal", label: "Terminal", icon: "pi pi-desktop" },
         { id: "healthchecks", label: "Health Checks", icon: "pi pi-heart" },
         { id: "credentials", label: "Credentials", icon: "pi pi-key" },
       ]);