From 785d9e26b23abbd60b1e9c20afa5470b814a6a9b Mon Sep 17 00:00:00 2001
From: itsrubberduck <frappes_remoter.2e@icloud.com>
Date: Sun, 15 Feb 2026 21:10:42 +0100
Subject: [PATCH] feat(liveatc): redesign UI with classroom styling, add pilot
 suggestions & telemetry debugger

- Align liveatc page with classroom design system (learn-theme, btn/panel/glass classes)
- Add pilot suggestion buttons showing all phase interactions (disabled when unavailable)
- Short click sends directly, long press opens editable text field
- Add ATC-initiated interaction buttons (tower: lineup, cleared takeoff)
- Add telemetry debugger panel with 5 presets + manual sliders + engine state view
- Fix when-condition bug in ground phase (remove 'vars.' prefix)
- Fix off_schema crash: graceful "say again" fallback instead of throwing
- Expose getInteractionSuggestions() and processAtcInitiated() from engine
- Extend demo flight with push_direction, wind, arrival vars for full flow testing

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 app/pages/liveatc.vue       | 689 +++++++++++++++++++++++-------------
 shared/atc/engine.ts        | 108 +++++-
 shared/atc/phases/ground.ts |   4 +-
 3 files changed, 544 insertions(+), 257 deletions(-)

diff --git a/app/pages/liveatc.vue b/app/pages/liveatc.vue
index 007efc0..e348580 100644
--- a/app/pages/liveatc.vue
+++ b/app/pages/liveatc.vue
@@ -1,45 +1,45 @@
 <template>
-  <div class="atc-scene">
+  <div class="scene learn-theme">
     <!-- ═══════ SETUP SCREEN ═══════ -->
-    <div v-if="screen === 'setup'" class="atc-setup">
+    <div v-if="screen === 'setup'" class="container setup-container">
       <header class="setup-header">
         <v-icon icon="mdi-radar" size="28" color="var(--accent)" />
-        <h1 class="setup-title">Live ATC</h1>
-        <span class="setup-sub">Phase Machine v2</span>
+        <h1 class="h2">Live ATC</h1>
+        <span class="muted small" style="margin-left: auto">Phase Machine v2</span>
       </header>
 
-      <div class="setup-form glass panel">
+      <div class="panel setup-form">
         <div class="setup-field">
           <label class="setup-label">Callsign</label>
-          <input v-model="setupForm.callsign" class="setup-input" placeholder="DLH39A" />
+          <input v-model="setupForm.callsign" class="input-field" placeholder="DLH39A" />
         </div>
         <div class="setup-row">
           <div class="setup-field">
             <label class="setup-label">Departure</label>
-            <input v-model="setupForm.dep" class="setup-input" placeholder="EDDF" />
+            <input v-model="setupForm.dep" class="input-field" placeholder="EDDF" />
           </div>
           <div class="setup-field">
             <label class="setup-label">Arrival</label>
-            <input v-model="setupForm.arr" class="setup-input" placeholder="EDDM" />
+            <input v-model="setupForm.arr" class="input-field" placeholder="EDDM" />
           </div>
         </div>
         <div class="setup-row">
           <div class="setup-field">
             <label class="setup-label">Aircraft</label>
-            <input v-model="setupForm.aircraft" class="setup-input" placeholder="A320" />
+            <input v-model="setupForm.aircraft" class="input-field" placeholder="A320" />
           </div>
           <div class="setup-field">
             <label class="setup-label">Squawk</label>
-            <input v-model="setupForm.squawk" class="setup-input" placeholder="4723" />
+            <input v-model="setupForm.squawk" class="input-field" placeholder="4723" />
           </div>
         </div>
 
-        <button class="setup-start-btn" :disabled="!canStart" @click="startFlight">
+        <button class="btn primary" :disabled="!canStart" @click="startFlight">
           <v-icon icon="mdi-airplane-takeoff" size="20" />
           Start Flight
         </button>
 
-        <button class="setup-demo-btn" @click="startDemo">
+        <button class="btn soft" @click="startDemo">
           <v-icon icon="mdi-play-circle-outline" size="18" />
           Demo: EDDF → EDDM
         </button>
@@ -47,23 +47,23 @@
     </div>
 
     <!-- ═══════ LIVE SESSION ═══════ -->
-    <div v-else-if="screen === 'session'" class="atc-session">
+    <div v-else-if="screen === 'session'" class="session-layout">
       <!-- Flight Header -->
-      <header class="flight-header hud">
+      <header class="hud flight-header">
         <div class="flight-header-left">
           <span class="flight-callsign">{{ engine.state.vars.callsign }}</span>
-          <span class="flight-route">{{ engine.state.vars.dep }} → {{ engine.state.vars.dest }}</span>
+          <span class="muted small">{{ engine.state.vars.dep }} → {{ engine.state.vars.dest }}</span>
         </div>
         <div class="flight-header-right">
-          <span class="flight-phase-badge">
+          <span class="phase-badge">
             <span class="phase-dot" :class="{ 'phase-dot--emergency': engine.state.flags.emergencyActive }" />
             {{ engine.currentPhase.value?.unit ?? '—' }}
           </span>
           <span class="flight-freq">{{ engine.currentPhase.value?.frequency ?? '—' }}</span>
-          <span v-if="telemetryConnected" class="telem-indicator telem-indicator--on" title="SimBridge connected">
+          <span v-if="telemetryConnected" class="telem-on" title="SimBridge connected">
             <v-icon icon="mdi-wifi" size="14" />
           </span>
-          <span v-else class="telem-indicator telem-indicator--off" title="SimBridge disconnected">
+          <span v-else class="telem-off" title="SimBridge disconnected">
             <v-icon icon="mdi-wifi-off" size="14" />
           </span>
         </div>
@@ -72,10 +72,10 @@
       <!-- Phase Progress -->
       <AtcPhaseIndicator :current-phase="engine.state.currentPhase" />
 
-      <!-- Latest ATC message (highlighted) -->
-      <div v-if="latestAtcTx" class="latest-atc glass panel">
+      <!-- Latest ATC message -->
+      <div v-if="latestAtcTx" class="panel latest-atc">
         <div class="latest-atc-header">
-          <v-icon icon="mdi-tower-beach" size="16" color="var(--accent)" />
+          <v-icon icon="mdi-tower-fire" size="16" color="var(--accent)" />
           <span class="latest-atc-label">ATC</span>
           <span v-if="isSpeaking" class="speaking-indicator">
             <span class="speaking-dot" /><span class="speaking-dot" /><span class="speaking-dot" />
@@ -84,6 +84,61 @@
         <div class="latest-atc-text">{{ latestAtcTx.message }}</div>
       </div>
 
+      <!-- ═══════ PILOT SUGGESTION BUTTONS ═══════ -->
+      <div class="suggestions-section">
+        <div class="suggestions-header">
+          <v-icon icon="mdi-account-voice" size="14" />
+          <span>Your turn{{ engine.state.waitingFor === 'readback' ? ' (readback)' : '' }}</span>
+        </div>
+        <div class="suggestions-list">
+          <template v-for="s in suggestions" :key="s.id">
+            <!-- atc_initiates: shown as ATC action button -->
+            <button
+              v-if="s.type === 'atc_initiates'"
+              class="btn mini suggestion-btn suggestion-btn--atc"
+              :disabled="!s.available || processing"
+              :title="s.available ? 'Trigger ATC action: ' + s.intent : 'Not available yet'"
+              @click="handleAtcInitiated(s.id)"
+            >
+              <v-icon icon="mdi-tower-fire" size="14" />
+              <span class="suggestion-intent">{{ s.intent }}</span>
+            </button>
+            <!-- pilot_initiates / readback_check: clickable pilot text -->
+            <button
+              v-else
+              class="btn mini suggestion-btn"
+              :class="{ 'suggestion-btn--disabled': !s.available }"
+              :disabled="!s.available || processing"
+              :title="s.available ? (s.example || s.intent) : `Requires: ${s.whenKey}`"
+              @mousedown="startLongPress(s)"
+              @mouseup="endLongPress(s)"
+              @mouseleave="cancelLongPress"
+              @touchstart.prevent="startLongPress(s)"
+              @touchend.prevent="endLongPress(s)"
+              @touchcancel="cancelLongPress"
+            >
+              <span class="suggestion-text">{{ s.example || s.intent }}</span>
+            </button>
+          </template>
+        </div>
+
+        <!-- Inline edit field (shown on long press) -->
+        <form v-if="editingSuggestion" class="suggestion-edit" @submit.prevent="sendEditedSuggestion">
+          <input
+            ref="editInput"
+            v-model="editText"
+            class="input-field"
+            @keydown.escape="editingSuggestion = null"
+          />
+          <button type="submit" class="btn primary mini" :disabled="!editText.trim() || processing">
+            <v-icon icon="mdi-send" size="14" /> Send
+          </button>
+          <button type="button" class="btn ghost mini" @click="editingSuggestion = null">
+            Cancel
+          </button>
+        </form>
+      </div>
+
       <!-- PTT Button -->
       <AtcPttButton
         :frequency="engine.currentPhase.value?.frequency ?? '—'"
@@ -108,18 +163,14 @@
       <div class="emergency-row">
         <button
           v-if="!engine.state.flags.emergencyActive"
-          class="emergency-btn"
+          class="btn mini emergency-btn"
           @click="showEmergencyMenu = !showEmergencyMenu"
         >
           <v-icon icon="mdi-alert" size="16" /> EMERGENCY
         </button>
-        <div v-if="showEmergencyMenu && !engine.state.flags.emergencyActive" class="emergency-menu glass">
-          <button class="emergency-option emergency-option--mayday" @click="handleEmergency('mayday')">
-            MAYDAY
-          </button>
-          <button class="emergency-option emergency-option--panpan" @click="handleEmergency('panpan')">
-            PAN PAN
-          </button>
+        <div v-if="showEmergencyMenu && !engine.state.flags.emergencyActive" class="emergency-menu panel">
+          <button class="btn mini emergency-opt--mayday" @click="handleEmergency('mayday')">MAYDAY</button>
+          <button class="btn mini emergency-opt--panpan" @click="handleEmergency('panpan')">PAN PAN</button>
         </div>
         <span v-if="engine.state.flags.emergencyActive" class="emergency-active-badge">
           <v-icon icon="mdi-alert" size="14" /> EMERGENCY ACTIVE
@@ -128,7 +179,7 @@
 
       <!-- Communication Log -->
       <div class="comm-log">
-        <div class="comm-log-header">
+        <div class="comm-log-header muted small">
           <v-icon icon="mdi-format-list-text" size="16" />
           <span>Communications ({{ engine.state.transmissions.length }})</span>
         </div>
@@ -138,14 +189,73 @@
             :key="tx.id"
             :transmission="tx"
           />
-          <div v-if="engine.state.transmissions.length === 0" class="comm-log-empty">
+          <div v-if="engine.state.transmissions.length === 0" class="comm-log-empty muted small">
             No transmissions yet. Start by requesting clearance.
           </div>
         </div>
       </div>
 
+      <!-- ═══════ TELEMETRY DEBUGGER ═══════ -->
+      <details class="panel debug-panel">
+        <summary class="debug-summary">
+          <v-icon icon="mdi-bug" size="16" /> Telemetry Debugger
+        </summary>
+        <div class="debug-body">
+          <!-- Preset buttons -->
+          <div class="debug-presets">
+            <button
+              v-for="preset in telemetryPresets"
+              :key="preset.label"
+              class="btn mini"
+              :class="{ 'btn-active': activePreset === preset.label }"
+              @click="applyPreset(preset)"
+            >
+              {{ preset.label }}
+            </button>
+          </div>
+
+          <!-- Manual sliders -->
+          <div class="debug-sliders">
+            <div class="debug-slider-row">
+              <label>Altitude (ft)</label>
+              <input v-model.number="debugTelemetry.altitude_ft" type="range" min="0" max="45000" step="500" @input="applyDebugTelemetry" />
+              <span class="debug-value">{{ debugTelemetry.altitude_ft }}</span>
+            </div>
+            <div class="debug-slider-row">
+              <label>Speed (kts)</label>
+              <input v-model.number="debugTelemetry.speed_kts" type="range" min="0" max="600" step="5" @input="applyDebugTelemetry" />
+              <span class="debug-value">{{ debugTelemetry.speed_kts }}</span>
+            </div>
+            <div class="debug-slider-row">
+              <label>Heading (deg)</label>
+              <input v-model.number="debugTelemetry.heading_deg" type="range" min="0" max="360" step="1" @input="applyDebugTelemetry" />
+              <span class="debug-value">{{ debugTelemetry.heading_deg }}°</span>
+            </div>
+            <div class="debug-slider-row">
+              <label>VS (fpm)</label>
+              <input v-model.number="debugTelemetry.vertical_speed_fpm" type="range" min="-4000" max="4000" step="100" @input="applyDebugTelemetry" />
+              <span class="debug-value">{{ debugTelemetry.vertical_speed_fpm }}</span>
+            </div>
+            <div class="debug-slider-row">
+              <label>On Ground</label>
+              <input v-model="debugTelemetry.on_ground" type="checkbox" @change="applyDebugTelemetry" />
+              <span class="debug-value">{{ debugTelemetry.on_ground ? 'Yes' : 'No' }}</span>
+            </div>
+          </div>
+
+          <!-- Current engine state summary -->
+          <div class="debug-state">
+            <div class="debug-state-title muted small">Engine State</div>
+            <div class="debug-state-row"><span>Phase:</span> <strong>{{ engine.state.currentPhase }}</strong></div>
+            <div class="debug-state-row"><span>Interaction:</span> <code>{{ engine.state.currentInteraction ?? 'none' }}</code></div>
+            <div class="debug-state-row"><span>Waiting for:</span> <code>{{ engine.state.waitingFor }}</code></div>
+            <div class="debug-state-row"><span>In Air:</span> {{ engine.state.flags.inAir ? 'Yes' : 'No' }}</div>
+          </div>
+        </div>
+      </details>
+
       <!-- Settings (collapsible) -->
-      <details class="settings-panel glass">
+      <details class="panel settings-panel">
         <summary class="settings-summary">
           <v-icon icon="mdi-cog" size="16" /> Settings
         </summary>
@@ -153,12 +263,12 @@
           <div class="setting-row">
             <label>Signal Strength</label>
             <input v-model.number="settings.signalLevel" type="range" min="1" max="5" step="1" />
-            <span class="setting-value">{{ settings.signalLevel }}</span>
+            <span class="debug-value">{{ settings.signalLevel }}</span>
           </div>
           <div class="setting-row">
             <label>Speech Speed</label>
             <input v-model.number="settings.speechSpeed" type="range" min="0.7" max="1.3" step="0.1" />
-            <span class="setting-value">{{ settings.speechSpeed.toFixed(1) }}x</span>
+            <span class="debug-value">{{ settings.speechSpeed.toFixed(1) }}x</span>
           </div>
           <div class="setting-row">
             <label>Radio Effects</label>
@@ -167,9 +277,9 @@
           <div class="setting-row">
             <label>SimBridge Poll</label>
             <input v-model="settings.telemetryPoll" type="checkbox" />
-            <span class="setting-hint">Poll /api/bridge/data every 2s</span>
+            <span class="muted small">Poll /api/bridge/data every 2s</span>
           </div>
-          <button class="setup-demo-btn" style="margin-top: 8px" @click="resetSession">
+          <button class="btn soft mini" style="margin-top: 8px" @click="resetSession">
             <v-icon icon="mdi-restart" size="16" /> Reset Session
           </button>
         </div>
@@ -180,21 +290,17 @@
 
 <script setup lang="ts">
 import { ref, computed, watch, nextTick, onMounted, onUnmounted } from 'vue'
-import { useAtcEngine } from '~~/shared/atc/engine'
-import { getPhaseOrder, getPhase } from '~~/shared/atc/phases'
+import { useAtcEngine, type InteractionSuggestion } from '~~/shared/atc/engine'
+import { getPhase } from '~~/shared/atc/phases'
 import type { Transmission, FlightPlan } from '~~/shared/atc/types'
 import { useApi } from '~/composables/useApi'
 import { useAuthStore } from '~/stores/auth'
 
 definePageMeta({ middleware: ['require-auth'] })
 
-// For radio effects (conditional import)
-let applyRadioEffect: ((audioBuffer: AudioBuffer, ctx: AudioContext, level: number) => AudioBuffer) | null = null
-
 const api = useApi()
 const auth = useAuthStore()
 
-// Create an authenticated fetch wrapper for the engine
 function authFetch<T = any>(url: string, opts: any = {}): Promise<T> {
   const headers = { ...opts.headers } as Record<string, string>
   if (auth.accessToken) {
@@ -211,11 +317,7 @@ const showEmergencyMenu = ref(false)
 const telemetryConnected = ref(false)
 const commLogScroll = ref<HTMLElement | null>(null)
 
-// TTS speech queue
-const speechQueue = ref<string[]>([])
 let audioContext: AudioContext | null = null
-
-// Telemetry polling
 let telemetryInterval: ReturnType<typeof setInterval> | null = null
 
 // ── Setup form ──
@@ -231,7 +333,7 @@ const canStart = computed(() =>
   setupForm.value.callsign.trim() && setupForm.value.dep.trim() && setupForm.value.arr.trim()
 )
 
-// ── Settings (persisted) ──
+// ── Settings ──
 const settings = ref({
   signalLevel: 4,
   speechSpeed: 1.0,
@@ -250,7 +352,7 @@ watch(settings, (v) => {
   localStorage.setItem('opensquawk-atc-settings', JSON.stringify(v))
 }, { deep: true })
 
-// ── Standby frequency (next phase) ──
+// ── Standby frequency ──
 const standbyFreq = computed(() => {
   const phase = engine.currentPhase.value
   if (!phase?.nextPhase) return undefined
@@ -272,14 +374,73 @@ const latestAtcTx = computed<Transmission | undefined>(() =>
   [...engine.state.transmissions].reverse().find(t => t.speaker === 'atc')
 )
 
-// ── Auto-scroll comm log ──
+// ── Auto-scroll ──
 watch(() => engine.state.transmissions.length, async () => {
   await nextTick()
   if (commLogScroll.value) {
-    commLogScroll.value.scrollTop = 0 // reversed order, scroll to top = newest
+    commLogScroll.value.scrollTop = 0
   }
 })
 
+// ── Pilot suggestion buttons ──
+const suggestions = computed<InteractionSuggestion[]>(() => engine.getInteractionSuggestions())
+
+// Long-press logic
+const editingSuggestion = ref<InteractionSuggestion | null>(null)
+const editText = ref('')
+const editInput = ref<HTMLInputElement | null>(null)
+let longPressTimer: ReturnType<typeof setTimeout> | null = null
+let longPressTriggered = false
+
+function startLongPress(s: InteractionSuggestion) {
+  if (!s.available || processing.value) return
+  longPressTriggered = false
+  longPressTimer = setTimeout(() => {
+    longPressTriggered = true
+    editingSuggestion.value = s
+    editText.value = s.example || s.intent
+    nextTick(() => editInput.value?.focus())
+  }, 500)
+}
+
+function endLongPress(s: InteractionSuggestion) {
+  if (longPressTimer) {
+    clearTimeout(longPressTimer)
+    longPressTimer = null
+  }
+  if (!longPressTriggered && s.available && !processing.value) {
+    const text = s.example || s.intent
+    if (text) handleTextSubmit(text)
+  }
+}
+
+function cancelLongPress() {
+  if (longPressTimer) {
+    clearTimeout(longPressTimer)
+    longPressTimer = null
+  }
+}
+
+function sendEditedSuggestion() {
+  const text = editText.value.trim()
+  if (!text) return
+  editingSuggestion.value = null
+  handleTextSubmit(text)
+}
+
+// ── ATC-initiated interactions ──
+async function handleAtcInitiated(interactionId: string) {
+  processing.value = true
+  try {
+    const atcText = engine.processAtcInitiated(interactionId)
+    if (atcText) await speakAtc(atcText)
+  } catch (e) {
+    console.error('[LiveATC] ATC initiated error:', e)
+  } finally {
+    processing.value = false
+  }
+}
+
 // ── Start flight ──
 function startFlight() {
   const plan: FlightPlan = {
@@ -302,7 +463,6 @@ function startDemo() {
     aircraft: 'A320',
     squawk: '4723',
   })
-  // Pre-fill some vars for demo
   engine.state.vars.stand = 'V155'
   engine.state.vars.runway = '25R'
   engine.state.vars.sid = 'MARUN 7F'
@@ -316,6 +476,11 @@ function startDemo() {
   engine.state.vars.center_freq = '132.600'
   engine.state.vars.atis_code = 'D'
   engine.state.vars.atis_freq = '118.025'
+  engine.state.vars.push_direction = 'south'
+  engine.state.vars.wind = '250/08'
+  engine.state.vars.arrival_runway = '26L'
+  engine.state.vars.arrival_stand = 'A22'
+  engine.state.vars.approach_type = 'ILS'
   screen.value = 'session'
   startTelemetryPoll()
 }
@@ -327,20 +492,16 @@ function resetSession() {
   telemetryConnected.value = false
 }
 
-// ── Handle PTT recording complete ──
+// ── PTT ──
 async function handleRecordingComplete(payload: { audio: string; format: string }) {
   processing.value = true
   try {
-    // 1. STT via ptt endpoint
     const sttRes = await api.post<{ success: boolean; transcription: string }>('/api/atc/ptt', {
       audio: payload.audio, format: payload.format,
     })
     if (!sttRes.success || !sttRes.transcription) return
 
-    // 2. Engine handles pilot input → gets ATC response
     const atcText = await engine.handlePilotInput(sttRes.transcription, sttRes.transcription)
-
-    // 3. Speak ATC response
     await speakAtc(atcText)
   } catch (e) {
     console.error('[LiveATC] PTT error:', e)
@@ -358,7 +519,7 @@ async function handleRecordingComplete(payload: { audio: string; format: string
   }
 }
 
-// ── Handle text input ──
+// ── Text input ──
 async function handleTextSubmit(text: string) {
   processing.value = true
   try {
@@ -371,11 +532,9 @@ async function handleTextSubmit(text: string) {
   }
 }
 
-// ── TTS Playback ──
+// ── TTS ──
 async function speakAtc(text: string) {
   if (!text) return
-
-  // Split by newlines (handoff messages come as "main\nhandoff")
   const parts = text.split('\n').filter(Boolean)
   for (const part of parts) {
     await speakSingle(part)
@@ -396,7 +555,6 @@ async function speakSingle(text: string) {
 
     if (!res.success || !res.audio?.base64) return
 
-    // Decode and play audio
     isSpeaking.value = true
     const audioData = Uint8Array.from(atob(res.audio.base64), c => c.charCodeAt(0))
     if (!audioContext) audioContext = new AudioContext()
@@ -404,10 +562,8 @@ async function speakSingle(text: string) {
     const source = audioContext.createBufferSource()
     source.buffer = buffer
     source.connect(audioContext.destination)
-    source.onended = () => { isSpeaking.value = false }
     source.start()
 
-    // Wait for playback to finish
     await new Promise<void>(resolve => {
       source.onended = () => {
         isSpeaking.value = false
@@ -428,7 +584,6 @@ function handleEmergency(type: 'mayday' | 'panpan') {
 
 // ── Frequency swap ──
 function handleFreqSwap() {
-  // In the phase-based system, freq swap triggers the next phase advance
   const phase = engine.currentPhase.value
   if (phase?.nextPhase) {
     engine.state.currentPhase = phase.nextPhase
@@ -473,6 +628,53 @@ watch(() => settings.value.telemetryPoll, (v) => {
   else stopTelemetryPoll()
 })
 
+// ── Telemetry Debugger ──
+const activePreset = ref<string | null>(null)
+
+const debugTelemetry = ref({
+  altitude_ft: 0,
+  speed_kts: 0,
+  heading_deg: 0,
+  vertical_speed_fpm: 0,
+  on_ground: true,
+})
+
+interface TelemetryPreset {
+  label: string
+  values: {
+    altitude_ft: number
+    speed_kts: number
+    heading_deg: number
+    vertical_speed_fpm: number
+    on_ground: boolean
+  }
+}
+
+const telemetryPresets: TelemetryPreset[] = [
+  { label: 'On Ground', values: { altitude_ft: 0, speed_kts: 0, heading_deg: 250, vertical_speed_fpm: 0, on_ground: true } },
+  { label: 'Climbing', values: { altitude_ft: 5000, speed_kts: 250, heading_deg: 250, vertical_speed_fpm: 2500, on_ground: false } },
+  { label: 'Cruise FL350', values: { altitude_ft: 35000, speed_kts: 480, heading_deg: 180, vertical_speed_fpm: 0, on_ground: false } },
+  { label: 'Descending', values: { altitude_ft: 12000, speed_kts: 280, heading_deg: 180, vertical_speed_fpm: -1800, on_ground: false } },
+  { label: 'On Final', values: { altitude_ft: 2000, speed_kts: 140, heading_deg: 260, vertical_speed_fpm: -700, on_ground: false } },
+]
+
+function applyPreset(preset: TelemetryPreset) {
+  activePreset.value = preset.label
+  Object.assign(debugTelemetry.value, preset.values)
+  applyDebugTelemetry()
+}
+
+function applyDebugTelemetry() {
+  engine.updateTelemetry({
+    altitude_ft: debugTelemetry.value.altitude_ft,
+    speed_kts: debugTelemetry.value.speed_kts,
+    groundspeed_kts: debugTelemetry.value.speed_kts,
+    heading_deg: debugTelemetry.value.heading_deg,
+    vertical_speed_fpm: debugTelemetry.value.vertical_speed_fpm,
+    on_ground: debugTelemetry.value.on_ground,
+  })
+}
+
 onUnmounted(() => {
   stopTelemetryPoll()
   if (audioContext) audioContext.close()
@@ -480,31 +682,27 @@ onUnmounted(() => {
 </script>
 
 <style scoped>
-.atc-scene {
-  min-height: 100vh;
+/* ═══════ LAYOUT ═══════ */
+.setup-container {
   max-width: 460px;
-  margin: 0 auto;
-  padding: 0 12px 24px;
+  padding-top: 32px;
 }
 
-/* ═══════ SETUP SCREEN ═══════ */
+.session-layout {
+  max-width: 500px;
+  margin: 0 auto;
+  padding: 4px 12px 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+/* ═══════ SETUP ═══════ */
 .setup-header {
   display: flex;
   align-items: center;
   gap: 10px;
-  padding: 32px 0 16px;
-}
-
-.setup-title {
-  font-size: 1.5rem;
-  font-weight: 700;
-  letter-spacing: -0.02em;
-}
-
-.setup-sub {
-  font-size: 0.75rem;
-  color: var(--t3);
-  margin-left: auto;
+  padding-bottom: 16px;
 }
 
 .setup-form {
@@ -527,8 +725,16 @@ onUnmounted(() => {
   color: var(--t3);
 }
 
-.setup-input {
-  background: rgba(255, 255, 255, 0.05);
+.setup-row {
+  display: flex;
+  gap: 10px;
+}
+
+/* ═══════ SHARED INPUT ═══════ */
+.input-field {
+  background: linear-gradient(180deg,
+    color-mix(in srgb, var(--text) 7%, transparent),
+    color-mix(in srgb, var(--text) 3%, transparent));
   border: 1px solid var(--glass-border);
   border-radius: 10px;
   padding: 10px 12px;
@@ -540,80 +746,20 @@ onUnmounted(() => {
   transition: border-color 0.2s;
 }
 
-.setup-input:focus {
-  border-color: var(--accent);
+.input-field:focus {
+  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
 }
 
-.setup-input::placeholder {
+.input-field::placeholder {
   color: var(--t3);
 }
 
-.setup-row {
-  display: flex;
-  gap: 10px;
-}
-
-.setup-start-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  padding: 14px;
-  margin-top: 4px;
-  border-radius: 12px;
-  background: linear-gradient(135deg, var(--accent), var(--accent2));
-  color: #000;
-  font-weight: 700;
-  font-size: 0.95rem;
-  letter-spacing: 0.02em;
-  border: none;
-  cursor: pointer;
-  transition: opacity 0.2s, transform 0.15s;
-}
-
-.setup-start-btn:disabled {
-  opacity: 0.4;
-  cursor: not-allowed;
-}
-
-.setup-start-btn:not(:disabled):active {
-  transform: scale(0.97);
-}
-
-.setup-demo-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  padding: 10px;
-  border-radius: 10px;
-  background: rgba(255, 255, 255, 0.05);
-  border: 1px solid var(--glass-border);
-  color: var(--t2);
-  font-size: 0.8rem;
-  cursor: pointer;
-  transition: background 0.2s;
-}
-
-.setup-demo-btn:hover {
-  background: rgba(255, 255, 255, 0.08);
-}
-
-/* ═══════ SESSION SCREEN ═══════ */
-.atc-session {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  padding-top: 4px;
-}
-
-/* Flight Header */
+/* ═══════ FLIGHT HEADER ═══════ */
 .flight-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 10px 14px !important;
-  border-radius: var(--glass-radius) !important;
+  padding: 10px 14px;
   margin-top: 8px;
 }
 
@@ -631,18 +777,13 @@ onUnmounted(() => {
   letter-spacing: 0.04em;
 }
 
-.flight-route {
-  font-size: 0.8rem;
-  color: var(--t2);
-}
-
 .flight-header-right {
   display: flex;
   align-items: center;
   gap: 8px;
 }
 
-.flight-phase-badge {
+.phase-badge {
   display: flex;
   align-items: center;
   gap: 5px;
@@ -681,24 +822,11 @@ onUnmounted(() => {
   color: var(--t2);
 }
 
-.telem-indicator {
-  display: flex;
-  align-items: center;
-}
+.telem-on { color: #22c55e; display: flex; align-items: center; }
+.telem-off { color: var(--t3); opacity: 0.4; display: flex; align-items: center; }
 
-.telem-indicator--on {
-  color: #22c55e;
-}
-
-.telem-indicator--off {
-  color: var(--t3);
-  opacity: 0.4;
-}
-
-/* Latest ATC Message */
-.latest-atc {
-  padding: 12px 14px !important;
-}
+/* ═══════ LATEST ATC ═══════ */
+.latest-atc { padding: 12px 14px; }
 
 .latest-atc-header {
   display: flex;
@@ -715,20 +843,13 @@ onUnmounted(() => {
   font-weight: 600;
 }
 
-.speaking-indicator {
-  display: flex;
-  gap: 3px;
-  margin-left: 4px;
-}
+.speaking-indicator { display: flex; gap: 3px; margin-left: 4px; }
 
 .speaking-dot {
-  width: 4px;
-  height: 4px;
-  border-radius: 50%;
+  width: 4px; height: 4px; border-radius: 50%;
   background: var(--accent);
   animation: speak-bounce 0.8s ease-in-out infinite;
 }
-
 .speaking-dot:nth-child(2) { animation-delay: 0.15s; }
 .speaking-dot:nth-child(3) { animation-delay: 0.3s; }
 
@@ -744,7 +865,72 @@ onUnmounted(() => {
   color: var(--text);
 }
 
-/* Emergency */
+/* ═══════ PILOT SUGGESTIONS ═══════ */
+.suggestions-section {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.suggestions-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 0.72rem;
+  font-weight: 600;
+  color: var(--t3);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  padding: 0 2px;
+}
+
+.suggestions-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.suggestion-btn {
+  text-align: left;
+  white-space: normal;
+  line-height: 1.4;
+  padding: 8px 12px;
+  font-size: 0.82rem;
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: manipulation;
+}
+
+.suggestion-text {
+  font-family: 'SF Mono', 'Fira Code', monospace;
+  font-size: 0.8rem;
+}
+
+.suggestion-intent {
+  font-size: 0.78rem;
+  color: var(--t2);
+}
+
+.suggestion-btn--atc {
+  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
+  background: color-mix(in srgb, var(--accent) 8%, transparent);
+}
+
+.suggestion-btn--disabled { opacity: 0.35; }
+
+.suggestion-edit {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+}
+
+.suggestion-edit .input-field {
+  flex: 1;
+  font-size: 0.85rem;
+  padding: 8px 10px;
+}
+
+/* ═══════ EMERGENCY ═══════ */
 .emergency-row {
   display: flex;
   align-items: center;
@@ -753,50 +939,29 @@ onUnmounted(() => {
 }
 
 .emergency-btn {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  padding: 6px 12px;
-  border-radius: 8px;
   background: rgba(239, 68, 68, 0.1);
-  border: 1px solid rgba(239, 68, 68, 0.3);
+  border-color: rgba(239, 68, 68, 0.3);
   color: #ef4444;
-  font-size: 0.7rem;
   font-weight: 700;
   letter-spacing: 0.05em;
-  cursor: pointer;
-  transition: background 0.2s;
 }
 
-.emergency-btn:hover {
-  background: rgba(239, 68, 68, 0.2);
-}
+.emergency-btn:hover { background: rgba(239, 68, 68, 0.2); }
 
-.emergency-menu {
-  display: flex;
-  gap: 6px;
-  padding: 6px !important;
-  border-radius: 10px !important;
-}
+.emergency-menu { display: flex; gap: 6px; padding: 6px; }
 
-.emergency-option {
-  padding: 8px 16px;
-  border-radius: 8px;
-  font-size: 0.75rem;
+.emergency-opt--mayday {
+  background: #ef4444 !important;
+  color: #fff !important;
+  border-color: #ef4444 !important;
   font-weight: 700;
-  letter-spacing: 0.05em;
-  cursor: pointer;
-  border: none;
 }
 
-.emergency-option--mayday {
-  background: #ef4444;
-  color: #fff;
-}
-
-.emergency-option--panpan {
-  background: #f59e0b;
-  color: #000;
+.emergency-opt--panpan {
+  background: #f59e0b !important;
+  color: #000 !important;
+  border-color: #f59e0b !important;
+  font-weight: 700;
 }
 
 .emergency-active-badge {
@@ -813,20 +978,16 @@ onUnmounted(() => {
   animation: emergency-blink 0.6s ease-in-out infinite;
 }
 
-/* Communication Log */
-.comm-log {
-  margin-top: 4px;
-}
+/* ═══════ COMM LOG ═══════ */
+.comm-log { margin-top: 4px; }
 
 .comm-log-header {
   display: flex;
   align-items: center;
   gap: 6px;
-  font-size: 0.75rem;
-  font-weight: 600;
-  color: var(--t3);
   text-transform: uppercase;
   letter-spacing: 0.06em;
+  font-weight: 600;
   margin-bottom: 6px;
   padding: 0 2px;
 }
@@ -840,29 +1001,18 @@ onUnmounted(() => {
   scroll-behavior: smooth;
 }
 
-.comm-log-scroll::-webkit-scrollbar {
-  width: 4px;
-}
-
+.comm-log-scroll::-webkit-scrollbar { width: 4px; }
 .comm-log-scroll::-webkit-scrollbar-thumb {
   background: var(--glass-border);
   border-radius: 2px;
 }
 
-.comm-log-empty {
-  text-align: center;
-  padding: 24px;
-  color: var(--t3);
-  font-size: 0.8rem;
-}
+.comm-log-empty { text-align: center; padding: 24px; }
 
-/* Settings */
-.settings-panel {
-  margin-top: 4px;
-  border-radius: var(--glass-radius) !important;
-}
+/* ═══════ DEBUG & SETTINGS ═══════ */
+.debug-panel, .settings-panel { margin-top: 4px; }
 
-.settings-summary {
+.debug-summary, .settings-summary {
   display: flex;
   align-items: center;
   gap: 6px;
@@ -873,14 +1023,32 @@ onUnmounted(() => {
   user-select: none;
 }
 
-.settings-body {
+.debug-body, .settings-body {
   padding: 0 14px 14px;
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  gap: 12px;
 }
 
-.setting-row {
+.debug-presets {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.btn-active {
+  border-color: color-mix(in srgb, var(--accent) 60%, transparent) !important;
+  color: var(--accent) !important;
+  background: color-mix(in srgb, var(--accent) 14%, transparent) !important;
+}
+
+.debug-sliders {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.debug-slider-row, .setting-row {
   display: flex;
   align-items: center;
   gap: 10px;
@@ -888,31 +1056,54 @@ onUnmounted(() => {
   color: var(--t2);
 }
 
-.setting-row label {
+.debug-slider-row label, .setting-row label {
   min-width: 100px;
   color: var(--t3);
   font-size: 0.75rem;
 }
 
-.setting-row input[type="range"] {
+.debug-slider-row input[type="range"], .setting-row input[type="range"] {
   flex: 1;
   accent-color: var(--accent);
 }
 
-.setting-row input[type="checkbox"] {
+.debug-slider-row input[type="checkbox"], .setting-row input[type="checkbox"] {
   accent-color: var(--accent);
 }
 
-.setting-value {
+.debug-value {
   font-family: 'SF Mono', 'Fira Code', monospace;
   font-size: 0.75rem;
   color: var(--accent);
-  min-width: 32px;
+  min-width: 50px;
   text-align: right;
 }
 
-.setting-hint {
-  font-size: 0.65rem;
-  color: var(--t3);
+.debug-state {
+  border-top: 1px solid var(--border, rgba(255,255,255,.1));
+  padding-top: 10px;
+}
+
+.debug-state-title {
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  margin-bottom: 6px;
+}
+
+.debug-state-row {
+  display: flex;
+  gap: 8px;
+  font-size: 0.78rem;
+  color: var(--t2);
+  padding: 1px 0;
+}
+
+.debug-state-row span { color: var(--t3); min-width: 90px; }
+
+.debug-state-row code {
+  font-family: 'SF Mono', 'Fira Code', monospace;
+  font-size: 0.75rem;
+  color: var(--accent);
 }
 </style>
diff --git a/shared/atc/engine.ts b/shared/atc/engine.ts
index 003fa18..c8ea8c9 100644
--- a/shared/atc/engine.ts
+++ b/shared/atc/engine.ts
@@ -1,6 +1,6 @@
 import { reactive, computed } from 'vue'
 import type { EngineState, FlightPlan, FlightVars, TelemetryState, Transmission,
-  TransmissionDebug, RouteRequest, RouteCandidate, RouteResponse, Phase } from './types'
+  TransmissionDebug, RouteRequest, RouteCandidate, RouteResponse, Phase, Interaction } from './types'
 import { getPhase } from './phases'
 import { renderTemplate } from './templateRenderer'
 import { evaluateTelemetry } from './telemetryWatcher'
@@ -47,6 +47,16 @@ export interface AtcEngineOptions {
   apiFetch?: typeof $fetch
 }
 
+/** Info about an interaction for the UI — includes availability status */
+export interface InteractionSuggestion {
+  id: string
+  type: Interaction['type']
+  intent: string
+  example: string | undefined
+  available: boolean
+  whenKey?: string
+}
+
 export function useAtcEngine(options: AtcEngineOptions = {}) {
   const fetchFn = options.apiFetch ?? $fetch
   const state = reactive<EngineState>(makeDefaultState())
@@ -92,14 +102,16 @@ export function useAtcEngine(options: AtcEngineOptions = {}) {
     }
   }
 
+  function isWhenSatisfied(when: string | undefined): boolean {
+    if (!when) return true
+    return !!state.vars[when]
+  }
+
   function getCandidates(): RouteCandidate[] {
     const phase = currentPhase.value
     if (!phase) return []
     return phase.interactions
-      .filter((i) => {
-        if (!i.when) return true
-        return !!state.vars[i.when]
-      })
+      .filter((i) => isWhenSatisfied(i.when))
       .map((i) => ({
         id: i.id,
         intent: i.pilotIntent,
@@ -107,6 +119,20 @@ export function useAtcEngine(options: AtcEngineOptions = {}) {
       }))
   }
 
+  /** Get ALL interactions of current phase with availability info for UI buttons */
+  function getInteractionSuggestions(): InteractionSuggestion[] {
+    const phase = currentPhase.value
+    if (!phase) return []
+    return phase.interactions.map((i) => ({
+      id: i.id,
+      type: i.type,
+      intent: i.pilotIntent,
+      example: i.pilotExample ? renderTemplate(i.pilotExample, state.vars) : undefined,
+      available: isWhenSatisfied(i.when),
+      whenKey: i.when,
+    }))
+  }
+
   function checkReadback(
     text: string,
     required: string[],
@@ -150,6 +176,45 @@ export function useAtcEngine(options: AtcEngineOptions = {}) {
     return null
   }
 
+  /**
+   * Process an atc_initiates interaction directly (no LLM routing needed).
+   * Returns the ATC response text.
+   */
+  function processAtcInitiated(interactionId: string): string | null {
+    const phase = currentPhase.value
+    if (!phase) return null
+    const interaction = phase.interactions.find(i => i.id === interactionId)
+    if (!interaction) return null
+
+    let variablesUpdated: Record<string, any> = {}
+    if (interaction.updates) {
+      variablesUpdated = applyUpdates(interaction.updates)
+    }
+
+    const atcText = renderTemplate(interaction.atcResponse, state.vars)
+    state.currentInteraction = interaction.id
+
+    if (interaction.readback) {
+      state.waitingFor = 'readback'
+    } else {
+      state.waitingFor = 'pilot'
+    }
+
+    logTransmission('atc', atcText, {
+      engineAction: {
+        templateUsed: interaction.atcResponse,
+        variablesUpdated,
+      },
+    })
+
+    if (interaction.handoff) {
+      const handoffMsg = handleHandoff(interaction.handoff, state.vars)
+      if (handoffMsg) return `${atcText}\n${handoffMsg}`
+    }
+
+    return atcText
+  }
+
   // --- Public API ---
 
   function initFlight(plan: FlightPlan): void {
@@ -193,8 +258,37 @@ export function useAtcEngine(options: AtcEngineOptions = {}) {
     const phase = currentPhase.value
     if (!phase) throw new Error(`Phase not found: ${state.currentPhase}`)
 
+    // Handle off_schema gracefully
+    if (res.chosen === 'off_schema') {
+      const sayAgain = `${state.vars.callsign}, say again.`
+      logTransmission('atc', sayAgain, {
+        llmResponse: {
+          chosenInteraction: 'off_schema',
+          confidence: res.confidence,
+          reason: res.reason,
+          tokensUsed: res.tokensUsed,
+          durationMs: res.durationMs,
+          model: res.model,
+        },
+      })
+      return sayAgain
+    }
+
     const interaction = phase.interactions.find(i => i.id === res.chosen)
-    if (!interaction) throw new Error(`Interaction not found: ${res.chosen}`)
+    if (!interaction) {
+      const sayAgain = `${state.vars.callsign}, say again.`
+      logTransmission('atc', sayAgain, {
+        llmResponse: {
+          chosenInteraction: res.chosen,
+          confidence: res.confidence,
+          reason: `Interaction not found: ${res.chosen}`,
+          tokensUsed: res.tokensUsed,
+          durationMs: res.durationMs,
+          model: res.model,
+        },
+      })
+      return sayAgain
+    }
 
     // 4b. Fetch taxi route if needed (before rendering template)
     if (
@@ -307,6 +401,8 @@ export function useAtcEngine(options: AtcEngineOptions = {}) {
     currentPhase,
     initFlight,
     handlePilotInput,
+    processAtcInitiated,
+    getInteractionSuggestions,
     updateTelemetry,
     declareEmergency,
     reset,
diff --git a/shared/atc/phases/ground.ts b/shared/atc/phases/ground.ts
index 50d1a3d..4f34b7b 100644
--- a/shared/atc/phases/ground.ts
+++ b/shared/atc/phases/ground.ts
@@ -23,7 +23,7 @@ export const groundPhase: Phase = {
     {
       id: 'request_taxi',
       type: 'pilot_initiates',
-      when: 'vars.pushback_approved',
+      when: 'pushback_approved',
       pilotIntent: 'Pilot requests taxi clearance to the runway',
       pilotExample: '{callsign}, request taxi',
       atcResponse: '{callsign}, taxi to holding point {runway} via {taxi_route}.',
@@ -37,7 +37,7 @@ export const groundPhase: Phase = {
     {
       id: 'report_holding_short',
       type: 'pilot_initiates',
-      when: 'vars.taxi_clearance_received',
+      when: 'taxi_clearance_received',
       pilotIntent: 'Pilot reports holding short of the runway',
       pilotExample: '{callsign}, holding short runway {runway}',
       atcResponse: '{callsign}, contact tower on {tower_freq}.',