diff --git a/src/components/LogRulesPanel.test.ts b/src/components/LogRulesPanel.test.ts
new file mode 100644
index 0000000..b073b57
--- /dev/null
+++ b/src/components/LogRulesPanel.test.ts
@@ -0,0 +1,144 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { mount, flushPromises } from "@vue/test-utils";
+import { createTestingPinia } from "@pinia/testing";
+import LogRulesPanel from "./LogRulesPanel.vue";
+
+vi.mock("@/services/observability", () => ({
+  observabilityApi: {
+    logRules: vi.fn().mockResolvedValue({ data: [] }),
+    saveLogRules: vi.fn().mockImplementation((rules) => Promise.resolve({ data: rules })),
+  },
+}));
+
+vi.mock("@/services/api", () => ({
+  notificationsApi: {
+    getTargets: vi.fn().mockResolvedValue({ data: { targets: [{ id: "t1", name: "Ops chat" }] } }),
+  },
+}));
+
+describe("LogRulesPanel", () => {
+  beforeEach(() => vi.clearAllMocks());
+
+  const mountPanel = () =>
+    mount(LogRulesPanel, {
+      props: { deployments: ["shop", "blog"] },
+      global: {
+        plugins: [createTestingPinia({ createSpy: vi.fn })],
+        stubs: { BaseModal: { template: "<div><slot /><slot name='footer' /></div>", props: ["visible", "title"] } },
+      },
+    });
+
+  const openForm = async (wrapper: ReturnType<typeof mountPanel>) => {
+    await wrapper.find("button.btn-primary").trigger("click");
+    await flushPromises();
+  };
+
+  // The defaults are the whole cost argument, so a rule created without touching them must
+  // still carry them.
+  it("creates a rule with the conservative defaults", async () => {
+    const { observabilityApi } = await import("@/services/observability");
+    const wrapper = mountPanel();
+    await flushPromises();
+    await openForm(wrapper);
+
+    await wrapper
+      .findAll("input")
+      .find((i) => i.attributes("placeholder") === "Checkout errors")!
+      .setValue("Boom");
+    await wrapper.findAll("select")[0].setValue("shop");
+    await wrapper
+      .findAll("button")
+      .find((b) => b.text().includes("Save rule"))!
+      .trigger("click");
+    await flushPromises();
+
+    expect(observabilityApi.saveLogRules).toHaveBeenCalledWith([
+      expect.objectContaining({
+        name: "Boom",
+        deployment: "shop",
+        min_level: "error",
+        min_count: 3,
+        window_seconds: 300,
+        cooldown_seconds: 3600,
+        triage: false,
+        enabled: true,
+      }),
+    ]);
+  });
+
+  // Triage is the only setting that costs money, so it must be off until it is ticked.
+  it("only asks for triage when the box is ticked", async () => {
+    const { observabilityApi } = await import("@/services/observability");
+    const wrapper = mountPanel();
+    await flushPromises();
+    await openForm(wrapper);
+
+    await wrapper
+      .findAll("input")
+      .find((i) => i.attributes("placeholder") === "Checkout errors")!
+      .setValue("Boom");
+    await wrapper.findAll("select")[0].setValue("shop");
+    const triageBox = wrapper
+      .findAll("label")
+      .find((l) => l.text().includes("Ask the assistant"))!
+      .find("input");
+    await triageBox.setValue(true);
+    await wrapper
+      .findAll("button")
+      .find((b) => b.text().includes("Save rule"))!
+      .trigger("click");
+    await flushPromises();
+
+    expect(observabilityApi.saveLogRules).toHaveBeenCalledWith([expect.objectContaining({ triage: true })]);
+  });
+
+  it("shows what a saved rule watches", async () => {
+    const { observabilityApi } = await import("@/services/observability");
+    vi.mocked(observabilityApi.logRules).mockResolvedValueOnce({
+      data: [
+        {
+          id: "r1",
+          name: "OOM",
+          enabled: true,
+          deployment: "shop",
+          service: "worker",
+          min_level: "error",
+          pattern: "out of memory",
+          min_count: 3,
+          window_seconds: 300,
+          cooldown_seconds: 3600,
+          triage: true,
+        },
+      ],
+    } as any);
+
+    const wrapper = mountPanel();
+    await flushPromises();
+
+    expect(wrapper.text()).toContain("OOM");
+    expect(wrapper.text()).toContain("shop/worker");
+    expect(wrapper.text()).toContain("out of memory");
+    expect(wrapper.text()).toContain("triage");
+  });
+
+  it("deletes a rule by saving the set without it", async () => {
+    const { observabilityApi } = await import("@/services/observability");
+    vi.mocked(observabilityApi.logRules).mockResolvedValueOnce({
+      data: [
+        { id: "r1", name: "One", enabled: true, deployment: "shop" },
+        { id: "r2", name: "Two", enabled: true, deployment: "blog" },
+      ],
+    } as any);
+
+    const wrapper = mountPanel();
+    await flushPromises();
+
+    await wrapper
+      .findAll("button")
+      .find((b) => b.attributes("title") === "Delete rule")!
+      .trigger("click");
+    await flushPromises();
+
+    expect(observabilityApi.saveLogRules).toHaveBeenCalledWith([expect.objectContaining({ id: "r2" })]);
+  });
+});
diff --git a/src/components/LogRulesPanel.vue b/src/components/LogRulesPanel.vue
new file mode 100644
index 0000000..e42d710
--- /dev/null
+++ b/src/components/LogRulesPanel.vue
@@ -0,0 +1,375 @@
+<template>
+  <section class="lrp">
+    <header class="lrp-head">
+      <h3><Icon name="file-search" :size="16" /> Log rules</h3>
+      <button class="btn btn-sm btn-primary" @click="openNew">
+        <Icon name="plus" :size="14" />
+        New rule
+      </button>
+    </header>
+
+    <p v-if="!rules.length" class="lrp-empty">
+      Nothing is watched yet. A log rule turns what a deployment writes into an incident, once the same fault has
+      happened often enough to be worth your attention.
+    </p>
+
+    <ul v-else class="lrp-list">
+      <li v-for="rule in rules" :key="rule.id" class="lrp-rule" :class="{ 'lrp-rule--off': !rule.enabled }">
+        <div class="lrp-rule-main">
+          <p class="lrp-rule-name">
+            {{ rule.name }}
+            <span v-if="rule.triage" class="lrp-tag lrp-tag--triage">triage</span>
+          </p>
+          <p class="lrp-rule-cond">{{ describe(rule) }}</p>
+        </div>
+
+        <span v-if="!rule.enabled" class="lrp-off">Off</span>
+
+        <div class="lrp-rule-actions">
+          <button class="btn btn-sm btn-icon" title="Edit rule" @click="openEdit(rule)">
+            <Icon name="pencil" :size="14" />
+          </button>
+          <button class="btn btn-sm btn-icon" title="Delete rule" @click="remove(rule)">
+            <Icon name="trash-2" :size="14" />
+          </button>
+        </div>
+      </li>
+    </ul>
+
+    <BaseModal
+      :visible="editing !== null"
+      :title="draft.id ? 'Edit log rule' : 'New log rule'"
+      size="md"
+      @close="cancel"
+    >
+      <div class="lrp-form">
+        <BaseField label="Name" hint="What you will see in the notification.">
+          <BaseInput v-model="draft.name" placeholder="Checkout errors" />
+        </BaseField>
+
+        <div class="lrp-form-row">
+          <BaseField label="Deployment">
+            <BaseSelect v-model="draft.deployment">
+              <option value="" disabled>Pick a deployment</option>
+              <option v-for="d in deployments" :key="d" :value="d">{{ d }}</option>
+            </BaseSelect>
+          </BaseField>
+
+          <BaseField label="Service" hint="Empty watches every service.">
+            <BaseInput v-model="draft.service" placeholder="web" />
+          </BaseField>
+        </div>
+
+        <div class="lrp-form-row">
+          <BaseField label="From level" hint="Below error, a pattern is required.">
+            <BaseSelect v-model="draft.min_level">
+              <option value="error">error and worse</option>
+              <option value="fatal">fatal only</option>
+              <option value="warn">warn and worse</option>
+            </BaseSelect>
+          </BaseField>
+
+          <BaseField label="Matching" hint="Optional regular expression, matched on the message.">
+            <BaseInput v-model="draft.pattern" placeholder="(?i)out of memory" />
+          </BaseField>
+        </div>
+
+        <div class="lrp-form-row">
+          <BaseField label="At least" hint="Occurrences before it counts.">
+            <BaseInput v-model="draft.min_count" type="number" min="1" />
+          </BaseField>
+
+          <BaseField label="Within (seconds)">
+            <BaseInput v-model="draft.window_seconds" type="number" min="1" />
+          </BaseField>
+
+          <BaseField label="Then stay quiet (seconds)" hint="Repeats are counted, not repeated.">
+            <BaseInput v-model="draft.cooldown_seconds" type="number" min="1" />
+          </BaseField>
+        </div>
+
+        <BaseField label="Notify" hint="Which targets to alert. None selected sends to all.">
+          <div v-if="notifyTargets.length" class="lrp-targets">
+            <label v-for="t in notifyTargets" :key="t.id" class="lrp-target">
+              <input type="checkbox" :checked="draft.targets?.includes(t.id)" @change="toggleTarget(t.id)" />
+              {{ t.name }}
+            </label>
+          </div>
+          <p v-else class="lrp-muted">No notification targets yet. Add one in Settings to send anywhere.</p>
+        </BaseField>
+
+        <label class="lrp-check">
+          <input v-model="draft.triage" type="checkbox" />
+          Ask the assistant to explain it
+        </label>
+        <p class="lrp-hint">
+          One explanation per distinct fault, reused while the same fault keeps happening, and bounded by the agent's
+          daily cap. Needs the assistant configured and log triage enabled in the Observability settings.
+        </p>
+
+        <label class="lrp-check">
+          <input v-model="draft.enabled" type="checkbox" />
+          Enabled
+        </label>
+
+        <p v-if="formError" class="lrp-error">{{ formError }}</p>
+      </div>
+
+      <template #footer>
+        <button class="btn btn-secondary" @click="cancel">Cancel</button>
+        <button class="btn btn-primary" :disabled="saving" @click="save">
+          {{ saving ? "Saving..." : "Save rule" }}
+        </button>
+      </template>
+    </BaseModal>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { observabilityApi } from "@/services/observability";
+import type { LogRule } from "@/services/observability";
+import { notificationsApi, type NotificationTarget } from "@/services/api";
+import { useNotificationsStore } from "@/stores/notifications";
+import Icon from "@/components/base/Icon.vue";
+import BaseModal from "@/components/base/BaseModal.vue";
+import BaseField from "@/components/base/BaseField.vue";
+import BaseInput from "@/components/base/BaseInput.vue";
+import BaseSelect from "@/components/base/BaseSelect.vue";
+
+defineProps<{ deployments: string[] }>();
+const emit = defineEmits<{ changed: [] }>();
+
+const notifications = useNotificationsStore();
+
+const rules = ref<LogRule[]>([]);
+const notifyTargets = ref<NotificationTarget[]>([]);
+const editing = ref<LogRule | null>(null);
+const saving = ref(false);
+const formError = ref("");
+
+const blank = (): LogRule => ({
+  name: "",
+  enabled: true,
+  deployment: "",
+  service: "",
+  source: "stdout",
+  min_level: "error",
+  pattern: "",
+  min_count: 3,
+  window_seconds: 300,
+  cooldown_seconds: 3600,
+  triage: false,
+  targets: [],
+});
+
+const draft = ref<LogRule>(blank());
+
+const describe = (rule: LogRule) => {
+  const where = rule.service ? `${rule.deployment}/${rule.service}` : rule.deployment;
+  const what = rule.pattern ? `${rule.min_level} matching /${rule.pattern}/` : `${rule.min_level} and worse`;
+  return `${what} on ${where}, ${rule.min_count}+ in ${rule.window_seconds}s`;
+};
+
+const toggleTarget = (id: string) => {
+  const list = draft.value.targets ?? (draft.value.targets = []);
+  const i = list.indexOf(id);
+  if (i === -1) list.push(id);
+  else list.splice(i, 1);
+};
+
+const load = async () => {
+  const [rulesResult, targetsResult] = await Promise.allSettled([
+    observabilityApi.logRules(),
+    notificationsApi.getTargets(),
+  ]);
+  if (rulesResult.status === "fulfilled") rules.value = rulesResult.value.data || [];
+  if (targetsResult.status === "fulfilled") notifyTargets.value = targetsResult.value.data.targets || [];
+};
+
+const openNew = () => {
+  draft.value = blank();
+  formError.value = "";
+  editing.value = draft.value;
+};
+
+const openEdit = (rule: LogRule) => {
+  draft.value = { ...rule, targets: [...(rule.targets ?? [])] };
+  formError.value = "";
+  editing.value = draft.value;
+};
+
+const cancel = () => {
+  editing.value = null;
+};
+
+const persist = async (next: LogRule[]) => {
+  const response = await observabilityApi.saveLogRules(next);
+  rules.value = response.data || [];
+  emit("changed");
+};
+
+// The rules are saved as a set, so an edit is the list with this rule swapped in.
+const save = async () => {
+  saving.value = true;
+  formError.value = "";
+  try {
+    const rule: LogRule = {
+      ...draft.value,
+      min_count: Number(draft.value.min_count) || 0,
+      window_seconds: Number(draft.value.window_seconds) || 0,
+      cooldown_seconds: Number(draft.value.cooldown_seconds) || 0,
+    };
+    await persist(rule.id ? rules.value.map((r) => (r.id === rule.id ? rule : r)) : [...rules.value, rule]);
+    editing.value = null;
+  } catch (err: any) {
+    formError.value = err?.response?.data || err?.message || "The rule could not be saved.";
+  } finally {
+    saving.value = false;
+  }
+};
+
+const remove = async (rule: LogRule) => {
+  try {
+    await persist(rules.value.filter((r) => r.id !== rule.id));
+  } catch (err: any) {
+    notifications.error("Delete failed", err?.message || "The rule could not be deleted.");
+  }
+};
+
+onMounted(load);
+defineExpose({ load });
+</script>
+
+<style scoped>
+.lrp {
+  background: var(--surface-raised);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  padding: var(--space-4);
+}
+
+.lrp-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--space-3);
+}
+
+.lrp-head h3 {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  margin: 0;
+  font-size: var(--text-lg);
+}
+
+.lrp-empty,
+.lrp-muted,
+.lrp-hint {
+  color: var(--text-muted);
+  font-size: var(--text-sm);
+  margin: 0;
+}
+
+.lrp-hint {
+  margin-top: calc(var(--space-1) * -1);
+}
+
+.lrp-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+.lrp-rule {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  padding: var(--space-3);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  background: var(--surface);
+}
+
+.lrp-rule--off {
+  opacity: 0.6;
+}
+
+.lrp-rule-main {
+  flex: 1;
+  min-width: 0;
+}
+
+.lrp-rule-name {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  margin: 0;
+  font-weight: var(--font-medium);
+  color: var(--text);
+}
+
+.lrp-rule-cond {
+  margin: 0;
+  font-size: var(--text-sm);
+  color: var(--text-muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.lrp-tag {
+  font-size: var(--text-xs);
+  padding: 0.1rem 0.4rem;
+  border-radius: var(--radius-sm);
+  background: var(--accent-subtle);
+  color: var(--accent);
+}
+
+.lrp-off {
+  font-size: var(--text-xs);
+  color: var(--text-muted);
+}
+
+.lrp-rule-actions {
+  display: flex;
+  gap: var(--space-1);
+}
+
+.lrp-form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+
+.lrp-form-row {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  gap: var(--space-3);
+}
+
+.lrp-targets {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-3);
+}
+
+.lrp-target,
+.lrp-check {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  font-size: var(--text-sm);
+  color: var(--text);
+}
+
+.lrp-error {
+  color: var(--danger);
+  font-size: var(--text-sm);
+  margin: 0;
+}
+</style>
diff --git a/src/components/LogViewer.test.ts b/src/components/LogViewer.test.ts
new file mode 100644
index 0000000..3a31cc7
--- /dev/null
+++ b/src/components/LogViewer.test.ts
@@ -0,0 +1,91 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { mount, flushPromises } from "@vue/test-utils";
+import { createTestingPinia } from "@pinia/testing";
+import LogViewer from "./LogViewer.vue";
+import { useAssistStore } from "@/stores/assist";
+
+// xterm needs a real canvas; the raw view is not what these tests are about.
+vi.mock("@xterm/xterm", () => ({
+  Terminal: class {
+    open() {}
+    write() {}
+    clear() {}
+    dispose() {}
+    loadAddon() {}
+    scrollToBottom() {}
+    onResize() {}
+  },
+}));
+vi.mock("@xterm/addon-fit", () => ({
+  FitAddon: class {
+    fit() {}
+  },
+}));
+vi.mock("@xterm/addon-search", () => ({
+  SearchAddon: class {
+    findNext() {}
+    findPrevious() {}
+  },
+}));
+vi.mock("@xterm/addon-web-links", () => ({ WebLinksAddon: class {} }));
+
+const logs = ["web | ERROR first failure", "web | ERROR second failure"].join("\n");
+
+describe("LogViewer", () => {
+  beforeEach(() => vi.clearAllMocks());
+
+  const mountViewer = (props = {}) =>
+    mount(LogViewer, {
+      props: { logs, ...props },
+      global: { plugins: [createTestingPinia({ createSpy: vi.fn })] },
+      attachTo: document.body,
+    });
+
+  const clickTitle = async (wrapper: ReturnType<typeof mountViewer>, title: string) => {
+    await wrapper
+      .findAll("button")
+      .find((b) => b.attributes("title") === title)!
+      .trigger("click");
+    await flushPromises();
+  };
+
+  // Deleting empties the log on the server, so the button asks rather than acts.
+  it("asks the parent to delete rather than clearing the view itself", async () => {
+    const wrapper = mountViewer({ deletable: true });
+    await flushPromises();
+
+    await clickTitle(wrapper, "Delete these logs");
+
+    expect(wrapper.emitted("delete")).toBeTruthy();
+    // Nothing is hidden locally: what is on screen still reflects the server.
+    expect(wrapper.text()).toContain("first failure");
+  });
+
+  // A viewer whose source cannot be emptied should not offer the button at all.
+  it("hides the delete button unless deleting is possible", async () => {
+    const wrapper = mountViewer();
+    await flushPromises();
+
+    expect(wrapper.findAll("button").some((b) => b.attributes("title") === "Delete these logs")).toBe(false);
+  });
+
+  it("hands one entry to the assistant when asked to debug it", async () => {
+    const wrapper = mountViewer();
+    await flushPromises();
+    const store = useAssistStore();
+
+    await wrapper.find(".row-head").trigger("click");
+    await wrapper
+      .findAll("button")
+      .find((b) => b.text().includes("Debug with AI"))!
+      .trigger("click");
+    await flushPromises();
+
+    expect(store.open).toHaveBeenCalledWith(
+      expect.objectContaining({ seedContext: expect.stringContaining("first failure") }),
+    );
+    // The whole log would bury the line the reader pointed at.
+    const call = vi.mocked(store.open).mock.calls[0][0] as { seedContext: string };
+    expect(call.seedContext).not.toContain("second failure");
+  });
+});
diff --git a/src/components/LogViewer.vue b/src/components/LogViewer.vue
index 0fc4f79..5d032f1 100644
--- a/src/components/LogViewer.vue
+++ b/src/components/LogViewer.vue
@@ -45,6 +45,7 @@
             <i class="pi pi-align-left" />
           </button>
         </div>
+        <slot name="actions" />
         <label class="follow-toggle" :class="{ active: autoScroll }" title="Keep scrolling to the newest line">
           <input v-model="autoScroll" type="checkbox" />
           <i class="pi pi-arrow-down" />
@@ -61,13 +62,13 @@
         <button class="toolbar-btn" title="Search (Ctrl+F)" @click="toggleSearch">
           <i class="pi pi-search" />
         </button>
-        <button class="toolbar-btn" title="Clear" @click="clearLogs">
+        <button v-if="deletable" class="toolbar-btn" title="Delete these logs" @click="emit('delete')">
           <i class="pi pi-trash" />
         </button>
         <button class="toolbar-btn" title="Download" @click="downloadLogs">
           <i class="pi pi-download" />
         </button>
-        <button class="toolbar-btn" title="Refresh" :disabled="loading" @click="$emit('refresh')">
+        <button class="toolbar-btn" title="Refresh" :disabled="loading" @click="emit('refresh')">
           <i :class="loading ? 'pi pi-spin pi-spinner' : 'pi pi-refresh'" />
         </button>
         <button class="toolbar-btn" :title="isFullscreen ? 'Exit Fullscreen' : 'Fullscreen'" @click="toggleFullscreen">
@@ -82,6 +83,7 @@
       :auto-scroll="autoScroll"
       :search-query="searchQuery"
       :empty-message="emptyMessage"
+      @debug="debugEntry"
     />
     <div v-show="viewMode === 'raw'" ref="terminalContainer" class="terminal-container" />
     <div v-if="viewMode === 'raw' && !logs && !loading" class="empty-state">
@@ -101,7 +103,7 @@ import "@xterm/xterm/css/xterm.css";
 import { Sparkles } from "lucide-vue-next";
 import { useAssistStore, type AssistContext } from "@/stores/assist";
 import StructuredLogView from "@/components/StructuredLogView.vue";
-import { parseLogLine, type LogRecord } from "@/types/logs";
+import { parseLogLine, type LogRecord, type LogEntry } from "@/types/logs";
 
 const props = withDefaults(
   defineProps<{
@@ -114,6 +116,7 @@ const props = withDefaults(
     fontSize?: number;
     lineHeight?: number;
     assistContext?: AssistContext | null;
+    deletable?: boolean;
   }>(),
   {
     logs: "",
@@ -125,11 +128,13 @@ const props = withDefaults(
     fontSize: 13,
     lineHeight: 1.4,
     assistContext: null,
+    deletable: false,
   },
 );
 
-defineEmits<{
+const emit = defineEmits<{
   refresh: [];
+  delete: [];
 }>();
 
 // Every surface that renders logs gets the AI action for free. A
@@ -161,6 +166,18 @@ const openAssist = () => {
   }
 };
 
+// Debugging one entry hands over that entry alone. The toolbar's assistant reads everything on
+// screen, which buries the line the reader is actually pointing at.
+const debugEntry = (entry: LogEntry) => {
+  const store = useAssistStore();
+  const base = props.assistContext ?? { scope: "system" as const, subject: props.fileName.replace(/\.txt$/, "") };
+  store.open({
+    ...base,
+    seedMessage: `Debug this log entry from ${base.subject}: what caused it, how serious is it, and what should I do next?`,
+    seedContext: `\`\`\`\n${entry.lines.join("\n")}\n\`\`\``,
+  });
+};
+
 const terminalContainer = ref<HTMLElement | null>(null);
 const structuredView = ref<InstanceType<typeof StructuredLogView> | null>(null);
 const viewMode = ref<"structured" | "raw">("structured");
@@ -293,13 +310,6 @@ const writeLogs = (logs: string) => {
   }
 };
 
-const clearLogs = () => {
-  if (terminal) {
-    terminal.clear();
-    currentLogs = "";
-  }
-};
-
 const downloadLogs = () => {
   const blob = new Blob([currentLogs], { type: "text/plain" });
   const url = URL.createObjectURL(blob);
diff --git a/src/components/StructuredLogView.vue b/src/components/StructuredLogView.vue
index a6a6118..7868189 100644
--- a/src/components/StructuredLogView.vue
+++ b/src/components/StructuredLogView.vue
@@ -45,10 +45,16 @@
             </div>
           </div>
           <pre class="raw">{{ entry.lines.join("\n") }}</pre>
-          <button class="copy-btn" @click.stop="copyEntry(entry)">
-            <i :class="copiedKey === entry.key ? 'pi pi-check' : 'pi pi-copy'" />
-            {{ copiedKey === entry.key ? "Copied" : "Copy entry" }}
-          </button>
+          <div class="row-actions">
+            <button class="copy-btn" @click.stop="copyEntry(entry)">
+              <i :class="copiedKey === entry.key ? 'pi pi-check' : 'pi pi-copy'" />
+              {{ copiedKey === entry.key ? "Copied" : "Copy entry" }}
+            </button>
+            <button class="copy-btn" @click.stop="emit('debug', entry)">
+              <Sparkles :size="13" />
+              Debug with AI
+            </button>
+          </div>
         </div>
       </div>
 
@@ -62,8 +68,11 @@
 
 <script setup lang="ts">
 import { ref, computed, watch, nextTick } from "vue";
+import { Sparkles } from "lucide-vue-next";
 import { groupLogRecords, type LogRecord, type LogEntry } from "@/types/logs";
 
+const emit = defineEmits<{ debug: [entry: LogEntry] }>();
+
 const props = withDefaults(
   defineProps<{
     records: LogRecord[];
@@ -414,6 +423,11 @@ defineExpose({ scrollToBottom });
   font-size: 11.5px;
 }
 
+.row-actions {
+  display: flex;
+  gap: var(--space-2);
+}
+
 .copy-btn {
   display: inline-flex;
   align-items: center;
diff --git a/src/composables/useLogStream.ts b/src/composables/useLogStream.ts
index 26a2b16..21a53e5 100644
--- a/src/composables/useLogStream.ts
+++ b/src/composables/useLogStream.ts
@@ -8,7 +8,8 @@ import { toRecord, type LogRecord } from "@/types/logs";
 const maxBufferedLines = 5000;
 
 /**
- * Follows a deployment's logs over a websocket, handing back the text as it arrives.
+ * Follows logs over a websocket, handing back the text as it arrives: a deployment's own
+ * output through start(), or any other stream the agent exposes through startUrl().
  *
  * A tail only ever says what was true when it was asked, so watching a container start means
  * asking again and again. Following gives the line when the container writes it.
@@ -31,14 +32,14 @@ export function useLogStream() {
     }
   };
 
-  const start = (deployment: string, opts: { tail?: number; filter?: string; source?: string } = {}) => {
+  const startUrl = (url: string) => {
     stop();
     lines.value = [];
     records.value = [];
     seq = 0;
     error.value = "";
 
-    socket = new WebSocket(deploymentLogsWsUrl(deployment, opts));
+    socket = new WebSocket(url);
 
     socket.onopen = () => {
       following.value = true;
@@ -79,7 +80,12 @@ export function useLogStream() {
     };
   };
 
+  const start = (
+    deployment: string,
+    opts: { tail?: number; filter?: string; source?: string; service?: string } = {},
+  ) => startUrl(deploymentLogsWsUrl(deployment, opts));
+
   onUnmounted(stop);
 
-  return { lines, records, following, error, start, stop };
+  return { lines, records, following, error, start, startUrl, stop };
 }
diff --git a/src/layouts/DashboardLayout.vue b/src/layouts/DashboardLayout.vue
index e26dac2..cb5fe0e 100644
--- a/src/layouts/DashboardLayout.vue
+++ b/src/layouts/DashboardLayout.vue
@@ -204,7 +204,7 @@
           class="nav-group"
         >
           <div class="nav-group-header" @click="toggleGroup('security')">
-            <Icon name="activity" :size="17" />
+            <Icon name="radar" :size="17" />
             <span v-if="!sidebarCollapsed">Monitoring & Security</span>
             <Icon
               v-if="!sidebarCollapsed"
@@ -232,7 +232,7 @@
               class="nav-subitem"
               active-class="active"
             >
-              <Icon name="shield" :size="15" />
+              <Icon name="shield-alert" :size="15" />
               Security
             </router-link>
             <router-link
diff --git a/src/services/api.test.ts b/src/services/api.test.ts
new file mode 100644
index 0000000..37587fb
--- /dev/null
+++ b/src/services/api.test.ts
@@ -0,0 +1,98 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import type { AxiosAdapter } from "axios";
+import { apiClient, resetSessionGate } from "./api";
+
+const ok = (config: Parameters<AxiosAdapter>[0]) =>
+  Promise.resolve({ data: {}, status: 200, statusText: "OK", headers: {}, config });
+
+const unauthorized = (config: Parameters<AxiosAdapter>[0]) =>
+  Promise.reject(
+    Object.assign(new Error("Request failed with status code 401"), {
+      config,
+      isAxiosError: true,
+      response: { data: {}, status: 401, statusText: "Unauthorized", headers: {}, config },
+    }),
+  );
+
+describe("api client session gate", () => {
+  const originalAdapter = apiClient.defaults.adapter;
+  let location: { pathname: string; href: string };
+
+  beforeEach(() => {
+    resetSessionGate();
+    localStorage.clear();
+    location = { pathname: "/", href: "/" };
+    Object.defineProperty(window, "location", { value: location, writable: true });
+  });
+
+  afterEach(() => {
+    apiClient.defaults.adapter = originalAdapter;
+  });
+
+  const burst = () =>
+    Promise.allSettled([
+      apiClient.get("/users/me"),
+      apiClient.get("/deployments"),
+      apiClient.get("/stats"),
+      apiClient.get("/ai/status"),
+      apiClient.get("/cluster/status"),
+    ]);
+
+  // The agent counts a run of rejections as an attack and blocks the address, so a stale token
+  // must cost one rejection rather than one per call the page makes.
+  it("stops the page's other calls once one has been rejected", async () => {
+    localStorage.setItem("auth_token", "stale");
+    const adapter = vi.fn(unauthorized);
+    apiClient.defaults.adapter = adapter as AxiosAdapter;
+
+    const results = await burst();
+
+    expect(adapter).toHaveBeenCalledTimes(1);
+    expect(results.every((r) => r.status === "rejected")).toBe(true);
+  });
+
+  it("sends the whole page once the session is known good", async () => {
+    localStorage.setItem("auth_token", "good");
+    const adapter = vi.fn(ok);
+    apiClient.defaults.adapter = adapter as AxiosAdapter;
+
+    const results = await burst();
+
+    expect(adapter).toHaveBeenCalledTimes(5);
+    expect(results.every((r) => r.status === "fulfilled")).toBe(true);
+  });
+
+  it("sends nothing at all when there is no token", async () => {
+    const adapter = vi.fn(ok);
+    apiClient.defaults.adapter = adapter as AxiosAdapter;
+
+    const results = await burst();
+
+    expect(adapter).not.toHaveBeenCalled();
+    expect(results.every((r) => r.status === "rejected")).toBe(true);
+  });
+
+  it("takes a rejected session to the login page and drops the token", async () => {
+    localStorage.setItem("auth_token", "stale");
+    apiClient.defaults.adapter = vi.fn(unauthorized) as AxiosAdapter;
+
+    await burst();
+
+    expect(localStorage.getItem("auth_token")).toBeNull();
+    expect(location.href).toBe("/login");
+  });
+
+  // A page that loaded fine can still be holding a token that lapses while it is open.
+  it("gates the next burst again after the first one has drained", async () => {
+    localStorage.setItem("auth_token", "good-then-stale");
+    const adapter = vi.fn(ok);
+    apiClient.defaults.adapter = adapter as AxiosAdapter;
+    await burst();
+
+    adapter.mockImplementation(unauthorized);
+    const results = await burst();
+
+    expect(adapter).toHaveBeenCalledTimes(6);
+    expect(results.every((r) => r.status === "rejected")).toBe(true);
+  });
+});
diff --git a/src/services/api.ts b/src/services/api.ts
index 8a9e0f5..4dbe059 100755
--- a/src/services/api.ts
+++ b/src/services/api.ts
@@ -30,26 +30,124 @@ export const apiClient = axios.create({
   },
 });
 
-apiClient.interceptors.request.use((config) => {
+const publicPaths = ["/auth/login", "/auth/status", "/setup", "/health"];
+const isPublic = (url: string) => publicPaths.some((p) => url.startsWith(p));
+const onAuthPage = () => window.location.pathname.includes("/login") || window.location.pathname.includes("/setup");
+
+// A page load fans out into a dozen calls at once. Firing them all against a token the agent
+// has already stopped accepting spends a rejection on each, which the agent counts as a run of
+// authentication failures and blocks the address for. So the first call goes alone and the rest
+// wait on what it learns: one rejection instead of a dozen.
+type SessionGate = { settled: boolean; open: boolean; wait: Promise<void>; release: () => void };
+
+let gate: SessionGate | null = null;
+let sessionRejected = false;
+let inFlight = 0;
+
+const startGate = (): SessionGate => {
+  let release!: () => void;
+  const wait = new Promise<void>((resolve) => {
+    release = () => resolve();
+  });
+  return { settled: false, open: false, wait, release };
+};
+
+const settleGate = (authenticated: boolean) => {
+  sessionRejected = !authenticated;
+  if (gate && !gate.settled) {
+    gate.settled = true;
+    gate.open = authenticated;
+    gate.release();
+  }
+};
+
+// The gate is armed again once the burst it was opened for has drained, so a token that expires
+// while the panel is open costs one rejection on the next burst rather than one per call.
+const finish = () => {
+  inFlight = Math.max(0, inFlight - 1);
+  if (inFlight === 0 && !sessionRejected) {
+    gate = null;
+  }
+};
+
+// Signing in makes any earlier rejection stale.
+export const resetSessionGate = () => {
+  gate = null;
+  sessionRejected = false;
+  inFlight = 0;
+};
+
+apiClient.interceptors.request.use(async (config) => {
+  const url = config.url || "";
+  if (isPublic(url)) {
+    return config;
+  }
+
   const token = localStorage.getItem("auth_token");
-  if (token) {
-    config.headers.Authorization = `Bearer ${token}`;
+  if (!token) {
+    localStorage.removeItem("auth_token");
+    if (!onAuthPage()) {
+      window.location.href = "/login";
+    }
+    throw new axios.Cancel("not signed in");
+  }
+  config.headers.Authorization = `Bearer ${token}`;
+
+  inFlight++;
+  try {
+    if (sessionRejected) {
+      throw new axios.Cancel("session already rejected");
+    }
+    if (!gate) {
+      gate = startGate();
+      return config;
+    }
+    if (gate.settled) {
+      if (!gate.open) {
+        throw new axios.Cancel("session already rejected");
+      }
+      return config;
+    }
+
+    await gate.wait;
+    if (!gate.open) {
+      throw new axios.Cancel("session already rejected");
+    }
+    return config;
+  } catch (err) {
+    finish();
+    throw err;
   }
-  return config;
 });
 
 apiClient.interceptors.response.use(
-  (response) => response,
+  (response) => {
+    if (!isPublic(response.config.url || "")) {
+      settleGate(true);
+      finish();
+    }
+    return response;
+  },
   (error) => {
+    if (axios.isCancel(error) || isPublic(error.config?.url || "")) {
+      return Promise.reject(error);
+    }
+
     if (error.response?.status === 401) {
-      const failedURL: string = error.config?.url || "";
-      const isLoginAttempt = failedURL.includes("/auth/login");
-      const onAuthPage = window.location.pathname.includes("/login") || window.location.pathname.includes("/setup");
-      if (!isLoginAttempt && !onAuthPage) {
-        localStorage.removeItem("auth_token");
+      settleGate(false);
+      localStorage.removeItem("auth_token");
+      if (!onAuthPage()) {
         window.location.href = "/login";
       }
+    } else if (error.response) {
+      // The agent answered, so the credential got that far.
+      settleGate(true);
+    } else {
+      // A request that never reached the agent says nothing about the session, so it must not
+      // leave the rest of the burst waiting on an answer that will never come.
+      settleGate(true);
     }
+    finish();
     return Promise.reject(error);
   },
 );
@@ -138,7 +236,7 @@ export const deploymentJobWsUrl = (name: string, jobId: string): string => {
 // push everything it writes down the socket for the browser to discard.
 export const deploymentLogsWsUrl = (
   name: string,
-  opts: { tail?: number; filter?: string; source?: string } = {},
+  opts: { tail?: number; filter?: string; source?: string; service?: string } = {},
 ): string => {
   const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
   const apiUrl = import.meta.env.VITE_API_URL || "";
@@ -146,6 +244,7 @@ export const deploymentLogsWsUrl = (
   if (opts.tail !== undefined) params.set("tail", String(opts.tail));
   if (opts.filter) params.set("filter", opts.filter);
   if (opts.source) params.set("source", opts.source);
+  if (opts.service && opts.service !== "all") params.set("service", opts.service);
   const query = params.toString();
   const path = `/api/deployments/${name}/logs/stream${query ? `?${query}` : ""}`;
   if (apiUrl.startsWith("http")) {
@@ -215,10 +314,13 @@ export const deploymentsApi = {
     }>(`/deployments/${name}/images`),
   executeQuickAction: (name: string, actionId: string) =>
     apiClient.post<{ message: string; action_id: string; output: string }>(`/deployments/${name}/actions/${actionId}`),
-  logs: (name: string, params?: { tail?: number; source?: string }) =>
-    apiClient.get<{ name: string; source?: string; logs: string; records: LogRecord[] }>(`/deployments/${name}/logs`, {
-      params,
-    }),
+  logs: (name: string, params?: { tail?: number; source?: string; service?: string }) =>
+    apiClient.get<{ name: string; source?: string; service?: string; logs: string; records: LogRecord[] }>(
+      `/deployments/${name}/logs`,
+      { params: params?.service === "all" ? { ...params, service: undefined } : params },
+    ),
+  deleteLogs: (name: string, params?: { source?: string; service?: string }) =>
+    apiClient.delete<{ message: string }>(`/deployments/${name}/logs`, { params }),
   logSources: (name: string) =>
     apiClient.get<{ name: string; sources: LogSource[] }>(`/deployments/${name}/log-sources`),
   updateLogSources: (name: string, sources: LogSource[]) =>
@@ -868,6 +970,47 @@ export const systemServicesApi = {
   restart: (name: string) => apiClient.post(`/system/services/${name}/restart`),
 };
 
+// One place the host itself writes logs, as opposed to a deployment: the proxy's access and
+// error logs, and whatever shared infrastructure is running.
+export interface SystemLogSource {
+  id: string;
+  name: string;
+  service: string;
+  stream: string;
+  by_deployment: boolean;
+}
+
+export interface SystemLogParams {
+  source?: string;
+  tail?: number;
+  filter?: string;
+  deployment?: string;
+}
+
+export const systemLogsApi = {
+  sources: () => apiClient.get<{ sources: SystemLogSource[] }>("/system/logs/sources"),
+  logs: (params?: SystemLogParams) =>
+    apiClient.get<{ source: string; logs: string; records: LogRecord[] }>("/system/logs", { params }),
+  deleteLogs: (source: string) => apiClient.delete<{ message: string }>("/system/logs", { params: { source } }),
+};
+
+export const systemLogsWsUrl = (opts: SystemLogParams = {}): string => {
+  const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+  const apiUrl = import.meta.env.VITE_API_URL || "";
+  const params = new URLSearchParams();
+  if (opts.source) params.set("source", opts.source);
+  if (opts.tail !== undefined) params.set("tail", String(opts.tail));
+  if (opts.filter) params.set("filter", opts.filter);
+  if (opts.deployment) params.set("deployment", opts.deployment);
+  const query = params.toString();
+  const path = `/api/system/logs/stream${query ? `?${query}` : ""}`;
+  if (apiUrl.startsWith("http")) {
+    const url = new URL(apiUrl);
+    return `${protocol}//${url.host}${path}`;
+  }
+  return `${protocol}//${window.location.host}${path}`;
+};
+
 export const authApi = {
   status: () => apiClient.get("/auth/status"),
   login: (apiKey: string) => apiClient.post("/auth/login", { api_key: apiKey }),
diff --git a/src/services/observability.ts b/src/services/observability.ts
index 1dc83be..fba8665 100644
--- a/src/services/observability.ts
+++ b/src/services/observability.ts
@@ -84,6 +84,58 @@ export interface AlertEvent {
   snapshot?: Consumer[];
 }
 
+export interface LogRule {
+  id?: string;
+  name: string;
+  enabled: boolean;
+  deployment: string;
+  service?: string;
+  source?: string;
+  min_level?: string;
+  pattern?: string;
+  min_count?: number;
+  window_seconds?: number;
+  cooldown_seconds?: number;
+  triage?: boolean;
+  responders?: string[];
+  targets?: string[];
+}
+
+export interface IncidentTriage {
+  summary?: string;
+  cause?: string;
+  next_step?: string;
+  severity?: string;
+  confidence?: string;
+  skipped?: string;
+  at?: string;
+}
+
+export interface ResponderResult {
+  responder: string;
+  detail?: string;
+  error?: string;
+  at: string;
+}
+
+export interface Incident {
+  id: string;
+  rule_id: string;
+  rule_name: string;
+  deployment: string;
+  service?: string;
+  source?: string;
+  level: string;
+  fingerprint: string;
+  sample: string;
+  context?: string[];
+  count: number;
+  first_seen: string;
+  last_seen: string;
+  triage?: IncidentTriage;
+  responses?: ResponderResult[];
+}
+
 export const observabilityApi = {
   latest: () => apiClient.get<DeploymentMetrics[]>(`${base}/metrics/latest`),
   alertRules: () => apiClient.get<AlertRule[]>(`${base}/alerts/rules`),
@@ -105,4 +157,9 @@ export const observabilityApi = {
     }),
   health: () => apiClient.get<ContainerHealth[]>(`${base}/health`),
   recoveries: () => apiClient.get<RecoveryEvent[]>(`${base}/health/events`),
+  logRules: () => apiClient.get<LogRule[]>(`${base}/alerts/log-rules`),
+  saveLogRules: (rules: LogRule[]) => apiClient.put<LogRule[]>(`${base}/alerts/log-rules`, rules),
+  incidents: (deployment?: string) =>
+    apiClient.get<Incident[]>(`${base}/alerts/incidents`, { params: deployment ? { deployment } : undefined }),
+  responders: () => apiClient.get<string[]>(`${base}/alerts/responders`),
 };
diff --git a/src/stores/auth.ts b/src/stores/auth.ts
index 0903156..750575e 100644
--- a/src/stores/auth.ts
+++ b/src/stores/auth.ts
@@ -1,6 +1,7 @@
 import { defineStore } from "pinia";
 import { ref, computed } from "vue";
 import axios from "axios";
+import { apiClient as sharedClient, resetSessionGate } from "@/services/api";
 import type { User, Permission, UserDeploymentAccess } from "@/types";
 
 const apiClient = axios.create({
@@ -68,6 +69,7 @@ export const useAuthStore = defineStore("auth", () => {
       const response = await apiClient.post("/auth/login", { api_key: apiKey });
       token.value = response.data.token;
       localStorage.setItem("auth_token", response.data.token);
+      resetSessionGate();
 
       if (response.data.user) {
         currentUser.value = response.data.user;
@@ -97,6 +99,7 @@ export const useAuthStore = defineStore("auth", () => {
       const response = await apiClient.post("/auth/login", { username, password });
       token.value = response.data.token;
       localStorage.setItem("auth_token", response.data.token);
+      resetSessionGate();
 
       if (response.data.user) {
         currentUser.value = response.data.user;
@@ -122,15 +125,9 @@ export const useAuthStore = defineStore("auth", () => {
     if (!token.value) return;
 
     try {
-      const authClient = axios.create({
-        baseURL: import.meta.env.VITE_API_URL || "/api",
-        headers: {
-          "Content-Type": "application/json",
-          Authorization: `Bearer ${token.value}`,
-        },
-      });
-
-      const response = await authClient.get("/users/me");
+      // Shares the panel's client so this call queues behind the same session check as the
+      // rest of a page load rather than spending its own rejection on a stale token.
+      const response = await sharedClient.get("/users/me");
       currentUser.value = response.data.user;
       permissions.value = response.data.permissions || [];
       deploymentAccess.value = response.data.deployments || [];
@@ -142,6 +139,7 @@ export const useAuthStore = defineStore("auth", () => {
   };
 
   const logout = () => {
+    resetSessionGate();
     token.value = null;
     currentUser.value = null;
     permissions.value = [];
diff --git a/src/views/AlertsView.test.ts b/src/views/AlertsView.test.ts
index 79bbac9..f7562f2 100644
--- a/src/views/AlertsView.test.ts
+++ b/src/views/AlertsView.test.ts
@@ -13,6 +13,9 @@ vi.mock("@/services/observability", async (importOriginal) => {
       alertEvents: vi.fn(),
       alertRules: vi.fn().mockResolvedValue({ data: [] }),
       saveAlertRules: vi.fn(),
+      incidents: vi.fn().mockResolvedValue({ data: [] }),
+      logRules: vi.fn().mockResolvedValue({ data: [] }),
+      saveLogRules: vi.fn(),
     },
   };
 });
diff --git a/src/views/AlertsView.vue b/src/views/AlertsView.vue
index ae4db88..c6bbdc8 100644
--- a/src/views/AlertsView.vue
+++ b/src/views/AlertsView.vue
@@ -16,7 +16,57 @@
 
     <div class="av-body">
       <div class="av-main">
-        <AlertRulesPanel :deployments="deploymentNames" />
+        <div class="av-tabs">
+          <button class="av-tab" :class="{ active: scope === 'metrics' }" @click="scope = 'metrics'">
+            <Icon name="activity" :size="14" />
+            Metric rules
+          </button>
+          <button class="av-tab" :class="{ active: scope === 'logs' }" @click="scope = 'logs'">
+            <Icon name="file-search" :size="14" />
+            Log rules
+          </button>
+        </div>
+
+        <AlertRulesPanel v-if="scope === 'metrics'" :deployments="deploymentNames" />
+        <template v-else>
+          <LogRulesPanel :deployments="deploymentNames" @changed="load" />
+
+          <section class="av-incidents">
+            <h3><Icon name="siren" :size="15" /> Incidents</h3>
+            <p v-if="!incidents.length" class="av-clear">
+              Nothing raised yet. A rule raises an incident once the same fault has happened often enough.
+            </p>
+            <article v-for="incident in incidents" :key="incident.id" class="av-incident">
+              <header>
+                <span class="av-incident-rule">{{ incident.rule_name }}</span>
+                <span class="av-incident-where">
+                  {{ incident.deployment }}<template v-if="incident.service">/{{ incident.service }}</template>
+                </span>
+                <span class="av-incident-count">{{ incident.count }}x</span>
+                <span class="av-row-when">{{ relTime(incident.last_seen) }}</span>
+              </header>
+
+              <p v-if="incident.triage?.summary" class="av-incident-summary">
+                {{ incident.triage.summary }}
+                <span v-if="incident.triage.confidence" class="av-incident-conf">
+                  ({{ incident.triage.confidence }} confidence)
+                </span>
+              </p>
+              <p v-if="incident.triage?.next_step" class="av-incident-next">Next: {{ incident.triage.next_step }}</p>
+              <p v-else-if="incident.triage?.skipped" class="av-incident-skipped">
+                Not explained: {{ incident.triage.skipped }}
+              </p>
+
+              <pre class="av-incident-sample">{{ incident.sample }}</pre>
+
+              <p v-if="incident.responses?.length" class="av-incident-responses">
+                <span v-for="(r, i) in incident.responses" :key="i">
+                  {{ r.responder }}: {{ r.error || r.detail }}
+                </span>
+              </p>
+            </article>
+          </section>
+        </template>
       </div>
 
       <aside class="av-side">
@@ -65,12 +115,16 @@ import type { AlertEvent } from "@/services/observability";
 import { useDeploymentsStore } from "@/stores/deployments";
 import Icon from "@/components/base/Icon.vue";
 import AlertRulesPanel from "@/components/AlertRulesPanel.vue";
+import LogRulesPanel from "@/components/LogRulesPanel.vue";
+import type { Incident } from "@/services/observability";
 
 const deploymentsStore = useDeploymentsStore();
 const deploymentNames = computed(() => deploymentsStore.deployments.map((d) => d.name).sort());
 
+const scope = ref<"metrics" | "logs">("metrics");
 const firing = ref<AlertEvent[]>([]);
 const events = ref<AlertEvent[]>([]);
+const incidents = ref<Incident[]>([]);
 let timer: ReturnType<typeof setInterval> | null = null;
 
 const eventKey = (e: AlertEvent) => `${e.rule_id}\u0000${e.container}\u0000${e.at}`;
@@ -93,12 +147,14 @@ const relTime = (iso: string) => {
 };
 
 const load = async () => {
-  const [firingResult, eventsResult] = await Promise.allSettled([
+  const [firingResult, eventsResult, incidentsResult] = await Promise.allSettled([
     observabilityApi.firingAlerts(),
     observabilityApi.alertEvents(),
+    observabilityApi.incidents(),
   ]);
   if (firingResult.status === "fulfilled") firing.value = firingResult.value.data || [];
   if (eventsResult.status === "fulfilled") events.value = eventsResult.value.data || [];
+  if (incidentsResult.status === "fulfilled") incidents.value = (incidentsResult.value.data || []).slice().reverse();
 };
 
 onMounted(() => {
@@ -162,6 +218,118 @@ onUnmounted(() => {
 
 .av-main {
   min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+}
+
+.av-tabs {
+  display: flex;
+  gap: var(--space-1);
+  background: var(--surface-inset);
+  padding: var(--space-1);
+  border-radius: var(--radius-sm);
+  align-self: flex-start;
+}
+
+.av-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-md);
+  color: var(--text-muted);
+  cursor: pointer;
+  transition: all var(--transition-base);
+}
+
+.av-tab:hover {
+  color: var(--text);
+}
+
+.av-tab.active {
+  background: var(--surface-raised);
+  color: var(--text);
+  box-shadow: var(--shadow-xs);
+}
+
+.av-incidents {
+  background: var(--surface-raised);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  padding: var(--space-4);
+}
+
+.av-incidents h3 {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  margin: 0 0 var(--space-3);
+  font-size: var(--text-lg);
+}
+
+.av-incident {
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  padding: var(--space-3);
+  background: var(--surface);
+  margin-bottom: var(--space-2);
+}
+
+.av-incident header {
+  display: flex;
+  align-items: baseline;
+  gap: var(--space-2);
+  flex-wrap: wrap;
+}
+
+.av-incident-rule {
+  font-weight: var(--font-medium);
+  color: var(--text);
+}
+
+.av-incident-where,
+.av-incident-count {
+  font-size: var(--text-sm);
+  color: var(--text-muted);
+}
+
+.av-incident-summary {
+  margin: var(--space-2) 0 0;
+  color: var(--text);
+}
+
+.av-incident-conf,
+.av-incident-next,
+.av-incident-skipped,
+.av-incident-responses {
+  font-size: var(--text-sm);
+  color: var(--text-muted);
+}
+
+.av-incident-next,
+.av-incident-skipped {
+  margin: var(--space-1) 0 0;
+}
+
+.av-incident-responses {
+  display: flex;
+  gap: var(--space-3);
+  margin: var(--space-2) 0 0;
+}
+
+.av-incident-sample {
+  margin: var(--space-2) 0 0;
+  padding: var(--space-2);
+  background: var(--surface-inset);
+  border-radius: var(--radius-sm);
+  font-size: var(--text-xs);
+  overflow-x: auto;
+  white-space: pre-wrap;
+  word-break: break-word;
 }
 
 .av-side {
diff --git a/src/views/DeploymentDetailView.test.ts b/src/views/DeploymentDetailView.test.ts
index 4e03b04..1f7f19c 100644
--- a/src/views/DeploymentDetailView.test.ts
+++ b/src/views/DeploymentDetailView.test.ts
@@ -42,6 +42,9 @@ vi.mock("@/services/api", () => ({
     logs: vi.fn().mockResolvedValue({
       data: { logs: "Test logs" },
     }),
+    logSources: vi.fn().mockResolvedValue({
+      data: { name: "test-app", sources: [] },
+    }),
     getStats: vi.fn().mockResolvedValue({
       data: {
         stats: {
@@ -586,4 +589,88 @@ describe("DeploymentDetailView", () => {
       expect((wrapper.vm as any).singleDomainId).toBeNull();
     });
   });
+
+  describe("Logs service filter", () => {
+    // The stub the other tests use swallows the toolbar, and the filters are what a viewer
+    // actually reaches for, so this one renders the slot.
+    const mountWithFilters = () => {
+      const pinia = createTestingPinia({ createSpy: vi.fn });
+      const authStore = useAuthStore(pinia);
+      (authStore.hasPermission as ReturnType<typeof vi.fn>).mockReturnValue(true);
+      return mount(DeploymentDetailView, {
+        global: {
+          plugins: [pinia],
+          mocks: { $route: mockRoute },
+          stubs: {
+            RouterLink: { template: "<a><slot /></a>", props: ["to"] },
+            teleport: true,
+            ContainerTerminal: true,
+            LogViewer: { template: '<div class="log-viewer"><slot name="filters" /></div>' },
+          },
+        },
+      });
+    };
+
+    const openLogsTab = async (wrapper: ReturnType<typeof mountWithFilters>) => {
+      const logsTab = wrapper.findAll(".tab-btn").find((tab) => tab.text().includes("Logs"));
+      await logsTab!.trigger("click");
+      await flushPromises();
+    };
+
+    const serviceSelect = (wrapper: ReturnType<typeof mountWithFilters>) =>
+      wrapper.findAll("select").find((select) => select.text().includes("All services"));
+
+    it("asks the agent for one service when the viewer picks it", async () => {
+      const { deploymentsApi } = await import("@/services/api");
+      const wrapper = mountWithFilters();
+      await flushPromises();
+      await openLogsTab(wrapper);
+
+      const select = serviceSelect(wrapper);
+      expect(select).toBeDefined();
+      expect(select!.findAll("option").map((o) => o.text())).toContain("web");
+
+      vi.mocked(deploymentsApi.logs).mockClear();
+      await select!.setValue("web");
+      await flushPromises();
+
+      expect(deploymentsApi.logs).toHaveBeenCalledWith("test-app", expect.objectContaining({ service: "web" }));
+    });
+
+    it("goes back to every service when the viewer clears the filter", async () => {
+      const { deploymentsApi } = await import("@/services/api");
+      const wrapper = mountWithFilters();
+      await flushPromises();
+      await openLogsTab(wrapper);
+
+      const select = serviceSelect(wrapper);
+      await select!.setValue("web");
+      await flushPromises();
+
+      vi.mocked(deploymentsApi.logs).mockClear();
+      await select!.setValue("all");
+      await flushPromises();
+
+      expect(deploymentsApi.logs).toHaveBeenCalledWith("test-app", expect.objectContaining({ service: "all" }));
+    });
+
+    it("opens one service's own output from its Logs button", async () => {
+      const { deploymentsApi } = await import("@/services/api");
+      const wrapper = mountWithFilters();
+      await flushPromises();
+
+      const servicesTab = wrapper.findAll(".tab-btn").find((tab) => tab.text().includes("Overview"));
+      await servicesTab!.trigger("click");
+      await flushPromises();
+
+      const logsButton = wrapper.findAll(".service-actions .action-btn").find((b) => b.attributes("title") === "Logs");
+      expect(logsButton).toBeDefined();
+
+      vi.mocked(deploymentsApi.logs).mockClear();
+      await logsButton!.trigger("click");
+      await flushPromises();
+
+      expect(deploymentsApi.logs).toHaveBeenCalledWith("test-app", expect.objectContaining({ service: "web" }));
+    });
+  });
 });
diff --git a/src/views/DeploymentDetailView.vue b/src/views/DeploymentDetailView.vue
index a3fe161..91a9c53 100755
--- a/src/views/DeploymentDetailView.vue
+++ b/src/views/DeploymentDetailView.vue
@@ -558,18 +558,37 @@
             :file-name="`${deployment?.name || 'deployment'}-logs.txt`"
             empty-message="No logs available"
             :assist-context="logsAssistContext"
+            deletable
             @refresh="fetchLogs"
+            @delete="confirmDeleteLogs = true"
           >
-            <template #filters>
+            <template #actions>
               <button class="btn btn-sm" :class="following ? 'btn-primary' : 'btn-secondary'" @click="toggleFollow">
                 <Icon :name="following ? 'circle-stop' : 'play'" :size="14" />
                 {{ following ? "Following" : "Follow" }}
               </button>
+            </template>
+
+            <template #filters>
               <select v-model="logSource" class="form-select" @change="onLogSourceChange">
                 <option v-for="src in logSources" :key="src.id" :value="src.id">
                   {{ src.name }}{{ src.path ? ` (${src.path})` : "" }}
                 </option>
               </select>
+              <select
+                v-model="logsService"
+                class="form-select"
+                :disabled="!serviceFilterAvailable"
+                :title="
+                  serviceFilterAvailable
+                    ? 'Show one service\'s output'
+                    : 'A file source is written by the deployment, not per service'
+                "
+                @change="onLogSourceChange"
+              >
+                <option value="all">All services</option>
+                <option v-for="name in serviceNames" :key="name" :value="name">{{ name }}</option>
+              </select>
               <button
                 class="btn btn-sm btn-secondary"
                 title="Read logs from a file this app writes"
@@ -1554,6 +1573,17 @@
       </div>
     </Teleport>
 
+    <ConfirmModal
+      :visible="confirmDeleteLogs"
+      title="Delete these logs?"
+      :message="deleteLogsMessage"
+      warning="The log is emptied on the server. What has already been written is gone, and this cannot be undone."
+      confirm-text="Delete logs"
+      :loading="deletingLogs"
+      @confirm="deleteLogs"
+      @cancel="confirmDeleteLogs = false"
+    />
+
     <ConfirmModal
       :visible="showDeleteEnvModal"
       title="Delete Environment Variable"
@@ -2106,6 +2136,9 @@ const logsTail = ref(100);
 const logsFollow = ref(false);
 const logSources = ref<LogSource[]>([{ id: "stdout", name: "Container output", type: "stdout" }]);
 const logSource = ref("stdout");
+// A file source is one file the deployment writes, so there is nothing per-service to narrow.
+const serviceFilterAvailable = computed(() => logSources.value.find((s) => s.id === logSource.value)?.type !== "file");
+const activeLogService = computed(() => (serviceFilterAvailable.value ? logsService.value : "all"));
 const showAddLogSource = ref(false);
 const newLogSource = reactive({ name: "", path: "" });
 const savingLogSource = ref(false);
@@ -2599,6 +2632,7 @@ const fetchLogs = async () => {
     const response = await deploymentsApi.logs(route.params.name as string, {
       tail: logsTail.value ?? 100,
       source: logSource.value,
+      service: activeLogService.value,
     });
     fetchedLogs.value = response.data.logs || "";
     fetchedRecords.value = response.data.records || [];
@@ -2609,6 +2643,38 @@ const fetchLogs = async () => {
   }
 };
 
+const confirmDeleteLogs = ref(false);
+const deletingLogs = ref(false);
+
+const deleteLogsMessage = computed(() => {
+  const name = route.params.name as string;
+  const source = logSources.value.find((s) => s.id === logSource.value);
+  if (source?.type === "file") {
+    return `This empties ${source.path}, the file ${name} writes to.`;
+  }
+  return activeLogService.value === "all"
+    ? `This empties the stored output of every container in ${name}.`
+    : `This empties the stored output of ${name}/${activeLogService.value}.`;
+});
+
+const deleteLogs = async () => {
+  deletingLogs.value = true;
+  try {
+    await deploymentsApi.deleteLogs(route.params.name as string, {
+      source: logSource.value,
+      service: activeLogService.value,
+    });
+    confirmDeleteLogs.value = false;
+    logStream.stop();
+    await fetchLogs();
+    notifications.success("Logs deleted", "The log has been emptied.");
+  } catch (err: any) {
+    notifications.error("Delete failed", err?.response?.data?.error || err?.message || "The log could not be emptied.");
+  } finally {
+    deletingLogs.value = false;
+  }
+};
+
 const fetchLogSources = async () => {
   try {
     const response = await deploymentsApi.logSources(route.params.name as string);
@@ -2625,12 +2691,20 @@ const toggleFollow = () => {
     fetchLogs();
     return;
   }
-  logStream.start(route.params.name as string, { tail: logsTail.value ?? 100, source: logSource.value });
+  logStream.start(route.params.name as string, {
+    tail: logsTail.value ?? 100,
+    source: logSource.value,
+    service: activeLogService.value,
+  });
 };
 
 const onLogSourceChange = () => {
   if (following.value) {
-    logStream.start(route.params.name as string, { tail: logsTail.value ?? 100, source: logSource.value });
+    logStream.start(route.params.name as string, {
+      tail: logsTail.value ?? 100,
+      source: logSource.value,
+      service: activeLogService.value,
+    });
   } else {
     fetchLogs();
   }
@@ -2896,9 +2970,12 @@ const openTerminal = (service: any) => {
 };
 
 const viewServiceLogs = (service: any) => {
+  // Asking for one service's logs means its container output, not whatever file source the
+  // logs tab happened to be left on.
+  logSource.value = "stdout";
   logsService.value = service.name;
   activeTab.value = "logs";
-  fetchLogs();
+  onLogSourceChange();
 };
 
 const serviceNames = computed(() => services.value.map((s) => s.name));
diff --git a/src/views/LogsView.test.ts b/src/views/LogsView.test.ts
new file mode 100644
index 0000000..3f3a221
--- /dev/null
+++ b/src/views/LogsView.test.ts
@@ -0,0 +1,182 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { mount, flushPromises } from "@vue/test-utils";
+import { createTestingPinia } from "@pinia/testing";
+import LogsView from "./LogsView.vue";
+import { useAuthStore } from "@/stores/auth";
+
+const mockRoute = { query: {} as Record<string, string> };
+const replace = vi.fn();
+
+vi.mock("vue-router", () => ({
+  useRoute: vi.fn(() => mockRoute),
+  useRouter: vi.fn(() => ({ replace })),
+}));
+
+vi.mock("@/services/api", () => ({
+  deploymentsApi: {
+    list: vi.fn().mockResolvedValue({ data: { deployments: [{ name: "shop" }, { name: "blog" }] } }),
+    logs: vi.fn().mockResolvedValue({ data: { logs: "deployment line", records: [] } }),
+    deleteLogs: vi.fn().mockResolvedValue({ data: { message: "Log cleared" } }),
+    logSources: vi.fn().mockResolvedValue({ data: { sources: [] } }),
+    getServices: vi.fn().mockResolvedValue({ data: { services: [{ name: "web" }] } }),
+  },
+  systemLogsApi: {
+    sources: vi.fn().mockResolvedValue({
+      data: {
+        sources: [
+          { id: "nginx-access", name: "nginx access", service: "nginx", stream: "stdout", by_deployment: true },
+          { id: "nginx-error", name: "nginx error", service: "nginx", stream: "stderr", by_deployment: false },
+        ],
+      },
+    }),
+    logs: vi.fn().mockResolvedValue({ data: { source: "nginx-access", logs: "access line", records: [] } }),
+    deleteLogs: vi.fn().mockResolvedValue({ data: { message: "Log cleared" } }),
+  },
+  systemLogsWsUrl: vi.fn(() => "ws://localhost/api/system/logs/stream"),
+  deploymentLogsWsUrl: vi.fn(() => "ws://localhost/api/deployments/shop/logs/stream"),
+}));
+
+describe("LogsView", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockRoute.query = {};
+    // The confirmation teleports to body, which outlives the wrapper.
+    document.body.innerHTML = "";
+  });
+
+  const clickConfirm = async () => {
+    const button = [...document.body.querySelectorAll("button")].find((b) => b.textContent?.includes("Delete logs"));
+    if (!button) throw new Error("the confirmation was not shown");
+    button.click();
+    await flushPromises();
+  };
+
+  const mountView = (canReadSystem = true) => {
+    const pinia = createTestingPinia({ createSpy: vi.fn });
+    const authStore = useAuthStore(pinia);
+    (authStore.hasPermission as ReturnType<typeof vi.fn>).mockReturnValue(canReadSystem);
+    return mount(LogsView, {
+      global: {
+        plugins: [pinia],
+        stubs: {
+          LogViewer: { name: "LogViewer", template: '<div class="log-viewer"><slot name="filters" /></div>' },
+        },
+      },
+    });
+  };
+
+  const openSystemTab = async (wrapper: ReturnType<typeof mountView>) => {
+    const tab = wrapper.findAll(".tab-btn").find((t) => t.text().includes("System"));
+    await tab!.trigger("click");
+    await flushPromises();
+  };
+
+  const selectWithOption = (wrapper: ReturnType<typeof mountView>, option: string) =>
+    wrapper.findAll("select").find((s) => s.text().includes(option));
+
+  it("reads the proxy's own log once the viewer switches to system", async () => {
+    const { systemLogsApi } = await import("@/services/api");
+    const wrapper = mountView();
+    await flushPromises();
+
+    await openSystemTab(wrapper);
+
+    expect(systemLogsApi.sources).toHaveBeenCalled();
+    expect(systemLogsApi.logs).toHaveBeenCalledWith(expect.objectContaining({ source: "nginx-access" }));
+  });
+
+  it("narrows the access log to one deployment", async () => {
+    const { systemLogsApi } = await import("@/services/api");
+    const wrapper = mountView();
+    await flushPromises();
+    await openSystemTab(wrapper);
+
+    const select = selectWithOption(wrapper, "All deployments");
+    expect(select).toBeDefined();
+
+    vi.mocked(systemLogsApi.logs).mockClear();
+    await select!.setValue("shop");
+    await flushPromises();
+
+    expect(systemLogsApi.logs).toHaveBeenCalledWith(expect.objectContaining({ deployment: "shop" }));
+  });
+
+  it("offers no deployment filter on a source that cannot say which deployment a line is from", async () => {
+    const wrapper = mountView();
+    await flushPromises();
+    await openSystemTab(wrapper);
+
+    const sourceSelect = selectWithOption(wrapper, "nginx error");
+    await sourceSelect!.setValue("nginx-error");
+    await flushPromises();
+
+    const deploymentSelect = selectWithOption(wrapper, "All deployments");
+    expect(deploymentSelect!.attributes("disabled")).toBeDefined();
+  });
+
+  it("drops a deployment filter carried over from the access log", async () => {
+    const { systemLogsApi } = await import("@/services/api");
+    const wrapper = mountView();
+    await flushPromises();
+    await openSystemTab(wrapper);
+
+    await selectWithOption(wrapper, "All deployments")!.setValue("shop");
+    await flushPromises();
+
+    vi.mocked(systemLogsApi.logs).mockClear();
+    await selectWithOption(wrapper, "nginx error")!.setValue("nginx-error");
+    await flushPromises();
+
+    expect(systemLogsApi.logs).toHaveBeenCalledWith(expect.objectContaining({ deployment: undefined }));
+  });
+
+  it("hides the system tab from someone who cannot read infrastructure", async () => {
+    const wrapper = mountView(false);
+    await flushPromises();
+
+    expect(wrapper.findAll(".tab-btn").some((t) => t.text().includes("System"))).toBe(false);
+  });
+
+  it("still reads a deployment's own logs on the deployments tab", async () => {
+    const { deploymentsApi } = await import("@/services/api");
+    const wrapper = mountView();
+    await flushPromises();
+
+    const select = selectWithOption(wrapper, "Select a deployment");
+    await select!.setValue("shop");
+    await flushPromises();
+
+    expect(deploymentsApi.logs).toHaveBeenCalledWith("shop", expect.objectContaining({ service: "all" }));
+  });
+
+  // Emptying a log on the server is not something a stray click should do.
+  it("does not delete anything until the confirmation is accepted", async () => {
+    const { deploymentsApi } = await import("@/services/api");
+    const wrapper = mountView();
+    await flushPromises();
+    await selectWithOption(wrapper, "Select a deployment")!.setValue("shop");
+    await flushPromises();
+
+    wrapper.findComponent({ name: "LogViewer" }).vm.$emit("delete");
+    await flushPromises();
+
+    expect(deploymentsApi.deleteLogs).not.toHaveBeenCalled();
+
+    await clickConfirm();
+
+    expect(deploymentsApi.deleteLogs).toHaveBeenCalledWith("shop", expect.objectContaining({ source: "stdout" }));
+  });
+
+  it("deletes the system source that is on screen", async () => {
+    const { systemLogsApi } = await import("@/services/api");
+    const wrapper = mountView();
+    await flushPromises();
+    await openSystemTab(wrapper);
+
+    wrapper.findComponent({ name: "LogViewer" }).vm.$emit("delete");
+    await flushPromises();
+    await clickConfirm();
+
+    expect(systemLogsApi.deleteLogs).toHaveBeenCalledWith("nginx-access");
+  });
+});
diff --git a/src/views/LogsView.vue b/src/views/LogsView.vue
index e10b608..c03e3cc 100644
--- a/src/views/LogsView.vue
+++ b/src/views/LogsView.vue
@@ -1,33 +1,87 @@
 <template>
   <div class="logs-view">
+    <div class="logs-tabs">
+      <button class="tab-btn" :class="{ active: scope === 'deployments' }" @click="switchScope('deployments')">
+        <Icon name="package" :size="14" />
+        Deployments
+      </button>
+      <button
+        v-if="canReadSystemLogs"
+        class="tab-btn"
+        :class="{ active: scope === 'system' }"
+        @click="switchScope('system')"
+      >
+        <Icon name="server-cog" :size="14" />
+        System
+      </button>
+    </div>
+
     <div class="logs-panel">
       <LogViewer
         :logs="logs"
         :records="logRecords"
         :loading="logsLoading"
-        :file-name="`${selectedDeployment || 'deployment'}-logs.txt`"
-        empty-message="Pick a deployment to see its logs"
+        :file-name="downloadName"
+        :empty-message="emptyMessage"
+        deletable
+        @refresh="fetchLogs"
+        @delete="askDelete"
       >
-        <template #filters>
-          <select v-model="selectedDeployment" class="form-select" @change="onDeploymentChange">
-            <option value="" disabled>Select a deployment</option>
-            <option v-for="d in deployments" :key="d.name" :value="d.name">{{ d.name }}</option>
-          </select>
+        <template #actions>
           <button
             class="btn btn-sm"
             :class="following ? 'btn-primary' : 'btn-secondary'"
-            :disabled="!selectedDeployment"
+            :disabled="!canFollow"
             @click="toggleFollow"
           >
             <Icon :name="following ? 'circle-stop' : 'play'" :size="14" />
             {{ following ? "Following" : "Follow" }}
           </button>
-          <select v-model="logSource" class="form-select" :disabled="!selectedDeployment" @change="onSourceChange">
-            <option v-for="src in logSources" :key="src.id" :value="src.id">
-              {{ src.name }}{{ src.path ? ` (${src.path})` : "" }}
-            </option>
-          </select>
-          <select v-model="logsTail" class="form-select" :disabled="!selectedDeployment" @change="onSourceChange">
+        </template>
+
+        <template #filters>
+          <template v-if="scope === 'deployments'">
+            <select v-model="selectedDeployment" class="form-select" @change="onDeploymentChange">
+              <option value="" disabled>Select a deployment</option>
+              <option v-for="d in deployments" :key="d.name" :value="d.name">{{ d.name }}</option>
+            </select>
+            <select v-model="logSource" class="form-select" :disabled="!selectedDeployment" @change="onSourceChange">
+              <option v-for="src in logSources" :key="src.id" :value="src.id">
+                {{ src.name }}{{ src.path ? ` (${src.path})` : "" }}
+              </option>
+            </select>
+            <select
+              v-model="logsService"
+              class="form-select"
+              :disabled="!selectedDeployment || !serviceFilterAvailable"
+              @change="onSourceChange"
+            >
+              <option value="all">All services</option>
+              <option v-for="name in serviceNames" :key="name" :value="name">{{ name }}</option>
+            </select>
+          </template>
+
+          <template v-else>
+            <select v-model="systemSource" class="form-select" @change="onSourceChange">
+              <option v-for="src in systemSources" :key="src.id" :value="src.id">{{ src.name }}</option>
+            </select>
+            <select
+              v-model="systemDeployment"
+              class="form-select"
+              :disabled="!systemByDeployment"
+              :title="
+                systemByDeployment
+                  ? 'Show only the requests to one deployment'
+                  : 'Only the access log says which deployment a line belongs to'
+              "
+              @change="onSourceChange"
+            >
+              <option value="">All deployments</option>
+              <option v-for="d in deployments" :key="d.name" :value="d.name">{{ d.name }}</option>
+            </select>
+          </template>
+
+          <select v-model="logsTail" class="form-select" @change="onSourceChange">
             <option :value="100">Last 100 lines</option>
             <option :value="500">Last 500 lines</option>
             <option :value="1000">Last 1000 lines</option>
@@ -36,6 +90,17 @@
         </template>
       </LogViewer>
     </div>
+
+    <ConfirmModal
+      :visible="confirmingDelete"
+      title="Delete these logs?"
+      :message="deleteMessage"
+      warning="The log is emptied on the server. What has already been written is gone, and this cannot be undone."
+      confirm-text="Delete logs"
+      :loading="deleting"
+      @confirm="confirmDelete"
+      @cancel="confirmingDelete = false"
+    />
   </div>
 </template>
 
@@ -44,18 +109,44 @@ import { ref, computed, onMounted } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import LogViewer from "@/components/LogViewer.vue";
 import Icon from "@/components/base/Icon.vue";
-import { deploymentsApi } from "@/services/api";
+import { deploymentsApi, systemLogsApi, systemLogsWsUrl, type SystemLogSource } from "@/services/api";
+import ConfirmModal from "@/components/ConfirmModal.vue";
+import { useNotificationsStore } from "@/stores/notifications";
 import { useLogStream } from "@/composables/useLogStream";
+import { useAuthStore } from "@/stores/auth";
 import type { Deployment } from "@/types";
 import type { LogRecord, LogSource } from "@/types/logs";
 
 const route = useRoute();
 const router = useRouter();
 
+type Scope = "deployments" | "system";
+const scope = ref<Scope>("deployments");
+// The proxy and the shared services belong to the host, so reading their logs is an
+// infrastructure question rather than a deployment one.
+const authStore = useAuthStore();
+const canReadSystemLogs = computed(() => authStore.hasPermission("infrastructure:read"));
+
 const deployments = ref<Deployment[]>([]);
 const selectedDeployment = ref("");
 const logSources = ref<LogSource[]>([{ id: "stdout", name: "Container output", type: "stdout" }]);
 const logSource = ref("stdout");
+const serviceNames = ref<string[]>([]);
+const logsService = ref("all");
+// A file source is one file the deployment writes, so there is nothing per-service to narrow.
+const serviceFilterAvailable = computed(() => logSources.value.find((s) => s.id === logSource.value)?.type !== "file");
+const activeLogService = computed(() => (serviceFilterAvailable.value ? logsService.value : "all"));
+
+const systemSources = ref<SystemLogSource[]>([]);
+const systemSource = ref("");
+const systemDeployment = ref("");
+// Only the proxy's access log says which deployment a line belongs to; an error log or a
+// database's output has nothing to match a deployment against.
+const systemByDeployment = computed(
+  () => systemSources.value.find((s) => s.id === systemSource.value)?.by_deployment === true,
+);
+const activeSystemDeployment = computed(() => (systemByDeployment.value ? systemDeployment.value : ""));
+
 const logsTail = ref(100);
 const logsLoading = ref(false);
 const fetchedLogs = ref("");
@@ -66,6 +157,63 @@ const following = logStream.following;
 const logs = computed(() => (following.value ? logStream.lines.value.join("\n") : fetchedLogs.value));
 const logRecords = computed(() => (following.value ? logStream.records.value : fetchedRecords.value));
 
+const downloadName = computed(() =>
+  scope.value === "system"
+    ? `${systemSource.value || "system"}-logs.txt`
+    : `${selectedDeployment.value || "deployment"}-logs.txt`,
+);
+const emptyMessage = computed(() =>
+  scope.value === "system" ? "No logs from this system service" : "Pick a deployment to see its logs",
+);
+const notifications = useNotificationsStore();
+const confirmingDelete = ref(false);
+const deleting = ref(false);
+
+const deleteMessage = computed(() => {
+  if (scope.value === "system") {
+    const source = systemSources.value.find((s) => s.id === systemSource.value);
+    // Both nginx streams come from one container, so emptying one empties the other.
+    return source?.by_deployment || source?.stream === "stderr"
+      ? `This empties the ${source?.name} log, and the other stream from the same container with it.`
+      : `This empties the ${source?.name ?? "system"} log.`;
+  }
+  const source = logSources.value.find((s) => s.id === logSource.value);
+  if (source?.type === "file") {
+    return `This empties ${source.path}, the file ${selectedDeployment.value} writes to.`;
+  }
+  return activeLogService.value === "all"
+    ? `This empties the stored output of every container in ${selectedDeployment.value}.`
+    : `This empties the stored output of ${selectedDeployment.value}/${activeLogService.value}.`;
+});
+
+const askDelete = () => {
+  confirmingDelete.value = true;
+};
+
+const confirmDelete = async () => {
+  deleting.value = true;
+  try {
+    if (scope.value === "system") {
+      await systemLogsApi.deleteLogs(systemSource.value);
+    } else {
+      await deploymentsApi.deleteLogs(selectedDeployment.value, {
+        source: logSource.value,
+        service: activeLogService.value,
+      });
+    }
+    confirmingDelete.value = false;
+    logStream.stop();
+    await fetchLogs();
+    notifications.success("Logs deleted", "The log has been emptied.");
+  } catch (err: any) {
+    notifications.error("Delete failed", err?.response?.data?.error || err?.message || "The log could not be emptied.");
+  } finally {
+    deleting.value = false;
+  }
+};
+
+const canFollow = computed(() => (scope.value === "system" ? !!systemSource.value : !!selectedDeployment.value));
+
 const fetchDeployments = async () => {
   try {
     const response = await deploymentsApi.list();
@@ -87,14 +235,47 @@ const fetchLogSources = async () => {
   }
 };
 
-const fetchLogs = async () => {
+const fetchServiceNames = async () => {
+  serviceNames.value = [];
+  logsService.value = "all";
   if (!selectedDeployment.value) return;
+  try {
+    const response = await deploymentsApi.getServices(selectedDeployment.value);
+    serviceNames.value = (response.data.services || []).map((s) => s.name);
+  } catch (err) {
+    console.error("Failed to fetch services:", err);
+  }
+};
+
+const fetchSystemSources = async () => {
+  try {
+    const response = await systemLogsApi.sources();
+    systemSources.value = response.data.sources || [];
+    if (!systemSources.value.some((s) => s.id === systemSource.value)) {
+      systemSource.value = systemSources.value[0]?.id || "";
+    }
+  } catch (err) {
+    console.error("Failed to fetch system log sources:", err);
+  }
+};
+
+const fetchLogs = async () => {
+  if (scope.value === "deployments" && !selectedDeployment.value) return;
+  if (scope.value === "system" && !systemSource.value) return;
   logsLoading.value = true;
   try {
-    const response = await deploymentsApi.logs(selectedDeployment.value, {
-      tail: logsTail.value ?? 100,
-      source: logSource.value,
-    });
+    const response =
+      scope.value === "system"
+        ? await systemLogsApi.logs({
+            source: systemSource.value,
+            tail: logsTail.value ?? 100,
+            deployment: activeSystemDeployment.value || undefined,
+          })
+        : await deploymentsApi.logs(selectedDeployment.value, {
+            tail: logsTail.value ?? 100,
+            source: logSource.value,
+            service: activeLogService.value,
+          });
     fetchedLogs.value = response.data.logs || "";
     fetchedRecords.value = response.data.records || [];
   } catch (err) {
@@ -104,37 +285,76 @@ const fetchLogs = async () => {
   }
 };
 
+const startFollowing = () => {
+  if (scope.value === "system") {
+    logStream.startUrl(
+      systemLogsWsUrl({
+        source: systemSource.value,
+        tail: logsTail.value ?? 100,
+        deployment: activeSystemDeployment.value || undefined,
+      }),
+    );
+    return;
+  }
+  logStream.start(selectedDeployment.value, {
+    tail: logsTail.value ?? 100,
+    source: logSource.value,
+    service: activeLogService.value,
+  });
+};
+
 const onDeploymentChange = async () => {
   logStream.stop();
   router.replace({ query: { ...route.query, deployment: selectedDeployment.value } });
-  await fetchLogSources();
+  await Promise.all([fetchLogSources(), fetchServiceNames()]);
   await fetchLogs();
 };
 
 const onSourceChange = () => {
   if (following.value) {
-    logStream.start(selectedDeployment.value, { tail: logsTail.value ?? 100, source: logSource.value });
+    startFollowing();
   } else {
     fetchLogs();
   }
 };
 
 const toggleFollow = () => {
-  if (!selectedDeployment.value) return;
+  if (scope.value === "deployments" && !selectedDeployment.value) return;
+  if (scope.value === "system" && !systemSource.value) return;
   if (following.value) {
     logStream.stop();
     fetchLogs();
     return;
   }
-  logStream.start(selectedDeployment.value, { tail: logsTail.value ?? 100, source: logSource.value });
+  startFollowing();
+};
+
+const switchScope = async (next: Scope) => {
+  if (scope.value === next) return;
+  logStream.stop();
+  scope.value = next;
+  fetchedLogs.value = "";
+  fetchedRecords.value = [];
+  router.replace({ query: { ...route.query, scope: next } });
+  if (next === "system" && !systemSources.value.length) await fetchSystemSources();
+  await fetchLogs();
 };
 
 onMounted(async () => {
   await fetchDeployments();
+  if ((route.query.scope as string) === "system") {
+    scope.value = "system";
+    await fetchSystemSources();
+    if (route.query.source && systemSources.value.some((s) => s.id === route.query.source)) {
+      systemSource.value = route.query.source as string;
+    }
+    await fetchLogs();
+    return;
+  }
   const preset = (route.query.deployment as string) || "";
   if (preset && deployments.value.some((d) => d.name === preset)) {
     selectedDeployment.value = preset;
-    await fetchLogSources();
+    await Promise.all([fetchLogSources(), fetchServiceNames()]);
     await fetchLogs();
   }
 });
@@ -148,6 +368,40 @@ onMounted(async () => {
   flex: 1;
   min-height: 0;
   height: 100%;
+  gap: var(--space-4);
+}
+
+.logs-tabs {
+  display: flex;
+  gap: var(--space-1);
+  background: var(--surface-inset);
+  padding: var(--space-1);
+  border-radius: var(--radius-sm);
+  align-self: flex-start;
+}
+
+.tab-btn {
+  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-md);
+  color: var(--text-muted);
+  cursor: pointer;
+  transition: all var(--transition-base);
+}
+
+.tab-btn:hover {
+  color: var(--text);
+}
+
+.tab-btn.active {
+  background: var(--surface-raised);
+  color: var(--text);
+  box-shadow: var(--shadow-xs);
 }
 
 .logs-panel {