From 39a3650b4e0a29c82ada1cf3a276a497f04d516d Mon Sep 17 00:00:00 2001
From: itsrubberduck <frappes_remoter.2e@icloud.com>
Date: Fri, 10 Jul 2026 16:35:34 +0200
Subject: [PATCH] refactor(live-atc): extract FlightInfoSheet, SettingsSheet,
 BugReportDialog, DebugPanel
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

DebugPanel now owns the FAB, the drawer, and useDebugSimulation, and the page
mounts it behind `v-if="debugMode"` — so on the normal cockpit path the whole
simulation machinery is never constructed. That required moving `debugMode`
out of useDebugSimulation and into the page: a flag cannot both live inside the
thing it gates and be the gate. The settings sheet is the one place it is
toggled. runFullSimulation's `debugMode = true` line went with it; nothing
called that function, so the write was already unreachable.

BugReportDialog takes the useBugReport handle as a single prop rather than a
dozen individual ones. The composable stays owned by the page because the HUD's
"Report issue" button starts the screenshot capture before the dialog exists.

SettingsSheet carries its own copy of the .pm-seg segmented-control styles and
routes the theme choice back through the page, so usePmTheme.setPreference
still persists it to the cookie.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../live-atc/cockpit/BugReportDialog.vue      | 154 ++++
 .../live-atc/cockpit/DebugPanel.vue           | 374 +++++++++
 .../live-atc/cockpit/FlightInfoSheet.vue      |  98 +++
 .../live-atc/cockpit/SettingsSheet.vue        | 190 +++++
 app/composables/useDebugSimulation.ts         |   4 -
 app/pages/live-atc.vue                        | 742 +-----------------
 6 files changed, 858 insertions(+), 704 deletions(-)
 create mode 100644 app/components/live-atc/cockpit/BugReportDialog.vue
 create mode 100644 app/components/live-atc/cockpit/DebugPanel.vue
 create mode 100644 app/components/live-atc/cockpit/FlightInfoSheet.vue
 create mode 100644 app/components/live-atc/cockpit/SettingsSheet.vue

diff --git a/app/components/live-atc/cockpit/BugReportDialog.vue b/app/components/live-atc/cockpit/BugReportDialog.vue
new file mode 100644
index 0000000..e6dcabe
--- /dev/null
+++ b/app/components/live-atc/cockpit/BugReportDialog.vue
@@ -0,0 +1,154 @@
+<script setup lang="ts">
+import type { useBugReport } from '~/composables/useBugReport'
+
+/**
+ * The composable stays owned by the page: the HUD's "Report issue" button needs
+ * `openBugReport` and `bugReportCapturing` before this dialog ever renders. So it
+ * is handed over whole rather than unpacked into a dozen props.
+ */
+const props = defineProps<{
+  bug: ReturnType<typeof useBugReport>
+  theme: 'light' | 'dark'
+}>()
+
+const {
+  showBugReportDialog,
+  bugReportComment,
+  bugReportContact,
+  bugReportScreenshot,
+  bugReportArrows,
+  bugReportLoading,
+  bugReportError,
+  bugReportSuccess,
+  bugReportCanvasRef,
+  bugReportImgRef,
+  setupAnnotationCanvas,
+  onCanvasMouseDown,
+  onCanvasMouseMove,
+  onCanvasMouseUp,
+  onCanvasMouseLeave,
+  undoLastArrow,
+  submitBugReport,
+} = props.bug
+</script>
+
+<template>
+  <v-dialog v-model="showBugReportDialog" max-width="680" scrollable :content-class="theme === 'light' ? 'pm-dialog-light' : ''">
+    <v-card :class="theme === 'light' ? 'bg-white border border-black/10 text-[#0f1420]' : 'bg-[#0b101d] border border-white/10 text-white'">
+      <v-card-title class="flex items-center gap-2 text-base font-semibold pt-4 px-5">
+        <v-icon icon="mdi-bug-outline" color="#f87171" size="20" />
+        Fehler melden
+      </v-card-title>
+      <v-card-text class="space-y-4 px-5 pb-2">
+        <div v-if="bugReportSuccess" class="rounded-xl bg-emerald-500/10 border border-emerald-400/30 p-4 text-center">
+          <v-icon icon="mdi-check-circle-outline" color="emerald" size="32" class="mb-2" />
+          <p class="text-emerald-300 font-semibold">Danke! Bug Report wurde gesendet.</p>
+        </div>
+        <template v-else>
+          <div v-if="bugReportScreenshot" class="space-y-2">
+            <div class="flex items-start justify-between gap-3">
+              <div class="flex items-start gap-2">
+                <v-icon size="18" color="red" class="mt-0.5">mdi-gesture-tap-button</v-icon>
+                <div>
+                  <p class="text-sm font-semibold text-white/90">Wo ist der Fehler? Zeichne einen Pfeil hin.</p>
+                  <p class="text-xs text-white/55 leading-snug">
+                    Klicke auf die Stelle und ziehe mit gedrückter Maustaste (am Handy: mit dem Finger)
+                    zur Problemstelle. Du kannst mehrere Pfeile setzen.
+                  </p>
+                </div>
+              </div>
+              <v-btn
+                v-if="bugReportArrows.length > 0"
+                size="x-small"
+                variant="text"
+                color="red"
+                prepend-icon="mdi-undo"
+                class="shrink-0"
+                @click="undoLastArrow"
+              >
+                Pfeil zurück
+              </v-btn>
+            </div>
+            <div class="relative rounded-xl overflow-hidden border border-white/10" style="line-height:0">
+              <img
+                ref="bugReportImgRef"
+                :src="bugReportScreenshot"
+                class="w-full block"
+                alt="Screenshot"
+                @load="setupAnnotationCanvas"
+              />
+              <canvas
+                ref="bugReportCanvasRef"
+                class="absolute inset-0 w-full h-full cursor-crosshair select-none"
+                style="touch-action:none"
+                @pointerdown="onCanvasMouseDown"
+                @pointermove="onCanvasMouseMove"
+                @pointerup="onCanvasMouseUp"
+                @pointerleave="onCanvasMouseLeave"
+                @pointercancel="onCanvasMouseLeave"
+              />
+              <span
+                v-if="bugReportArrows.length === 0"
+                class="pointer-events-none absolute inset-0 flex items-center justify-center text-center px-4"
+              >
+                <span class="rounded-full bg-black/55 px-3 py-1 text-xs text-white/85 backdrop-blur">
+                  ✏️ Hier ziehen, um einen Pfeil zur Fehlerstelle zu zeichnen
+                </span>
+              </span>
+            </div>
+          </div>
+          <div v-else class="rounded-xl border border-white/10 bg-white/5 p-4 text-center text-sm text-white/50">
+            Kein Screenshot verfügbar
+          </div>
+
+          <v-textarea
+            v-model="bugReportComment"
+            label="Was ist kaputt? Was sollte stattdessen passieren?"
+            variant="outlined"
+            color="red"
+            rows="3"
+            auto-grow
+            maxlength="2000"
+            counter="2000"
+            hide-details="auto"
+            :disabled="bugReportLoading"
+          />
+
+          <v-text-field
+            v-model="bugReportContact"
+            label="Dein Name / Kontakt"
+            variant="outlined"
+            color="red"
+            density="comfortable"
+            hide-details
+            :disabled="bugReportLoading"
+          />
+
+          <v-alert
+            v-if="bugReportError"
+            type="error"
+            density="compact"
+            variant="tonal"
+            class="bg-red-500/10 text-red-200"
+          >
+            {{ bugReportError }}
+          </v-alert>
+        </template>
+      </v-card-text>
+      <v-card-actions v-if="!bugReportSuccess" class="justify-end gap-2 px-5 pb-4">
+        <v-btn variant="text" color="grey" :disabled="bugReportLoading" @click="showBugReportDialog = false">
+          Abbrechen
+        </v-btn>
+        <v-btn
+          color="red"
+          variant="flat"
+          :loading="bugReportLoading"
+          :disabled="!bugReportComment.trim()"
+          @click="submitBugReport"
+        >
+          Bug melden
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
diff --git a/app/components/live-atc/cockpit/DebugPanel.vue b/app/components/live-atc/cockpit/DebugPanel.vue
new file mode 100644
index 0000000..e486b26
--- /dev/null
+++ b/app/components/live-atc/cockpit/DebugPanel.vue
@@ -0,0 +1,374 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import type useCommunicationsEngine from '../../../../shared/utils/communicationsEngine'
+import { useDebugSimulation } from '~/composables/useDebugSimulation'
+
+/**
+ * Mounted only while `debugMode` is on — the parent gates with `v-if`, so none of
+ * the simulation machinery below exists on the normal cockpit path.
+ */
+const props = defineProps<{
+  engine: ReturnType<typeof useCommunicationsEngine>
+  sessionLabel: string
+  setLastTransmission: (text: string) => void
+  clearLog: () => void
+  startDemoFlight: () => void
+}>()
+
+const showDebugDrawer = ref(false)
+
+const forceMove = props.engine.moveTo
+
+const {
+  simulationRunning,
+  simulationTrace,
+  simulationError,
+  simulationStepCount,
+  completedPilotSteps,
+  timelineSteps,
+  timelineUsedFallback,
+  traceAutoSelection,
+  traceFallback,
+  debugState,
+  debugNextStates,
+  describeElimination,
+  formatTracePayload,
+} = useDebugSimulation(props.engine, {
+  setLastTransmission: props.setLastTransmission,
+  clearLog: props.clearLog,
+  startDemoFlight: props.startDemoFlight,
+})
+</script>
+
+<template>
+  <!-- Debug FAB (bottom-left) -->
+  <button
+      type="button"
+      class="debug-fab"
+      :class="{ 'is-open': showDebugDrawer }"
+      :aria-pressed="showDebugDrawer ? 'true' : 'false'"
+      :aria-label="showDebugDrawer ? 'Close debug panel' : 'Open debug panel'"
+      title="Debug panel"
+      @click="showDebugDrawer = !showDebugDrawer"
+  >
+    <v-icon size="22">{{ showDebugDrawer ? 'mdi-close' : 'mdi-bug' }}</v-icon>
+  </button>
+
+  <!-- Debug drawer (left, non-blocking) -->
+  <Transition name="debug-drawer">
+    <aside
+        v-if="showDebugDrawer"
+        class="debug-drawer"
+        role="complementary"
+        aria-label="Debug panel"
+    >
+      <header class="debug-drawer-head">
+        <div class="flex items-center gap-2">
+          <v-icon size="18" color="orange">mdi-bug</v-icon>
+          <h3 class="text-base font-semibold">Debug</h3>
+          <v-chip size="x-small" color="grey" variant="outlined">LLM</v-chip>
+        </div>
+        <button
+            type="button"
+            class="debug-drawer-close"
+            aria-label="Close debug panel"
+            @click="showDebugDrawer = false"
+        >
+          <v-icon size="18">mdi-close</v-icon>
+        </button>
+      </header>
+
+      <div class="debug-drawer-body">
+        <v-card
+            v-if="simulationRunning || simulationTrace.length"
+            class="bg-white/5 border border-white/10 mb-3"
+        >
+          <v-card-text class="space-y-3">
+            <div class="flex items-center justify-between">
+              <div class="flex items-center gap-2">
+                <h4 class="text-sm font-semibold">Simulation Trace</h4>
+                <v-chip size="x-small" color="cyan" variant="outlined">
+                  {{ completedPilotSteps }} / {{ simulationStepCount }}
+                </v-chip>
+              </div>
+              <v-chip size="x-small" :color="simulationRunning ? 'orange' : 'grey'" variant="tonal">
+                {{ simulationRunning ? 'Running' : 'Ready' }}
+              </v-chip>
+            </div>
+
+            <v-alert
+                v-if="simulationError"
+                type="warning"
+                variant="tonal"
+                density="compact"
+                class="bg-amber-500/10 text-amber-200"
+            >
+              {{ simulationError }}
+            </v-alert>
+
+            <div
+                v-if="simulationRunning && simulationTrace.length === 0"
+                class="text-xs text-white/60"
+            >
+              Simulation initializing...
+            </div>
+
+            <div v-else class="space-y-2 max-h-60 overflow-y-auto pr-1">
+              <div
+                  v-for="(entry, idx) in simulationTrace"
+                  :key="idx"
+                  class="rounded-xl border border-white/10 bg-black/40 p-2 space-y-1"
+              >
+                <div class="flex items-center justify-between text-[10px] uppercase tracking-[0.25em] text-white/40">
+                  <span>{{ entry.label }}</span>
+                  <span class="text-white/60">{{ entry.id }}</span>
+                </div>
+                <div v-if="entry.kind === 'pilot' || entry.kind === 'atc'" class="space-y-1">
+                  <p class="text-xs font-mono text-white">{{ entry.payload?.text }}</p>
+                  <p class="text-[10px] text-white/50 font-mono">{{ entry.payload?.normalized }}</p>
+                </div>
+                <pre
+                    v-else-if="entry.payload"
+                    class="text-[10px] text-white/60 font-mono whitespace-pre-wrap"
+                >{{ formatTracePayload(entry.payload) }}</pre>
+              </div>
+            </div>
+          </v-card-text>
+        </v-card>
+
+        <v-card class="bg-white/5 border border-white/10">
+          <v-card-text class="space-y-3">
+            <div class="flex items-center justify-between">
+              <h4 class="text-sm font-semibold">Flow Insights</h4>
+            </div>
+
+            <div class="flex items-center justify-between text-[10px] text-white/50">
+              <span>Session: {{ sessionLabel }}</span>
+              <div class="flex flex-wrap gap-1" v-if="traceAutoSelection || (traceFallback?.used) || timelineUsedFallback">
+                <v-chip v-if="traceAutoSelection" size="x-small" color="cyan" variant="outlined">
+                  Auto: {{ traceAutoSelection.id }}
+                </v-chip>
+                <v-chip v-if="timelineUsedFallback" size="x-small" color="orange" variant="tonal">
+                  Fallback candidates
+                </v-chip>
+                <v-chip v-if="traceFallback?.used" size="x-small" color="red" variant="tonal">
+                  Fallback: {{ traceFallback.reason || 'triggered' }}
+                </v-chip>
+              </div>
+            </div>
+
+            <div class="space-y-2 rounded-xl border border-white/10 bg-black/30 p-2">
+              <p class="text-[10px] uppercase tracking-[0.25em] text-white/40">Current node</p>
+              <p class="font-mono text-xs text-white">{{ debugState?.id || '—' }}</p>
+              <p class="text-[10px] text-white/50">
+                {{ debugState ? `${debugState.role} • ${debugState.phase}` : 'N/A' }}
+                <span v-if="debugState?.frequencyName" class="ml-1 text-white/40">({{ debugState.frequencyName }})</span>
+              </p>
+              <p v-if="debugState?.sayPlain" class="text-[11px] text-white/70">
+                Auto (LLM): <span class="font-mono text-white">{{ debugState.sayPlain }}</span>
+              </p>
+              <p v-if="debugState?.sayNormalized" class="text-[10px] text-white/40">
+                Radio: {{ debugState.sayNormalized }}
+              </p>
+            </div>
+
+            <div>
+              <p class="text-[10px] uppercase tracking-[0.25em] text-white/40 mb-2">Upcoming decisions</p>
+              <div v-if="debugNextStates.length" class="space-y-2">
+                <div
+                    v-for="state in debugNextStates"
+                    :key="state.id"
+                    class="space-y-1 rounded-xl border border-white/10 bg-black/30 p-2"
+                >
+                  <div class="flex items-start justify-between gap-2">
+                    <div>
+                      <p class="font-mono text-xs text-white">{{ state.id }}</p>
+                      <p class="text-[10px] text-white/50">
+                        {{ state.role || '—' }} • {{ state.phase || '—' }}
+                        <span v-if="state.frequencyName" class="ml-1 text-white/40">({{ state.frequencyName }})</span>
+                      </p>
+                    </div>
+                    <v-chip
+                        size="x-small"
+                        color="cyan"
+                        variant="outlined"
+                        class="cursor-pointer"
+                        @click="forceMove(state.id)"
+                    >
+                      Jump
+                    </v-chip>
+                  </div>
+                  <p v-if="state.sayPlain" class="text-[11px] text-white/70">
+                    ATC: <span class="font-mono text-white">{{ state.sayPlain }}</span>
+                  </p>
+                  <p v-if="state.sayNormalized" class="text-[10px] text-white/40">
+                    Radio: {{ state.sayNormalized }}
+                  </p>
+                </div>
+              </div>
+              <p v-else class="text-[10px] text-white/50">No further decisions available.</p>
+            </div>
+
+            <div class="space-y-2 rounded-xl border border-white/10 bg-black/30 p-2">
+              <p class="text-[10px] uppercase tracking-[0.25em] text-white/40">Decision timeline</p>
+              <div v-if="timelineSteps.length" class="space-y-2">
+                <div
+                  v-for="(step, index) in timelineSteps"
+                  :key="`${step.stage}-${index}`"
+                  class="space-y-2 rounded-lg border border-white/10 bg-black/40 p-2"
+                >
+                  <div class="flex items-start justify-between gap-2">
+                    <div>
+                      <p class="font-semibold text-xs text-white">{{ step.label }}</p>
+                      <p class="text-[10px] text-white/50 uppercase tracking-[0.2em]">{{ step.stage }}</p>
+                    </div>
+                    <v-chip size="x-small" color="cyan" variant="outlined">
+                      {{ step.candidates.length }} cand.
+                    </v-chip>
+                  </div>
+                  <p v-if="step.note" class="text-[10px] text-white/50">{{ step.note }}</p>
+                  <div v-if="step.candidates.length" class="space-y-1">
+                    <div
+                      v-for="candidate in step.candidates"
+                      :key="candidate.id"
+                      class="rounded-md border border-white/10 bg-black/30 p-1.5"
+                    >
+                      <div class="flex items-center justify-between gap-2">
+                        <span class="font-mono text-[11px] text-white">{{ candidate.id }}</span>
+                        <span class="text-[10px] text-white/50">{{ candidate.flow || 'current' }}</span>
+                      </div>
+                      <p v-if="candidate.summary" class="text-[10px] text-white/60 mt-0.5">{{ candidate.summary }}</p>
+                    </div>
+                  </div>
+                  <div v-if="step.eliminated?.length" class="space-y-1">
+                    <p class="text-[10px] text-red-200/80 uppercase tracking-[0.25em]">Eliminated</p>
+                    <div
+                      v-for="elim in step.eliminated"
+                      :key="`${step.stage}-${elim.candidate.id}`"
+                      class="space-y-1 rounded-md border border-red-400/30 bg-red-500/10 p-1.5 text-[10px] text-red-100"
+                    >
+                      <div class="flex items-center justify-between gap-2">
+                        <span class="font-mono text-[11px]">{{ elim.candidate.id }}</span>
+                        <span class="text-[10px] text-red-200/80">{{ elim.kind }}</span>
+                      </div>
+                      <p class="text-[10px] text-red-100/80">{{ elim.reason }}</p>
+                      <p v-if="describeElimination(elim)" class="text-[10px] text-red-100/70">{{ describeElimination(elim) }}</p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <p v-else class="text-[10px] text-white/50">No decision timeline available yet.</p>
+            </div>
+          </v-card-text>
+        </v-card>
+      </div>
+    </aside>
+  </Transition>
+</template>
+
+<style scoped>
+.debug-fab {
+  position: fixed;
+  left: 16px;
+  /* Clear the mobile bottom nav (~64px) by default; desktop overrides below. */
+  bottom: calc(env(safe-area-inset-bottom) + 78px);
+  z-index: 60;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  border-radius: 16px;
+  border: 1px solid rgba(249, 115, 22, 0.45);
+  background: rgba(249, 115, 22, 0.16);
+  color: #fdba74;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
+  cursor: pointer;
+  transition: background 160ms ease, color 160ms ease, transform 160ms ease, border-color 160ms ease;
+}
+.debug-fab:hover {
+  background: rgba(249, 115, 22, 0.26);
+  color: #fed7aa;
+  transform: translateY(-1px);
+}
+.debug-fab.is-open {
+  background: rgba(249, 115, 22, 0.35);
+  border-color: rgba(249, 115, 22, 0.7);
+  color: #fff;
+}
+
+.debug-drawer {
+  position: fixed;
+  top: 72px;
+  left: 12px;
+  bottom: calc(env(safe-area-inset-bottom) + 76px);
+  width: min(420px, calc(100vw - 24px));
+  z-index: 55;
+  display: flex;
+  flex-direction: column;
+  border-radius: 18px;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  background: rgba(8, 13, 24, 0.96);
+  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(14px);
+  pointer-events: auto;
+}
+.debug-drawer-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 12px 14px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+}
+.debug-drawer-close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 8px;
+  color: rgba(255, 255, 255, 0.6);
+  background: transparent;
+  transition: background 120ms ease, color 120ms ease;
+}
+.debug-drawer-close:hover {
+  background: rgba(255, 255, 255, 0.08);
+  color: #fff;
+}
+.debug-drawer-body {
+  padding: 12px 14px;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.debug-drawer-enter-active,
+.debug-drawer-leave-active {
+  transition: transform 220ms ease, opacity 220ms ease;
+}
+.debug-drawer-enter-from,
+.debug-drawer-leave-to {
+  transform: translateX(-12px);
+  opacity: 0;
+}
+
+/* No bottom nav on desktop: drop the FAB back down to the corner. */
+@media (min-width: 1024px) {
+  .debug-fab {
+    bottom: calc(env(safe-area-inset-bottom) + 16px);
+  }
+  .debug-drawer {
+    bottom: calc(env(safe-area-inset-bottom) + 16px);
+  }
+}
+
+@media (max-width: 640px) {
+  .debug-drawer {
+    top: 64px;
+    left: 8px;
+    right: 8px;
+    width: auto;
+    bottom: calc(env(safe-area-inset-bottom) + 84px);
+  }
+}
+</style>
diff --git a/app/components/live-atc/cockpit/FlightInfoSheet.vue b/app/components/live-atc/cockpit/FlightInfoSheet.vue
new file mode 100644
index 0000000..1aae952
--- /dev/null
+++ b/app/components/live-atc/cockpit/FlightInfoSheet.vue
@@ -0,0 +1,98 @@
+<script setup lang="ts">
+defineProps<{
+  flightContext: { callsign?: string, dep?: string, dest?: string }
+  flags: Record<string, any>
+  vars: Record<string, any>
+  logLength: number
+  theme: 'light' | 'dark'
+}>()
+
+const emit = defineEmits<{ (e: 'back-to-setup'): void }>()
+
+const open = defineModel<boolean>({ required: true })
+</script>
+
+<template>
+  <v-dialog v-model="open" max-width="520" :content-class="theme === 'light' ? 'pm-dialog-light' : ''">
+    <v-card :class="theme === 'light' ? 'bg-white border border-black/10 text-[#0f1420]' : 'bg-[#0b101d] border border-white/10 text-white'">
+      <v-card-title class="flex items-center justify-between gap-2 text-base font-semibold">
+        <div class="flex items-center gap-2">
+          <v-icon icon="mdi-airplane" size="20" color="cyan" />
+          Flight info
+        </div>
+        <v-btn icon="mdi-close" variant="text" size="small" @click="open = false" />
+      </v-card-title>
+      <v-card-text class="space-y-4">
+        <div class="flex items-start justify-between gap-3">
+          <div>
+            <p class="text-xs uppercase tracking-[0.3em] text-white/50">Active flight</p>
+            <h2 class="text-2xl font-semibold">{{ flightContext.callsign || 'N/A' }}</h2>
+            <p class="text-sm text-white/70">{{ flightContext.dep }} → {{ flightContext.dest }}</p>
+          </div>
+          <div class="text-right space-y-1">
+            <v-chip
+                :color="flags.in_air ? 'green' : 'grey'"
+                variant="flat"
+                size="small"
+            >
+              {{ flags.in_air ? 'IN-AIR' : 'GROUND' }}
+            </v-chip>
+            <div class="flex gap-1 justify-end">
+              <v-chip size="x-small" :color="flags.emergency_active ? 'red' : 'grey'" variant="outlined">
+                EMERG
+              </v-chip>
+              <v-chip size="x-small" color="cyan" variant="outlined">
+                {{ flags.current_unit }}
+              </v-chip>
+            </div>
+          </div>
+        </div>
+
+        <div class="grid grid-cols-2 sm:grid-cols-4 gap-3 text-sm">
+          <div>
+            <p class="text-xs text-white/40 uppercase tracking-wider">Stand</p>
+            <p class="text-white/80 font-mono">{{ vars.stand }}</p>
+          </div>
+          <div>
+            <p class="text-xs text-white/40 uppercase tracking-wider">Runway</p>
+            <p class="text-white/80 font-mono">{{ vars.runway }}</p>
+          </div>
+          <div>
+            <p class="text-xs text-white/40 uppercase tracking-wider">Squawk</p>
+            <p class="text-white/80 font-mono">{{ vars.squawk }}</p>
+          </div>
+          <div>
+            <p class="text-xs text-white/40 uppercase tracking-wider">SID</p>
+            <p class="text-white/80 font-mono">{{ vars.sid }}</p>
+          </div>
+        </div>
+
+        <div class="flex justify-between pt-2 border-t border-white/10">
+          <div class="text-center">
+            <p class="text-lg font-semibold text-cyan-300">{{ flags.radio_checks_done || 0 }}</p>
+            <p class="text-xs text-white/40 uppercase tracking-wider">Radio Checks</p>
+          </div>
+          <div class="text-center">
+            <p class="text-lg font-semibold text-orange-300">{{ flags.off_schema_count || 0 }}</p>
+            <p class="text-xs text-white/40 uppercase tracking-wider">Off-Schema</p>
+          </div>
+          <div class="text-center">
+            <p class="text-lg font-semibold text-white">{{ logLength }}</p>
+            <p class="text-xs text-white/40 uppercase tracking-wider">Transmissions</p>
+          </div>
+        </div>
+
+        <v-btn
+            block
+            color="grey"
+            variant="outlined"
+            size="small"
+            prepend-icon="mdi-airplane-off"
+            @click="emit('back-to-setup')"
+        >
+          Select new flight
+        </v-btn>
+      </v-card-text>
+    </v-card>
+  </v-dialog>
+</template>
diff --git a/app/components/live-atc/cockpit/SettingsSheet.vue b/app/components/live-atc/cockpit/SettingsSheet.vue
new file mode 100644
index 0000000..8260d42
--- /dev/null
+++ b/app/components/live-atc/cockpit/SettingsSheet.vue
@@ -0,0 +1,190 @@
+<script setup lang="ts">
+import type { PmThemePreference } from '~/composables/usePmTheme'
+
+defineProps<{
+  theme: 'light' | 'dark'
+  /** Raw preference (may be 'system'), distinct from the resolved `theme`. */
+  themePreference: PmThemePreference
+  speechSpeedLabel: string
+}>()
+
+/** Routed through the parent so usePmTheme's setPreference still persists it. */
+const emit = defineEmits<{ (e: 'set-theme', preference: PmThemePreference): void }>()
+
+const open = defineModel<boolean>({ required: true })
+const speechSpeed = defineModel<number>('speechSpeed', { required: true })
+const radioEffectsEnabled = defineModel<boolean>('radioEffectsEnabled', { required: true })
+const readbackEnabled = defineModel<boolean>('readbackEnabled', { required: true })
+const learningMode = defineModel<boolean>('learningMode', { required: true })
+const debugMode = defineModel<boolean>('debugMode', { required: true })
+const prerecEnabled = defineModel<boolean>('prerecEnabled', { required: true })
+const prerecSeconds = defineModel<number>('prerecSeconds', { required: true })
+</script>
+
+<template>
+  <v-dialog v-model="open" max-width="560" :content-class="theme === 'light' ? 'pm-dialog-light' : ''">
+    <v-card :class="theme === 'light' ? 'bg-white border border-black/10 text-[#0f1420]' : 'bg-[#0b101d] border border-white/10 text-white'">
+      <v-card-title class="flex items-center justify-between gap-2 text-base font-semibold">
+        <div class="flex items-center gap-2">
+          <v-icon icon="mdi-cog" size="20" color="cyan" />
+          Settings
+        </div>
+        <v-btn icon="mdi-close" variant="text" size="small" @click="open = false" />
+      </v-card-title>
+      <v-card-text class="space-y-4">
+        <div>
+          <label class="text-xs uppercase tracking-[0.3em] text-white/40 mb-2 block">Theme</label>
+          <div class="pm-seg">
+            <button
+                type="button"
+                class="pm-seg-btn"
+                :class="{ 'is-active': themePreference === 'dark' }"
+                @click="emit('set-theme', 'dark')"
+            >
+              <v-icon size="16">mdi-weather-night</v-icon>
+              Dark
+            </button>
+            <button
+                type="button"
+                class="pm-seg-btn"
+                :class="{ 'is-active': themePreference === 'light' }"
+                @click="emit('set-theme', 'light')"
+            >
+              <v-icon size="16">mdi-white-balance-sunny</v-icon>
+              Light
+            </button>
+            <button
+                type="button"
+                class="pm-seg-btn"
+                :class="{ 'is-active': themePreference === 'system' }"
+                @click="emit('set-theme', 'system')"
+            >
+              <v-icon size="16">mdi-theme-light-dark</v-icon>
+              System
+            </button>
+          </div>
+        </div>
+
+        <div>
+          <div class="flex items-center justify-between mb-2">
+            <label class="text-xs uppercase tracking-[0.3em] text-white/40">
+              Speech speed
+            </label>
+            <span class="text-xs font-mono text-white/60">{{ speechSpeedLabel }}</span>
+          </div>
+          <v-slider
+              v-model="speechSpeed"
+              :min="0.7"
+              :max="1.3"
+              :step="0.05"
+              color="cyan"
+              thumb-label
+              hide-details
+          />
+        </div>
+
+        <div class="grid gap-3 sm:grid-cols-2">
+          <v-switch
+              v-model="radioEffectsEnabled"
+              color="cyan"
+              inset
+              label="Radio effects"
+              hide-details
+          />
+          <v-switch
+              v-model="readbackEnabled"
+              color="cyan"
+              inset
+              label="Readback voice"
+              hide-details
+          />
+          <v-switch
+              v-model="learningMode"
+              color="cyan"
+              inset
+              label="Learning aid (expected comm)"
+              hide-details
+          />
+          <!-- The single gate for all developer tooling; the debug panel is not
+               even mounted while this is off. -->
+          <v-switch
+              v-model="debugMode"
+              color="orange"
+              inset
+              label="Developer debug"
+              hide-details
+          />
+        </div>
+
+        <div class="pt-2 border-t border-white/10 space-y-3">
+          <div>
+            <p class="text-xs uppercase tracking-[0.3em] text-white/40">Voice input</p>
+            <p class="text-[11px] text-white/50 mt-1">
+              Pre-recording keeps the mic listening in the background so the start of your transmission isn't clipped.
+            </p>
+          </div>
+          <v-switch
+              v-model="prerecEnabled"
+              color="cyan"
+              inset
+              label="Pre-recording (rolling buffer)"
+              hide-details
+          />
+          <div :class="{ 'opacity-50 pointer-events-none': !prerecEnabled }">
+            <div class="flex items-center justify-between mb-2">
+              <label class="text-xs uppercase tracking-[0.3em] text-white/40">
+                Pre-recording lead-in
+              </label>
+              <span class="text-xs font-mono text-white/60">{{ prerecSeconds.toFixed(1) }}s</span>
+            </div>
+            <v-slider
+                v-model="prerecSeconds"
+                :min="0.3"
+                :max="2.5"
+                :step="0.1"
+                color="cyan"
+                thumb-label
+                hide-details
+                :disabled="!prerecEnabled"
+            />
+          </div>
+        </div>
+      </v-card-text>
+    </v-card>
+  </v-dialog>
+</template>
+
+<style scoped>
+/* Mirrors the page's segmented control so the sheet doesn't depend on
+   live-atc.vue's scoped styles reaching a teleported dialog. */
+.pm-seg {
+  display: flex;
+  gap: 4px;
+  padding: 4px;
+  border-radius: 16px;
+  border: 1px solid var(--border);
+  background: color-mix(in srgb, var(--text) 4%, transparent);
+}
+.pm-seg-btn {
+  flex: 1 1 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 11px 12px;
+  border-radius: 12px;
+  font-size: 14px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  color: var(--t3);
+  transition: color 130ms ease, background 130ms ease;
+  -webkit-tap-highlight-color: transparent;
+}
+.pm-seg-btn:hover {
+  color: color-mix(in srgb, var(--text) 85%, transparent);
+}
+.pm-seg-btn.is-active {
+  color: #050910;
+  background: #22d3ee;
+}
+</style>
diff --git a/app/composables/useDebugSimulation.ts b/app/composables/useDebugSimulation.ts
index 62635b3..9ec17da 100644
--- a/app/composables/useDebugSimulation.ts
+++ b/app/composables/useDebugSimulation.ts
@@ -25,8 +25,6 @@ export function useDebugSimulation(
   } = engine
   const { setLastTransmission, clearLog, startDemoFlight } = deps
 
-  const debugMode = ref(true)
-
   const simulationRunning = ref(false)
   const simulationTrace = ref<SimulationTraceEntry[]>([])
   const simulationError = ref('')
@@ -297,7 +295,6 @@ export function useDebugSimulation(
     simulationTrace.value = []
     simulationError.value = ''
     recordedAtcStates.clear()
-    debugMode.value = true
 
     try {
       simulationTrace.value.push({
@@ -418,7 +415,6 @@ export function useDebugSimulation(
   }
 
   return {
-    debugMode,
     simulationRunning,
     simulationTrace,
     simulationError,
diff --git a/app/pages/live-atc.vue b/app/pages/live-atc.vue
index 328c00c..80b7475 100644
--- a/app/pages/live-atc.vue
+++ b/app/pages/live-atc.vue
@@ -488,564 +488,41 @@
         </button>
       </nav>
 
-      <!-- Debug FAB (bottom-left) -->
-      <button
+      <DebugPanel
           v-if="debugMode"
-          type="button"
-          class="debug-fab"
-          :class="{ 'is-open': showDebugDrawer }"
-          :aria-pressed="showDebugDrawer ? 'true' : 'false'"
-          :aria-label="showDebugDrawer ? 'Close debug panel' : 'Open debug panel'"
-          title="Debug panel"
-          @click="showDebugDrawer = !showDebugDrawer"
-      >
-        <v-icon size="22">{{ showDebugDrawer ? 'mdi-close' : 'mdi-bug' }}</v-icon>
-      </button>
+          :engine="engine"
+          :session-label="sessionLabel"
+          :set-last-transmission="setLastTransmission"
+          :clear-log="clearLog"
+          :start-demo-flight="startDemoFlight"
+      />
 
-      <!-- Debug drawer (left, non-blocking) -->
-      <Transition name="debug-drawer">
-        <aside
-            v-if="showDebugDrawer && debugMode"
-            class="debug-drawer"
-            role="complementary"
-            aria-label="Debug panel"
-        >
-          <header class="debug-drawer-head">
-            <div class="flex items-center gap-2">
-              <v-icon size="18" color="orange">mdi-bug</v-icon>
-              <h3 class="text-base font-semibold">Debug</h3>
-              <v-chip size="x-small" color="grey" variant="outlined">LLM</v-chip>
-            </div>
-            <button
-                type="button"
-                class="debug-drawer-close"
-                aria-label="Close debug panel"
-                @click="showDebugDrawer = false"
-            >
-              <v-icon size="18">mdi-close</v-icon>
-            </button>
-          </header>
+      <FlightInfoSheet
+          v-model="showFlightSheet"
+          :flight-context="flightContext"
+          :flags="flags"
+          :vars="vars"
+          :log-length="log.length"
+          :theme="pmTheme"
+          @back-to-setup="backToSetup"
+      />
 
-          <div class="debug-drawer-body">
-            <v-card
-                v-if="simulationRunning || simulationTrace.length"
-                class="bg-white/5 border border-white/10 mb-3"
-            >
-              <v-card-text class="space-y-3">
-                <div class="flex items-center justify-between">
-                  <div class="flex items-center gap-2">
-                    <h4 class="text-sm font-semibold">Simulation Trace</h4>
-                    <v-chip size="x-small" color="cyan" variant="outlined">
-                      {{ completedPilotSteps }} / {{ simulationStepCount }}
-                    </v-chip>
-                  </div>
-                  <v-chip size="x-small" :color="simulationRunning ? 'orange' : 'grey'" variant="tonal">
-                    {{ simulationRunning ? 'Running' : 'Ready' }}
-                  </v-chip>
-                </div>
+      <SettingsSheet
+          v-model="showSettingsSheet"
+          :theme="pmTheme"
+          :theme-preference="pmThemePreference"
+          :speech-speed-label="speechSpeedLabel"
+          v-model:speech-speed="speechSpeed"
+          v-model:radio-effects-enabled="radioEffectsEnabled"
+          v-model:readback-enabled="readbackEnabled"
+          v-model:learning-mode="learningMode"
+          v-model:debug-mode="debugMode"
+          v-model:prerec-enabled="prerecEnabled"
+          v-model:prerec-seconds="prerecSeconds"
+          @set-theme="setPmTheme"
+      />
 
-                <v-alert
-                    v-if="simulationError"
-                    type="warning"
-                    variant="tonal"
-                    density="compact"
-                    class="bg-amber-500/10 text-amber-200"
-                >
-                  {{ simulationError }}
-                </v-alert>
-
-                <div
-                    v-if="simulationRunning && simulationTrace.length === 0"
-                    class="text-xs text-white/60"
-                >
-                  Simulation initializing...
-                </div>
-
-                <div v-else class="space-y-2 max-h-60 overflow-y-auto pr-1">
-                  <div
-                      v-for="(entry, idx) in simulationTrace"
-                      :key="idx"
-                      class="rounded-xl border border-white/10 bg-black/40 p-2 space-y-1"
-                  >
-                    <div class="flex items-center justify-between text-[10px] uppercase tracking-[0.25em] text-white/40">
-                      <span>{{ entry.label }}</span>
-                      <span class="text-white/60">{{ entry.id }}</span>
-                    </div>
-                    <div v-if="entry.kind === 'pilot' || entry.kind === 'atc'" class="space-y-1">
-                      <p class="text-xs font-mono text-white">{{ entry.payload?.text }}</p>
-                      <p class="text-[10px] text-white/50 font-mono">{{ entry.payload?.normalized }}</p>
-                    </div>
-                    <pre
-                        v-else-if="entry.payload"
-                        class="text-[10px] text-white/60 font-mono whitespace-pre-wrap"
-                    >{{ formatTracePayload(entry.payload) }}</pre>
-                  </div>
-                </div>
-              </v-card-text>
-            </v-card>
-
-            <v-card class="bg-white/5 border border-white/10">
-              <v-card-text class="space-y-3">
-                <div class="flex items-center justify-between">
-                  <h4 class="text-sm font-semibold">Flow Insights</h4>
-                </div>
-
-                <div class="flex items-center justify-between text-[10px] text-white/50">
-                  <span>Session: {{ sessionLabel }}</span>
-                  <div class="flex flex-wrap gap-1" v-if="traceAutoSelection || (traceFallback?.used) || timelineUsedFallback">
-                    <v-chip v-if="traceAutoSelection" size="x-small" color="cyan" variant="outlined">
-                      Auto: {{ traceAutoSelection.id }}
-                    </v-chip>
-                    <v-chip v-if="timelineUsedFallback" size="x-small" color="orange" variant="tonal">
-                      Fallback candidates
-                    </v-chip>
-                    <v-chip v-if="traceFallback?.used" size="x-small" color="red" variant="tonal">
-                      Fallback: {{ traceFallback.reason || 'triggered' }}
-                    </v-chip>
-                  </div>
-                </div>
-
-                <div class="space-y-2 rounded-xl border border-white/10 bg-black/30 p-2">
-                  <p class="text-[10px] uppercase tracking-[0.25em] text-white/40">Current node</p>
-                  <p class="font-mono text-xs text-white">{{ debugState?.id || '—' }}</p>
-                  <p class="text-[10px] text-white/50">
-                    {{ debugState ? `${debugState.role} • ${debugState.phase}` : 'N/A' }}
-                    <span v-if="debugState?.frequencyName" class="ml-1 text-white/40">({{ debugState.frequencyName }})</span>
-                  </p>
-                  <p v-if="debugState?.sayPlain" class="text-[11px] text-white/70">
-                    Auto (LLM): <span class="font-mono text-white">{{ debugState.sayPlain }}</span>
-                  </p>
-                  <p v-if="debugState?.sayNormalized" class="text-[10px] text-white/40">
-                    Radio: {{ debugState.sayNormalized }}
-                  </p>
-                </div>
-
-                <div>
-                  <p class="text-[10px] uppercase tracking-[0.25em] text-white/40 mb-2">Upcoming decisions</p>
-                  <div v-if="debugNextStates.length" class="space-y-2">
-                    <div
-                        v-for="state in debugNextStates"
-                        :key="state.id"
-                        class="space-y-1 rounded-xl border border-white/10 bg-black/30 p-2"
-                    >
-                      <div class="flex items-start justify-between gap-2">
-                        <div>
-                          <p class="font-mono text-xs text-white">{{ state.id }}</p>
-                          <p class="text-[10px] text-white/50">
-                            {{ state.role || '—' }} • {{ state.phase || '—' }}
-                            <span v-if="state.frequencyName" class="ml-1 text-white/40">({{ state.frequencyName }})</span>
-                          </p>
-                        </div>
-                        <v-chip
-                            size="x-small"
-                            color="cyan"
-                            variant="outlined"
-                            class="cursor-pointer"
-                            @click="forceMove(state.id)"
-                        >
-                          Jump
-                        </v-chip>
-                      </div>
-                      <p v-if="state.sayPlain" class="text-[11px] text-white/70">
-                        ATC: <span class="font-mono text-white">{{ state.sayPlain }}</span>
-                      </p>
-                      <p v-if="state.sayNormalized" class="text-[10px] text-white/40">
-                        Radio: {{ state.sayNormalized }}
-                      </p>
-                    </div>
-                  </div>
-                  <p v-else class="text-[10px] text-white/50">No further decisions available.</p>
-                </div>
-
-                <div class="space-y-2 rounded-xl border border-white/10 bg-black/30 p-2">
-                  <p class="text-[10px] uppercase tracking-[0.25em] text-white/40">Decision timeline</p>
-                  <div v-if="timelineSteps.length" class="space-y-2">
-                    <div
-                      v-for="(step, index) in timelineSteps"
-                      :key="`${step.stage}-${index}`"
-                      class="space-y-2 rounded-lg border border-white/10 bg-black/40 p-2"
-                    >
-                      <div class="flex items-start justify-between gap-2">
-                        <div>
-                          <p class="font-semibold text-xs text-white">{{ step.label }}</p>
-                          <p class="text-[10px] text-white/50 uppercase tracking-[0.2em]">{{ step.stage }}</p>
-                        </div>
-                        <v-chip size="x-small" color="cyan" variant="outlined">
-                          {{ step.candidates.length }} cand.
-                        </v-chip>
-                      </div>
-                      <p v-if="step.note" class="text-[10px] text-white/50">{{ step.note }}</p>
-                      <div v-if="step.candidates.length" class="space-y-1">
-                        <div
-                          v-for="candidate in step.candidates"
-                          :key="candidate.id"
-                          class="rounded-md border border-white/10 bg-black/30 p-1.5"
-                        >
-                          <div class="flex items-center justify-between gap-2">
-                            <span class="font-mono text-[11px] text-white">{{ candidate.id }}</span>
-                            <span class="text-[10px] text-white/50">{{ candidate.flow || 'current' }}</span>
-                          </div>
-                          <p v-if="candidate.summary" class="text-[10px] text-white/60 mt-0.5">{{ candidate.summary }}</p>
-                        </div>
-                      </div>
-                      <div v-if="step.eliminated?.length" class="space-y-1">
-                        <p class="text-[10px] text-red-200/80 uppercase tracking-[0.25em]">Eliminated</p>
-                        <div
-                          v-for="elim in step.eliminated"
-                          :key="`${step.stage}-${elim.candidate.id}`"
-                          class="space-y-1 rounded-md border border-red-400/30 bg-red-500/10 p-1.5 text-[10px] text-red-100"
-                        >
-                          <div class="flex items-center justify-between gap-2">
-                            <span class="font-mono text-[11px]">{{ elim.candidate.id }}</span>
-                            <span class="text-[10px] text-red-200/80">{{ elim.kind }}</span>
-                          </div>
-                          <p class="text-[10px] text-red-100/80">{{ elim.reason }}</p>
-                          <p v-if="describeElimination(elim)" class="text-[10px] text-red-100/70">{{ describeElimination(elim) }}</p>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                  <p v-else class="text-[10px] text-white/50">No decision timeline available yet.</p>
-                </div>
-              </v-card-text>
-            </v-card>
-          </div>
-        </aside>
-      </Transition>
-
-      <!-- Flight info sheet (opened via hud-context click) -->
-      <v-dialog v-model="showFlightSheet" max-width="520" :content-class="pmTheme === 'light' ? 'pm-dialog-light' : ''">
-        <v-card :class="pmTheme === 'light' ? 'bg-white border border-black/10 text-[#0f1420]' : 'bg-[#0b101d] border border-white/10 text-white'">
-          <v-card-title class="flex items-center justify-between gap-2 text-base font-semibold">
-            <div class="flex items-center gap-2">
-              <v-icon icon="mdi-airplane" size="20" color="cyan" />
-              Flight info
-            </div>
-            <v-btn icon="mdi-close" variant="text" size="small" @click="showFlightSheet = false" />
-          </v-card-title>
-          <v-card-text class="space-y-4">
-            <div class="flex items-start justify-between gap-3">
-              <div>
-                <p class="text-xs uppercase tracking-[0.3em] text-white/50">Active flight</p>
-                <h2 class="text-2xl font-semibold">{{ flightContext.callsign || 'N/A' }}</h2>
-                <p class="text-sm text-white/70">{{ flightContext.dep }} → {{ flightContext.dest }}</p>
-              </div>
-              <div class="text-right space-y-1">
-                <v-chip
-                    :color="flags.in_air ? 'green' : 'grey'"
-                    variant="flat"
-                    size="small"
-                >
-                  {{ flags.in_air ? 'IN-AIR' : 'GROUND' }}
-                </v-chip>
-                <div class="flex gap-1 justify-end">
-                  <v-chip size="x-small" :color="flags.emergency_active ? 'red' : 'grey'" variant="outlined">
-                    EMERG
-                  </v-chip>
-                  <v-chip size="x-small" color="cyan" variant="outlined">
-                    {{ flags.current_unit }}
-                  </v-chip>
-                </div>
-              </div>
-            </div>
-
-            <div class="grid grid-cols-2 sm:grid-cols-4 gap-3 text-sm">
-              <div>
-                <p class="text-xs text-white/40 uppercase tracking-wider">Stand</p>
-                <p class="text-white/80 font-mono">{{ vars.stand }}</p>
-              </div>
-              <div>
-                <p class="text-xs text-white/40 uppercase tracking-wider">Runway</p>
-                <p class="text-white/80 font-mono">{{ vars.runway }}</p>
-              </div>
-              <div>
-                <p class="text-xs text-white/40 uppercase tracking-wider">Squawk</p>
-                <p class="text-white/80 font-mono">{{ vars.squawk }}</p>
-              </div>
-              <div>
-                <p class="text-xs text-white/40 uppercase tracking-wider">SID</p>
-                <p class="text-white/80 font-mono">{{ vars.sid }}</p>
-              </div>
-            </div>
-
-            <div class="flex justify-between pt-2 border-t border-white/10">
-              <div class="text-center">
-                <p class="text-lg font-semibold text-cyan-300">{{ flags.radio_checks_done || 0 }}</p>
-                <p class="text-xs text-white/40 uppercase tracking-wider">Radio Checks</p>
-              </div>
-              <div class="text-center">
-                <p class="text-lg font-semibold text-orange-300">{{ flags.off_schema_count || 0 }}</p>
-                <p class="text-xs text-white/40 uppercase tracking-wider">Off-Schema</p>
-              </div>
-              <div class="text-center">
-                <p class="text-lg font-semibold text-white">{{ log.length }}</p>
-                <p class="text-xs text-white/40 uppercase tracking-wider">Transmissions</p>
-              </div>
-            </div>
-
-            <v-btn
-                block
-                color="grey"
-                variant="outlined"
-                size="small"
-                prepend-icon="mdi-airplane-off"
-                @click="backToSetup"
-            >
-              Select new flight
-            </v-btn>
-          </v-card-text>
-        </v-card>
-      </v-dialog>
-
-      <!-- Settings sheet (opened via Settings button in HUD) -->
-      <v-dialog v-model="showSettingsSheet" max-width="560" :content-class="pmTheme === 'light' ? 'pm-dialog-light' : ''">
-        <v-card :class="pmTheme === 'light' ? 'bg-white border border-black/10 text-[#0f1420]' : 'bg-[#0b101d] border border-white/10 text-white'">
-          <v-card-title class="flex items-center justify-between gap-2 text-base font-semibold">
-            <div class="flex items-center gap-2">
-              <v-icon icon="mdi-cog" size="20" color="cyan" />
-              Settings
-            </div>
-            <v-btn icon="mdi-close" variant="text" size="small" @click="showSettingsSheet = false" />
-          </v-card-title>
-          <v-card-text class="space-y-4">
-            <div>
-              <label class="text-xs uppercase tracking-[0.3em] text-white/40 mb-2 block">Theme</label>
-              <div class="pm-seg">
-                <button
-                    type="button"
-                    class="pm-seg-btn"
-                    :class="{ 'is-active': pmThemePreference === 'dark' }"
-                    @click="setPmTheme('dark')"
-                >
-                  <v-icon size="16">mdi-weather-night</v-icon>
-                  Dark
-                </button>
-                <button
-                    type="button"
-                    class="pm-seg-btn"
-                    :class="{ 'is-active': pmThemePreference === 'light' }"
-                    @click="setPmTheme('light')"
-                >
-                  <v-icon size="16">mdi-white-balance-sunny</v-icon>
-                  Light
-                </button>
-                <button
-                    type="button"
-                    class="pm-seg-btn"
-                    :class="{ 'is-active': pmThemePreference === 'system' }"
-                    @click="setPmTheme('system')"
-                >
-                  <v-icon size="16">mdi-theme-light-dark</v-icon>
-                  System
-                </button>
-              </div>
-            </div>
-
-            <div>
-              <div class="flex items-center justify-between mb-2">
-                <label class="text-xs uppercase tracking-[0.3em] text-white/40">
-                  Speech speed
-                </label>
-                <span class="text-xs font-mono text-white/60">{{ speechSpeedLabel }}</span>
-              </div>
-              <v-slider
-                  v-model="speechSpeed"
-                  :min="0.7"
-                  :max="1.3"
-                  :step="0.05"
-                  color="cyan"
-                  thumb-label
-                  hide-details
-              />
-            </div>
-
-            <div class="grid gap-3 sm:grid-cols-2">
-              <v-switch
-                  v-model="radioEffectsEnabled"
-                  color="cyan"
-                  inset
-                  label="Radio effects"
-                  hide-details
-              />
-              <v-switch
-                  v-model="readbackEnabled"
-                  color="cyan"
-                  inset
-                  label="Readback voice"
-                  hide-details
-              />
-              <v-switch
-                  v-model="learningMode"
-                  color="cyan"
-                  inset
-                  label="Learning aid (expected comm)"
-                  hide-details
-              />
-              <v-switch
-                  v-model="debugMode"
-                  color="orange"
-                  inset
-                  label="Developer debug"
-                  hide-details
-              />
-            </div>
-
-            <div class="pt-2 border-t border-white/10 space-y-3">
-              <div>
-                <p class="text-xs uppercase tracking-[0.3em] text-white/40">Voice input</p>
-                <p class="text-[11px] text-white/50 mt-1">
-                  Pre-recording keeps the mic listening in the background so the start of your transmission isn't clipped.
-                </p>
-              </div>
-              <v-switch
-                  v-model="prerecEnabled"
-                  color="cyan"
-                  inset
-                  label="Pre-recording (rolling buffer)"
-                  hide-details
-              />
-              <div :class="{ 'opacity-50 pointer-events-none': !prerecEnabled }">
-                <div class="flex items-center justify-between mb-2">
-                  <label class="text-xs uppercase tracking-[0.3em] text-white/40">
-                    Pre-recording lead-in
-                  </label>
-                  <span class="text-xs font-mono text-white/60">{{ prerecSeconds.toFixed(1) }}s</span>
-                </div>
-                <v-slider
-                    v-model="prerecSeconds"
-                    :min="0.3"
-                    :max="2.5"
-                    :step="0.1"
-                    color="cyan"
-                    thumb-label
-                    hide-details
-                    :disabled="!prerecEnabled"
-                />
-              </div>
-            </div>
-          </v-card-text>
-        </v-card>
-      </v-dialog>
-
-      <!-- Bug Report Dialog -->
-      <v-dialog v-model="showBugReportDialog" max-width="680" scrollable :content-class="pmTheme === 'light' ? 'pm-dialog-light' : ''">
-        <v-card :class="pmTheme === 'light' ? 'bg-white border border-black/10 text-[#0f1420]' : 'bg-[#0b101d] border border-white/10 text-white'">
-          <v-card-title class="flex items-center gap-2 text-base font-semibold pt-4 px-5">
-            <v-icon icon="mdi-bug-outline" color="#f87171" size="20" />
-            Fehler melden
-          </v-card-title>
-          <v-card-text class="space-y-4 px-5 pb-2">
-            <div v-if="bugReportSuccess" class="rounded-xl bg-emerald-500/10 border border-emerald-400/30 p-4 text-center">
-              <v-icon icon="mdi-check-circle-outline" color="emerald" size="32" class="mb-2" />
-              <p class="text-emerald-300 font-semibold">Danke! Bug Report wurde gesendet.</p>
-            </div>
-            <template v-else>
-              <div v-if="bugReportScreenshot" class="space-y-2">
-                <div class="flex items-start justify-between gap-3">
-                  <div class="flex items-start gap-2">
-                    <v-icon size="18" color="red" class="mt-0.5">mdi-gesture-tap-button</v-icon>
-                    <div>
-                      <p class="text-sm font-semibold text-white/90">Wo ist der Fehler? Zeichne einen Pfeil hin.</p>
-                      <p class="text-xs text-white/55 leading-snug">
-                        Klicke auf die Stelle und ziehe mit gedrückter Maustaste (am Handy: mit dem Finger)
-                        zur Problemstelle. Du kannst mehrere Pfeile setzen.
-                      </p>
-                    </div>
-                  </div>
-                  <v-btn
-                    v-if="bugReportArrows.length > 0"
-                    size="x-small"
-                    variant="text"
-                    color="red"
-                    prepend-icon="mdi-undo"
-                    class="shrink-0"
-                    @click="undoLastArrow"
-                  >
-                    Pfeil zurück
-                  </v-btn>
-                </div>
-                <div class="relative rounded-xl overflow-hidden border border-white/10" style="line-height:0">
-                  <img
-                    ref="bugReportImgRef"
-                    :src="bugReportScreenshot"
-                    class="w-full block"
-                    alt="Screenshot"
-                    @load="setupAnnotationCanvas"
-                  />
-                  <canvas
-                    ref="bugReportCanvasRef"
-                    class="absolute inset-0 w-full h-full cursor-crosshair select-none"
-                    style="touch-action:none"
-                    @pointerdown="onCanvasMouseDown"
-                    @pointermove="onCanvasMouseMove"
-                    @pointerup="onCanvasMouseUp"
-                    @pointerleave="onCanvasMouseLeave"
-                    @pointercancel="onCanvasMouseLeave"
-                  />
-                  <span
-                    v-if="bugReportArrows.length === 0"
-                    class="pointer-events-none absolute inset-0 flex items-center justify-center text-center px-4"
-                  >
-                    <span class="rounded-full bg-black/55 px-3 py-1 text-xs text-white/85 backdrop-blur">
-                      ✏️ Hier ziehen, um einen Pfeil zur Fehlerstelle zu zeichnen
-                    </span>
-                  </span>
-                </div>
-              </div>
-              <div v-else class="rounded-xl border border-white/10 bg-white/5 p-4 text-center text-sm text-white/50">
-                Kein Screenshot verfügbar
-              </div>
-
-              <v-textarea
-                v-model="bugReportComment"
-                label="Was ist kaputt? Was sollte stattdessen passieren?"
-                variant="outlined"
-                color="red"
-                rows="3"
-                auto-grow
-                maxlength="2000"
-                counter="2000"
-                hide-details="auto"
-                :disabled="bugReportLoading"
-              />
-
-              <v-text-field
-                v-model="bugReportContact"
-                label="Dein Name / Kontakt"
-                variant="outlined"
-                color="red"
-                density="comfortable"
-                hide-details
-                :disabled="bugReportLoading"
-              />
-
-              <v-alert
-                v-if="bugReportError"
-                type="error"
-                density="compact"
-                variant="tonal"
-                class="bg-red-500/10 text-red-200"
-              >
-                {{ bugReportError }}
-              </v-alert>
-            </template>
-          </v-card-text>
-          <v-card-actions v-if="!bugReportSuccess" class="justify-end gap-2 px-5 pb-4">
-            <v-btn variant="text" color="grey" :disabled="bugReportLoading" @click="showBugReportDialog = false">
-              Abbrechen
-            </v-btn>
-            <v-btn
-              color="red"
-              variant="flat"
-              :loading="bugReportLoading"
-              :disabled="!bugReportComment.trim()"
-              @click="submitBugReport"
-            >
-              Bug melden
-            </v-btn>
-          </v-card-actions>
-        </v-card>
-      </v-dialog>
+      <BugReportDialog :bug="bugReport" :theme="pmTheme" />
 
       <!-- Transmission issue dialog -->
       <v-dialog v-model="showTransmissionIssueDialog" max-width="420" :content-class="pmTheme === 'light' ? 'pm-dialog-light' : ''">
@@ -1134,8 +611,11 @@ import PttPad from '~/components/live-atc/cockpit/PttPad.vue'
 import { useAtisPlayback } from '~/composables/useAtisPlayback'
 import { usePttRecording } from '~/composables/usePttRecording'
 import { useBugReport } from '~/composables/useBugReport'
-import { useDebugSimulation } from '~/composables/useDebugSimulation'
 import { useSimBridgeSync } from '~/composables/useSimBridgeSync'
+import FlightInfoSheet from '~/components/live-atc/cockpit/FlightInfoSheet.vue'
+import SettingsSheet from '~/components/live-atc/cockpit/SettingsSheet.vue'
+import BugReportDialog from '~/components/live-atc/cockpit/BugReportDialog.vue'
+import DebugPanel from '~/components/live-atc/cockpit/DebugPanel.vue'
 import { CHAIN_GROUPS, DRILL_SCENARIOS } from '../../shared/constants/scenarios'
 import FlightSourceStep from '~/components/live-atc/FlightSourceStep.vue'
 import FlightSelectStep from '~/components/live-atc/FlightSelectStep.vue'
@@ -1287,27 +767,10 @@ const radioEffectsEnabled = ref(true)
 const readbackEnabled = ref(false)
 
 // ── Bug Report ───────────────────────────────────────────────────────────────
-const {
-  showBugReportDialog,
-  bugReportComment,
-  bugReportContact,
-  bugReportScreenshot,
-  bugReportArrows,
-  bugReportLoading,
-  bugReportCapturing,
-  bugReportError,
-  bugReportSuccess,
-  bugReportCanvasRef,
-  bugReportImgRef,
-  setupAnnotationCanvas,
-  onCanvasMouseDown,
-  onCanvasMouseMove,
-  onCanvasMouseUp,
-  onCanvasMouseLeave,
-  undoLastArrow,
-  openBugReport,
-  submitBugReport,
-} = useBugReport(engine, { activeScenario })
+// Owned here rather than by the dialog: the HUD button starts the screenshot
+// capture before the dialog ever renders. The dialog gets the whole handle.
+const bugReport = useBugReport(engine, { activeScenario })
+const { bugReportCapturing, openBugReport } = bugReport
 
 // Layout / view state
 const activeTab = ref<'funk' | 'log'>('funk')
@@ -1321,9 +784,11 @@ const showExpectedComm = computed(
 // Overlays / sheets opened from HUD controls
 const showFlightSheet = ref(false)
 const showSettingsSheet = ref(false)
-const showDebugDrawer = ref(false)
 const hudStatusMenu = ref(false)
 
+/** The one gate for developer tooling: DebugPanel is not mounted while this is off. */
+const debugMode = ref(true)
+
 type PmTab = {
   id: 'funk' | 'log'
   label: string
@@ -1595,25 +1060,6 @@ const {
   restoreBugReportState,
 } = session
 
-// Debug drawer: scripted simulation + decision-trace inspectors.
-const {
-  debugMode,
-  simulationRunning,
-  simulationTrace,
-  simulationError,
-  simulationStepCount,
-  completedPilotSteps,
-  timelineSteps,
-  timelineUsedFallback,
-  traceAutoSelection,
-  traceFallback,
-  debugState,
-  debugNextStates,
-  describeElimination,
-  formatTracePayload,
-  runFullSimulation,
-} = useDebugSimulation(engine, { setLastTransmission, clearLog, startDemoFlight })
-
 onUnmounted(() => {
   stopAtisLoop()
   stopPrerecCapture()
@@ -2263,110 +1709,6 @@ onUnmounted(() => {
   .pm-log-tab {
     display: none !important;
   }
-  /* No bottom nav on desktop: drop the FAB back down to the corner. */
-  .debug-fab {
-    bottom: calc(env(safe-area-inset-bottom) + 16px);
-  }
-  .debug-drawer {
-    bottom: calc(env(safe-area-inset-bottom) + 16px);
-  }
 }
 
-/* =========================================================================
- * Debug FAB + drawer (left, non-blocking, can stay open in parallel)
- * ======================================================================= */
-.debug-fab {
-  position: fixed;
-  left: 16px;
-  /* Clear the mobile bottom nav (~64px) by default; desktop overrides below. */
-  bottom: calc(env(safe-area-inset-bottom) + 78px);
-  z-index: 60;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 48px;
-  height: 48px;
-  border-radius: 16px;
-  border: 1px solid rgba(249, 115, 22, 0.45);
-  background: rgba(249, 115, 22, 0.16);
-  color: #fdba74;
-  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
-  cursor: pointer;
-  transition: background 160ms ease, color 160ms ease, transform 160ms ease, border-color 160ms ease;
-}
-.debug-fab:hover {
-  background: rgba(249, 115, 22, 0.26);
-  color: #fed7aa;
-  transform: translateY(-1px);
-}
-.debug-fab.is-open {
-  background: rgba(249, 115, 22, 0.35);
-  border-color: rgba(249, 115, 22, 0.7);
-  color: #fff;
-}
-
-.debug-drawer {
-  position: fixed;
-  top: 72px;
-  left: 12px;
-  bottom: calc(env(safe-area-inset-bottom) + 76px);
-  width: min(420px, calc(100vw - 24px));
-  z-index: 55;
-  display: flex;
-  flex-direction: column;
-  border-radius: 18px;
-  border: 1px solid rgba(255, 255, 255, 0.12);
-  background: rgba(8, 13, 24, 0.96);
-  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
-  backdrop-filter: blur(14px);
-  pointer-events: auto;
-}
-.debug-drawer-head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  padding: 12px 14px;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
-}
-.debug-drawer-close {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 28px;
-  border-radius: 8px;
-  color: rgba(255, 255, 255, 0.6);
-  background: transparent;
-  transition: background 120ms ease, color 120ms ease;
-}
-.debug-drawer-close:hover {
-  background: rgba(255, 255, 255, 0.08);
-  color: #fff;
-}
-.debug-drawer-body {
-  padding: 12px 14px;
-  overflow-y: auto;
-  -webkit-overflow-scrolling: touch;
-}
-
-.debug-drawer-enter-active,
-.debug-drawer-leave-active {
-  transition: transform 220ms ease, opacity 220ms ease;
-}
-.debug-drawer-enter-from,
-.debug-drawer-leave-to {
-  transform: translateX(-12px);
-  opacity: 0;
-}
-
-@media (max-width: 640px) {
-  .debug-drawer {
-    top: 64px;
-    left: 8px;
-    right: 8px;
-    width: auto;
-    bottom: calc(env(safe-area-inset-bottom) + 84px);
-  }
-}
 </style>