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..8c59595 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,27 @@ 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
+      // eslint-disable-next-line no-control-regex
+      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 +158,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..ff99a2d 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>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,41 @@ 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 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 +588,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];
@@ -447,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);
 });
@@ -471,11 +647,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 +666,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 +715,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 +729,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 +751,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 +764,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 +887,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 +1002,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 +1023,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 +1055,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 +1070,21 @@ watch(currentPath, () => {
   fetchFiles();
 });
 
+watch(hideSystemFolders, () => {
+  refreshFiles();
+});
+
 watch(showHiddenFiles, () => {
   fetchFiles();
 });
 
 onMounted(() => {
   refreshFiles();
+  document.addEventListener("click", onDocumentClick);
+});
+
+onBeforeUnmount(() => {
+  document.removeEventListener("click", onDocumentClick);
 });
 </script>
 
@@ -928,6 +1206,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 +1365,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 +1518,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.test.ts b/src/views/DeploymentDetailView.test.ts
index 41eb02b..78f4c26 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();
@@ -251,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/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.test.ts b/src/views/SettingsView.test.ts
index f07585e..a250c9d 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");
@@ -373,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" },
       ]);
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 {
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,
+      },
+    },
+  },
+});