diff --git a/package-lock.json b/package-lock.json
index d34b125..0c22ba0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,7 +17,10 @@
         "@xterm/addon-web-links": "^0.11.0",
         "@xterm/xterm": "^5.5.0",
         "axios": "^1.6.7",
+        "diff": "^9.0.0",
+        "dompurify": "^3.4.8",
         "lucide-vue-next": "^0.554.0",
+        "marked": "^18.0.5",
         "pinia": "^2.1.7",
         "primeicons": "^6.0.1",
         "primevue": "^3.50.0",
@@ -1320,6 +1323,13 @@
         "undici-types": "~6.21.0"
       }
     },
+    "node_modules/@types/trusted-types": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
+      "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/@types/whatwg-mimetype": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/@types/whatwg-mimetype/-/whatwg-mimetype-3.0.2.tgz",
@@ -2218,6 +2228,15 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/diff": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/diff/-/diff-9.0.0.tgz",
+      "integrity": "sha512-svtcdpS8CgJyqAjEQIXdb3OjhFVVYjzGAPO8WGCmRbrml64SPw/jJD4GoE98aR7r25A0XcgrK3F02yw9R/vhQw==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.3.1"
+      }
+    },
     "node_modules/dir-glob": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
@@ -2244,6 +2263,15 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/dompurify": {
+      "version": "3.4.8",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.4.8.tgz",
+      "integrity": "sha512-yb1cEmaOum7wFvOCSQxyfgVlv5D47Rc30iZWoMpbDIWTnJ6grDDQyu2KFJzB2k7u0pMuJcQ1zphH//fFnw2tjQ==",
+      "license": "(MPL-2.0 OR Apache-2.0)",
+      "optionalDependencies": {
+        "@types/trusted-types": "^2.0.7"
+      }
+    },
     "node_modules/dunder-proto": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
@@ -3394,6 +3422,18 @@
         "@jridgewell/sourcemap-codec": "^1.5.5"
       }
     },
+    "node_modules/marked": {
+      "version": "18.0.5",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-18.0.5.tgz",
+      "integrity": "sha512-S6GcvALHg6K4ohtu4E7x0a1AqhAjp6cV8KhLSyN9qVapnzJkusVBxZRcIU9AeYsbe6P1hKDusSbEOzGyyuce6w==",
+      "license": "MIT",
+      "bin": {
+        "marked": "bin/marked.js"
+      },
+      "engines": {
+        "node": ">= 20"
+      }
+    },
     "node_modules/math-intrinsics": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
diff --git a/package.json b/package.json
index fa4896d..1e880f4 100644
--- a/package.json
+++ b/package.json
@@ -31,7 +31,10 @@
     "@xterm/addon-web-links": "^0.11.0",
     "@xterm/xterm": "^5.5.0",
     "axios": "^1.6.7",
+    "diff": "^9.0.0",
+    "dompurify": "^3.4.8",
     "lucide-vue-next": "^0.554.0",
+    "marked": "^18.0.5",
     "pinia": "^2.1.7",
     "primeicons": "^6.0.1",
     "primevue": "^3.50.0",
diff --git a/src/App.vue b/src/App.vue
index c934471..2ec13e3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,8 @@
 <template>
   <div id="app">
     <ToastNotifications />
+    <PlanFlowHost />
+    <AssistHost />
     <div v-if="!ready" class="app-loading">
       <Logo variant="icon" size="lg" />
     </div>
@@ -11,6 +13,8 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
 import ToastNotifications from "@/components/ToastNotifications.vue";
+import PlanFlowHost from "@/components/plan/PlanFlowHost.vue";
+import AssistHost from "@/components/ai/AssistHost.vue";
 import Logo from "@/components/base/Logo.vue";
 import { useSetupStore } from "@/stores/setup";
 import { useRouter } from "vue-router";
diff --git a/src/components/DomainsManager.vue b/src/components/DomainsManager.vue
index f637912..5653e44 100644
--- a/src/components/DomainsManager.vue
+++ b/src/components/DomainsManager.vue
@@ -90,10 +90,12 @@ import { ref, computed, onMounted, watch } from "vue";
 import type { DomainConfig, Service, ProxyStatus, Certificate } from "@/types";
 import { deploymentsApi, certificatesApi } from "@/services/api";
 import { useNotificationsStore } from "@/stores/notifications";
+import { usePlanFlow } from "@/composables/usePlanFlow";
 import DomainFormModal from "./DomainFormModal.vue";
 import ConfirmModal from "./ConfirmModal.vue";
 
 const notifications = useNotificationsStore();
+const { runGuarded } = usePlanFlow();
 
 const props = defineProps<{
   deploymentName: string;
@@ -175,19 +177,25 @@ function closeModals() {
 async function handleSaveDomain(domain: DomainConfig) {
   saving.value = true;
   try {
-    if (editingDomain.value && editingDomain.value.id) {
-      await deploymentsApi.updateDomain(props.deploymentName, editingDomain.value.id, domain);
+    const isUpdate = Boolean(editingDomain.value && editingDomain.value.id);
+    const callDomainApi = (opts?: { plan?: boolean }) =>
+      isUpdate
+        ? deploymentsApi.updateDomain(props.deploymentName, editingDomain.value!.id, domain, opts)
+        : deploymentsApi.addDomain(props.deploymentName, domain, opts);
+    const result = await runGuarded(
+      () => callDomainApi(),
+      () => callDomainApi({ plan: true }),
+      "Save Failed",
+    );
+    if (result === false) return;
+    if (isUpdate) {
       notifications.success("Domain Updated", `${domain.domain} has been updated`);
     } else {
-      await deploymentsApi.addDomain(props.deploymentName, domain);
       notifications.success("Domain Added", `${domain.domain} has been added`);
     }
     await fetchDomains();
     closeModals();
     emit("updated");
-  } catch (err: any) {
-    const msg = err.response?.data?.error || err.message;
-    notifications.error("Save Failed", msg);
   } finally {
     saving.value = false;
   }
@@ -197,15 +205,17 @@ async function handleDeleteDomain() {
   if (!deletingDomain.value) return;
   deleting.value = true;
   try {
-    await deploymentsApi.deleteDomain(props.deploymentName, deletingDomain.value.id);
+    const result = await runGuarded(
+      () => deploymentsApi.deleteDomain(props.deploymentName, deletingDomain.value!.id),
+      () => deploymentsApi.deleteDomain(props.deploymentName, deletingDomain.value!.id, { plan: true }),
+      "Delete Failed",
+    );
+    if (result === false) return;
     notifications.success("Domain Deleted", `${deletingDomain.value.domain} has been removed`);
     await fetchDomains();
     showDeleteModal.value = false;
     deletingDomain.value = null;
     emit("updated");
-  } catch (err: any) {
-    const msg = err.response?.data?.error || err.message;
-    notifications.error("Delete Failed", msg);
   } finally {
     deleting.value = false;
   }
diff --git a/src/components/LogViewer.vue b/src/components/LogViewer.vue
index a65026d..10d0a3b 100644
--- a/src/components/LogViewer.vue
+++ b/src/components/LogViewer.vue
@@ -32,6 +32,14 @@
           <i class="pi pi-arrow-down" />
           Follow
         </label>
+        <button
+          v-if="logs"
+          class="toolbar-btn ai-btn"
+          title="Analyze these logs with the AI assistant"
+          @click="openAssist"
+        >
+          <Sparkles :size="14" />
+        </button>
         <button class="toolbar-btn" title="Search (Ctrl+F)" @click="toggleSearch">
           <i class="pi pi-search" />
         </button>
@@ -64,6 +72,8 @@ import { FitAddon } from "@xterm/addon-fit";
 import { SearchAddon } from "@xterm/addon-search";
 import { WebLinksAddon } from "@xterm/addon-web-links";
 import "@xterm/xterm/css/xterm.css";
+import { Sparkles } from "lucide-vue-next";
+import { useAssistStore, type AssistContext } from "@/stores/assist";
 
 const props = withDefaults(
   defineProps<{
@@ -74,6 +84,7 @@ const props = withDefaults(
     theme?: "dark" | "light";
     fontSize?: number;
     lineHeight?: number;
+    assistContext?: AssistContext | null;
   }>(),
   {
     logs: "",
@@ -83,6 +94,7 @@ const props = withDefaults(
     theme: "dark",
     fontSize: 13,
     lineHeight: 1.4,
+    assistContext: null,
   },
 );
 
@@ -90,6 +102,35 @@ defineEmits<{
   refresh: [];
 }>();
 
+// Every surface that renders logs gets the AI action for free. A
+// parent can pass a richer context (deployment scope unlocks gathered
+// sources and runnable suggestions); without one the visible logs are
+// analyzed as host-level output.
+// The viewer already holds the logs on screen, so it hands them to the
+// assistant directly: the model analyzes what the user is looking at
+// instead of hunting for it with tools. The parent context only
+// supplies scope/deployment/subject.
+const openAssist = () => {
+  const store = useAssistStore();
+  const base = props.assistContext ?? { scope: "system" as const, subject: props.fileName.replace(/\.txt$/, "") };
+  if (base.seedMessage) {
+    store.open(base);
+    return;
+  }
+  if (props.logs) {
+    store.open({
+      ...base,
+      seedMessage: `Analyze the recent logs for ${base.subject}: summarize what they show, report any problems with potential solutions, and say so plainly if everything looks normal.`,
+      seedContext: `\`\`\`\n${props.logs}\n\`\`\``,
+    });
+  } else {
+    store.open({
+      ...base,
+      seedMessage: `Review the recent logs for ${base.subject}, summarize them and report any problems with potential solutions.`,
+    });
+  }
+};
+
 const terminalContainer = ref<HTMLElement | null>(null);
 const autoScroll = ref(true);
 const showSearch = ref(false);
diff --git a/src/components/OperationModal.vue b/src/components/OperationModal.vue
index 3c13429..6475242 100644
--- a/src/components/OperationModal.vue
+++ b/src/components/OperationModal.vue
@@ -26,6 +26,7 @@
         empty-message="Waiting for output..."
         :file-name="`${deploymentName}-${operation}.txt`"
         :max-height="300"
+        :assist-context="isRunning ? null : assistContext"
       />
     </div>
 
@@ -39,6 +40,7 @@
 import { ref, computed, watch } from "vue";
 import BaseModal from "./base/BaseModal.vue";
 import LogViewer from "./LogViewer.vue";
+import type { AssistContext } from "@/stores/assist";
 
 const props = defineProps<{
   visible: boolean;
@@ -51,6 +53,16 @@ const props = defineProps<{
 
 const emit = defineEmits(["close"]);
 
+const assistContext = computed<AssistContext>(() => ({
+  scope: "deployment",
+  deployment: props.deploymentName,
+  subject: props.deploymentName,
+  seedMessage: `The "${props.operation}" operation just ${
+    props.isSuccess ? "finished" : "failed"
+  }. Explain what happened${props.isSuccess ? "" : " and how to fix it"}.`,
+  seedContext: `\`\`\`\n${props.output || "(no output captured)"}\n\`\`\``,
+}));
+
 const startTime = ref<number | null>(null);
 const elapsedTime = ref("0s");
 
diff --git a/src/components/ai/AssistButton.vue b/src/components/ai/AssistButton.vue
new file mode 100644
index 0000000..67ba290
--- /dev/null
+++ b/src/components/ai/AssistButton.vue
@@ -0,0 +1,26 @@
+<template>
+  <button class="btn btn-sm btn-secondary" :title="title" @click="open"><Sparkles :size="14" /> {{ label }}</button>
+</template>
+
+<script setup lang="ts">
+import { Sparkles } from "lucide-vue-next";
+import { useAssistStore, type AssistContext } from "@/stores/assist";
+
+const props = withDefaults(
+  defineProps<{
+    context: AssistContext;
+    label?: string;
+    title?: string;
+  }>(),
+  {
+    label: "Ask AI",
+    title: "Analyze this with the AI assistant",
+  },
+);
+
+const store = useAssistStore();
+
+const open = () => {
+  store.open(props.context);
+};
+</script>
diff --git a/src/components/ai/AssistChat.test.ts b/src/components/ai/AssistChat.test.ts
new file mode 100644
index 0000000..e9b92dc
--- /dev/null
+++ b/src/components/ai/AssistChat.test.ts
@@ -0,0 +1,126 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { mount } from "@vue/test-utils";
+import { createPinia, setActivePinia } from "pinia";
+import AssistChat from "./AssistChat.vue";
+import { useAssistStore } from "@/stores/assist";
+import type { AISession } from "@/services/api";
+
+vi.mock("dompurify", () => ({
+  default: { sanitize: (html: string) => html.replace(/<script[\s\S]*?<\/script>/g, "") },
+}));
+
+vi.mock("@/services/api", () => ({
+  aiApi: { approveSession: vi.fn().mockResolvedValue({ data: { messages: [], pending: [], suggested_actions: [] } }) },
+  containersApi: { exec: vi.fn() },
+  deploymentsApi: { serviceAction: vi.fn(), getServices: vi.fn() },
+}));
+
+const mountChat = () =>
+  mount(AssistChat, {
+    global: { stubs: { Teleport: true, Transition: false, RouterLink: { template: "<a><slot /></a>" } } },
+  });
+
+describe("AssistChat", () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+  });
+
+  it("renders user and assistant turns with tool steps", async () => {
+    const store = useAssistStore();
+    store.visible = true;
+    store.subject = "myapp";
+    store.scope = "deployment";
+    store.session = {
+      id: "ais_1",
+      scope: "deployment",
+      deployment: "myapp",
+      auto_run: true,
+      status: "ready",
+      messages: [
+        { role: "user", content: "is it healthy?" },
+        {
+          role: "assistant",
+          content: "## Summary\nIt is healthy.",
+          tool_steps: [{ name: "list_deployments", arguments: "{}", result: "- myapp (running)" }],
+        },
+      ],
+      pending: [],
+      suggested_actions: [],
+    } as AISession;
+
+    const wrapper = mountChat();
+    expect(wrapper.find(".bubble.user").text()).toContain("is it healthy?");
+    expect(wrapper.find(".markdown").html()).toContain("<h2>");
+    expect(wrapper.find(".tool-step-head").text()).toContain("list deployments");
+  });
+
+  it("shows the approval card when tools are pending", () => {
+    const store = useAssistStore();
+    store.visible = true;
+    store.session = {
+      id: "ais_1",
+      scope: "system",
+      auto_run: false,
+      status: "awaiting_approval",
+      messages: [{ role: "user", content: "check networks" }],
+      pending: [{ id: "c1", name: "exec_in_service", arguments: '{"service":"web","command":"env"}' }],
+      suggested_actions: [],
+    } as AISession;
+
+    const wrapper = mountChat();
+    const card = wrapper.find(".approval-card");
+    expect(card.exists()).toBe(true);
+    expect(card.text()).toContain("exec in service: env");
+    expect(card.find(".approval-buttons").exists()).toBe(true);
+    expect(card.text()).toContain("Allow");
+    expect(card.text()).toContain("Decline");
+  });
+
+  it("submits a single decision on one click", async () => {
+    const { aiApi } = await import("@/services/api");
+    const store = useAssistStore();
+    store.visible = true;
+    store.session = {
+      id: "ais_1",
+      scope: "system",
+      auto_run: false,
+      status: "awaiting_approval",
+      messages: [{ role: "user", content: "check" }],
+      pending: [{ id: "c1", name: "list_networks", arguments: "{}" }],
+      suggested_actions: [],
+    } as AISession;
+
+    const wrapper = mountChat();
+    const allow = wrapper.findAll(".approval-buttons button").find((b) => b.text() === "Allow");
+    await allow!.trigger("click");
+    expect(vi.mocked(aiApi.approveSession)).toHaveBeenCalledWith("ais_1", { c1: true });
+  });
+
+  it("disables input while awaiting approval", () => {
+    const store = useAssistStore();
+    store.visible = true;
+    store.session = {
+      id: "ais_1",
+      scope: "system",
+      auto_run: false,
+      status: "awaiting_approval",
+      messages: [],
+      pending: [{ id: "c1", name: "list_networks", arguments: "{}" }],
+      suggested_actions: [],
+    } as AISession;
+
+    const wrapper = mountChat();
+    expect(wrapper.find(".chat-input").attributes("disabled")).toBeDefined();
+  });
+
+  it("offers a settings link when AI is disabled", () => {
+    const store = useAssistStore();
+    store.visible = true;
+    store.error =
+      "The AI assistant is not configured. An admin can connect any OpenAI-compatible provider under Settings, AI Assistant.";
+
+    const wrapper = mountChat();
+    expect(wrapper.find(".chat-settings-hint").exists()).toBe(true);
+    expect(wrapper.text()).toContain("Open AI Settings");
+  });
+});
diff --git a/src/components/ai/AssistChat.vue b/src/components/ai/AssistChat.vue
new file mode 100644
index 0000000..d99b4ae
--- /dev/null
+++ b/src/components/ai/AssistChat.vue
@@ -0,0 +1,512 @@
+<template>
+  <BaseModal :visible="store.visible" size="xl" :close-on-overlay="!store.loading" @close="store.close">
+    <template #header>
+      <div class="chat-header">
+        <div class="chat-header-icon"><Sparkles :size="18" /></div>
+        <div class="chat-header-text">
+          <h3>AI Assistant</h3>
+          <p>{{ headerSubtitle }}</p>
+        </div>
+        <label class="autorun-toggle" :title="autoRunTitle">
+          <input v-model="store.autoRun" type="checkbox" :disabled="hasSession" />
+          <span>Auto-run lookups</span>
+        </label>
+      </div>
+    </template>
+
+    <div v-if="settingsHint" class="chat-settings-hint">
+      <Sparkles :size="16" />
+      <div>
+        <p>{{ store.error }}</p>
+        <router-link to="/settings" class="btn btn-sm btn-primary" @click="store.close">Open AI Settings</router-link>
+      </div>
+    </div>
+
+    <template v-else>
+      <div ref="scrollEl" class="chat-body">
+        <div v-if="!turns.length && !store.loading" class="chat-empty">
+          <Sparkles :size="28" />
+          <p>{{ emptyPrompt }}</p>
+        </div>
+
+        <div v-for="(turn, i) in turns" :key="i" class="turn" :class="turn.role">
+          <div v-if="turn.role === 'user'" class="bubble user">{{ turn.content }}</div>
+          <div v-else class="bubble assistant">
+            <div v-if="turn.tool_steps?.length" class="tool-steps">
+              <div v-for="(step, si) in turn.tool_steps" :key="si" class="tool-step">
+                <button class="tool-step-head" @click="toggleStep(i, si)">
+                  <Search :size="12" />
+                  <span class="tool-name">{{ stepLabel(step) }}</span>
+                  <ChevronDown :size="12" :class="{ open: isStepOpen(i, si) }" />
+                </button>
+                <pre v-if="isStepOpen(i, si) && step.result" class="tool-result">{{ step.result }}</pre>
+              </div>
+            </div>
+            <!-- eslint-disable-next-line vue/no-v-html -->
+            <div v-if="turn.content" class="markdown" v-html="renderMarkdown(turn.content)" />
+          </div>
+        </div>
+
+        <div v-if="pending.length" class="approval-card">
+          <p class="approval-title"><CircleAlert :size="14" /> The assistant wants to run a read-only lookup</p>
+          <div v-for="call in pending" :key="call.id" class="approval-item">
+            <code>{{ toolDisplay(call) }}</code>
+            <div
+              v-if="call.id in store.decisions"
+              class="approval-decided"
+              :class="{ allowed: store.decisions[call.id] }"
+            >
+              {{ store.decisions[call.id] ? "Allowed" : "Declined" }}
+            </div>
+            <div v-else class="approval-buttons">
+              <button class="btn btn-xs btn-secondary" :disabled="store.loading" @click="store.decide(call.id, false)">
+                Decline
+              </button>
+              <button class="btn btn-xs btn-primary" :disabled="store.loading" @click="store.decide(call.id, true)">
+                Allow
+              </button>
+            </div>
+          </div>
+          <div v-if="pending.length > 1" class="approval-actions">
+            <button class="btn btn-xs btn-secondary" :disabled="store.loading" @click="store.declineAll">
+              Decline all
+            </button>
+            <button class="btn btn-xs btn-primary" :disabled="store.loading" @click="store.approveAll">
+              Allow all
+            </button>
+          </div>
+        </div>
+
+        <div v-if="suggestions.length" class="suggestions">
+          <h4><Zap :size="14" /> Suggested actions</h4>
+          <div v-for="(s, idx) in suggestions" :key="idx" class="suggestion-card">
+            <div class="suggestion-info">
+              <span class="suggestion-title">{{ s.title }}</span>
+              <code v-if="s.kind === 'exec'" class="suggestion-command">{{ s.command }}</code>
+              <span v-else class="suggestion-command plain">{{ s.action }} {{ s.service }}</span>
+              <span v-if="s.reason" class="suggestion-reason">{{ s.reason }}</span>
+            </div>
+            <button
+              class="btn btn-sm btn-primary"
+              :disabled="store.runningIndex !== null"
+              @click="store.runSuggestion(s, idx)"
+            >
+              <Play :size="12" /> Run
+            </button>
+            <pre v-if="store.suggestionOutputs[idx]" class="suggestion-output">{{ store.suggestionOutputs[idx] }}</pre>
+          </div>
+        </div>
+
+        <div v-if="store.loading" class="chat-thinking"><i class="pi pi-spin pi-spinner" /> {{ thinkingLabel }}</div>
+        <div v-else-if="store.error" class="chat-error">{{ store.error }}</div>
+      </div>
+    </template>
+
+    <template v-if="!settingsHint" #footer>
+      <div class="chat-input-row">
+        <input
+          v-model="draft"
+          type="text"
+          class="chat-input"
+          :placeholder="inputPlaceholder"
+          :disabled="inputDisabled"
+          @keyup.enter="submit"
+        />
+        <button class="btn btn-primary" :disabled="inputDisabled || !draft.trim()" @click="submit">
+          <Send :size="14" />
+        </button>
+      </div>
+    </template>
+  </BaseModal>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, nextTick } from "vue";
+import { Sparkles, Search, ChevronDown, CircleAlert, Zap, Play, Send } from "lucide-vue-next";
+import { marked } from "marked";
+import DOMPurify from "dompurify";
+import BaseModal from "@/components/base/BaseModal.vue";
+import { useAssistStore, AI_DISABLED_MESSAGE } from "@/stores/assist";
+import type { AIToolCall, AIToolStep } from "@/services/api";
+
+const store = useAssistStore();
+const draft = ref("");
+const scrollEl = ref<HTMLElement | null>(null);
+const openSteps = ref<Set<string>>(new Set());
+
+const settingsHint = computed(() => store.error === AI_DISABLED_MESSAGE);
+const hasSession = computed(() => store.session !== null);
+const turns = computed(() => store.session?.messages ?? []);
+const pending = computed(() => store.session?.pending ?? []);
+const suggestions = computed(() => store.session?.suggested_actions ?? []);
+
+const headerSubtitle = computed(() =>
+  store.scope === "deployment" ? `Deployment: ${store.subject}` : "This FlatRun instance",
+);
+const emptyPrompt = computed(() =>
+  store.scope === "deployment"
+    ? `What do you want to know about ${store.subject}, or what should I do?`
+    : "What do you want to know, or what do you want me to do?",
+);
+const inputPlaceholder = computed(() =>
+  pending.value.length ? "Resolve the lookups above to continue..." : "Ask a question...",
+);
+const autoRunTitle = computed(() =>
+  hasSession.value
+    ? "Set before the conversation starts"
+    : "On: the assistant runs read-only lookups itself. Off: it asks before each one.",
+);
+const thinkingLabel = computed(() => (store.autoRun ? "Investigating..." : "Thinking..."));
+const inputDisabled = computed(() => store.loading || pending.value.length > 0);
+
+const submit = () => {
+  const text = draft.value.trim();
+  if (!text || inputDisabled.value) return;
+  draft.value = "";
+  store.send(text);
+};
+
+const renderMarkdown = (content: string) => DOMPurify.sanitize(marked.parse(content, { async: false }) as string);
+
+const stepKey = (turn: number, step: number) => `${turn}:${step}`;
+const isStepOpen = (turn: number, step: number) => openSteps.value.has(stepKey(turn, step));
+const toggleStep = (turn: number, step: number) => {
+  const key = stepKey(turn, step);
+  const next = new Set(openSteps.value);
+  next.has(key) ? next.delete(key) : next.add(key);
+  openSteps.value = next;
+};
+
+const stepLabel = (step: AIToolStep) => {
+  const args = parseArgs(step.arguments);
+  const detail = args.path || args.command || args.deployment || args.service || "";
+  return detail ? `${humanTool(step.name)}: ${detail}` : humanTool(step.name);
+};
+const toolDisplay = (call: AIToolCall) => {
+  const args = parseArgs(call.arguments);
+  const detail = args.command || args.path || args.service || args.deployment || "";
+  return detail ? `${humanTool(call.name)}: ${detail}` : humanTool(call.name);
+};
+const parseArgs = (raw: string): Record<string, string> => {
+  try {
+    return JSON.parse(raw || "{}");
+  } catch {
+    return {};
+  }
+};
+const humanTool = (name: string) => name.replace(/_/g, " ");
+
+watch(
+  () => [turns.value.length, store.loading, pending.value.length],
+  async () => {
+    await nextTick();
+    if (scrollEl.value) scrollEl.value.scrollTop = scrollEl.value.scrollHeight;
+  },
+);
+</script>
+
+<style scoped>
+.chat-header {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  width: 100%;
+}
+.chat-header-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border-radius: 8px;
+  background: #eff6ff;
+  color: #2563eb;
+}
+.chat-header-text {
+  flex: 1;
+}
+.chat-header-text h3 {
+  margin: 0;
+  font-size: 1rem;
+  color: #111827;
+}
+.chat-header-text p {
+  margin: 0.1rem 0 0;
+  font-size: 0.78rem;
+  color: #6b7280;
+}
+.autorun-toggle {
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+  font-size: 0.75rem;
+  color: #6b7280;
+  cursor: pointer;
+}
+.autorun-toggle input:disabled {
+  cursor: not-allowed;
+}
+
+.chat-settings-hint {
+  display: flex;
+  gap: 0.6rem;
+  padding: 1rem;
+  background: #eff6ff;
+  border: 1px solid #bfdbfe;
+  border-radius: 8px;
+  color: #1e40af;
+}
+.chat-settings-hint p {
+  margin: 0 0 0.6rem;
+  font-size: 0.85rem;
+}
+
+.chat-body {
+  max-height: 60vh;
+  min-height: 320px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  padding: 0.25rem;
+}
+.chat-empty {
+  margin: auto;
+  text-align: center;
+  color: #9ca3af;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+}
+.chat-empty p {
+  max-width: 28rem;
+  font-size: 0.85rem;
+}
+
+.turn {
+  display: flex;
+}
+.turn.user {
+  justify-content: flex-end;
+}
+.bubble {
+  max-width: 88%;
+  border-radius: 12px;
+  padding: 0.6rem 0.85rem;
+  font-size: 0.85rem;
+  line-height: 1.55;
+}
+.bubble.user {
+  background: #2563eb;
+  color: white;
+  border-bottom-right-radius: 4px;
+}
+.bubble.assistant {
+  background: #f8fafc;
+  border: 1px solid #eef2f7;
+  color: #1e293b;
+  border-bottom-left-radius: 4px;
+  width: 100%;
+}
+
+.tool-steps {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  margin-bottom: 0.5rem;
+}
+.tool-step-head {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  width: 100%;
+  border: none;
+  background: #eef2ff;
+  color: #4338ca;
+  border-radius: 6px;
+  padding: 0.3rem 0.5rem;
+  font-size: 0.72rem;
+  cursor: pointer;
+}
+.tool-step-head .tool-name {
+  flex: 1;
+  text-align: left;
+  font-family: ui-monospace, monospace;
+}
+.tool-step-head .open {
+  transform: rotate(180deg);
+}
+.tool-result {
+  margin: 0.2rem 0 0;
+  padding: 0.45rem 0.6rem;
+  background: #0f172a;
+  color: #e2e8f0;
+  border-radius: 6px;
+  font-size: 0.7rem;
+  max-height: 160px;
+  overflow: auto;
+  white-space: pre-wrap;
+}
+
+.markdown :deep(h2) {
+  font-size: 0.92rem;
+  margin: 0.6rem 0 0.3rem;
+}
+.markdown :deep(pre),
+.markdown :deep(code) {
+  background: #eef2f7;
+  border-radius: 4px;
+  font-size: 0.76rem;
+}
+.markdown :deep(pre) {
+  padding: 0.5rem 0.7rem;
+  overflow-x: auto;
+}
+
+.approval-card {
+  border: 1px solid #fde68a;
+  background: #fffbeb;
+  border-radius: 8px;
+  padding: 0.75rem;
+}
+.approval-title {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  margin: 0 0 0.5rem;
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: #92400e;
+}
+.approval-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.3rem 0;
+}
+.approval-item code {
+  flex: 1;
+  font-size: 0.74rem;
+  color: #78350f;
+  overflow-wrap: anywhere;
+}
+.approval-buttons {
+  display: flex;
+  gap: 0.35rem;
+  flex-shrink: 0;
+}
+.approval-decided {
+  font-size: 0.72rem;
+  font-weight: 600;
+  color: #92400e;
+  flex-shrink: 0;
+}
+.approval-decided.allowed {
+  color: #15803d;
+}
+.btn-xs {
+  padding: 0.2rem 0.55rem;
+  font-size: 0.72rem;
+}
+.approval-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  margin-top: 0.5rem;
+}
+
+.suggestions {
+  border-top: 1px solid #e5e7eb;
+  padding-top: 0.75rem;
+}
+.suggestions h4 {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  margin: 0 0 0.5rem;
+  font-size: 0.82rem;
+  color: #111827;
+}
+.suggestion-card {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 0.4rem 1rem;
+  align-items: center;
+  padding: 0.6rem 0.75rem;
+  border: 1px solid #e5e7eb;
+  border-radius: 6px;
+}
+.suggestion-card + .suggestion-card {
+  margin-top: 0.4rem;
+}
+.suggestion-info {
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+  min-width: 0;
+}
+.suggestion-title {
+  font-size: 0.82rem;
+  font-weight: 600;
+}
+.suggestion-command {
+  font-family: ui-monospace, monospace;
+  font-size: 0.74rem;
+  background: #f3f4f6;
+  padding: 0.12rem 0.4rem;
+  border-radius: 4px;
+  width: fit-content;
+  max-width: 100%;
+  overflow-wrap: anywhere;
+}
+.suggestion-command.plain {
+  font-family: inherit;
+  background: #eff6ff;
+  color: #1d4ed8;
+}
+.suggestion-reason {
+  font-size: 0.74rem;
+  color: #6b7280;
+}
+.suggestion-output {
+  grid-column: 1 / -1;
+  margin: 0;
+  padding: 0.45rem 0.6rem;
+  background: #0f172a;
+  color: #e2e8f0;
+  border-radius: 6px;
+  font-size: 0.7rem;
+  max-height: 160px;
+  overflow: auto;
+  white-space: pre-wrap;
+}
+
+.chat-thinking {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  font-size: 0.8rem;
+  color: #6b7280;
+}
+.chat-error {
+  font-size: 0.8rem;
+  color: #b91c1c;
+}
+
+.chat-input-row {
+  display: flex;
+  gap: 0.5rem;
+  width: 100%;
+}
+.chat-input {
+  flex: 1;
+  font-size: 0.85rem;
+  padding: 0.5rem 0.7rem;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+}
+.chat-input:disabled {
+  background: #f9fafb;
+}
+</style>
diff --git a/src/components/ai/AssistHost.vue b/src/components/ai/AssistHost.vue
new file mode 100644
index 0000000..ac2dc89
--- /dev/null
+++ b/src/components/ai/AssistHost.vue
@@ -0,0 +1,7 @@
+<template>
+  <AssistChat />
+</template>
+
+<script setup lang="ts">
+import AssistChat from "./AssistChat.vue";
+</script>
diff --git a/src/components/base/SplitActionButton.vue b/src/components/base/SplitActionButton.vue
new file mode 100644
index 0000000..e4de667
--- /dev/null
+++ b/src/components/base/SplitActionButton.vue
@@ -0,0 +1,147 @@
+<template>
+  <div ref="rootEl" class="split-action">
+    <button class="btn main-btn" :class="btnClass" :disabled="disabled" @click="select('deployment')">
+      <i :class="icon" /> {{ label }}
+    </button>
+    <button
+      class="btn caret-btn"
+      :class="btnClass"
+      :disabled="disabled || !services.length"
+      :title="`${label} a single service`"
+      @click.stop="open = !open"
+    >
+      <i class="pi pi-chevron-down" />
+    </button>
+    <Transition name="menu">
+      <div v-if="open" class="split-menu">
+        <button class="menu-item" @click="select('deployment')">
+          <i class="pi pi-clone" />
+          Entire deployment
+        </button>
+        <div class="menu-divider" />
+        <button v-for="svc in services" :key="svc" class="menu-item" @click="select(svc)">
+          <i class="pi pi-box" />
+          {{ svc }}
+        </button>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onBeforeUnmount } from "vue";
+
+withDefaults(
+  defineProps<{
+    label: string;
+    icon: string;
+    btnClass?: string;
+    disabled?: boolean;
+    services?: string[];
+  }>(),
+  {
+    btnClass: "btn-secondary",
+    disabled: false,
+    services: () => [],
+  },
+);
+
+const emit = defineEmits<{
+  action: [scope: string];
+}>();
+
+const open = ref(false);
+const rootEl = ref<HTMLElement | null>(null);
+
+const select = (scope: string) => {
+  open.value = false;
+  emit("action", scope);
+};
+
+const onDocumentClick = (event: MouseEvent) => {
+  if (open.value && rootEl.value && !rootEl.value.contains(event.target as Node)) {
+    open.value = false;
+  }
+};
+
+onMounted(() => document.addEventListener("click", onDocumentClick));
+onBeforeUnmount(() => document.removeEventListener("click", onDocumentClick));
+</script>
+
+<style scoped>
+.split-action {
+  position: relative;
+  display: inline-flex;
+}
+
+.main-btn {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.caret-btn {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  margin-left: 1px;
+}
+
+.split-menu {
+  position: absolute;
+  top: calc(100% + 4px);
+  right: 0;
+  min-width: 200px;
+  background: white;
+  border: 1px solid var(--border-color, #e2e8f0);
+  border-radius: var(--radius-md, 8px);
+  box-shadow:
+    0 4px 6px rgba(0, 0, 0, 0.05),
+    0 10px 24px rgba(0, 0, 0, 0.1);
+  padding: 0.25rem;
+  z-index: 50;
+}
+
+.menu-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  border: none;
+  background: none;
+  border-radius: var(--radius-sm, 6px);
+  font-size: 0.85rem;
+  color: var(--text-primary, #1e293b);
+  cursor: pointer;
+  text-align: left;
+}
+
+.menu-item:hover {
+  background: var(--surface-hover, #f1f5f9);
+}
+
+.menu-item i {
+  font-size: 0.8rem;
+  color: var(--text-secondary, #64748b);
+}
+
+.menu-divider {
+  height: 1px;
+  background: var(--border-color, #e2e8f0);
+  margin: 0.25rem 0;
+}
+
+.menu-enter-active,
+.menu-leave-active {
+  transition:
+    opacity 0.12s ease,
+    transform 0.12s ease;
+}
+
+.menu-enter-from,
+.menu-leave-to {
+  opacity: 0;
+  transform: translateY(-4px);
+}
+</style>
diff --git a/src/components/base/SubTabs.vue b/src/components/base/SubTabs.vue
new file mode 100644
index 0000000..f5955dd
--- /dev/null
+++ b/src/components/base/SubTabs.vue
@@ -0,0 +1,93 @@
+<template>
+  <div class="sub-tabs">
+    <div class="sub-tabs-bar" role="tablist">
+      <button
+        v-for="tab in tabs"
+        :key="tab.id"
+        role="tab"
+        class="sub-tab"
+        :class="{ active: modelValue === tab.id }"
+        :aria-selected="modelValue === tab.id"
+        @click="emit('update:modelValue', tab.id)"
+      >
+        <i v-if="tab.icon" :class="tab.icon" />
+        {{ tab.label }}
+      </button>
+    </div>
+    <div class="sub-tabs-panel" role="tabpanel">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+export interface SubTab {
+  id: string;
+  label: string;
+  icon?: string;
+}
+
+defineProps<{
+  tabs: SubTab[];
+  modelValue: string;
+}>();
+
+const emit = defineEmits<{
+  "update:modelValue": [id: string];
+}>();
+</script>
+
+<style scoped>
+.sub-tabs-bar {
+  display: flex;
+  gap: 2px;
+  padding: 0 0.75rem;
+}
+
+.sub-tab {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.55rem 1rem;
+  border: 1px solid transparent;
+  border-bottom: none;
+  border-radius: var(--radius-md, 8px) var(--radius-md, 8px) 0 0;
+  background: transparent;
+  font-size: 0.8rem;
+  font-weight: 500;
+  color: var(--color-gray-500, #6b7280);
+  cursor: pointer;
+  margin-bottom: -1px;
+  position: relative;
+  transition:
+    color 0.15s ease,
+    background 0.15s ease;
+}
+
+.sub-tab i {
+  font-size: 0.75rem;
+}
+
+.sub-tab:hover {
+  color: var(--color-gray-700, #374151);
+  background: var(--color-gray-100, #f3f4f6);
+}
+
+.sub-tab.active {
+  color: var(--color-primary-600, #2563eb);
+  background: white;
+  border-color: var(--color-gray-200, #e5e7eb);
+  z-index: 1;
+}
+
+.sub-tab.active:hover {
+  background: white;
+}
+
+.sub-tabs-panel {
+  background: white;
+  border: 1px solid var(--color-gray-200, #e5e7eb);
+  border-radius: var(--radius-md, 8px);
+  padding: 1rem 1.25rem;
+}
+</style>
diff --git a/src/components/plan/DiffView.test.ts b/src/components/plan/DiffView.test.ts
new file mode 100644
index 0000000..6cd1ac2
--- /dev/null
+++ b/src/components/plan/DiffView.test.ts
@@ -0,0 +1,46 @@
+import { describe, it, expect } from "vitest";
+import { mount } from "@vue/test-utils";
+import DiffView from "./DiffView.vue";
+
+describe("DiffView", () => {
+  it("marks removed and added lines", () => {
+    const wrapper = mount(DiffView, {
+      props: { before: "keep\nold\n", after: "keep\nnew\n" },
+    });
+
+    const removed = wrapper.findAll(".diff-line.removed");
+    const added = wrapper.findAll(".diff-line.added");
+    expect(removed).toHaveLength(1);
+    expect(removed[0].text()).toContain("old");
+    expect(added).toHaveLength(1);
+    expect(added[0].text()).toContain("new");
+  });
+
+  it("keeps unchanged lines without diff classes", () => {
+    const wrapper = mount(DiffView, {
+      props: { before: "keep\nold\n", after: "keep\nnew\n" },
+    });
+
+    const context = wrapper.findAll(".diff-line:not(.added):not(.removed)");
+    expect(context).toHaveLength(1);
+    expect(context[0].text()).toContain("keep");
+  });
+
+  it("renders a pure create when before is null", () => {
+    const wrapper = mount(DiffView, {
+      props: { before: null, after: "line one\nline two\n" },
+    });
+
+    expect(wrapper.findAll(".diff-line.added")).toHaveLength(2);
+    expect(wrapper.findAll(".diff-line.removed")).toHaveLength(0);
+  });
+
+  it("renders a pure delete when after is null", () => {
+    const wrapper = mount(DiffView, {
+      props: { before: "line one\nline two\n", after: null },
+    });
+
+    expect(wrapper.findAll(".diff-line.removed")).toHaveLength(2);
+    expect(wrapper.findAll(".diff-line.added")).toHaveLength(0);
+  });
+});
diff --git a/src/components/plan/DiffView.vue b/src/components/plan/DiffView.vue
new file mode 100644
index 0000000..3be40b7
--- /dev/null
+++ b/src/components/plan/DiffView.vue
@@ -0,0 +1,83 @@
+<template>
+  <div class="diff-view">
+    <template v-for="(part, index) in parts" :key="index">
+      <div
+        v-for="(line, lineIndex) in partLines(part)"
+        :key="`${index}-${lineIndex}`"
+        class="diff-line"
+        :class="{ added: part.added, removed: part.removed }"
+      >
+        <span class="diff-marker">{{ part.added ? "+" : part.removed ? "-" : " " }}</span>
+        <span class="diff-text">{{ line }}</span>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { diffLines, type ChangeObject } from "diff";
+
+const props = defineProps<{
+  before: string | null;
+  after: string | null;
+}>();
+
+const parts = computed(() => diffLines(props.before ?? "", props.after ?? ""));
+
+const partLines = (part: ChangeObject<string>) => {
+  const lines = part.value.split("\n");
+  if (lines[lines.length - 1] === "") {
+    lines.pop();
+  }
+  return lines;
+};
+</script>
+
+<style scoped>
+.diff-view {
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  line-height: 1.5;
+  background: var(--color-gray-50);
+  border: 1px solid var(--color-gray-200);
+  border-radius: var(--radius-sm);
+  max-height: 320px;
+  overflow: auto;
+}
+
+.diff-line {
+  display: flex;
+  gap: var(--space-2);
+  padding: 0 var(--space-2);
+  white-space: pre;
+}
+
+.diff-line.added {
+  background: var(--color-success-50);
+  color: var(--color-success-700);
+}
+
+.diff-line.removed {
+  background: var(--color-danger-50);
+  color: var(--color-danger-700);
+}
+
+.diff-marker {
+  flex-shrink: 0;
+  user-select: none;
+  color: var(--color-gray-400);
+}
+
+.diff-line.added .diff-marker {
+  color: var(--color-success-600);
+}
+
+.diff-line.removed .diff-marker {
+  color: var(--color-danger-600);
+}
+
+.diff-text {
+  white-space: pre;
+}
+</style>
diff --git a/src/components/plan/PlanChangeCard.test.ts b/src/components/plan/PlanChangeCard.test.ts
new file mode 100644
index 0000000..bc660e6
--- /dev/null
+++ b/src/components/plan/PlanChangeCard.test.ts
@@ -0,0 +1,82 @@
+import { describe, it, expect } from "vitest";
+import { mount } from "@vue/test-utils";
+import PlanChangeCard from "./PlanChangeCard.vue";
+import type { PlanChange } from "@/types";
+
+const makeChange = (overrides: Partial<PlanChange> = {}): PlanChange => ({
+  type: "file",
+  id: "docker-compose.yml",
+  actions: ["update"],
+  reason: "Compose file content changed",
+  before: "old\n",
+  after: "new\n",
+  sensitive: false,
+  ...overrides,
+});
+
+describe("PlanChangeCard", () => {
+  it.each([
+    ["create", "badge-create"],
+    ["update", "badge-update"],
+    ["delete", "badge-delete"],
+    ["no-op", "badge-no-op"],
+  ])("renders a %s badge", (action, badgeClass) => {
+    const wrapper = mount(PlanChangeCard, {
+      props: { change: makeChange({ actions: [action] }) },
+    });
+
+    const badges = wrapper.findAll(".action-badge");
+    expect(badges).toHaveLength(1);
+    expect(badges[0].classes()).toContain(badgeClass);
+    expect(badges[0].text()).toBe(action);
+  });
+
+  it("renders a single replace badge for the delete plus create pair", () => {
+    const wrapper = mount(PlanChangeCard, {
+      props: { change: makeChange({ actions: ["delete", "create"] }) },
+    });
+
+    const badges = wrapper.findAll(".action-badge");
+    expect(badges).toHaveLength(1);
+    expect(badges[0].classes()).toContain("badge-replace");
+    expect(badges[0].text()).toBe("replace");
+  });
+
+  it("shows the change id and reason", () => {
+    const wrapper = mount(PlanChangeCard, { props: { change: makeChange() } });
+    expect(wrapper.find(".change-id").text()).toBe("docker-compose.yml");
+    expect(wrapper.find(".change-reason").text()).toBe("Compose file content changed");
+  });
+
+  it("expands the diff on header click", async () => {
+    const wrapper = mount(PlanChangeCard, { props: { change: makeChange() } });
+    expect(wrapper.find(".diff-view").exists()).toBe(false);
+
+    await wrapper.find(".change-header").trigger("click");
+    expect(wrapper.find(".diff-view").exists()).toBe(true);
+  });
+
+  it("masks redacted sensitive content and emits reveal", async () => {
+    const wrapper = mount(PlanChangeCard, {
+      props: {
+        change: makeChange({ sensitive: true, before: "[redacted]", after: "[redacted]" }),
+      },
+    });
+
+    expect(wrapper.find(".redacted-notice").exists()).toBe(true);
+    expect(wrapper.find(".diff-view").exists()).toBe(false);
+
+    await wrapper.find(".reveal-btn").trigger("click");
+    expect(wrapper.emitted("reveal")).toHaveLength(1);
+  });
+
+  it("shows the diff for sensitive content that is already revealed", async () => {
+    const wrapper = mount(PlanChangeCard, {
+      props: { change: makeChange({ sensitive: true, before: "secret-old\n", after: "secret-new\n" }) },
+    });
+
+    expect(wrapper.find(".redacted-notice").exists()).toBe(false);
+    await wrapper.find(".change-header").trigger("click");
+    expect(wrapper.find(".diff-view").exists()).toBe(true);
+  });
+});
diff --git a/src/components/plan/PlanChangeCard.vue b/src/components/plan/PlanChangeCard.vue
new file mode 100644
index 0000000..a044328
--- /dev/null
+++ b/src/components/plan/PlanChangeCard.vue
@@ -0,0 +1,175 @@
+<template>
+  <div class="change-card">
+    <div class="change-header" :class="{ clickable: hasDiff }" @click="hasDiff && (expanded = !expanded)">
+      <i class="change-icon" :class="typeIcon" />
+      <span v-for="badge in badges" :key="badge" class="action-badge" :class="`badge-${badge}`">
+        {{ badge }}
+      </span>
+      <code class="change-id">{{ change.id }}</code>
+      <i v-if="hasDiff" class="expand-icon pi" :class="expanded ? 'pi-chevron-up' : 'pi-chevron-down'" />
+    </div>
+    <p class="change-reason">{{ change.reason }}</p>
+
+    <div v-if="isRedacted" class="redacted-notice">
+      <i class="pi pi-eye-slash" />
+      <span>Content hidden because it contains sensitive values.</span>
+      <button class="reveal-btn" @click="emit('reveal')">Reveal</button>
+    </div>
+
+    <DiffView v-else-if="hasDiff && expanded" :before="change.before" :after="change.after" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from "vue";
+import type { PlanChange } from "@/types";
+import DiffView from "./DiffView.vue";
+
+const props = defineProps<{
+  change: PlanChange;
+}>();
+
+const emit = defineEmits<{
+  reveal: [];
+}>();
+
+const expanded = ref(false);
+
+const badges = computed(() => {
+  if (props.change.actions.includes("delete") && props.change.actions.includes("create")) {
+    return ["replace"];
+  }
+  return props.change.actions;
+});
+
+const typeIcon = computed(() => {
+  const icons: Record<string, string> = {
+    file: "pi pi-file",
+    container: "pi pi-box",
+    certificate: "pi pi-lock",
+    database: "pi pi-database",
+    config: "pi pi-cog",
+  };
+  return icons[props.change.type] || "pi pi-circle";
+});
+
+const isRedacted = computed(
+  () => props.change.sensitive && (props.change.before === "[redacted]" || props.change.after === "[redacted]"),
+);
+
+const hasDiff = computed(() => !isRedacted.value && (props.change.before !== null || props.change.after !== null));
+</script>
+
+<style scoped>
+.change-card {
+  border: 1px solid var(--color-gray-200);
+  border-radius: var(--radius-sm);
+  padding: var(--space-3);
+  background: white;
+}
+
+.change-header {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+.change-header.clickable {
+  cursor: pointer;
+}
+
+.change-icon {
+  color: var(--color-gray-500);
+  font-size: var(--text-sm);
+}
+
+.action-badge {
+  padding: 1px var(--space-2);
+  border-radius: var(--radius-full);
+  font-size: 10px;
+  font-weight: var(--font-semibold);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.badge-create {
+  background: var(--color-success-100);
+  color: var(--color-success-700);
+}
+
+.badge-update {
+  background: var(--color-info-100);
+  color: var(--color-info-700);
+}
+
+.badge-replace {
+  background: var(--color-warning-100);
+  color: var(--color-warning-700);
+}
+
+.badge-delete {
+  background: var(--color-danger-100);
+  color: var(--color-danger-700);
+}
+
+.badge-no-op {
+  background: var(--color-gray-100);
+  color: var(--color-gray-600);
+}
+
+.change-id {
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  color: var(--color-gray-700);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+  min-width: 0;
+}
+
+.expand-icon {
+  font-size: var(--text-xs);
+  color: var(--color-gray-400);
+  flex-shrink: 0;
+}
+
+.change-reason {
+  margin: var(--space-2) 0 0;
+  font-size: var(--text-xs);
+  color: var(--color-gray-500);
+}
+
+.redacted-notice {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  margin-top: var(--space-2);
+  padding: var(--space-2) var(--space-3);
+  background: var(--color-gray-50);
+  border: 1px dashed var(--color-gray-300);
+  border-radius: var(--radius-sm);
+  font-size: var(--text-xs);
+  color: var(--color-gray-600);
+}
+
+.reveal-btn {
+  margin-left: auto;
+  background: none;
+  border: none;
+  color: var(--color-primary-500);
+  cursor: pointer;
+  font-size: var(--text-xs);
+  font-weight: var(--font-medium);
+  padding: 0;
+}
+
+.reveal-btn:hover {
+  color: var(--color-primary-600);
+  text-decoration: underline;
+}
+
+.change-card > .diff-view {
+  margin-top: var(--space-2);
+}
+</style>
diff --git a/src/components/plan/PlanFlowHost.vue b/src/components/plan/PlanFlowHost.vue
new file mode 100644
index 0000000..2573bd1
--- /dev/null
+++ b/src/components/plan/PlanFlowHost.vue
@@ -0,0 +1,16 @@
+<template>
+  <PlanReviewModal
+    v-if="store.plan"
+    :plan="store.plan"
+    :loading="store.applying"
+    @apply="store.apply"
+    @discard="store.discard"
+  />
+</template>
+
+<script setup lang="ts">
+import { usePlanFlowStore } from "@/stores/planFlow";
+import PlanReviewModal from "./PlanReviewModal.vue";
+
+const store = usePlanFlowStore();
+</script>
diff --git a/src/components/plan/PlanReviewModal.test.ts b/src/components/plan/PlanReviewModal.test.ts
new file mode 100644
index 0000000..b0b6205
--- /dev/null
+++ b/src/components/plan/PlanReviewModal.test.ts
@@ -0,0 +1,139 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { mount } from "@vue/test-utils";
+import { createTestingPinia } from "@pinia/testing";
+import PlanReviewModal from "./PlanReviewModal.vue";
+import type { Plan } from "@/types";
+
+vi.mock("@/services/api", () => ({
+  plansApi: {
+    get: vi.fn().mockResolvedValue({ data: { plan: {} } }),
+  },
+}));
+
+const makePlan = (overrides: Partial<Plan> = {}): Plan => ({
+  format_version: 1,
+  id: "plan-1",
+  action: "deployment.update_env",
+  status: "available",
+  resource: { type: "deployment", id: "my-app" },
+  created_at: "2026-01-01T00:00:00Z",
+  expires_at: "2026-01-01T01:00:00Z",
+  created_by: { id: "1", name: "admin", type: "user" },
+  request: { method: "PUT", path: "/deployments/my-app/env" },
+  snapshot: { files: {} },
+  changes: [
+    {
+      type: "file",
+      id: ".env.flatrun",
+      actions: ["update"],
+      reason: "Environment variables changed",
+      before: "A=1\n",
+      after: "A=2\n",
+      sensitive: false,
+    },
+  ],
+  summary: { create: 1, update: 2, replace: 0, delete: 0, "no-op": 0 },
+  ...overrides,
+});
+
+const mountModal = (plan: Plan = makePlan(), loading = false) =>
+  mount(PlanReviewModal, {
+    props: { plan, loading },
+    global: {
+      plugins: [createTestingPinia({ createSpy: vi.fn })],
+      stubs: { teleport: true },
+    },
+  });
+
+describe("PlanReviewModal", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("renders summary chips and hides zero counts", () => {
+    const wrapper = mountModal();
+    const chips = wrapper.findAll(".summary-chip");
+    expect(chips).toHaveLength(2);
+    expect(chips[0].text()).toBe("1 create");
+    expect(chips[1].text()).toBe("2 update");
+  });
+
+  it("renders one card per change", () => {
+    const wrapper = mountModal();
+    expect(wrapper.findAll(".change-card")).toHaveLength(1);
+  });
+
+  it("shows the preview warning and expiry note", () => {
+    const wrapper = mountModal();
+    expect(wrapper.find(".preview-warning").text()).toContain("A plan is a preview; applying can still fail.");
+    expect(wrapper.find(".expiry-note").exists()).toBe(true);
+  });
+
+  it("emits apply when the apply button is clicked", async () => {
+    const wrapper = mountModal();
+    await wrapper.find(".btn-primary").trigger("click");
+    expect(wrapper.emitted("apply")).toHaveLength(1);
+  });
+
+  it("emits discard when the discard button is clicked", async () => {
+    const wrapper = mountModal();
+    await wrapper.find(".btn-secondary").trigger("click");
+    expect(wrapper.emitted("discard")).toHaveLength(1);
+  });
+
+  it("styles apply as primary when nothing is deleted", () => {
+    const wrapper = mountModal();
+    expect(wrapper.find(".btn-primary").exists()).toBe(true);
+    expect(wrapper.find(".btn-danger").exists()).toBe(false);
+  });
+
+  it("styles apply as danger when the plan deletes resources", () => {
+    const wrapper = mountModal(makePlan({ summary: { create: 0, update: 0, replace: 0, delete: 1, "no-op": 0 } }));
+    expect(wrapper.find(".btn-danger").exists()).toBe(true);
+  });
+
+  it("styles apply as danger for deployment deletion", () => {
+    const wrapper = mountModal(makePlan({ action: "deployment.delete" }));
+    expect(wrapper.find(".btn-danger").exists()).toBe(true);
+  });
+
+  it("refetches the plan with sensitive content on reveal", async () => {
+    const { plansApi } = await import("@/services/api");
+    const revealed = makePlan({
+      changes: [
+        {
+          type: "file",
+          id: ".env.flatrun",
+          actions: ["update"],
+          reason: "Environment variables changed",
+          before: "SECRET=old\n",
+          after: "SECRET=new\n",
+          sensitive: true,
+        },
+      ],
+    });
+    vi.mocked(plansApi.get).mockResolvedValueOnce({ data: { plan: revealed } } as any);
+
+    const masked = makePlan({
+      changes: [
+        {
+          type: "file",
+          id: ".env.flatrun",
+          actions: ["update"],
+          reason: "Environment variables changed",
+          before: "[redacted]",
+          after: "[redacted]",
+          sensitive: true,
+        },
+      ],
+    });
+    const wrapper = mountModal(masked);
+    expect(wrapper.find(".redacted-notice").exists()).toBe(true);
+
+    await wrapper.find(".reveal-btn").trigger("click");
+    await vi.waitFor(() => {
+      expect(wrapper.find(".redacted-notice").exists()).toBe(false);
+    });
+    expect(plansApi.get).toHaveBeenCalledWith("plan-1", true);
+  });
+});
diff --git a/src/components/plan/PlanReviewModal.vue b/src/components/plan/PlanReviewModal.vue
new file mode 100644
index 0000000..b9a1106
--- /dev/null
+++ b/src/components/plan/PlanReviewModal.vue
@@ -0,0 +1,232 @@
+<template>
+  <BaseModal
+    :visible="visible"
+    title="Review changes"
+    :subtitle="`${displayPlan.action} on ${displayPlan.resource.id}`"
+    icon="pi pi-list"
+    icon-color="primary"
+    size="lg"
+    :close-disabled="loading"
+    :close-on-overlay="false"
+    @close="emit('discard')"
+  >
+    <div class="summary-chips">
+      <span v-for="chip in summaryChips" :key="chip.key" class="summary-chip" :class="`chip-${chip.key}`">
+        {{ chip.count }} {{ chip.label }}
+      </span>
+    </div>
+
+    <div class="changes-list">
+      <PlanChangeCard
+        v-for="(change, index) in displayPlan.changes"
+        :key="`${change.type}-${change.id}-${index}`"
+        :change="change"
+        @reveal="revealSensitive"
+      />
+    </div>
+
+    <p class="expiry-note">
+      <i class="pi pi-clock" />
+      This plan expires {{ formatExpiry(displayPlan.expires_at) }}.
+    </p>
+    <p class="preview-warning">
+      <i class="pi pi-exclamation-triangle" />
+      A plan is a preview; applying can still fail.
+    </p>
+
+    <template #footer>
+      <button class="btn btn-secondary" :disabled="loading" @click="emit('discard')">Discard</button>
+      <button
+        class="btn"
+        :class="isDestructive ? 'btn-danger' : 'btn-primary'"
+        :disabled="loading"
+        @click="emit('apply')"
+      >
+        <i v-if="loading" class="pi pi-spin pi-spinner" />
+        Apply
+      </button>
+    </template>
+  </BaseModal>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from "vue";
+import type { Plan } from "@/types";
+import { plansApi } from "@/services/api";
+import { useNotificationsStore } from "@/stores/notifications";
+import BaseModal from "@/components/base/BaseModal.vue";
+import PlanChangeCard from "./PlanChangeCard.vue";
+
+const props = withDefaults(
+  defineProps<{
+    visible?: boolean;
+    plan: Plan;
+    loading?: boolean;
+  }>(),
+  {
+    visible: true,
+    loading: false,
+  },
+);
+
+const emit = defineEmits<{
+  apply: [];
+  discard: [];
+}>();
+
+const notifications = useNotificationsStore();
+
+const revealedPlan = ref<Plan | null>(null);
+
+watch(
+  () => props.plan.id,
+  () => {
+    revealedPlan.value = null;
+  },
+);
+
+const displayPlan = computed(() => revealedPlan.value ?? props.plan);
+
+const summaryLabels: Array<{ key: keyof Plan["summary"]; label: string }> = [
+  { key: "create", label: "create" },
+  { key: "update", label: "update" },
+  { key: "replace", label: "replace" },
+  { key: "delete", label: "delete" },
+  { key: "no-op", label: "no-op" },
+];
+
+const summaryChips = computed(() =>
+  summaryLabels
+    .map(({ key, label }) => ({ key, label, count: displayPlan.value.summary[key] }))
+    .filter((chip) => chip.count > 0),
+);
+
+const isDestructive = computed(
+  () => displayPlan.value.summary.delete > 0 || displayPlan.value.action === "deployment.delete",
+);
+
+const formatExpiry = (date: string) => new Date(date).toLocaleString();
+
+const revealSensitive = async () => {
+  try {
+    const response = await plansApi.get(props.plan.id, true);
+    revealedPlan.value = response.data.plan;
+  } catch (err: any) {
+    const msg = err.response?.data?.error || err.message;
+    notifications.error("Reveal Failed", msg);
+  }
+};
+</script>
+
+<style scoped>
+.summary-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+  margin-bottom: var(--space-4);
+}
+
+.summary-chip {
+  padding: var(--space-1) var(--space-3);
+  border-radius: var(--radius-full);
+  font-size: var(--text-xs);
+  font-weight: var(--font-semibold);
+}
+
+.chip-create {
+  background: var(--color-success-100);
+  color: var(--color-success-700);
+}
+
+.chip-update {
+  background: var(--color-info-100);
+  color: var(--color-info-700);
+}
+
+.chip-replace {
+  background: var(--color-warning-100);
+  color: var(--color-warning-700);
+}
+
+.chip-delete {
+  background: var(--color-danger-100);
+  color: var(--color-danger-700);
+}
+
+.chip-no-op {
+  background: var(--color-gray-100);
+  color: var(--color-gray-600);
+}
+
+.changes-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+
+.expiry-note {
+  margin: var(--space-4) 0 0;
+  font-size: var(--text-xs);
+  color: var(--color-gray-500);
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+.preview-warning {
+  margin: var(--space-2) 0 0;
+  padding: var(--space-2) var(--space-3);
+  background: var(--color-warning-50);
+  color: var(--color-warning-700);
+  border-radius: var(--radius-sm);
+  font-size: var(--text-xs);
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-2) var(--space-4);
+  border-radius: var(--radius-sm);
+  font-weight: var(--font-medium);
+  font-size: var(--text-md);
+  cursor: pointer;
+  transition: all var(--transition-base);
+  border: none;
+}
+
+.btn-secondary {
+  background: var(--color-gray-100);
+  color: var(--color-gray-700);
+}
+
+.btn-secondary:hover:not(:disabled) {
+  background: var(--color-gray-200);
+}
+
+.btn-primary {
+  background: var(--color-primary-500);
+  color: white;
+}
+
+.btn-primary:hover:not(:disabled) {
+  background: var(--color-primary-600);
+}
+
+.btn-danger {
+  background: var(--color-danger-500);
+  color: white;
+}
+
+.btn-danger:hover:not(:disabled) {
+  background: var(--color-danger-600);
+}
+
+.btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+</style>
diff --git a/src/composables/usePlanFlow.test.ts b/src/composables/usePlanFlow.test.ts
new file mode 100644
index 0000000..eb3ec35
--- /dev/null
+++ b/src/composables/usePlanFlow.test.ts
@@ -0,0 +1,206 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { createPinia, setActivePinia } from "pinia";
+import type { AxiosResponse } from "axios";
+import { usePlanFlow } from "./usePlanFlow";
+import { usePlanFlowStore } from "@/stores/planFlow";
+import { useNotificationsStore } from "@/stores/notifications";
+import type { Plan } from "@/types";
+
+vi.mock("@/services/api", () => ({
+  plansApi: {
+    apply: vi.fn(),
+    discard: vi.fn().mockResolvedValue({ data: { message: "discarded", id: "plan-1" } }),
+  },
+}));
+
+const makePlan = (): Plan => ({
+  format_version: 1,
+  id: "plan-1",
+  action: "deployment.update_env",
+  status: "available",
+  resource: { type: "deployment", id: "my-app" },
+  created_at: "2026-01-01T00:00:00Z",
+  expires_at: "2026-01-01T01:00:00Z",
+  created_by: { id: "1", name: "admin", type: "user" },
+  request: { method: "PUT", path: "/deployments/my-app/env" },
+  snapshot: { files: {} },
+  changes: [],
+  summary: { create: 0, update: 1, replace: 0, delete: 0, "no-op": 0 },
+});
+
+const planResponse = () => ({ status: 201, data: { plan: makePlan() } }) as unknown as AxiosResponse;
+
+describe("usePlanFlow", () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+    vi.clearAllMocks();
+  });
+
+  it("opens the review modal state and resolves with the apply response", async () => {
+    const { plansApi } = await import("@/services/api");
+    const applyResponse = { status: 200, data: { message: "updated", plan: makePlan() } };
+    vi.mocked(plansApi.apply).mockResolvedValueOnce(applyResponse as any);
+
+    const { runPlanned } = usePlanFlow();
+    const store = usePlanFlowStore();
+
+    const pending = runPlanned(() => Promise.resolve(planResponse()));
+    await vi.waitFor(() => expect(store.plan?.id).toBe("plan-1"));
+
+    await store.apply();
+    const result = await pending;
+
+    expect(plansApi.apply).toHaveBeenCalledWith("plan-1");
+    expect(result).toBe(applyResponse);
+    expect(store.plan).toBeNull();
+  });
+
+  it("resolves false and discards the plan server side on discard", async () => {
+    const { plansApi } = await import("@/services/api");
+    const { runPlanned } = usePlanFlow();
+    const store = usePlanFlowStore();
+
+    const pending = runPlanned(() => Promise.resolve(planResponse()));
+    await vi.waitFor(() => expect(store.plan?.id).toBe("plan-1"));
+
+    await store.discard();
+    const result = await pending;
+
+    expect(result).toBe(false);
+    expect(plansApi.discard).toHaveBeenCalledWith("plan-1");
+    expect(store.plan).toBeNull();
+  });
+
+  it("warns and resolves false when the plan went stale", async () => {
+    const { plansApi } = await import("@/services/api");
+    vi.mocked(plansApi.apply).mockRejectedValueOnce({
+      response: { status: 409, data: { error: "plan is stale", drifted: ["docker-compose.yml"], plan: makePlan() } },
+    });
+
+    const { runPlanned } = usePlanFlow();
+    const store = usePlanFlowStore();
+    const notifications = useNotificationsStore();
+
+    const pending = runPlanned(() => Promise.resolve(planResponse()));
+    await vi.waitFor(() => expect(store.plan?.id).toBe("plan-1"));
+
+    await store.apply();
+    const result = await pending;
+
+    expect(result).toBe(false);
+    expect(store.plan).toBeNull();
+    expect(notifications.notifications.some((n) => n.type === "warning" && n.title === "Plan Stale")).toBe(true);
+  });
+
+  it("warns and resolves false when the plan expired", async () => {
+    const { plansApi } = await import("@/services/api");
+    vi.mocked(plansApi.apply).mockRejectedValueOnce({
+      response: { status: 410, data: { error: "plan expired", plan: makePlan() } },
+    });
+
+    const { runPlanned } = usePlanFlow();
+    const store = usePlanFlowStore();
+    const notifications = useNotificationsStore();
+
+    const pending = runPlanned(() => Promise.resolve(planResponse()));
+    await vi.waitFor(() => expect(store.plan?.id).toBe("plan-1"));
+
+    await store.apply();
+
+    expect(await pending).toBe(false);
+    expect(notifications.notifications.some((n) => n.type === "warning" && n.title === "Plan Expired")).toBe(true);
+  });
+
+  it("notifies an error and resolves false for other apply failures", async () => {
+    const { plansApi } = await import("@/services/api");
+    vi.mocked(plansApi.apply).mockRejectedValueOnce({
+      response: { status: 423, data: { error: "deployment is protected" } },
+    });
+
+    const { runPlanned } = usePlanFlow();
+    const store = usePlanFlowStore();
+    const notifications = useNotificationsStore();
+
+    const pending = runPlanned(() => Promise.resolve(planResponse()));
+    await vi.waitFor(() => expect(store.plan?.id).toBe("plan-1"));
+
+    await store.apply();
+
+    expect(await pending).toBe(false);
+    expect(notifications.notifications.some((n) => n.type === "error" && n.message === "deployment is protected")).toBe(
+      true,
+    );
+  });
+
+  it("returns false and notifies when the preview request fails", async () => {
+    const { runPlanned } = usePlanFlow();
+    const notifications = useNotificationsStore();
+
+    const result = await runPlanned(() =>
+      Promise.reject({ response: { status: 400, data: { error: "invalid compose" } } }),
+    );
+
+    expect(result).toBe(false);
+    expect(notifications.notifications.some((n) => n.type === "error" && n.message === "invalid compose")).toBe(true);
+  });
+
+  it("passes through responses that did not create a plan", async () => {
+    const { runPlanned } = usePlanFlow();
+    const direct = { status: 200, data: { message: "updated" } } as unknown as AxiosResponse;
+
+    const result = await runPlanned(() => Promise.resolve(direct));
+
+    expect(result).toBe(direct);
+  });
+
+  describe("runGuarded", () => {
+    it("executes directly when the deployment does not require plans", async () => {
+      const { runGuarded } = usePlanFlow();
+      const direct = { status: 200, data: { message: "updated" } } as unknown as AxiosResponse;
+      const planFn = vi.fn();
+
+      const result = await runGuarded(() => Promise.resolve(direct), planFn);
+
+      expect(result).toBe(direct);
+      expect(planFn).not.toHaveBeenCalled();
+    });
+
+    it("falls back to the plan flow on a plan_required response", async () => {
+      const { plansApi } = await import("@/services/api");
+      const applyResponse = { status: 200, data: { message: "updated" } };
+      vi.mocked(plansApi.apply).mockResolvedValueOnce(applyResponse as any);
+
+      const { runGuarded } = usePlanFlow();
+      const store = usePlanFlowStore();
+
+      const pending = runGuarded(
+        () => Promise.reject({ response: { status: 428, data: { code: "plan_required", error: "plan required" } } }),
+        () => Promise.resolve(planResponse()),
+      );
+      await vi.waitFor(() => expect(store.plan?.id).toBe("plan-1"));
+
+      await store.apply();
+      const result = await pending;
+
+      expect(result).toBe(applyResponse);
+    });
+
+    it("notifies and resolves false on other direct-call errors without planning", async () => {
+      const { runGuarded } = usePlanFlow();
+      const notifications = useNotificationsStore();
+      const planFn = vi.fn();
+
+      const result = await runGuarded(
+        () => Promise.reject({ response: { status: 423, data: { error: "deployment is protected" } } }),
+        planFn,
+        "Save Failed",
+      );
+
+      expect(result).toBe(false);
+      expect(planFn).not.toHaveBeenCalled();
+      expect(
+        notifications.notifications.some((n) => n.title === "Save Failed" && n.message === "deployment is protected"),
+      ).toBe(true);
+    });
+  });
+});
diff --git a/src/composables/usePlanFlow.ts b/src/composables/usePlanFlow.ts
new file mode 100644
index 0000000..c90ccea
--- /dev/null
+++ b/src/composables/usePlanFlow.ts
@@ -0,0 +1,16 @@
+import type { AxiosResponse } from "axios";
+import { usePlanFlowStore, type PlanFlowResult } from "@/stores/planFlow";
+
+export function usePlanFlow() {
+  const store = usePlanFlowStore();
+
+  const runPlanned = (planFn: () => Promise<AxiosResponse>): Promise<PlanFlowResult> => store.runPlanned(planFn);
+
+  const runGuarded = (
+    directFn: () => Promise<AxiosResponse>,
+    planFn: () => Promise<AxiosResponse>,
+    errorTitle?: string,
+  ): Promise<PlanFlowResult> => store.runGuarded(directFn, planFn, errorTitle);
+
+  return { runPlanned, runGuarded };
+}
diff --git a/src/layouts/DashboardLayout.vue b/src/layouts/DashboardLayout.vue
index 9380646..501efb2 100644
--- a/src/layouts/DashboardLayout.vue
+++ b/src/layouts/DashboardLayout.vue
@@ -419,6 +419,10 @@
             {{ currentPageTitle }}
           </h1>
         </div>
+        <button v-if="aiStore.status?.enabled" class="ai-ask-launcher" @click="openGlobalAssist">
+          <Sparkles :size="17" />
+          <span>Run your instance with the assistant</span>
+        </button>
         <div class="header-right">
           <div class="quick-stats">
             <div class="stat-item running">
@@ -455,8 +459,11 @@
 <script setup lang="ts">
 import { ref, reactive, computed, onMounted } from "vue";
 import { useRoute, useRouter } from "vue-router";
+import { Sparkles } from "lucide-vue-next";
 import { useStatsStore } from "@/stores/stats";
 import { useAuthStore } from "@/stores/auth";
+import { useAIStore } from "@/stores/ai";
+import { useAssistStore } from "@/stores/assist";
 import { clusterApi, type ClusterPeer } from "@/services/api";
 import Logo from "@/components/base/Logo.vue";
 
@@ -464,6 +471,12 @@ const route = useRoute();
 const router = useRouter();
 const statsStore = useStatsStore();
 const authStore = useAuthStore();
+const aiStore = useAIStore();
+const assistStore = useAssistStore();
+
+const openGlobalAssist = () => {
+  assistStore.open({ scope: "system", subject: "this instance" });
+};
 const uiVersion = __APP_VERSION__;
 const sidebarCollapsed = ref(false);
 const isRefreshing = ref(false);
@@ -632,6 +645,7 @@ onMounted(() => {
   statsStore.fetchAll();
   authStore.fetchCurrentUser();
   fetchClusterInfo();
+  aiStore.fetchStatus();
   setInterval(() => statsStore.fetchAll(), 15000);
 });
 </script>
@@ -1053,6 +1067,41 @@ onMounted(() => {
   z-index: 50;
 }
 
+.ai-ask-launcher {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.55rem;
+  min-width: 280px;
+  padding: 0.65rem 1.5rem;
+  border: 1px solid #dbeafe;
+  border-radius: 999px;
+  background: linear-gradient(180deg, #eff6ff, #f5f9ff);
+  color: #2563eb;
+  font-size: 0.9rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition:
+    box-shadow 0.15s ease,
+    border-color 0.15s ease,
+    transform 0.15s ease;
+}
+
+.ai-ask-launcher:hover {
+  border-color: #bfdbfe;
+  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.18);
+  transform: translateX(-50%) translateY(-1px);
+}
+
+@media (max-width: 900px) {
+  .ai-ask-launcher span {
+    display: none;
+  }
+}
+
 .breadcrumb {
   font-size: 0.75rem;
   color: #64748b;
diff --git a/src/services/api.ts b/src/services/api.ts
index 2a54b43..3b5eeaf 100755
--- a/src/services/api.ts
+++ b/src/services/api.ts
@@ -18,6 +18,8 @@ import type {
   DeploymentSecurityConfig,
   DomainConfig,
   ProtectedModeConfig,
+  Plan,
+  PlanStatus,
 } from "@/types";
 
 export const apiClient = axios.create({
@@ -71,6 +73,7 @@ export interface ServiceMetadata {
     interval: string;
   };
   protected_mode?: ProtectedModeConfig;
+  require_plan?: boolean;
   credential_id?: string;
   service_credentials?: Record<string, string>;
 }
@@ -80,11 +83,21 @@ export interface EnvVar {
   value: string;
 }
 
+export interface PlanOpts {
+  plan?: boolean;
+}
+
+const withPlanQuery = (url: string, opts?: PlanOpts) => {
+  if (!opts?.plan) return url;
+  return url + (url.includes("?") ? "&" : "?") + "plan=true";
+};
+
 export const deploymentsApi = {
   list: () => apiClient.get<{ deployments: Deployment[] }>("/deployments"),
   get: (name: string) => apiClient.get<Deployment>(`/deployments/${name}`),
   create: (data: any) => apiClient.post("/deployments", data),
-  update: (name: string, data: any) => apiClient.put(`/deployments/${name}`, data),
+  update: (name: string, data: any, opts?: PlanOpts) =>
+    apiClient.put(withPlanQuery(`/deployments/${name}`, opts), data),
   updateMetadata: (name: string, metadata: Partial<ServiceMetadata>) =>
     apiClient.put(`/deployments/${name}/metadata`, metadata),
   updateProtectedMode: (name: string, protectedMode: ProtectedModeConfig) =>
@@ -92,15 +105,28 @@ export const deploymentsApi = {
       `/deployments/${name}/protected-mode`,
       protectedMode,
     ),
-  delete: (name: string, options?: { deleteSSL?: boolean; deleteDatabase?: boolean; deleteVhost?: boolean }) => {
+  delete: (
+    name: string,
+    options?: { deleteSSL?: boolean; deleteDatabase?: boolean; deleteVhost?: boolean },
+    opts?: PlanOpts,
+  ) => {
     const params = new URLSearchParams();
     if (options?.deleteSSL !== undefined) params.set("delete_ssl", String(options.deleteSSL));
     if (options?.deleteDatabase !== undefined) params.set("delete_database", String(options.deleteDatabase));
     if (options?.deleteVhost !== undefined) params.set("delete_vhost", String(options.deleteVhost));
     const queryString = params.toString();
-    return apiClient.delete(`/deployments/${name}${queryString ? `?${queryString}` : ""}`);
+    return apiClient.delete(withPlanQuery(`/deployments/${name}${queryString ? `?${queryString}` : ""}`, opts));
   },
   getServices: (name: string) => apiClient.get<{ services: Service[] }>(`/deployments/${name}/services`),
+  serviceAction: (
+    name: string,
+    service: string,
+    action: "start" | "stop" | "restart" | "rebuild" | "pull",
+    opts?: PlanOpts,
+  ) =>
+    apiClient.post<{ message: string; name: string; service: string; output: string }>(
+      withPlanQuery(`/deployments/${name}/services/${service}/${action}`, opts),
+    ),
   start: (name: string) => apiClient.post(`/deployments/${name}/start`),
   stop: (name: string) => apiClient.post(`/deployments/${name}/stop`),
   restart: (name: string) => apiClient.post(`/deployments/${name}/restart`),
@@ -163,15 +189,33 @@ export const deploymentsApi = {
       };
     }>(`/deployments/${name}/stats`),
   getEnvVars: (name: string) => apiClient.get<{ env_vars: EnvVar[] }>(`/deployments/${name}/env`),
-  updateEnvVars: (name: string, envVars: EnvVar[]) => apiClient.put(`/deployments/${name}/env`, { env_vars: envVars }),
+  updateEnvVars: (name: string, envVars: EnvVar[], opts?: PlanOpts) =>
+    apiClient.put(withPlanQuery(`/deployments/${name}/env`, opts), { env_vars: envVars }),
   disableSSL: (name: string) => apiClient.post<{ message: string; name: string }>(`/deployments/${name}/ssl/disable`),
   listDomains: (name: string) => apiClient.get<{ domains: DomainConfig[] }>(`/deployments/${name}/domains`),
-  addDomain: (name: string, domain: Omit<DomainConfig, "id">) =>
-    apiClient.post<{ message: string; domain: DomainConfig }>(`/deployments/${name}/domains`, domain),
-  updateDomain: (name: string, domainId: string, domain: Partial<DomainConfig>) =>
-    apiClient.put<{ message: string; domain: DomainConfig }>(`/deployments/${name}/domains/${domainId}`, domain),
-  deleteDomain: (name: string, domainId: string) =>
-    apiClient.delete<{ message: string }>(`/deployments/${name}/domains/${domainId}`),
+  addDomain: (name: string, domain: Omit<DomainConfig, "id">, opts?: PlanOpts) =>
+    apiClient.post<{ message: string; domain: DomainConfig }>(
+      withPlanQuery(`/deployments/${name}/domains`, opts),
+      domain,
+    ),
+  updateDomain: (name: string, domainId: string, domain: Partial<DomainConfig>, opts?: PlanOpts) =>
+    apiClient.put<{ message: string; domain: DomainConfig }>(
+      withPlanQuery(`/deployments/${name}/domains/${domainId}`, opts),
+      domain,
+    ),
+  deleteDomain: (name: string, domainId: string, opts?: PlanOpts) =>
+    apiClient.delete<{ message: string }>(withPlanQuery(`/deployments/${name}/domains/${domainId}`, opts)),
+};
+
+export const plansApi = {
+  list: (params?: { deployment?: string; status?: PlanStatus; resource_type?: string }) =>
+    apiClient.get<{ plans: Plan[] }>("/plans", { params }),
+  get: (id: string, includeSensitive?: boolean) =>
+    apiClient.get<{ plan: Plan }>(`/plans/${id}`, {
+      params: includeSensitive ? { include_sensitive: true } : undefined,
+    }),
+  apply: (id: string) => apiClient.post<{ plan: Plan } & Record<string, unknown>>(`/plans/${id}/apply`),
+  discard: (id: string) => apiClient.delete<{ message: string; id: string }>(`/plans/${id}`),
 };
 
 export const networksApi = {
@@ -214,7 +258,8 @@ export const certificatesApi = {
 
 export const proxyApi = {
   getStatus: (name: string) => apiClient.get<{ status: ProxyStatus }>(`/proxy/status/${name}`),
-  setup: (name: string) => apiClient.post<{ message: string; result: ProxySetupResult }>(`/proxy/setup/${name}`),
+  setup: (name: string, opts?: PlanOpts) =>
+    apiClient.post<{ message: string; result: ProxySetupResult }>(withPlanQuery(`/proxy/setup/${name}`, opts)),
   teardown: (name: string) => apiClient.delete(`/proxy/${name}`),
   listVirtualHosts: () => apiClient.get<{ virtual_hosts: VirtualHost[] }>("/proxy/vhosts"),
 };
@@ -243,8 +288,94 @@ export const settingsApi = {
 export const configApi = {
   list: () => apiClient.get<{ config: ConfigEntry[]; runtime: Record<string, boolean> }>("/config"),
   get: (key: string) => apiClient.get<{ entry: ConfigEntry; runtime: boolean }>(`/config/${key}`),
-  set: (key: string, value: unknown) =>
-    apiClient.put<{ entry: ConfigEntry; applied: boolean }>(`/config/${key}`, { value }),
+  set: (key: string, value: unknown, opts?: PlanOpts) =>
+    apiClient.put<{ entry: ConfigEntry; applied: boolean }>(withPlanQuery(`/config/${key}`, opts), { value }),
+};
+
+export interface AIStatus {
+  enabled: boolean;
+  model?: string;
+  base_url_host?: string;
+  intents?: string[];
+}
+
+export type AssistIntent = "diagnose" | "improve" | "secure" | "explain";
+
+export interface AssistSource {
+  type: "logs" | "compose" | "provided";
+  label?: string;
+  content?: string;
+  tail?: number;
+}
+
+export interface AssistRequestBody {
+  intent: AssistIntent;
+  sources?: AssistSource[];
+  question?: string;
+}
+
+export interface AISuggestedAction {
+  kind: "exec" | "service_action";
+  service?: string;
+  action?: "start" | "stop" | "restart" | "rebuild" | "pull";
+  command?: string;
+  title: string;
+  reason?: string;
+}
+
+export interface AIAnalysis {
+  analysis: string;
+  suggested_actions: AISuggestedAction[];
+  intent: string;
+  model: string;
+  redactions: number;
+}
+
+export interface AIToolCall {
+  id: string;
+  name: string;
+  arguments: string;
+}
+
+export interface AIToolStep {
+  name: string;
+  arguments: string;
+  result?: string;
+}
+
+export interface AITurn {
+  role: "user" | "assistant";
+  content?: string;
+  tool_steps?: AIToolStep[];
+}
+
+export interface AISession {
+  id: string;
+  scope: "system" | "deployment";
+  deployment?: string;
+  auto_run: boolean;
+  status: "ready" | "awaiting_approval";
+  model?: string;
+  messages: AITurn[];
+  pending: AIToolCall[];
+  suggested_actions: AISuggestedAction[];
+}
+
+export const aiApi = {
+  status: () => apiClient.get<AIStatus>("/ai/status"),
+  createSession: (body: {
+    scope: "system" | "deployment";
+    deployment?: string;
+    auto_run: boolean;
+    message: string;
+    context?: string;
+  }) => apiClient.post<AISession>("/ai/sessions", body),
+  sessionMessage: (id: string, message: string, context?: string) =>
+    apiClient.post<AISession>(`/ai/sessions/${id}/messages`, { message, context }),
+  approveSession: (id: string, approved: Record<string, boolean>) =>
+    apiClient.post<AISession>(`/ai/sessions/${id}/approve`, { approved }),
+  getSession: (id: string) => apiClient.get<AISession>(`/ai/sessions/${id}`),
+  deleteSession: (id: string) => apiClient.delete<{ message: string; id: string }>(`/ai/sessions/${id}`),
 };
 
 export const pluginsApi = {
@@ -354,6 +485,8 @@ export const containersApi = {
   restart: (id: string) => apiClient.post(`/containers/${id}/restart`),
   remove: (id: string) => apiClient.delete(`/containers/${id}`),
   logs: (id: string) => apiClient.get(`/containers/${id}/logs`),
+  exec: (id: string, command: string, args: string[] = []) =>
+    apiClient.post<{ output: string }>(`/containers/${id}/exec`, { command, args }),
   getAllStats: () =>
     apiClient.get<{
       stats: Array<{
diff --git a/src/stores/ai.test.ts b/src/stores/ai.test.ts
new file mode 100644
index 0000000..280ec12
--- /dev/null
+++ b/src/stores/ai.test.ts
@@ -0,0 +1,50 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { createPinia, setActivePinia } from "pinia";
+import { useAIStore } from "./ai";
+
+vi.mock("@/services/api", () => ({
+  aiApi: {
+    status: vi.fn(),
+  },
+}));
+
+describe("ai store", () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+    vi.clearAllMocks();
+  });
+
+  it("caches the status after the first fetch", async () => {
+    const { aiApi } = await import("@/services/api");
+    vi.mocked(aiApi.status).mockResolvedValue({ data: { enabled: true, model: "llama3" } } as any);
+
+    const store = useAIStore();
+    await store.fetchStatus();
+    await store.fetchStatus();
+
+    expect(aiApi.status).toHaveBeenCalledTimes(1);
+    expect(store.status?.enabled).toBe(true);
+    expect(store.status?.model).toBe("llama3");
+  });
+
+  it("treats a failed status fetch as disabled", async () => {
+    const { aiApi } = await import("@/services/api");
+    vi.mocked(aiApi.status).mockRejectedValue(new Error("network"));
+
+    const store = useAIStore();
+    await store.fetchStatus();
+
+    expect(store.status?.enabled).toBe(false);
+  });
+
+  it("refetches when forced", async () => {
+    const { aiApi } = await import("@/services/api");
+    vi.mocked(aiApi.status).mockResolvedValue({ data: { enabled: false } } as any);
+
+    const store = useAIStore();
+    await store.fetchStatus();
+    await store.fetchStatus(true);
+
+    expect(aiApi.status).toHaveBeenCalledTimes(2);
+  });
+});
diff --git a/src/stores/ai.ts b/src/stores/ai.ts
new file mode 100644
index 0000000..11ea8fc
--- /dev/null
+++ b/src/stores/ai.ts
@@ -0,0 +1,22 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+import { aiApi, type AIStatus } from "@/services/api";
+
+export const useAIStore = defineStore("ai", () => {
+  const status = ref<AIStatus | null>(null);
+  const loaded = ref(false);
+
+  async function fetchStatus(force = false) {
+    if (loaded.value && !force) return;
+    try {
+      const response = await aiApi.status();
+      status.value = response.data;
+    } catch {
+      status.value = { enabled: false };
+    } finally {
+      loaded.value = true;
+    }
+  }
+
+  return { status, loaded, fetchStatus };
+});
diff --git a/src/stores/assist.test.ts b/src/stores/assist.test.ts
new file mode 100644
index 0000000..030c742
--- /dev/null
+++ b/src/stores/assist.test.ts
@@ -0,0 +1,145 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { createPinia, setActivePinia } from "pinia";
+import { useAssistStore, AI_DISABLED_MESSAGE } from "./assist";
+import { useAIStore } from "./ai";
+import type { AISession } from "@/services/api";
+
+vi.mock("@/services/api", () => ({
+  aiApi: {
+    status: vi.fn(),
+    createSession: vi.fn(),
+    sessionMessage: vi.fn(),
+    approveSession: vi.fn(),
+  },
+  containersApi: { exec: vi.fn() },
+  deploymentsApi: { serviceAction: vi.fn(), getServices: vi.fn() },
+}));
+
+const session = (over: Partial<AISession> = {}): AISession => ({
+  id: "ais_1",
+  scope: "system",
+  auto_run: true,
+  status: "ready",
+  messages: [
+    { role: "user", content: "what deployments do I have?" },
+    {
+      role: "assistant",
+      content: "You have one: myapp.",
+      tool_steps: [{ name: "list_deployments", arguments: "{}", result: "- myapp" }],
+    },
+  ],
+  pending: [],
+  suggested_actions: [],
+  ...over,
+});
+
+describe("assist store", () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+    vi.clearAllMocks();
+  });
+
+  async function enable() {
+    const { aiApi } = await import("@/services/api");
+    vi.mocked(aiApi.status).mockResolvedValue({ data: { enabled: true } } as any);
+  }
+
+  it("shows the disabled hint when AI is off", async () => {
+    const { aiApi } = await import("@/services/api");
+    vi.mocked(aiApi.status).mockResolvedValue({ data: { enabled: false } } as any);
+
+    const store = useAssistStore();
+    await store.open({ scope: "system", subject: "this instance" });
+
+    expect(store.error).toBe(AI_DISABLED_MESSAGE);
+    expect(store.session).toBeNull();
+  });
+
+  it("creates a session from a seed message", async () => {
+    await enable();
+    const { aiApi } = await import("@/services/api");
+    vi.mocked(aiApi.createSession).mockResolvedValue({ data: session() } as any);
+
+    const store = useAssistStore();
+    await store.open({ scope: "deployment", deployment: "myapp", subject: "myapp", seedMessage: "diagnose" });
+
+    expect(aiApi.createSession).toHaveBeenCalledWith({
+      scope: "deployment",
+      deployment: "myapp",
+      auto_run: true,
+      message: "diagnose",
+      context: undefined,
+    });
+    expect(store.session?.id).toBe("ais_1");
+  });
+
+  it("sends follow-up messages on the existing session", async () => {
+    await enable();
+    const { aiApi } = await import("@/services/api");
+    vi.mocked(aiApi.createSession).mockResolvedValue({ data: session() } as any);
+    vi.mocked(aiApi.sessionMessage).mockResolvedValue({ data: session({ id: "ais_1" }) } as any);
+
+    const store = useAssistStore();
+    await store.open({ scope: "system", subject: "x", seedMessage: "first" });
+    await store.send("second");
+
+    expect(aiApi.sessionMessage).toHaveBeenCalledWith("ais_1", "second", undefined);
+  });
+
+  it("approves all pending tools", async () => {
+    await enable();
+    const { aiApi } = await import("@/services/api");
+    const pending = session({
+      status: "awaiting_approval",
+      pending: [
+        { id: "c1", name: "list_networks", arguments: "{}" },
+        { id: "c2", name: "read_deployment_file", arguments: '{"path":"x"}' },
+      ],
+    });
+    vi.mocked(aiApi.createSession).mockResolvedValue({ data: pending } as any);
+    vi.mocked(aiApi.approveSession).mockResolvedValue({ data: session() } as any);
+
+    const store = useAssistStore();
+    await store.open({ scope: "system", subject: "x", seedMessage: "check", autoRun: false });
+    store.approveAll();
+    await Promise.resolve();
+
+    expect(aiApi.approveSession).toHaveBeenCalledWith("ais_1", { c1: true, c2: true });
+  });
+
+  it("declines all pending tools", async () => {
+    await enable();
+    const { aiApi } = await import("@/services/api");
+    const pending = session({
+      status: "awaiting_approval",
+      pending: [{ id: "c1", name: "list_networks", arguments: "{}" }],
+    });
+    vi.mocked(aiApi.createSession).mockResolvedValue({ data: pending } as any);
+    vi.mocked(aiApi.approveSession).mockResolvedValue({ data: session() } as any);
+
+    const store = useAssistStore();
+    await store.open({ scope: "system", subject: "x", seedMessage: "check", autoRun: false });
+    store.declineAll();
+    await Promise.resolve();
+
+    expect(aiApi.approveSession).toHaveBeenCalledWith("ais_1", { c1: false });
+  });
+
+  it("refreshes a stale disabled status before giving up", async () => {
+    const { aiApi } = await import("@/services/api");
+    vi.mocked(aiApi.status)
+      .mockResolvedValueOnce({ data: { enabled: false } } as any)
+      .mockResolvedValueOnce({ data: { enabled: true } } as any);
+    vi.mocked(aiApi.createSession).mockResolvedValue({ data: session() } as any);
+
+    // Prime the ai store cache as disabled.
+    const aiStore = useAIStore();
+    await aiStore.fetchStatus();
+
+    const store = useAssistStore();
+    await store.open({ scope: "system", subject: "x", seedMessage: "hi" });
+
+    expect(store.error).toBe("");
+    expect(store.session?.id).toBe("ais_1");
+  });
+});
diff --git a/src/stores/assist.ts b/src/stores/assist.ts
new file mode 100644
index 0000000..dbd0dd1
--- /dev/null
+++ b/src/stores/assist.ts
@@ -0,0 +1,197 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+import { aiApi, containersApi, deploymentsApi, type AISession, type AISuggestedAction } from "@/services/api";
+import { useAIStore } from "@/stores/ai";
+import { usePlanFlowStore } from "@/stores/planFlow";
+
+export const AI_DISABLED_MESSAGE =
+  "The AI assistant is not configured. An admin can connect any OpenAI-compatible provider under Settings, AI Assistant.";
+
+// AssistContext opens the assistant against something. scope "system"
+// asks about the whole instance; "deployment" binds tools to one
+// deployment and unlocks one-click suggested actions. seedMessage, when
+// given, is sent as the first turn (used by log/operation entry points
+// that already hold the content the user is looking at).
+export interface AssistContext {
+  scope: "system" | "deployment";
+  deployment?: string;
+  subject: string;
+  // seedMessage is the short prompt shown in the transcript; seedContext
+  // is bulky material (logs, output) sent to the model but not shown.
+  seedMessage?: string;
+  seedContext?: string;
+  autoRun?: boolean;
+}
+
+export const useAssistStore = defineStore("assist", () => {
+  const visible = ref(false);
+  const subject = ref("");
+  const scope = ref<"system" | "deployment">("system");
+  const deployment = ref<string | undefined>(undefined);
+  const autoRun = ref(true);
+  const session = ref<AISession | null>(null);
+  const loading = ref(false);
+  const error = ref("");
+  const runningIndex = ref<number | null>(null);
+  const suggestionOutputs = ref<Record<number, string>>({});
+  // Per-call decisions while an approval batch is open; once every
+  // pending call is decided the batch is submitted.
+  const decisions = ref<Record<string, boolean>>({});
+
+  function reset() {
+    session.value = null;
+    loading.value = false;
+    error.value = "";
+    runningIndex.value = null;
+    suggestionOutputs.value = {};
+    decisions.value = {};
+  }
+
+  async function ensureEnabled(): Promise<boolean> {
+    const aiStore = useAIStore();
+    await aiStore.fetchStatus();
+    if (!aiStore.status?.enabled) await aiStore.fetchStatus(true);
+    if (aiStore.status?.enabled) return true;
+    error.value = AI_DISABLED_MESSAGE;
+    return false;
+  }
+
+  async function open(ctx: AssistContext) {
+    reset();
+    visible.value = true;
+    subject.value = ctx.subject;
+    scope.value = ctx.scope;
+    deployment.value = ctx.deployment;
+    autoRun.value = ctx.autoRun ?? true;
+    if (!(await ensureEnabled())) return;
+    if (ctx.seedMessage) {
+      await send(ctx.seedMessage, ctx.seedContext);
+    }
+  }
+
+  async function send(message: string, context?: string) {
+    if (loading.value) return;
+    error.value = "";
+    suggestionOutputs.value = {};
+    loading.value = true;
+    try {
+      const response = session.value
+        ? await aiApi.sessionMessage(session.value.id, message, context)
+        : await aiApi.createSession({
+            scope: scope.value,
+            deployment: deployment.value,
+            auto_run: autoRun.value,
+            message,
+            context,
+          });
+      session.value = response.data;
+    } catch (err: any) {
+      error.value = err.response?.data?.error || err.message;
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  async function resolveApprovals(approved: Record<string, boolean>) {
+    if (!session.value || loading.value) return;
+    loading.value = true;
+    decisions.value = {};
+    try {
+      const response = await aiApi.approveSession(session.value.id, approved);
+      session.value = response.data;
+    } catch (err: any) {
+      error.value = err.response?.data?.error || err.message;
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  // decide records one call's allow/deny; when every pending call has a
+  // decision the whole batch is submitted, so a single pending call
+  // resolves on one click.
+  function decide(id: string, allow: boolean) {
+    if (!session.value) return;
+    decisions.value = { ...decisions.value, [id]: allow };
+    if (session.value.pending.every((p) => p.id in decisions.value)) {
+      resolveApprovals({ ...decisions.value });
+    }
+  }
+
+  function approveAll() {
+    if (!session.value) return;
+    const map: Record<string, boolean> = {};
+    session.value.pending.forEach((p) => (map[p.id] = true));
+    resolveApprovals(map);
+  }
+
+  function declineAll() {
+    if (!session.value) return;
+    const map: Record<string, boolean> = {};
+    session.value.pending.forEach((p) => (map[p.id] = false));
+    resolveApprovals(map);
+  }
+
+  async function runSuggestion(suggestion: AISuggestedAction, index: number) {
+    const name = deployment.value;
+    if (!name) return;
+    runningIndex.value = index;
+    try {
+      if (suggestion.kind === "service_action" && suggestion.service && suggestion.action) {
+        const planFlow = usePlanFlowStore();
+        const actionResult = await planFlow.runGuarded(
+          () => deploymentsApi.serviceAction(name, suggestion.service!, suggestion.action!),
+          () => deploymentsApi.serviceAction(name, suggestion.service!, suggestion.action!, { plan: true }),
+          "Action Failed",
+        );
+        if (actionResult === false) return;
+        suggestionOutputs.value = { ...suggestionOutputs.value, [index]: actionResult.data?.output || "Done" };
+      } else if (suggestion.kind === "exec" && suggestion.command) {
+        const services = await deploymentsApi.getServices(name);
+        const container = services.data.services?.find((svc) => svc.name === suggestion.service);
+        if (!container?.container_id) {
+          suggestionOutputs.value = {
+            ...suggestionOutputs.value,
+            [index]: `No running container found for service "${suggestion.service}"`,
+          };
+          return;
+        }
+        const response = await containersApi.exec(container.container_id, "sh", ["-c", suggestion.command]);
+        suggestionOutputs.value = { ...suggestionOutputs.value, [index]: response.data.output || "(no output)" };
+      }
+    } catch (err: any) {
+      suggestionOutputs.value = {
+        ...suggestionOutputs.value,
+        [index]: err.response?.data?.output || err.response?.data?.error || err.message,
+      };
+    } finally {
+      runningIndex.value = null;
+    }
+  }
+
+  function close() {
+    visible.value = false;
+    reset();
+  }
+
+  return {
+    visible,
+    subject,
+    scope,
+    deployment,
+    autoRun,
+    session,
+    loading,
+    error,
+    runningIndex,
+    suggestionOutputs,
+    decisions,
+    open,
+    send,
+    decide,
+    approveAll,
+    declineAll,
+    resolveApprovals,
+    runSuggestion,
+    close,
+  };
+});
diff --git a/src/stores/planFlow.ts b/src/stores/planFlow.ts
new file mode 100644
index 0000000..b7877cf
--- /dev/null
+++ b/src/stores/planFlow.ts
@@ -0,0 +1,98 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+import type { AxiosResponse } from "axios";
+import type { Plan } from "@/types";
+import { plansApi } from "@/services/api";
+import { useNotificationsStore } from "@/stores/notifications";
+
+export type PlanFlowResult = AxiosResponse | false;
+
+export const usePlanFlowStore = defineStore("planFlow", () => {
+  const plan = ref<Plan | null>(null);
+  const applying = ref(false);
+
+  let resolver: ((result: PlanFlowResult) => void) | null = null;
+
+  function settle(result: PlanFlowResult) {
+    const resolve = resolver;
+    resolver = null;
+    plan.value = null;
+    applying.value = false;
+    resolve?.(result);
+  }
+
+  async function runGuarded(
+    directFn: () => Promise<AxiosResponse>,
+    planFn: () => Promise<AxiosResponse>,
+    errorTitle = "Action Failed",
+  ): Promise<PlanFlowResult> {
+    const notifications = useNotificationsStore();
+    try {
+      return await directFn();
+    } catch (err: any) {
+      if (err.response?.status === 428 && err.response?.data?.code === "plan_required") {
+        return runPlanned(planFn);
+      }
+      notifications.error(errorTitle, err.response?.data?.error || err.message);
+      return false;
+    }
+  }
+
+  async function runPlanned(planFn: () => Promise<AxiosResponse>): Promise<PlanFlowResult> {
+    const notifications = useNotificationsStore();
+    let response: AxiosResponse;
+    try {
+      response = await planFn();
+    } catch (err: any) {
+      const msg = err.response?.data?.error || err.message;
+      notifications.error("Preview Failed", msg);
+      return false;
+    }
+
+    const created: Plan | undefined = response.data?.plan;
+    if (!created) {
+      return response;
+    }
+
+    plan.value = created;
+    return new Promise<PlanFlowResult>((resolve) => {
+      resolver = resolve;
+    });
+  }
+
+  async function apply() {
+    if (!plan.value || applying.value) return;
+    const notifications = useNotificationsStore();
+    applying.value = true;
+    try {
+      const response = await plansApi.apply(plan.value.id);
+      settle(response);
+    } catch (err: any) {
+      const status = err.response?.status;
+      const data = err.response?.data;
+      if (status === 409 && data?.drifted) {
+        notifications.warning("Plan Stale", "State changed since preview; please retry");
+      } else if (status === 410) {
+        notifications.warning("Plan Expired", "The preview expired before it was applied; please retry");
+      } else {
+        notifications.error("Apply Failed", data?.error || err.message);
+      }
+      settle(false);
+    }
+  }
+
+  async function discard() {
+    if (applying.value) return;
+    const current = plan.value;
+    settle(false);
+    if (current) {
+      try {
+        await plansApi.discard(current.id);
+      } catch {
+        // The plan expires on its own; a failed discard is not actionable.
+      }
+    }
+  }
+
+  return { plan, applying, runGuarded, runPlanned, apply, discard };
+});
diff --git a/src/types/index.ts b/src/types/index.ts
index 195d6d4..e4c27a6 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -28,6 +28,7 @@ export interface ServiceMetadata {
   quick_actions?: QuickAction[];
   security?: DeploymentSecurityConfig;
   protected_mode?: ProtectedModeConfig;
+  require_plan?: boolean;
   credential_id?: string;
   service_credentials?: Record<string, string>;
   domains?: DomainConfig[];
@@ -277,6 +278,56 @@ export interface DeploymentRateLimit {
   enabled: boolean;
 }
 
+export type PlanStatus = "available" | "applying" | "applied" | "failed" | "obsolete" | "expired";
+
+export interface PlanChange {
+  type: "file" | "container" | "certificate" | "database" | "config";
+  id: string;
+  actions: string[];
+  reason: string;
+  before: string | null;
+  after: string | null;
+  sensitive: boolean;
+}
+
+export interface PlanSummary {
+  create: number;
+  update: number;
+  replace: number;
+  delete: number;
+  "no-op": number;
+}
+
+export interface PlanActor {
+  id: string;
+  name: string;
+  type: string;
+}
+
+export interface Plan {
+  format_version: number;
+  id: string;
+  action: string;
+  status: PlanStatus;
+  resource: { type: string; id: string };
+  created_at: string;
+  expires_at: string;
+  created_by: PlanActor;
+  applied_at?: string;
+  applied_by?: PlanActor;
+  apply_error?: string;
+  request: {
+    method: string;
+    path: string;
+    params?: Record<string, string>;
+    query?: Record<string, string>;
+    body?: unknown;
+  };
+  snapshot: { files: Record<string, string> };
+  changes: PlanChange[];
+  summary: PlanSummary;
+}
+
 export type UserRole = "admin" | "operator" | "viewer";
 
 export interface User {
diff --git a/src/views/DeploymentDetailView.test.ts b/src/views/DeploymentDetailView.test.ts
index 78f4c26..5ab4634 100644
--- a/src/views/DeploymentDetailView.test.ts
+++ b/src/views/DeploymentDetailView.test.ts
@@ -159,11 +159,11 @@ describe("DeploymentDetailView", () => {
   });
 
   describe("Tab navigation", () => {
-    it("displays all ten tabs", async () => {
+    it("displays all nine tabs", async () => {
       const wrapper = mountView();
       await flushPromises();
       const tabs = wrapper.findAll(".tab-btn");
-      expect(tabs.length).toBe(10);
+      expect(tabs.length).toBe(9);
     });
 
     it("has Overview tab", async () => {
@@ -214,11 +214,11 @@ describe("DeploymentDetailView", () => {
       expect(wrapper.text()).toContain("Security");
     });
 
-    it("has Settings tab", async () => {
+    it("has no top-level Settings tab; settings live under Configuration", async () => {
       const wrapper = mountView();
       await flushPromises();
       const tabs = wrapper.findAll(".tab-btn");
-      expect(tabs.some((t) => t.text().trim() === "Settings")).toBe(true);
+      expect(tabs.some((t) => t.text().trim() === "Settings")).toBe(false);
     });
 
     it("has Configuration tab", async () => {
@@ -258,7 +258,6 @@ describe("DeploymentDetailView", () => {
         { id: "actions", label: "Quick Actions", icon: "pi pi-bolt" },
         { id: "backups", label: "Backups", icon: "pi pi-history" },
         { id: "security", label: "Security", icon: "pi pi-shield" },
-        { id: "settings", label: "Settings", icon: "pi pi-sliders-h" },
         { id: "config", label: "Configuration", icon: "pi pi-cog" },
       ]);
     });
diff --git a/src/views/DeploymentDetailView.vue b/src/views/DeploymentDetailView.vue
index d9291ad..703ec2b 100755
--- a/src/views/DeploymentDetailView.vue
+++ b/src/views/DeploymentDetailView.vue
@@ -14,42 +14,51 @@
         </div>
       </div>
       <div class="header-actions">
-        <button
+        <SplitActionButton
           v-if="canWrite"
-          class="btn btn-success"
+          label="Start"
+          icon="pi pi-play"
+          btn-class="btn-success"
           :disabled="loading || deployment?.status === 'running'"
-          @click="handleOperation('start')"
-        >
-          <i class="pi pi-play" /> Start
-        </button>
-        <button
+          :services="serviceNames"
+          @action="(scope) => handleScopedAction('start', scope)"
+        />
+        <SplitActionButton
           v-if="canWrite"
-          class="btn btn-warning"
+          label="Stop"
+          icon="pi pi-stop"
+          btn-class="btn-warning"
           :disabled="loading || deployment?.status === 'stopped'"
-          @click="handleOperation('stop')"
-        >
-          <i class="pi pi-stop" /> Stop
-        </button>
-        <button
+          :services="serviceNames"
+          @action="(scope) => handleScopedAction('stop', scope)"
+        />
+        <SplitActionButton
           v-if="canWrite"
-          class="btn btn-info"
+          label="Restart"
+          icon="pi pi-refresh"
+          btn-class="btn-info"
           :disabled="loading || deployment?.status === 'stopped'"
-          @click="handleOperation('restart')"
-        >
-          <i class="pi pi-refresh" /> Restart
-        </button>
-        <button
+          :services="serviceNames"
+          @action="(scope) => handleScopedAction('restart', scope)"
+        />
+        <SplitActionButton
           v-if="canWrite"
-          class="btn btn-secondary"
+          label="Rebuild"
+          icon="pi pi-sync"
+          btn-class="btn-secondary"
           :disabled="loading"
-          @click="showRebuildModal = true"
-          title="Recreate containers with latest images"
-        >
-          <i class="pi pi-sync" /> Rebuild
-        </button>
-        <button v-if="canWrite" class="btn btn-secondary" :disabled="loading" @click="openPullImageModal">
-          <i class="pi pi-download" /> Pull Image
-        </button>
+          :services="serviceNames"
+          @action="(scope) => handleScopedAction('rebuild', scope)"
+        />
+        <SplitActionButton
+          v-if="canWrite"
+          label="Pull Image"
+          icon="pi pi-download"
+          btn-class="btn-secondary"
+          :disabled="loading"
+          :services="serviceNames"
+          @action="(scope) => handleScopedAction('pull', scope)"
+        />
         <button v-if="canDelete" class="btn btn-danger" :disabled="loading" @click="confirmDelete">
           <i class="pi pi-trash" /> Delete
         </button>
@@ -338,8 +347,39 @@
                       <button class="action-btn" title="Logs" @click="viewServiceLogs(service)">
                         <i class="pi pi-file-edit" />
                       </button>
-                      <button class="action-btn" title="Restart" @click="restartService(service)">
-                        <i class="pi pi-refresh" />
+                      <button
+                        v-if="service.status !== 'running'"
+                        class="action-btn"
+                        title="Start"
+                        :disabled="serviceActionBusy === service.name"
+                        @click="runServiceAction(service, 'start')"
+                      >
+                        <i class="pi pi-play" />
+                      </button>
+                      <button
+                        v-else
+                        class="action-btn"
+                        title="Stop"
+                        :disabled="serviceActionBusy === service.name"
+                        @click="runServiceAction(service, 'stop')"
+                      >
+                        <i class="pi pi-stop" />
+                      </button>
+                      <button
+                        class="action-btn"
+                        title="Restart"
+                        :disabled="serviceActionBusy === service.name"
+                        @click="runServiceAction(service, 'restart')"
+                      >
+                        <i :class="serviceActionBusy === service.name ? 'pi pi-spin pi-spinner' : 'pi pi-refresh'" />
+                      </button>
+                      <button
+                        class="action-btn"
+                        title="Rebuild"
+                        :disabled="serviceActionBusy === service.name"
+                        @click="runServiceAction(service, 'rebuild')"
+                      >
+                        <i class="pi pi-sync" />
                       </button>
                     </div>
                   </div>
@@ -467,6 +507,7 @@
             :loading="logsLoading"
             :file-name="`${deployment?.name || 'deployment'}-logs.txt`"
             empty-message="No logs available"
+            :assist-context="logsAssistContext"
             @refresh="fetchLogs"
           >
             <template #filters>
@@ -866,228 +907,259 @@
           </div>
         </div>
 
-        <div v-if="activeTab === 'settings'" class="settings-tab">
-          <div class="security-section protected-mode-section">
-            <div class="section-header">
-              <div class="section-title">
-                <i class="pi pi-lock" />
-                <h3>Protected Mode</h3>
-              </div>
-              <label class="toggle-switch">
-                <input
-                  v-model="protectedMode.enabled"
-                  type="checkbox"
-                  :disabled="savingProtectedMode"
-                  @change="saveProtectedMode"
-                />
-                <span class="toggle-slider" />
-              </label>
-            </div>
-            <p class="section-description">
-              When enabled, the actions selected below are refused with a 423 Locked status. Use this on production
-              deployments to prevent accidental destructive operations.
-            </p>
-            <div class="section-body">
-              <div class="protected-mode-grid">
-                <label class="delete-option compact">
-                  <input
-                    v-model="protectedMode.disable_terminal"
-                    type="checkbox"
-                    :disabled="!protectedMode.enabled || savingProtectedMode"
-                    @change="saveProtectedMode"
-                  />
-                  <span class="option-content">
-                    <span class="option-label">Disable terminal</span>
-                    <span class="option-hint">Block interactive shell sessions</span>
-                  </span>
-                </label>
-                <div class="blocked-actions">
-                  <span class="field-label">Blocked actions</span>
-                  <span class="field-help"
-                    >Click an action to toggle whether it is refused while protected mode is on.</span
-                  >
-                  <div class="action-chips">
-                    <button
-                      v-for="action in protectedActionOptions"
-                      :key="action.value"
-                      class="preset-btn"
-                      :class="{ active: isProtectedActionBlocked(action.value) }"
-                      :disabled="!protectedMode.enabled || savingProtectedMode"
-                      :title="action.hint"
-                      @click="toggleProtectedAction(action.value)"
-                    >
-                      <i :class="isProtectedActionBlocked(action.value) ? 'pi pi-check' : 'pi pi-plus'" />
-                      {{ action.label }}
-                    </button>
+        <div v-if="activeTab === 'config'" class="config-tab">
+          <SubTabs v-model="activeConfigTab" :tabs="configSubTabs">
+            <div v-if="activeConfigTab === 'settings'" class="settings-tab">
+              <div class="settings-list">
+                <div class="settings-row">
+                  <div class="settings-row-header" @click="toggleSettingsSection('protected')">
+                    <div class="row-title">
+                      <i class="pi pi-lock" />
+                      <div class="row-text">
+                        <h4>Protected Mode</h4>
+                        <p>Refuse the selected destructive actions while enabled</p>
+                      </div>
+                    </div>
+                    <div class="row-controls" @click.stop>
+                      <label class="toggle-switch">
+                        <input
+                          v-model="protectedMode.enabled"
+                          type="checkbox"
+                          :disabled="savingProtectedMode"
+                          @change="saveProtectedMode"
+                        />
+                        <span class="toggle-slider" />
+                      </label>
+                      <button class="chevron-btn" @click="toggleSettingsSection('protected')">
+                        <i
+                          class="pi"
+                          :class="openSettingsSection === 'protected' ? 'pi-chevron-up' : 'pi-chevron-down'"
+                        />
+                      </button>
+                    </div>
                   </div>
-                </div>
-              </div>
+                  <div v-if="openSettingsSection === 'protected'" class="settings-row-body">
+                    <p class="row-description">
+                      When enabled, the actions selected below are refused with a 423 Locked status. Use this on
+                      production deployments to prevent accidental destructive operations.
+                    </p>
+                    <div class="protected-mode-grid">
+                      <label class="delete-option compact">
+                        <input
+                          v-model="protectedMode.disable_terminal"
+                          type="checkbox"
+                          :disabled="!protectedMode.enabled || savingProtectedMode"
+                          @change="saveProtectedMode"
+                        />
+                        <span class="option-content">
+                          <span class="option-label">Disable terminal</span>
+                          <span class="option-hint">Block interactive shell sessions</span>
+                        </span>
+                      </label>
+                      <div class="blocked-actions">
+                        <span class="field-label">Blocked actions</span>
+                        <span class="field-help"
+                          >Click an action to toggle whether it is refused while protected mode is on.</span
+                        >
+                        <div class="action-chips">
+                          <button
+                            v-for="action in protectedActionOptions"
+                            :key="action.value"
+                            class="preset-btn"
+                            :class="{ active: isProtectedActionBlocked(action.value) }"
+                            :disabled="!protectedMode.enabled || savingProtectedMode"
+                            :title="action.hint"
+                            @click="toggleProtectedAction(action.value)"
+                          >
+                            <i :class="isProtectedActionBlocked(action.value) ? 'pi pi-check' : 'pi pi-plus'" />
+                            {{ action.label }}
+                          </button>
+                        </div>
+                      </div>
+                    </div>
 
-              <div class="command-rules">
-                <div class="rules-header">
-                  <span class="field-label">Blocked commands</span>
-                  <span class="enable-bar-status" :class="{ active: protectedMode.enabled }">
-                    {{ protectedMode.blocked_command_rules?.length || 0 }}
-                  </span>
-                </div>
-                <p class="field-help">
-                  Each rule refuses terminal commands and quick actions whose command string matches the pattern. Rules
-                  apply only while protected mode is on.
-                </p>
-                <div v-if="!(protectedMode.blocked_command_rules || []).length" class="empty-state horizontal">
-                  <i class="pi pi-code" />
-                  <div class="empty-text">
-                    <p>No command rules yet</p>
-                    <span>Add a pattern below (e.g. contains "rm -rf") to start blocking commands.</span>
+                    <div class="command-rules">
+                      <div class="rules-header">
+                        <span class="field-label">Blocked commands</span>
+                        <span class="enable-bar-status" :class="{ active: protectedMode.enabled }">
+                          {{ protectedMode.blocked_command_rules?.length || 0 }}
+                        </span>
+                      </div>
+                      <p class="field-help">
+                        Each rule refuses terminal commands and quick actions whose command string matches the pattern.
+                        Rules apply only while protected mode is on.
+                      </p>
+                      <div v-if="!(protectedMode.blocked_command_rules || []).length" class="empty-state horizontal">
+                        <i class="pi pi-code" />
+                        <div class="empty-text">
+                          <p>No command rules yet</p>
+                          <span>Add a pattern below (e.g. contains "rm -rf") to start blocking commands.</span>
+                        </div>
+                      </div>
+                      <div v-else class="items-list">
+                        <div
+                          v-for="(rule, index) in protectedMode.blocked_command_rules"
+                          :key="rule.id || index"
+                          class="list-item command-rule-item"
+                        >
+                          <div class="rule-summary">
+                            <code class="rule-pattern">{{ rule.pattern }}</code>
+                            <div class="rule-meta">
+                              <span class="rule-badge">{{ rule.match }}</span>
+                              <span v-if="rule.case_sensitive" class="rule-badge subtle">case sensitive</span>
+                            </div>
+                            <p class="rule-explanation">{{ describeBlockedRule(rule) }}</p>
+                          </div>
+                          <div class="item-actions">
+                            <button
+                              class="btn btn-icon btn-sm btn-ghost"
+                              :disabled="savingProtectedMode"
+                              title="Remove"
+                              @click="removeProtectedCommandRule(index)"
+                            >
+                              <i class="pi pi-times" />
+                            </button>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="add-form command-rule-form">
+                        <div class="command-rule-form-row">
+                          <select v-model="newCommandRule.match" class="form-select" :disabled="!protectedMode.enabled">
+                            <option value="contains">Contains</option>
+                            <option value="equals">Equals</option>
+                            <option value="prefix">Prefix</option>
+                            <option value="suffix">Suffix</option>
+                            <option value="matches">Regex</option>
+                          </select>
+                          <input
+                            v-model="newCommandRule.pattern"
+                            type="text"
+                            class="form-input"
+                            placeholder="Command pattern (e.g. rm -rf)"
+                            :disabled="!protectedMode.enabled"
+                            @keyup.enter="addProtectedCommandRule"
+                          />
+                          <label class="case-toggle">
+                            <input
+                              v-model="newCommandRule.case_sensitive"
+                              type="checkbox"
+                              :disabled="!protectedMode.enabled"
+                            />
+                            <span>Case</span>
+                          </label>
+                          <button
+                            class="btn btn-sm btn-primary"
+                            :disabled="!protectedMode.enabled || !newCommandRule.pattern"
+                            @click="addProtectedCommandRule"
+                          >
+                            <i class="pi pi-plus" /> Add
+                          </button>
+                        </div>
+                        <p class="rule-preview">
+                          <i class="pi pi-info-circle" />
+                          {{ matchTypeHints[newCommandRule.match] }}.
+                          <span v-if="newCommandRule.pattern" class="rule-preview-sentence">
+                            Preview: {{ describeBlockedRule(newCommandRule) }}.
+                          </span>
+                        </p>
+                      </div>
+                    </div>
                   </div>
                 </div>
-                <div v-else class="items-list">
-                  <div
-                    v-for="(rule, index) in protectedMode.blocked_command_rules"
-                    :key="rule.id || index"
-                    class="list-item command-rule-item"
-                  >
-                    <div class="rule-summary">
-                      <code class="rule-pattern">{{ rule.pattern }}</code>
-                      <div class="rule-meta">
-                        <span class="rule-badge">{{ rule.match }}</span>
-                        <span v-if="rule.case_sensitive" class="rule-badge subtle">case sensitive</span>
+
+                <div class="settings-row">
+                  <div class="settings-row-header" @click="toggleSettingsSection('plans')">
+                    <div class="row-title">
+                      <i class="pi pi-eye" />
+                      <div class="row-text">
+                        <h4>Require Plan Review</h4>
+                        <p>Preview every change as a plan and apply it explicitly</p>
                       </div>
-                      <p class="rule-explanation">{{ describeBlockedRule(rule) }}</p>
                     </div>
-                    <div class="item-actions">
-                      <button
-                        class="btn btn-icon btn-sm btn-ghost"
-                        :disabled="savingProtectedMode"
-                        title="Remove"
-                        @click="removeProtectedCommandRule(index)"
-                      >
-                        <i class="pi pi-times" />
+                    <div class="row-controls" @click.stop>
+                      <label class="toggle-switch">
+                        <input
+                          v-model="requirePlan"
+                          type="checkbox"
+                          :disabled="savingRequirePlan"
+                          @change="saveRequirePlan"
+                        />
+                        <span class="toggle-slider" />
+                      </label>
+                      <button class="chevron-btn" @click="toggleSettingsSection('plans')">
+                        <i class="pi" :class="openSettingsSection === 'plans' ? 'pi-chevron-up' : 'pi-chevron-down'" />
                       </button>
                     </div>
                   </div>
-                </div>
-                <div class="add-form command-rule-form">
-                  <div class="command-rule-form-row">
-                    <select v-model="newCommandRule.match" class="form-select" :disabled="!protectedMode.enabled">
-                      <option value="contains">Contains</option>
-                      <option value="equals">Equals</option>
-                      <option value="prefix">Prefix</option>
-                      <option value="suffix">Suffix</option>
-                      <option value="matches">Regex</option>
-                    </select>
-                    <input
-                      v-model="newCommandRule.pattern"
-                      type="text"
-                      class="form-input"
-                      placeholder="Command pattern (e.g. rm -rf)"
-                      :disabled="!protectedMode.enabled"
-                      @keyup.enter="addProtectedCommandRule"
-                    />
-                    <label class="case-toggle">
-                      <input
-                        v-model="newCommandRule.case_sensitive"
-                        type="checkbox"
-                        :disabled="!protectedMode.enabled"
-                      />
-                      <span>Case</span>
-                    </label>
-                    <button
-                      class="btn btn-sm btn-primary"
-                      :disabled="!protectedMode.enabled || !newCommandRule.pattern"
-                      @click="addProtectedCommandRule"
-                    >
-                      <i class="pi pi-plus" /> Add
-                    </button>
+                  <div v-if="openSettingsSection === 'plans'" class="settings-row-body">
+                    <p class="row-description">
+                      When enabled, changes to this deployment (environment, compose, domains, deletion, service
+                      actions) are refused unless they go through a reviewed plan: you see a preview of every file diff
+                      and affected container before applying. API callers and AI agents are held to the same rule.
+                    </p>
                   </div>
-                  <p class="rule-preview">
-                    <i class="pi pi-info-circle" />
-                    {{ matchTypeHints[newCommandRule.match] }}.
-                    <span v-if="newCommandRule.pattern" class="rule-preview-sentence">
-                      Preview: {{ describeBlockedRule(newCommandRule) }}.
-                    </span>
-                  </p>
                 </div>
               </div>
             </div>
-          </div>
-        </div>
 
-        <div v-if="activeTab === 'config'" class="config-tab">
-          <div class="config-sub-tabs">
-            <button
-              class="config-sub-tab"
-              :class="{ active: activeConfigTab === 'compose' }"
-              @click="activeConfigTab = 'compose'"
-            >
-              <i class="pi pi-file" />
-              {{ composeFilename }}
-            </button>
-            <button
-              class="config-sub-tab"
-              :class="{ active: activeConfigTab === 'service' }"
-              @click="activeConfigTab = 'service'"
-            >
-              <i class="pi pi-cog" />
-              service.yml
-            </button>
-          </div>
-
-          <div v-if="activeConfigTab === 'compose'" class="config-section">
-            <div class="config-header">
-              <h3>Docker Compose Configuration</h3>
-              <div class="config-actions">
-                <button class="btn btn-sm btn-secondary" @click="copyConfig"><i class="pi pi-copy" /> Copy</button>
-                <button v-if="!isEditingConfig" class="btn btn-sm btn-primary" @click="startConfigEdit">
-                  <i class="pi pi-pencil" /> Edit
-                </button>
-                <template v-else>
-                  <button class="btn btn-sm btn-secondary" @click="cancelConfigEdit">Cancel</button>
-                  <button class="btn btn-sm btn-success" @click="saveConfig"><i class="pi pi-check" /> Save</button>
-                </template>
+            <div v-if="activeConfigTab !== 'settings'" class="config-sections">
+              <div v-if="activeConfigTab === 'compose'" class="config-section">
+                <div class="config-header">
+                  <h3>Docker Compose Configuration</h3>
+                  <div class="config-actions">
+                    <button class="btn btn-sm btn-secondary" @click="copyConfig"><i class="pi pi-copy" /> Copy</button>
+                    <button v-if="!isEditingConfig" class="btn btn-sm btn-primary" @click="startConfigEdit">
+                      <i class="pi pi-pencil" /> Edit
+                    </button>
+                    <template v-else>
+                      <button class="btn btn-sm btn-secondary" @click="cancelConfigEdit">Cancel</button>
+                      <button class="btn btn-sm btn-success" @click="saveConfig"><i class="pi pi-check" /> Save</button>
+                    </template>
+                  </div>
+                </div>
+                <div class="config-editor">
+                  <Codemirror
+                    v-model="composeConfig"
+                    :extensions="configExtensions"
+                    :disabled="!isEditingConfig"
+                    :style="{ height: '500px' }"
+                  />
+                </div>
               </div>
-            </div>
-            <div class="config-editor">
-              <Codemirror
-                v-model="composeConfig"
-                :extensions="configExtensions"
-                :disabled="!isEditingConfig"
-                :style="{ height: '500px' }"
-              />
-            </div>
-          </div>
 
-          <div v-if="activeConfigTab === 'service'" class="config-section">
-            <div class="config-header">
-              <h3>Service Configuration</h3>
-              <div class="config-actions">
-                <button class="btn btn-sm btn-secondary" @click="copyServiceConfig">
-                  <i class="pi pi-copy" /> Copy
-                </button>
-                <button
-                  v-if="!isEditingServiceConfig"
-                  class="btn btn-sm btn-primary"
-                  @click="isEditingServiceConfig = true"
-                >
-                  <i class="pi pi-pencil" /> Edit
-                </button>
-                <template v-else>
-                  <button class="btn btn-sm btn-secondary" @click="cancelServiceConfigEdit">Cancel</button>
-                  <button class="btn btn-sm btn-success" @click="saveServiceConfig">
-                    <i class="pi pi-check" /> Save
-                  </button>
-                </template>
+              <div v-if="activeConfigTab === 'service'" class="config-section">
+                <div class="config-header">
+                  <h3>Service Configuration</h3>
+                  <div class="config-actions">
+                    <button class="btn btn-sm btn-secondary" @click="copyServiceConfig">
+                      <i class="pi pi-copy" /> Copy
+                    </button>
+                    <button
+                      v-if="!isEditingServiceConfig"
+                      class="btn btn-sm btn-primary"
+                      @click="isEditingServiceConfig = true"
+                    >
+                      <i class="pi pi-pencil" /> Edit
+                    </button>
+                    <template v-else>
+                      <button class="btn btn-sm btn-secondary" @click="cancelServiceConfigEdit">Cancel</button>
+                      <button class="btn btn-sm btn-success" @click="saveServiceConfig">
+                        <i class="pi pi-check" /> Save
+                      </button>
+                    </template>
+                  </div>
+                </div>
+                <div class="config-editor">
+                  <Codemirror
+                    v-model="serviceConfig"
+                    :extensions="configExtensions"
+                    :disabled="!isEditingServiceConfig"
+                    :style="{ height: '500px' }"
+                  />
+                </div>
               </div>
             </div>
-            <div class="config-editor">
-              <Codemirror
-                v-model="serviceConfig"
-                :extensions="configExtensions"
-                :disabled="!isEditingServiceConfig"
-                :style="{ height: '500px' }"
-              />
-            </div>
-          </div>
+          </SubTabs>
         </div>
       </div>
     </template>
@@ -1124,6 +1196,7 @@
                 :loading="operationRunning"
                 :file-name="`${deployment?.name || 'operation'}-output.txt`"
                 empty-message="Waiting for output..."
+                :assist-context="operationAssistContext"
               />
             </div>
           </div>
@@ -1621,6 +1694,7 @@ import {
 } from "@/services/api";
 import { useNotificationsStore } from "@/stores/notifications";
 import { useAuthStore } from "@/stores/auth";
+import type { AssistContext } from "@/stores/assist";
 import type {
   ProxyStatus,
   QuickAction,
@@ -1640,11 +1714,15 @@ import DomainFormModal from "@/components/DomainFormModal.vue";
 import ContainerResourcesModal from "@/components/ContainerResourcesModal.vue";
 import { extractComposeMounts, extractComposeServiceNames } from "@/utils/compose";
 import { matchTypeHints, describeBlockedRule } from "@/utils/protectedMode";
+import { usePlanFlow } from "@/composables/usePlanFlow";
+import SplitActionButton from "@/components/base/SplitActionButton.vue";
+import SubTabs from "@/components/base/SubTabs.vue";
 
 const route = useRoute();
 const router = useRouter();
 const notifications = useNotificationsStore();
 const authStore = useAuthStore();
+const { runGuarded } = usePlanFlow();
 const canWrite = authStore.hasPermission("deployments:write");
 const canDelete = authStore.hasPermission("deployments:delete");
 
@@ -1724,7 +1802,6 @@ const tabs = [
   { id: "actions", label: "Quick Actions", icon: "pi pi-bolt" },
   { id: "backups", label: "Backups", icon: "pi pi-history" },
   { id: "security", label: "Security", icon: "pi pi-shield" },
-  { id: "settings", label: "Settings", icon: "pi pi-sliders-h" },
   { id: "config", label: "Configuration", icon: "pi pi-cog" },
 ];
 
@@ -1816,7 +1893,13 @@ const isEditingConfig = ref(false);
 const serviceConfig = ref("");
 const isEditingServiceConfig = ref(false);
 const configExtensions = [yaml(), oneDark];
-const activeConfigTab = ref<"compose" | "service">("compose");
+const activeConfigTab = ref<"compose" | "service" | "settings">("compose");
+
+const configSubTabs = computed(() => [
+  { id: "compose", label: composeFilename.value, icon: "pi pi-file" },
+  { id: "service", label: "service.yml", icon: "pi pi-cog" },
+  { id: "settings", label: "Settings", icon: "pi pi-sliders-h" },
+]);
 
 const showOperationModal = ref(false);
 const operationTitle = ref("");
@@ -1918,6 +2001,31 @@ const syncProtectedModeFromDeployment = () => {
     blocked_command_rules: [...(current?.blocked_command_rules || [])],
     disable_terminal: current?.disable_terminal || false,
   };
+  requirePlan.value = Boolean(deployment.value?.metadata?.require_plan);
+};
+
+const requirePlan = ref(false);
+const savingRequirePlan = ref(false);
+const openSettingsSection = ref<string | null>("protected");
+
+const toggleSettingsSection = (id: string) => {
+  openSettingsSection.value = openSettingsSection.value === id ? null : id;
+};
+
+const saveRequirePlan = async () => {
+  savingRequirePlan.value = true;
+  try {
+    await deploymentsApi.updateMetadata(route.params.name as string, { require_plan: requirePlan.value });
+    if (deployment.value?.metadata) {
+      deployment.value.metadata.require_plan = requirePlan.value;
+    }
+    notifications.success("Saved", requirePlan.value ? "Plan review is now required" : "Plan review is now optional");
+  } catch (e: any) {
+    notifications.error("Error", e.response?.data?.error || "Failed to save setting");
+    requirePlan.value = Boolean(deployment.value?.metadata?.require_plan);
+  } finally {
+    savingRequirePlan.value = false;
+  }
 };
 
 const saveProtectedMode = async () => {
@@ -2117,12 +2225,14 @@ const fetchDeployment = async () => {
 const handleSetupProxy = async () => {
   settingUpProxy.value = true;
   try {
-    await proxyApi.setup(route.params.name as string);
+    const result = await runGuarded(
+      () => proxyApi.setup(route.params.name as string),
+      () => proxyApi.setup(route.params.name as string, { plan: true }),
+      "Setup Failed",
+    );
+    if (result === false) return;
     notifications.success("Proxy Setup", "Virtual host has been configured");
     await fetchDeployment();
-  } catch (err: any) {
-    const msg = err.response?.data?.error || err.message;
-    notifications.error("Setup Failed", msg);
   } finally {
     settingUpProxy.value = false;
   }
@@ -2452,17 +2562,20 @@ const confirmDelete = () => {
 const deleteDeployment = async () => {
   deletingDeployment.value = true;
   try {
-    await deploymentsApi.delete(route.params.name as string, {
+    const options = {
       deleteSSL: deleteOptions.value.deleteSSL,
       deleteDatabase: deleteOptions.value.deleteDatabase,
       deleteVhost: deleteOptions.value.deleteVhost,
-    });
+    };
+    const result = await runGuarded(
+      () => deploymentsApi.delete(route.params.name as string, options),
+      () => deploymentsApi.delete(route.params.name as string, options, { plan: true }),
+      "Delete Failed",
+    );
+    if (result === false) return;
     showDeleteDeploymentModal.value = false;
     notifications.success("Deleted", `Deployment "${deployment.value?.name}" has been deleted`);
     router.push(backPath.value);
-  } catch (err: any) {
-    const msg = err.response?.data?.error || err.message;
-    notifications.error("Delete Failed", msg);
   } finally {
     deletingDeployment.value = false;
   }
@@ -2502,8 +2615,66 @@ const viewServiceLogs = (service: any) => {
   fetchLogs();
 };
 
-const restartService = async (service: any) => {
-  console.log("Restarting service:", service.name);
+const serviceNames = computed(() => services.value.map((s) => s.name));
+
+const handleScopedAction = (action: "start" | "stop" | "restart" | "rebuild" | "pull", scope: string) => {
+  if (scope === "deployment") {
+    if (action === "rebuild") {
+      showRebuildModal.value = true;
+    } else if (action === "pull") {
+      openPullImageModal();
+    } else {
+      handleOperation(action);
+    }
+    return;
+  }
+  runServiceAction({ name: scope }, action);
+};
+
+const logsAssistContext = computed<AssistContext>(() => ({
+  scope: "deployment",
+  deployment: route.params.name as string,
+  subject: route.params.name as string,
+}));
+
+const operationAssistContext = computed<AssistContext>(() => ({
+  scope: "deployment",
+  deployment: route.params.name as string,
+  subject: route.params.name as string,
+  seedMessage: `The "${operationTitle.value}" operation just ${
+    operationError.value ? "failed" : "finished"
+  }. Explain what happened${operationError.value ? " and how to fix it" : ""}.`,
+  seedContext: `\`\`\`\n${operationOutput.value || operationError.value || "(no output captured)"}\n\`\`\``,
+}));
+
+const serviceActionBusy = ref("");
+
+const serviceActionPastTense: Record<string, string> = {
+  start: "started",
+  stop: "stopped",
+  restart: "restarted",
+  rebuild: "rebuilt",
+  pull: "image pulled",
+};
+
+const runServiceAction = async (
+  service: { name: string },
+  action: "start" | "stop" | "restart" | "rebuild" | "pull",
+) => {
+  serviceActionBusy.value = service.name;
+  try {
+    const name = route.params.name as string;
+    const result = await runGuarded(
+      () => deploymentsApi.serviceAction(name, service.name, action),
+      () => deploymentsApi.serviceAction(name, service.name, action, { plan: true }),
+      "Service Action Failed",
+    );
+    if (result === false) return;
+    notifications.success("Service Updated", `${service.name} ${serviceActionPastTense[action]}`);
+    await fetchDeployment();
+  } finally {
+    serviceActionBusy.value = "";
+  }
 };
 
 const terminalRef = ref<InstanceType<typeof ContainerTerminal> | null>(null);
@@ -2540,12 +2711,12 @@ const saveEnvVarsToServer = async () => {
   savingEnvVars.value = true;
   try {
     const envData = envVars.value.map((e) => ({ key: e.key, value: e.value }));
-    await deploymentsApi.updateEnvVars(route.params.name as string, envData);
-    return true;
-  } catch (err: any) {
-    const msg = err.response?.data?.error || err.message;
-    notifications.error("Save Failed", msg);
-    return false;
+    const result = await runGuarded(
+      () => deploymentsApi.updateEnvVars(route.params.name as string, envData),
+      () => deploymentsApi.updateEnvVars(route.params.name as string, envData, { plan: true }),
+      "Save Failed",
+    );
+    return result !== false;
   } finally {
     savingEnvVars.value = false;
   }
@@ -2767,17 +2938,15 @@ const cancelServiceConfigEdit = () => {
 };
 
 const saveConfig = async () => {
-  try {
-    await deploymentsApi.update(route.params.name as string, {
-      compose_content: composeConfig.value,
-    });
-    originalConfig = composeConfig.value;
-    isEditingConfig.value = false;
-    notifications.success("Saved", "Configuration saved successfully");
-  } catch (err: any) {
-    const msg = err.response?.data?.error || err.message;
-    notifications.error("Save Failed", msg);
-  }
+  const result = await runGuarded(
+    () => deploymentsApi.update(route.params.name as string, { compose_content: composeConfig.value }),
+    () => deploymentsApi.update(route.params.name as string, { compose_content: composeConfig.value }, { plan: true }),
+    "Save Failed",
+  );
+  if (result === false) return;
+  originalConfig = composeConfig.value;
+  isEditingConfig.value = false;
+  notifications.success("Saved", "Configuration saved successfully");
 };
 
 const saveServiceConfig = async () => {
@@ -3642,43 +3811,6 @@ onUnmounted(() => {
   padding: var(--space-4);
 }
 
-.config-sub-tabs {
-  display: flex;
-  gap: var(--space-2);
-  margin-bottom: var(--space-4);
-  border-bottom: 1px solid var(--color-gray-200);
-  padding-bottom: var(--space-2);
-}
-
-.config-sub-tab {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-  padding: var(--space-2) var(--space-4);
-  border: none;
-  background: transparent;
-  border-radius: var(--radius-sm);
-  font-size: var(--text-sm);
-  font-weight: var(--font-medium);
-  color: var(--color-gray-500);
-  cursor: pointer;
-  transition: all var(--transition-base);
-}
-
-.config-sub-tab:hover {
-  color: var(--color-gray-700);
-  background: var(--color-gray-100);
-}
-
-.config-sub-tab.active {
-  color: var(--color-primary-600);
-  background: var(--color-primary-50);
-}
-
-.config-sub-tab i {
-  font-size: var(--text-sm);
-}
-
 .config-section {
   display: flex;
   flex-direction: column;
@@ -4614,6 +4746,81 @@ onUnmounted(() => {
   gap: 1.25rem;
 }
 
+.settings-list {
+  background: white;
+  border: 1px solid #e5e7eb;
+  border-radius: var(--radius-md);
+  overflow: hidden;
+  margin: 5px;
+}
+
+.settings-row + .settings-row {
+  border-top: 1px solid #f3f4f6;
+}
+
+.settings-row-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
+  padding: 1rem 1.25rem;
+  cursor: pointer;
+}
+
+.settings-row-header:hover {
+  background: #fafafa;
+}
+
+.row-title {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+}
+
+.row-title i {
+  color: #3b82f6;
+  font-size: 1rem;
+  margin-top: 0.15rem;
+}
+
+.row-text h4 {
+  margin: 0;
+  font-size: 0.9rem;
+  font-weight: 600;
+  color: var(--text-primary, #1e293b);
+}
+
+.row-text p {
+  margin: 0.15rem 0 0;
+  font-size: 0.8rem;
+  color: #6b7280;
+}
+
+.row-controls {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.chevron-btn {
+  border: none;
+  background: none;
+  color: #9ca3af;
+  cursor: pointer;
+  padding: 0.25rem;
+}
+
+.settings-row-body {
+  padding: 0 1.25rem 1.25rem;
+}
+
+.row-description {
+  margin: 0 0 0.75rem;
+  font-size: 0.8125rem;
+  color: #6b7280;
+  line-height: 1.5;
+}
+
 .security-section {
   background: white;
   border-radius: var(--radius-sm);
diff --git a/src/views/SettingsView.test.ts b/src/views/SettingsView.test.ts
index a250c9d..01db6d3 100644
--- a/src/views/SettingsView.test.ts
+++ b/src/views/SettingsView.test.ts
@@ -97,10 +97,10 @@ describe("SettingsView", () => {
   });
 
   describe("Tab navigation", () => {
-    it("displays all seven tabs", () => {
+    it("displays all eight tabs", () => {
       const wrapper = mountView();
       const tabs = wrapper.findAll(".tab");
-      expect(tabs.length).toBe(7);
+      expect(tabs.length).toBe(8);
     });
 
     it("has General tab", () => {
@@ -381,6 +381,7 @@ describe("SettingsView", () => {
         { id: "terminal", label: "Terminal", icon: "pi pi-desktop" },
         { id: "healthchecks", label: "Health Checks", icon: "pi pi-heart" },
         { id: "credentials", label: "Credentials", icon: "pi pi-key" },
+        { id: "ai", label: "AI Assistant", icon: "" },
       ]);
     });
   });
diff --git a/src/views/SettingsView.vue b/src/views/SettingsView.vue
index e661ed5..b7c12c2 100644
--- a/src/views/SettingsView.vue
+++ b/src/views/SettingsView.vue
@@ -9,7 +9,8 @@
           :class="{ active: activeTab === tab.id }"
           @click="activeTab = tab.id"
         >
-          <i :class="tab.icon" />
+          <component :is="tabLucideIcons[tab.id]" v-if="tabLucideIcons[tab.id]" :size="14" />
+          <i v-else :class="tab.icon" />
           <span>{{ tab.label }}</span>
         </button>
       </div>
@@ -906,17 +907,78 @@
           </div>
         </Teleport>
       </div>
+
+      <div v-show="activeTab === 'ai'" class="tab-content">
+        <div class="settings-card">
+          <div class="card-header">
+            <Sparkles :size="16" />
+            <h3>AI Assistant</h3>
+          </div>
+          <div class="card-body">
+            <p class="section-description">
+              Connect any OpenAI-compatible endpoint: OpenAI, Ollama, vLLM, LM Studio or a gateway. The assistant
+              diagnoses deployment logs and failed operations and proposes fixes you approve explicitly. Secret values
+              are redacted before anything leaves this server.
+            </p>
+            <div class="form-group">
+              <label class="form-label checkbox-label">
+                <input v-model="aiSettings.enabled" type="checkbox" :disabled="!canWriteSettings" />
+                Enable AI assistant
+              </label>
+            </div>
+            <div class="form-group">
+              <label class="form-label">Base URL</label>
+              <input
+                v-model="aiSettings.base_url"
+                type="text"
+                class="form-control"
+                placeholder="https://api.openai.com/v1"
+                :disabled="!canWriteSettings"
+              />
+              <small class="field-hint">Any server speaking the OpenAI chat completions format works.</small>
+            </div>
+            <div class="form-group">
+              <label class="form-label">Model</label>
+              <input
+                v-model="aiSettings.model"
+                type="text"
+                class="form-control"
+                placeholder="e.g. gpt-4.1-mini or llama3"
+                :disabled="!canWriteSettings"
+              />
+            </div>
+            <div class="form-group">
+              <label class="form-label">API Key</label>
+              <input
+                v-model="aiSettings.api_key"
+                type="password"
+                class="form-control"
+                placeholder="Unchanged unless filled; empty is fine for local servers"
+                autocomplete="new-password"
+                :disabled="!canWriteSettings"
+              />
+              <small class="field-hint">Stored on the server and never shown again.</small>
+            </div>
+            <button class="btn btn-primary" :disabled="savingAI || !canWriteSettings" @click="saveAISettings">
+              <i v-if="savingAI" class="pi pi-spin pi-spinner" />
+              Save AI Settings
+            </button>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, computed, onMounted } from "vue";
-import { settingsApi, healthApi, templatesApi, credentialsApi, registriesApi } from "@/services/api";
+import { ref, reactive, computed, onMounted, markRaw, type Component } from "vue";
+import { Sparkles } from "lucide-vue-next";
+import { settingsApi, healthApi, templatesApi, credentialsApi, registriesApi, configApi } from "@/services/api";
 import type { DomainSettings } from "@/services/api";
 import type { ProtectedCommandRule, ProtectedModeConfig, RegistryCredential, RegistryType } from "@/types";
 import { useNotificationsStore } from "@/stores/notifications";
 import { useAuthStore } from "@/stores/auth";
+import { useAIStore } from "@/stores/ai";
 import SecurityHealthCard from "@/components/SecurityHealthCard.vue";
 import { matchTypeHints, describeBlockedRule } from "@/utils/protectedMode";
 
@@ -943,8 +1005,13 @@ const tabs = [
   { id: "terminal", label: "Terminal", icon: "pi pi-desktop" },
   { id: "healthchecks", label: "Health Checks", icon: "pi pi-heart" },
   { id: "credentials", label: "Credentials", icon: "pi pi-key" },
+  { id: "ai", label: "AI Assistant", icon: "" },
 ];
 
+const tabLucideIcons: Record<string, Component> = {
+  ai: markRaw(Sparkles),
+};
+
 const settings = reactive({
   deployments_path: "",
   api_port: 0,
@@ -1475,11 +1542,49 @@ const fetchAgentVersion = async () => {
   }
 };
 
+const aiSettings = reactive({ enabled: false, base_url: "", model: "", api_key: "" });
+const savingAI = ref(false);
+
+const fetchAISettings = async () => {
+  try {
+    const [enabledRes, baseURLRes, modelRes] = await Promise.all([
+      configApi.get("ai.enabled"),
+      configApi.get("ai.base_url"),
+      configApi.get("ai.model"),
+    ]);
+    aiSettings.enabled = Boolean(enabledRes.data.entry.value);
+    aiSettings.base_url = String(baseURLRes.data.entry.value ?? "");
+    aiSettings.model = String(modelRes.data.entry.value ?? "");
+  } catch {
+    // Older agents without the config keys; the tab stays editable.
+  }
+};
+
+const saveAISettings = async () => {
+  savingAI.value = true;
+  try {
+    await configApi.set("ai.base_url", aiSettings.base_url);
+    await configApi.set("ai.model", aiSettings.model);
+    if (aiSettings.api_key) {
+      await configApi.set("ai.api_key", aiSettings.api_key);
+    }
+    const response = await configApi.set("ai.enabled", aiSettings.enabled);
+    aiSettings.api_key = "";
+    await useAIStore().fetchStatus(true);
+    notifications.success("Saved", response.data.applied ? "AI settings applied immediately" : "AI settings saved");
+  } catch (e: any) {
+    notifications.error("Error", e.response?.data?.error || "Failed to save AI settings");
+  } finally {
+    savingAI.value = false;
+  }
+};
+
 onMounted(() => {
   fetchSettings();
   fetchAgentVersion();
   fetchCredentials();
   fetchRegistryTypes();
+  fetchAISettings();
 });
 </script>
 
diff --git a/vitest.config.ts b/vitest.config.ts
index b7ed526..11ff67e 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -10,6 +10,7 @@ export default defineConfig({
   test: {
     environment: "happy-dom",
     globals: true,
+    setupFiles: ["./vitest.setup.ts"],
   },
   resolve: {
     alias: {
diff --git a/vitest.setup.ts b/vitest.setup.ts
new file mode 100644
index 0000000..1d2a1f8
--- /dev/null
+++ b/vitest.setup.ts
@@ -0,0 +1,34 @@
+// Node 22+ defines global web storage stubs that are non-functional without
+// --localstorage-file and shadow happy-dom's implementation, so tests get a
+// localStorage whose methods are undefined. Replace both globals with a
+// working in-memory implementation.
+const createMemoryStorage = (): Storage => {
+  let store = new Map<string, string>();
+  return {
+    get length() {
+      return store.size;
+    },
+    clear: () => {
+      store = new Map();
+    },
+    getItem: (key: string) => (store.has(key) ? store.get(key)! : null),
+    key: (index: number) => Array.from(store.keys())[index] ?? null,
+    removeItem: (key: string) => {
+      store.delete(key);
+    },
+    setItem: (key: string, value: string) => {
+      store.set(key, String(value));
+    },
+  };
+};
+
+for (const name of ["localStorage", "sessionStorage"] as const) {
+  const storage = createMemoryStorage();
+  for (const target of [globalThis, window]) {
+    Object.defineProperty(target, name, {
+      value: storage,
+      writable: true,
+      configurable: true,
+    });
+  }
+}