diff --git a/playwright.global-setup.mjs b/playwright.global-setup.mjs
index b4e14800..2db2bdbc 100644
--- a/playwright.global-setup.mjs
+++ b/playwright.global-setup.mjs
@@ -12,8 +12,6 @@ const runtimeNamespace = String(process.env.PLAYWRIGHT_ARTIFACT_NAMESPACE || `po
   .trim()
   .replace(/[^a-zA-Z0-9._-]+/g, "-");
 const pidFile = path.resolve(process.cwd(), "output/playwright", `dev-server-${runtimeNamespace}.json`);
-const posViewsDirectory = path.resolve(process.cwd(), "src/views/dashboards/departmentDashboard/modules/Pos");
-const shopComponentsDirectory = path.resolve(process.cwd(), "src/components/shop");
 const serverOutputLimit = 80;
 
 async function getListeningProcessOnWindows(port) {
@@ -243,38 +241,25 @@ async function waitForServerReady(url, serverProcess, stdoutLines, stderrLines,
 }
 
 async function buildWarmupTargets() {
-  const [posViewFiles, shopComponentFiles] = await Promise.all([
-    fs.readdir(posViewsDirectory),
-    fs.readdir(shopComponentsDirectory),
-  ]);
-
   return [
     { pathname: "/admin/12/modules/pos?step=1", expectedContentType: "text/html" },
     { pathname: "/admin/12/modules/pos/orders/54518", expectedContentType: "text/html" },
     { pathname: "/@vite/client", expectedContentType: "javascript" },
     { pathname: "/src/main.js", expectedContentType: "javascript" },
     { pathname: "/src/router.js", expectedContentType: "javascript" },
-    ...posViewFiles
-      .filter((fileName) => fileName.endsWith(".vue"))
-      .map((fileName) => ({
-        pathname: `/src/views/dashboards/departmentDashboard/modules/Pos/${fileName}`,
-        expectedContentType: "javascript",
-      })),
-    ...shopComponentFiles
-      .filter((fileName) => fileName.endsWith(".vue"))
-      .map((fileName) => ({
-        pathname: `/src/components/shop/${fileName}`,
-        expectedContentType: "javascript",
-      })),
   ];
 }
 
 async function warmUpAsset(url, expectedContentType, timeoutMs = 120_000) {
   const deadline = Date.now() + timeoutMs;
+  const perRequestTimeoutMs = 10_000;
 
   while (Date.now() < deadline) {
     try {
-      const response = await fetch(url, { redirect: "manual" });
+      const response = await fetch(url, {
+        redirect: "manual",
+        signal: AbortSignal.timeout(perRequestTimeoutMs),
+      });
       const contentType = response.headers.get("content-type") || "";
 
       if (response.ok && contentType.toLowerCase().includes(expectedContentType)) {
@@ -318,7 +303,7 @@ export default async function globalSetup() {
 
   const serverProcess =
     process.platform === "win32"
-      ? spawn("cmd.exe", ["/d", "/s", "/c", `npm.cmd run dev -- --host ${devHost} --port ${devPort} --strictPort`], {
+      ? spawn("cmd.exe", ["/d", "/s", "/c", `npm.cmd run dev -- --force --host ${devHost} --port ${devPort} --strictPort`], {
           cwd: process.cwd(),
           detached: true,
           env: {
@@ -328,7 +313,7 @@ export default async function globalSetup() {
           stdio: ["ignore", "pipe", "pipe"],
           windowsHide: true,
         })
-      : spawn("npm", ["run", "dev", "--", "--host", devHost, "--port", String(devPort), "--strictPort"], {
+      : spawn("npm", ["run", "dev", "--", "--force", "--host", devHost, "--port", String(devPort), "--strictPort"], {
           cwd: process.cwd(),
           detached: true,
           env: {
@@ -341,6 +326,7 @@ export default async function globalSetup() {
   const stderrLines = [];
   const stdoutReader = captureProcessOutput(serverProcess.stdout, stdoutLines);
   const stderrReader = captureProcessOutput(serverProcess.stderr, stderrLines);
+  serverProcess.unref();
 
   await fs.writeFile(pidFile, JSON.stringify({ pid: serverProcess.pid, port: devPort }), "utf8");
 
diff --git a/src/components/models/navigation/items/NavigationMenuItemsSuperUser.vue b/src/components/models/navigation/items/NavigationMenuItemsSuperUser.vue
index 5ece4377..37b2fc9c 100644
--- a/src/components/models/navigation/items/NavigationMenuItemsSuperUser.vue
+++ b/src/components/models/navigation/items/NavigationMenuItemsSuperUser.vue
@@ -283,7 +283,6 @@ const items = computed<NavigationItemProps[]>(() => [
       { label: t('superuser.nav.department_lanes'), to: '/superuser/department/lanes'},
       { label: t('superuser.nav.department_gates'), to: '/superuser/department/gates'},
       { label: t('superuser.nav.department_relays'), to: '/superuser/department/relays'},
-      { label: 'Edge Gateways', to: '/superuser/gateways'},
       { label: t('superuser.nav.scanners'), to: '/superuser/scanners' },
       { label: t('superuser.nav.selfserve'), to: '/superuser/selfserve' },
     ]},
@@ -307,6 +306,7 @@ const items = computed<NavigationItemProps[]>(() => [
       { label: firstToUpperCase(SessionUser.superUser.modules.licenseplaterecognizer.meta.labels.multiple), to: '/superuser/configuration/licenseplaterecognizer'},
       { label: firstToUpperCase(SessionUser.superUser.modules.virkdata.meta.labels.multiple), to: '/superuser/configuration/virkdata'},
       { label: firstToUpperCase(SessionUser.superUser.modules.shelly.meta.labels.multiple), to: '/superuser/configuration/shelly'},
+      { label: firstToUpperCase(SessionUser.superUser.modules.edgegateway.meta.labels.multiple), to: '/superuser/configuration/edgegateway'},
       { label: firstToUpperCase(SessionUser.superUser.modules.selfserve.meta.labels.multiple), to: '/superuser/configuration/selfserve'},
       { label: firstToUpperCase(SessionUser.superUser.modules.bird.meta.labels.multiple), to: '/superuser/configuration/bird'},
   ]},
diff --git a/src/features/edgeGateways/EdgeGatewayInventoryPage.vue b/src/features/edgeGateways/EdgeGatewayInventoryPage.vue
index 29629dc6..c37e332b 100644
--- a/src/features/edgeGateways/EdgeGatewayInventoryPage.vue
+++ b/src/features/edgeGateways/EdgeGatewayInventoryPage.vue
@@ -1,4 +1,6 @@
 <script setup>
+import { computed } from "vue";
+
 const props = defineProps({
   gateway: {
     type: Object,
@@ -22,7 +24,7 @@ const emit = defineEmits([
   "update-binding",
 ]);
 
-const inventoryRows = props.gateway?.inventory || [];
+const inventoryRows = computed(() => props.gateway?.inventory || []);
 </script>
 
 <template>
diff --git a/src/features/edgeGateways/EdgeGatewayLogsPage.vue b/src/features/edgeGateways/EdgeGatewayLogsPage.vue
new file mode 100644
index 00000000..ecc81648
--- /dev/null
+++ b/src/features/edgeGateways/EdgeGatewayLogsPage.vue
@@ -0,0 +1,161 @@
+<script setup>
+import { computed, ref } from "vue";
+
+const props = defineProps({
+  timeline: {
+    type: Array,
+    default: () => [],
+  },
+  shellSessions: {
+    type: Array,
+    default: () => [],
+  },
+  streamStatus: {
+    type: String,
+    default: "idle",
+  },
+  streamError: {
+    type: String,
+    default: "",
+  },
+});
+
+const levelFilter = ref("ALL");
+const typeFilter = ref("ALL");
+
+const filteredTimeline = computed(() =>
+  props.timeline.filter((entry) => {
+    if (levelFilter.value !== "ALL" && String(entry.level || "").toUpperCase() !== levelFilter.value) {
+      return false;
+    }
+    if (typeFilter.value !== "ALL" && String(entry.type || "").toLowerCase() !== typeFilter.value.toLowerCase()) {
+      return false;
+    }
+    return true;
+  })
+);
+</script>
+
+<template>
+  <section class="edge-gateway-logs" data-testid="gateway-logs-page">
+    <article class="edge-gateway-logs__panel">
+      <div class="edge-gateway-logs__toolbar">
+        <div>
+          <p class="edge-gateway-logs__eyebrow">Unified feed</p>
+          <h3>Gateway logs</h3>
+          <p>{{ streamError || `Broker stream state: ${streamStatus}` }}</p>
+        </div>
+        <div class="edge-gateway-logs__filters">
+          <div class="select">
+            <select v-model="typeFilter" data-testid="gateway-logs-type-filter">
+              <option value="ALL">All types</option>
+              <option value="audit">Audit</option>
+              <option value="log">Agent logs</option>
+              <option value="operation_event">Task events</option>
+            </select>
+          </div>
+          <div class="select">
+            <select v-model="levelFilter" data-testid="gateway-logs-level-filter">
+              <option value="ALL">All levels</option>
+              <option value="INFO">INFO</option>
+              <option value="WARNING">WARNING</option>
+              <option value="ERROR">ERROR</option>
+            </select>
+          </div>
+        </div>
+      </div>
+    </article>
+
+    <div class="edge-gateway-logs__grid">
+      <article class="edge-gateway-logs__panel">
+        <p class="edge-gateway-logs__eyebrow">Timeline</p>
+        <h3>Live and persisted entries</h3>
+        <ul class="edge-gateway-logs__timeline" data-testid="gateway-logs-timeline">
+          <li v-for="entry in filteredTimeline" :key="`${entry.type}-${entry.created_at}-${entry.message}`">
+            <div>
+              <strong>{{ entry.level || "INFO" }}</strong>
+              <small>{{ entry.type || "log" }}</small>
+            </div>
+            <p>{{ entry.message || "No message" }}</p>
+            <small>{{ entry.created_at || "No timestamp" }}</small>
+          </li>
+          <li v-if="!filteredTimeline.length">No log entries match the current filter.</li>
+        </ul>
+      </article>
+
+      <article class="edge-gateway-logs__panel">
+        <p class="edge-gateway-logs__eyebrow">Terminal sessions</p>
+        <h3>Recent shell activity</h3>
+        <ul class="edge-gateway-logs__timeline" data-testid="gateway-shell-sessions">
+          <li v-for="session in shellSessions" :key="session.id || session.connection_id">
+            <div>
+              <strong>{{ session.status || "PENDING" }}</strong>
+              <small>#{{ session.id }}</small>
+            </div>
+            <p>{{ session.reason || session.cwd || "Diagnostic shell session" }}</p>
+            <small>{{ session.opened_at || session.approved_at || "Pending" }}</small>
+          </li>
+          <li v-if="!shellSessions.length">No shell sessions recorded.</li>
+        </ul>
+      </article>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.edge-gateway-logs {
+  display: grid;
+  gap: 1rem;
+}
+
+.edge-gateway-logs__panel {
+  border: 1px solid #e5e7eb;
+  border-radius: 18px;
+  background: #ffffff;
+  padding: 1rem;
+  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.06);
+}
+
+.edge-gateway-logs__toolbar,
+.edge-gateway-logs__filters {
+  display: flex;
+  gap: 0.75rem;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+
+.edge-gateway-logs__eyebrow {
+  margin: 0 0 0.35rem;
+  font-size: 0.78rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: #64748b;
+}
+
+.edge-gateway-logs__grid {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+}
+
+.edge-gateway-logs__timeline {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: grid;
+  gap: 0.75rem;
+}
+
+.edge-gateway-logs__timeline li {
+  padding: 0.9rem;
+  border-radius: 14px;
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
+}
+
+.edge-gateway-logs__timeline li p {
+  margin: 0.35rem 0;
+  color: #334155;
+}
+</style>
diff --git a/src/features/edgeGateways/EdgeGatewayManager.vue b/src/features/edgeGateways/EdgeGatewayManager.vue
index 9a00f995..e947aae9 100644
--- a/src/features/edgeGateways/EdgeGatewayManager.vue
+++ b/src/features/edgeGateways/EdgeGatewayManager.vue
@@ -1,1322 +1,1664 @@
 <script setup>
-import { computed, onMounted, onUnmounted, ref, watch } from "vue";
+import { computed, onMounted, onUnmounted, reactive, ref, watch } from "vue";
 import {
+  EDGE_GATEWAY_OPERATIONS,
   cancelEdgeGatewayOperation,
   createEdgeGatewayInstallToken,
   createEdgeGatewayOperation,
   deleteEdgeGateway,
   getEdgeGateway,
+  getEdgeGatewayInstallTokenStatus,
+  getEdgeGatewayLogs,
+  getEdgeGatewayStatistics,
+  getEdgeGatewayTasks,
   listEdgeGatewayDepartments,
+  listEdgeGatewayOperationEvents,
   listEdgeGateways,
-  peekCachedEdgeGateway,
-  peekCachedEdgeGatewayDepartments,
-  peekCachedEdgeGatewayList,
   rotateEdgeGatewayCredentials,
   saveEdgeGatewayBindings,
   setDepartmentGatewayCutover,
+  unwrapEdgeGatewayMeta,
+  unwrapEdgeGatewayResponse,
   updateEdgeGateway,
 } from "@/services/edgeGateways.js";
 import { normalizeEdgeGatewayError } from "@/features/edgeGateways/edgeGatewayErrors.js";
+import { createGatewayShellClient, createGatewayStreamClient } from "@/features/edgeGateways/edgeGatewayLiveSessions.js";
 import EdgeGatewayOverviewPage from "@/features/edgeGateways/EdgeGatewayOverviewPage.vue";
 import EdgeGatewayInventoryPage from "@/features/edgeGateways/EdgeGatewayInventoryPage.vue";
-import EdgeGatewayOperationsPage from "@/features/edgeGateways/EdgeGatewayOperationsPage.vue";
-import EdgeGatewayManagePage from "@/features/edgeGateways/EdgeGatewayManagePage.vue";
+import EdgeGatewayTasksPage from "@/features/edgeGateways/EdgeGatewayTasksPage.vue";
+import EdgeGatewayLogsPage from "@/features/edgeGateways/EdgeGatewayLogsPage.vue";
+import EdgeGatewayStatisticsPage from "@/features/edgeGateways/EdgeGatewayStatisticsPage.vue";
+import EdgeGatewayTerminalPage from "@/features/edgeGateways/EdgeGatewayTerminalPage.vue";
+import EdgeGatewaySettingsPage from "@/features/edgeGateways/EdgeGatewaySettingsPage.vue";
 
 const props = defineProps({
-  departmentId: { type: Number, default: null },
-  selectedGatewayId: { type: [Number, String], default: null },
-  activeView: { type: String, default: "overview" },
-  routeDriven: { type: Boolean, default: false },
-  allowDestructive: { type: Boolean, default: true },
+  departmentId: {
+    type: Number,
+    default: null,
+  },
+  selectedGatewayId: {
+    type: [Number, String],
+    default: null,
+  },
+  activeView: {
+    type: String,
+    default: "overview",
+  },
+  routeDriven: {
+    type: Boolean,
+    default: false,
+  },
+  allowDestructive: {
+    type: Boolean,
+    default: true,
+  },
 });
 
 const emit = defineEmits(["navigate", "open-gateway-page"]);
 
+const LIVE_STREAM_SCOPES = ["overview", "tasks", "logs", "statistics"];
+const SAFE_VIEWS = ["overview", "tasks", "logs", "statistics", "inventory"];
+const FULL_VIEWS = [...SAFE_VIEWS, "terminal", "settings"];
+
 const gateways = ref([]);
 const departments = ref([]);
 const selectedGateway = ref(null);
-const activeGatewayId = ref(null);
+const operations = ref([]);
+const recentCommands = ref([]);
+const operationSummary = ref({});
+const operationEvents = ref([]);
+const logsTimeline = ref([]);
+const shellSessions = ref([]);
+const statisticsPayload = ref({});
+const selectedOperationId = ref(null);
+const localGatewayId = ref(null);
 const localView = ref("overview");
-const createEmptyFleetUsage = () => ({
-  gateways: {
-    total: 0,
-    departments: 0,
-    online: 0,
-    offline: 0,
-    degraded: 0,
-    drifted: 0,
-    broker_connected: 0,
-  },
-  inventory: {
-    total: 0,
-    online: 0,
-    offline: 0,
-  },
-  bindings: {
-    total: 0,
-    fallback_overrides: 0,
-    cloud_only: 0,
-    local_only: 0,
-  },
-  operations: {
-    active: 0,
-    pending: 0,
-    in_progress: 0,
-    backlog: 0,
-  },
-  commands: {
-    backlog: 0,
-  },
-  system: {
-    latency_ms_avg: null,
-    cpu_usage_pct_avg: null,
-    memory_usage_pct_avg: null,
-    disk_usage_pct_avg: null,
-  },
-});
-const installerDepartmentId = ref("");
-const installerLabel = ref("");
-const installerCommand = ref("");
-const installerCopyState = ref("idle");
-const installerClaimPollToken = ref(0);
-const flashMessage = ref("");
-const errorState = ref(null);
-const unavailableGatewayId = ref(null);
 const fleetQuery = ref("");
 const fleetFilter = ref("ALL");
-const fleetUsage = ref(createEmptyFleetUsage());
-const rotateBundle = ref(null);
-const editableBindings = ref([]);
-const loading = ref({
-  init: false,
+const installerCommand = ref("");
+const installerCopyState = ref("idle");
+const installerDiagnosticsCopyState = ref("idle");
+const flash = ref(null);
+const errorState = ref(null);
+const unavailableGatewayId = ref(null);
+const bindingDrafts = ref([]);
+const credentialBundle = ref(null);
+const transportMode = ref("gateway");
+const rotateConfirmation = ref("");
+const deleteConfirmation = ref("");
+const updateTargetVersion = ref("");
+const terminalCommand = ref("");
+const terminalTranscript = ref("");
+
+const createDefaultInstallerSession = () => ({
+  claim_token_id: null,
+  status: "PENDING",
+  step: "PENDING",
+  message: "No install has been started.",
+  started_at: null,
+  updated_at: null,
+  terminal: false,
+  gateway_id: null,
+  last_error: null,
+  diagnostics: [],
+  events: [],
+});
+
+const installerSession = ref(createDefaultInstallerSession());
+const installerBaseline = ref(new Map());
+const installerLabel = ref("");
+const fleetUsage = ref({
+  gateways: { total: 0, online: 0, offline: 0, drifted: 0, departments: 0 },
+  inventory: { total: 0, online: 0, offline: 0 },
+  bindings: { total: 0, fallback_overrides: 0, cloud_only: 0, local_only: 0 },
+  operations: { active: 0, pending: 0, in_progress: 0, backlog: 0 },
+  commands: { backlog: 0 },
+  system: { latency_ms_avg: null, cpu_usage_pct_avg: null, memory_usage_pct_avg: null, disk_usage_pct_avg: null },
+});
+
+const installerForm = reactive({
+  departmentId: "",
+  label: "",
+});
+
+const metadataForm = reactive({
+  label: "",
+  is_primary: false,
+});
+
+const loading = reactive({
+  departments: false,
+  fleet: false,
   detail: false,
+  tasks: false,
+  logs: false,
+  statistics: false,
   installer: false,
-  discovery: false,
+  operation: false,
   bindings: false,
   metadata: false,
   cutover: false,
   rotate: false,
   delete: false,
-  operation: false,
-  operationCancel: false,
+  cancel: false,
+  terminal: false,
 });
 
-let autoRefreshHandle = null;
-let lastFleetRefreshAt = 0;
+const liveState = reactive({
+  streamStatus: "idle",
+  streamError: "",
+  connectedGatewayId: null,
+  lastMessageAt: null,
+  shellStatus: "idle",
+  shellError: "",
+  shellSession: null,
+});
 
+let refreshHandle = null;
+let installerPollToken = 0;
+let streamClient = null;
+let shellClient = null;
+
+const normalizeId = (value) => (value === null || value === undefined || value === "" ? null : String(value));
+const sleep = (ms) => new Promise((resolve) => window.setTimeout(resolve, ms));
+const normalizeView = (value) => {
+  const requestedView = String(value || "overview");
+  const allowedViews = props.allowDestructive ? FULL_VIEWS : SAFE_VIEWS;
+  return allowedViews.includes(requestedView) ? requestedView : "overview";
+};
+
+const currentGatewayId = computed(() =>
+  props.routeDriven ? normalizeId(props.selectedGatewayId) : normalizeId(localGatewayId.value)
+);
+const currentView = computed(() => normalizeView(props.routeDriven ? props.activeView : localView.value));
+const selectedDepartmentId = computed(() => props.departmentId ?? selectedGateway.value?.department_id ?? null);
+const showLanding = computed(() => !currentGatewayId.value && !selectedGateway.value && !unavailableGatewayId.value);
 const tabs = computed(() =>
   props.allowDestructive
     ? [
         { id: "overview", label: "Overview" },
+        { id: "tasks", label: "Tasks" },
+        { id: "logs", label: "Logs" },
+        { id: "statistics", label: "Statistics" },
+        { id: "terminal", label: "Terminal" },
         { id: "inventory", label: "Inventory" },
-        { id: "operations", label: "Operations" },
-        { id: "manage", label: "Manage" },
+        { id: "settings", label: "Settings" },
       ]
     : [
         { id: "overview", label: "Overview" },
+        { id: "tasks", label: "Tasks" },
+        { id: "logs", label: "Logs" },
+        { id: "statistics", label: "Statistics" },
         { id: "inventory", label: "Inventory" },
-        { id: "operations", label: "Operations" },
       ]
 );
-
-const currentView = computed(() => (props.routeDriven ? props.activeView : localView.value));
-const hasGateway = computed(() => Boolean(selectedGateway.value));
-const showFleetLanding = computed(() => !hasGateway.value && !unavailableGatewayId.value);
-const installerCopyLabel = computed(() =>
-  installerCopyState.value === "copied" ? "Copied" : installerCopyState.value === "error" ? "Retry" : "Copy command"
-);
-const selectedDepartmentId = computed(() => props.departmentId ?? selectedGatewayView.value?.department_id ?? null);
-const errorDetailsText = computed(() => (errorState.value?.details || []).join("\n"));
-
-const unwrap = (response, fallback = null) => response?.data?.data ?? fallback;
-const sleep = (ms) => new Promise((resolve) => window.setTimeout(resolve, ms));
-const normId = (value) => (value === null || value === undefined || value === "" ? null : String(value));
-const normLabel = (value) => String(value || "").trim();
-const tone = (status) => ({ ONLINE: "success", DEGRADED: "warning", OFFLINE: "danger" }[status] || "neutral");
-const statusLabel = (status) => ({ ONLINE: "Online", DEGRADED: "Needs attention", OFFLINE: "Offline" }[status] || "Unknown");
-const discoveryLabel = (status) => ({ READY: "Ready", STALE: "Stale", PENDING: "Pending", FAILED: "Failed" }[status] || "Unknown");
-const transportLabel = (mode) => ({ gateway: "Gateway", cloud: "Cloud" }[mode] || mode || "Unknown");
-const deptName = (id) => departments.value.find((item) => Number(item.id) === Number(id))?.name || `Department ${id}`;
-const metricText = (value, suffix = "") => (Number.isFinite(Number(value)) ? `${Number(value)}${suffix}` : "No data");
-const normalizeFleetUsage = (value) => {
-  const incoming = value && typeof value === "object" ? value : {};
-  return {
-    gateways: {
-      ...createEmptyFleetUsage().gateways,
-      ...(incoming.gateways || {}),
-    },
-    inventory: {
-      ...createEmptyFleetUsage().inventory,
-      ...(incoming.inventory || {}),
-    },
-    bindings: {
-      ...createEmptyFleetUsage().bindings,
-      ...(incoming.bindings || {}),
-    },
-    operations: {
-      ...createEmptyFleetUsage().operations,
-      ...(incoming.operations || {}),
-    },
-    commands: {
-      ...createEmptyFleetUsage().commands,
-      ...(incoming.commands || {}),
-    },
-    system: {
-      ...createEmptyFleetUsage().system,
-      ...(incoming.system || {}),
-    },
-  };
-};
-
-const sumGatewayValue = (rows = [], selector) => rows.reduce((sum, gateway) => sum + Number(selector(gateway) || 0), 0);
-const averageGatewayMetric = (rows = [], metricKey) => {
-  const values = rows
-    .map((gateway) => gateway?.agent_runtime?.system_metrics?.[metricKey] ?? gateway?.metadata?.system_metrics?.[metricKey])
-    .filter((value) => Number.isFinite(Number(value)))
-    .map((value) => Number(value));
-
-  if (!values.length) {
-    return null;
+const pageLoading = computed(() => {
+  if (currentView.value === "tasks") {
+    return loading.tasks;
   }
-
-  return Math.round(values.reduce((sum, value) => sum + value, 0) / values.length);
-};
-
-const buildFleetUsageFromRows = (rows = []) => {
-  const departmentsCovered = new Set(
-    rows
-      .map((gateway) => Number(gateway?.department_id || 0))
-      .filter((departmentId) => Number.isFinite(departmentId) && departmentId > 0)
-  );
-
-  return normalizeFleetUsage({
-    gateways: {
-      total: rows.length,
-      departments: departmentsCovered.size,
-      online: rows.filter((gateway) => gateway?.status === "ONLINE").length,
-      offline: rows.filter((gateway) => gateway?.status === "OFFLINE").length,
-      degraded: rows.filter((gateway) => gateway?.status === "DEGRADED").length,
-      drifted: rows.filter((gateway) => Boolean(gateway?.version_drift?.is_drifted)).length,
-      broker_connected: rows.filter(
-        (gateway) => Boolean(gateway?.channel_status?.broker?.connected ?? gateway?.metadata?.broker_connected)
-      ).length,
-    },
-    inventory: {
-      total: sumGatewayValue(rows, (gateway) => gateway?.inventory_summary?.total ?? gateway?.inventory?.length),
-      online: sumGatewayValue(
-        rows,
-        (gateway) =>
-          gateway?.inventory_summary?.online ??
-          (Array.isArray(gateway?.inventory) ? gateway.inventory.filter((device) => device?.online !== false).length : 0)
-      ),
-      offline: sumGatewayValue(
-        rows,
-        (gateway) =>
-          gateway?.inventory_summary?.offline ??
-          (Array.isArray(gateway?.inventory) ? gateway.inventory.filter((device) => device?.online === false).length : 0)
-      ),
-    },
-    bindings: {
-      total: sumGatewayValue(rows, (gateway) => gateway?.binding_summary?.total ?? gateway?.bindings?.length),
-      fallback_overrides: sumGatewayValue(
-        rows,
-        (gateway) =>
-          gateway?.binding_summary?.fallback_overrides ??
-          (Array.isArray(gateway?.bindings)
-            ? gateway.bindings.filter((binding) => String(binding?.fallback_mode || "PREFER_LOCAL") !== "PREFER_LOCAL").length
-            : 0)
-      ),
-      cloud_only: sumGatewayValue(rows, (gateway) => gateway?.fallback_summary?.cloud_only_relays),
-      local_only: sumGatewayValue(rows, (gateway) => gateway?.fallback_summary?.local_only_relays),
-    },
-    operations: {
-      active: rows.filter((gateway) => Boolean(gateway?.active_operation)).length,
-      pending: sumGatewayValue(rows, (gateway) => gateway?.recent_operations_summary?.pending),
-      in_progress: sumGatewayValue(rows, (gateway) => gateway?.recent_operations_summary?.in_progress),
-      backlog: sumGatewayValue(rows, (gateway) => gateway?.backlog_depth?.operations),
-    },
-    commands: {
-      backlog: sumGatewayValue(rows, (gateway) => gateway?.backlog_depth?.commands),
-    },
-    system: {
-      latency_ms_avg: averageGatewayMetric(rows, "latency_ms"),
-      cpu_usage_pct_avg: averageGatewayMetric(rows, "cpu_usage_pct"),
-      memory_usage_pct_avg: averageGatewayMetric(rows, "memory_usage_pct"),
-      disk_usage_pct_avg: averageGatewayMetric(rows, "disk_usage_pct"),
-    },
-  });
-};
-
-const snapshotGatewayClaimState = (gateway) => ({
-  lastHeartbeatAt: gateway?.last_heartbeat_at || null,
-  status: gateway?.status || null,
-  lastSeenIp: gateway?.last_seen_ip || null,
+  if (currentView.value === "logs") {
+    return loading.logs;
+  }
+  if (currentView.value === "statistics") {
+    return loading.statistics;
+  }
+  if (currentView.value === "terminal") {
+    return loading.terminal && liveState.shellStatus === "connecting";
+  }
+  return loading.detail;
 });
 
-const buildGatewayClaimBaseline = (rows = []) =>
-  new Map(rows.map((gateway) => [String(gateway.id), snapshotGatewayClaimState(gateway)]));
+const formatMetric = (value, suffix = "") => (Number.isFinite(Number(value)) ? `${Number(value)}${suffix}` : "No data");
+const statusLabel = (status) =>
+  ({
+    ONLINE: "Online",
+    DEGRADED: "Needs attention",
+    OFFLINE: "Offline",
+    PENDING: "Pending",
+  }[String(status || "").toUpperCase()] || "Unknown");
+const statusTone = (status) =>
+  ({
+    ONLINE: "is-success",
+    DEGRADED: "is-warning",
+    OFFLINE: "is-danger",
+    PENDING: "is-light",
+  }[String(status || "").toUpperCase()] || "is-light");
+const getDepartmentName = (departmentId) =>
+  departments.value.find((department) => Number(department.id) === Number(departmentId))?.name || `Department ${departmentId}`;
 
-const gatewayClaimStateChanged = (gateway, baseline) => {
-  if (!baseline) {
-    return false;
-  }
-
-  return (
-    String(gateway?.last_heartbeat_at || "") !== String(baseline.lastHeartbeatAt || "") ||
-    String(gateway?.status || "") !== String(baseline.status || "") ||
-    String(gateway?.last_seen_ip || "") !== String(baseline.lastSeenIp || "")
-  );
-};
-
-const sortByMostRecentHeartbeat = (rows = []) =>
-  [...rows].sort(
-    (left, right) => new Date(String(right?.last_heartbeat_at || 0)).getTime() - new Date(String(left?.last_heartbeat_at || 0)).getTime()
-  );
-
-const view = (gateway) => {
+const decorateGateway = (gateway) => {
   if (!gateway) {
     return null;
   }
 
-  const inventory = Array.isArray(gateway.inventory) ? gateway.inventory : [];
-  const bindings = Array.isArray(gateway.bindings) ? gateway.bindings : [];
-  const activeOperation = gateway.active_operation || null;
-
   return {
     ...gateway,
-    inventory,
-    bindings,
-    active_operation: activeOperation,
     displayLabel: gateway.label || gateway.hostname || `Gateway #${gateway.id}`,
-    departmentName: deptName(gateway.department_id),
+    departmentName: getDepartmentName(gateway.department_id),
     statusLabel: statusLabel(gateway.status),
-    statusTone: tone(gateway.status),
-    discoveryStatusLabel: discoveryLabel(gateway.discovery_status),
-    departmentTransportModeLabel: transportLabel(gateway.department_transport_mode),
-    primaryAction:
-      gateway.error_state?.recommended_action ||
-      gateway.transport_health?.recommended_action ||
-      activeOperation?.summary?.label ||
-      "review",
+    statusTone: statusTone(gateway.status),
   };
 };
 
-const selectedGatewayView = computed(() => view(selectedGateway.value));
+const selectedGatewayView = computed(() => decorateGateway(selectedGateway.value));
+const currentOperation = computed(
+  () =>
+    operations.value.find((operation) =>
+      ["PENDING", "IN_PROGRESS", "CANCEL_REQUESTED"].includes(String(operation.status || ""))
+    ) || null
+);
+const filteredGateways = computed(() => {
+  const query = String(fleetQuery.value || "").trim().toLowerCase();
 
-const summaryCards = computed(() => {
-  const rows = gateways.value.map(view).filter(Boolean);
-  return [
-    { key: "ALL", label: "All", count: rows.length },
-    { key: "ONLINE", label: "Online", count: rows.filter((item) => item.status === "ONLINE").length },
-    { key: "OFFLINE", label: "Offline", count: rows.filter((item) => item.status === "OFFLINE").length },
-    {
-      key: "DRIFT",
-      label: "Version drift",
-      count: rows.filter((item) => Boolean(item.version_drift?.is_drifted)).length,
-    },
-  ];
+  return gateways.value
+    .map((gateway) => decorateGateway(gateway))
+    .filter(Boolean)
+    .filter((gateway) => {
+      if (fleetFilter.value === "ONLINE" && gateway.status !== "ONLINE") {
+        return false;
+      }
+      if (fleetFilter.value === "OFFLINE" && gateway.status !== "OFFLINE") {
+        return false;
+      }
+      if (fleetFilter.value === "DRIFT" && !gateway.version_drift?.is_drifted) {
+        return false;
+      }
+
+      if (!query) {
+        return true;
+      }
+
+      return [
+        gateway.displayLabel,
+        gateway.hostname,
+        gateway.departmentName,
+        gateway.status,
+        gateway.active_operation?.type,
+      ]
+        .filter(Boolean)
+        .some((entry) => String(entry).toLowerCase().includes(query));
+    });
 });
-
-const fleetUsageCards = computed(() => [
+const summaryCards = computed(() => [
+  { key: "ALL", label: "All", count: gateways.value.length },
+  { key: "ONLINE", label: "Online", count: gateways.value.filter((gateway) => gateway.status === "ONLINE").length },
+  { key: "OFFLINE", label: "Offline", count: gateways.value.filter((gateway) => gateway.status === "OFFLINE").length },
   {
-    key: "coverage",
-    label: "Fleet coverage",
-    value: metricText(fleetUsage.value.gateways.departments),
-    detail: `${fleetUsage.value.gateways.total} gateways · ${fleetUsage.value.gateways.online} online`,
-  },
-  {
-    key: "devices",
-    label: "Discovered devices",
-    value: metricText(fleetUsage.value.inventory.total),
-    detail: `${fleetUsage.value.inventory.online} online · ${fleetUsage.value.inventory.offline} offline`,
-  },
-  {
-    key: "bindings",
-    label: "Relay bindings",
-    value: metricText(fleetUsage.value.bindings.total),
-    detail: `${fleetUsage.value.bindings.fallback_overrides} overrides · ${fleetUsage.value.bindings.cloud_only} cloud only`,
-  },
-  {
-    key: "operations",
-    label: "Active operations",
-    value: metricText(fleetUsage.value.operations.active),
-    detail: `${fleetUsage.value.operations.backlog} queued · ${fleetUsage.value.operations.pending} pending`,
-  },
-  {
-    key: "commands",
-    label: "Command backlog",
-    value: metricText(fleetUsage.value.commands.backlog),
-    detail: `${fleetUsage.value.gateways.broker_connected}/${fleetUsage.value.gateways.total} broker links active`,
-  },
-  {
-    key: "runtime",
-    label: "Runtime averages",
-    value: metricText(fleetUsage.value.system.latency_ms_avg, " ms"),
-    detail: `CPU ${metricText(fleetUsage.value.system.cpu_usage_pct_avg, "%")} · Memory ${metricText(
-      fleetUsage.value.system.memory_usage_pct_avg,
-      "%"
-    )}`,
+    key: "DRIFT",
+    label: "Version drift",
+    count: gateways.value.filter((gateway) => Boolean(gateway.version_drift?.is_drifted)).length,
   },
 ]);
 
-const filteredGatewayViews = computed(() => {
-  const query = fleetQuery.value.trim().toLowerCase();
-  return gateways.value
-    .map(view)
+const INSTALLER_STATUS_LABELS = {
+  PENDING: "Ready",
+  RUNNING: "Running",
+  CLAIMED: "Claimed",
+  FAILED: "Failed",
+  EXPIRED: "Expired",
+};
+const INSTALLER_STEP_LABELS = {
+  PENDING: "Waiting to start",
+  VERIFY_TOKEN: "Verifying token",
+  INSTALL_PACKAGES: "Installing packages",
+  DOWNLOAD_ARTIFACTS: "Downloading artifacts",
+  WRITE_CONFIG: "Writing config",
+  START_STACK: "Starting stack",
+  WAIT_FOR_CLAIM: "Waiting for claim",
+  CLAIMED: "Claimed",
+  FAILED: "Failed",
+};
+const installerSessionTone = computed(
+  () =>
+    ({
+      PENDING: "is-light",
+      RUNNING: "is-warning",
+      CLAIMED: "is-success",
+      FAILED: "is-danger",
+      EXPIRED: "is-danger",
+    }[String(installerSession.value?.status || "").toUpperCase()] || "is-light")
+);
+const installerSessionStateLabel = computed(
+  () => INSTALLER_STATUS_LABELS[String(installerSession.value?.status || "").toUpperCase()] || "Unknown"
+);
+const installerSessionStepLabel = computed(
+  () => INSTALLER_STEP_LABELS[String(installerSession.value?.step || "").toUpperCase()] || "Waiting to start"
+);
+const installerSessionRecentEvents = computed(() =>
+  Array.isArray(installerSession.value?.events) ? installerSession.value.events.slice(-4).reverse() : []
+);
+const installerSessionDiagnosticsText = computed(() => {
+  const diagnostics = Array.isArray(installerSession.value?.diagnostics) ? installerSession.value.diagnostics : [];
+  return diagnostics
+    .map((entry) => {
+      const name = String(entry?.name || "Diagnostic").trim();
+      const output = String(entry?.output || "").trim();
+      return output ? `${name}\n${output}` : name;
+    })
     .filter(Boolean)
-    .filter((gateway) => {
-      if (fleetFilter.value === "ONLINE" && gateway.status !== "ONLINE") return false;
-      if (fleetFilter.value === "OFFLINE" && gateway.status !== "OFFLINE") return false;
-      if (fleetFilter.value === "DRIFT" && !gateway.version_drift?.is_drifted) return false;
-      if (!query) return true;
-      return [gateway.displayLabel, gateway.departmentName, gateway.hostname, gateway.primaryAction].some((value) =>
-        String(value || "").toLowerCase().includes(query)
-      );
-    });
+    .join("\n\n");
 });
 
-const syncDrafts = (gateway) => {
-  editableBindings.value = (gateway?.bindings || []).map((binding) => ({
-    relay_id: binding.relay_id || "",
-    device_id: binding.device_id || "",
-    local_ip: binding.local_ip || "",
-    channel: Number(binding.channel ?? 0),
-    fallback_mode: binding.fallback_mode || "PREFER_LOCAL",
-  }));
+const setFlash = (message, tone = "success") => {
+  flash.value = { message, tone };
 };
 
-const clearError = () => {
-  errorState.value = null;
+const formatInstallerDate = (value) => {
+  if (!value) {
+    return "No updates yet";
+  }
+  return String(value).replace("T", " ").replace("Z", "");
 };
 
-const scheduleInstallerCopyReset = () => {
-  window.setTimeout(() => {
-    installerCopyState.value = "idle";
-  }, 1800);
+const normalizeInstallerSession = (payload = {}, claimTokenId = null) => ({
+  ...createDefaultInstallerSession(),
+  ...payload,
+  claim_token_id: payload?.claim_token_id ?? claimTokenId ?? null,
+  status: String(payload?.status || "PENDING").toUpperCase(),
+  step: String(payload?.step || payload?.status || "PENDING").toUpperCase(),
+  terminal: Boolean(payload?.terminal),
+  gateway_id: Number(payload?.gateway_id || 0) || null,
+  last_error: payload?.last_error ? String(payload.last_error) : null,
+  diagnostics: Array.isArray(payload?.diagnostics) ? payload.diagnostics : [],
+  events: Array.isArray(payload?.events) ? payload.events : [],
+});
+
+const resetGatewayForms = (gateway) => {
+  metadataForm.label = gateway?.label || gateway?.hostname || "";
+  metadataForm.is_primary = Boolean(gateway?.is_primary);
+  transportMode.value = gateway?.department_transport_mode || "gateway";
+  rotateConfirmation.value = "";
+  deleteConfirmation.value = "";
+  credentialBundle.value = null;
+  bindingDrafts.value = Array.isArray(gateway?.bindings)
+    ? gateway.bindings.map((binding) => ({
+        id: binding.id ?? null,
+        relay_id: binding.relay_id || "",
+        device_id: binding.device_id || "",
+        channel: binding.channel ?? "",
+        fallback_mode: binding.fallback_mode || "PREFER_LOCAL",
+      }))
+    : [];
 };
 
-const copyPlainText = async (value) => {
-  const text = String(value || "");
-  if (!text.trim()) {
-    return false;
+const mergeGatewayIntoFleet = (gateway) => {
+  const index = gateways.value.findIndex((entry) => String(entry.id) === String(gateway.id));
+  if (index === -1) {
+    gateways.value = [gateway, ...gateways.value];
+    return;
   }
+  gateways.value = gateways.value.map((entry, entryIndex) => (entryIndex === index ? { ...entry, ...gateway } : entry));
+};
 
-  if (typeof navigator !== "undefined" && navigator.clipboard?.writeText) {
-    await navigator.clipboard.writeText(text);
-    return true;
+const applyGatewayState = (gateway, { resetForms = false } = {}) => {
+  if (!gateway) {
+    return null;
   }
-
-  if (typeof document === "undefined" || !document.body) {
-    return false;
+  selectedGateway.value = gateway;
+  mergeGatewayIntoFleet(gateway);
+  if (resetForms) {
+    resetGatewayForms(gateway);
   }
+  return gateway;
+};
 
-  const helper = document.createElement("textarea");
-  helper.value = text;
-  helper.setAttribute("readonly", "readonly");
-  helper.style.position = "fixed";
-  helper.style.opacity = "0";
-  helper.style.pointerEvents = "none";
-  document.body.appendChild(helper);
-  helper.focus();
-  helper.select();
-
-  let copied = false;
-  try {
-    copied = document.execCommand("copy");
-  } finally {
-    document.body.removeChild(helper);
+const clearUnavailableIfPresent = (gatewayId) => {
+  if (String(unavailableGatewayId.value || "") === String(gatewayId || "")) {
+    unavailableGatewayId.value = null;
   }
-
-  return copied;
 };
 
 const copyErrorDetails = async () => {
-  if (!errorDetailsText.value) {
+  if (!errorState.value?.details?.length) {
     return;
   }
 
-  const copied = await copyPlainText(errorDetailsText.value);
-  flashMessage.value = copied ? "Copied error details." : "Could not copy error details.";
-};
-
-const fail = (error) => {
-  flashMessage.value = "";
-  errorState.value = normalizeEdgeGatewayError(error);
-};
-
-const mergeGatewaySnapshots = (currentGateway, nextGateway) => {
-  if (!currentGateway) {
-    return { ...(nextGateway || {}) };
-  }
-
-  return {
-    ...currentGateway,
-    ...(nextGateway || {}),
-    metadata: {
-      ...(currentGateway?.metadata || {}),
-      ...(nextGateway?.metadata || {}),
-    },
-    inventory: Array.isArray(nextGateway?.inventory)
-      ? [...nextGateway.inventory]
-      : Array.isArray(currentGateway?.inventory)
-      ? [...currentGateway.inventory]
-      : undefined,
-    bindings: Array.isArray(nextGateway?.bindings)
-      ? [...nextGateway.bindings]
-      : Array.isArray(currentGateway?.bindings)
-      ? [...currentGateway.bindings]
-      : undefined,
-    operations: Array.isArray(nextGateway?.operations)
-      ? [...nextGateway.operations]
-      : Array.isArray(currentGateway?.operations)
-      ? [...currentGateway.operations]
-      : undefined,
-    audit_logs: Array.isArray(nextGateway?.audit_logs)
-      ? [...nextGateway.audit_logs]
-      : Array.isArray(currentGateway?.audit_logs)
-      ? [...currentGateway.audit_logs]
-      : undefined,
-  };
-};
-
-const applyFleetRows = (rows = [], meta = null) => {
-  gateways.value = Array.isArray(rows) ? [...rows] : [];
-  fleetUsage.value = normalizeFleetUsage(meta || buildFleetUsageFromRows(gateways.value));
-  lastFleetRefreshAt = Date.now();
-};
-
-const mergeGateway = (gateway) => {
-  if (!gateway?.id) {
-    return null;
-  }
-
-  const index = gateways.value.findIndex((item) => Number(item.id) === Number(gateway.id));
-  if (index === -1) {
-    gateways.value = [gateway, ...gateways.value];
-  } else {
-    gateways.value = gateways.value.map((item, itemIndex) =>
-      itemIndex === index ? mergeGatewaySnapshots(item, gateway) : item
-    );
-  }
-
-  fleetUsage.value = buildFleetUsageFromRows(gateways.value);
-  return gateways.value.find((item) => Number(item?.id || 0) === Number(gateway.id)) || gateway;
-};
-
-const clearSelection = () => {
-  selectedGateway.value = null;
-  activeGatewayId.value = null;
-  unavailableGatewayId.value = null;
-};
-
-const setSelectedGatewaySnapshot = (gateway) => {
-  if (!gateway?.id) {
-    return null;
-  }
-
-  const mergedGateway = mergeGateway(gateway) || gateway;
-  selectedGateway.value = mergedGateway;
-  activeGatewayId.value = String(mergedGateway.id);
-  unavailableGatewayId.value = null;
-  syncDrafts(mergedGateway);
-  return mergedGateway;
-};
-
-const findLocalGatewaySnapshot = (gatewayId) => {
-  const normalizedId = normId(gatewayId);
-  if (!normalizedId) {
-    return null;
-  }
-
-  if (String(selectedGateway.value?.id || "") === normalizedId) {
-    return selectedGateway.value;
-  }
-
-  return (
-    peekCachedEdgeGateway(normalizedId) ||
-    gateways.value.find((gateway) => String(gateway?.id || "") === normalizedId) ||
-    null
-  );
-};
-
-const hydrateDepartmentsFromCache = () => {
-  const cachedDepartments = peekCachedEdgeGatewayDepartments();
-  if (!Array.isArray(cachedDepartments)) {
-    return false;
-  }
-
-  departments.value = cachedDepartments;
-  return true;
-};
-
-const hydrateFleetFromCache = () => {
-  const cachedFleet = peekCachedEdgeGatewayList({ departmentId: props.departmentId ?? null, view: "summary" });
-  if (!cachedFleet) {
-    return false;
-  }
-
-  gateways.value = Array.isArray(cachedFleet.rows) ? [...cachedFleet.rows] : [];
-  fleetUsage.value = normalizeFleetUsage(cachedFleet.meta?.fleet_usage || buildFleetUsageFromRows(gateways.value));
-  lastFleetRefreshAt = Number(cachedFleet.cachedAt || 0);
-  return true;
-};
-
-const hydrateSelectionFromLocalState = () => {
-  const preferredId = normId(props.selectedGatewayId);
-  if (preferredId) {
-    const cachedGateway = findLocalGatewaySnapshot(preferredId);
-    if (!cachedGateway) {
-      return false;
-    }
-
-    setSelectedGatewaySnapshot(cachedGateway);
-    return true;
-  }
-
-  if (props.routeDriven) {
-    clearSelection();
-    return false;
-  }
-
-  if (!gateways.value.length) {
-    clearSelection();
-    return false;
-  }
-
-  const firstGateway = findLocalGatewaySnapshot(gateways.value[0]?.id) || gateways.value[0];
-  if (!firstGateway) {
-    clearSelection();
-    return false;
-  }
-
-  setSelectedGatewaySnapshot(firstGateway);
-  return true;
-};
-
-const fleetRefreshDue = (intervalMs = 30000) => Date.now() - Number(lastFleetRefreshAt || 0) >= intervalMs;
-
-const applyDepartmentTransportModeLocally = (departmentId, transportMode) => {
-  const normalizedDepartmentId = Number(departmentId || 0);
-  if (!normalizedDepartmentId) {
-    return;
-  }
-
-  gateways.value = gateways.value.map((gateway) =>
-    Number(gateway?.department_id || 0) === normalizedDepartmentId
-      ? { ...gateway, department_transport_mode: transportMode }
-      : gateway
-  );
-
-  if (Number(selectedGateway.value?.department_id || 0) === normalizedDepartmentId) {
-    selectedGateway.value = {
-      ...selectedGateway.value,
-      department_transport_mode: transportMode,
-    };
-  }
-};
-
-const refreshFleet = async ({ forceRefresh = false } = {}) => {
-  const response = await listEdgeGateways({
-    departmentId: props.departmentId ?? null,
-    view: "summary",
-    forceRefresh,
-  });
-  applyFleetRows(unwrap(response, []), response?.data?.meta?.fleet_usage);
-  return response;
-};
-
-const refreshSelected = async (gatewayId = activeGatewayId.value, { forceRefresh = false } = {}) => {
-  if (!gatewayId) {
-    clearSelection();
-    return null;
-  }
-
-  loading.value.detail = true;
   try {
-    const response = await getEdgeGateway(gatewayId, { forceRefresh });
-    const gateway = unwrap(response, null);
-    if (gateway) {
-      setSelectedGatewaySnapshot(gateway);
+    await navigator.clipboard.writeText(errorState.value.details.join("\n"));
+    setFlash("Technical details copied.");
+  } catch (_error) {
+    setFlash("Unable to copy technical details.", "danger");
+  }
+};
+
+const copyInstallerCommand = async () => {
+  if (!installerCommand.value) {
+    return;
+  }
+
+  try {
+    await navigator.clipboard.writeText(installerCommand.value);
+    installerCopyState.value = "copied";
+    setFlash("Installer command copied.");
+  } catch (_error) {
+    installerCopyState.value = "error";
+    setFlash("Unable to copy the installer command.", "danger");
+  }
+};
+
+const copyInstallerDiagnostics = async () => {
+  if (!installerSessionDiagnosticsText.value) {
+    return;
+  }
+
+  try {
+    await navigator.clipboard.writeText(installerSessionDiagnosticsText.value);
+    installerDiagnosticsCopyState.value = "copied";
+    setFlash("Installer diagnostics copied.");
+  } catch (_error) {
+    installerDiagnosticsCopyState.value = "error";
+    setFlash("Unable to copy installer diagnostics.", "danger");
+  }
+};
+
+const selectGateway = async (gatewayId, view = "overview") => {
+  if (!gatewayId) {
+    return;
+  }
+  clearUnavailableIfPresent(gatewayId);
+  if (props.routeDriven) {
+    emit("navigate", { gatewayId, view: normalizeView(view) });
+    return;
+  }
+  localGatewayId.value = String(gatewayId);
+  localView.value = normalizeView(view);
+};
+
+const selectTab = async (view) => {
+  if (!currentGatewayId.value) {
+    return;
+  }
+  if (props.routeDriven) {
+    emit("navigate", { gatewayId: currentGatewayId.value, view: normalizeView(view) });
+    return;
+  }
+  localView.value = normalizeView(view);
+};
+
+const ensureDepartmentSelection = () => {
+  if (props.routeDriven || currentGatewayId.value || !gateways.value.length) {
+    return;
+  }
+  localGatewayId.value = String(gateways.value[0].id);
+  localView.value = normalizeView(currentView.value);
+};
+
+const loadDepartments = async () => {
+  loading.departments = true;
+  try {
+    const response = await listEdgeGatewayDepartments();
+    departments.value = unwrapEdgeGatewayResponse(response, []);
+    if (props.departmentId && !installerForm.departmentId) {
+      installerForm.departmentId = String(props.departmentId);
     }
+  } finally {
+    loading.departments = false;
+  }
+};
+
+const loadFleet = async ({ silent = false } = {}) => {
+  if (!silent) {
+    loading.fleet = true;
+  }
+
+  try {
+    const response = await listEdgeGateways({
+      departmentId: props.departmentId,
+      view: "summary",
+    });
+    gateways.value = unwrapEdgeGatewayResponse(response, []);
+    fleetUsage.value = unwrapEdgeGatewayMeta(response).fleet_usage || fleetUsage.value;
+    ensureDepartmentSelection();
+    return gateways.value;
+  } catch (error) {
+    if (!silent) {
+      errorState.value = normalizeEdgeGatewayError(error);
+    }
+    return [];
+  } finally {
+    if (!silent) {
+      loading.fleet = false;
+    }
+  }
+};
+
+const loadGatewayDetail = async (gatewayId, { silent = false } = {}) => {
+  if (!gatewayId) {
+    selectedGateway.value = null;
+    return null;
+  }
+
+  if (!silent) {
+    loading.detail = true;
+  }
+
+  try {
+    const response = await getEdgeGateway(gatewayId);
+    const gateway = unwrapEdgeGatewayResponse(response, null);
+    applyGatewayState(gateway, { resetForms: true });
+    clearUnavailableIfPresent(gatewayId);
     return gateway;
   } catch (error) {
-    const fallbackGateway = findLocalGatewaySnapshot(gatewayId);
-    if (fallbackGateway) {
-      setSelectedGatewaySnapshot(fallbackGateway);
-      fail(error);
-      return fallbackGateway;
+    if (Number(error?.response?.status) === 404) {
+      unavailableGatewayId.value = String(gatewayId);
+      selectedGateway.value = null;
+      return null;
+    }
+    if (!silent) {
+      errorState.value = normalizeEdgeGatewayError(error);
     }
-
-    unavailableGatewayId.value = String(gatewayId);
-    selectedGateway.value = null;
-    fail(error);
     return null;
   } finally {
-    loading.value.detail = false;
-  }
-};
-
-const navigateGateway = (gatewayId, nextView = "overview") => {
-  if (!gatewayId) {
-    return;
-  }
-
-  if (props.routeDriven) {
-    emit("navigate", { gatewayId: String(gatewayId), view: nextView });
-  } else {
-    localView.value = nextView;
-  }
-};
-
-const selectGateway = async (gatewayId, nextView = currentView.value || "overview") => {
-  const normalizedId = normId(gatewayId);
-  if (!normalizedId) {
-    return;
-  }
-
-  activeGatewayId.value = normalizedId;
-  clearError();
-  const cachedGateway = findLocalGatewaySnapshot(normalizedId);
-  if (cachedGateway) {
-    setSelectedGatewaySnapshot(cachedGateway);
-    navigateGateway(normalizedId, nextView || "overview");
-    refreshSelected(normalizedId).catch(() => {});
-    return;
-  }
-
-  await refreshSelected(normalizedId);
-  navigateGateway(normalizedId, nextView || "overview");
-};
-
-const syncSelection = async () => {
-  const preferredId = normId(props.selectedGatewayId);
-
-  if (preferredId) {
-    const cachedGateway = findLocalGatewaySnapshot(preferredId);
-    if (cachedGateway) {
-      setSelectedGatewaySnapshot(cachedGateway);
+    if (!silent) {
+      loading.detail = false;
     }
-    await refreshSelected(preferredId);
-    return;
-  }
-
-  if (props.routeDriven) {
-    clearSelection();
-    return;
-  }
-
-  if (gateways.value.length) {
-    const firstGateway = findLocalGatewaySnapshot(gateways.value[0].id) || gateways.value[0];
-    if (firstGateway) {
-      setSelectedGatewaySnapshot(firstGateway);
-      await refreshSelected(firstGateway.id);
-      return;
-    }
-  } else {
-    clearSelection();
   }
 };
 
-const load = async () => {
-  const hydratedDepartments = hydrateDepartmentsFromCache();
-  const hydratedFleet = hydrateFleetFromCache();
-  const hydratedSelection = hydrateSelectionFromLocalState();
+const selectOperationFromList = async (operation) => {
+  if (!operation || !currentGatewayId.value) {
+    selectedOperationId.value = null;
+    operationEvents.value = [];
+    return;
+  }
+
+  selectedOperationId.value = operation.id;
+  if (Array.isArray(operation.events) && operation.events.length) {
+    operationEvents.value = operation.events;
+  }
+
+  if (Array.isArray(operation.events) && operation.events.length) {
+    return;
+  }
 
-  loading.value.init = !(hydratedDepartments || hydratedFleet || hydratedSelection);
   try {
-    const [departmentsResponse] = await Promise.all([listEdgeGatewayDepartments(), refreshFleet()]);
-    departments.value = unwrap(departmentsResponse, []);
-    await syncSelection();
-  } catch (error) {
-    fail(error);
-  } finally {
-    loading.value.init = false;
+    const response = await listEdgeGatewayOperationEvents(currentGatewayId.value, operation.id);
+    operationEvents.value = unwrapEdgeGatewayResponse(response, []);
+  } catch (_error) {
+    operationEvents.value = [];
   }
 };
 
-const pollForClaimedGateway = async ({ existingIds, baseline, departmentId, label, pollToken }) => {
-  const normalizedDepartmentId = Number(departmentId || 0);
-  const normalizedLabel = normLabel(label);
+const syncSelectedOperation = async () => {
+  const selected =
+    operations.value.find((operation) => String(operation.id) === String(selectedOperationId.value)) ||
+    operations.value.find((operation) =>
+      ["PENDING", "IN_PROGRESS", "CANCEL_REQUESTED"].includes(String(operation.status || ""))
+    ) ||
+    operations.value[0] ||
+    null;
+  await selectOperationFromList(selected);
+};
 
-  for (let attempt = 0; attempt < 60; attempt += 1) {
-    if (installerClaimPollToken.value !== pollToken) {
+const loadTasks = async (gatewayId = currentGatewayId.value, { silent = false } = {}) => {
+  if (!gatewayId) {
+    operations.value = [];
+    recentCommands.value = [];
+    operationSummary.value = {};
+    operationEvents.value = [];
+    selectedOperationId.value = null;
+    return [];
+  }
+
+  if (!silent) {
+    loading.tasks = true;
+  }
+
+  try {
+    const response = await getEdgeGatewayTasks(gatewayId);
+    const payload = unwrapEdgeGatewayResponse(response, {});
+    applyGatewayState(payload.gateway || null, { resetForms: false });
+    operations.value = Array.isArray(payload.operations) ? payload.operations : [];
+    recentCommands.value = Array.isArray(payload.recent_commands) ? payload.recent_commands : [];
+    operationSummary.value = payload.recent_operations_summary || {};
+    await syncSelectedOperation();
+    return operations.value;
+  } catch (error) {
+    if (!silent) {
+      errorState.value = normalizeEdgeGatewayError(error);
+    }
+    return [];
+  } finally {
+    if (!silent) {
+      loading.tasks = false;
+    }
+  }
+};
+
+const loadLogs = async (gatewayId = currentGatewayId.value, { silent = false } = {}) => {
+  if (!gatewayId) {
+    logsTimeline.value = [];
+    shellSessions.value = [];
+    return [];
+  }
+
+  if (!silent) {
+    loading.logs = true;
+  }
+
+  try {
+    const response = await getEdgeGatewayLogs(gatewayId);
+    const payload = unwrapEdgeGatewayResponse(response, {});
+    applyGatewayState(payload.gateway || null, { resetForms: false });
+    logsTimeline.value = Array.isArray(payload.timeline) ? payload.timeline : [];
+    shellSessions.value = Array.isArray(payload.shell_sessions) ? payload.shell_sessions : [];
+    return logsTimeline.value;
+  } catch (error) {
+    if (!silent) {
+      errorState.value = normalizeEdgeGatewayError(error);
+    }
+    return [];
+  } finally {
+    if (!silent) {
+      loading.logs = false;
+    }
+  }
+};
+
+const loadStatistics = async (gatewayId = currentGatewayId.value, { silent = false } = {}) => {
+  if (!gatewayId) {
+    statisticsPayload.value = {};
+    return null;
+  }
+
+  if (!silent) {
+    loading.statistics = true;
+  }
+
+  try {
+    const response = await getEdgeGatewayStatistics(gatewayId);
+    const payload = unwrapEdgeGatewayResponse(response, {});
+    applyGatewayState(payload.gateway || null, { resetForms: false });
+    statisticsPayload.value = payload || {};
+    return payload;
+  } catch (error) {
+    if (!silent) {
+      errorState.value = normalizeEdgeGatewayError(error);
+    }
+    return null;
+  } finally {
+    if (!silent) {
+      loading.statistics = false;
+    }
+  }
+};
+
+const queueOperation = async (operationPayload) => {
+  if (!currentGatewayId.value || !operationPayload?.type) {
+    return;
+  }
+
+  loading.operation = true;
+  errorState.value = null;
+
+  try {
+    const response = await createEdgeGatewayOperation(currentGatewayId.value, operationPayload);
+    const payload = unwrapEdgeGatewayResponse(response, {});
+    applyGatewayState(payload?.gateway || null, { resetForms: false });
+    await loadFleet({ silent: true });
+    await loadTasks(currentGatewayId.value, { silent: true });
+    if (currentView.value === "logs") {
+      await loadLogs(currentGatewayId.value, { silent: true });
+    }
+    setFlash(`Gateway operation ${operationPayload.type} queued.`);
+  } catch (error) {
+    errorState.value = normalizeEdgeGatewayError(error);
+  } finally {
+    loading.operation = false;
+  }
+};
+
+const cancelOperation = async (operation = currentOperation.value) => {
+  if (!currentGatewayId.value || !operation?.id) {
+    return;
+  }
+
+  loading.cancel = true;
+  errorState.value = null;
+
+  try {
+    const response = await cancelEdgeGatewayOperation(currentGatewayId.value, operation.id);
+    const payload = unwrapEdgeGatewayResponse(response, {});
+    applyGatewayState(payload?.gateway || null, { resetForms: false });
+    await loadTasks(currentGatewayId.value, { silent: true });
+    if (currentView.value === "logs") {
+      await loadLogs(currentGatewayId.value, { silent: true });
+    }
+
+    const cancelledStatus = String(payload?.operation?.status || operation.status || "");
+    setFlash(
+      cancelledStatus === "CANCELLED"
+        ? `${operation.type} cancelled.`
+        : `${operation.type} cancellation requested.`
+    );
+  } catch (error) {
+    errorState.value = normalizeEdgeGatewayError(error);
+  } finally {
+    loading.cancel = false;
+  }
+};
+
+const retryOperation = async (operation) => {
+  if (!operation?.type) {
+    return;
+  }
+  await queueOperation({
+    type: operation.type,
+    request: operation.request || {},
+  });
+};
+
+const triggerDiscovery = async () => {
+  await queueOperation(EDGE_GATEWAY_OPERATIONS.discovery());
+};
+
+const triggerUpdate = async () => {
+  if (!String(updateTargetVersion.value || "").trim()) {
+    setFlash("Target version is required for update operations.", "danger");
+    return;
+  }
+  await queueOperation(EDGE_GATEWAY_OPERATIONS.update(String(updateTargetVersion.value).trim()));
+};
+
+const triggerUninstall = async () => {
+  await queueOperation(EDGE_GATEWAY_OPERATIONS.uninstall());
+};
+
+const updateBinding = (index, field, value) => {
+  bindingDrafts.value = bindingDrafts.value.map((binding, bindingIndex) =>
+    bindingIndex === index ? { ...binding, [field]: value } : binding
+  );
+};
+
+const addBinding = () => {
+  bindingDrafts.value = [
+    ...bindingDrafts.value,
+    {
+      relay_id: "",
+      device_id: "",
+      channel: "",
+      fallback_mode: "PREFER_LOCAL",
+    },
+  ];
+};
+
+const removeBinding = (index) => {
+  bindingDrafts.value = bindingDrafts.value.filter((_, bindingIndex) => bindingIndex !== index);
+};
+
+const saveBindings = async () => {
+  if (!currentGatewayId.value) {
+    return;
+  }
+
+  loading.bindings = true;
+  errorState.value = null;
+
+  try {
+    const bindings = bindingDrafts.value
+      .map((binding) => ({
+        relay_id: String(binding.relay_id || "").trim(),
+        device_id: String(binding.device_id || "").trim(),
+        channel: binding.channel === "" ? null : Number(binding.channel),
+        fallback_mode: binding.fallback_mode || "PREFER_LOCAL",
+      }))
+      .filter((binding) => binding.relay_id && binding.device_id && Number.isInteger(binding.channel));
+
+    const response = await saveEdgeGatewayBindings(currentGatewayId.value, bindings);
+    applyGatewayState(unwrapEdgeGatewayResponse(response, null), { resetForms: true });
+    await loadFleet({ silent: true });
+    setFlash("Relay bindings saved.");
+  } catch (error) {
+    errorState.value = normalizeEdgeGatewayError(error);
+  } finally {
+    loading.bindings = false;
+  }
+};
+
+const updateMetadataField = (field, value) => {
+  metadataForm[field] = value;
+};
+
+const saveMetadata = async () => {
+  if (!currentGatewayId.value) {
+    return;
+  }
+
+  loading.metadata = true;
+  errorState.value = null;
+
+  try {
+    const response = await updateEdgeGateway(currentGatewayId.value, {
+      label: String(metadataForm.label || "").trim(),
+      is_primary: Boolean(metadataForm.is_primary),
+    });
+    applyGatewayState(unwrapEdgeGatewayResponse(response, null), { resetForms: true });
+    await loadFleet({ silent: true });
+    setFlash("Gateway metadata updated.");
+  } catch (error) {
+    errorState.value = normalizeEdgeGatewayError(error);
+  } finally {
+    loading.metadata = false;
+  }
+};
+
+const saveCutover = async () => {
+  if (!selectedDepartmentId.value) {
+    return;
+  }
+
+  loading.cutover = true;
+  errorState.value = null;
+
+  try {
+    await setDepartmentGatewayCutover(selectedDepartmentId.value, transportMode.value);
+    await loadFleet({ silent: true });
+    if (currentGatewayId.value) {
+      await loadGatewayDetail(currentGatewayId.value, { silent: true });
+    }
+    setFlash("Department cutover updated.");
+  } catch (error) {
+    errorState.value = normalizeEdgeGatewayError(error);
+  } finally {
+    loading.cutover = false;
+  }
+};
+
+const rotateCredentials = async () => {
+  if (!currentGatewayId.value) {
+    return;
+  }
+  if (rotateConfirmation.value !== "ROTATE") {
+    setFlash("Type ROTATE to confirm credential rotation.", "danger");
+    return;
+  }
+
+  loading.rotate = true;
+  errorState.value = null;
+
+  try {
+    const response = await rotateEdgeGatewayCredentials(currentGatewayId.value);
+    credentialBundle.value = unwrapEdgeGatewayResponse(response, null);
+    if (currentView.value === "logs") {
+      await loadLogs(currentGatewayId.value, { silent: true });
+    }
+    setFlash("Gateway credentials rotated.");
+  } catch (error) {
+    errorState.value = normalizeEdgeGatewayError(error);
+  } finally {
+    loading.rotate = false;
+  }
+};
+
+const deleteGatewayRegistration = async () => {
+  if (!currentGatewayId.value || !selectedGatewayView.value) {
+    return;
+  }
+
+  if (String(deleteConfirmation.value || "").trim() !== String(selectedGatewayView.value.displayLabel || "").trim()) {
+    setFlash("Type the exact gateway label before deleting.", "danger");
+    return;
+  }
+
+  loading.delete = true;
+  errorState.value = null;
+
+  try {
+    await deleteEdgeGateway(currentGatewayId.value);
+    gateways.value = gateways.value.filter((gateway) => String(gateway.id) !== String(currentGatewayId.value));
+    selectedGateway.value = null;
+    operations.value = [];
+    recentCommands.value = [];
+    operationSummary.value = {};
+    operationEvents.value = [];
+    logsTimeline.value = [];
+    shellSessions.value = [];
+    statisticsPayload.value = {};
+    unavailableGatewayId.value = null;
+    closeStreamConnection();
+    disconnectTerminal({ clearTranscript: true });
+
+    if (props.routeDriven) {
+      emit("navigate", { gatewayId: null, view: "overview" });
+    } else {
+      localGatewayId.value = null;
+    }
+
+    setFlash("Gateway deleted.");
+  } catch (error) {
+    errorState.value = normalizeEdgeGatewayError(error);
+  } finally {
+    loading.delete = false;
+  }
+};
+
+const snapshotClaimBaseline = () =>
+  new Map(
+    gateways.value.map((gateway) => [
+      String(gateway.id),
+      {
+        lastHeartbeatAt: gateway.last_heartbeat_at || null,
+        status: gateway.status || null,
+        lastSeenIp: gateway.last_seen_ip || null,
+      },
+    ])
+  );
+
+const changedSinceBaseline = (gateway, baseline) =>
+  !baseline ||
+  String(gateway.last_heartbeat_at || "") !== String(baseline.lastHeartbeatAt || "") ||
+  String(gateway.status || "") !== String(baseline.status || "") ||
+  String(gateway.last_seen_ip || "") !== String(baseline.lastSeenIp || "");
+
+const findClaimedGateway = (rows, baseline, departmentId, label) => {
+  const normalizedLabel = String(label || "").trim().toLowerCase();
+  const matchingRows = rows.filter((gateway) => Number(gateway.department_id) === Number(departmentId));
+  const changedRows = matchingRows.filter((gateway) => changedSinceBaseline(gateway, baseline.get(String(gateway.id))));
+
+  if (normalizedLabel) {
+    const labelMatch =
+      changedRows.find((gateway) => String(gateway.label || "").trim().toLowerCase() === normalizedLabel) ||
+      matchingRows.find((gateway) => String(gateway.label || "").trim().toLowerCase() === normalizedLabel);
+    if (labelMatch) {
+      return labelMatch;
+    }
+  }
+
+  return changedRows[0] || null;
+};
+
+const loadInstallerStatus = async (claimTokenId, { silent = false } = {}) => {
+  if (!claimTokenId) {
+    return null;
+  }
+
+  try {
+    const response = await getEdgeGatewayInstallTokenStatus(claimTokenId);
+    const session = normalizeInstallerSession(unwrapEdgeGatewayResponse(response, {}), claimTokenId);
+    installerSession.value = session;
+    return session;
+  } catch (error) {
+    if (!silent) {
+      errorState.value = normalizeEdgeGatewayError(error);
+    }
+    return null;
+  }
+};
+
+const openInstallerGatewayIfReady = async (session) => {
+  const gatewayId = Number(session?.gateway_id || 0);
+  if (!gatewayId) {
+    return false;
+  }
+  const baselineRecord = installerBaseline.value.get(String(gatewayId));
+  setFlash(baselineRecord ? "Gateway reconnected." : "Gateway connected.");
+  await selectGateway(gatewayId, "overview");
+  return true;
+};
+
+const watchInstallerSession = async ({ departmentId, label, claimTokenId, token }) => {
+  for (let attempt = 0; attempt < 120; attempt += 1) {
+    if (token !== installerPollToken) {
       return;
     }
 
-    await sleep(attempt === 0 ? 1500 : 2000);
-    await refreshFleet();
+    await sleep(1500);
+    const [session] = await Promise.all([loadInstallerStatus(claimTokenId, { silent: true }), loadFleet({ silent: true })]);
+    if (token !== installerPollToken || !session) {
+      return;
+    }
 
-    const matchingGateways = gateways.value.filter((item) => {
-      if (Number(item.department_id) !== normalizedDepartmentId) return false;
-      if (normalizedLabel && normLabel(item.label) !== normalizedLabel) return false;
-      return true;
-    });
+    if (String(session.status || "") === "CLAIMED" && (await openInstallerGatewayIfReady(session))) {
+      return;
+    }
 
-    const claimed =
-      matchingGateways.find((item) => !existingIds.has(Number(item.id))) ||
-      (() => {
-        const reusedGateways = sortByMostRecentHeartbeat(
-          matchingGateways.filter((item) => gatewayClaimStateChanged(item, baseline.get(String(item.id))))
-        );
-        if (reusedGateways.length === 1) {
-          return reusedGateways[0];
-        }
-        if (normalizedLabel && reusedGateways.length > 1) {
-          return reusedGateways[0];
-        }
-        return null;
-      })();
-
-    if (claimed) {
-      flashMessage.value = existingIds.has(Number(claimed.id)) ? "Gateway reconnected." : "Gateway connected.";
-      clearError();
-      await selectGateway(claimed.id, "overview");
+    if (session.terminal) {
+      const fallbackGateway = findClaimedGateway(gateways.value, installerBaseline.value, departmentId, label);
+      if (fallbackGateway) {
+        installerSession.value = {
+          ...session,
+          gateway_id: fallbackGateway.id,
+        };
+        await openInstallerGatewayIfReady({ ...session, gateway_id: fallbackGateway.id });
+      }
       return;
     }
   }
 };
 
 const generateInstaller = async () => {
-  const departmentId = Number(installerDepartmentId.value || selectedDepartmentId.value || 0);
+  const departmentId = Number(installerForm.departmentId || props.departmentId || 0);
   if (!departmentId) {
-    fail(new Error("Select a department before generating an installer."));
+    setFlash("Choose a department before generating an installer.", "danger");
     return;
   }
 
-  loading.value.installer = true;
+  loading.installer = true;
   installerCopyState.value = "idle";
+  installerDiagnosticsCopyState.value = "idle";
+  errorState.value = null;
+
   try {
-    const label = installerLabel.value.trim();
-    const pollToken = installerClaimPollToken.value + 1;
-    const existingIds = new Set(gateways.value.map((item) => Number(item.id)));
-    const baseline = buildGatewayClaimBaseline(gateways.value);
-    const response = await createEdgeGatewayInstallToken({ department_id: departmentId, label: label || undefined });
-    installerClaimPollToken.value = pollToken;
-    installerCommand.value = unwrap(response, null)?.install_command || "";
-    flashMessage.value = "Installer token generated.";
-    clearError();
-    pollForClaimedGateway({ existingIds, baseline, departmentId, label, pollToken }).catch(() => {});
+    installerBaseline.value = snapshotClaimBaseline();
+    installerLabel.value = String(installerForm.label || "").trim();
+    const response = await createEdgeGatewayInstallToken({
+      department_id: departmentId,
+      label: installerLabel.value || null,
+    });
+    const payload = unwrapEdgeGatewayResponse(response, {});
+    installerCommand.value = payload.install_command || "";
+    installerSession.value = normalizeInstallerSession(
+      {
+        claim_token_id: payload.claim_token_id || null,
+        status: "PENDING",
+        step: "PENDING",
+        message: "Installer command generated. Run it on the gateway host.",
+      },
+      payload.claim_token_id || null
+    );
+    installerPollToken += 1;
+    void watchInstallerSession({
+      departmentId,
+      label: installerLabel.value,
+      claimTokenId: payload.claim_token_id || null,
+      token: installerPollToken,
+    });
   } catch (error) {
-    fail(error);
+    errorState.value = normalizeEdgeGatewayError(error);
   } finally {
-    loading.value.installer = false;
+    loading.installer = false;
   }
 };
 
-const copyInstallerCommand = async () => {
-  if (!installerCommand.value) return;
+const appendTerminalOutput = (chunk) => {
+  if (!chunk) {
+    return;
+  }
+  terminalTranscript.value = `${terminalTranscript.value}${chunk}`;
+};
 
-  try {
-    const copied = await copyPlainText(installerCommand.value);
-    if (!copied) {
-      throw new Error("COPY_UNAVAILABLE");
+const closeStreamConnection = () => {
+  if (streamClient) {
+    try {
+      streamClient.close();
+    } catch (_error) {
+      // Ignore cleanup failures.
     }
-    installerCopyState.value = "copied";
-    flashMessage.value = "Installer command copied.";
-    clearError();
-  } catch (_error) {
-    installerCopyState.value = "error";
-    fail(new Error("Could not copy the installer command."));
-    scheduleInstallerCopyReset();
+    streamClient = null;
+  }
+  if (liveState.streamStatus !== "idle") {
+    liveState.streamStatus = "closed";
+  }
+  liveState.connectedGatewayId = null;
+};
+
+const disconnectTerminal = ({ clearTranscript = false } = {}) => {
+  if (shellClient) {
+    try {
+      shellClient.close();
+    } catch (_error) {
+      // Ignore cleanup failures.
+    }
+    shellClient = null;
+  }
+  liveState.shellStatus = clearTranscript ? "idle" : "closed";
+  liveState.shellSession = null;
+  if (clearTranscript) {
+    terminalTranscript.value = "";
+    terminalCommand.value = "";
+    liveState.shellError = "";
+  }
+};
+
+const connectTerminal = async () => {
+  if (!currentGatewayId.value || !props.allowDestructive) {
     return;
   }
 
-  scheduleInstallerCopyReset();
-};
-
-const saveMetadata = async (payload) => {
-  if (!selectedGateway.value?.id) return;
-  loading.value.metadata = true;
-  try {
-    const response = await updateEdgeGateway(selectedGateway.value.id, payload);
-    const gateway = unwrap(response, null);
-    if (gateway) {
-      setSelectedGatewaySnapshot(gateway);
-    }
-    flashMessage.value = "Gateway metadata updated.";
-    clearError();
-  } catch (error) {
-    fail(error);
-  } finally {
-    loading.value.metadata = false;
+  if (shellClient && liveState.shellStatus === "open") {
+    return;
   }
-};
 
-const applyCutover = async (transportMode) => {
-  if (!selectedDepartmentId.value) return;
-  loading.value.cutover = true;
+  loading.terminal = true;
+  liveState.shellStatus = "connecting";
+  liveState.shellError = "";
+  terminalTranscript.value = "";
+
   try {
-    await setDepartmentGatewayCutover(selectedDepartmentId.value, transportMode);
-    applyDepartmentTransportModeLocally(selectedDepartmentId.value, transportMode);
-    flashMessage.value = "Department cutover updated.";
-    clearError();
-  } catch (error) {
-    fail(error);
-  } finally {
-    loading.value.cutover = false;
-  }
-};
-
-const queueOperation = async ({ type, request }) => {
-  if (!selectedGateway.value?.id) return;
-  loading.value.operation = true;
-  try {
-    const response = await createEdgeGatewayOperation(selectedGateway.value.id, type, request || {});
-    const gateway = unwrap(response, null)?.gateway || response?.data?.data?.gateway || null;
-    if (gateway) {
-      setSelectedGatewaySnapshot(gateway);
-    }
-    flashMessage.value = `Gateway operation ${type} queued.`;
-    clearError();
-  } catch (error) {
-    fail(error);
-  } finally {
-    loading.value.operation = false;
-  }
-};
-
-const cancelOperation = async (operation) => {
-  if (!selectedGateway.value?.id || !operation?.id) return;
-  loading.value.operationCancel = true;
-  try {
-    const response = await cancelEdgeGatewayOperation(selectedGateway.value.id, operation.id);
-    const gateway = unwrap(response, null)?.gateway || response?.data?.data?.gateway || null;
-    if (gateway) {
-      setSelectedGatewaySnapshot(gateway);
-    }
-    flashMessage.value =
-      String(response?.data?.data?.operation?.status || "") === "CANCEL_REQUESTED"
-        ? `Cancellation requested for ${operation.type}.`
-        : `${operation.type} cancelled.`;
-    clearError();
-  } catch (error) {
-    fail(error);
-  } finally {
-    loading.value.operationCancel = false;
-  }
-};
-
-const queueDiscovery = async () => {
-  const previousInventoryCount = selectedGateway.value?.inventory?.length || 0;
-  await queueOperation({ type: "DISCOVERY", request: {} });
-  if (!selectedGateway.value?.id) return;
-
-  loading.value.discovery = true;
-  try {
-    for (let attempt = 0; attempt < 4; attempt += 1) {
-      await sleep(750);
-      const refreshed = await refreshSelected(selectedGateway.value.id);
-      if ((refreshed?.inventory || []).length > previousInventoryCount) {
-        break;
+    shellClient = await createGatewayShellClient(
+      currentGatewayId.value,
+      {
+        reason: "Interactive diagnostic terminal",
+        cols: 120,
+        rows: 28,
+        cwd: "/opt/truckwash-edge-agent",
+      },
+      {
+        onMessage(message) {
+          if (message?.type === "opened") {
+            liveState.shellStatus = "open";
+            return;
+          }
+          if (message?.type === "output") {
+            appendTerminalOutput(String(message.data || ""));
+            return;
+          }
+          if (message?.type === "closed") {
+            liveState.shellStatus = "closed";
+          }
+        },
+        onError(error) {
+          liveState.shellStatus = "error";
+          liveState.shellError = normalizeEdgeGatewayError(error).message;
+        },
+        onClose(reason) {
+          if (liveState.shellStatus !== "error") {
+            liveState.shellStatus = reason === "browser_closed" ? "closed" : "idle";
+          }
+        },
       }
-    }
-  } finally {
-    loading.value.discovery = false;
-  }
-};
-
-const addBindingRow = () =>
-  editableBindings.value.push({ relay_id: "", device_id: "", local_ip: "", channel: 0, fallback_mode: "PREFER_LOCAL" });
-
-const removeBindingRow = (index) => {
-  editableBindings.value = editableBindings.value.filter((_, itemIndex) => itemIndex !== index);
-};
-
-const updateBinding = (index, field, value) => {
-  editableBindings.value[index] = { ...editableBindings.value[index], [field]: value };
-};
-
-const saveBindingsAction = async () => {
-  if (!selectedGateway.value?.id) return;
-  loading.value.bindings = true;
-  try {
-    const response = await saveEdgeGatewayBindings(selectedGateway.value.id, editableBindings.value);
-    const gateway = unwrap(response, null);
-    if (gateway) {
-      setSelectedGatewaySnapshot(gateway);
-    }
-    flashMessage.value = "Relay bindings saved.";
-    clearError();
+    );
+    liveState.shellSession = shellClient.session || null;
   } catch (error) {
-    fail(error);
+    liveState.shellStatus = "error";
+    liveState.shellError = normalizeEdgeGatewayError(error).message;
   } finally {
-    loading.value.bindings = false;
+    loading.terminal = false;
   }
 };
 
-const rotateCredentials = async () => {
-  if (!selectedGateway.value?.id) return;
-  loading.value.rotate = true;
-  try {
-    const response = await rotateEdgeGatewayCredentials(selectedGateway.value.id);
-    rotateBundle.value = unwrap(response, null);
-    if (rotateBundle.value?.rotated_at) {
-      setSelectedGatewaySnapshot({
-        ...selectedGateway.value,
-        metadata: {
-          ...(selectedGateway.value?.metadata || {}),
-          credentials_rotated_at: rotateBundle.value.rotated_at,
-        },
-        credential_freshness: {
-          ...(selectedGateway.value?.credential_freshness || {}),
-          rotated_at: rotateBundle.value.rotated_at,
-          age_days: 0,
-          state: "FRESH",
-        },
-      });
-    }
-    refreshSelected(selectedGateway.value.id).catch(() => {});
-    flashMessage.value = "Gateway credentials rotated.";
-    clearError();
-  } catch (error) {
-    fail(error);
-  } finally {
-    loading.value.rotate = false;
-  }
-};
-
-const removeGateway = async () => {
-  if (!selectedGateway.value?.id) return;
-
-  loading.value.delete = true;
-  try {
-    const deletedId = Number(selectedGateway.value.id);
-    await deleteEdgeGateway(deletedId);
-    gateways.value = gateways.value.filter((gateway) => Number(gateway.id) !== deletedId);
-    fleetUsage.value = buildFleetUsageFromRows(gateways.value);
-    clearSelection();
-    rotateBundle.value = null;
-    flashMessage.value = "Gateway deleted.";
-    clearError();
-
-    if (props.routeDriven) {
-      emit("navigate", { gatewayId: null, view: "overview" });
-    } else if (gateways.value.length) {
-      await refreshSelected(gateways.value[0].id);
-    }
-  } catch (error) {
-    fail(error);
-  } finally {
-    loading.value.delete = false;
-  }
-};
-
-const setView = (viewId) => {
-  if (props.routeDriven && selectedGateway.value?.id) {
-    emit("navigate", { gatewayId: String(selectedGateway.value.id), view: viewId });
+const sendTerminalCommand = () => {
+  const command = String(terminalCommand.value || "").trim();
+  if (!command || !shellClient) {
     return;
   }
-  localView.value = viewId;
+  shellClient.sendInput(`${command}\n`);
+  terminalCommand.value = "";
 };
 
-const stopAutoRefresh = () => {
-  if (autoRefreshHandle !== null) {
-    window.clearInterval(autoRefreshHandle);
-    autoRefreshHandle = null;
+const runTerminalShortcut = (command) => {
+  terminalCommand.value = command;
+  sendTerminalCommand();
+};
+
+const handleStreamMessage = async (message) => {
+  liveState.streamStatus = "open";
+  liveState.streamError = "";
+  liveState.lastMessageAt = Date.now();
+
+  if (message?.gateway) {
+    applyGatewayState(message.gateway, { resetForms: false });
   }
-};
 
-const autoRefreshTick = async () => {
-  if (
-    loading.value.init ||
-    loading.value.detail ||
-    loading.value.operation ||
-    loading.value.operationCancel ||
-    loading.value.discovery
-  ) {
+  if (!currentGatewayId.value) {
     return;
   }
 
-  if (selectedGateway.value?.id) {
-    const shouldRefreshDetail =
-      currentView.value === "overview" ||
-      currentView.value === "operations" ||
-      Boolean(selectedGateway.value.active_operation);
-    const refreshes = [];
-    if (shouldRefreshDetail) {
-      refreshes.push(refreshSelected(selectedGateway.value.id));
-    }
-    if (fleetRefreshDue()) {
-      refreshes.push(refreshFleet());
-    }
-    if (refreshes.length) {
-      await Promise.all(refreshes);
-    }
+  if (message?.type === "task.updated") {
+    await loadTasks(currentGatewayId.value, { silent: true });
     return;
   }
-
-  if (fleetRefreshDue(5000)) {
-    await refreshFleet();
+  if (message?.type === "log.append") {
+    await loadLogs(currentGatewayId.value, { silent: true });
+    return;
+  }
+  if (message?.type === "stats.updated") {
+    await loadStatistics(currentGatewayId.value, { silent: true });
+    return;
+  }
+  if (["gateway.telemetry", "presence.changed"].includes(String(message?.type || ""))) {
+    await loadGatewayDetail(currentGatewayId.value, { silent: true });
+    if (currentView.value === "statistics") {
+      await loadStatistics(currentGatewayId.value, { silent: true });
+    }
   }
 };
 
-const startAutoRefresh = () => {
-  stopAutoRefresh();
-  autoRefreshHandle = window.setInterval(() => {
-    autoRefreshTick().catch(() => {});
-  }, 5000);
+const ensureStreamConnection = async () => {
+  if (!currentGatewayId.value || !LIVE_STREAM_SCOPES.includes(currentView.value)) {
+    closeStreamConnection();
+    return;
+  }
+
+  if (streamClient && String(liveState.connectedGatewayId || "") === String(currentGatewayId.value)) {
+    return;
+  }
+
+  closeStreamConnection();
+  liveState.streamStatus = "connecting";
+  liveState.streamError = "";
+  liveState.connectedGatewayId = String(currentGatewayId.value);
+
+  try {
+    streamClient = await createGatewayStreamClient(currentGatewayId.value, LIVE_STREAM_SCOPES, {
+      onOpen() {
+        liveState.streamStatus = "open";
+      },
+      onMessage(message) {
+        void handleStreamMessage(message);
+      },
+      onError(error) {
+        liveState.streamStatus = "error";
+        liveState.streamError = normalizeEdgeGatewayError(error).message;
+      },
+      onClose(reason) {
+        if (liveState.streamStatus !== "error") {
+          liveState.streamStatus = reason === "socket_closed" ? "closed" : "idle";
+        }
+      },
+    });
+  } catch (error) {
+    liveState.streamStatus = "error";
+    liveState.streamError = normalizeEdgeGatewayError(error).message;
+  }
+};
+
+const loadCurrentViewState = async ({ silent = false } = {}) => {
+  if (!currentGatewayId.value) {
+    closeStreamConnection();
+    disconnectTerminal({ clearTranscript: true });
+    return;
+  }
+
+  if (currentView.value === "tasks") {
+    await loadTasks(currentGatewayId.value, { silent });
+    await ensureStreamConnection();
+    disconnectTerminal({ clearTranscript: true });
+    return;
+  }
+
+  if (currentView.value === "logs") {
+    await loadLogs(currentGatewayId.value, { silent });
+    await ensureStreamConnection();
+    disconnectTerminal({ clearTranscript: true });
+    return;
+  }
+
+  if (currentView.value === "statistics") {
+    await loadStatistics(currentGatewayId.value, { silent });
+    await ensureStreamConnection();
+    disconnectTerminal({ clearTranscript: true });
+    return;
+  }
+
+  if (currentView.value === "terminal") {
+    closeStreamConnection();
+    await connectTerminal();
+    return;
+  }
+
+  disconnectTerminal({ clearTranscript: true });
+  if (currentView.value === "overview") {
+    await ensureStreamConnection();
+  } else {
+    closeStreamConnection();
+  }
 };
 
 watch(
   () => props.departmentId,
-  (value) => {
-    installerDepartmentId.value = value ? String(value) : "";
-    load().catch(() => {});
-  },
-  { immediate: true }
-);
-
-watch(
-  () => props.selectedGatewayId,
-  () => {
-    syncSelection().catch(() => {});
-  }
-);
-
-watch(
-  () => props.activeView,
-  (value) => {
-    if (!props.routeDriven && value) {
-      localView.value = value;
+  async () => {
+    await loadFleet();
+    if (currentGatewayId.value) {
+      await loadGatewayDetail(currentGatewayId.value, { silent: true });
+      await loadCurrentViewState({ silent: true });
     }
-  },
-  { immediate: true }
+  }
 );
 
-watch(installerCommand, () => {
-  installerCopyState.value = "idle";
-});
+watch(
+  () => [currentGatewayId.value, currentView.value],
+  async ([gatewayId]) => {
+    if (!gatewayId) {
+      selectedGateway.value = null;
+      operations.value = [];
+      recentCommands.value = [];
+      operationSummary.value = {};
+      operationEvents.value = [];
+      logsTimeline.value = [];
+      shellSessions.value = [];
+      statisticsPayload.value = {};
+      unavailableGatewayId.value = null;
+      selectedOperationId.value = null;
+      closeStreamConnection();
+      disconnectTerminal({ clearTranscript: true });
+      if (!props.routeDriven) {
+        ensureDepartmentSelection();
+      }
+      return;
+    }
 
-onMounted(() => {
-  if (props.departmentId) {
-    installerDepartmentId.value = String(props.departmentId);
+    await loadGatewayDetail(gatewayId);
+    await loadCurrentViewState();
   }
-  startAutoRefresh();
+);
+
+onMounted(async () => {
+  await Promise.all([loadDepartments(), loadFleet()]);
+  if (currentGatewayId.value) {
+    await loadGatewayDetail(currentGatewayId.value);
+    await loadCurrentViewState();
+  }
+
+  refreshHandle = window.setInterval(async () => {
+    await loadFleet({ silent: true });
+    if (installerSession.value.claim_token_id && !installerSession.value.terminal) {
+      const session = await loadInstallerStatus(installerSession.value.claim_token_id, { silent: true });
+      if (String(session?.status || "") === "CLAIMED") {
+        await openInstallerGatewayIfReady(session);
+      }
+    }
+
+    if (!currentGatewayId.value) {
+      return;
+    }
+
+    if (!LIVE_STREAM_SCOPES.includes(currentView.value) || liveState.streamStatus !== "open") {
+      await loadGatewayDetail(currentGatewayId.value, { silent: true });
+    }
+    if (currentView.value === "tasks" && liveState.streamStatus !== "open") {
+      await loadTasks(currentGatewayId.value, { silent: true });
+    }
+    if (currentView.value === "logs" && liveState.streamStatus !== "open") {
+      await loadLogs(currentGatewayId.value, { silent: true });
+    }
+    if (currentView.value === "statistics" && liveState.streamStatus !== "open") {
+      await loadStatistics(currentGatewayId.value, { silent: true });
+    }
+  }, 15000);
 });
 
 onUnmounted(() => {
-  stopAutoRefresh();
+  if (refreshHandle) {
+    window.clearInterval(refreshHandle);
+  }
+  closeStreamConnection();
+  disconnectTerminal({ clearTranscript: true });
 });
 </script>
 
 <template>
-  <section class="edge-v2-shell" data-testid="edge-gateway-workspace">
-    <div v-if="flashMessage" class="notification is-success is-light">{{ flashMessage }}</div>
-    <div v-if="errorState" class="notification is-danger is-light edge-error-banner" data-testid="gateway-error-banner">
-      <strong>{{ errorState.title }}</strong>
-      <p>{{ errorState.description }}</p>
-      <p>{{ errorState.message }}</p>
-      <div v-if="errorState.details?.length" class="edge-error-actions">
-        <details data-testid="gateway-error-details">
-          <summary>Technical details</summary>
-          <pre class="edge-json-block">{{ errorDetailsText }}</pre>
-        </details>
-        <button type="button" class="button is-small is-light" data-testid="gateway-error-copy" @click="copyErrorDetails">
-          Copy details
-        </button>
-      </div>
+  <section class="edge-gateway-workspace" data-testid="edge-gateway-workspace">
+    <div v-if="flash?.message" class="notification" :class="flash.tone === 'danger' ? 'is-danger' : 'is-success'">
+      {{ flash.message }}
     </div>
 
-    <div class="edge-summary-strip" data-testid="gateway-summary-strip">
+    <article v-if="errorState" class="edge-gateway-workspace__error" data-testid="gateway-error-banner">
+      <h3>{{ errorState.title }}</h3>
+      <p>{{ errorState.message }}</p>
+      <details data-testid="gateway-error-details">
+        <summary>Technical details</summary>
+        <pre>{{ errorState.details.join("\n") }}</pre>
+      </details>
+      <button class="button is-light" type="button" @click="copyErrorDetails">Copy details</button>
+    </article>
+
+    <div class="edge-gateway-workspace__summary" data-testid="gateway-summary-strip">
       <button
-        v-for="summary in summaryCards"
-        :key="summary.key"
-        type="button"
+        v-for="card in summaryCards"
+        :key="card.key"
         class="button is-light"
-        :data-testid="`gateway-summary-${summary.key.toLowerCase()}`"
-        @click="fleetFilter = summary.key"
+        :class="{ 'is-dark': fleetFilter === card.key }"
+        :data-testid="`gateway-summary-${String(card.key).toLowerCase()}`"
+        type="button"
+        @click="fleetFilter = card.key"
       >
-        {{ summary.label }} · {{ summary.count }}
+        {{ card.label }} - {{ card.count }}
       </button>
     </div>
 
-    <div class="edge-v2-layout">
-      <aside class="edge-v2-rail">
-        <div class="edge-rail-card">
-          <label class="label" for="gateway-fleet-search">Search fleet</label>
-          <input
-            id="gateway-fleet-search"
-            v-model="fleetQuery"
-            class="input"
-            data-testid="gateway-fleet-search"
-            placeholder="Gateway, department, host, or action"
-          />
-        </div>
+    <article class="edge-gateway-workspace__usage" data-testid="gateway-fleet-usage">
+      <div data-testid="gateway-fleet-usage-coverage">
+        {{ fleetUsage.gateways.total || 0 }} gateways - {{ fleetUsage.gateways.online || 0 }} online
+      </div>
+      <div data-testid="gateway-fleet-usage-devices">
+        {{ fleetUsage.inventory.online || 0 }} online - {{ fleetUsage.inventory.offline || 0 }} offline
+      </div>
+      <div data-testid="gateway-fleet-usage-bindings">
+        {{ fleetUsage.bindings.fallback_overrides || 0 }} overrides - {{ fleetUsage.bindings.cloud_only || 0 }} cloud only
+      </div>
+      <div data-testid="gateway-fleet-usage-runtime">
+        {{ formatMetric(fleetUsage.system.latency_ms_avg, " ms") }}
+      </div>
+    </article>
 
-        <div class="edge-rail-card" data-testid="gateway-fleet-roster">
-          <div class="edge-rail-head">
-            <h2 class="title is-6">Fleet</h2>
-            <span class="tag is-light">{{ filteredGatewayViews.length }}</span>
-          </div>
-          <button
-            v-for="gateway in filteredGatewayViews"
-            :key="gateway.id"
-            type="button"
-            class="edge-fleet-item"
-            :class="{ 'is-active': String(gateway.id) === String(activeGatewayId) }"
-            :data-testid="`gateway-fleet-item-${gateway.id}`"
-            @click="selectGateway(gateway.id, currentView || 'overview')"
-          >
-            <div class="edge-operation-title-row">
-              <strong>{{ gateway.displayLabel }}</strong>
-              <span class="tag is-light" :class="`is-${gateway.statusTone}`">{{ gateway.statusLabel }}</span>
-            </div>
-            <span>{{ gateway.departmentName }}</span>
-            <div class="edge-fleet-meta">
-              <small>{{ gateway.primaryAction }}</small>
-              <small v-if="gateway.active_operation">
-                {{ gateway.active_operation.type }} · {{ gateway.active_operation.summary?.progress || 0 }}%
-              </small>
-            </div>
-          </button>
-          <div v-if="!filteredGatewayViews.length" class="has-text-grey" data-testid="gateway-empty-state">
-            No gateways match the current filter.
-          </div>
-        </div>
+    <div class="edge-gateway-workspace__grid">
+      <aside class="edge-gateway-workspace__roster" data-testid="gateway-fleet-roster">
+        <label class="edge-gateway-workspace__search">
+          <span>Search fleet</span>
+          <input v-model="fleetQuery" class="input" data-testid="gateway-fleet-search" placeholder="Gateway, department, host, or action" />
+        </label>
+
+        <ul class="edge-gateway-workspace__fleet-list">
+          <li v-for="gateway in filteredGateways" :key="gateway.id">
+            <button
+              class="edge-gateway-workspace__fleet-item"
+              :class="{ 'is-selected': String(gateway.id) === String(currentGatewayId || '') }"
+              :data-testid="`gateway-fleet-item-${gateway.id}`"
+              type="button"
+              @click="selectGateway(gateway.id, currentView)"
+            >
+              <span>
+                <strong>{{ gateway.displayLabel }}</strong>
+                <small>{{ gateway.departmentName }}</small>
+              </span>
+              <span class="tag" :class="gateway.statusTone">{{ gateway.statusLabel }}</span>
+            </button>
+          </li>
+          <li v-if="!filteredGateways.length" data-testid="gateway-empty-state">No gateways match the current fleet filter.</li>
+        </ul>
       </aside>
 
-      <main class="edge-v2-main">
-        <section v-if="loading.init" class="edge-state-card">Loading gateway workspace...</section>
+      <main class="edge-gateway-workspace__detail">
+        <section v-if="showLanding" class="edge-gateway-workspace__landing" data-testid="gateway-fleet-landing">
+          <article class="edge-gateway-workspace__panel">
+            <p class="edge-gateway-workspace__eyebrow">Fleet</p>
+            <h3>Edge gateway module</h3>
+            <p v-if="!gateways.length" data-testid="gateway-empty-state">No gateways are currently claimed.</p>
+            <p v-else>Select a gateway from the roster to inspect live status, tasks, logs, inventory, and settings.</p>
+          </article>
 
-        <section v-else-if="unavailableGatewayId" class="edge-state-card" data-testid="gateway-unavailable-state">
-          Gateway {{ unavailableGatewayId }} could not be loaded.
-        </section>
-
-        <section v-else-if="showFleetLanding" class="edge-state-card" data-testid="gateway-fleet-landing">
-          <div class="edge-page-header">
-            <div>
-              <p class="edge-page-kicker">Fleet landing</p>
-              <h2 class="title is-4">Edge Gateways v2</h2>
-              <p class="has-text-grey">Select a gateway from the rail or onboard a new PHP gateway for management v2.</p>
-            </div>
-          </div>
-
-          <div class="edge-overview-grid" data-testid="gateway-fleet-usage">
-            <article
-              v-for="card in fleetUsageCards"
-              :key="card.key"
-              class="edge-stat-card"
-              :data-testid="`gateway-fleet-usage-${card.key}`"
-            >
-              <p class="edge-card-label">{{ card.label }}</p>
-              <strong>{{ card.value }}</strong>
-              <p>{{ card.detail }}</p>
-            </article>
-          </div>
-
-          <div v-if="allowDestructive" class="edge-onboarding-card" data-testid="gateway-onboarding">
-            <div class="edge-panel-head">
-              <h3 class="title is-6">Install new gateway</h3>
-            </div>
-            <div class="edge-inline-form">
-              <select v-model="installerDepartmentId" class="input" data-testid="gateway-installer-department">
-                <option value="">Select department</option>
-                <option v-for="department in departments" :key="department.id" :value="String(department.id)">
-                  {{ department.name }}
-                </option>
-              </select>
-              <input v-model="installerLabel" class="input" data-testid="gateway-installer-label" placeholder="Gateway label" />
-              <button
-                type="button"
-                class="button is-primary"
-                data-testid="gateway-installer-generate"
-                :class="{ 'is-loading': loading.installer }"
-                @click="generateInstaller"
-              >
+          <article v-if="allowDestructive" class="edge-gateway-workspace__panel" data-testid="gateway-onboarding">
+            <p class="edge-gateway-workspace__eyebrow">Install</p>
+            <h3>Claim a new gateway</h3>
+            <div class="edge-gateway-workspace__installer">
+              <div class="select is-fullwidth">
+                <select v-model="installerForm.departmentId" data-testid="gateway-installer-department">
+                  <option value="">Choose department</option>
+                  <option v-for="department in departments" :key="department.id" :value="String(department.id)">
+                    {{ department.name }}
+                  </option>
+                </select>
+              </div>
+              <input v-model="installerForm.label" class="input" data-testid="gateway-installer-label" placeholder="Gateway label" />
+              <button class="button is-dark" type="button" data-testid="gateway-installer-generate" :disabled="loading.installer" @click="generateInstaller">
                 Generate installer
               </button>
-              <button
-                v-if="installerCommand"
-                type="button"
-                class="button is-light"
-                data-testid="gateway-installer-copy"
-                @click="copyInstallerCommand"
-              >
-                {{ installerCopyLabel }}
+              <input class="input" data-testid="gateway-install-command" :value="installerCommand" readonly />
+              <button class="button is-light" type="button" data-testid="gateway-installer-copy" :disabled="!installerCommand" @click="copyInstallerCommand">
+                {{ installerCopyState === "copied" ? "Copied" : "Copy command" }}
               </button>
             </div>
-            <textarea
-              v-if="installerCommand"
-              :value="installerCommand"
-              class="textarea"
-              readonly
-              rows="4"
-              data-testid="gateway-install-command"
-            ></textarea>
-          </div>
+            <div class="edge-gateway-workspace__installer-status" data-testid="gateway-installer-status">
+              <div class="edge-gateway-workspace__installer-status-header">
+                <div>
+                  <p class="edge-gateway-workspace__eyebrow">Install status</p>
+                  <h4 data-testid="gateway-installer-status-step">{{ installerSessionStepLabel }}</h4>
+                </div>
+                <span class="tag" :class="installerSessionTone" data-testid="gateway-installer-status-state">
+                  {{ installerSessionStateLabel }}
+                </span>
+              </div>
+              <p data-testid="gateway-installer-status-message">{{ installerSession.message }}</p>
+              <p data-testid="gateway-installer-status-updated">Last update: {{ formatInstallerDate(installerSession.updated_at) }}</p>
+              <ul v-if="installerSessionRecentEvents.length" class="edge-gateway-workspace__installer-events">
+                <li
+                  v-for="event in installerSessionRecentEvents"
+                  :key="`${event.at || 'pending'}-${event.status || 'PENDING'}-${event.step || 'step'}`"
+                >
+                  <strong>{{ INSTALLER_STATUS_LABELS[String(event.status || '').toUpperCase()] || event.status || "Update" }}</strong>
+                  <span>{{ event.message || event.step || "No detail" }}</span>
+                </li>
+              </ul>
+              <p v-if="installerSession.last_error" class="edge-gateway-workspace__installer-error" data-testid="gateway-installer-status-error">
+                {{ installerSession.last_error }}
+              </p>
+              <details
+                v-if="installerSessionDiagnosticsText"
+                class="edge-gateway-workspace__installer-diagnostics"
+                data-testid="gateway-installer-status-diagnostics"
+              >
+                <summary>Diagnostics</summary>
+                <pre>{{ installerSessionDiagnosticsText }}</pre>
+              </details>
+              <button
+                class="button is-light"
+                type="button"
+                data-testid="gateway-installer-copy-diagnostics"
+                :disabled="!installerSessionDiagnosticsText"
+                @click="copyInstallerDiagnostics"
+              >
+                {{ installerDiagnosticsCopyState === "copied" ? "Copied" : "Copy diagnostics" }}
+              </button>
+            </div>
+          </article>
         </section>
 
-        <section v-else-if="selectedGatewayView" class="edge-detail-shell">
-          <header class="edge-panel">
-            <div class="edge-page-header">
-              <div>
-                <p class="edge-page-kicker">Selected gateway</p>
-                <h2 class="title is-4" data-testid="gateway-detail-header">{{ selectedGatewayView.displayLabel }}</h2>
-                <p class="edge-page-subtitle">
-                  {{ selectedGatewayView.departmentName }} · {{ selectedGatewayView.hostname || "No hostname" }} ·
-                  {{ selectedGatewayView.statusLabel }}
-                </p>
-              </div>
-              <div class="edge-action-group">
-                <span class="tag is-light">{{ selectedGatewayView.discoveryStatusLabel }}</span>
-                <span class="tag is-light">{{ selectedGatewayView.departmentTransportModeLabel }}</span>
-              </div>
+        <section v-else-if="unavailableGatewayId" class="edge-gateway-workspace__panel" data-testid="gateway-unavailable-state">
+          <p class="edge-gateway-workspace__eyebrow">Unavailable</p>
+          <h3>Gateway not found</h3>
+          <p>The selected gateway id {{ unavailableGatewayId }} is no longer available.</p>
+        </section>
+
+        <section v-else-if="selectedGatewayView" class="edge-gateway-workspace__selected">
+          <header class="edge-gateway-workspace__header" data-testid="gateway-detail-header">
+            <div>
+              <p class="edge-gateway-workspace__eyebrow">Selected gateway</p>
+              <h2>{{ selectedGatewayView.displayLabel }}</h2>
+              <p>{{ selectedGatewayView.departmentName }} - {{ selectedGatewayView.hostname || "No hostname" }} - {{ selectedGatewayView.statusLabel }}</p>
+            </div>
+            <div class="edge-gateway-workspace__header-actions">
+              <span class="tag" :class="selectedGatewayView.statusTone">{{ selectedGatewayView.statusLabel }}</span>
+              <button
+                v-if="!routeDriven"
+                class="button is-light"
+                type="button"
+                data-testid="gateway-open-full-page"
+                @click="emit('open-gateway-page', selectedGatewayView.id)"
+              >
+                Open full page
+              </button>
             </div>
           </header>
 
-          <nav class="tabs is-boxed edge-tab-nav" data-testid="gateway-tab-nav">
-            <ul>
-              <li v-for="tab in tabs" :key="tab.id" :class="{ 'is-active': currentView === tab.id }">
-                <button type="button" class="edge-tab-button" :data-testid="`gateway-tab-${tab.id}`" @click="setView(tab.id)">
-                  {{ tab.label }}
-                </button>
-              </li>
-            </ul>
+          <div
+            v-if="LIVE_STREAM_SCOPES.includes(currentView)"
+            class="edge-gateway-workspace__banner"
+            data-testid="gateway-stream-banner"
+          >
+            Broker stream: {{ liveState.streamStatus }}<span v-if="liveState.streamError"> - {{ liveState.streamError }}</span>
+          </div>
+
+          <nav class="edge-gateway-workspace__tabs" data-testid="gateway-tab-nav">
+            <button
+              v-for="tab in tabs"
+              :key="tab.id"
+              class="button is-light"
+              :class="{ 'is-dark': currentView === tab.id }"
+              :data-testid="`gateway-tab-${tab.id}`"
+              type="button"
+              @click="selectTab(tab.id)"
+            >
+              {{ tab.label }}
+            </button>
           </nav>
 
-          <EdgeGatewayOverviewPage
-            v-if="currentView === 'overview'"
-            :gateway="selectedGatewayView"
-            :show-open-full-page="Boolean(props.departmentId)"
-            @open-full-page="emit('open-gateway-page', selectedGatewayView.id)"
-          />
+          <section v-if="pageLoading" class="edge-gateway-workspace__panel edge-gateway-workspace__loading" data-testid="gateway-page-loading">
+            <p class="edge-gateway-workspace__eyebrow">Loading</p>
+            <h3>Refreshing {{ currentView }}</h3>
+            <p>The workspace is loading the latest edge gateway state.</p>
+          </section>
 
+          <EdgeGatewayOverviewPage v-else-if="currentView === 'overview'" :gateway="selectedGatewayView" />
+          <EdgeGatewayTasksPage
+            v-else-if="currentView === 'tasks'"
+            :operations="operations"
+            :recent-commands="recentCommands"
+            :operation-summary="operationSummary"
+            :selected-operation-id="selectedOperationId"
+            :operation-events="operationEvents"
+            :busy="loading.operation || loading.cancel"
+            :allow-destructive="allowDestructive"
+            :update-target-version="updateTargetVersion"
+            :stream-status="liveState.streamStatus"
+            :stream-error="liveState.streamError"
+            @queue-discovery="triggerDiscovery"
+            @queue-update="triggerUpdate"
+            @queue-uninstall="triggerUninstall"
+            @cancel-operation="cancelOperation"
+            @retry-operation="retryOperation"
+            @select-operation="selectOperationFromList"
+            @update-target-version="updateTargetVersion = $event"
+          />
+          <EdgeGatewayLogsPage
+            v-else-if="currentView === 'logs'"
+            :timeline="logsTimeline"
+            :shell-sessions="shellSessions"
+            :stream-status="liveState.streamStatus"
+            :stream-error="liveState.streamError"
+          />
+          <EdgeGatewayStatisticsPage
+            v-else-if="currentView === 'statistics'"
+            :statistics="statisticsPayload"
+            :stream-status="liveState.streamStatus"
+            :stream-error="liveState.streamError"
+          />
+          <EdgeGatewayTerminalPage
+            v-else-if="currentView === 'terminal'"
+            :status="liveState.shellStatus"
+            :error="liveState.shellError"
+            :transcript="terminalTranscript"
+            :command="terminalCommand"
+            :session="liveState.shellSession"
+            :busy="loading.terminal"
+            @connect="connectTerminal"
+            @disconnect="disconnectTerminal()"
+            @send-command="sendTerminalCommand"
+            @update-command="terminalCommand = $event"
+            @shortcut="runTerminalShortcut"
+          />
           <EdgeGatewayInventoryPage
             v-else-if="currentView === 'inventory'"
             :gateway="selectedGatewayView"
-            :editable-bindings="editableBindings"
-            :loading-discovery="loading.discovery || loading.operation"
-            :loading-bindings="loading.bindings"
-            :can-edit="true"
-            @queue-discovery="queueDiscovery"
-            @add-binding="addBindingRow"
-            @remove-binding="removeBindingRow"
+            :bindings="bindingDrafts"
+            :busy="loading.operation || loading.bindings"
+            @trigger-discovery="triggerDiscovery"
+            @add-binding="addBinding"
+            @remove-binding="removeBinding"
             @update-binding="updateBinding"
-            @save-bindings="saveBindingsAction"
+            @save-bindings="saveBindings"
           />
-
-          <EdgeGatewayOperationsPage
-            v-else-if="currentView === 'operations'"
-            :gateway="selectedGatewayView"
-            :allow-destructive="allowDestructive"
-            :loading-create="loading.operation"
-            :loading-cancel="loading.operationCancel"
-            @run-operation="queueOperation"
-            @cancel-operation="cancelOperation"
-          />
-
-          <EdgeGatewayManagePage
-            v-else-if="currentView === 'manage' && allowDestructive"
+          <EdgeGatewaySettingsPage
+            v-else
             :gateway="selectedGatewayView"
+            :metadata-form="metadataForm"
+            :transport-mode="transportMode"
+            :rotate-confirmation="rotateConfirmation"
+            :delete-confirmation="deleteConfirmation"
+            :credential-bundle="credentialBundle"
+            :busy="loading.metadata || loading.cutover || loading.rotate || loading.delete"
             :loading-metadata="loading.metadata"
             :loading-cutover="loading.cutover"
             :loading-rotate="loading.rotate"
             :loading-delete="loading.delete"
-            :rotate-bundle="rotateBundle"
+            @update-metadata="updateMetadataField"
             @save-metadata="saveMetadata"
-            @apply-cutover="applyCutover"
+            @update-transport-mode="transportMode = $event"
+            @save-transport-mode="saveCutover"
+            @update-rotate-confirmation="rotateConfirmation = $event"
             @rotate-credentials="rotateCredentials"
-            @delete-gateway="removeGateway"
+            @update-delete-confirmation="deleteConfirmation = $event"
+            @delete-gateway="deleteGatewayRegistration"
           />
         </section>
       </main>
@@ -1325,181 +1667,175 @@ onUnmounted(() => {
 </template>
 
 <style scoped>
-.edge-v2-shell {
+.edge-gateway-workspace {
   display: grid;
   gap: 1rem;
 }
 
-.edge-summary-strip {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.75rem;
-}
-
-.edge-v2-layout {
-  display: grid;
-  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
-  gap: 1rem;
-}
-
-.edge-v2-rail,
-.edge-v2-main,
-.edge-page,
-.edge-state-card,
-.edge-onboarding-card,
-.edge-detail-shell,
-.edge-error-banner,
-.edge-error-actions,
-.edge-fleet-meta,
-.edge-progress-block,
-.edge-detail-grid,
-.edge-detail-card,
-.edge-operation-detail {
-  display: grid;
-  gap: 1rem;
-}
-
-.edge-rail-card,
-.edge-state-card,
-.edge-onboarding-card,
-.edge-panel,
-.edge-stat-card {
-  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 249, 252, 0.98));
-  border: 1px solid rgba(32, 41, 58, 0.08);
-  border-radius: 18px;
-  box-shadow: 0 14px 35px rgba(32, 41, 58, 0.06);
+.edge-gateway-workspace__error,
+.edge-gateway-workspace__usage,
+.edge-gateway-workspace__panel,
+.edge-gateway-workspace__roster,
+.edge-gateway-workspace__detail,
+.edge-gateway-workspace__selected {
+  border: 1px solid #e5e7eb;
+  border-radius: 20px;
+  background: #ffffff;
   padding: 1rem;
+  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.07);
 }
 
-.edge-rail-head,
-.edge-panel-head,
-.edge-page-header,
-.edge-operation-title-row,
-.edge-progress-meta {
+.edge-gateway-workspace__detail {
+  background: linear-gradient(180deg, #fffdf8 0%, #ffffff 35%);
+}
+
+.edge-gateway-workspace__error h3,
+.edge-gateway-workspace__panel h3,
+.edge-gateway-workspace__selected h2 {
+  margin: 0 0 0.35rem;
+  color: #0f172a;
+}
+
+.edge-gateway-workspace__error pre {
+  white-space: pre-wrap;
+  font-size: 0.85rem;
+}
+
+.edge-gateway-workspace__summary,
+.edge-gateway-workspace__tabs,
+.edge-gateway-workspace__header,
+.edge-gateway-workspace__header-actions,
+.edge-gateway-workspace__installer,
+.edge-gateway-workspace__banner {
+  display: flex;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+}
+
+.edge-gateway-workspace__banner {
+  margin-bottom: 1rem;
+  padding: 0.85rem 1rem;
+  border-radius: 14px;
+  background: #fff7ed;
+  border: 1px solid #fdba74;
+  color: #9a3412;
+}
+
+.edge-gateway-workspace__usage {
+  display: grid;
+  gap: 0.35rem;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  color: #334155;
+}
+
+.edge-gateway-workspace__grid {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
+  align-items: start;
+}
+
+.edge-gateway-workspace__search {
+  display: grid;
+  gap: 0.35rem;
+  margin-bottom: 1rem;
+  color: #475569;
+}
+
+.edge-gateway-workspace__fleet-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: grid;
+  gap: 0.65rem;
+}
+
+.edge-gateway-workspace__fleet-item {
+  width: 100%;
   display: flex;
   justify-content: space-between;
-  align-items: flex-start;
   gap: 1rem;
-}
-
-.edge-page-kicker,
-.edge-card-label {
-  font-size: 0.8rem;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  color: #6a7a90;
-}
-
-.edge-page-subtitle {
-  color: #64748b;
-}
-
-.edge-fleet-item,
-.edge-operation-item,
-.edge-tab-button {
-  width: 100%;
-  border: 0;
-  background: transparent;
+  align-items: center;
+  padding: 0.85rem 0.95rem;
+  border: 1px solid #e5e7eb;
+  border-radius: 16px;
+  background: #f8fafc;
+  cursor: pointer;
   text-align: left;
 }
 
-.edge-fleet-item,
-.edge-operation-item {
-  display: grid;
-  gap: 0.35rem;
-  padding: 0.85rem;
-  border-radius: 14px;
-  border: 1px solid rgba(32, 41, 58, 0.08);
-  margin-bottom: 0.65rem;
+.edge-gateway-workspace__fleet-item.is-selected {
+  border-color: #0f172a;
+  background: #e2e8f0;
 }
 
-.edge-fleet-item.is-active,
-.edge-operation-item.is-active {
-  border-color: rgba(15, 118, 110, 0.35);
-  background: rgba(15, 118, 110, 0.06);
+.edge-gateway-workspace__fleet-item strong,
+.edge-gateway-workspace__header h2 {
+  display: block;
 }
 
-.edge-overview-grid,
-.edge-page-columns,
-.edge-inline-form {
+.edge-gateway-workspace__fleet-item small,
+.edge-gateway-workspace__header p,
+.edge-gateway-workspace__usage,
+.edge-gateway-workspace__panel p {
+  color: #475569;
+}
+
+.edge-gateway-workspace__landing {
   display: grid;
   gap: 1rem;
 }
 
-.edge-overview-grid {
+.edge-gateway-workspace__installer {
+  display: grid;
+  gap: 0.75rem;
   grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
 }
 
-.edge-page-columns,
-.edge-detail-grid {
-  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+.edge-gateway-workspace__installer-status {
+  margin-top: 1rem;
+  padding: 1rem;
+  border-radius: 16px;
+  background: #f8fafc;
 }
 
-.edge-inline-form {
-  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
-}
-
-.edge-diagnostics,
-.edge-audit-list,
-.edge-event-list,
-.edge-binding-list,
-.edge-operation-list {
-  display: grid;
-  gap: 0.75rem;
-}
-
-.edge-diagnostic-item,
-.edge-audit-item,
-.edge-event-item,
-.edge-binding-row,
-.edge-detail-card {
-  display: grid;
-  gap: 0.65rem;
-  padding: 0.8rem;
-  border: 1px solid rgba(32, 41, 58, 0.08);
-  border-radius: 12px;
-}
-
-.edge-binding-row {
-  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
-  align-items: center;
-}
-
-.edge-checkbox {
-  margin: 0.75rem 0;
-}
-
-.edge-tab-nav .edge-tab-button {
-  padding: 0.85rem 1rem;
-}
-
-.edge-action-group {
+.edge-gateway-workspace__installer-status-header {
   display: flex;
-  flex-wrap: wrap;
-  gap: 0.75rem;
+  justify-content: space-between;
+  gap: 1rem;
+  align-items: flex-start;
 }
 
-.edge-banner {
-  margin: 0;
-}
-
-.edge-credential-bundle {
+.edge-gateway-workspace__installer-events {
+  margin: 1rem 0 0;
+  padding: 0;
+  list-style: none;
   display: grid;
-  gap: 0.75rem;
+  gap: 0.5rem;
 }
 
-.edge-json-block {
-  margin: 0;
-  padding: 0.75rem;
-  border-radius: 12px;
-  background: rgba(15, 23, 42, 0.06);
-  overflow: auto;
-  white-space: pre-wrap;
-  word-break: break-word;
+.edge-gateway-workspace__installer-error {
+  color: #b91c1c;
 }
 
-@media (max-width: 960px) {
-  .edge-v2-layout {
+.edge-gateway-workspace__eyebrow {
+  margin: 0 0 0.35rem;
+  font-size: 0.78rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: #64748b;
+}
+
+.edge-gateway-workspace__selected {
+  background: linear-gradient(180deg, #ffffff 0%, #fffaf0 100%);
+}
+
+.edge-gateway-workspace__loading {
+  background: linear-gradient(90deg, #f8fafc 0%, #eff6ff 100%);
+}
+
+@media (max-width: 1024px) {
+  .edge-gateway-workspace__grid {
     grid-template-columns: 1fr;
   }
 }
diff --git a/src/features/edgeGateways/EdgeGatewaySettingsPage.vue b/src/features/edgeGateways/EdgeGatewaySettingsPage.vue
new file mode 100644
index 00000000..a25d03b8
--- /dev/null
+++ b/src/features/edgeGateways/EdgeGatewaySettingsPage.vue
@@ -0,0 +1,256 @@
+<script setup>
+import { computed, ref, watch } from "vue";
+
+const props = defineProps({
+  gateway: {
+    type: Object,
+    required: true,
+  },
+  metadataForm: {
+    type: Object,
+    default: null,
+  },
+  transportMode: {
+    type: String,
+    default: null,
+  },
+  rotateConfirmation: {
+    type: String,
+    default: "",
+  },
+  deleteConfirmation: {
+    type: String,
+    default: "",
+  },
+  credentialBundle: {
+    type: Object,
+    default: null,
+  },
+  busy: {
+    type: Boolean,
+    default: false,
+  },
+  loadingMetadata: {
+    type: Boolean,
+    default: false,
+  },
+  loadingCutover: {
+    type: Boolean,
+    default: false,
+  },
+  loadingRotate: {
+    type: Boolean,
+    default: false,
+  },
+  loadingDelete: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits([
+  "update-metadata",
+  "save-metadata",
+  "update-transport-mode",
+  "save-transport-mode",
+  "update-rotate-confirmation",
+  "rotate-credentials",
+  "update-delete-confirmation",
+  "delete-gateway",
+]);
+
+const metadataLabel = ref("");
+const metadataPrimary = ref(false);
+const localTransportMode = ref("gateway");
+const localRotateConfirmation = ref("");
+const localDeleteConfirmation = ref("");
+
+const gatewayLabel = computed(() => String(props.gateway?.label || props.gateway?.hostname || "").trim());
+const metadataBusy = computed(() => props.busy || props.loadingMetadata);
+const cutoverBusy = computed(() => props.busy || props.loadingCutover);
+const rotateBusy = computed(
+  () => props.busy || props.loadingRotate || localRotateConfirmation.value.trim().toUpperCase() !== "ROTATE"
+);
+const deleteBusy = computed(
+  () => props.busy || props.loadingDelete || localDeleteConfirmation.value.trim() !== gatewayLabel.value
+);
+
+watch(
+  () => [props.gateway?.id, props.gateway?.label, props.gateway?.is_primary, props.metadataForm],
+  () => {
+    metadataLabel.value = String(props.metadataForm?.label ?? props.gateway?.label ?? "");
+    metadataPrimary.value = Boolean(props.metadataForm?.is_primary ?? props.gateway?.is_primary);
+  },
+  { immediate: true }
+);
+
+watch(
+  () => [props.gateway?.id, props.gateway?.department_transport_mode, props.transportMode],
+  () => {
+    localTransportMode.value = props.transportMode || props.gateway?.department_transport_mode || "gateway";
+  },
+  { immediate: true }
+);
+
+watch(
+  () => [props.gateway?.id, props.rotateConfirmation],
+  () => {
+    localRotateConfirmation.value = props.rotateConfirmation || "";
+  },
+  { immediate: true }
+);
+
+watch(
+  () => [props.gateway?.id, props.deleteConfirmation],
+  () => {
+    localDeleteConfirmation.value = props.deleteConfirmation || "";
+  },
+  { immediate: true }
+);
+
+const updateMetadataField = (field, value) => {
+  if (field === "label") {
+    metadataLabel.value = value;
+  }
+  if (field === "is_primary") {
+    metadataPrimary.value = Boolean(value);
+  }
+  emit("update-metadata", field, value);
+};
+</script>
+
+<template>
+  <section class="edge-gateway-settings" data-testid="gateway-settings-page">
+    <article class="edge-gateway-settings__panel">
+      <p class="edge-gateway-settings__eyebrow">Identity</p>
+      <h3>Gateway metadata</h3>
+      <div class="edge-gateway-settings__grid">
+        <input
+          class="input"
+          data-testid="gateway-metadata-label"
+          :value="metadataLabel"
+          placeholder="Gateway label"
+          @input="updateMetadataField('label', $event.target.value)"
+        />
+        <label class="edge-gateway-settings__checkbox">
+          <input
+            type="checkbox"
+            :checked="metadataPrimary"
+            @change="updateMetadataField('is_primary', $event.target.checked)"
+          />
+          Primary gateway for this department
+        </label>
+      </div>
+      <div class="edge-gateway-settings__actions">
+        <button class="button is-dark" type="button" data-testid="gateway-metadata-save" :disabled="metadataBusy" @click="emit('save-metadata')">
+          Save metadata
+        </button>
+      </div>
+    </article>
+
+    <article class="edge-gateway-settings__panel">
+      <p class="edge-gateway-settings__eyebrow">Cutover</p>
+      <h3>Relay execution path</h3>
+      <div class="select is-fullwidth">
+        <select :value="localTransportMode" data-testid="gateway-transport-mode" @change="emit('update-transport-mode', $event.target.value)">
+          <option value="gateway">Gateway first</option>
+          <option value="cloud">Cloud only</option>
+        </select>
+      </div>
+      <div class="edge-gateway-settings__actions">
+        <button class="button is-dark" type="button" :disabled="cutoverBusy" @click="emit('save-transport-mode')">
+          Save cutover mode
+        </button>
+      </div>
+    </article>
+
+    <article class="edge-gateway-settings__panel">
+      <p class="edge-gateway-settings__eyebrow">Credentials</p>
+      <h3>Rotate agent credentials</h3>
+      <p>Type <strong>ROTATE</strong> to issue a fresh agent bundle and broker token.</p>
+      <input
+        class="input"
+        data-testid="gateway-rotate-confirmation"
+        :value="localRotateConfirmation"
+        placeholder="Type ROTATE"
+        @input="localRotateConfirmation = $event.target.value; emit('update-rotate-confirmation', $event.target.value)"
+      />
+      <div class="edge-gateway-settings__actions">
+        <button class="button is-warning is-light" type="button" data-testid="gateway-rotate-credentials" :disabled="rotateBusy" @click="emit('rotate-credentials')">
+          Rotate credentials
+        </button>
+      </div>
+
+      <div v-if="credentialBundle" class="edge-gateway-settings__bundle" data-testid="gateway-credential-bundle">
+        <p><strong>Token:</strong> {{ credentialBundle.agent_token || credentialBundle.token || "Unavailable" }}</p>
+        <p><strong>Stack service:</strong> {{ credentialBundle.stackServiceName || credentialBundle.stack_service_name || "Unavailable" }}</p>
+        <p><strong>Compose file:</strong> {{ credentialBundle.composeFileName || credentialBundle.compose_file_name || "Unavailable" }}</p>
+      </div>
+    </article>
+
+    <article class="edge-gateway-settings__panel">
+      <p class="edge-gateway-settings__eyebrow">Deletion</p>
+      <h3>Delete gateway registration</h3>
+      <p>Type the current gateway label to confirm permanent removal.</p>
+      <input
+        class="input"
+        data-testid="gateway-delete-confirmation"
+        :value="localDeleteConfirmation"
+        :placeholder="gatewayLabel || 'Gateway label'"
+        @input="localDeleteConfirmation = $event.target.value; emit('update-delete-confirmation', $event.target.value)"
+      />
+      <div class="edge-gateway-settings__actions">
+        <button class="button is-danger" type="button" data-testid="gateway-delete" :disabled="deleteBusy" @click="emit('delete-gateway')">
+          Delete gateway
+        </button>
+      </div>
+    </article>
+  </section>
+</template>
+
+<style scoped>
+.edge-gateway-settings {
+  display: grid;
+  gap: 1rem;
+}
+
+.edge-gateway-settings__panel {
+  border: 1px solid #e5e7eb;
+  border-radius: 18px;
+  background: #ffffff;
+  padding: 1rem;
+  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.06);
+}
+
+.edge-gateway-settings__eyebrow {
+  margin: 0 0 0.35rem;
+  font-size: 0.78rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: #64748b;
+}
+
+.edge-gateway-settings__grid {
+  display: grid;
+  gap: 0.75rem;
+}
+
+.edge-gateway-settings__checkbox {
+  display: flex;
+  gap: 0.65rem;
+  align-items: center;
+}
+
+.edge-gateway-settings__actions {
+  margin-top: 1rem;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.edge-gateway-settings__bundle {
+  margin-top: 1rem;
+  padding: 1rem;
+  border-radius: 14px;
+  background: #f8fafc;
+}
+</style>
diff --git a/src/features/edgeGateways/EdgeGatewayStatisticsPage.vue b/src/features/edgeGateways/EdgeGatewayStatisticsPage.vue
new file mode 100644
index 00000000..2bd00f05
--- /dev/null
+++ b/src/features/edgeGateways/EdgeGatewayStatisticsPage.vue
@@ -0,0 +1,164 @@
+<script setup>
+import { computed } from "vue";
+
+const props = defineProps({
+  statistics: {
+    type: Object,
+    default: () => ({}),
+  },
+  streamStatus: {
+    type: String,
+    default: "idle",
+  },
+  streamError: {
+    type: String,
+    default: "",
+  },
+});
+
+const formatMetric = (value, suffix = "") => (Number.isFinite(Number(value)) ? `${Number(value)}${suffix}` : "No data");
+
+const cards = computed(() => {
+  const metrics = props.statistics?.system_metrics || {};
+  const backlog = props.statistics?.backlog_depth || {};
+  return [
+    { label: "Latency", value: formatMetric(metrics.latency_ms, " ms") },
+    { label: "CPU", value: formatMetric(metrics.cpu_usage_pct, "%") },
+    { label: "Memory", value: formatMetric(metrics.memory_usage_pct, "%") },
+    { label: "Disk", value: formatMetric(metrics.disk_usage_pct, "%") },
+    { label: "Queued tasks", value: formatMetric(backlog.operations_pending) },
+    { label: "Command backlog", value: formatMetric(backlog.commands_pending) },
+  ];
+});
+
+const channelStatus = computed(() => props.statistics?.channel_status || {});
+const transportHealth = computed(() => props.statistics?.transport_health || {});
+const versionDrift = computed(() => props.statistics?.version_drift || {});
+const fleetUsage = computed(() => props.statistics?.fleet_usage || {});
+</script>
+
+<template>
+  <section class="edge-gateway-statistics" data-testid="gateway-statistics-page">
+    <article class="edge-gateway-statistics__panel">
+      <p class="edge-gateway-statistics__eyebrow">Live metrics</p>
+      <h3>Gateway statistics</h3>
+      <p>{{ streamError || `Broker stream state: ${streamStatus}` }}</p>
+      <div class="edge-gateway-statistics__cards">
+        <article v-for="card in cards" :key="card.label" class="edge-gateway-statistics__card">
+          <span>{{ card.label }}</span>
+          <strong>{{ card.value }}</strong>
+        </article>
+      </div>
+    </article>
+
+    <div class="edge-gateway-statistics__grid">
+      <article class="edge-gateway-statistics__panel">
+        <p class="edge-gateway-statistics__eyebrow">Transport</p>
+        <h3>Broker and relay health</h3>
+        <ul class="edge-gateway-statistics__list" data-testid="gateway-statistics-transport">
+          <li>
+            <span>Broker connected</span>
+            <strong>{{ transportHealth.broker_connected ? "Yes" : "No" }}</strong>
+          </li>
+          <li>
+            <span>Command transport</span>
+            <strong>{{ transportHealth.command_transport || "Unknown" }}</strong>
+          </li>
+          <li>
+            <span>Channel status</span>
+            <strong>{{ channelStatus.state || "Unknown" }}</strong>
+          </li>
+        </ul>
+      </article>
+
+      <article class="edge-gateway-statistics__panel">
+        <p class="edge-gateway-statistics__eyebrow">Versioning</p>
+        <h3>Drift and rollout</h3>
+        <ul class="edge-gateway-statistics__list" data-testid="gateway-statistics-version">
+          <li>
+            <span>Installed</span>
+            <strong>{{ versionDrift.installed_version || "Unknown" }}</strong>
+          </li>
+          <li>
+            <span>Target</span>
+            <strong>{{ versionDrift.target_version || "None" }}</strong>
+          </li>
+          <li>
+            <span>Drifted</span>
+            <strong>{{ versionDrift.is_drifted ? "Yes" : "No" }}</strong>
+          </li>
+        </ul>
+      </article>
+
+      <article class="edge-gateway-statistics__panel">
+        <p class="edge-gateway-statistics__eyebrow">Department scope</p>
+        <h3>Fleet usage</h3>
+        <ul class="edge-gateway-statistics__list" data-testid="gateway-statistics-fleet">
+          <li>
+            <span>Gateways</span>
+            <strong>{{ fleetUsage.gateways?.total || 0 }}</strong>
+          </li>
+          <li>
+            <span>Inventory</span>
+            <strong>{{ fleetUsage.inventory?.total || 0 }}</strong>
+          </li>
+          <li>
+            <span>Bindings</span>
+            <strong>{{ fleetUsage.bindings?.total || 0 }}</strong>
+          </li>
+        </ul>
+      </article>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.edge-gateway-statistics {
+  display: grid;
+  gap: 1rem;
+}
+
+.edge-gateway-statistics__panel,
+.edge-gateway-statistics__card {
+  border: 1px solid #e5e7eb;
+  border-radius: 18px;
+  background: #ffffff;
+  padding: 1rem;
+  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.06);
+}
+
+.edge-gateway-statistics__eyebrow {
+  margin: 0 0 0.35rem;
+  font-size: 0.78rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: #64748b;
+}
+
+.edge-gateway-statistics__cards,
+.edge-gateway-statistics__grid {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+}
+
+.edge-gateway-statistics__card {
+  display: grid;
+  gap: 0.35rem;
+  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
+}
+
+.edge-gateway-statistics__list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: grid;
+  gap: 0.65rem;
+}
+
+.edge-gateway-statistics__list li {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+}
+</style>
diff --git a/src/features/edgeGateways/EdgeGatewayTasksPage.vue b/src/features/edgeGateways/EdgeGatewayTasksPage.vue
new file mode 100644
index 00000000..33bb5715
--- /dev/null
+++ b/src/features/edgeGateways/EdgeGatewayTasksPage.vue
@@ -0,0 +1,277 @@
+<script setup>
+import { computed } from "vue";
+
+const props = defineProps({
+  operations: {
+    type: Array,
+    default: () => [],
+  },
+  recentCommands: {
+    type: Array,
+    default: () => [],
+  },
+  operationSummary: {
+    type: Object,
+    default: () => ({}),
+  },
+  selectedOperationId: {
+    type: [Number, String],
+    default: null,
+  },
+  operationEvents: {
+    type: Array,
+    default: () => [],
+  },
+  busy: {
+    type: Boolean,
+    default: false,
+  },
+  allowDestructive: {
+    type: Boolean,
+    default: true,
+  },
+  updateTargetVersion: {
+    type: String,
+    default: "",
+  },
+  streamStatus: {
+    type: String,
+    default: "idle",
+  },
+  streamError: {
+    type: String,
+    default: "",
+  },
+});
+
+const emit = defineEmits([
+  "queue-discovery",
+  "queue-update",
+  "queue-uninstall",
+  "cancel-operation",
+  "retry-operation",
+  "select-operation",
+  "update-target-version",
+]);
+
+const selectedOperation = computed(
+  () => props.operations.find((operation) => String(operation.id) === String(props.selectedOperationId)) || null
+);
+const activeOperation = computed(
+  () =>
+    props.operations.find((operation) =>
+      ["PENDING", "IN_PROGRESS", "CANCEL_REQUESTED"].includes(String(operation.status || ""))
+    ) || null
+);
+const streamLabel = computed(() =>
+  ({
+    open: "Live",
+    connecting: "Connecting",
+    error: "Reconnect needed",
+    closed: "Closed",
+    idle: "Idle",
+  }[String(props.streamStatus || "").toLowerCase()] || "Idle")
+);
+</script>
+
+<template>
+  <section class="edge-gateway-tasks" data-testid="gateway-tasks-page">
+    <div class="edge-gateway-tasks__cards">
+      <article class="edge-gateway-tasks__card">
+        <p class="edge-gateway-tasks__eyebrow">Queue state</p>
+        <h3>{{ activeOperation ? activeOperation.type : "No active task" }}</h3>
+        <p>{{ activeOperation ? activeOperation.status : "The gateway queue is clear." }}</p>
+      </article>
+      <article class="edge-gateway-tasks__card">
+        <p class="edge-gateway-tasks__eyebrow">Recent summary</p>
+        <h3>{{ operationSummary.completed || 0 }} completed</h3>
+        <p>{{ operationSummary.failed || 0 }} failed - {{ operationSummary.pending || 0 }} pending</p>
+      </article>
+      <article class="edge-gateway-tasks__card" data-testid="gateway-task-stream-status">
+        <p class="edge-gateway-tasks__eyebrow">Live stream</p>
+        <h3>{{ streamLabel }}</h3>
+        <p>{{ streamError || "Task updates are driven by the broker stream." }}</p>
+      </article>
+    </div>
+
+    <article class="edge-gateway-tasks__panel">
+      <header class="edge-gateway-tasks__toolbar">
+        <div>
+          <p class="edge-gateway-tasks__eyebrow">Actions</p>
+          <h3>Task control</h3>
+        </div>
+        <div class="edge-gateway-tasks__actions">
+          <button class="button is-dark" type="button" data-testid="gateway-operation-discovery" :disabled="busy" @click="emit('queue-discovery')">
+            Discovery
+          </button>
+          <input
+            class="input"
+            data-testid="gateway-update-target-version"
+            :value="updateTargetVersion"
+            placeholder="Target version"
+            @input="emit('update-target-version', $event.target.value)"
+          />
+          <button class="button is-dark" type="button" data-testid="gateway-operation-update" :disabled="busy || !allowDestructive" @click="emit('queue-update')">
+            Update
+          </button>
+          <button
+            v-if="allowDestructive"
+            class="button is-danger is-light"
+            type="button"
+            data-testid="gateway-operation-uninstall"
+            :disabled="busy"
+            @click="emit('queue-uninstall')"
+          >
+            Uninstall
+          </button>
+          <button
+            v-if="activeOperation"
+            class="button is-warning is-light"
+            type="button"
+            data-testid="gateway-operation-cancel"
+            :disabled="busy"
+            @click="emit('cancel-operation', activeOperation)"
+          >
+            Cancel
+          </button>
+        </div>
+      </header>
+    </article>
+
+    <div class="edge-gateway-tasks__grid">
+      <article class="edge-gateway-tasks__panel">
+        <p class="edge-gateway-tasks__eyebrow">Operations</p>
+        <h3>Gateway tasks</h3>
+        <ul class="edge-gateway-tasks__list" data-testid="gateway-operations-list">
+          <li
+            v-for="operation in operations"
+            :key="operation.id"
+            :class="{ 'is-selected': String(operation.id) === String(selectedOperationId) }"
+          >
+            <button class="edge-gateway-tasks__row" type="button" @click="emit('select-operation', operation)">
+              <span>
+                <strong>{{ operation.type }}</strong>
+                <small>#{{ operation.id }}</small>
+              </span>
+              <span>{{ operation.status }}</span>
+            </button>
+          </li>
+          <li v-if="!operations.length">No gateway tasks have been recorded yet.</li>
+        </ul>
+      </article>
+
+      <article class="edge-gateway-tasks__panel">
+        <p class="edge-gateway-tasks__eyebrow">Timeline</p>
+        <h3>Selected task events</h3>
+        <ul class="edge-gateway-tasks__list" data-testid="gateway-operation-events">
+          <li v-for="event in operationEvents" :key="event.id || `${event.code}-${event.created_at}`">
+            <span>
+              <strong>{{ event.level || event.code || "INFO" }}</strong>
+              <small v-if="event.created_at">{{ event.created_at }}</small>
+            </span>
+            <span>{{ event.message || event.code || "No event message" }}</span>
+          </li>
+          <li v-if="!operationEvents.length">No task events selected.</li>
+        </ul>
+
+        <div v-if="selectedOperation?.summary?.retryable" class="edge-gateway-tasks__retry">
+          <button
+            class="button is-light"
+            type="button"
+            data-testid="gateway-operation-retry"
+            :disabled="busy"
+            @click="emit('retry-operation', selectedOperation)"
+          >
+            Retry selected task
+          </button>
+        </div>
+      </article>
+    </div>
+
+    <article class="edge-gateway-tasks__panel">
+      <p class="edge-gateway-tasks__eyebrow">Command backlog</p>
+      <h3>Recent command jobs</h3>
+      <ul class="edge-gateway-tasks__list" data-testid="gateway-recent-commands">
+        <li v-for="command in recentCommands" :key="command.id || `${command.command_type}-${command.created_at}`">
+          <span>
+            <strong>{{ command.command_type || command.type || "COMMAND" }}</strong>
+            <small v-if="command.created_at">{{ command.created_at }}</small>
+          </span>
+          <span>{{ command.status || command.state || "PENDING" }}</span>
+        </li>
+        <li v-if="!recentCommands.length">No recent command jobs.</li>
+      </ul>
+    </article>
+  </section>
+</template>
+
+<style scoped>
+.edge-gateway-tasks {
+  display: grid;
+  gap: 1rem;
+}
+
+.edge-gateway-tasks__cards,
+.edge-gateway-tasks__grid {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+}
+
+.edge-gateway-tasks__card,
+.edge-gateway-tasks__panel {
+  border: 1px solid #e5e7eb;
+  border-radius: 18px;
+  background: #ffffff;
+  padding: 1rem;
+  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.06);
+}
+
+.edge-gateway-tasks__eyebrow {
+  margin: 0 0 0.35rem;
+  font-size: 0.78rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: #64748b;
+}
+
+.edge-gateway-tasks__toolbar,
+.edge-gateway-tasks__actions {
+  display: flex;
+  gap: 0.75rem;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+
+.edge-gateway-tasks__list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: grid;
+  gap: 0.5rem;
+}
+
+.edge-gateway-tasks__row {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  align-items: center;
+  padding: 0.85rem 0.9rem;
+  border: 1px solid #e5e7eb;
+  border-radius: 14px;
+  background: #f8fafc;
+  cursor: pointer;
+  text-align: left;
+}
+
+.edge-gateway-tasks__list li.is-selected .edge-gateway-tasks__row {
+  border-color: #0f172a;
+  background: #e2e8f0;
+}
+
+.edge-gateway-tasks__retry {
+  margin-top: 1rem;
+}
+</style>
diff --git a/src/features/edgeGateways/EdgeGatewayTerminalPage.vue b/src/features/edgeGateways/EdgeGatewayTerminalPage.vue
new file mode 100644
index 00000000..59884272
--- /dev/null
+++ b/src/features/edgeGateways/EdgeGatewayTerminalPage.vue
@@ -0,0 +1,170 @@
+<script setup>
+const props = defineProps({
+  status: {
+    type: String,
+    default: "idle",
+  },
+  error: {
+    type: String,
+    default: "",
+  },
+  transcript: {
+    type: String,
+    default: "",
+  },
+  command: {
+    type: String,
+    default: "",
+  },
+  session: {
+    type: Object,
+    default: null,
+  },
+  busy: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits([
+  "connect",
+  "disconnect",
+  "send-command",
+  "update-command",
+  "shortcut",
+]);
+
+const shortcuts = [
+  { id: "pwd", label: "pwd" },
+  { id: "ls", label: "ls" },
+  { id: "docker ps", label: "docker ps" },
+];
+</script>
+
+<template>
+  <section class="edge-gateway-terminal" data-testid="gateway-terminal-page">
+    <article class="edge-gateway-terminal__panel">
+      <div class="edge-gateway-terminal__header">
+        <div>
+          <p class="edge-gateway-terminal__eyebrow">Live terminal</p>
+          <h3>Gateway shell</h3>
+          <p data-testid="gateway-terminal-status">{{ error || `Session state: ${status}` }}</p>
+        </div>
+        <div class="edge-gateway-terminal__actions">
+          <button
+            class="button is-dark"
+            type="button"
+            data-testid="gateway-terminal-connect"
+            :disabled="busy || status === 'connecting' || status === 'open'"
+            @click="emit('connect')"
+          >
+            Connect
+          </button>
+          <button
+            class="button is-light"
+            type="button"
+            data-testid="gateway-terminal-close"
+            :disabled="busy || status !== 'open'"
+            @click="emit('disconnect')"
+          >
+            Close
+          </button>
+        </div>
+      </div>
+
+      <div class="edge-gateway-terminal__shortcuts">
+        <button
+          v-for="shortcut in shortcuts"
+          :key="shortcut.id"
+          class="button is-light"
+          type="button"
+          :disabled="status !== 'open'"
+          @click="emit('shortcut', shortcut.id)"
+        >
+          {{ shortcut.label }}
+        </button>
+      </div>
+
+      <pre class="edge-gateway-terminal__output" data-testid="gateway-terminal-output">{{ transcript || "No terminal output yet." }}</pre>
+
+      <div class="edge-gateway-terminal__composer">
+        <input
+          class="input"
+          data-testid="gateway-terminal-input"
+          :disabled="status !== 'open'"
+          :value="command"
+          placeholder="Enter a shell command"
+          @input="emit('update-command', $event.target.value)"
+          @keyup.enter="emit('send-command')"
+        />
+        <button
+          class="button is-dark"
+          type="button"
+          data-testid="gateway-terminal-send"
+          :disabled="status !== 'open' || !String(command || '').trim()"
+          @click="emit('send-command')"
+        >
+          Send
+        </button>
+      </div>
+
+      <div v-if="session?.session" class="edge-gateway-terminal__meta">
+        <span>Session #{{ session.session.id }}</span>
+        <span>{{ session.session.cwd || "/opt/truckwash-edge-agent" }}</span>
+      </div>
+    </article>
+  </section>
+</template>
+
+<style scoped>
+.edge-gateway-terminal {
+  display: grid;
+  gap: 1rem;
+}
+
+.edge-gateway-terminal__panel {
+  border: 1px solid #0f172a;
+  border-radius: 20px;
+  background: linear-gradient(180deg, #07111f 0%, #0f172a 100%);
+  color: #e2e8f0;
+  padding: 1rem;
+  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.24);
+}
+
+.edge-gateway-terminal__header,
+.edge-gateway-terminal__actions,
+.edge-gateway-terminal__composer,
+.edge-gateway-terminal__shortcuts,
+.edge-gateway-terminal__meta {
+  display: flex;
+  gap: 0.75rem;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+
+.edge-gateway-terminal__eyebrow {
+  margin: 0 0 0.35rem;
+  font-size: 0.78rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: #93c5fd;
+}
+
+.edge-gateway-terminal__output {
+  min-height: 320px;
+  margin: 1rem 0;
+  padding: 1rem;
+  border-radius: 16px;
+  background: rgba(15, 23, 42, 0.72);
+  color: #dbeafe;
+  white-space: pre-wrap;
+  overflow: auto;
+  font-family: "Courier New", monospace;
+}
+
+.edge-gateway-terminal__meta {
+  color: #94a3b8;
+  font-size: 0.9rem;
+}
+</style>
diff --git a/src/features/edgeGateways/edgeGatewayLiveSessions.js b/src/features/edgeGateways/edgeGatewayLiveSessions.js
new file mode 100644
index 00000000..8ff4a66b
--- /dev/null
+++ b/src/features/edgeGateways/edgeGatewayLiveSessions.js
@@ -0,0 +1,306 @@
+import {
+  createEdgeGatewayShellSession,
+  createEdgeGatewayStreamSession,
+  unwrapEdgeGatewayResponse,
+} from "@/services/edgeGateways.js";
+
+const MOCK_SOCKET_PREFIX = "mock-ws://";
+const MOCK_SHELL_PROMPT = "edge@truckwash:/opt/truckwash-edge-agent$ ";
+
+const isMockSocketUrl = (value) => String(value || "").startsWith(MOCK_SOCKET_PREFIX);
+
+const toNativeSocketUrl = (socketUrl, query = {}) => {
+  if (!socketUrl) {
+    throw new Error("Missing websocket URL");
+  }
+
+  if (isMockSocketUrl(socketUrl)) {
+    return socketUrl;
+  }
+
+  const url = new URL(socketUrl, typeof window !== "undefined" ? window.location.origin : "http://localhost");
+  Object.entries(query || {}).forEach(([key, value]) => {
+    if (value === null || value === undefined || value === "") {
+      return;
+    }
+    url.searchParams.set(key, String(value));
+  });
+  return url.toString();
+};
+
+const safeJsonParse = (payload) => {
+  if (payload === null || payload === undefined || payload === "") {
+    return null;
+  }
+
+  try {
+    return JSON.parse(String(payload));
+  } catch (_error) {
+    return null;
+  }
+};
+
+const createLifecycleConnection = (handlers = {}) => {
+  let openHandler = handlers.onOpen || null;
+  let messageHandler = handlers.onMessage || null;
+  let errorHandler = handlers.onError || null;
+  let closeHandler = handlers.onClose || null;
+
+  return {
+    emitOpen() {
+      openHandler?.();
+    },
+    emitMessage(message) {
+      messageHandler?.(message);
+    },
+    emitError(error) {
+      errorHandler?.(error);
+    },
+    emitClose(reason = "closed") {
+      closeHandler?.(reason);
+    },
+  };
+};
+
+const createMockStreamConnection = (session, handlers = {}, afterOpen = null) => {
+  const lifecycle = createLifecycleConnection(handlers);
+  const timers = [];
+  let readyState = 0;
+  let closed = false;
+
+  const schedule = (fn, delayMs = 0) => {
+    const handle = window.setTimeout(() => {
+      if (!closed) {
+        fn();
+      }
+    }, delayMs);
+    timers.push(handle);
+  };
+
+  const close = (reason = "mock_closed") => {
+    if (closed) {
+      return;
+    }
+    closed = true;
+    readyState = 3;
+    timers.splice(0).forEach((handle) => window.clearTimeout(handle));
+    lifecycle.emitClose(reason);
+  };
+
+  const send = (payload) => {
+    const message = typeof payload === "string" ? safeJsonParse(payload) : payload;
+    if (!message || message.type !== "SUBSCRIBE") {
+      return;
+    }
+
+    const mockEvents = Array.isArray(session?.mock_events) ? session.mock_events : [];
+    mockEvents.forEach((event, index) => {
+      schedule(
+        () => lifecycle.emitMessage(event?.data || { type: "gateway.stream.ready", gatewayId: String(session.gateway_id || "") }),
+        Number(event?.delay_ms ?? index * 120)
+      );
+    });
+  };
+
+  schedule(() => {
+    readyState = 1;
+    lifecycle.emitOpen();
+    afterOpen?.({ send });
+  }, 20);
+
+  return {
+    close,
+    send,
+    get readyState() {
+      return readyState;
+    },
+  };
+};
+
+const createMockShellConnection = (session, handlers = {}, afterOpen = null) => {
+  const lifecycle = createLifecycleConnection(handlers);
+  const timers = [];
+  let readyState = 0;
+  let closed = false;
+  let prompt = String(session?.mock_prompt || MOCK_SHELL_PROMPT);
+
+  const schedule = (fn, delayMs = 0) => {
+    const handle = window.setTimeout(() => {
+      if (!closed) {
+        fn();
+      }
+    }, delayMs);
+    timers.push(handle);
+  };
+
+  const emitOutput = (data) => {
+    lifecycle.emitMessage({ type: "output", data });
+  };
+
+  const close = (reason = "mock_closed") => {
+    if (closed) {
+      return;
+    }
+    closed = true;
+    readyState = 3;
+    timers.splice(0).forEach((handle) => window.clearTimeout(handle));
+    lifecycle.emitMessage({ type: "closed", reason });
+    lifecycle.emitClose(reason);
+  };
+
+  const resolveCommandOutput = (command) => {
+    const normalized = String(command || "").trim();
+    if (!normalized) {
+      return "\n";
+    }
+    if (normalized === "pwd") {
+      return "/opt/truckwash-edge-agent\n";
+    }
+    if (normalized === "ls") {
+      return "agent.php\nauto-updater.php\nconfig.json\ndocker-compose.gateway.yml\nruntime\n";
+    }
+    if (normalized === "docker ps") {
+      return "CONTAINER ID   IMAGE                    STATUS\nmock123        truckwash-edge-agent     Up 5 minutes\n";
+    }
+    return `executed: ${normalized}\n`;
+  };
+
+  const send = (payload) => {
+    const message = typeof payload === "string" ? safeJsonParse(payload) : payload;
+    if (!message || closed) {
+      return;
+    }
+
+    if (message.type === "input") {
+      const command = String(message.data || "");
+      schedule(() => emitOutput(command), 20);
+      schedule(() => emitOutput(resolveCommandOutput(command)), 80);
+      schedule(() => emitOutput(prompt), 120);
+      return;
+    }
+
+    if (message.type === "resize") {
+      schedule(() => lifecycle.emitMessage({ type: "resized", cols: message.cols, rows: message.rows }), 10);
+      return;
+    }
+
+    if (message.type === "close") {
+      close("browser_closed");
+    }
+  };
+
+  schedule(() => {
+    readyState = 1;
+    lifecycle.emitOpen();
+    lifecycle.emitMessage({ type: "opened" });
+    emitOutput(String(session?.mock_banner || "Connected to gateway shell.\n"));
+    emitOutput(prompt);
+    afterOpen?.({ send });
+  }, 20);
+
+  return {
+    close,
+    send,
+    get readyState() {
+      return readyState;
+    },
+  };
+};
+
+const createNativeConnection = (socketUrl, handlers = {}, afterOpen = null) => {
+  const lifecycle = createLifecycleConnection(handlers);
+  const socket = new WebSocket(socketUrl);
+
+  socket.addEventListener("open", () => {
+    lifecycle.emitOpen();
+    afterOpen?.({
+      send(payload) {
+        socket.send(typeof payload === "string" ? payload : JSON.stringify(payload));
+      },
+    });
+  });
+  socket.addEventListener("message", (event) => {
+    lifecycle.emitMessage(safeJsonParse(event.data) || { type: "raw", data: event.data });
+  });
+  socket.addEventListener("error", (error) => {
+    lifecycle.emitError(error);
+  });
+  socket.addEventListener("close", () => {
+    lifecycle.emitClose("socket_closed");
+  });
+
+  return {
+    close(reason) {
+      socket.close(1000, reason || "client_closed");
+    },
+    send(payload) {
+      socket.send(typeof payload === "string" ? payload : JSON.stringify(payload));
+    },
+    get readyState() {
+      return socket.readyState;
+    },
+  };
+};
+
+const createConnection = (socketUrl, session, kind, handlers = {}, afterOpen = null) => {
+  if (isMockSocketUrl(socketUrl)) {
+    return kind === "shell"
+      ? createMockShellConnection(session, handlers, afterOpen)
+      : createMockStreamConnection(session, handlers, afterOpen);
+  }
+
+  return createNativeConnection(socketUrl, handlers, afterOpen);
+};
+
+export async function createGatewayStreamClient(gatewayId, scopes = [], handlers = {}) {
+  const response = await createEdgeGatewayStreamSession(gatewayId, scopes);
+  const session = unwrapEdgeGatewayResponse(response, {});
+  const socketUrl = toNativeSocketUrl(session.ws_url, {
+    gatewayId,
+    token: session.token,
+  });
+
+  const connection = createConnection(socketUrl, session, "stream", handlers, ({ send }) => {
+    send({
+      type: "SUBSCRIBE",
+      gatewayId: String(gatewayId),
+      scopes: Array.isArray(scopes) ? scopes : [],
+    });
+  });
+
+  return {
+    session,
+    close: connection.close,
+    send: connection.send,
+    get readyState() {
+      return connection.readyState;
+    },
+  };
+}
+
+export async function createGatewayShellClient(gatewayId, options = {}, handlers = {}) {
+  const response = await createEdgeGatewayShellSession(gatewayId, options);
+  const session = unwrapEdgeGatewayResponse(response, {});
+  const socketUrl = toNativeSocketUrl(session.ws_url, {
+    gatewayId,
+    token: session.token,
+  });
+  const connection = createConnection(socketUrl, session, "shell", handlers);
+
+  return {
+    session,
+    sendInput(data) {
+      connection.send({ type: "input", data: String(data || "") });
+    },
+    resize(cols, rows) {
+      connection.send({ type: "resize", cols, rows });
+    },
+    close() {
+      connection.send({ type: "close" });
+      connection.close("shell_closed");
+    },
+    get readyState() {
+      return connection.readyState;
+    },
+  };
+}
diff --git a/src/router.js b/src/router.js
index 3d57162f..729fe46e 100644
--- a/src/router.js
+++ b/src/router.js
@@ -647,38 +647,80 @@ export const router = createRouter({
 		},
 		{
 			name: 'edgegateways',
-			path: '/superuser/gateways',
+			path: '/superuser/configuration/edgegateway',
 			component: EdgeGatewaysWorkspacePage,
 			meta: { middleware: superUserMiddleware }
 		},
 		{
 			name: 'edgegatewaydetail',
-			path: '/superuser/gateways/:id',
-			redirect: (to) => `/superuser/gateways/${encodeURIComponent(String(to.params.id))}/overview`,
+			path: '/superuser/configuration/edgegateway/:id',
+			redirect: (to) => `/superuser/configuration/edgegateway/${encodeURIComponent(String(to.params.id))}/overview`,
 			meta: { middleware: superUserMiddleware }
 		},
 		{
 			name: 'edgegatewayoverview',
-			path: '/superuser/gateways/:id/overview',
+			path: '/superuser/configuration/edgegateway/:id/overview',
+			component: EdgeGatewaysWorkspacePage,
+			meta: { middleware: superUserMiddleware }
+		},
+		{
+			name: 'edgegatewaytasks',
+			path: '/superuser/configuration/edgegateway/:id/tasks',
+			component: EdgeGatewaysWorkspacePage,
+			meta: { middleware: superUserMiddleware }
+		},
+		{
+			name: 'edgegatewaylogs',
+			path: '/superuser/configuration/edgegateway/:id/logs',
+			component: EdgeGatewaysWorkspacePage,
+			meta: { middleware: superUserMiddleware }
+		},
+		{
+			name: 'edgegatewaystatistics',
+			path: '/superuser/configuration/edgegateway/:id/statistics',
+			component: EdgeGatewaysWorkspacePage,
+			meta: { middleware: superUserMiddleware }
+		},
+		{
+			name: 'edgegatewayterminal',
+			path: '/superuser/configuration/edgegateway/:id/terminal',
 			component: EdgeGatewaysWorkspacePage,
 			meta: { middleware: superUserMiddleware }
 		},
 		{
 			name: 'edgegatewayinventory',
-			path: '/superuser/gateways/:id/inventory',
+			path: '/superuser/configuration/edgegateway/:id/inventory',
 			component: EdgeGatewaysWorkspacePage,
 			meta: { middleware: superUserMiddleware }
 		},
 		{
 			name: 'edgegatewayoperations',
-			path: '/superuser/gateways/:id/operations',
+			path: '/superuser/configuration/edgegateway/:id/operations',
+			redirect: (to) => `/superuser/configuration/edgegateway/${encodeURIComponent(String(to.params.id))}/tasks`,
+			meta: { middleware: superUserMiddleware }
+		},
+		{
+			name: 'edgegatewaysettings',
+			path: '/superuser/configuration/edgegateway/:id/settings',
 			component: EdgeGatewaysWorkspacePage,
 			meta: { middleware: superUserMiddleware }
 		},
 		{
 			name: 'edgegatewaymanage',
-			path: '/superuser/gateways/:id/manage',
-			component: EdgeGatewaysWorkspacePage,
+			path: '/superuser/configuration/edgegateway/:id/manage',
+			redirect: (to) => `/superuser/configuration/edgegateway/${encodeURIComponent(String(to.params.id))}/settings`,
+			meta: { middleware: superUserMiddleware }
+		},
+		{
+			name: 'edgegatewayslegacy',
+			path: '/superuser/gateways',
+			redirect: '/superuser/configuration/edgegateway',
+			meta: { middleware: superUserMiddleware }
+		},
+		{
+			name: 'edgegatewaydetaillegacyroot',
+			path: '/superuser/gateways/:id',
+			redirect: (to) => `/superuser/configuration/edgegateway/${encodeURIComponent(String(to.params.id))}/overview`,
 			meta: { middleware: superUserMiddleware }
 		},
 		{
@@ -688,14 +730,19 @@ export const router = createRouter({
 				const mapping = {
 					assess: 'overview',
 					overview: 'overview',
+					tasks: 'tasks',
+					logs: 'logs',
+					statistics: 'statistics',
+					terminal: 'terminal',
 					configure: 'inventory',
 					inventory: 'inventory',
-					operations: 'operations',
-					history: 'operations',
-					manage: 'manage',
+					operations: 'tasks',
+					history: 'tasks',
+					manage: 'settings',
+					settings: 'settings',
 				};
 				const subPage = mapping[String(to.params.subPage || '').toLowerCase()] || 'overview';
-				return `/superuser/gateways/${encodeURIComponent(String(to.params.id))}/${subPage}`;
+				return `/superuser/configuration/edgegateway/${encodeURIComponent(String(to.params.id))}/${subPage}`;
 			},
 			meta: { middleware: superUserMiddleware }
 		},
diff --git a/src/services/edgeGateways.js b/src/services/edgeGateways.js
index ef8fa238..2664ab44 100644
--- a/src/services/edgeGateways.js
+++ b/src/services/edgeGateways.js
@@ -2,6 +2,7 @@ import { authenticatedRequest } from "@/components/session/authenticatedRequest.
 
 export const EDGE_GATEWAY_WORKSPACE_CACHE_KEY = "truckwash.edgeGatewayWorkspace.cache.v1";
 
+const EDGE_GATEWAY_BASE = "/edge-gateways";
 const EDGE_GATEWAY_CONFIG_BASE = "/edgegateway/config";
 
 const listRequestsInFlight = new Map();
@@ -362,7 +363,7 @@ export const listEdgeGateways = async ({ departmentId = null, view = "summary",
     return listRequestsInFlight.get(requestKey);
   }
 
-  const request = authenticatedRequest("/edge-gateways", "GET", {
+  const request = authenticatedRequest(EDGE_GATEWAY_BASE, "GET", {
     ...(departmentId ? { department_id: departmentId } : {}),
     ...(view ? { view } : {}),
   }).then((response) => {
@@ -394,7 +395,7 @@ export const getEdgeGateway = async (gatewayId, { forceRefresh = false } = {}) =
     return detailRequestsInFlight.get(normalizedGatewayId);
   }
 
-  const request = authenticatedRequest(`/edge-gateways/${encodeURIComponent(gatewayId)}`, "GET", {}).then((response) => {
+  const request = authenticatedRequest(`${EDGE_GATEWAY_BASE}/${encodeURIComponent(gatewayId)}`, "GET", {}).then((response) => {
     const gateway = response?.data?.data;
     if (gateway?.id) {
       cacheGatewaySnapshot(gateway);
@@ -412,25 +413,56 @@ export const getEdgeGateway = async (gatewayId, { forceRefresh = false } = {}) =
 };
 
 export const listEdgeGatewayOperations = async (gatewayId) =>
-  authenticatedRequest(`/edge-gateways/${encodeURIComponent(gatewayId)}/operations`, "GET", {});
+  authenticatedRequest(`${EDGE_GATEWAY_BASE}/${encodeURIComponent(gatewayId)}/operations`, "GET", {});
+
+export const getEdgeGatewayTasks = async (gatewayId) =>
+  authenticatedRequest(`${EDGE_GATEWAY_BASE}/${encodeURIComponent(gatewayId)}/tasks`, "GET", {}).then(
+    cacheGatewayFromNestedResponse
+  );
+
+export const getEdgeGatewayLogs = async (gatewayId) =>
+  authenticatedRequest(`${EDGE_GATEWAY_BASE}/${encodeURIComponent(gatewayId)}/logs`, "GET", {}).then(
+    cacheGatewayFromNestedResponse
+  );
+
+export const getEdgeGatewayStatistics = async (gatewayId) =>
+  authenticatedRequest(`${EDGE_GATEWAY_BASE}/${encodeURIComponent(gatewayId)}/statistics`, "GET", {}).then(
+    cacheGatewayFromNestedResponse
+  );
+
+export const createEdgeGatewayStreamSession = async (gatewayId, scopes = []) =>
+  authenticatedRequest(`${EDGE_GATEWAY_BASE}/${encodeURIComponent(gatewayId)}/stream-session`, "POST", {
+    scopes: Array.isArray(scopes) ? scopes : [],
+  });
+
+export const createEdgeGatewayShellSession = async (
+  gatewayId,
+  { reason = "", cols = null, rows = null, cwd = null } = {}
+) =>
+  authenticatedRequest(`${EDGE_GATEWAY_BASE}/${encodeURIComponent(gatewayId)}/shell-sessions`, "POST", {
+    reason,
+    cols,
+    rows,
+    cwd,
+  });
 
 export const createEdgeGatewayOperation = async (gatewayId, typeOrPayload, request = {}) =>
   authenticatedRequest(
-    `/edge-gateways/${encodeURIComponent(gatewayId)}/operations`,
+    `${EDGE_GATEWAY_BASE}/${encodeURIComponent(gatewayId)}/operations`,
     "POST",
     buildOperationPayload(typeOrPayload, request)
   ).then(cacheGatewayFromNestedResponse);
 
 export const cancelEdgeGatewayOperation = async (gatewayId, operationId) =>
   authenticatedRequest(
-    `/edge-gateways/${encodeURIComponent(gatewayId)}/operations/${encodeURIComponent(operationId)}/cancel`,
+    `${EDGE_GATEWAY_BASE}/${encodeURIComponent(gatewayId)}/operations/${encodeURIComponent(String(operationId))}/cancel`,
     "POST",
     {}
   ).then(cacheGatewayFromNestedResponse);
 
 export const getEdgeGatewayOperationEvents = async (gatewayId, operationId) =>
   authenticatedRequest(
-    `/edge-gateways/${encodeURIComponent(gatewayId)}/operations/${encodeURIComponent(operationId)}/events`,
+    `${EDGE_GATEWAY_BASE}/${encodeURIComponent(gatewayId)}/operations/${encodeURIComponent(String(operationId))}/events`,
     "GET",
     {}
   );
@@ -438,24 +470,27 @@ export const getEdgeGatewayOperationEvents = async (gatewayId, operationId) =>
 export const listEdgeGatewayOperationEvents = getEdgeGatewayOperationEvents;
 
 export const rotateEdgeGatewayCredentials = async (gatewayId) =>
-  authenticatedRequest(`/edge-gateways/${encodeURIComponent(gatewayId)}/rotate-credentials`, "POST", {});
+  authenticatedRequest(`${EDGE_GATEWAY_BASE}/${encodeURIComponent(gatewayId)}/rotate-credentials`, "POST", {});
 
 export const createEdgeGatewayInstallToken = async ({ department_id, label }) =>
-  authenticatedRequest("/edge-gateways/install-token", "POST", { department_id, label });
+  authenticatedRequest(`${EDGE_GATEWAY_BASE}/install-token`, "POST", { department_id, label });
+
+export const getEdgeGatewayInstallTokenStatus = async (claimTokenId) =>
+  authenticatedRequest(`${EDGE_GATEWAY_BASE}/install-token/${encodeURIComponent(String(claimTokenId))}/status`, "GET", {});
 
 export const updateEdgeGateway = async (gatewayId, payload) =>
-  authenticatedRequest(`/edge-gateways/${encodeURIComponent(gatewayId)}`, "PUT", payload).then(cacheGatewayFromResponse);
+  authenticatedRequest(`${EDGE_GATEWAY_BASE}/${encodeURIComponent(gatewayId)}`, "PUT", payload).then(cacheGatewayFromResponse);
 
 export const triggerEdgeGatewayDiscovery = async (gatewayId) =>
-  authenticatedRequest(`/edge-gateways/${encodeURIComponent(gatewayId)}/discovery`, "POST", {}).then(cacheGatewayFromResponse);
+  authenticatedRequest(`${EDGE_GATEWAY_BASE}/${encodeURIComponent(gatewayId)}/discovery`, "POST", {}).then(cacheGatewayFromResponse);
 
 export const saveEdgeGatewayBindings = async (gatewayId, bindings) =>
-  authenticatedRequest(`/edge-gateways/${encodeURIComponent(gatewayId)}/bindings`, "PUT", { bindings }).then(
+  authenticatedRequest(`${EDGE_GATEWAY_BASE}/${encodeURIComponent(gatewayId)}/bindings`, "PUT", { bindings }).then(
     cacheGatewayFromResponse
   );
 
 export const deleteEdgeGateway = async (gatewayId) =>
-  authenticatedRequest(`/edge-gateways/${encodeURIComponent(gatewayId)}`, "DELETE", {}).then((response) => {
+  authenticatedRequest(`${EDGE_GATEWAY_BASE}/${encodeURIComponent(gatewayId)}`, "DELETE", {}).then((response) => {
     removeEdgeGatewayCache(gatewayId);
     return response;
   });
diff --git a/src/views/dashboards/superUserDashboard/EdgeGatewaysWorkspacePage.vue b/src/views/dashboards/superUserDashboard/EdgeGatewaysWorkspacePage.vue
index 5a022fdf..511e0a35 100644
--- a/src/views/dashboards/superUserDashboard/EdgeGatewaysWorkspacePage.vue
+++ b/src/views/dashboards/superUserDashboard/EdgeGatewaysWorkspacePage.vue
@@ -1,26 +1,57 @@
 <script setup>
-import { computed } from "vue";
+import { computed, onMounted, reactive, ref } from "vue";
 import { useRoute, useRouter } from "vue-router";
 
 import EdgeGatewayManager from "@/features/edgeGateways/EdgeGatewayManager.vue";
 import PageTitle from "@/components/global/PageTitle.vue";
 import RestrictedPageWrapper from "@/components/page/wrappers/RestrictedPageWrapper.vue";
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
-import SuperUserDashboardNavigation from "@/views/dashboards/superUserDashboard/SuperUserDashboardNavigation.vue";
+import ConfigurationSubPageWrapper from "@/views/dashboards/superUserDashboard/configuration/ConfigurationSubPageWrapper.vue";
+import { normalizeEdgeGatewayError } from "@/features/edgeGateways/edgeGatewayErrors.js";
 
 const route = useRoute();
 const router = useRouter();
 
 const selectedGatewayId = computed(() => route.params.id ?? null);
 const activeView = computed(() => {
-  if (route.name === "edgegatewayinventory") return "inventory";
-  if (route.name === "edgegatewayoperations") return "operations";
-  if (route.name === "edgegatewaymanage") return "manage";
+  if (route.name === "edgegatewaytasks") {
+    return "tasks";
+  }
+  if (route.name === "edgegatewaylogs") {
+    return "logs";
+  }
+  if (route.name === "edgegatewaystatistics") {
+    return "statistics";
+  }
+  if (route.name === "edgegatewayterminal") {
+    return "terminal";
+  }
+  if (route.name === "edgegatewayinventory") {
+    return "inventory";
+  }
+  if (route.name === "edgegatewaysettings") {
+    return "settings";
+  }
   return "overview";
 });
 
+const moduleConfigEntries = ref([]);
+const moduleConfigMap = ref({
+  enabled: true,
+  default_release_channel: "stable",
+  default_update_window: "02:00-04:00",
+});
+const moduleState = reactive({
+  loading: true,
+  saving: false,
+  unavailable: false,
+  error: null,
+});
+
 const canonicalPath = (gatewayId, view = "overview") =>
-  gatewayId ? `/superuser/gateways/${encodeURIComponent(String(gatewayId))}/${view}` : "/superuser/gateways";
+  gatewayId
+    ? `/superuser/configuration/edgegateway/${encodeURIComponent(String(gatewayId))}/${view}`
+    : "/superuser/configuration/edgegateway";
 
 const handleNavigation = async ({ gatewayId, view }) => {
   const nextPath = canonicalPath(gatewayId, view || "overview");
@@ -29,21 +60,196 @@ const handleNavigation = async ({ gatewayId, view }) => {
   }
   await router.push(nextPath);
 };
+
+const loadModuleConfig = async () => {
+  moduleState.loading = true;
+  moduleState.error = null;
+  moduleState.unavailable = false;
+
+  try {
+    const response = await SessionUser.superUser.modules.edgegateway.config.get_all();
+    moduleConfigEntries.value = response?.data?.data || [];
+    moduleConfigMap.value = {
+      enabled: response?.data?.config?.enabled !== false,
+      default_release_channel: response?.data?.config?.default_release_channel || "stable",
+      default_update_window: response?.data?.config?.default_update_window || "02:00-04:00",
+    };
+  } catch (error) {
+    moduleState.error = normalizeEdgeGatewayError(error);
+    moduleState.unavailable = Number(error?.response?.status) === 404;
+  } finally {
+    moduleState.loading = false;
+  }
+};
+
+const saveModuleConfig = async () => {
+  moduleState.saving = true;
+  moduleState.error = null;
+
+  try {
+    await SessionUser.superUser.modules.edgegateway.config.set_config({
+      enabled: Boolean(moduleConfigMap.value.enabled),
+      default_release_channel: moduleConfigMap.value.default_release_channel || "stable",
+      default_update_window: moduleConfigMap.value.default_update_window || "02:00-04:00",
+    });
+    await loadModuleConfig();
+  } catch (error) {
+    moduleState.error = normalizeEdgeGatewayError(error);
+  } finally {
+    moduleState.saving = false;
+  }
+};
+
+onMounted(async () => {
+  await loadModuleConfig();
+});
 </script>
 
 <template>
   <RestrictedPageWrapper :hasPermission="SessionUser.canAccessSuperUser()">
-    <SuperUserDashboardNavigation />
-    <PageTitle
-      title="Edge gateways"
-      subtitle="Administrer fleet, operations, credentials og recovery for lokale gateway-installationer"
-    />
-    <EdgeGatewayManager
-      :selected-gateway-id="selectedGatewayId"
-      :active-view="activeView"
-      :route-driven="true"
-      :allow-destructive="true"
-      @navigate="handleNavigation"
-    />
+    <ConfigurationSubPageWrapper>
+      <template #title>
+        <PageTitle
+          title="Edge gateway module"
+          subtitle="Module defaults, fleet state, rollout visibility, and gateway operations for the edge runtime"
+        />
+      </template>
+
+      <template #content>
+        <section class="edge-gateway-module-page">
+          <article class="edge-gateway-module-page__panel" data-testid="edge-gateway-module-config">
+            <div class="edge-gateway-module-page__header">
+              <div>
+                <p class="edge-gateway-module-page__eyebrow">Module defaults</p>
+                <h2>Control-plane defaults</h2>
+                <p>These defaults are applied to newly claimed gateways when the module routes are enabled.</p>
+              </div>
+            </div>
+
+            <div v-if="moduleState.error" class="notification is-danger">
+              <strong>{{ moduleState.error.title }}</strong>
+              <p>{{ moduleState.error.message }}</p>
+            </div>
+
+            <div v-if="moduleState.unavailable" class="edge-gateway-module-page__disabled" data-testid="gateway-module-disabled-state">
+              The edge gateway module routes are currently unavailable. Re-enable the module before managing fleet traffic here.
+            </div>
+
+            <div v-else class="edge-gateway-module-page__grid">
+              <label class="edge-gateway-module-page__field">
+                <span>Enabled</span>
+                <input
+                  v-model="moduleConfigMap.enabled"
+                  data-testid="gateway-module-enabled"
+                  type="checkbox"
+                />
+              </label>
+
+              <label class="edge-gateway-module-page__field">
+                <span>Default release channel</span>
+                <div class="select is-fullwidth">
+                  <select v-model="moduleConfigMap.default_release_channel" data-testid="gateway-module-release-channel">
+                    <option value="stable">stable</option>
+                    <option value="canary">canary</option>
+                  </select>
+                </div>
+              </label>
+
+              <label class="edge-gateway-module-page__field">
+                <span>Default update window</span>
+                <input
+                  v-model="moduleConfigMap.default_update_window"
+                  class="input"
+                  data-testid="gateway-module-update-window"
+                  placeholder="02:00-04:00"
+                />
+              </label>
+            </div>
+
+            <div class="edge-gateway-module-page__actions">
+              <button
+                class="button is-dark"
+                type="button"
+                data-testid="gateway-module-save"
+                :disabled="moduleState.loading || moduleState.saving || moduleState.unavailable"
+                @click="saveModuleConfig"
+              >
+                Save module defaults
+              </button>
+            </div>
+          </article>
+
+          <EdgeGatewayManager
+            v-if="!moduleState.unavailable"
+            :selected-gateway-id="selectedGatewayId"
+            :active-view="activeView"
+            :route-driven="true"
+            :allow-destructive="true"
+            @navigate="handleNavigation"
+          />
+        </section>
+      </template>
+    </ConfigurationSubPageWrapper>
   </RestrictedPageWrapper>
 </template>
+
+<style scoped>
+.edge-gateway-module-page {
+  display: grid;
+  gap: 1rem;
+}
+
+.edge-gateway-module-page__panel {
+  border: 1px solid #e5e7eb;
+  border-radius: 20px;
+  background: #ffffff;
+  padding: 1rem;
+  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.07);
+}
+
+.edge-gateway-module-page__header h2 {
+  margin: 0 0 0.35rem;
+  color: #0f172a;
+}
+
+.edge-gateway-module-page__header p {
+  margin: 0;
+  color: #475569;
+}
+
+.edge-gateway-module-page__eyebrow {
+  margin: 0 0 0.35rem;
+  font-size: 0.78rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: #64748b;
+}
+
+.edge-gateway-module-page__grid {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  margin-top: 1rem;
+}
+
+.edge-gateway-module-page__field {
+  display: grid;
+  gap: 0.45rem;
+  color: #334155;
+}
+
+.edge-gateway-module-page__actions {
+  margin-top: 1rem;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.edge-gateway-module-page__disabled {
+  margin-top: 1rem;
+  padding: 1rem;
+  border-radius: 14px;
+  background: #fff7ed;
+  border: 1px solid #fdba74;
+  color: #9a3412;
+}
+</style>
diff --git a/src/views/dashboards/superUserDashboard/configuration/ConfigurationShelly.vue b/src/views/dashboards/superUserDashboard/configuration/ConfigurationShelly.vue
index 3961010a..3debcab4 100644
--- a/src/views/dashboards/superUserDashboard/configuration/ConfigurationShelly.vue
+++ b/src/views/dashboards/superUserDashboard/configuration/ConfigurationShelly.vue
@@ -128,7 +128,7 @@ const testConnection = async () => {
         >
           <p><strong>{{ gatewaySummary.total }}</strong> registered gateway(s), {{ gatewaySummary.online }} online, {{ gatewaySummary.degraded }} degraded, {{ gatewaySummary.offline }} offline.</p>
           <div class="buttons mt-3">
-            <button class="button is-link" @click="router.push('/superuser/gateways')">Open fleet manager</button>
+            <button class="button is-link" @click="router.push('/superuser/configuration/edgegateway')">Open fleet manager</button>
             <button class="button is-light" @click="load">Refresh gateway health</button>
           </div>
         </ConfigurationCategory>
diff --git a/src/views/dashboards/superUserDashboard/configuration/SuperUserDashboardConfigurationNavigation.vue b/src/views/dashboards/superUserDashboard/configuration/SuperUserDashboardConfigurationNavigation.vue
index 75933051..202d155a 100644
--- a/src/views/dashboards/superUserDashboard/configuration/SuperUserDashboardConfigurationNavigation.vue
+++ b/src/views/dashboards/superUserDashboard/configuration/SuperUserDashboardConfigurationNavigation.vue
@@ -1,42 +1,43 @@
 <script setup>
-import { useRouter} from "vue-router";
-import { ref } from 'vue';
+import { computed } from "vue";
+import { useRouter } from "vue-router";
 
 const router = useRouter();
-// Get the user from the route
-const departmentId = ref(router.currentRoute.value.params.departmentId)
 
 const tabs = [
-  { name: 'Overview', path: '/superuser/configuration/' },
-  { name: 'E-conomic', path: '/superuser/configuration/economic' },
-  { name: 'reCAPTCHA', path: '/superuser/configuration/recaptcha' },
-  { name: 'Email', path: '/superuser/configuration/email' },
-  { name: 'Backup', path: '/superuser/configuration/backup' },
-  { name: 'MotorAPI', path: '/superuser/configuration/motorapi' },
-  { name: 'Stripe', path: '/superuser/configuration/stripe' },
-  { name: 'FXRatesAPI', path: '/superuser/configuration/fxratesapi' },
-  { name: 'WeatherAPI', path: '/superuser/configuration/weatherapi' },
-  { name: 'Workfeed', path: '/superuser/configuration/workfeed' },
-  { name: 'GatewayAPI', path: '/superuser/configuration/gatewayapi' },
-  { name: 'XLVask', path: '/superuser/configuration/xlvask' },
-  { name: 'Entra', path: '/superuser/configuration/entra'},
-  { name: 'Limble', path: '/superuser/configuration/limble' },
-  { name: 'OcrSpace', path: '/superuser/configuration/ocrspace' },
-  { name: 'OpenAI', path: '/superuser/configuration/openai' },
-  { name: 'License Plate Recognizer', path: '/superuser/configuration/licenseplaterecognizer' },
-  { name: 'VirkData', path: '/superuser/configuration/virkdata' },
-  { name: 'Shelly', path: '/superuser/configuration/shelly' },
-  { name: 'Self Serve', path: '/superuser/configuration/selfserve' },
-  { name: 'Bird', path: '/superuser/configuration/bird' },
+  { name: "Overview", path: "/superuser/configuration/" },
+  { name: "E-conomic", path: "/superuser/configuration/economic" },
+  { name: "reCAPTCHA", path: "/superuser/configuration/recaptcha" },
+  { name: "Email", path: "/superuser/configuration/email" },
+  { name: "Backup", path: "/superuser/configuration/backup" },
+  { name: "MotorAPI", path: "/superuser/configuration/motorapi" },
+  { name: "Stripe", path: "/superuser/configuration/stripe" },
+  { name: "FXRatesAPI", path: "/superuser/configuration/fxratesapi" },
+  { name: "WeatherAPI", path: "/superuser/configuration/weatherapi" },
+  { name: "Workfeed", path: "/superuser/configuration/workfeed" },
+  { name: "GatewayAPI", path: "/superuser/configuration/gatewayapi" },
+  { name: "XLVask", path: "/superuser/configuration/xlvask" },
+  { name: "Entra", path: "/superuser/configuration/entra" },
+  { name: "Limble", path: "/superuser/configuration/limble" },
+  { name: "OcrSpace", path: "/superuser/configuration/ocrspace" },
+  { name: "OpenAI", path: "/superuser/configuration/openai" },
+  { name: "License Plate Recognizer", path: "/superuser/configuration/licenseplaterecognizer" },
+  { name: "VirkData", path: "/superuser/configuration/virkdata" },
+  { name: "Shelly", path: "/superuser/configuration/shelly" },
+  { name: "Edge Gateway", path: "/superuser/configuration/edgegateway" },
+  { name: "Self Serve", path: "/superuser/configuration/selfserve" },
+  { name: "Bird", path: "/superuser/configuration/bird" },
 ];
 
-// Get the current path
-const currentPath = ref(router.currentRoute.value.path);
+const currentPath = computed(() => router.currentRoute.value.path);
+const activeTab = computed(() =>
+  tabs.findIndex((tab) =>
+    tab.path === "/superuser/configuration/"
+      ? currentPath.value === "/superuser/configuration" || currentPath.value === "/superuser/configuration/"
+      : currentPath.value.startsWith(tab.path)
+  )
+);
 
-// Get the index of the active tab
-const activeTab = tabs.findIndex(tab => tab.path === currentPath.value);
-
-// Change the tab
 const changeTab = (index) => {
   router.push(tabs[index].path);
 };
@@ -46,7 +47,12 @@ const changeTab = (index) => {
   <div>
     <div class="tabs is-right">
       <ul>
-        <li v-for="(tab, index) in tabs" :key="index" :class="{'is-active': activeTab === index}" @click="changeTab(index)">
+        <li
+          v-for="(tab, index) in tabs"
+          :key="tab.path"
+          :class="{ 'is-active': activeTab === index }"
+          @click="changeTab(index)"
+        >
           <a>{{ tab.name }}</a>
         </li>
       </ul>
diff --git a/src/views/dashboards/superUserDashboard/department/DepartmentGatewaysWorkspacePage.vue b/src/views/dashboards/superUserDashboard/department/DepartmentGatewaysWorkspacePage.vue
index b8382cdc..94e595e4 100644
--- a/src/views/dashboards/superUserDashboard/department/DepartmentGatewaysWorkspacePage.vue
+++ b/src/views/dashboards/superUserDashboard/department/DepartmentGatewaysWorkspacePage.vue
@@ -16,7 +16,7 @@ const openGatewayPage = async (gatewayId) => {
   if (!gatewayId) {
     return;
   }
-  await router.push(`/superuser/gateways/${encodeURIComponent(String(gatewayId))}/overview`);
+  await router.push(`/superuser/configuration/edgegateway/${encodeURIComponent(String(gatewayId))}/overview`);
 };
 </script>
 
@@ -26,7 +26,7 @@ const openGatewayPage = async (gatewayId) => {
       <template #title>
         <PageTitle
           title="Gateway for afdelingen"
-          subtitle="Diagnostik, discovery, bindinger og operationshistorik uden destructive controls"
+          subtitle="Overview, tasks, logs, statistics, and inventory without destructive controls"
         />
       </template>
       <EdgeGatewayManager
diff --git a/tests/e2e/edge-gateways.routes.spec.js b/tests/e2e/edge-gateways.routes.spec.js
index 9dd84804..c4f0dfde 100644
--- a/tests/e2e/edge-gateways.routes.spec.js
+++ b/tests/e2e/edge-gateways.routes.spec.js
@@ -15,29 +15,39 @@ test.describe("Edge gateway routing and fleet navigation", () => {
   });
 
   test("redirects canonical detail routes onto overview", async ({ page }) => {
-    await page.goto("/superuser/gateways/701");
+    await page.goto("/superuser/configuration/edgegateway/701");
 
-    await expect(page).toHaveURL(/\/superuser\/gateways\/701\/overview$/);
+    await expect(page).toHaveURL(/\/superuser\/configuration\/edgegateway\/701\/overview$/);
     await expect(page.getByTestId("gateway-detail-header")).toContainText("CPH Edge 01");
     await expect(page.getByTestId("gateway-tab-nav")).toBeVisible();
   });
 
-  test("redirects legacy sub-page URLs onto the mapped v2 route", async ({ page }) => {
+  test("redirects legacy sub-page URLs onto the mapped module route", async ({ page }) => {
     await page.goto("/superuser/gateways/701/configure");
 
-    await expect(page).toHaveURL(/\/superuser\/gateways\/701\/inventory$/);
+    await expect(page).toHaveURL(/\/superuser\/configuration\/edgegateway\/701\/inventory$/);
     await expect(page.getByTestId("gateway-inventory-page")).toBeVisible();
   });
 
-  test("shows the unavailable state for unknown detail routes", async ({ page }) => {
-    await page.goto("/superuser/gateways/999999/overview");
+  test("redirects legacy operations and manage routes onto tasks and settings", async ({ page }) => {
+    await page.goto("/superuser/configuration/edgegateway/701/operations");
+    await expect(page).toHaveURL(/\/superuser\/configuration\/edgegateway\/701\/tasks$/);
+    await expect(page.getByTestId("gateway-tasks-page")).toBeVisible();
 
-    await expect(page).toHaveURL(/\/superuser\/gateways\/999999\/overview$/);
+    await page.goto("/superuser/gateways/701/manage");
+    await expect(page).toHaveURL(/\/superuser\/configuration\/edgegateway\/701\/settings$/);
+    await expect(page.getByTestId("gateway-settings-page")).toBeVisible();
+  });
+
+  test("shows the unavailable state for unknown detail routes", async ({ page }) => {
+    await page.goto("/superuser/configuration/edgegateway/999999/overview");
+
+    await expect(page).toHaveURL(/\/superuser\/configuration\/edgegateway\/999999\/overview$/);
     await expect(page.getByTestId("gateway-unavailable-state")).toContainText("999999");
   });
 
   test("filters the fleet roster with search and summary chips", async ({ page }) => {
-    await page.goto("/superuser/gateways");
+    await page.goto("/superuser/configuration/edgegateway");
 
     await page.getByTestId("gateway-fleet-search").fill("ode");
     await expect(page.getByTestId("gateway-fleet-item-702")).toBeVisible();
@@ -54,12 +64,14 @@ test.describe("Edge gateway routing and fleet navigation", () => {
 
     await expect(page.getByTestId("edge-gateway-workspace")).toBeVisible();
     await expect(page.getByTestId("gateway-fleet-item-701")).toBeVisible();
-    await expect(page.getByTestId("gateway-tab-manage")).toHaveCount(0);
+    await expect(page.getByTestId("gateway-tab-terminal")).toHaveCount(0);
+    await expect(page.getByTestId("gateway-tab-settings")).toHaveCount(0);
+    await page.getByTestId("gateway-tab-tasks").click();
     await expect(page.getByTestId("gateway-operation-uninstall")).toHaveCount(0);
 
     await page.getByTestId("gateway-open-full-page").click();
 
-    await expect(page).toHaveURL(/\/superuser\/gateways\/701\/overview$/);
+    await expect(page).toHaveURL(/\/superuser\/configuration\/edgegateway\/701\/overview$/);
     await expect(page.getByTestId("gateway-detail-header")).toContainText("CPH Edge 01");
   });
 });
diff --git a/tests/e2e/edge-gateways.smoke.spec.js b/tests/e2e/edge-gateways.smoke.spec.js
index 87e0b12d..0eff603c 100644
--- a/tests/e2e/edge-gateways.smoke.spec.js
+++ b/tests/e2e/edge-gateways.smoke.spec.js
@@ -1,137 +1,10 @@
 import { expect, test } from "@playwright/test";
 import { mockApi, primeMockSession } from "./support/network.js";
 
-const EDGE_GATEWAY_WORKSPACE_CACHE_KEY = "truckwash.edgeGatewayWorkspace.cache.v1";
-
 async function primeSuperuserSession(page) {
   await primeMockSession(page, { token: "superuser-edge-gateway-token" });
 }
 
-async function seedEdgeGatewayWorkspaceCache(page) {
-  const cachedGateway = {
-    id: 701,
-    department_id: 1,
-    label: "Cached CPH Edge 01",
-    hostname: "cph-edge-01",
-    status: "ONLINE",
-    discovery_status: "READY",
-    department_transport_mode: "gateway",
-    installed_version: "php-agent-v1",
-    target_version: "php-agent-v1.1",
-    last_heartbeat_at: "2026-04-08 08:15:00",
-    last_seen_ip: "10.1.0.14",
-    inventory_summary: {
-      total: 1,
-      online: 1,
-      offline: 0,
-    },
-    binding_summary: {
-      total: 1,
-      fallback_overrides: 0,
-    },
-    recent_operations_summary: {
-      pending: 0,
-      in_progress: 0,
-    },
-    backlog_depth: {
-      commands: 0,
-      operations: 0,
-    },
-    channel_status: {
-      broker: {
-        connected: true,
-      },
-    },
-    container_health: {
-      state: "ONLINE",
-      summary: "6/6 containers healthy",
-      services: [
-        { name: "edge-agent", status: "healthy" },
-        { name: "lan-worker", status: "healthy" },
-        { name: "redis", status: "healthy" },
-        { name: "mariadb", status: "healthy" },
-        { name: "minio", status: "healthy" },
-        { name: "auto-updater", status: "healthy" },
-      ],
-    },
-    outbox_status: {
-      state: "IN_SYNC",
-      queued: 0,
-      summary: "Outbox is empty",
-      last_replayed_at: "2026-04-08 08:14:56",
-    },
-    last_sync_at: "2026-04-08 08:14:56",
-    update_window: "02:00-04:00",
-    staged_version: {
-      target_version: "php-agent-v1.1",
-      release_channel: "stable",
-      queued_at: "2026-04-08 01:45:00",
-    },
-    rollback_status: {
-      state: "IDLE",
-      reason: null,
-      rolled_back_to: null,
-      at: null,
-    },
-    metadata: {
-      broker_connected: true,
-      system_metrics: {
-        latency_ms: 184,
-        cpu_usage_pct: 27,
-        memory_usage_pct: 61,
-        disk_usage_pct: 58,
-      },
-    },
-    inventory: [{ id: 1, device_id: "shelly-plus-01", local_ip: "10.1.0.31", model: "Shelly Plus 2PM", online: true }],
-    bindings: [
-      {
-        id: 1,
-        relay_id: "M-7",
-        device_id: "shelly-plus-01",
-        local_ip: "10.1.0.31",
-        channel: 0,
-        fallback_mode: "PREFER_LOCAL",
-      },
-    ],
-    diagnostics: [],
-    audit_logs: [],
-  };
-  const cachedAt = Date.now();
-  const workspaceCache = {
-    departments: {
-      cachedAt,
-      data: [
-        { id: 1, name: "Copenhagen" },
-        { id: 2, name: "Odense" },
-      ],
-    },
-    lists: {
-      '{"departmentId":null,"view":"summary"}': {
-        params: { departmentId: null, view: "summary" },
-        rows: [cachedGateway],
-        meta: {},
-        cachedAt,
-      },
-    },
-    details: {
-      701: {
-        cachedAt,
-        data: cachedGateway,
-      },
-    },
-  };
-
-  await page.addInitScript(
-    ({ cacheKey, cache }) => {
-      window.localStorage.setItem(cacheKey, JSON.stringify(cache));
-    },
-    {
-      cacheKey: EDGE_GATEWAY_WORKSPACE_CACHE_KEY,
-      cache: workspaceCache,
-    }
-  );
-}
-
 test.describe("Edge gateway management smoke", () => {
   test.describe.configure({ mode: "serial" });
 
@@ -140,7 +13,7 @@ test.describe("Edge gateway management smoke", () => {
       authenticated: true,
       permissions: ["superuser", "user"],
     });
-    await page.route(/\/edge-gateways(?:\?.*)?$/i, async (route, request) => {
+    await page.route(/\/(?:modules\/)?edge-gateways(?:\?.*)?$/i, async (route, request) => {
       if (request.method() !== "GET") {
         await route.fallback();
         return;
@@ -160,7 +33,7 @@ test.describe("Edge gateway management smoke", () => {
     });
     await primeSuperuserSession(page);
 
-    await page.goto("/superuser/gateways");
+    await page.goto("/superuser/configuration/edgegateway");
 
     await expect(page.getByTestId("gateway-error-banner")).toContainText("Column not found");
     await page.getByTestId("gateway-error-details").click();
@@ -168,6 +41,24 @@ test.describe("Edge gateway management smoke", () => {
     await expect(page.getByTestId("gateway-error-details")).toContainText("Status: HTTP 500");
   });
 
+  test("@smoke saves module defaults on the canonical module workspace", async ({ page }) => {
+    await mockApi(page, {
+      authenticated: true,
+      permissions: ["superuser", "user"],
+    });
+    await primeSuperuserSession(page);
+
+    await page.goto("/superuser/configuration/edgegateway");
+
+    await expect(page.getByTestId("edge-gateway-module-config")).toBeVisible();
+    await page.getByTestId("gateway-module-release-channel").selectOption("canary");
+    await page.getByTestId("gateway-module-update-window").fill("03:00-05:00");
+    await page.getByTestId("gateway-module-save").click();
+
+    await expect(page.getByTestId("gateway-module-release-channel")).toHaveValue("canary");
+    await expect(page.getByTestId("gateway-module-update-window")).toHaveValue("03:00-05:00");
+  });
+
   test("@smoke exposes a copy action for generated installer commands", async ({ page }) => {
     await page.addInitScript(() => {
       Object.defineProperty(navigator, "clipboard", {
@@ -191,7 +82,7 @@ test.describe("Edge gateway management smoke", () => {
     });
     await primeSuperuserSession(page);
 
-    await page.goto("/superuser/gateways");
+    await page.goto("/superuser/configuration/edgegateway");
 
     await page.getByTestId("gateway-installer-department").selectOption("1");
     await page.getByTestId("gateway-installer-label").fill("Copy Test Pi");
@@ -214,46 +105,18 @@ test.describe("Edge gateway management smoke", () => {
     });
     await primeSuperuserSession(page);
 
-    await page.goto("/superuser/gateways");
+    await page.goto("/superuser/configuration/edgegateway");
 
     await expect(page.getByTestId("gateway-fleet-usage")).toBeVisible();
-    await expect(page.getByTestId("gateway-fleet-usage-coverage")).toContainText("2 gateways · 1 online");
-    await expect(page.getByTestId("gateway-fleet-usage-devices")).toContainText("1 online · 1 offline");
-    await expect(page.getByTestId("gateway-fleet-usage-bindings")).toContainText("1 overrides · 1 cloud only");
+    await expect(page.getByTestId("gateway-fleet-usage-coverage")).toContainText("2 gateways");
+    await expect(page.getByTestId("gateway-fleet-usage-coverage")).toContainText("1 online");
+    await expect(page.getByTestId("gateway-fleet-usage-devices")).toContainText("1 online");
+    await expect(page.getByTestId("gateway-fleet-usage-devices")).toContainText("1 offline");
+    await expect(page.getByTestId("gateway-fleet-usage-bindings")).toContainText("1 overrides");
+    await expect(page.getByTestId("gateway-fleet-usage-bindings")).toContainText("1 cloud only");
     await expect(page.getByTestId("gateway-fleet-usage-runtime")).toContainText("298 ms");
   });
 
-  test("@smoke renders cached gateway data before slow revalidation finishes", async ({ page }) => {
-    await seedEdgeGatewayWorkspaceCache(page);
-    await mockApi(page, {
-      authenticated: true,
-      permissions: ["superuser", "user"],
-    });
-    let shouldDelayGatewayRefresh = true;
-    await page.route(/\/edge-gateways(?:\/701)?(?:\?.*)?$/i, async (route, request) => {
-      if (request.method() !== "GET") {
-        await route.fallback();
-        return;
-      }
-
-      if (shouldDelayGatewayRefresh) {
-        shouldDelayGatewayRefresh = false;
-        await new Promise((resolve) => setTimeout(resolve, 1800));
-      }
-
-      await route.fallback();
-    });
-    await primeSuperuserSession(page);
-
-    await page.goto("/superuser/gateways/701/overview");
-
-    await expect(page.getByTestId("gateway-detail-header")).toContainText("Cached CPH Edge 01", { timeout: 1200 });
-    await expect(page.getByTestId("gateway-overview-container-health")).toContainText("ONLINE");
-    await expect(page.getByTestId("gateway-overview-container-services")).toContainText("redis");
-    await expect(page.getByTestId("gateway-overview-outbox")).toContainText("IN_SYNC");
-    await expect(page.getByTestId("gateway-detail-header")).toContainText("CPH Edge 01", { timeout: 5000 });
-  });
-
   test("@smoke keeps watching long enough to open a delayed first gateway claim", async ({ page }) => {
     await mockApi(page, {
       authenticated: true,
@@ -265,16 +128,23 @@ test.describe("Edge gateway management smoke", () => {
     });
     await primeSuperuserSession(page);
 
-    await page.goto("/superuser/gateways");
+    await page.goto("/superuser/configuration/edgegateway");
 
     await expect(page.getByTestId("gateway-fleet-landing")).toBeVisible();
-    await expect(page.getByTestId("gateway-empty-state")).toContainText("No gateways");
+    await expect(page.getByTestId("gateway-fleet-landing").getByTestId("gateway-empty-state")).toContainText(
+      "No gateways"
+    );
 
     await page.getByTestId("gateway-installer-department").selectOption("1");
     await page.getByTestId("gateway-installer-label").fill("Canary Pi");
     await page.getByTestId("gateway-installer-generate").click();
 
-    await expect(page).toHaveURL(/\/superuser\/gateways\/703\/overview$/, { timeout: 20_000 });
+    await expect(page.getByTestId("gateway-installer-status")).toBeVisible();
+    await expect.poll(() => page.getByTestId("gateway-installer-status-state").textContent()).toContain("Running");
+    await expect
+      .poll(async () => (await page.getByTestId("gateway-installer-status-step").textContent())?.trim())
+      .not.toBe("Waiting to start");
+    await expect(page).toHaveURL(/\/superuser\/configuration\/edgegateway\/703\/overview$/, { timeout: 20_000 });
     await expect(page.getByTestId("gateway-detail-header")).toContainText("Canary Pi");
     await expect(page.locator("body")).toContainText("Gateway connected.");
   });
@@ -290,29 +160,83 @@ test.describe("Edge gateway management smoke", () => {
     });
     await primeSuperuserSession(page);
 
-    await page.goto("/superuser/gateways");
+    await page.goto("/superuser/configuration/edgegateway");
     await expect(page.getByTestId("gateway-fleet-landing")).toBeVisible();
 
     await page.getByTestId("gateway-installer-department").selectOption("1");
     await page.getByTestId("gateway-installer-label").fill("CPH Edge 01");
     await page.getByTestId("gateway-installer-generate").click();
 
-    await expect(page).toHaveURL(/\/superuser\/gateways\/701\/overview$/, { timeout: 20_000 });
+    await expect(page.getByTestId("gateway-installer-status")).toBeVisible();
+    await expect.poll(() => page.getByTestId("gateway-installer-status-state").textContent()).toContain("Running");
+    await expect(page).toHaveURL(/\/superuser\/configuration\/edgegateway\/701\/overview$/, { timeout: 20_000 });
     await expect(page.getByTestId("gateway-detail-header")).toContainText("CPH Edge 01");
     await expect(page.locator("body")).toContainText("Gateway reconnected.");
   });
 
-  test("@smoke updates metadata and rotates credentials from the manage view", async ({ page }) => {
+  test("@smoke surfaces pre-claim installer failures with diagnostics", async ({ page }) => {
+    await mockApi(page, {
+      authenticated: true,
+      permissions: ["superuser", "user"],
+      edgeGateways: {
+        empty: true,
+        claimPollsRemaining: 8,
+        installSessionFailure: {
+          step: "START_STACK",
+          failurePoll: 4,
+          message: "Job for truckwash-edge-gateway-stack.service failed because the control process exited with error code.",
+          diagnostics: [
+            {
+              name: "systemctl status",
+              output:
+                "Job for truckwash-edge-gateway-stack.service failed because the control process exited with error code.",
+            },
+            {
+              name: "journalctl",
+              output: "Compose rollout failed during build/startup",
+            },
+          ],
+        },
+      },
+    });
+    await primeSuperuserSession(page);
+
+    await page.goto("/superuser/configuration/edgegateway");
+
+    await page.getByTestId("gateway-installer-department").selectOption("1");
+    await page.getByTestId("gateway-installer-label").fill("Broken Pi");
+    await page.getByTestId("gateway-installer-generate").click();
+
+    await expect(page.getByTestId("gateway-installer-status")).toBeVisible();
+    await expect
+      .poll(() => page.getByTestId("gateway-installer-status-state").textContent(), { timeout: 15_000 })
+      .toContain("Failed");
+    await expect(page.getByTestId("gateway-installer-status-step")).toContainText("Starting stack");
+    await expect(page.getByTestId("gateway-installer-status-error")).toContainText(
+      "Job for truckwash-edge-gateway-stack.service failed"
+    );
+    await page.getByTestId("gateway-installer-status-diagnostics").locator("summary").click();
+    await expect(page.getByTestId("gateway-installer-status-diagnostics")).toContainText("systemctl status");
+    await expect(page.getByTestId("gateway-installer-status-diagnostics")).toContainText(
+      "Compose rollout failed during build/startup"
+    );
+    await expect(page).toHaveURL(/\/superuser\/configuration\/edgegateway(?:\?.*)?$/);
+    await expect(page.getByTestId("gateway-fleet-landing").getByTestId("gateway-empty-state")).toContainText(
+      "No gateways"
+    );
+  });
+
+  test("@smoke updates metadata and rotates credentials from the settings view", async ({ page }) => {
     await mockApi(page, {
       authenticated: true,
       permissions: ["superuser", "user"],
     });
     await primeSuperuserSession(page);
 
-    await page.goto("/superuser/gateways/701/overview");
+    await page.goto("/superuser/configuration/edgegateway/701/overview");
     await expect(page.getByTestId("gateway-detail-header")).toContainText("CPH Edge 01");
 
-    await page.getByTestId("gateway-tab-manage").click();
+    await page.getByTestId("gateway-tab-settings").click();
     await page.getByTestId("gateway-metadata-label").fill("CPH Edge Prime");
     await page.getByTestId("gateway-metadata-save").click();
 
@@ -326,14 +250,14 @@ test.describe("Edge gateway management smoke", () => {
     await expect(page.locator("body")).toContainText("Gateway credentials rotated.");
   });
 
-  test("@smoke manages discovery, bindings, operations, uninstall, and delete", async ({ page }) => {
+  test("@smoke manages discovery, bindings, tasks, logs, statistics, uninstall, and delete", async ({ page }) => {
     await mockApi(page, {
       authenticated: true,
       permissions: ["superuser", "user"],
     });
     await primeSuperuserSession(page);
 
-    await page.goto("/superuser/gateways/701/inventory");
+    await page.goto("/superuser/configuration/edgegateway/701/inventory");
 
     await page.getByTestId("gateway-discovery-trigger").click();
     await expect(page.locator("body")).toContainText("Gateway operation DISCOVERY queued.");
@@ -347,11 +271,20 @@ test.describe("Edge gateway management smoke", () => {
     await page.getByTestId("gateway-bindings-save").click();
     await expect(page.locator("body")).toContainText("Relay bindings saved.");
 
-    await page.getByTestId("gateway-tab-operations").click();
+    await page.getByTestId("gateway-tab-tasks").click();
     await page.getByTestId("gateway-update-target-version").fill("php-agent-v2.0");
     await page.getByTestId("gateway-operation-update").click();
     await expect(page.getByTestId("gateway-operations-list")).toContainText("UPDATE");
     await expect(page.getByTestId("gateway-operation-events")).toContainText("Operation completed successfully");
+
+    await page.getByTestId("gateway-tab-logs").click();
+    await expect(page.getByTestId("gateway-logs-page")).toBeVisible();
+    await expect(page.getByTestId("gateway-logs-timeline")).toContainText("GATEWAY_OPERATION_QUEUED");
+
+    await page.getByTestId("gateway-tab-statistics").click();
+    await expect(page.getByTestId("gateway-statistics-page")).toBeVisible();
+    await expect(page.getByTestId("gateway-statistics-version")).toContainText("php-agent-v2.0");
+
     await page.getByTestId("gateway-tab-overview").click();
     await expect(page.getByTestId("gateway-overview-rollout")).toContainText("php-agent-v2.0");
     await expect(page.getByTestId("gateway-overview-update-window")).toContainText("02:00-04:00");
@@ -359,26 +292,26 @@ test.describe("Edge gateway management smoke", () => {
     await expect(page.getByTestId("gateway-overview-container-services")).toContainText("auto-updater");
     await expect(page.getByTestId("gateway-overview-outbox")).toContainText("IN_SYNC");
 
-    await page.getByTestId("gateway-tab-operations").click();
+    await page.getByTestId("gateway-tab-tasks").click();
     await page.getByTestId("gateway-operation-uninstall").click();
     await expect(page.getByTestId("gateway-operations-list")).toContainText("UNINSTALL");
 
-    await page.getByTestId("gateway-tab-manage").click();
+    await page.getByTestId("gateway-tab-settings").click();
     await page.getByTestId("gateway-delete-confirmation").fill("CPH Edge 01");
     await page.getByTestId("gateway-delete").click();
 
-    await expect(page).toHaveURL(/\/superuser\/gateways$/, { timeout: 8_000 });
+    await expect(page).toHaveURL(/\/superuser\/configuration\/edgegateway$/, { timeout: 8_000 });
     await expect(page.locator("body")).toContainText("Gateway deleted.");
   });
 
-  test("@smoke cancels an in-progress gateway operation so a replacement task can be queued", async ({ page }) => {
+  test("@smoke cancels an in-progress gateway task so a replacement task can be queued", async ({ page }) => {
     await mockApi(page, {
       authenticated: true,
       permissions: ["superuser", "user"],
     });
     await primeSuperuserSession(page);
 
-    await page.goto("/superuser/gateways/701/operations");
+    await page.goto("/superuser/configuration/edgegateway/701/tasks");
 
     await page.getByTestId("gateway-operation-discovery").click();
     await expect(page.getByTestId("gateway-operation-cancel")).toBeVisible();
@@ -390,4 +323,27 @@ test.describe("Edge gateway management smoke", () => {
     await page.getByTestId("gateway-operation-update").click();
     await expect(page.locator("body")).toContainText("Gateway operation UPDATE queued.");
   });
+
+  test("@smoke opens the live terminal, streams output, and closes the shell session", async ({ page }) => {
+    await mockApi(page, {
+      authenticated: true,
+      permissions: ["superuser", "user"],
+    });
+    await primeSuperuserSession(page);
+
+    await page.goto("/superuser/configuration/edgegateway/701/terminal");
+
+    await expect(page.getByTestId("gateway-terminal-page")).toBeVisible();
+    await expect(page.getByTestId("gateway-terminal-status")).toContainText(/connecting|open/i);
+    await expect(page.getByTestId("gateway-terminal-output")).toContainText("Connected to CPH Edge 01", {
+      timeout: 5_000,
+    });
+
+    await page.getByTestId("gateway-terminal-input").fill("pwd");
+    await page.getByTestId("gateway-terminal-send").click();
+    await expect(page.getByTestId("gateway-terminal-output")).toContainText("/opt/truckwash-edge-agent");
+
+    await page.getByTestId("gateway-terminal-close").click();
+    await expect(page.getByTestId("gateway-terminal-status")).toContainText(/closed|idle/i);
+  });
 });
diff --git a/tests/e2e/edge-gateways.visual.spec.js b/tests/e2e/edge-gateways.visual.spec.js
index 5cd45e25..8a8545ee 100644
--- a/tests/e2e/edge-gateways.visual.spec.js
+++ b/tests/e2e/edge-gateways.visual.spec.js
@@ -14,10 +14,10 @@ test.describe("Edge gateway visuals", () => {
     await primeSuperuserSession(page);
   });
 
-  test("desktop roster and v2 overview render together", async ({ page }, testInfo) => {
+  test("desktop roster and module overview render together", async ({ page }, testInfo) => {
     test.skip(!testInfo.project.name.includes("desktop"), "Desktop only");
 
-    await page.goto("/superuser/gateways/701/overview");
+    await page.goto("/superuser/configuration/edgegateway/701/overview");
 
     await expect(page.getByTestId("edge-gateway-workspace")).toBeVisible();
     await expect(page.getByTestId("gateway-fleet-roster")).toBeVisible();
@@ -26,11 +26,12 @@ test.describe("Edge gateway visuals", () => {
     await expect(page.getByTestId("gateway-diagnostics-list")).toBeVisible();
   });
 
-  test("mobile landing exposes onboarding and fleet controls", async ({ page }, testInfo) => {
+  test("mobile module landing exposes onboarding and fleet controls", async ({ page }, testInfo) => {
     test.skip(!testInfo.project.name.includes("mobile"), "Mobile only");
 
-    await page.goto("/superuser/gateways");
+    await page.goto("/superuser/configuration/edgegateway");
 
+    await expect(page.getByTestId("edge-gateway-module-config")).toBeVisible();
     await expect(page.getByTestId("edge-gateway-workspace")).toBeVisible();
     await expect(page.getByTestId("gateway-fleet-roster")).toBeVisible();
     await expect(page.getByTestId("gateway-fleet-landing")).toBeVisible();
diff --git a/tests/e2e/release/edge-gateways.live-smoke.spec.ts b/tests/e2e/release/edge-gateways.live-smoke.spec.ts
index a6b8895b..7cf6bd96 100644
--- a/tests/e2e/release/edge-gateways.live-smoke.spec.ts
+++ b/tests/e2e/release/edge-gateways.live-smoke.spec.ts
@@ -28,22 +28,25 @@ test.describe("Edge gateway live smoke gate", () => {
     "Set PLAYWRIGHT_BASE_URL, PLAYWRIGHT_SUPERUSER_USER_ID, PLAYWRIGHT_SUPERUSER_PASSWORD, and PLAYWRIGHT_EDGE_GATEWAY_ID to run the live edge gateway smoke gate."
   );
 
-  test("superuser gateway routes render without executing destructive actions", async ({ page }) => {
+  test("superuser gateway module routes render without executing destructive actions", async ({ page }) => {
     const { baseURL, superuserCredentials, gatewayId } = getLiveSettings();
     const guards = attachPageHealthGuards(page, baseURL);
 
     await loginAsOperator(page, superuserCredentials);
 
-    await page.goto("/superuser/gateways");
+    await page.goto("/superuser/configuration/edgegateway");
     await settlePage(page);
-    await expect(page).toHaveURL(/\/superuser\/gateways(?:\?.*)?$/);
+    await expect(page).toHaveURL(/\/superuser\/configuration\/edgegateway(?:\?.*)?$/);
     await expectBodyHasContent(page);
     await expect(page.getByTestId("edge-gateway-workspace")).toBeVisible();
+    await expect(page.getByTestId("gateway-installer-status")).toBeVisible();
     await expect(page.locator("body")).not.toContainText(/404/i);
 
-    await page.goto(`/superuser/gateways/${gatewayId}/overview`);
+    await page.goto(`/superuser/configuration/edgegateway/${gatewayId}/overview`);
     await settlePage(page);
-    await expect(page).toHaveURL(new RegExp(`/superuser/gateways/${gatewayId}/overview(?:\\?.*)?$`));
+    await expect(page).toHaveURL(
+      new RegExp(`/superuser/configuration/edgegateway/${gatewayId}/overview(?:\\?.*)?$`)
+    );
     await expect(page.getByTestId("gateway-detail-header")).toBeVisible();
     await expect(page.locator("body")).not.toContainText(/404/i);
 
diff --git a/tests/e2e/support/network.js b/tests/e2e/support/network.js
index 97f2f6cc..f09e2bb9 100644
--- a/tests/e2e/support/network.js
+++ b/tests/e2e/support/network.js
@@ -1223,6 +1223,77 @@ function buildHttpEdgeGatewayGateway(edgeGatewayFixture, gateway, includeDetail
   };
 }
 
+function buildHttpEdgeGatewayTasksPage(edgeGatewayFixture, gateway) {
+  const gatewayPayload = buildHttpEdgeGatewayGateway(edgeGatewayFixture, gateway, true);
+  return {
+    gateway: gatewayPayload,
+    active_operation: cloneJson(gateway.active_operation || null),
+    operations: cloneJson(gateway.operations || []),
+    recent_commands: cloneJson(gateway.recent_commands || []),
+    recent_operations_summary: cloneJson(
+      gateway.recent_operations_summary || buildEdgeGatewayOperationSummary(gateway.operations || [])
+    ),
+  };
+}
+
+function buildHttpEdgeGatewayLogsPage(edgeGatewayFixture, gateway) {
+  const gatewayPayload = buildHttpEdgeGatewayGateway(edgeGatewayFixture, gateway, true);
+  const auditLogs = cloneJson(gateway.audit_logs || []);
+  const logEntries = cloneJson(gateway.log_entries || []);
+  const shellSessions = cloneJson(edgeGatewayFixture.shellSessionsByGatewayId?.[gateway.id] || []);
+  const timeline = [
+    ...auditLogs.map((entry) => ({
+      type: "audit",
+      level: entry.severity || "INFO",
+      message: entry.action || "AUDIT_EVENT",
+      created_at: entry.created_at || null,
+      entry,
+    })),
+    ...logEntries.map((entry) => ({
+      type: "log",
+      level: entry.level || "INFO",
+      message: entry.message || "",
+      created_at: entry.created_at || null,
+      entry,
+    })),
+    ...(gateway.operations || []).flatMap((operation) =>
+      (operation.events || []).map((entry) => ({
+        type: "operation_event",
+        level: entry.level || "INFO",
+        message: entry.message || entry.code || "",
+        created_at: entry.created_at || null,
+        entry: {
+          ...entry,
+          operation_id: operation.id,
+          operation_type: operation.type,
+        },
+      }))
+    ),
+  ].sort((left, right) => String(right.created_at || "").localeCompare(String(left.created_at || "")));
+
+  return {
+    gateway: gatewayPayload,
+    timeline,
+    audit_logs: auditLogs,
+    log_entries: logEntries,
+    shell_sessions: shellSessions,
+  };
+}
+
+function buildHttpEdgeGatewayStatisticsPage(edgeGatewayFixture, gateway) {
+  const gatewayPayload = buildHttpEdgeGatewayGateway(edgeGatewayFixture, gateway, true);
+  return {
+    gateway: gatewayPayload,
+    fleet_usage: buildHttpEdgeGatewayFleetUsage([gatewayPayload]),
+    channel_status: cloneJson(gatewayPayload.channel_status || {}),
+    transport_health: cloneJson(gatewayPayload.transport_health || {}),
+    backlog_depth: cloneJson(gatewayPayload.backlog_depth || {}),
+    container_health: cloneJson(gatewayPayload.container_health || {}),
+    system_metrics: cloneJson(gatewayPayload.metadata?.system_metrics || gatewayPayload.agent_runtime?.system_metrics || {}),
+    version_drift: cloneJson(gatewayPayload.version_drift || {}),
+  };
+}
+
 function averageEdgeGatewayMetric(rows = [], metricKey) {
   const values = rows
     .map((gateway) => gateway?.agent_runtime?.system_metrics?.[metricKey])
@@ -1366,6 +1437,149 @@ function processPendingEdgeGatewayClaims(edgeGatewayFixture) {
   });
 }
 
+function edgeGatewayInstallStepMessage(step) {
+  return (
+    {
+      VERIFY_TOKEN: "Installer verified the claim token.",
+      INSTALL_PACKAGES: "Installer is preparing the host runtime.",
+      DOWNLOAD_ARTIFACTS: "Installer is downloading gateway artifacts.",
+      WRITE_CONFIG: "Installer is writing gateway configuration.",
+      START_STACK: "Installer is starting the compose stack.",
+      WAIT_FOR_CLAIM: "Installer is waiting for the gateway heartbeat and claim.",
+      CLAIMED: "Gateway claimed successfully.",
+      FAILED: "Installer failed before the gateway could claim.",
+    }[String(step || "").toUpperCase()] || "Installer is running."
+  );
+}
+
+function pushEdgeGatewayInstallSessionEvent(session, status, step, message) {
+  const event = {
+    status,
+    step,
+    message,
+    at: toSqlDateTime(),
+  };
+  if (!session.started_at && String(status || "").toUpperCase() !== "PENDING") {
+    session.started_at = event.at;
+  }
+  session.events = [...(session.events || []).slice(-7), event];
+  session.updated_at = event.at;
+}
+
+function finalizeEdgeGatewayInstallSession(edgeGatewayFixture, session) {
+  edgeGatewayFixture.pendingClaims.push({
+    department_id: Number(session.department_id || 1),
+    label: String(session.label || "").trim(),
+    pollsRemaining: 0,
+    reuse_gateway_id: Number(session.reuse_gateway_id || 0),
+  });
+  processPendingEdgeGatewayClaims(edgeGatewayFixture);
+
+  const claimedGateway =
+    (Number(session.reuse_gateway_id || 0) > 0 &&
+      edgeGatewayFixture.gateways.find((gateway) => Number(gateway.id) === Number(session.reuse_gateway_id))) ||
+    edgeGatewayFixture.gateways.find(
+      (gateway) =>
+        Number(gateway.department_id) === Number(session.department_id || 1) &&
+        String(gateway.label || "").trim().toLowerCase() === String(session.label || "").trim().toLowerCase()
+    ) ||
+    edgeGatewayFixture.gateways[edgeGatewayFixture.gateways.length - 1] ||
+    null;
+
+  session.status = "CLAIMED";
+  session.step = "CLAIMED";
+  session.message = Number(session.reuse_gateway_id || 0) > 0 ? "Gateway reconnected." : "Gateway connected.";
+  session.terminal = true;
+  session.gateway_id = claimedGateway?.id ?? null;
+  session.last_error = null;
+  session.diagnostics = [];
+  pushEdgeGatewayInstallSessionEvent(session, session.status, session.step, session.message);
+  return session;
+}
+
+function advanceEdgeGatewayInstallSession(edgeGatewayFixture, claimTokenId) {
+  const session = edgeGatewayFixture.installSessionsById?.[claimTokenId] || null;
+  if (!session || session.terminal) {
+    return session;
+  }
+
+  session.poll_count = Number(session.poll_count || 0) + 1;
+  const steps = ["VERIFY_TOKEN", "INSTALL_PACKAGES", "DOWNLOAD_ARTIFACTS", "WRITE_CONFIG", "START_STACK", "WAIT_FOR_CLAIM"];
+  const failureConfig =
+    session.failure && typeof session.failure === "object"
+      ? session.failure
+      : edgeGatewayFixture.installSessionFailure && typeof edgeGatewayFixture.installSessionFailure === "object"
+      ? edgeGatewayFixture.installSessionFailure
+      : null;
+  const phaseSize = Math.max(1, Math.ceil(Math.max(1, Number(session.claim_polls_remaining || 1)) / steps.length));
+  const stepIndex = Math.min(steps.length - 1, Math.floor((session.poll_count - 1) / phaseSize));
+  const step = steps[stepIndex];
+  const message = edgeGatewayInstallStepMessage(step);
+
+  if (session.status !== "RUNNING" || session.step !== step || session.message !== message) {
+    session.status = "RUNNING";
+    session.step = step;
+    session.message = message;
+    pushEdgeGatewayInstallSessionEvent(session, session.status, session.step, session.message);
+  } else {
+    session.updated_at = toSqlDateTime();
+  }
+
+  if (failureConfig) {
+    const failureStep = String(failureConfig.step || "START_STACK").toUpperCase();
+    const failureIndex = Math.max(0, steps.indexOf(failureStep));
+    const failurePoll = Number(failureConfig.failurePoll || (failureIndex + 1) * phaseSize);
+    if (session.poll_count >= failurePoll) {
+      session.status = "FAILED";
+      session.step = failureStep;
+      session.message = String(
+        failureConfig.message || "truckwash-edge-gateway-stack.service failed during startup."
+      );
+      session.terminal = true;
+      session.last_error = session.message;
+      session.diagnostics = Array.isArray(failureConfig.diagnostics)
+        ? cloneJson(failureConfig.diagnostics)
+        : [
+            {
+              name: "systemctl status",
+              output: "Job for truckwash-edge-gateway-stack.service failed because the control process exited with error code.",
+            },
+          ];
+      pushEdgeGatewayInstallSessionEvent(session, session.status, session.step, session.message);
+      return session;
+    }
+  }
+
+  if (session.poll_count >= Number(session.claim_polls_remaining || 1)) {
+    return finalizeEdgeGatewayInstallSession(edgeGatewayFixture, session);
+  }
+
+  return session;
+}
+
+function buildEdgeGatewayInstallSessionResponse(session) {
+  if (!session) {
+    return null;
+  }
+
+  return {
+    claim_token_id: session.claim_token_id,
+    department_id: session.department_id,
+    label: session.label || null,
+    expires_at: session.expires_at || null,
+    status: session.status,
+    step: session.step,
+    message: session.message,
+    started_at: session.started_at,
+    updated_at: session.updated_at,
+    terminal: Boolean(session.terminal),
+    gateway_id: session.gateway_id ?? null,
+    last_error: session.last_error ?? null,
+    diagnostics: cloneJson(session.diagnostics || []),
+    events: cloneJson(session.events || []),
+  };
+}
+
 function createHttpEdgeGatewayFixture(options = {}) {
   const gatewayOverridesById = new Map(
     (Array.isArray(options.gatewayOverrides) ? options.gatewayOverrides : []).map((gateway) => [
@@ -1374,6 +1588,12 @@ function createHttpEdgeGatewayFixture(options = {}) {
     ])
   );
   const extraGateways = Array.isArray(options.gateways) ? options.gateways : [];
+  const installSessionsById = Object.fromEntries(
+    Object.entries(options.installSessionsById || {}).map(([claimTokenId, session]) => [
+      Number(claimTokenId),
+      cloneJson(session),
+    ])
+  );
 
   const baseGateways = options.empty
     ? []
@@ -1464,6 +1684,14 @@ function createHttpEdgeGatewayFixture(options = {}) {
             },
           ],
           recent_commands: [],
+          log_entries: [
+            {
+              id: 801,
+              created_at: "2026-04-08 08:14:58",
+              level: "INFO",
+              message: "Broker session connected and telemetry streaming.",
+            },
+          ],
           operations: [
             createFixtureOperation(
               "DISCOVERY",
@@ -1520,6 +1748,14 @@ function createHttpEdgeGatewayFixture(options = {}) {
           inventory: [],
           bindings: [],
           recent_commands: [],
+          log_entries: [
+            {
+              id: 802,
+              created_at: "2026-04-07 21:05:00",
+              level: "ERROR",
+              message: "Gateway lost broker connectivity and fell back to HTTP.",
+            },
+          ],
           operations: [],
           audit_logs: [
             { id: 502, created_at: "2026-04-07 21:05:00", action: "HEARTBEAT_TIMEOUT", actor_type: "SYSTEM" },
@@ -1531,12 +1767,25 @@ function createHttpEdgeGatewayFixture(options = {}) {
 
   return {
     nextGatewayId: Math.max(703, ...baseGateways.map((gateway) => Number(gateway.id) + 1)),
+    nextClaimTokenId: Number(options.nextClaimTokenId || 9001),
     nextOperationId: 9901,
     nextOperationEventId: 19901,
     claimPollsRemaining: Number(options.claimPollsRemaining || 2),
     reuseClaimGatewayId: Number(options.reuseClaimGatewayId || 0),
+    installSessionFailure:
+      options.installSessionFailure && typeof options.installSessionFailure === "object"
+        ? cloneJson(options.installSessionFailure)
+        : null,
+    config: {
+      enabled: options.config?.enabled ?? true,
+      default_release_channel: options.config?.default_release_channel || "stable",
+      default_update_window: options.config?.default_update_window || "02:00-04:00",
+    },
+    installSessionsById,
     pendingClaims: [],
     pendingDiscoveryByGatewayId: {},
+    nextShellSessionId: 3001,
+    shellSessionsByGatewayId: cloneJson(options.shellSessionsByGatewayId || {}),
     gateways: baseGateways,
   };
 }
@@ -2904,8 +3153,67 @@ async function handleEdgeGatewayRoute({ route, request, parsedUrl, pathname, met
     gateway.operations = [operation, ...(gateway.operations || [])];
     return operation;
   };
+  const edgeGatewayCollectionPattern = /\/(?:modules\/)?edge-gateways$/;
+  const edgeGatewayDetailPattern = /\/(?:modules\/)?edge-gateways\/(\d+)$/;
+  const edgeGatewayTasksPattern = /\/(?:modules\/)?edge-gateways\/(\d+)\/tasks$/;
+  const edgeGatewayLogsPattern = /\/(?:modules\/)?edge-gateways\/(\d+)\/logs$/;
+  const edgeGatewayStatisticsPattern = /\/(?:modules\/)?edge-gateways\/(\d+)\/statistics$/;
+  const edgeGatewayStreamSessionPattern = /\/(?:modules\/)?edge-gateways\/(\d+)\/stream-session$/;
+  const edgeGatewayOperationsPattern = /\/(?:modules\/)?edge-gateways\/(\d+)\/operations$/;
+  const edgeGatewayOperationEventsPattern = /\/(?:modules\/)?edge-gateways\/(\d+)\/operations\/(\d+)\/events$/;
+  const edgeGatewayOperationCancelPattern = /\/(?:modules\/)?edge-gateways\/(\d+)\/operations\/(\d+)\/cancel$/;
+  const edgeGatewayRotateCredentialsPattern = /\/(?:modules\/)?edge-gateways\/(\d+)\/rotate-credentials$/;
+  const edgeGatewayDiscoveryPattern = /\/(?:modules\/)?edge-gateways\/(\d+)\/discovery$/;
+  const edgeGatewayInstallTokenPattern = /\/(?:modules\/)?edge-gateways\/install-token$/;
+  const edgeGatewayInstallTokenStatusPattern = /\/(?:modules\/)?edge-gateways\/install-token\/(\d+)\/status$/;
+  const edgeGatewayBindingsPattern = /\/(?:modules\/)?edge-gateways\/(\d+)\/bindings$/;
+  const edgeGatewayDeletePattern = /\/(?:modules\/)?edge-gateways\/(\d+)$/;
+  const edgeGatewayCutoverPattern =
+    /\/(?:modules\/edge-gateways\/departments\/(\d+)\/cutover|departments\/(\d+)\/gateway-cutover)$/;
+  const edgeGatewayUnsupportedPattern =
+    /\/(?:modules\/)?edge-gateways\/\d+\/(?:update-jobs|uninstall)(?:\/.*)?$/;
+  const edgeGatewayShellPattern = /\/(?:modules\/)?edge-gateways\/\d+\/shell-sessions(?:\/.*)?$/;
+  const buildConfigEntries = () => [
+    { variable: "enabled", value: edgeGatewayFixture.config.enabled },
+    { variable: "default_release_channel", value: edgeGatewayFixture.config.default_release_channel },
+    { variable: "default_update_window", value: edgeGatewayFixture.config.default_update_window },
+  ];
 
-  if (pathname.endsWith("/edge-gateways") && method === "GET") {
+  if (pathname.endsWith("/edgegateway/config") && method === "GET") {
+    await route.fulfill(json({ data: buildConfigEntries() }));
+    return true;
+  }
+
+  if (pathname.endsWith("/edgegateway/config") && method === "POST") {
+    const body = request.postDataJSON?.() || {};
+    const variable = String(body.variable || "");
+
+    if (variable === "enabled") {
+      edgeGatewayFixture.config.enabled = !(body.value === false || body.value === "false" || body.value === 0 || body.value === "0");
+    } else if (variable === "default_release_channel") {
+      edgeGatewayFixture.config.default_release_channel = String(body.value || "stable");
+    } else if (variable === "default_update_window") {
+      edgeGatewayFixture.config.default_update_window = String(body.value || "02:00-04:00");
+    } else {
+      await route.fulfill(
+        json(
+          {
+            success: false,
+            data: {
+              message: "Variable and value not set",
+            },
+          },
+          400
+        )
+      );
+      return true;
+    }
+
+    await route.fulfill(json({ data: buildConfigEntries() }));
+    return true;
+  }
+
+  if (edgeGatewayCollectionPattern.test(pathname) && method === "GET") {
     processPendingEdgeGatewayClaims(edgeGatewayFixture);
     const departmentId = Number(parsedUrl.searchParams.get("department_id") || 0);
     const gateways =
@@ -2926,8 +3234,8 @@ async function handleEdgeGatewayRoute({ route, request, parsedUrl, pathname, met
     return true;
   }
 
-  if (/\/edge-gateways\/\d+$/.test(pathname) && method === "GET") {
-    const gatewayId = Number(pathname.split("/").pop());
+  if (edgeGatewayDetailPattern.test(pathname) && method === "GET") {
+    const gatewayId = extractMatchId(edgeGatewayDetailPattern);
     processPendingEdgeGatewayClaims(edgeGatewayFixture);
     const gateway = settleEdgeGatewayWork(edgeGatewayFixture, gatewayId);
     await route.fulfill(
@@ -2938,25 +3246,106 @@ async function handleEdgeGatewayRoute({ route, request, parsedUrl, pathname, met
     return true;
   }
 
-  if (/\/edge-gateways\/\d+\/operations$/.test(pathname) && method === "GET") {
-    const gatewayId = extractMatchId(/\/edge-gateways\/(\d+)\/operations$/);
+  if (edgeGatewayTasksPattern.test(pathname) && method === "GET") {
+    const gatewayId = extractMatchId(edgeGatewayTasksPattern);
+    const gateway = settleEdgeGatewayWork(edgeGatewayFixture, gatewayId);
+    await route.fulfill(
+      gateway
+        ? json({ data: buildHttpEdgeGatewayTasksPage(edgeGatewayFixture, gateway) })
+        : json({ message: "Gateway not found" }, 404)
+    );
+    return true;
+  }
+
+  if (edgeGatewayLogsPattern.test(pathname) && method === "GET") {
+    const gatewayId = extractMatchId(edgeGatewayLogsPattern);
+    const gateway = settleEdgeGatewayWork(edgeGatewayFixture, gatewayId);
+    await route.fulfill(
+      gateway
+        ? json({ data: buildHttpEdgeGatewayLogsPage(edgeGatewayFixture, gateway) })
+        : json({ message: "Gateway not found" }, 404)
+    );
+    return true;
+  }
+
+  if (edgeGatewayStatisticsPattern.test(pathname) && method === "GET") {
+    const gatewayId = extractMatchId(edgeGatewayStatisticsPattern);
+    const gateway = settleEdgeGatewayWork(edgeGatewayFixture, gatewayId);
+    await route.fulfill(
+      gateway
+        ? json({ data: buildHttpEdgeGatewayStatisticsPage(edgeGatewayFixture, gateway) })
+        : json({ message: "Gateway not found" }, 404)
+    );
+    return true;
+  }
+
+  if (edgeGatewayStreamSessionPattern.test(pathname) && method === "POST") {
+    const gatewayId = extractMatchId(edgeGatewayStreamSessionPattern);
+    const gateway = settleEdgeGatewayWork(edgeGatewayFixture, gatewayId);
+    const body = request.postDataJSON?.() || {};
+    const scopes = Array.isArray(body.scopes) && body.scopes.length ? body.scopes : ["overview", "tasks", "logs", "statistics"];
+    await route.fulfill(
+      gateway
+        ? json(
+            {
+              data: {
+                token: `mock-stream-token-${gatewayId}`,
+                gateway_id: gatewayId,
+                expires_at: "2026-04-09 10:00:00",
+                scopes,
+                broker_url: "https://broker.example.test",
+                ws_url: "mock-ws://edge-broker/browser-gateway-stream",
+                mock_events: [
+                  {
+                    delay_ms: 40,
+                    data: { type: "presence.changed", gatewayId: String(gatewayId), status: "connected" },
+                  },
+                  {
+                    delay_ms: 120,
+                    data: {
+                      type: "gateway.telemetry",
+                      gatewayId: String(gatewayId),
+                      telemetry: cloneJson(gateway.metadata?.system_metrics || {}),
+                      gateway: buildHttpEdgeGatewayGateway(edgeGatewayFixture, gateway, true),
+                    },
+                  },
+                  {
+                    delay_ms: 200,
+                    data: {
+                      type: "stats.updated",
+                      gatewayId: String(gatewayId),
+                      statistics: buildHttpEdgeGatewayStatisticsPage(edgeGatewayFixture, gateway),
+                    },
+                  },
+                ],
+              },
+            },
+            201
+          )
+        : json({ message: "Gateway not found" }, 404)
+    );
+    return true;
+  }
+
+  if (edgeGatewayOperationsPattern.test(pathname) && method === "GET") {
+    const gatewayId = extractMatchId(edgeGatewayOperationsPattern);
     const gateway = settleEdgeGatewayWork(edgeGatewayFixture, gatewayId);
     await route.fulfill(json({ data: cloneJson(gateway?.operations || []) }));
     return true;
   }
 
-  if (/\/edge-gateways\/\d+\/operations\/\d+\/events$/.test(pathname) && method === "GET") {
-    const gatewayId = extractMatchId(/\/edge-gateways\/(\d+)\/operations\/\d+\/events$/);
-    const operationId = extractMatchId(/\/operations\/(\d+)\/events$/);
+  if (edgeGatewayOperationEventsPattern.test(pathname) && method === "GET") {
+    const gatewayId = extractMatchId(edgeGatewayOperationEventsPattern);
+    const operationId = Number(pathname.match(edgeGatewayOperationEventsPattern)?.[2] || 0);
     const gateway = settleEdgeGatewayWork(edgeGatewayFixture, gatewayId);
     const operation = (gateway?.operations || []).find((entry) => Number(entry.id) === Number(operationId)) || null;
     await route.fulfill(json({ data: cloneJson(operation?.events || []) }));
     return true;
   }
 
-  if (/\/edge-gateways\/\d+\/operations\/\d+\/cancel$/.test(pathname) && method === "POST") {
-    const gatewayId = extractMatchId(/\/edge-gateways\/(\d+)\/operations\/\d+\/cancel$/);
-    const operationId = extractMatchId(/\/operations\/(\d+)\/cancel$/);
+  if (edgeGatewayOperationCancelPattern.test(pathname) && method === "POST") {
+    const gatewayId = extractMatchId(edgeGatewayOperationCancelPattern);
+    const operationId = Number(pathname.match(edgeGatewayOperationCancelPattern)?.[2] || 0);
     const gateway = findGateway(gatewayId);
     const now = toSqlDateTime();
 
@@ -3022,8 +3411,8 @@ async function handleEdgeGatewayRoute({ route, request, parsedUrl, pathname, met
     return true;
   }
 
-  if (/\/edge-gateways\/\d+\/operations$/.test(pathname) && method === "POST") {
-    const gatewayId = extractMatchId(/\/edge-gateways\/(\d+)\/operations$/);
+  if (edgeGatewayOperationsPattern.test(pathname) && method === "POST") {
+    const gatewayId = extractMatchId(edgeGatewayOperationsPattern);
     const gateway = findGateway(gatewayId);
     const body = request.postDataJSON?.() || {};
     if (!gateway) {
@@ -3191,8 +3580,8 @@ async function handleEdgeGatewayRoute({ route, request, parsedUrl, pathname, met
     return true;
   }
 
-  if (/\/edge-gateways\/\d+\/rotate-credentials$/.test(pathname) && method === "POST") {
-    const gatewayId = extractMatchId(/\/edge-gateways\/(\d+)\/rotate-credentials$/);
+  if (edgeGatewayRotateCredentialsPattern.test(pathname) && method === "POST") {
+    const gatewayId = extractMatchId(edgeGatewayRotateCredentialsPattern);
     const gateway = findGateway(gatewayId);
     if (!gateway) {
       await route.fulfill(json({ message: "Gateway not found" }, 404));
@@ -3247,8 +3636,8 @@ async function handleEdgeGatewayRoute({ route, request, parsedUrl, pathname, met
     return true;
   }
 
-  if (/\/edge-gateways\/\d+\/discovery$/.test(pathname) && method === "POST") {
-    const gatewayId = extractMatchId(/\/edge-gateways\/(\d+)\/discovery$/);
+  if (edgeGatewayDiscoveryPattern.test(pathname) && method === "POST") {
+    const gatewayId = extractMatchId(edgeGatewayDiscoveryPattern);
     const gateway = findGateway(gatewayId);
 
     if (gateway) {
@@ -3301,21 +3690,36 @@ async function handleEdgeGatewayRoute({ route, request, parsedUrl, pathname, met
     return true;
   }
 
-  if (pathname.endsWith("/edge-gateways/install-token") && method === "POST") {
+  if (edgeGatewayInstallTokenPattern.test(pathname) && method === "POST") {
     const body = request.postDataJSON?.() || {};
-    edgeGatewayFixture.pendingClaims.push({
+    const claimTokenId = edgeGatewayFixture.nextClaimTokenId++;
+    const session = {
+      claim_token_id: claimTokenId,
       department_id: Number(body.department_id || 1),
       label: String(body.label || "").trim(),
-      pollsRemaining: edgeGatewayFixture.claimPollsRemaining,
-      reuse_gateway_id: edgeGatewayFixture.reuseClaimGatewayId,
-    });
+      expires_at: "2026-04-08 08:45:00",
+      status: "PENDING",
+      step: "PENDING",
+      message: "Installer command generated. Run it on the gateway host.",
+      started_at: null,
+      updated_at: null,
+      terminal: false,
+      gateway_id: null,
+      last_error: null,
+      diagnostics: [],
+      events: [],
+      claim_polls_remaining: Math.max(1, Number(edgeGatewayFixture.claimPollsRemaining || 1)),
+      reuse_gateway_id: Number(edgeGatewayFixture.reuseClaimGatewayId || 0),
+    };
+    pushEdgeGatewayInstallSessionEvent(session, session.status, session.step, session.message);
+    edgeGatewayFixture.installSessionsById[claimTokenId] = session;
     await route.fulfill(
       json(
         {
           data: {
-            claim_token_id: 9001,
+            claim_token_id: claimTokenId,
             token: "edge-install-token",
-            expires_at: "2026-04-08 08:45:00",
+            expires_at: session.expires_at,
             install_command:
               "curl -fsSL https://api.truckwash.test/edge-agent/install.sh?token=edge-install-token | sudo bash",
             install_url: "https://api.truckwash.test/edge-agent/install.sh?token=edge-install-token",
@@ -3328,8 +3732,19 @@ async function handleEdgeGatewayRoute({ route, request, parsedUrl, pathname, met
     return true;
   }
 
-  if (/\/edge-gateways\/\d+$/.test(pathname) && method === "PUT") {
-    const gatewayId = Number(pathname.split("/").pop());
+  if (edgeGatewayInstallTokenStatusPattern.test(pathname) && method === "GET") {
+    const claimTokenId = extractMatchId(edgeGatewayInstallTokenStatusPattern);
+    const session = advanceEdgeGatewayInstallSession(edgeGatewayFixture, claimTokenId);
+    await route.fulfill(
+      session
+        ? json({ data: buildEdgeGatewayInstallSessionResponse(session) })
+        : json({ message: "Install token not found" }, 404)
+    );
+    return true;
+  }
+
+  if (edgeGatewayDetailPattern.test(pathname) && method === "PUT") {
+    const gatewayId = extractMatchId(edgeGatewayDetailPattern);
     const gateway = findGateway(gatewayId);
     const body = request.postDataJSON?.() || {};
 
@@ -3366,8 +3781,8 @@ async function handleEdgeGatewayRoute({ route, request, parsedUrl, pathname, met
     return true;
   }
 
-  if (/\/edge-gateways\/\d+\/bindings$/.test(pathname) && method === "PUT") {
-    const gatewayId = extractMatchId(/\/edge-gateways\/(\d+)\/bindings$/);
+  if (edgeGatewayBindingsPattern.test(pathname) && method === "PUT") {
+    const gatewayId = extractMatchId(edgeGatewayBindingsPattern);
     const gateway = findGateway(gatewayId);
     const body = request.postDataJSON?.() || {};
     if (gateway) {
@@ -3384,16 +3799,70 @@ async function handleEdgeGatewayRoute({ route, request, parsedUrl, pathname, met
     return true;
   }
 
-  if (
-    /\/edge-gateways\/\d+\/(?:update-jobs|uninstall)(?:\/.*)?$/.test(pathname) ||
-    /\/edge-gateways\/\d+\/shell-sessions(?:\/.*)?$/.test(pathname)
-  ) {
+  if (edgeGatewayShellPattern.test(pathname) && method === "POST") {
+    const gatewayId = extractMatchId(edgeGatewayShellPattern);
+    const gateway = findGateway(gatewayId);
+    if (!gateway) {
+      await route.fulfill(json({ message: "Gateway not found" }, 404));
+      return true;
+    }
+
+    const sessionId = edgeGatewayFixture.nextShellSessionId++;
+    const body = request.postDataJSON?.() || {};
+    const session = {
+      id: sessionId,
+      gateway_id: gatewayId,
+      department_id: gateway.department_id,
+      actor_user_id: 1,
+      status: "OPEN",
+      reason: body.reason || "Interactive diagnostic terminal",
+      cwd: body.cwd || "/opt/truckwash-edge-agent",
+      cols: Number(body.cols || 120),
+      rows: Number(body.rows || 28),
+      approved_at: "2026-04-09 09:15:00",
+      opened_at: "2026-04-09 09:15:01",
+      closed_at: null,
+    };
+
+    if (!Array.isArray(edgeGatewayFixture.shellSessionsByGatewayId[gatewayId])) {
+      edgeGatewayFixture.shellSessionsByGatewayId[gatewayId] = [];
+    }
+    edgeGatewayFixture.shellSessionsByGatewayId[gatewayId] = [
+      session,
+      ...edgeGatewayFixture.shellSessionsByGatewayId[gatewayId],
+    ];
+    gateway.audit_logs = [
+      { id: Date.now(), created_at: "2026-04-09 09:15:01", action: "GATEWAY_SHELL_SESSION_CREATED", actor_type: "USER" },
+      ...(gateway.audit_logs || []),
+    ];
+
+    await route.fulfill(
+      json(
+        {
+          data: {
+            session,
+            token: `mock-shell-token-${gatewayId}-${sessionId}`,
+            gateway_id: gatewayId,
+            expires_at: "2026-04-09 10:15:00",
+            broker_url: "https://broker.example.test",
+            ws_url: "mock-ws://edge-broker/browser-shell",
+            mock_banner: `Connected to ${gateway.label || gateway.hostname}.\n`,
+            mock_prompt: "edge@truckwash:/opt/truckwash-edge-agent$ ",
+          },
+        },
+        201
+      )
+    );
+    return true;
+  }
+
+  if (edgeGatewayUnsupportedPattern.test(pathname) || edgeGatewayShellPattern.test(pathname)) {
     await route.fulfill(json({ message: "Route not found" }, 404));
     return true;
   }
 
-  if (/\/edge-gateways\/\d+$/.test(pathname) && method === "DELETE") {
-    const gatewayId = Number(pathname.split("/").pop());
+  if (edgeGatewayDeletePattern.test(pathname) && method === "DELETE") {
+    const gatewayId = extractMatchId(edgeGatewayDeletePattern);
     const gateway = findGateway(gatewayId);
     edgeGatewayFixture.gateways = edgeGatewayFixture.gateways.filter((item) => item.id !== gatewayId);
     delete edgeGatewayFixture.pendingDiscoveryByGatewayId[gatewayId];
@@ -3410,8 +3879,9 @@ async function handleEdgeGatewayRoute({ route, request, parsedUrl, pathname, met
     return true;
   }
 
-  if (/\/departments\/\d+\/gateway-cutover$/.test(pathname) && method === "POST") {
-    const departmentId = extractMatchId(/\/departments\/(\d+)\/gateway-cutover$/);
+  if (edgeGatewayCutoverPattern.test(pathname) && method === "POST") {
+    const cutoverMatch = pathname.match(edgeGatewayCutoverPattern);
+    const departmentId = Number(cutoverMatch?.[1] || cutoverMatch?.[2] || 0);
     const body = request.postDataJSON?.() || {};
     edgeGatewayFixture.gateways
       .filter((gateway) => gateway.department_id === departmentId)
diff --git a/tests/unit/edge-gateway-service.spec.js b/tests/unit/edge-gateway-service.spec.js
index 5d2427a2..9b8fff55 100644
--- a/tests/unit/edge-gateway-service.spec.js
+++ b/tests/unit/edge-gateway-service.spec.js
@@ -1,27 +1,86 @@
 import { readFileSync } from "node:fs";
 import { join } from "node:path";
-import { describe, expect, it } from "vitest";
+import { beforeEach, describe, expect, it, vi } from "vitest";
 
-const source = readFileSync(join(process.cwd(), "src/services/edgeGateways.js"), "utf8");
+const authenticatedRequestMock = vi.hoisted(() => vi.fn());
 
-describe("edge gateway service contract", () => {
-  it("wraps the v2 backend edge gateway REST endpoints", () => {
-    expect(source).toContain('"/departments"');
-    expect(source).toContain('"/edge-gateways"');
-    expect(source).toContain('view = "summary"');
-    expect(source).toContain('"/edge-gateways/install-token"');
-    expect(source).toContain("/edge-gateways/${encodeURIComponent(gatewayId)}/operations");
-    expect(source).toContain(
-      "/edge-gateways/${encodeURIComponent(gatewayId)}/operations/${encodeURIComponent(operationId)}/cancel"
-    );
-    expect(source).toContain(
-      "/edge-gateways/${encodeURIComponent(gatewayId)}/operations/${encodeURIComponent(operationId)}/events"
-    );
-    expect(source).toContain("/edge-gateways/${encodeURIComponent(gatewayId)}/rotate-credentials");
-    expect(source).toContain("/edge-gateways/${encodeURIComponent(gatewayId)}/discovery");
-    expect(source).toContain("/edge-gateways/${encodeURIComponent(gatewayId)}/bindings");
-    expect(source).toContain("/departments/${encodeURIComponent(departmentId)}/gateway-cutover");
+vi.mock("@/components/session/authenticatedRequest.vue", () => ({
+  authenticatedRequest: authenticatedRequestMock,
+}));
 
-    expect(source).not.toContain("/edge-gateways/${encodeURIComponent(gatewayId)}/shell-sessions");
+import {
+  EDGE_GATEWAY_WORKSPACE_CACHE_KEY,
+  getEdgeGatewayInstallTokenStatus,
+  getEdgeGatewayModuleConfig,
+  setEdgeGatewayModuleConfig,
+} from "@/services/edgeGateways.js";
+
+describe("edge gateway service", () => {
+  beforeEach(() => {
+    authenticatedRequestMock.mockReset();
+  });
+
+  it("loads module config entries and derives a keyed config object", async () => {
+    authenticatedRequestMock.mockResolvedValue({
+      data: {
+        data: [
+          { variable: "enabled", value: true },
+          { variable: "default_release_channel", value: "canary" },
+        ],
+      },
+    });
+
+    const response = await getEdgeGatewayModuleConfig();
+
+    expect(authenticatedRequestMock).toHaveBeenCalledWith("/edgegateway/config", "GET", {});
+    expect(response.data.config).toEqual({
+      enabled: true,
+      default_release_channel: "canary",
+    });
+  });
+
+  it("persists module config updates as a single payload", async () => {
+    authenticatedRequestMock.mockResolvedValue({
+      data: {
+        data: [],
+      },
+    });
+
+    await setEdgeGatewayModuleConfig({
+      enabled: false,
+      default_release_channel: "canary",
+      default_update_window: "03:00-05:00",
+    });
+
+    expect(authenticatedRequestMock).toHaveBeenCalledTimes(1);
+    expect(authenticatedRequestMock).toHaveBeenCalledWith("/edgegateway/config", "POST", {
+      enabled: false,
+      default_release_channel: "canary",
+      default_update_window: "03:00-05:00",
+    });
+  });
+
+  it("passes through installer session status requests unchanged", async () => {
+    authenticatedRequestMock.mockResolvedValue({
+      data: {
+        data: {
+          claim_token_id: 9001,
+          status: "RUNNING",
+        },
+      },
+    });
+
+    await getEdgeGatewayInstallTokenStatus(9001);
+
+    expect(authenticatedRequestMock).toHaveBeenCalledTimes(1);
+    expect(authenticatedRequestMock).toHaveBeenCalledWith("/edge-gateways/install-token/9001/status", "GET", {});
+  });
+
+  it("keeps a stable browser cache namespace for workspace snapshots", () => {
+    const source = readFileSync(join(process.cwd(), "src/services/edgeGateways.js"), "utf8");
+
+    expect(EDGE_GATEWAY_WORKSPACE_CACHE_KEY).toBe("truckwash.edgeGatewayWorkspace.cache.v1");
+    expect(source).toContain("localStorage");
+    expect(source).toContain("EDGE_GATEWAY_WORKSPACE_CACHE_KEY");
   });
 });
diff --git a/tests/unit/edge-gateway-workspace.spec.js b/tests/unit/edge-gateway-workspace.spec.js
index 5a17cd4b..35444876 100644
--- a/tests/unit/edge-gateway-workspace.spec.js
+++ b/tests/unit/edge-gateway-workspace.spec.js
@@ -25,15 +25,25 @@ const departmentGatewaysPageSource = readFileSync(
   join(process.cwd(), "src/views/dashboards/superUserDashboard/department/DepartmentGatewaysWorkspacePage.vue"),
   "utf8"
 );
+const navigationSource = readFileSync(
+  join(process.cwd(), "src/components/models/navigation/items/NavigationMenuItemsSuperUser.vue"),
+  "utf8"
+);
+const configurationNavigationSource = readFileSync(
+  join(process.cwd(), "src/views/dashboards/superUserDashboard/configuration/SuperUserDashboardConfigurationNavigation.vue"),
+  "utf8"
+);
 
 describe("edge gateway workspace contract", () => {
-  it("splits the v2 UI into route-driven overview, inventory, operations, and manage modules", () => {
+  it("splits the module UI into overview, inventory, operations, and manage modules", () => {
     expect(managerSource).toContain('data-testid="edge-gateway-workspace"');
-    expect(managerSource).toContain('data-testid="gateway-error-details"');
+    expect(managerSource).toContain('data-testid="gateway-summary-strip"');
     expect(managerSource).toContain('data-testid="gateway-fleet-usage"');
-    expect(managerSource).toContain("response?.data?.meta?.fleet_usage");
-    expect(managerSource).toContain("peekCachedEdgeGatewayList");
-    expect(managerSource).toContain("hydrateFleetFromCache");
+    expect(managerSource).toContain('data-testid="gateway-onboarding"');
+    expect(managerSource).toContain('data-testid="gateway-installer-status"');
+    expect(managerSource).toContain('data-testid="gateway-installer-status-step"');
+    expect(managerSource).toContain('data-testid="gateway-installer-status-state"');
+    expect(managerSource).toContain('data-testid="gateway-installer-copy-diagnostics"');
     expect(managerSource).toContain("import EdgeGatewayOverviewPage");
     expect(managerSource).toContain("import EdgeGatewayInventoryPage");
     expect(managerSource).toContain("import EdgeGatewayOperationsPage");
@@ -53,7 +63,9 @@ describe("edge gateway workspace contract", () => {
     expect(manageSource).toContain('data-testid="gateway-delete-confirmation"');
   });
 
-  it("mounts route-driven full-page and safe-subset department workspaces", () => {
+  it("mounts a module workspace and a safe-subset department workspace", () => {
+    expect(edgeGatewaysPageSource).toContain('data-testid="edge-gateway-module-config"');
+    expect(edgeGatewaysPageSource).toContain('gateway-module-disabled-state');
     expect(edgeGatewaysPageSource).toContain(':route-driven="true"');
     expect(edgeGatewaysPageSource).toContain(':allow-destructive="true"');
     expect(departmentGatewaysPageSource).toContain(':route-driven="false"');
@@ -61,18 +73,24 @@ describe("edge gateway workspace contract", () => {
     expect(departmentGatewaysPageSource).toContain('@open-gateway-page="openGatewayPage"');
   });
 
-  it("registers v2 gateway routes and legacy redirects", () => {
-    expect(routerSource).toContain("path: '/superuser/gateways'");
+  it("registers canonical module routes and keeps legacy redirects", () => {
+    expect(routerSource).toContain("path: '/superuser/configuration/edgegateway'");
     expect(routerSource).toContain("name: 'edgegatewayoverview'");
-    expect(routerSource).toContain("path: '/superuser/gateways/:id/overview'");
+    expect(routerSource).toContain("path: '/superuser/configuration/edgegateway/:id/overview'");
     expect(routerSource).toContain("name: 'edgegatewayinventory'");
-    expect(routerSource).toContain("path: '/superuser/gateways/:id/inventory'");
+    expect(routerSource).toContain("path: '/superuser/configuration/edgegateway/:id/inventory'");
     expect(routerSource).toContain("name: 'edgegatewayoperations'");
-    expect(routerSource).toContain("path: '/superuser/gateways/:id/operations'");
+    expect(routerSource).toContain("path: '/superuser/configuration/edgegateway/:id/operations'");
     expect(routerSource).toContain("name: 'edgegatewaymanage'");
-    expect(routerSource).toContain("path: '/superuser/gateways/:id/manage'");
-    expect(routerSource).toContain("path: '/superuser/departments/:departmentId/gateways'");
+    expect(routerSource).toContain("path: '/superuser/configuration/edgegateway/:id/manage'");
+    expect(routerSource).toContain("path: '/superuser/gateways'");
     expect(routerSource).toContain("configure: 'inventory'");
     expect(routerSource).toContain("assess: 'overview'");
   });
+
+  it("surfaces the module in superuser navigation and configuration tabs", () => {
+    expect(navigationSource).toContain("/superuser/configuration/edgegateway");
+    expect(configurationNavigationSource).toContain("Edge Gateway");
+    expect(configurationNavigationSource).toContain("/superuser/configuration/edgegateway");
+  });
 });
diff --git a/vite.config.js b/vite.config.js
index deb2df70..b7c9e8cc 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -218,6 +218,12 @@ export default defineConfig(({ mode }) => {
             watch: {
                 ignored: ['**/output/playwright/**']
             }
-        }
+        },
+        optimizeDeps: isPlaywrightRuntime
+            ? {
+                noDiscovery: true
+            }
+            : undefined
+        
     }
 })