From d6f22f99e85eee09594d08b15eeedd914aa7521a Mon Sep 17 00:00:00 2001
From: Ivan Kalachikov <ivan.kalachikov@gmail.com>
Date: Fri, 6 Mar 2026 13:48:13 +0000
Subject: [PATCH 01/22] docs: add detailed Orbital UI design specification
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Complete design spec for Concept 1 "Orbital" — spatial depth / celestial
theme with aurora palette, glassmorphic panels, particle visualization,
and starfield parallax background.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../2026-03-06-orbital-concept-refined.md     | 1161 +++++++++++++++++
 1 file changed, 1161 insertions(+)
 create mode 100644 docs/design/2026-03-06-orbital-concept-refined.md

diff --git a/docs/design/2026-03-06-orbital-concept-refined.md b/docs/design/2026-03-06-orbital-concept-refined.md
new file mode 100644
index 0000000..7e7aac4
--- /dev/null
+++ b/docs/design/2026-03-06-orbital-concept-refined.md
@@ -0,0 +1,1161 @@
+# Orbital — Refined Design Specification
+
+> Spatial Depth / Celestial. Aurora palette on deep space black.
+> "You're floating above Earth at night, watching airport lights glow below."
+
+---
+
+## 1. Design System
+
+### 1.1 Color Palette
+
+| Token                  | Value                           | Usage                                      |
+|------------------------|---------------------------------|---------------------------------------------|
+| `--bg`                 | `#080812`                       | Page background, deepest layer              |
+| `--bg-gradient-from`   | `#0D0B1A`                       | Aurora gradient start (deep purple)         |
+| `--bg-gradient-to`     | `#0A1A1A`                       | Aurora gradient end (dark teal)             |
+| `--surface`            | `rgba(255, 255, 255, 0.04)`     | Panel resting state background              |
+| `--surface-active`     | `rgba(255, 255, 255, 0.10)`     | Panel active/interacted state               |
+| `--glass-border`       | `rgba(255, 255, 255, 0.08)`     | Panel border resting                        |
+| `--glass-border-active`| `rgba(255, 255, 255, 0.18)`     | Panel border active                         |
+| `--text-primary`       | `#E8E8EC`                       | Primary text (light gray)                   |
+| `--text-dim`           | `rgba(232, 232, 236, 0.5)`      | Secondary text, labels                      |
+| `--text-muted`         | `rgba(232, 232, 236, 0.25)`     | Disabled, decorative, ghost text            |
+| `--accent-warm`        | `#FFCC66`                       | Music particles, music-active elements      |
+| `--accent-warm-glow`   | `rgba(255, 204, 102, 0.25)`     | Music glow/shadow                           |
+| `--accent-cool`        | `#44FFBB`                       | Airport particles, airport-active elements  |
+| `--accent-cool-glow`   | `rgba(68, 255, 187, 0.25)`      | Airport glow/shadow                         |
+| `--accent-neutral`     | `#AA88FF`                       | Shared UI accents (sphere, app name)        |
+| `--accent-neutral-glow`| `rgba(170, 136, 255, 0.3)`      | Sphere outer glow                           |
+| `--error`              | `#FF6655`                       | Error states                                |
+| `--warning`            | `#FFB844`                       | Buffering states                            |
+| `--star-color`         | `rgba(255, 255, 255, 0.6)`      | Starfield base point color                  |
+
+### 1.2 Typography
+
+**Display font:** `'Space Grotesk', sans-serif` — weights 400, 500, 700.
+Used for: app name, status text, ghost IATA codes, ghost station names.
+
+**Body font:** `'Inter', sans-serif` — weights 300, 400, 500.
+Used for: lists, labels, controls, footer.
+
+Load both via Google Fonts:
+```html
+<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=Inter:wght@300;400;500&display=swap" rel="stylesheet">
+```
+
+| Element              | Font           | Size   | Weight | Tracking | Transform |
+|----------------------|----------------|--------|--------|----------|-----------|
+| App name             | Space Grotesk  | 18px   | 700    | 0.12em   | uppercase |
+| Ghost IATA code      | Space Grotesk  | 120px  | 700    | 0.05em   | uppercase |
+| Ghost station name   | Space Grotesk  | 80px   | 700    | 0.02em   | none      |
+| Status text          | Space Grotesk  | 14px   | 500    | 0.08em   | uppercase |
+| Station / city name  | Inter          | 14px   | 400    | 0.01em   | none      |
+| IATA code in list    | Inter          | 14px   | 500    | 0.06em   | uppercase |
+| Country code         | Inter          | 12px   | 400    | 0.04em   | uppercase |
+| Data label           | Inter          | 11px   | 400    | 0.08em   | uppercase |
+| Footer               | Inter          | 11px   | 300    | 0.04em   | none      |
+| Volume readout       | Inter          | 11px   | 400    | 0        | none      |
+| Search input         | Inter          | 13px   | 400    | 0        | none      |
+
+### 1.3 Spacing Scale
+
+Base unit: 4px. Multiples: 4, 8, 12, 16, 24, 32, 48, 64.
+
+- Panel inner padding: `24px` (desktop), `16px` (tablet), `12px` (mobile)
+- Gap between panels and sphere: `32px` (desktop), `24px` (mobile)
+- List row height: `44px` (touch-friendly)
+- List row padding: `12px 16px`
+- Volume slider height (visible): `4px`, hit area `24px`
+- Border radius on panels: `16px`
+- Border radius on inputs/buttons: `8px`
+
+### 1.4 Aurora Background
+
+Applied to the root `.layout` as multiple layered radial gradients:
+
+```css
+.layout {
+  background-color: var(--bg);
+  background-image:
+    radial-gradient(ellipse at 20% 50%, rgba(13, 11, 26, 0.8) 0%, transparent 60%),
+    radial-gradient(ellipse at 80% 50%, rgba(10, 26, 26, 0.8) 0%, transparent 60%),
+    radial-gradient(ellipse at 50% 100%, rgba(68, 255, 187, 0.03) 0%, transparent 40%),
+    radial-gradient(ellipse at 50% 0%, rgba(170, 136, 255, 0.04) 0%, transparent 40%);
+}
+```
+
+The gradient ellipse positions animate slowly via CSS `@keyframes aurora` (20s cycle, alternating) to create a living aurora. On `prefers-reduced-motion: reduce`, gradients are static.
+
+```css
+@keyframes aurora {
+  0%, 100% {
+    background-position: 20% 50%, 80% 50%, 50% 100%, 50% 0%;
+  }
+  50% {
+    background-position: 30% 40%, 70% 60%, 40% 90%, 60% 10%;
+  }
+}
+.layout {
+  background-size: 100% 100%;
+  animation: aurora 20s ease-in-out infinite alternate;
+}
+```
+
+---
+
+## 2. Layout
+
+### 2.1 Desktop (>= 1024px)
+
+Centered, vertically balanced composition. The sphere is the focal point.
+
+```
++------------------------------------------------------------------+
+|  HEADER BAR                                                       |
+|  ORBITAL  [breathing dot]                        Now Playing: ... |
++------------------------------------------------------------------+
+|                                                                    |
+|                     * . *    .   *                                 |
+|          .    *          .        .    *                           |
+|  +------------------+           +------------------+              |
+|  | AIRPORT PANEL    |           | MUSIC PANEL      |              |
+|  | [ghost: JFK]     |    ( O )  | [ghost: Synpha]  |              |
+|  |                  |    /   \  |                  |              |
+|  |  > search_       |  particles|  > search_       |              |
+|  |  * SVO Moscow RU |     |     |  * Synphaera     |              |
+|  |    JFK New York  |     |     |    Space Station  |              |
+|  |    NRT Tokyo     |           |    n5MD Radio     |              |
+|  |                  |           |                  |              |
+|  | VOL =========-   |           | VOL ==========   |              |
+|  +------------------+           +------------------+              |
+|          .    *         .   *           .                          |
+|                     .          *    .                              |
+|                                                                    |
++------------------------------------------------------------------+
+|  Footer: Inspired by... | Frontend by... | v0.2.0                 |
++------------------------------------------------------------------+
+```
+
+```css
+.orbital-layout {
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  grid-template-areas:
+    "header"
+    "main"
+    "footer";
+  min-height: 100vh;
+  overflow: hidden;
+  position: relative;
+}
+
+.main-area {
+  grid-area: main;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 32px;
+  padding: 24px;
+  position: relative; /* for starfield canvas */
+}
+```
+
+The two panels flank the central sphere. Each panel has a subtle 3D tilt:
+
+```css
+.panel--left {
+  transform: perspective(800px) rotateY(2deg);
+}
+.panel--right {
+  transform: perspective(800px) rotateY(-2deg);
+}
+```
+
+### 2.2 Tablet (768px - 1023px)
+
+Same horizontal layout but panels narrow, sphere shrinks. The 3D tilt reduces to `1deg`. Panels max-width `280px`.
+
+```css
+@media (max-width: 1023px) {
+  .main-area {
+    gap: 24px;
+    padding: 16px;
+  }
+  .panel--left {
+    transform: perspective(800px) rotateY(1deg);
+  }
+  .panel--right {
+    transform: perspective(800px) rotateY(-1deg);
+  }
+  .panel {
+    max-width: 280px;
+  }
+}
+```
+
+### 2.3 Mobile (< 768px)
+
+The panels collapse to a bottom drawer. The sphere and starfield take the full viewport.
+
+```
++----------------------------------+
+|  HEADER BAR                      |
+|  ORBITAL              Now: SVO   |
++----------------------------------+
+|                                  |
+|        * .    *    .             |
+|    .         .        *   .     |
+|                                  |
+|              ( O )               |
+|             /     \              |
+|          particles               |
+|                                  |
+|     .    *       .    *          |
+|                                  |
++----------------------------------+
+| [Airport tab] [Music tab]        |
+|                                  |
+|  > search_                       |
+|  * SVO  Moscow       RU          |
+|    JFK  New York     US          |
+|    NRT  Tokyo        JP          |
+|                                  |
+|  VOL ===================-  85%   |
++----------------------------------+
+|  Footer                          |
++----------------------------------+
+```
+
+Two tabs at the top of the drawer: "ATC" and "MUSIC". Tap to switch. The drawer has a drag handle and can be collapsed to show just the tab bar (~48px) or expanded to ~50vh.
+
+```css
+@media (max-width: 767px) {
+  .main-area {
+    flex-direction: column;
+    padding-bottom: 0;
+  }
+  .sphere-container {
+    flex: 1;
+  }
+  .panel--left,
+  .panel--right {
+    transform: none; /* no 3D tilt on mobile */
+  }
+  .drawer {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    max-height: 50vh;
+    border-radius: 16px 16px 0 0;
+    background: var(--surface-active);
+    backdrop-filter: blur(20px);
+    transition: transform 0.3s ease;
+  }
+  .drawer--collapsed {
+    transform: translateY(calc(100% - 48px));
+  }
+}
+```
+
+### 2.4 Small Mobile (< 480px)
+
+Same drawer layout. Additional adjustments:
+
+- Sphere reduces from 160px to 100px diameter
+- Ghost text disabled (too large for small screens)
+- Panel padding reduces to 12px
+- Font sizes scale down 1px across the board
+
+---
+
+## 3. Components — Detailed Specification
+
+### 3.1 Header Bar
+
+A slim horizontal bar, height `48px`, glassmorphic background.
+
+| Left                                       | Right                                        |
+|--------------------------------------------|----------------------------------------------|
+| App name `ORBITAL` in `--accent-neutral`, Space Grotesk 700, 18px, tracking 0.12em. A small breathing dot (6px circle) to the right of the name that pulses when playing, dims when paused. | Status text: `NOW PLAYING: SVO / SYNPHAERA` in `--text-dim`, Inter 11px. On mobile, truncated to `SVO / SYNPH...` |
+
+```css
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 24px;
+  height: 48px;
+  background: var(--surface);
+  backdrop-filter: blur(10px);
+  border-bottom: 1px solid var(--glass-border);
+  z-index: 10;
+}
+```
+
+### 3.2 Central Sphere (Play/Pause)
+
+The centerpiece of the entire design. A luminous orb that acts as the global play/pause toggle.
+
+**Dimensions:**
+- Desktop: 160px diameter
+- Tablet: 140px
+- Mobile: 120px
+- Small mobile: 100px
+
+**Structure:** A `<button>` element with layered pseudo-elements and a CSS gradient sphere.
+
+**Paused state (breathing):**
+- Radial gradient sphere: center bright (`rgba(170, 136, 255, 0.3)`), edges transparent
+- Subtle inner highlight to simulate 3D curvature
+- Slow breathing animation: `scale(1) -> scale(1.04) -> scale(1)` over 4s, ease-in-out
+- Dim outer glow: `box-shadow: 0 0 40px var(--accent-neutral-glow)`
+- `cursor: pointer`
+
+```css
+.sphere {
+  width: 160px;
+  height: 160px;
+  border-radius: 50%;
+  background: radial-gradient(
+    circle at 40% 35%,
+    rgba(200, 180, 255, 0.25) 0%,
+    rgba(170, 136, 255, 0.15) 30%,
+    rgba(170, 136, 255, 0.05) 60%,
+    transparent 80%
+  );
+  box-shadow:
+    0 0 40px var(--accent-neutral-glow),
+    inset 0 0 30px rgba(170, 136, 255, 0.1);
+  border: 1px solid rgba(170, 136, 255, 0.15);
+  cursor: pointer;
+  position: relative;
+  transition: box-shadow 0.6s ease, transform 0.6s ease;
+}
+
+.sphere--paused {
+  animation: breathe 4s ease-in-out infinite;
+}
+
+@keyframes breathe {
+  0%, 100% { transform: scale(1); }
+  50% { transform: scale(1.04); }
+}
+```
+
+**Playing state:**
+- Breathing stops, sphere holds at `scale(1.02)`
+- Glow intensifies: `box-shadow: 0 0 60px var(--accent-neutral-glow), 0 0 120px rgba(170, 136, 255, 0.15)`
+- Concentric light rings expand outward from the sphere (see section 5.1)
+- Inner gradient brightens
+
+```css
+.sphere--playing {
+  transform: scale(1.02);
+  box-shadow:
+    0 0 60px var(--accent-neutral-glow),
+    0 0 120px rgba(170, 136, 255, 0.15);
+}
+```
+
+**Buffering state:**
+- Sphere pulses faster: `scale(1) -> scale(1.06)` over 1.5s
+- Glow color shifts to `--warning` (amber)
+- A thin ring orbits the sphere (loading indicator)
+
+**Error state:**
+- Glow shifts to `--error` (red-orange)
+- Sphere dims, no pulse
+- Single flash animation then static
+
+**Accessibility:**
+- `role="button"`
+- `aria-label="Toggle playback. Currently playing"` / `"Currently paused"`
+- `tabindex="0"`
+- Focus ring: `outline: 2px solid var(--accent-neutral)` offset `4px`
+
+### 3.3 Particle Visualization System
+
+The primary audio visualization. Particles orbit the central sphere on a shared `<canvas>` element that sits behind the sphere (z-index layering).
+
+**Canvas sizing:**
+- Fills the `.main-area` container
+- Sized via `ResizeObserver` + `devicePixelRatio` for sharp rendering
+- Positioned `absolute`, `inset: 0`, behind panels (`z-index: 0`)
+
+**Two particle systems on one canvas:**
+
+#### Music Particles (Inner Orbit)
+- **Color:** `--accent-warm` (#FFCC66), varying opacity 0.4-1.0
+- **Count:** 40-60 particles
+- **Orbit radius:** sphere radius + 20px to sphere radius + 80px
+- **Size:** 2-5px circles with soft edges (`shadowBlur: 4`)
+- **Movement:** Smooth, continuous flow. Particles drift along elliptical paths at varying speeds (0.2-0.8 rad/s). Audio amplitude modulates orbit radius (louder = wider orbit, ±15px). Audio frequency bands modulate individual particle brightness.
+- **Behavior:** Graceful, flowing. Like fireflies on a lazy orbit.
+
+#### Airport Particles (Outer Orbit)
+- **Color:** `--accent-cool` (#44FFBB), varying opacity 0.3-1.0
+- **Count:** 30-50 particles
+- **Orbit radius:** sphere radius + 90px to sphere radius + 160px
+- **Size:** 1.5-4px circles
+- **Movement:** Jittery, irregular. Particles follow rough orbital paths but with randomized acceleration bursts when voice activity is detected. Audio amplitude modulates particle speed (louder = faster, more erratic). Audio frequency bands modulate particle count (more high-frequency energy = more particles visible).
+- **Behavior:** Twitchy, reactive. Like radio static visualized as light.
+
+#### Shared Rendering Logic
+
+```js
+// Per frame (requestAnimationFrame):
+// 1. Clear canvas with slight trail (fillRect with alpha 0.05 for motion blur)
+// 2. Update music particle positions (smooth sine/cosine orbits + audio offset)
+// 3. Update airport particle positions (orbits + audio jitter + voice burst detection)
+// 4. Draw all particles with glow (shadowBlur + shadowColor per particle type)
+// 5. Skip if document.hidden
+```
+
+**Trail effect:** Instead of fully clearing the canvas each frame, draw a semi-transparent rect over it (`rgba(8, 8, 18, 0.08)`). This creates comet-like trails behind fast-moving particles.
+
+**When paused:** Particles slow to a lazy drift (10% normal speed). No audio modulation. Count reduces to 20 per system. Creates a serene idle state.
+
+**When no audio connected:** Particles drift at minimal count (10 each), very dim. A text label appears on the canvas center: `NO SIGNAL` in `--text-muted`.
+
+**Performance:**
+- Use `requestAnimationFrame`, skip on `document.hidden`
+- On mobile: reduce particle count by 50%
+- Use object pooling (pre-allocate particle array, no GC pressure)
+- Target 60fps; if frame budget exceeded, reduce particle count dynamically
+
+### 3.4 Starfield Background
+
+A separate `<canvas>` element behind everything, rendering a static starfield with parallax.
+
+**Star generation (once on mount):**
+- 200 stars (desktop), 100 (mobile)
+- Random positions across the canvas
+- Random sizes: 0.5px - 2px
+- Random base brightness: 0.2 - 0.8
+- Each star assigned a depth layer (1-3) for parallax multiplier
+
+**Parallax — Mouse + Audio:**
+
+Desktop: Mouse position relative to viewport center drives star offset. Each star shifts by `(mouseX - centerX) * depth * 0.02` px. Creates a subtle 3D depth effect.
+
+Mobile: Falls back to slow auto-drift (gentle sine wave motion, 30s cycle).
+
+Audio: Music amplitude modulates star brightness globally (louder = brighter stars, ±20% of base brightness). Airport audio modulates a subtle twinkle rate (voice activity makes stars flicker faster).
+
+```js
+// Parallax calculation per frame:
+const offsetX = (mouseX - centerX) * star.depth * 0.02;
+const offsetY = (mouseY - centerY) * star.depth * 0.015;
+const brightness = star.baseBrightness + musicAmplitude * 0.2;
+```
+
+**Rendering:**
+- Simple `fillRect` or `arc` per star
+- No blur effects (performance)
+- Stars that drift off-screen wrap to the opposite edge
+- Drawn once per frame in the rAF loop shared with particles
+
+### 3.5 Airport Panel
+
+A glassmorphic panel floating to the left of the sphere (desktop) or in the bottom drawer (mobile).
+
+**Visual:**
+
+```css
+.panel {
+  background: var(--surface);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  border: 1px solid var(--glass-border);
+  border-radius: 16px;
+  padding: 24px;
+  width: 320px;
+  max-height: 60vh;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  overflow: hidden;
+  transition: background 0.3s ease, border-color 0.3s ease, backdrop-filter 0.3s ease;
+}
+
+/* Adaptive glassmorphism — more opaque on interaction */
+.panel:hover,
+.panel:focus-within {
+  background: var(--surface-active);
+  backdrop-filter: blur(20px);
+  border-color: var(--glass-border-active);
+}
+```
+
+**Ghost IATA code** behind the panel content:
+
+```css
+.panel__ghost {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-family: 'Space Grotesk', sans-serif;
+  font-size: 120px;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  color: var(--text-muted); /* rgba(232, 232, 236, 0.25) */
+  pointer-events: none;
+  user-select: none;
+  white-space: nowrap;
+  transition: opacity 0.4s ease;
+}
+```
+
+The ghost text updates when the airport selection changes — crossfade transition (old fades out, new fades in over 400ms).
+
+**Layout inside the panel:**
+
+```
+ ATC FEED
+ +---------------------------------+
+ | > search_                       |
+ +---------------------------------+
+ | * SVO  Moscow           RU      |  <- selected (accent-cool)
+ |   JFK  New York         US      |  <- dim
+ |   NRT  Tokyo            JP      |
+ |   HKG  Hong Kong        HK      |
+ |   ...                           |
+ +---------------------------------+
+ | VOL ===================-  85%   |
+ +---------------------------------+
+```
+
+**Section label:** `ATC FEED` in Inter 11px, `--text-dim`, uppercase, tracking 0.08em. Margin-bottom 12px.
+
+**Search input:**
+- Full width, Inter 13px, `--text-primary`
+- Background: `rgba(255, 255, 255, 0.04)`
+- Border: `1px solid var(--glass-border)`
+- Border-radius: `8px`
+- Placeholder: `Search airports...` in `--text-muted`
+- Height: `36px` (desktop), `44px` (touch devices via `@media (pointer: coarse)`)
+- On focus: border-color transitions to `--accent-cool`
+- Filters the list on each keypress (case-insensitive match against city, IATA, ICAO, country)
+
+**Airport list:**
+- Scrollable area, max-height: `300px` (desktop), `40vh` (mobile drawer)
+- Custom scrollbar: thin (4px), thumb `rgba(255, 255, 255, 0.15)`, track transparent
+
+Each row:
+
+| Element | Style |
+|---|---|
+| Active indicator `*` | `--accent-cool`, only on selected row |
+| IATA code | Inter 14px, weight 500, tracking 0.06em, uppercase |
+| City name | Inter 14px, weight 400 |
+| Country code | Inter 12px, `--text-dim`, right-aligned |
+
+- Selected row: all text in `--accent-cool`, left border `2px solid var(--accent-cool)`, subtle `box-shadow: inset 4px 0 8px var(--accent-cool-glow)`
+- Unselected rows: `--text-dim`
+- Hover: text brightens to `--text-primary`, background `rgba(255, 255, 255, 0.03)`
+- Row height: `44px`, full-width clickable
+- No country flags (breaks glass aesthetic)
+
+**Volume slider:**
+- Label `VOL` in Inter 11px, `--text-dim`
+- Percentage readout right-aligned: `85%` in Inter 11px
+- Slider: `<input type="range">` restyled
+- Track: `4px` height, background `rgba(255, 255, 255, 0.08)`, border-radius `2px`
+- Fill: `var(--accent-cool)`, via CSS gradient or `linear-gradient` on the track
+- Thumb: `12px` circle, `var(--accent-cool)`, `box-shadow: 0 0 8px var(--accent-cool-glow)`
+- Hit area: `24px` tall (padding on the input)
+- `transition: all 0.15s linear`
+
+### 3.6 Music Panel
+
+Same structure as Airport Panel, adapted for music data. Positioned to the right of the sphere (desktop) or second tab in drawer (mobile).
+
+**Ghost station name** behind the panel — same technique as airport ghost IATA, but showing the station name in Space Grotesk 80px (truncated to fit, ~6 characters visible).
+
+**Layout:**
+
+```
+ MUSIC FEED
+ +---------------------------------+
+ | > search_                       |
+ +---------------------------------+
+ | * Synphaera Radio               |  <- selected (accent-warm)
+ |   Space Station Soma            |  <- dim
+ |   n5MD Radio                    |
+ |   Groove Salad Classic          |
+ |   ...                           |
+ +---------------------------------+
+ | VOL ===================  100%   |
+ +---------------------------------+
+```
+
+- Section label: `MUSIC FEED`
+- Active accent: `--accent-warm` (#FFCC66) instead of `--accent-cool`
+- Each row shows station name only (no images, no thumbnails — breaks glass aesthetic)
+- Station description: appears as a second line below the name on hover/focus, in `--text-dim`, Inter 12px, max 1 line with ellipsis. On touch devices, shown on tap (toggle).
+- Search filters on station name and description
+- Volume slider uses `--accent-warm` for fill and thumb
+
+### 3.7 Footer
+
+A single-line footer, minimal, always visible.
+
+```
+Inspired by listentothe.cloud  |  Frontend by Kalachikov  |  Design by Emelyanova  |  v0.2.0
+```
+
+- Height: `36px`
+- Background: `var(--surface)`, `backdrop-filter: blur(6px)`
+- Border-top: `1px solid var(--glass-border)`
+- Text: Inter 11px, weight 300, `--text-dim`
+- Items separated by ` | ` (pipe with spaces)
+- Links: `--text-primary` on hover, underline
+- Padding: `0 24px`
+- On mobile: horizontally scrollable if overflow, or wrap to 2 lines
+
+### 3.8 Toast Notifications
+
+Restyled to match Orbital aesthetic:
+
+```css
+.toast {
+  background: var(--surface-active);
+  backdrop-filter: blur(16px);
+  border: 1px solid var(--glass-border-active);
+  border-radius: 12px;
+  color: var(--text-primary);
+  font-family: 'Inter', sans-serif;
+  font-size: 13px;
+  padding: 12px 20px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+}
+.toast--error {
+  border-color: var(--error);
+  color: var(--error);
+}
+.toast--warning {
+  border-color: var(--warning);
+  color: var(--warning);
+}
+```
+
+Positioned top-center. Fade + slide-down transition (translate from -20px to 0). Auto-dismiss after 3s.
+
+---
+
+## 4. Interaction Patterns
+
+### 4.1 Keyboard Navigation
+
+| Key             | Action                                          |
+|-----------------|-------------------------------------------------|
+| `Space`         | Toggle play/pause (global, when no input focused)|
+| `Tab`           | Navigate between sphere, airport panel, music panel |
+| `Up` / `Down`   | Navigate list items (when panel is focused)      |
+| `Enter`         | Select highlighted item                          |
+| `/` or `Ctrl+K` | Focus search input in the last-focused panel     |
+| `Esc`           | Clear search, blur input, collapse mobile drawer |
+| `[` / `]`       | Decrease/increase music volume by 10%            |
+| `{` / `}`       | Decrease/increase airport volume by 10%          |
+
+### 4.2 Click/Touch Targets
+
+- Central sphere: entire element is clickable, min 100px (smallest on small mobile)
+- List rows: full-width, min `44px` height
+- Volume sliders: visible track `4px` but hit area `24px` via padding; on `@media (pointer: coarse)` hit area increases to `44px`
+- Search inputs: `44px` height on touch devices
+- Tab bar (mobile drawer): each tab `48px` height, 50% width
+
+### 4.3 Focus States
+
+Glassmorphic focus — no hard outlines, use glow:
+
+```css
+*:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--accent-neutral), 0 0 12px var(--accent-neutral-glow);
+}
+
+/* For text elements within panels, use accent color matching the panel */
+.panel--airport *:focus-visible {
+  box-shadow: 0 0 0 2px var(--accent-cool), 0 0 12px var(--accent-cool-glow);
+}
+.panel--music *:focus-visible {
+  box-shadow: 0 0 0 2px var(--accent-warm), 0 0 12px var(--accent-warm-glow);
+}
+```
+
+### 4.4 Panel 3D Tilt on Hover (Desktop)
+
+Panels have a base tilt (`rotateY(±2deg)`). On mouse hover, a micro-parallax effect amplifies the tilt based on cursor position within the panel:
+
+```js
+// On mousemove over .panel--left:
+const rect = panel.getBoundingClientRect();
+const x = (e.clientX - rect.left) / rect.width - 0.5; // -0.5 to 0.5
+const y = (e.clientY - rect.top) / rect.height - 0.5;
+panel.style.transform = `perspective(800px) rotateY(${2 + x * 3}deg) rotateX(${-y * 2}deg)`;
+```
+
+On mouse leave, spring back to base tilt with `transition: transform 0.4s ease-out`.
+
+### 4.5 Mobile Drawer Interaction
+
+- Drag handle: `40px x 4px` rounded bar, centered at top of drawer, `--text-muted`
+- Swipe up to expand, swipe down to collapse
+- Snap points: collapsed (`48px` visible — just the tab bar), expanded (`50vh`)
+- Touch-driven via pointer events, no library needed
+- Transition: `transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)`
+
+---
+
+## 5. Animations
+
+### 5.1 Sphere Concentric Rings (Playing State)
+
+When playing, rings of light expand outward from the sphere every 3s:
+
+```css
+@keyframes ring-expand {
+  0% {
+    transform: scale(1);
+    opacity: 0.4;
+    border-width: 2px;
+  }
+  100% {
+    transform: scale(2.5);
+    opacity: 0;
+    border-width: 0.5px;
+  }
+}
+
+.sphere__ring {
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  border: 2px solid var(--accent-neutral);
+  pointer-events: none;
+  animation: ring-expand 3s ease-out infinite;
+}
+
+/* Stagger 3 rings */
+.sphere__ring:nth-child(1) { animation-delay: 0s; }
+.sphere__ring:nth-child(2) { animation-delay: 1s; }
+.sphere__ring:nth-child(3) { animation-delay: 2s; }
+```
+
+Three `<span>` elements inside the sphere button, staggered by 1s. Creates a continuous radar-ping effect. Hidden when paused.
+
+### 5.2 Breathing Animation (Paused Sphere)
+
+```css
+@keyframes breathe {
+  0%, 100% {
+    transform: scale(1);
+    box-shadow: 0 0 40px var(--accent-neutral-glow);
+  }
+  50% {
+    transform: scale(1.04);
+    box-shadow: 0 0 60px var(--accent-neutral-glow);
+  }
+}
+
+.sphere--paused {
+  animation: breathe 4s ease-in-out infinite;
+}
+```
+
+### 5.3 Buffering Spinner Ring
+
+A thin ring that orbits the sphere during buffering:
+
+```css
+@keyframes orbit-ring {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+.sphere__loading-ring {
+  position: absolute;
+  inset: -8px;
+  border-radius: 50%;
+  border: 2px solid transparent;
+  border-top-color: var(--warning);
+  animation: orbit-ring 1.2s linear infinite;
+  pointer-events: none;
+}
+```
+
+### 5.4 Ghost Text Crossfade
+
+When airport or music selection changes, the ghost text behind the panel crossfades:
+
+```css
+.panel__ghost {
+  transition: opacity 0.4s ease;
+}
+.panel__ghost--exiting {
+  opacity: 0;
+}
+.panel__ghost--entering {
+  opacity: 0;
+  animation: ghost-fade-in 0.4s ease 0.2s forwards;
+}
+@keyframes ghost-fade-in {
+  to { opacity: 1; }
+}
+```
+
+Managed in JS: on selection change, add `--exiting` to old text, after 200ms swap text content, add `--entering`.
+
+### 5.5 Row Selection
+
+Soft transition. Selected row crossfades from dim to accent color over 200ms:
+
+```css
+.list-row {
+  transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
+}
+```
+
+No spring/bounce — clean and calm, matching the "floating" aesthetic.
+
+### 5.6 Volume Slider Fill
+
+```css
+input[type="range"]::-webkit-slider-runnable-track {
+  transition: background 0.15s linear;
+}
+```
+
+Smooth tracking. Thumb has a subtle glow pulse on drag.
+
+### 5.7 Panel Glassmorphism Transition
+
+When hovering or interacting with a panel, the glass effect intensifies:
+
+```css
+.panel {
+  transition:
+    background 0.4s ease,
+    backdrop-filter 0.4s ease,
+    border-color 0.4s ease;
+}
+```
+
+From `blur(8px)` resting to `blur(20px)` active. Background opacity increases. Border brightens. Creates a "coming into focus" effect.
+
+### 5.8 Header Breathing Dot
+
+```css
+@keyframes dot-breathe {
+  0%, 100% { opacity: 0.3; transform: scale(0.8); }
+  50% { opacity: 1; transform: scale(1); }
+}
+
+.header__dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--accent-neutral);
+  margin-left: 8px;
+}
+.header__dot--playing {
+  animation: dot-breathe 2s ease-in-out infinite;
+}
+.header__dot--paused {
+  opacity: 0.3;
+  transform: scale(0.8);
+}
+```
+
+---
+
+## 6. Responsiveness Details
+
+### 6.1 Breakpoint Summary
+
+| Breakpoint   | Layout       | Sphere  | Panels           | Ghost text | Parallax     |
+|-------------|-------------|---------|-----------------|-----------|-------------|
+| >= 1024px   | Horizontal  | 160px   | Side-by-side, 3D tilt | Yes, 120px/80px | Mouse + audio |
+| 768-1023px  | Horizontal  | 140px   | Side-by-side, reduced tilt | Yes, 90px/60px | Mouse + audio |
+| 480-767px   | Vertical    | 120px   | Bottom drawer, tabs | Hidden | Auto-drift + audio |
+| < 480px     | Vertical    | 100px   | Bottom drawer, tabs | Hidden | Auto-drift + audio |
+
+### 6.2 Touch Adaptations
+
+```css
+@media (pointer: coarse) {
+  .list-row { min-height: 44px; }
+  .search-input { height: 44px; }
+  input[type="range"] { padding: 20px 0; /* 44px total hit area */ }
+  .drawer__tab { height: 48px; }
+}
+```
+
+### 6.3 Orientation
+
+Landscape mobile (height < 500px and width > 568px): suppress the drawer expanded state max-height to `40vh` to leave room for the sphere. Sphere size clamps to `min(120px, 30vh)`.
+
+### 6.4 Canvas Responsiveness
+
+Both canvases (starfield + particles) resize via `ResizeObserver`:
+
+```js
+const observer = new ResizeObserver(([entry]) => {
+  const { width, height } = entry.contentRect;
+  canvas.width = width * devicePixelRatio;
+  canvas.height = height * devicePixelRatio;
+  ctx.scale(devicePixelRatio, devicePixelRatio);
+});
+observer.observe(canvas.parentElement);
+```
+
+### 6.5 Reduced Data / Low Power
+
+On `prefers-reduced-motion: reduce`:
+- Aurora gradient: static (no animation)
+- Sphere: no breathing, no rings, static glow
+- Particles: reduced to 10 per system, slow constant drift, no audio modulation
+- Starfield: static, no parallax
+- Ghost text: no crossfade, instant swap
+- Panel tilt: disabled (`transform: none`)
+
+---
+
+## 7. Accessibility
+
+### 7.1 Contrast
+
+- `#E8E8EC` on `#080812` = contrast ratio **15.8:1** (passes AAA)
+- `rgba(232, 232, 236, 0.5)` (dim) on `#080812` = effective ~`#7C7C7E` = **5.5:1** (passes AA)
+- `#FFCC66` on `#080812` = **10.9:1** (passes AAA)
+- `#44FFBB` on `#080812` = **13.2:1** (passes AAA)
+- `#AA88FF` on `#080812` = **6.1:1** (passes AA)
+- `#FF6655` on `#080812` = **5.4:1** (passes AA)
+
+All pass WCAG AA minimum. Primary text and both accent colors pass AAA.
+
+### 7.2 Screen Readers
+
+| Element | ARIA |
+|---|---|
+| Central sphere | `role="button"`, `aria-label="Toggle playback. Currently: playing"` / `"paused"` |
+| Airport list | `role="listbox"`, `aria-label="Airport selection"` |
+| Airport row | `role="option"`, `aria-selected="true/false"` |
+| Music list | `role="listbox"`, `aria-label="Music station selection"` |
+| Music row | `role="option"`, `aria-selected="true/false"` |
+| Volume sliders | `aria-label="Airport volume"` / `"Music volume"`, `aria-valuemin="0"`, `aria-valuemax="100"`, `aria-valuenow` |
+| Search inputs | `aria-label="Search airports"` / `"Search music stations"` |
+| Particle canvas | `role="img"`, `aria-label="Audio visualization"` |
+| Starfield canvas | `aria-hidden="true"` (decorative) |
+| Mobile drawer | `role="region"`, `aria-label="Audio controls"` |
+| Drawer tabs | `role="tablist"`, each tab `role="tab"`, `aria-selected`, panel `role="tabpanel"` |
+| Header dot | `aria-hidden="true"` (decorative) |
+| Ghost text | `aria-hidden="true"` (decorative) |
+| Footer | `role="contentinfo"` |
+
+### 7.3 Reduced Motion
+
+```css
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+```
+
+Particle and starfield canvases check `matchMedia('(prefers-reduced-motion: reduce)')` and fall back to a static render (single frame, no rAF loop).
+
+### 7.4 Color Scheme
+
+```html
+<meta name="color-scheme" content="dark">
+```
+
+No light mode. The design is inherently dark — the glassmorphism, particle effects, and aurora background require a dark canvas.
+
+---
+
+## 8. Component Mapping
+
+How existing Vue components change:
+
+| Current Component     | Action   | New Role                                               |
+|-----------------------|----------|--------------------------------------------------------|
+| `App.vue`             | Restyle  | Root `.orbital-layout` grid, font imports, CSS vars, aurora background |
+| `Main.vue`            | Rewrite  | Becomes layout orchestrator: sphere, panels, canvases. Removes `<av-line>`, removes Christmas easter egg |
+| `Airports.vue`        | Rewrite  | Glass panel with search, scrollable list, volume slider. No CustomSelect dropdown |
+| `Music.vue`           | Rewrite  | Glass panel with search, scrollable list, volume slider. No CustomSelect dropdown |
+| `CustomSelect.vue`    | Remove   | Replaced by inline searchable lists in each panel      |
+| `Footer.vue`          | Restyle  | Minimal single-line glassmorphic footer                |
+| *(new)* `Sphere.vue`         | Create | Central play/pause orb with rings and states    |
+| *(new)* `ParticleCanvas.vue` | Create | Dual-system particle visualization              |
+| *(new)* `Starfield.vue`      | Create | Background starfield with parallax              |
+| *(new)* `GlassPanel.vue`     | Create | Reusable glassmorphic panel container           |
+| *(new)* `DataList.vue`       | Create | Reusable searchable scrollable list with volume |
+| *(new)* `HeaderBar.vue`      | Create | Top bar with app name, breathing dot, status text |
+| *(new)* `MobileDrawer.vue`   | Create | Bottom drawer with tabs for mobile layout       |
+
+### 8.1 New Shared Component: GlassPanel
+
+Wrapper component providing the glassmorphic container with adaptive blur.
+
+**Props:**
+- `tilt: 'left' | 'right' | 'none'` — 3D perspective direction
+- `ghostText: String` — text shown as large ghost behind content
+
+**Slots:**
+- `default` — panel content
+
+**Behavior:**
+- Manages hover/focus-within state for adaptive glassmorphism
+- Manages ghost text crossfade on prop change
+- Applies 3D tilt with micro-parallax on mousemove
+- Disabled on mobile (`< 768px`)
+
+### 8.2 New Shared Component: DataList
+
+Since Airport and Music lists share identical behavior, extract `DataList.vue`:
+
+**Props:**
+- `items: Array` — the data
+- `valueKey: String` — unique key field
+- `labelKey: String` — display field
+- `secondaryKeys?: Array<{ key: String, label: String }>` — additional columns (IATA, country code for airports)
+- `filterKeys: Array<String>` — fields to search against
+- `modelValue` — currently selected value
+- `volume: Number` — current volume 0-1
+- `label: String` — section header text (`ATC FEED` / `MUSIC FEED`)
+- `accentColor: String` — CSS variable name (`--accent-cool` or `--accent-warm`)
+
+**Emits:** `update:modelValue`, `update:volume`
+
+**Slots:** `#row="{ item, active }"` for custom row rendering if needed.
+
+### 8.3 useAudioAnalyser Composable
+
+Same as described in the Signal spec — shared between Orbital and Signal concepts:
+
+```js
+// src/composables/useAudioAnalyser.js
+// Returns: { analyser, waveform, frequency, connect, disconnect }
+// Handles: lazy AudioContext, shared context, reconnection, cleanup
+```
+
+The particle system reads `frequency` data (getByteFrequencyData) rather than time-domain data, since it needs amplitude and frequency band info for particle modulation.
+
+### 8.4 useParallax Composable
+
+```js
+// src/composables/useParallax.js
+// Usage: const { offsetX, offsetY } = useParallax(depthMultiplier)
+// Desktop: tracks mouse position relative to viewport center
+// Mobile: slow auto-drift (sine wave, 30s cycle)
+// Returns reactive offset values for CSS transforms or canvas rendering
+```
+
+---
+
+## 9. External Dependencies
+
+### 9.1 Add
+
+- **Google Fonts:** `Space Grotesk` (400, 500, 700) + `Inter` (300, 400, 500) via `<link>` in index.html
+- No new npm packages needed
+
+### 9.2 Remove
+
+- `vue-audio-visual` — replaced by custom `ParticleCanvas.vue` + `useAudioAnalyser` composable
+
+### 9.3 Keep
+
+- `vue`, `vuex`, `vue-i18n` — no changes
+- `vite`, `vite-svg-loader` — keep for potential icon SVGs (though Orbital may be mostly CSS/canvas)
+
+---
+
+## 10. Decisions (Resolved)
+
+1. **Visualization approach:** Canvas 2D for both starfield and particles. No WebGL, no Three.js. Keeps bundle small and maintainable. Performance is achievable with careful particle counts and rAF management.
+2. **Glassmorphism intensity:** Adaptive — panels become more frosted on interaction, more transparent at rest. Keeps the background visible while ensuring readability when actively using controls.
+3. **Mobile layout:** Bottom drawer with tabs, not stacked panels. Maximizes the sphere and particle canvas viewport on small screens.
+4. **Volume controls:** Linear sliders (not dials/arcs). Styled with glass aesthetic and accent glows. Most accessible and familiar.
+5. **Country flags:** Removed. Country code (2-letter) only. Flags break the translucent monochrome glass aesthetic.
+6. **Station images:** Removed. Text-only music list. Images break the glass aesthetic.
+7. **Christmas easter egg:** Dropped. Clean slate.
+8. **About/credits:** Minimal footer line, always visible but unobtrusive.
+9. **i18n:** Stays. All UI labels go through the translation system.
+10. **Ghost text on mobile:** Disabled. Too large for small screens, and the drawer panels are narrower.
+11. **3D tilt on mobile:** Disabled. Touch interaction makes tilt feel glitchy.
+
+---
+
+## 11. Performance Budget
+
+| Metric | Target |
+|---|---|
+| Canvas FPS | 60fps desktop, 30fps mobile minimum |
+| Particle count | 100 desktop, 50 mobile (both systems combined) |
+| Star count | 200 desktop, 100 mobile |
+| JS bundle increase | < 8KB gzipped (canvas rendering + composables) |
+| Font load | ~60KB (2 fonts, subset Latin) |
+| First meaningful paint | < 1.5s on 3G |
+| `backdrop-filter` support | Graceful degradation: solid semi-transparent bg on unsupported browsers |
+
+### Graceful Degradation
+
+If `backdrop-filter` is not supported (checked via `@supports`):
+
+```css
+@supports not (backdrop-filter: blur(1px)) {
+  .panel {
+    background: rgba(15, 15, 25, 0.85); /* opaque fallback */
+  }
+  .header, .footer {
+    background: rgba(15, 15, 25, 0.9);
+  }
+}
+```
+
+---
+
+## 12. Data Flow
+
+```
+User clicks Sphere
+    |
+    v
+Vuex: setAppStatus('playing')
+    |
+    +---> <audio> elements: play()
+    |         |
+    |         v
+    |     AudioContext.createMediaElementSource()
+    |         |
+    |         v
+    |     AnalyserNode x2 (music + airport)
+    |         |
+    |         +---> getByteFrequencyData() ---> ParticleCanvas (modulates particles)
+    |         +---> getByteFrequencyData() ---> Starfield (modulates brightness)
+    |
+    +---> Sphere: switch to playing state (rings, glow)
+    +---> Header: dot starts breathing
+    +---> Particles: speed up, full count, audio-reactive
+    +---> Starfield: audio brightness modulation active
+
+User clicks Sphere again
+    |
+    v
+Vuex: setAppStatus('paused')
+    |
+    +---> <audio> elements: pause()
+    +---> Sphere: switch to breathing state
+    +---> Particles: slow to idle drift, reduced count
+    +---> Starfield: static brightness
+```

From 8ee34a1be1152c24f7438619a66ea2d6149b4359 Mon Sep 17 00:00:00 2001
From: Ivan Kalachikov <ivan.kalachikov@gmail.com>
Date: Fri, 6 Mar 2026 14:11:28 +0000
Subject: [PATCH 02/22] docs: add Orbital implementation plan with quality
 gates

16 implementation tasks across 13 phases with 4 mandatory quality gates.
Each gate uses Chrome DevTools MCP for screenshots, DOM verification,
and computed style audits against the design spec.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../2026-03-06-orbital-implementation-plan.md | 1492 +++++++++++++++++
 1 file changed, 1492 insertions(+)
 create mode 100644 docs/plans/2026-03-06-orbital-implementation-plan.md

diff --git a/docs/plans/2026-03-06-orbital-implementation-plan.md b/docs/plans/2026-03-06-orbital-implementation-plan.md
new file mode 100644
index 0000000..d5a41e5
--- /dev/null
+++ b/docs/plans/2026-03-06-orbital-implementation-plan.md
@@ -0,0 +1,1492 @@
+# Orbital UI Implementation Plan
+
+> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.
+> **For Claude:** REQUIRED SUB-SKILL: Use frontend-design:frontend-design for every visual component task.
+> **For Claude:** REQUIRED: After each Phase, run a Quality Gate using chrome-devtools MCP — take screenshots, analyze them critically against the design spec, and fix ALL discrepancies before proceeding.
+
+**Goal:** Replace the current Focused UI with the Orbital design — aurora background, glassmorphic panels, central sphere play/pause, particle + starfield canvas visualizations.
+
+**Architecture:** Vue 3 + Vuex (unchanged). Replace all existing visual components with new Orbital-themed ones. Add Canvas-based visualizations. Keep store, data, i18n, utilities untouched. New composables for audio analysis and parallax.
+
+**Tech Stack:** Vue 3, Vuex 4, Vue-i18n, Canvas 2D, CSS custom properties, Google Fonts (Space Grotesk + Inter), CSS backdrop-filter.
+
+**Design Spec Reference:** `docs/design/2026-03-06-orbital-concept-refined.md` — ALL visual decisions come from this file. When in doubt, re-read the spec. Do not improvise colors, sizes, fonts, or spacing.
+
+---
+
+## Critical Rules
+
+1. **Every color must use a CSS variable** from spec section 1.1. No hardcoded hex values in components.
+2. **Every font-size, weight, tracking, transform** must match spec section 1.2 typography table exactly.
+3. **Every spacing value** must be a multiple of 4px per spec section 1.3.
+4. **Use `frontend-design:frontend-design` skill** when implementing any visual component.
+5. **Quality Gates are mandatory.** Do NOT skip screenshot verification steps.
+6. **Chrome DevTools MCP** is used for all visual verification — screenshots, DOM inspection, computed style checks.
+
+---
+
+## Phase 1: Design System Foundation
+
+### Task 1.1: Add Google Fonts to index.html
+
+**Files:**
+- Modify: `index.html`
+
+**Step 1: Add font link tags**
+
+Add before `</head>` in `index.html`:
+
+```html
+<meta name="color-scheme" content="dark">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=Inter:wght@300;400;500&display=swap" rel="stylesheet">
+```
+
+**Step 2: Commit**
+
+```bash
+git add index.html
+git commit -m "feat(orbital): add Space Grotesk + Inter fonts to index.html"
+```
+
+### Task 1.2: Replace global CSS variables and reset in App.vue
+
+**Files:**
+- Modify: `src/App.vue`
+
+**Step 1: Replace the entire `<style>` block**
+
+Replace the existing global styles with Orbital design system. This is a full rewrite of the `<style>` section.
+
+Key CSS variables to define (from spec 1.1):
+```css
+:root {
+  --bg: #080812;
+  --bg-gradient-from: #0D0B1A;
+  --bg-gradient-to: #0A1A1A;
+  --surface: rgba(255, 255, 255, 0.04);
+  --surface-active: rgba(255, 255, 255, 0.10);
+  --glass-border: rgba(255, 255, 255, 0.08);
+  --glass-border-active: rgba(255, 255, 255, 0.18);
+  --text-primary: #E8E8EC;
+  --text-dim: rgba(232, 232, 236, 0.5);
+  --text-muted: rgba(232, 232, 236, 0.25);
+  --accent-warm: #FFCC66;
+  --accent-warm-glow: rgba(255, 204, 102, 0.25);
+  --accent-cool: #44FFBB;
+  --accent-cool-glow: rgba(68, 255, 187, 0.25);
+  --accent-neutral: #AA88FF;
+  --accent-neutral-glow: rgba(170, 136, 255, 0.3);
+  --error: #FF6655;
+  --warning: #FFB844;
+  --star-color: rgba(255, 255, 255, 0.6);
+
+  --font-display: 'Space Grotesk', sans-serif;
+  --font-body: 'Inter', sans-serif;
+}
+```
+
+Global reset:
+```css
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html, body {
+  height: 100%;
+  background: var(--bg);
+}
+
+#app {
+  font-family: var(--font-body);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: var(--text-primary);
+  height: 100%;
+}
+
+a {
+  color: var(--text-primary);
+  text-decoration: none;
+}
+a:hover {
+  color: #fff;
+}
+```
+
+Layout with aurora background (spec 1.4):
+```css
+.layout {
+  min-height: 100%;
+  overflow: hidden;
+  position: relative;
+  background-color: var(--bg);
+  background-image:
+    radial-gradient(ellipse at 20% 50%, rgba(13, 11, 26, 0.8) 0%, transparent 60%),
+    radial-gradient(ellipse at 80% 50%, rgba(10, 26, 26, 0.8) 0%, transparent 60%),
+    radial-gradient(ellipse at 50% 100%, rgba(68, 255, 187, 0.03) 0%, transparent 40%),
+    radial-gradient(ellipse at 50% 0%, rgba(170, 136, 255, 0.04) 0%, transparent 40%);
+  background-size: 200% 200%;
+  animation: aurora 20s ease-in-out infinite alternate;
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  grid-template-areas:
+    "header"
+    "main"
+    "footer";
+}
+
+@keyframes aurora {
+  0%, 100% { background-position: 40% 50%; }
+  50% { background-position: 60% 50%; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .layout { animation: none; }
+}
+```
+
+Toast styles (spec 3.8):
+```css
+.toast {
+  position: fixed;
+  top: 20px;
+  left: 50%;
+  transform: translateX(-50%) translateY(-20px);
+  padding: 12px 20px;
+  border-radius: 12px;
+  color: var(--text-primary);
+  font-family: var(--font-body);
+  font-size: 13px;
+  z-index: 1000;
+  background: var(--surface-active);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border: 1px solid var(--glass-border-active);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+}
+.toast--error {
+  border-color: var(--error);
+  color: var(--error);
+}
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s, transform 0.3s;
+}
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+  transform: translateX(-50%) translateY(-20px);
+}
+.fade-enter-to,
+.fade-leave-from {
+  transform: translateX(-50%) translateY(0);
+}
+```
+
+Focus states (spec 4.3):
+```css
+*:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--accent-neutral), 0 0 12px var(--accent-neutral-glow);
+}
+```
+
+Backdrop-filter fallback (spec 11):
+```css
+@supports not (backdrop-filter: blur(1px)) {
+  .panel, .header, .footer, .toast, .drawer {
+    background: rgba(15, 15, 25, 0.85) !important;
+  }
+}
+```
+
+**Remove all old shared styles** (.card, .card-col, .card-header, .text-secondary, .slider, .icon-wrapper, .spinner, old .layout, old .toast). These will be replaced by new component styles.
+
+**Step 2: Update template to use grid areas**
+
+The App.vue template stays the same structure for now — it still renders `<Main />` and `<Footer />`. But `.layout` now uses CSS grid.
+
+**Step 3: Remove Roboto font import**
+
+Delete the `@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');` line.
+
+**Step 4: Verify — run dev server, open in browser**
+
+```bash
+npm run dev
+```
+
+Open in browser. The page should show a dark background (#080812) with subtle aurora gradients. Existing components will look broken (expected — old shared styles removed).
+
+**Step 5: Commit**
+
+```bash
+git add src/App.vue
+git commit -m "feat(orbital): replace global CSS with Orbital design system variables and aurora background"
+```
+
+---
+
+## Phase 2: Header Bar
+
+### Task 2.1: Create HeaderBar.vue
+
+**Files:**
+- Create: `src/components/HeaderBar.vue`
+- Modify: `src/App.vue` (import and render)
+
+**Step 1: Create the component**
+
+Spec reference: section 3.1
+
+```vue
+<template>
+  <header class="header">
+    <div class="header__left">
+      <span class="header__name">ORBITAL</span>
+      <span :class="['header__dot', appStatus === 'playing' && 'header__dot--playing']" aria-hidden="true"></span>
+    </div>
+    <div class="header__right">
+      <span class="header__status">{{ statusText }}</span>
+    </div>
+  </header>
+</template>
+```
+
+Script: mapState for `appStatus`, `airports.currentCode`, `music.currentId`. Compute `statusText` as `NOW PLAYING: ${currentCode} / ${currentStationName}` when playing, empty when paused.
+
+Style — per spec:
+- Height: 48px
+- Background: `var(--surface)`
+- `backdrop-filter: blur(10px)`
+- Border-bottom: `1px solid var(--glass-border)`
+- App name: Space Grotesk 18px 700 0.12em uppercase, `var(--accent-neutral)`
+- Dot: 6px circle, `var(--accent-neutral)`, breathing animation when playing
+- Status text: Inter 11px, `var(--text-dim)`
+- `z-index: 10`
+
+**Step 2: Wire into App.vue**
+
+Replace the `<Main />` import tree. Add `<HeaderBar />` inside `.layout` before `<Main />`.
+
+Update App.vue template:
+```vue
+<template>
+  <div class="layout">
+    <HeaderBar />
+    <Main />
+    <Footer />
+    <transition name="fade">
+      <div v-if="toast" :class="['toast', `toast--${toast.type}`]">
+        {{ toast.message }}
+      </div>
+    </transition>
+  </div>
+</template>
+```
+
+**Step 3: Commit**
+
+```bash
+git add src/components/HeaderBar.vue src/App.vue
+git commit -m "feat(orbital): add HeaderBar with app name, breathing dot, and status text"
+```
+
+---
+
+## Phase 3: Central Sphere
+
+### Task 3.1: Create Sphere.vue
+
+**Files:**
+- Create: `src/components/Sphere.vue`
+
+**Step 1: Create the component**
+
+Spec reference: section 3.2
+
+This is the centerpiece. Must match spec exactly:
+- 160px diameter (desktop), responsive sizes via CSS
+- Radial gradient for 3D curvature illusion (spec gives exact gradient stops)
+- Breathing animation when paused (scale 1 → 1.04, 4s, ease-in-out)
+- Expanded glow + concentric rings when playing
+- Buffering: fast pulse + amber glow + orbiting ring
+- Error: red glow, dim, no pulse
+- Three `<span>` ring elements for radar-ping effect (staggered 1s, 3s cycle)
+- `role="button"`, `aria-label`, `tabindex="0"`
+
+Key CSS from spec:
+```css
+.sphere {
+  width: 160px;
+  height: 160px;
+  border-radius: 50%;
+  background: radial-gradient(
+    circle at 40% 35%,
+    rgba(200, 180, 255, 0.25) 0%,
+    rgba(170, 136, 255, 0.15) 30%,
+    rgba(170, 136, 255, 0.05) 60%,
+    transparent 80%
+  );
+  box-shadow: 0 0 40px var(--accent-neutral-glow),
+              inset 0 0 30px rgba(170, 136, 255, 0.1);
+  border: 1px solid rgba(170, 136, 255, 0.15);
+  cursor: pointer;
+  position: relative;
+}
+```
+
+Animations from spec section 5.1, 5.2, 5.3:
+- `@keyframes breathe` — scale(1) → scale(1.04), 4s
+- `@keyframes ring-expand` — scale(1) → scale(2.5), opacity 0.4 → 0, 3s
+- `@keyframes orbit-ring` — rotate 360deg, 1.2s (buffering)
+
+**Step 2: Commit**
+
+```bash
+git add src/components/Sphere.vue
+git commit -m "feat(orbital): add Sphere play/pause component with breathing, rings, and state animations"
+```
+
+---
+
+## Phase 4: DataList Shared Component
+
+### Task 4.1: Create DataList.vue
+
+**Files:**
+- Create: `src/components/DataList.vue`
+
+**Step 1: Create the component**
+
+Spec reference: sections 3.5, 3.6
+
+Reusable searchable scrollable list with volume slider. Used by both Airport and Music panels.
+
+**Props:**
+- `items: Array` (required)
+- `valueKey: String` (required) — unique key field
+- `labelKey: String` (required) — primary display field
+- `secondaryKeys: Array` (default: `[]`) — array of `{ key, label }` for extra columns
+- `filterKeys: Array` (required) — fields to search against
+- `modelValue` (required) — currently selected value (v-model)
+- `volume: Number` (required) — current volume 0-1 (v-model)
+- `label: String` (required) — section header ("ATC FEED" / "MUSIC FEED")
+- `accentColor: String` (default: `'--accent-cool'`) — CSS var name for accent
+
+**Emits:** `update:modelValue`, `update:volume`
+
+**Template structure:**
+```
+div.data-list
+  span.data-list__label          — "ATC FEED"
+  div.data-list__search-wrapper
+    input.data-list__search      — placeholder "Search..."
+  div.data-list__items           — scrollable
+    div.data-list__row (v-for)   — click to select
+      span.data-list__indicator  — "*" on selected
+      span.data-list__primary    — main label
+      span.data-list__secondary  — extra columns (IATA, country code)
+  div.data-list__volume
+    span.data-list__vol-label    — "VOL"
+    input[type=range]            — styled slider
+    span.data-list__vol-value    — "85%"
+```
+
+**Styles — per spec:**
+- Search input: Inter 13px, `rgba(255,255,255,0.04)` bg, `1px solid var(--glass-border)`, border-radius 8px, height 36px (44px on touch)
+- On focus: border-color transitions to accent color
+- List: max-height 300px, overflow-y auto
+- Custom scrollbar: 4px width, thumb `rgba(255,255,255,0.15)`
+- Row height: 44px, padding 12px 16px
+- Selected row: accent color text, left border `2px solid`, inset box-shadow glow
+- Unselected: `var(--text-dim)`
+- Hover: text brightens to `var(--text-primary)`, bg `rgba(255,255,255,0.03)`
+- Volume track: 4px height, bg `rgba(255,255,255,0.08)`, border-radius 2px
+- Volume fill: accent color
+- Volume thumb: 12px circle, accent color, glow shadow
+- Transition: color 0.2s ease, background 0.2s ease (spec 5.5)
+
+**ARIA roles:** `role="listbox"` on list, `role="option"` + `aria-selected` on rows. Search: `aria-label` prop.
+
+**Step 2: Commit**
+
+```bash
+git add src/components/DataList.vue
+git commit -m "feat(orbital): add DataList reusable component with search, scroll, and volume slider"
+```
+
+---
+
+## Phase 5: GlassPanel Container
+
+### Task 5.1: Create GlassPanel.vue
+
+**Files:**
+- Create: `src/components/GlassPanel.vue`
+
+**Step 1: Create the component**
+
+Spec reference: section 3.5 (panel CSS), section 4.4 (tilt), section 5.4 (ghost text), section 5.7 (glass transition)
+
+**Props:**
+- `tilt: String` — `'left'`, `'right'`, or `'none'` (default: `'none'`)
+- `ghostText: String` — large text behind panel content (default: `''`)
+- `accentColor: String` — CSS var name (default: `'--accent-neutral'`)
+
+**Slots:** `default`
+
+**Template:**
+```
+div.panel(:class="[tiltClass]" @mousemove="onMouseMove" @mouseleave="onMouseLeave")
+  span.panel__ghost(aria-hidden="true") {{ ghostText }}
+  slot
+```
+
+**Styles — per spec:**
+- `background: var(--surface)`
+- `backdrop-filter: blur(8px)`
+- `border: 1px solid var(--glass-border)`
+- `border-radius: 16px`
+- `padding: 24px`
+- `width: 320px`
+- `max-height: 60vh`
+- `position: relative`, `overflow: hidden`
+- Transition: `background 0.4s ease, backdrop-filter 0.4s ease, border-color 0.4s ease`
+- On hover/focus-within: `background: var(--surface-active)`, `backdrop-filter: blur(20px)`, `border-color: var(--glass-border-active)`
+
+Base tilt (spec 2.1):
+```css
+.panel--left { transform: perspective(800px) rotateY(2deg); }
+.panel--right { transform: perspective(800px) rotateY(-2deg); }
+```
+
+Ghost text (spec 3.5):
+```css
+.panel__ghost {
+  position: absolute;
+  top: 50%; left: 50%;
+  transform: translate(-50%, -50%);
+  font-family: var(--font-display);
+  font-size: 120px;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  color: var(--text-muted);
+  pointer-events: none;
+  user-select: none;
+  white-space: nowrap;
+  transition: opacity 0.4s ease;
+}
+```
+
+Micro-parallax on mousemove (spec 4.4):
+```js
+onMouseMove(e) {
+  if (window.innerWidth < 768) return; // disabled on mobile
+  const rect = e.currentTarget.getBoundingClientRect();
+  const x = (e.clientX - rect.left) / rect.width - 0.5;
+  const y = (e.clientY - rect.top) / rect.height - 0.5;
+  const baseY = this.tilt === 'left' ? 2 : this.tilt === 'right' ? -2 : 0;
+  e.currentTarget.style.transform =
+    `perspective(800px) rotateY(${baseY + x * 3}deg) rotateX(${-y * 2}deg)`;
+}
+onMouseLeave(e) {
+  const baseY = this.tilt === 'left' ? 2 : this.tilt === 'right' ? -2 : 0;
+  e.currentTarget.style.transform = `perspective(800px) rotateY(${baseY}deg) rotateX(0deg)`;
+}
+```
+
+**Step 2: Commit**
+
+```bash
+git add src/components/GlassPanel.vue
+git commit -m "feat(orbital): add GlassPanel with adaptive glassmorphism, 3D tilt, ghost text"
+```
+
+---
+
+## Phase 6: Assemble Desktop Layout
+
+### Task 6.1: Rewrite Main.vue as layout orchestrator
+
+**Files:**
+- Modify: `src/components/Main.vue`
+
+**Step 1: Rewrite template and script**
+
+Replace the entire Main.vue. Keep the `<audio>` elements and the Vuex wiring (watchers for appStatus, URLs, errors). Remove `<av-line>`, Logo SVG, christmas hat, old play button, old card layout.
+
+New template structure (spec 2.1):
+```
+<audio ref="musicPlayer" ... />
+<audio ref="airportPlayer" ... />
+<main class="main-area">
+  <GlassPanel tilt="left" :ghostText="currentAirportCode" accentColor="--accent-cool">
+    <DataList
+      :items="airports"
+      valueKey="codeIATA"
+      labelKey="city"
+      :secondaryKeys="[{ key: 'codeIATA' }, { key: 'countryCode' }]"
+      :filterKeys="['city', 'codeIATA', 'codeICAO', 'country']"
+      :modelValue="currentAirportCode"
+      @update:modelValue="setCurrentAirportCode"
+      :volume="airportVolume"
+      @update:volume="setAirportVolume"
+      label="ATC FEED"
+      accentColor="--accent-cool"
+    />
+  </GlassPanel>
+
+  <Sphere />
+
+  <GlassPanel tilt="right" :ghostText="currentMusicName" accentColor="--accent-warm">
+    <DataList
+      :items="music"
+      valueKey="id"
+      labelKey="name"
+      :filterKeys="['name', 'description']"
+      :modelValue="currentMusicId"
+      @update:modelValue="setCurrentMusicId"
+      :volume="musicVolume"
+      @update:volume="setMusicVolume"
+      label="MUSIC FEED"
+      accentColor="--accent-warm"
+    />
+  </GlassPanel>
+</main>
+```
+
+Style for `.main-area` (spec 2.1):
+```css
+.main-area {
+  grid-area: main;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 32px;
+  padding: 24px;
+  position: relative;
+}
+```
+
+Audio element wiring stays identical to current Main.vue (watchers, play/pause methods, error handlers).
+
+Computed: add `currentMusicName` derived from `music.currentId` to feed into ghost text.
+
+**Step 2: Remove old component imports**
+
+Remove: `import Logo from '../assets/logo.svg'`, christmas hat references, `<av-line>` usage.
+
+Add: `import Sphere`, `import GlassPanel`, `import DataList`.
+
+Remove `Airports.vue` and `Music.vue` imports — their functionality is now inline via DataList.
+
+**Step 3: Commit**
+
+```bash
+git add src/components/Main.vue
+git commit -m "feat(orbital): rewrite Main.vue with sphere + glass panels desktop layout"
+```
+
+### Task 6.2: Restyle Footer.vue
+
+**Files:**
+- Modify: `src/components/Footer.vue`
+
+**Step 1: Rewrite to minimal footer**
+
+Spec reference: section 3.7
+
+Single-line glassmorphic footer:
+```
+Inspired by listentothe.cloud | Frontend by Kalachikov | Design by Emelyanova | v0.2.0
+```
+
+Template: single `<footer>` with inline items separated by ` | `.
+
+Style:
+- Height: 36px, padding 0 24px
+- Background: `var(--surface)`, `backdrop-filter: blur(6px)`
+- Border-top: `1px solid var(--glass-border)`
+- Text: Inter 11px weight 300, `var(--text-dim)`
+- Links: `var(--text-primary)` on hover
+- `grid-area: footer`
+
+**Step 2: Commit**
+
+```bash
+git add src/components/Footer.vue
+git commit -m "feat(orbital): restyle Footer to minimal single-line glassmorphic bar"
+```
+
+---
+
+## QUALITY GATE 1: Layout & Visual Foundation
+
+**This is mandatory. Do not skip.**
+
+> Use `frontend-design:frontend-design` skill for visual assessment context.
+
+### QG1 Step 1: Start dev server
+
+```bash
+npm run dev
+```
+
+### QG1 Step 2: Take desktop screenshot (1280x800)
+
+Use chrome-devtools MCP:
+1. Navigate to `http://localhost:5173`
+2. Resize to 1280x800
+3. Take full-page screenshot
+
+### QG1 Step 3: Critical analysis against spec
+
+Check ALL of the following against the design spec (`docs/design/2026-03-06-orbital-concept-refined.md`):
+
+**Background:**
+- [ ] Background color is #080812 (not #191921 or any other old color)
+- [ ] Aurora gradient visible — subtle purple and teal radial gradients
+- [ ] Aurora animation running (gradient position shifting slowly)
+
+**Header Bar (spec 3.1):**
+- [ ] Height is exactly 48px
+- [ ] Background is glassmorphic (semi-transparent with blur)
+- [ ] "ORBITAL" text: Space Grotesk, 18px, weight 700, uppercase, letter-spacing 0.12em, color #AA88FF
+- [ ] Breathing dot: 6px circle, #AA88FF, present next to app name
+- [ ] Status text on right: Inter 11px, dim color
+- [ ] Bottom border: 1px solid var(--glass-border)
+
+**Central Sphere (spec 3.2):**
+- [ ] Centered in the main area
+- [ ] 160px diameter
+- [ ] Radial gradient creating 3D illusion (highlight at 40% 35%)
+- [ ] Outer glow visible (box-shadow with accent-neutral-glow)
+- [ ] Border: 1px solid rgba(170, 136, 255, 0.15)
+- [ ] Breathing animation when paused (scale 1 → 1.04, 4s cycle)
+- [ ] On click: switches to playing state, concentric rings appear
+- [ ] Rings: 3 rings expanding outward, staggered 1s, 3s cycle
+
+**Glass Panels (spec 3.5):**
+- [ ] Two panels flanking the sphere
+- [ ] Width: 320px each
+- [ ] Background: rgba(255,255,255,0.04) at rest
+- [ ] Backdrop-filter: blur(8px) at rest
+- [ ] Border: 1px solid rgba(255,255,255,0.08)
+- [ ] Border-radius: 16px
+- [ ] Padding: 24px
+- [ ] Left panel: perspective tilt rotateY(2deg)
+- [ ] Right panel: perspective tilt rotateY(-2deg)
+- [ ] On hover: background brightens, blur increases to 20px, border brightens
+- [ ] Ghost text visible behind content (IATA code on left, station name on right)
+- [ ] Ghost text: Space Grotesk 120px/80px, rgba(232,232,236,0.25)
+
+**DataList — Airport (spec 3.5):**
+- [ ] Section label "ATC FEED": Inter 11px uppercase tracking 0.08em, dim color
+- [ ] Search input: full width, Inter 13px, 36px height, rounded 8px, subtle border
+- [ ] Search focus: border transitions to --accent-cool (#44FFBB)
+- [ ] List rows: 44px height, showing IATA + city + country code
+- [ ] Selected row: --accent-cool color, left border 2px, inset glow
+- [ ] Unselected rows: --text-dim color
+- [ ] Hover: text brightens, subtle bg change
+- [ ] Volume slider: accent-cool colored fill and thumb, 4px track, 12px thumb with glow
+- [ ] Volume label "VOL" and percentage readout
+
+**DataList — Music (spec 3.6):**
+- [ ] Same structure as Airport but with --accent-warm (#FFCC66)
+- [ ] Section label "MUSIC FEED"
+- [ ] Station names only, no images
+- [ ] Volume slider: accent-warm colored
+
+**Footer (spec 3.7):**
+- [ ] Single line, 36px height
+- [ ] Glassmorphic background
+- [ ] Inter 11px weight 300, dim text
+- [ ] Items separated by " | "
+
+**Toast (spec 3.8):**
+- [ ] Trigger an error to verify: glassmorphic, rounded 12px, Inter 13px
+
+### QG1 Step 4: DOM property verification
+
+Use chrome-devtools MCP `evaluate_script` to check computed styles:
+
+```js
+// Verify header height
+getComputedStyle(document.querySelector('.header')).height
+// Expected: "48px"
+
+// Verify sphere dimensions
+const sphere = document.querySelector('.sphere');
+getComputedStyle(sphere).width
+// Expected: "160px"
+
+// Verify font family on app name
+getComputedStyle(document.querySelector('.header__name')).fontFamily
+// Expected: contains "Space Grotesk"
+
+// Verify panel border-radius
+getComputedStyle(document.querySelector('.panel')).borderRadius
+// Expected: "16px"
+
+// Verify body font
+getComputedStyle(document.querySelector('.data-list__search')).fontFamily
+// Expected: contains "Inter"
+
+// Verify CSS variables are applied
+getComputedStyle(document.documentElement).getPropertyValue('--bg').trim()
+// Expected: "#080812"
+
+getComputedStyle(document.documentElement).getPropertyValue('--accent-neutral').trim()
+// Expected: "#AA88FF"
+```
+
+### QG1 Step 5: Fix all discrepancies
+
+If ANY check fails, fix it before proceeding. Re-screenshot and re-verify after fixes.
+
+### QG1 Step 6: Commit fixes if any
+
+```bash
+git add -A
+git commit -m "fix(orbital): quality gate 1 — visual corrections for layout foundation"
+```
+
+---
+
+## Phase 7: Starfield Background
+
+### Task 7.1: Create Starfield.vue
+
+**Files:**
+- Create: `src/components/Starfield.vue`
+
+**Step 1: Create the component**
+
+Spec reference: section 3.4
+
+Canvas-based starfield background. Renders behind everything.
+
+**Props:**
+- `musicAmplitude: Number` (default: 0) — modulates star brightness
+- `airportAmplitude: Number` (default: 0) — modulates twinkle rate
+
+**Template:**
+```vue
+<canvas ref="canvas" class="starfield" aria-hidden="true"></canvas>
+```
+
+**Style:**
+```css
+.starfield {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+}
+```
+
+**Logic (from spec 3.4):**
+
+Star generation on mount:
+- Desktop: 200 stars, Mobile (< 768px): 100 stars
+- Each star: random x, y, size (0.5-2px), baseBrightness (0.2-0.8), depth (1-3)
+
+Parallax:
+- Desktop: track mouse position via `mousemove` on window
+- `offsetX = (mouseX - centerX) * star.depth * 0.02`
+- `offsetY = (mouseY - centerY) * star.depth * 0.015`
+- Mobile: auto-drift `offset = Math.sin(time * 0.0001) * 20`
+
+Audio modulation:
+- `brightness = star.baseBrightness + musicAmplitude * 0.2`
+- Airport amplitude modulates a twinkle factor
+
+Rendering:
+- `requestAnimationFrame` loop
+- Skip if `document.hidden`
+- Draw each star as a small filled arc
+- Wrap stars that drift off-screen
+
+`ResizeObserver` for canvas sizing with `devicePixelRatio`.
+
+Reduced motion: render single static frame, no rAF loop.
+
+**Step 2: Add to Main.vue**
+
+Place `<Starfield>` inside `.main-area` as the first child.
+
+**Step 3: Commit**
+
+```bash
+git add src/components/Starfield.vue src/components/Main.vue
+git commit -m "feat(orbital): add Starfield canvas with parallax and audio reactivity"
+```
+
+---
+
+## Phase 8: Audio Analysis
+
+### Task 8.1: Create useAudioAnalyser composable
+
+**Files:**
+- Create: `src/composables/useAudioAnalyser.js`
+
+**Step 1: Create the composable**
+
+Spec reference: section 8.3, 12 (data flow)
+
+```js
+// Returns: { analyser, frequencyData, connect, disconnect }
+// - Lazy AudioContext creation (respects autoplay policy)
+// - Shared AudioContext singleton across instances
+// - MediaElementSource per audio element (cached to avoid re-creation)
+// - AnalyserNode with fftSize: 256 (enough for particle modulation)
+// - frequencyData: reactive Uint8Array updated externally by consumer
+```
+
+Key implementation details:
+- Single shared `AudioContext` (browsers limit to ~6)
+- Cache `MediaElementSource` per audio element (calling `createMediaElementSource` twice on same element throws)
+- `connect(audioElement)` → creates source if needed → connects to analyser → connects to destination
+- `disconnect()` → disconnects analyser, does NOT close AudioContext
+- Expose raw `AnalyserNode` for consumers to call `getByteFrequencyData()`
+
+**Step 2: Commit**
+
+```bash
+git add src/composables/useAudioAnalyser.js
+git commit -m "feat(orbital): add useAudioAnalyser composable for Web Audio API"
+```
+
+---
+
+## Phase 9: Particle Canvas
+
+### Task 9.1: Create ParticleCanvas.vue
+
+**Files:**
+- Create: `src/components/ParticleCanvas.vue`
+
+**Step 1: Create the component**
+
+Spec reference: section 3.3
+
+Dual-system particle visualization orbiting the central sphere.
+
+**Props:**
+- `musicAnalyser: Object` — AnalyserNode for music
+- `airportAnalyser: Object` — AnalyserNode for airport
+- `sphereRect: Object` — `{ x, y, width, height }` of the sphere for orbit center
+- `isPlaying: Boolean`
+
+**Template:**
+```vue
+<canvas ref="canvas" class="particles" role="img" aria-label="Audio visualization"></canvas>
+```
+
+**Style:**
+```css
+.particles {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  pointer-events: none;
+}
+```
+
+**Particle systems (spec 3.3):**
+
+Music particles (inner orbit):
+- Color: #FFCC66, opacity 0.4-1.0
+- Count: 40-60 (desktop), 20-30 (mobile)
+- Orbit radius: sphere radius + 20px to + 80px
+- Size: 2-5px with shadowBlur 4
+- Movement: smooth elliptical, 0.2-0.8 rad/s
+- Audio: amplitude modulates orbit radius ±15px, frequency bands modulate brightness
+
+Airport particles (outer orbit):
+- Color: #44FFBB, opacity 0.3-1.0
+- Count: 30-50 (desktop), 15-25 (mobile)
+- Orbit radius: sphere radius + 90px to + 160px
+- Size: 1.5-4px
+- Movement: jittery, burst acceleration on voice activity
+- Audio: amplitude modulates speed, frequency bands modulate visible count
+
+Trail effect: `ctx.fillStyle = 'rgba(8, 8, 18, 0.08)'; ctx.fillRect(0, 0, w, h);` instead of clearRect.
+
+When paused: 10% speed, 20 particles total per system, no audio modulation.
+
+Performance: object pooling, `requestAnimationFrame`, skip on `document.hidden`, reduce count on mobile via `matchMedia`.
+
+Reduced motion: static render, 10 particles each, no animation loop.
+
+**Step 2: Wire into Main.vue**
+
+Connect useAudioAnalyser to both audio elements. Pass analysers to ParticleCanvas. Place canvas in `.main-area`.
+
+**Step 3: Commit**
+
+```bash
+git add src/components/ParticleCanvas.vue src/components/Main.vue
+git commit -m "feat(orbital): add ParticleCanvas with dual orbit system and audio reactivity"
+```
+
+---
+
+## QUALITY GATE 2: Full Desktop Experience
+
+**This is mandatory. Do not skip.**
+
+> Use `frontend-design:frontend-design` skill for visual assessment context.
+
+### QG2 Step 1: Take desktop screenshot (1280x800)
+
+Use chrome-devtools MCP. Navigate, resize to 1280x800, screenshot.
+
+### QG2 Step 2: Critical analysis — Starfield
+
+- [ ] Stars visible on dark background (faint white dots of varying sizes)
+- [ ] Mouse movement causes stars to shift (parallax effect)
+- [ ] Stars at different depths move at different rates
+- [ ] No stars visible over panels or header (z-index layering correct)
+
+### QG2 Step 3: Critical analysis — Particles
+
+- [ ] When playing: two distinct orbit systems visible around the sphere
+- [ ] Inner orbit (music): warm gold/amber particles (#FFCC66), smooth movement
+- [ ] Outer orbit (airport): cool cyan/green particles (#44FFBB), jittery movement
+- [ ] Particles have soft glow (shadowBlur)
+- [ ] Trail effect visible (particles leave brief comet trails)
+- [ ] When paused: particles slow to lazy drift, reduced count
+- [ ] Particles orbit around the sphere center (not offset)
+- [ ] On music change: particle behavior shifts
+- [ ] Particle canvas doesn't block mouse events on panels (pointer-events: none)
+
+### QG2 Step 4: Critical analysis — Interactions
+
+- [ ] Click sphere: toggles play/pause, sphere state changes (breathing ↔ rings)
+- [ ] Select airport in list: ghost text behind panel updates, audio source changes
+- [ ] Select music station: ghost text updates, audio source changes
+- [ ] Volume sliders: drag to adjust, fill color matches accent
+- [ ] Search input: type to filter list, results update in real time
+- [ ] Panel hover: glassmorphism intensifies (blur + bg + border transition)
+- [ ] Panel mousemove: subtle 3D micro-parallax tilt
+
+### QG2 Step 5: DOM verification
+
+```js
+// Starfield canvas is behind panels
+getComputedStyle(document.querySelector('.starfield')).zIndex
+// Expected: "0"
+
+// Particles canvas is z-index 1
+getComputedStyle(document.querySelector('.particles')).zIndex
+// Expected: "1"
+
+// Panels are above canvases
+getComputedStyle(document.querySelector('.panel')).position
+// Expected: "relative" (stacking context above z-index 0/1)
+
+// Sphere is interactive
+document.querySelector('.sphere').getAttribute('role')
+// Expected: "button"
+
+// DataList has listbox role
+document.querySelector('.data-list__items').getAttribute('role')
+// Expected: "listbox"
+```
+
+### QG2 Step 6: Performance check
+
+Use chrome-devtools MCP `evaluate_script`:
+```js
+// Check FPS — run for 2 seconds
+let frames = 0;
+const start = performance.now();
+function count() {
+  frames++;
+  if (performance.now() - start < 2000) requestAnimationFrame(count);
+  else console.log(`FPS: ${frames / 2}`);
+}
+requestAnimationFrame(count);
+```
+
+Expected: >= 55 FPS on desktop.
+
+### QG2 Step 7: Fix all discrepancies, re-verify, commit
+
+```bash
+git add -A
+git commit -m "fix(orbital): quality gate 2 — visual corrections for desktop experience"
+```
+
+---
+
+## Phase 10: Mobile Layout
+
+### Task 10.1: Create MobileDrawer.vue
+
+**Files:**
+- Create: `src/components/MobileDrawer.vue`
+
+**Step 1: Create the component**
+
+Spec reference: section 2.3, 4.5
+
+Bottom drawer with two tabs (ATC / MUSIC) for mobile.
+
+**Props:**
+- Receives all the same data/volume/selection props as the panels
+- `airportItems`, `musicItems`, `currentAirportCode`, `currentMusicId`, etc.
+- `airportVolume`, `musicVolume`
+
+**Emits:** Same update events as DataList
+
+**Template:**
+```
+div.drawer(:class="{ 'drawer--collapsed': collapsed }")
+  div.drawer__handle(@touchstart, @touchmove, @touchend for swipe)
+    div.drawer__handle-bar
+  div.drawer__tabs(role="tablist")
+    button.drawer__tab(role="tab" :aria-selected="activeTab === 'atc'") ATC
+    button.drawer__tab(role="tab" :aria-selected="activeTab === 'music'") MUSIC
+  div.drawer__content(role="tabpanel")
+    DataList(v-if="activeTab === 'atc'" ... accentColor="--accent-cool")
+    DataList(v-if="activeTab === 'music'" ... accentColor="--accent-warm")
+```
+
+**Styles:**
+- `position: fixed; bottom: 0; left: 0; right: 0;`
+- `max-height: 50vh`
+- `border-radius: 16px 16px 0 0`
+- `background: var(--surface-active)`
+- `backdrop-filter: blur(20px)`
+- `transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)`
+- Collapsed: `transform: translateY(calc(100% - 48px))` — just tab bar visible
+- Handle bar: 40px x 4px, centered, `var(--text-muted)`, border-radius 2px
+- Tab: 48px height, 50% width, Inter 12px uppercase, `var(--text-dim)`, active = `var(--text-primary)` + bottom border accent
+- `z-index: 20`
+
+Swipe logic: track touch start/move/end Y coordinates. If delta > 50px down → collapse. If delta > 50px up → expand.
+
+### Task 10.2: Add responsive layout to Main.vue
+
+**Files:**
+- Modify: `src/components/Main.vue`
+
+**Step 1: Add mobile conditional rendering**
+
+Use a reactive `isMobile` computed (via `matchMedia('(max-width: 767px)')` with listener).
+
+Desktop (>= 768px): render GlassPanel + Sphere + GlassPanel as current.
+Mobile (< 768px): render Sphere only in `.main-area`, plus `<MobileDrawer>` component.
+
+**Step 2: Add responsive CSS**
+
+```css
+@media (max-width: 767px) {
+  .main-area {
+    flex-direction: column;
+    padding-bottom: 60px; /* space for collapsed drawer */
+  }
+  .sphere {
+    width: 120px;
+    height: 120px;
+  }
+}
+@media (max-width: 479px) {
+  .sphere {
+    width: 100px;
+    height: 100px;
+  }
+}
+```
+
+**Step 3: Commit**
+
+```bash
+git add src/components/MobileDrawer.vue src/components/Main.vue
+git commit -m "feat(orbital): add MobileDrawer and responsive layout for mobile/tablet"
+```
+
+---
+
+## QUALITY GATE 3: Mobile Experience
+
+**This is mandatory. Do not skip.**
+
+### QG3 Step 1: Take mobile screenshots
+
+Use chrome-devtools MCP:
+1. Resize to 375x812 (iPhone), screenshot
+2. Resize to 768x1024 (iPad), screenshot
+3. Resize to 480x800 (small tablet), screenshot
+
+### QG3 Step 2: Critical analysis — Mobile (375px)
+
+- [ ] Sphere centered in viewport, 100px diameter
+- [ ] No glass panels visible in main area (they're in the drawer)
+- [ ] Starfield visible behind sphere
+- [ ] Particles visible around sphere
+- [ ] Bottom drawer: tab bar visible at bottom (48px, "ATC" and "MUSIC" tabs)
+- [ ] Drawer collapsed by default — only tab bar shows
+- [ ] Tap to expand drawer — slides up to 50vh
+- [ ] Active tab: text is bright, inactive is dim
+- [ ] DataList inside drawer: search input, scrollable list, volume slider
+- [ ] No ghost text on mobile (disabled per spec 10, decision #10)
+- [ ] No 3D panel tilt on mobile (disabled per spec 10, decision #11)
+- [ ] Header: "ORBITAL" left, status text truncated/shortened on right
+- [ ] Footer: visible below drawer when drawer is collapsed, or scrolls away
+
+### QG3 Step 3: Critical analysis — Tablet (768px)
+
+- [ ] Two-column layout with panels flanking sphere (per spec 2.2)
+- [ ] Panels narrower (max-width 280px)
+- [ ] Tilt reduced to 1deg
+- [ ] Sphere: 140px diameter
+- [ ] Everything functional: search, selection, volume
+
+### QG3 Step 4: Touch interaction check
+
+Use chrome-devtools MCP to simulate touch:
+- [ ] Swipe up on drawer: expands
+- [ ] Swipe down on drawer: collapses
+- [ ] Tap sphere: toggles play/pause
+- [ ] Tap list row: selects item
+- [ ] Volume slider: draggable on touch
+
+### QG3 Step 5: Fix all discrepancies, re-verify, commit
+
+```bash
+git add -A
+git commit -m "fix(orbital): quality gate 3 — mobile/tablet visual corrections"
+```
+
+---
+
+## Phase 11: Keyboard Shortcuts
+
+### Task 11.1: Add global keyboard shortcuts
+
+**Files:**
+- Modify: `src/components/Main.vue`
+
+**Step 1: Add keydown listener**
+
+Spec reference: section 4.1
+
+In `mounted()`, add `window.addEventListener('keydown', this.handleKeydown)`.
+In `beforeUnmount()`, remove it.
+
+```js
+handleKeydown(e) {
+  // Don't capture when typing in search inputs
+  if (e.target.tagName === 'INPUT') {
+    if (e.key === 'Escape') {
+      e.target.blur();
+      e.target.value = '';
+    }
+    return;
+  }
+
+  switch(e.key) {
+    case ' ':
+      e.preventDefault();
+      this.toggleAppStatus();
+      break;
+    case '[':
+      this.setMusicVolume(Math.max(0, this.musicVolume - 0.1));
+      break;
+    case ']':
+      this.setMusicVolume(Math.min(1, this.musicVolume + 0.1));
+      break;
+    case '{':
+      this.setAirportVolume(Math.max(0, this.airportVolume - 0.1));
+      break;
+    case '}':
+      this.setAirportVolume(Math.min(1, this.airportVolume + 0.1));
+      break;
+  }
+}
+```
+
+**Step 2: Commit**
+
+```bash
+git add src/components/Main.vue
+git commit -m "feat(orbital): add global keyboard shortcuts for playback and volume"
+```
+
+---
+
+## Phase 12: Cleanup
+
+### Task 12.1: Remove old components and dependencies
+
+**Files:**
+- Delete: `src/components/CustomSelect.vue`
+- Delete: `src/components/Airports.vue`
+- Delete: `src/components/Music.vue`
+- Modify: `package.json` — remove `vue-audio-visual`
+- Delete: `src/assets/christmas-hat.png` (christmas easter egg dropped)
+
+**Step 1: Delete files**
+
+```bash
+rm src/components/CustomSelect.vue
+rm src/components/Airports.vue
+rm src/components/Music.vue
+rm src/assets/christmas-hat.png
+```
+
+**Step 2: Remove vue-audio-visual**
+
+```bash
+npm uninstall vue-audio-visual
+```
+
+**Step 3: Remove AudioVisual plugin from main.js**
+
+In `src/main.js`, remove:
+```js
+import AudioVisual from 'vue-audio-visual';
+// ...
+app.use(AudioVisual);
+```
+
+**Step 4: Verify build**
+
+```bash
+npm run build
+```
+
+Should succeed with no errors.
+
+**Step 5: Commit**
+
+```bash
+git add -A
+git commit -m "chore(orbital): remove old components, vue-audio-visual, and christmas easter egg"
+```
+
+---
+
+## Phase 13: Accessibility Pass
+
+### Task 13.1: Verify and fix ARIA roles
+
+**Files:**
+- Modify: various components as needed
+
+**Step 1: Audit against spec section 7.2**
+
+Use chrome-devtools MCP `evaluate_script` to verify every ARIA attribute listed in spec section 7.2:
+
+```js
+// Sphere
+document.querySelector('.sphere').getAttribute('role') // "button"
+document.querySelector('.sphere').getAttribute('aria-label') // contains "playback"
+document.querySelector('.sphere').getAttribute('tabindex') // "0"
+
+// Airport list
+document.querySelector('.panel--airport .data-list__items').getAttribute('role') // "listbox"
+document.querySelector('.panel--airport .data-list__items').getAttribute('aria-label') // "Airport selection"
+
+// Music list
+document.querySelector('.panel--music .data-list__items').getAttribute('role') // "listbox"
+
+// List rows
+document.querySelectorAll('.data-list__row')[0].getAttribute('role') // "option"
+document.querySelectorAll('.data-list__row')[0].hasAttribute('aria-selected') // true
+
+// Volume
+document.querySelector('.panel--airport input[type=range]').getAttribute('aria-label') // "Airport volume"
+document.querySelector('.panel--music input[type=range]').getAttribute('aria-label') // "Music volume"
+
+// Canvases
+document.querySelector('.particles').getAttribute('role') // "img"
+document.querySelector('.starfield').getAttribute('aria-hidden') // "true"
+
+// Ghost text
+document.querySelector('.panel__ghost').getAttribute('aria-hidden') // "true"
+```
+
+**Step 2: Add prefers-reduced-motion handling**
+
+Verify CSS media query is in place (from App.vue global styles). Verify canvas components check `matchMedia('(prefers-reduced-motion: reduce)')`.
+
+**Step 3: Commit**
+
+```bash
+git add -A
+git commit -m "fix(orbital): accessibility pass — ARIA roles, reduced motion, focus management"
+```
+
+---
+
+## QUALITY GATE 4: Final Verification
+
+**This is the final gate. Be extremely thorough.**
+
+> Use `frontend-design:frontend-design` skill for final visual assessment.
+
+### QG4 Step 1: Full screenshot suite
+
+Use chrome-devtools MCP:
+1. Desktop 1280x800 — paused state
+2. Desktop 1280x800 — playing state (click sphere first)
+3. Tablet 768x1024
+4. Mobile 375x812 — drawer collapsed
+5. Mobile 375x812 — drawer expanded (ATC tab)
+6. Mobile 375x812 — drawer expanded (Music tab)
+
+### QG4 Step 2: Pixel-level design audit
+
+For EACH screenshot, verify against the spec:
+
+**Colors (check ALL of these):**
+- [ ] Background: #080812 with aurora gradients
+- [ ] Header bg: semi-transparent with blur
+- [ ] Panel bg: rgba(255,255,255,0.04) at rest
+- [ ] Primary text: #E8E8EC
+- [ ] Dim text: rgba(232,232,236,0.5)
+- [ ] Airport accent: #44FFBB
+- [ ] Music accent: #FFCC66
+- [ ] Sphere accent: #AA88FF
+- [ ] No old colors remaining (#191921, #23242B, #3949D3, #dadada)
+
+**Typography:**
+- [ ] App name: Space Grotesk, visually distinct from body text
+- [ ] List items: Inter font
+- [ ] Ghost text: Space Grotesk, large, very faint
+- [ ] All labels: uppercase where spec says uppercase
+- [ ] Letter-spacing matches (visually verify wide tracking on labels)
+
+**Spacing:**
+- [ ] Panel padding: 24px (desktop)
+- [ ] Gap between panels and sphere: ~32px
+- [ ] List row height: ~44px
+- [ ] Panel border-radius: 16px (visually rounded)
+- [ ] No elements touching edges or overlapping incorrectly
+
+**Animations:**
+- [ ] Sphere breathes when paused
+- [ ] Sphere rings pulse when playing
+- [ ] Aurora background shifts slowly
+- [ ] Stars twinkle/shift subtly
+- [ ] Particles orbit smoothly (music) and jitter (airport)
+- [ ] Panel glass effect transitions on hover
+
+**Functionality:**
+- [ ] Play/pause works via sphere click
+- [ ] Play/pause works via spacebar
+- [ ] Airport selection changes audio source
+- [ ] Music selection changes audio source
+- [ ] Volume sliders work for both channels independently
+- [ ] Search filters both lists
+- [ ] Toast notifications appear on error (styled correctly)
+- [ ] `[`/`]` keys change music volume
+- [ ] `{`/`}` keys change airport volume
+
+### QG4 Step 3: Computed style full audit
+
+```js
+// Run comprehensive style checks
+const checks = [];
+const assert = (name, actual, expected) => {
+  const pass = actual.trim() === expected;
+  checks.push({ name, actual: actual.trim(), expected, pass });
+};
+
+// Header
+const header = document.querySelector('.header');
+assert('header height', getComputedStyle(header).height, '48px');
+
+// Sphere
+const sphere = document.querySelector('.sphere');
+assert('sphere width', getComputedStyle(sphere).width, '160px');
+assert('sphere height', getComputedStyle(sphere).height, '160px');
+assert('sphere border-radius', getComputedStyle(sphere).borderRadius, '50%');
+assert('sphere cursor', getComputedStyle(sphere).cursor, 'pointer');
+
+// Panels
+const panel = document.querySelector('.panel');
+assert('panel border-radius', getComputedStyle(panel).borderRadius, '16px');
+assert('panel padding', getComputedStyle(panel).padding, '24px');
+assert('panel width', getComputedStyle(panel).width, '320px');
+
+// DataList search
+const search = document.querySelector('.data-list__search');
+assert('search border-radius', getComputedStyle(search).borderRadius, '8px');
+assert('search height', getComputedStyle(search).height, '36px');
+
+// Footer
+const footer = document.querySelector('.footer');
+assert('footer height', getComputedStyle(footer).height, '36px');
+
+// CSS variables
+const root = getComputedStyle(document.documentElement);
+assert('--bg', root.getPropertyValue('--bg'), '#080812');
+assert('--accent-cool', root.getPropertyValue('--accent-cool'), '#44FFBB');
+assert('--accent-warm', root.getPropertyValue('--accent-warm'), '#FFCC66');
+assert('--accent-neutral', root.getPropertyValue('--accent-neutral'), '#AA88FF');
+
+// Report
+const failures = checks.filter(c => !c.pass);
+console.log(`${checks.length - failures.length}/${checks.length} passed`);
+if (failures.length) console.table(failures);
+```
+
+ALL checks must pass.
+
+### QG4 Step 4: Lighthouse quick audit
+
+Use chrome-devtools MCP `lighthouse_audit` for:
+- Performance score (target: >= 80)
+- Accessibility score (target: >= 90)
+
+### QG4 Step 5: Build verification
+
+```bash
+npm run build
+```
+
+Must complete without errors or warnings.
+
+### QG4 Step 6: Final commit
+
+```bash
+git add -A
+git commit -m "fix(orbital): quality gate 4 — final visual and accessibility polish"
+```
+
+---
+
+## Summary: Task Count
+
+| Phase | Tasks | Description |
+|-------|-------|-------------|
+| 1 | 2 | Design system foundation (fonts, CSS vars, aurora) |
+| 2 | 1 | Header bar |
+| 3 | 1 | Central sphere |
+| 4 | 1 | DataList shared component |
+| 5 | 1 | GlassPanel container |
+| 6 | 2 | Desktop layout assembly + footer restyle |
+| QG1 | — | Quality gate: layout & visual foundation |
+| 7 | 1 | Starfield canvas |
+| 8 | 1 | useAudioAnalyser composable |
+| 9 | 1 | Particle canvas |
+| QG2 | — | Quality gate: full desktop experience |
+| 10 | 2 | Mobile drawer + responsive layout |
+| QG3 | — | Quality gate: mobile experience |
+| 11 | 1 | Keyboard shortcuts |
+| 12 | 1 | Cleanup (remove old code + deps) |
+| 13 | 1 | Accessibility pass |
+| QG4 | — | Quality gate: final verification |
+
+**Total: 16 implementation tasks + 4 quality gates**

From f28d0a5704112d80b1cad47ac70ac3a5db8c31b3 Mon Sep 17 00:00:00 2001
From: Ivan Kalachikov <ivan.kalachikov@gmail.com>
Date: Fri, 6 Mar 2026 14:18:14 +0000
Subject: [PATCH 03/22] feat(orbital): add Space Grotesk + Inter fonts to
 index.html

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 index.html | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/index.html b/index.html
index 4e17494..e7f61da 100644
--- a/index.html
+++ b/index.html
@@ -7,6 +7,10 @@
     <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
     <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
     <link rel="manifest" href="/site.webmanifest">
+    <meta name="color-scheme" content="dark">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=Inter:wght@300;400;500&display=swap" rel="stylesheet">
     <title>Focused</title>
   </head>
   <body>

From 05a37fcb5df6398a6e9a3725b592d52c9a30c4a4 Mon Sep 17 00:00:00 2001
From: Ivan Kalachikov <ivan.kalachikov@gmail.com>
Date: Fri, 6 Mar 2026 14:18:19 +0000
Subject: [PATCH 04/22] feat(orbital): replace global CSS with Orbital design
 system variables and aurora background

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/App.vue | 212 ++++++++++++++++++++++------------------------------
 1 file changed, 91 insertions(+), 121 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 26f4622..58a43a9 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -34,160 +34,130 @@ export default {
 </script>
 
 <style>
-@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
-
+/* ── Orbital Design System ── */
+
+/* 1. CSS Variables (spec 1.1) */
+:root {
+  --bg: #080812;
+  --bg-gradient-from: #0D0B1A;
+  --bg-gradient-to: #0A1A1A;
+  --surface: rgba(255, 255, 255, 0.04);
+  --surface-active: rgba(255, 255, 255, 0.10);
+  --glass-border: rgba(255, 255, 255, 0.08);
+  --glass-border-active: rgba(255, 255, 255, 0.18);
+  --text-primary: #E8E8EC;
+  --text-dim: rgba(232, 232, 236, 0.5);
+  --text-muted: rgba(232, 232, 236, 0.25);
+  --accent-warm: #FFCC66;
+  --accent-warm-glow: rgba(255, 204, 102, 0.25);
+  --accent-cool: #44FFBB;
+  --accent-cool-glow: rgba(68, 255, 187, 0.25);
+  --accent-neutral: #AA88FF;
+  --accent-neutral-glow: rgba(170, 136, 255, 0.3);
+  --error: #FF6655;
+  --warning: #FFB844;
+  --star-color: rgba(255, 255, 255, 0.6);
+  --font-display: 'Space Grotesk', sans-serif;
+  --font-body: 'Inter', sans-serif;
+}
+
+/* 2. Global reset */
 *, *::before, *::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
 }
-
 html, body {
   height: 100%;
-  background: #191921;
+  background: var(--bg);
 }
-
 #app {
-  font-family: Roboto, Helvetica, Arial, sans-serif;
+  font-family: var(--font-body);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  color: #dadada;
+  color: var(--text-primary);
   height: 100%;
 }
+a { color: var(--text-primary); text-decoration: none; }
+a:hover { color: #fff; }
 
-a {
-  color: #bbb;
-  text-decoration: none;
-}
-
-a:hover, a:active {
-  color: #eee;
-}
-
+/* 3. Layout with aurora background (spec 1.4) */
 .layout {
   min-height: 100%;
   overflow: hidden;
   position: relative;
-  background: #191921;
-  display: flex;
-  flex-direction: column;
-}
-
-/* Shared layout utilities */
-.row {
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.justify-center {
-  justify-content: center;
-}
-
-/* Shared card styles */
-.card-col {
-  width: 100%;
-  max-width: 360px;
-}
-
-.card {
-  background: #23242B;
-  border-radius: 8px;
-  padding: 16px;
-}
-
-.card-header {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  margin-bottom: 12px;
-}
-
-/* Text utilities */
-.text-secondary {
-  color: #888;
-}
-
-/* Shared slider styles */
-.slider {
-  -webkit-appearance: none;
-  appearance: none;
-  width: 100%;
-  height: 6px;
-  background: #393744;
-  border-radius: 3px;
-  outline: none;
-  margin-top: 4px;
-}
-
-.slider::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  width: 14px;
-  height: 14px;
-  background: #3949D3;
-  border-radius: 50%;
-  cursor: pointer;
-}
-
-.slider::-moz-range-thumb {
-  width: 14px;
-  height: 14px;
-  background: #3949D3;
-  border-radius: 50%;
-  cursor: pointer;
-  border: none;
-}
-
-.slider:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-/* Shared icon wrapper */
-.icon-wrapper {
-  position: relative;
-  flex-shrink: 0;
-  width: 40px;
-}
-
-.icon-wrapper.error path {
-  fill: #6f2b39;
-}
-
-.icon-wrapper.error circle {
-  stroke: #6f2b39;
-}
-
-.spinner {
-  position: absolute;
-  top: -1px;
-  left: -1px;
-}
-
-/* Toast notifications */
+  background-color: var(--bg);
+  background-image:
+    radial-gradient(ellipse at 20% 50%, rgba(13, 11, 26, 0.8) 0%, transparent 60%),
+    radial-gradient(ellipse at 80% 50%, rgba(10, 26, 26, 0.8) 0%, transparent 60%),
+    radial-gradient(ellipse at 50% 100%, rgba(68, 255, 187, 0.03) 0%, transparent 40%),
+    radial-gradient(ellipse at 50% 0%, rgba(170, 136, 255, 0.04) 0%, transparent 40%);
+  background-size: 200% 200%;
+  animation: aurora 20s ease-in-out infinite alternate;
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  grid-template-areas:
+    "header"
+    "main"
+    "footer";
+}
+@keyframes aurora {
+  0%, 100% { background-position: 40% 50%; }
+  50% { background-position: 60% 50%; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .layout { animation: none; }
+}
+
+/* 4. Toast styles (spec 3.8) */
 .toast {
   position: fixed;
   top: 20px;
   left: 50%;
   transform: translateX(-50%);
-  padding: 10px 24px;
-  border-radius: 6px;
-  color: #dadada;
-  font-size: 14px;
+  padding: 12px 20px;
+  border-radius: 12px;
+  color: var(--text-primary);
+  font-family: var(--font-body);
+  font-size: 13px;
   z-index: 1000;
+  background: var(--surface-active);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border: 1px solid var(--glass-border-active);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
 }
-
 .toast--error {
-  background: #5E2551;
-  border: 1px solid #6f2b39;
+  border-color: var(--error);
+  color: var(--error);
 }
 
+/* 5. Transitions */
 .fade-enter-active,
 .fade-leave-active {
-  transition: opacity 0.3s;
+  transition: opacity 0.3s, transform 0.3s;
 }
-
 .fade-enter-from,
 .fade-leave-to {
   opacity: 0;
+  transform: translateX(-50%) translateY(-20px);
+}
+.fade-enter-to,
+.fade-leave-from {
+  opacity: 1;
+  transform: translateX(-50%) translateY(0);
+}
+
+/* 6. Focus states (spec 4.3) */
+*:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--accent-neutral), 0 0 12px var(--accent-neutral-glow);
+}
+
+/* 7. Backdrop-filter fallback (spec 11) */
+@supports not (backdrop-filter: blur(1px)) {
+  .panel, .header, .footer, .toast, .drawer {
+    background: rgba(15, 15, 25, 0.85) !important;
+  }
 }
 </style>

From 44ea4f505f26f78d319b19d1b69d586e228898e7 Mon Sep 17 00:00:00 2001
From: Ivan Kalachikov <ivan.kalachikov@gmail.com>
Date: Fri, 6 Mar 2026 14:19:53 +0000
Subject: [PATCH 05/22] feat(orbital): add HeaderBar with app name, breathing
 dot, and status text

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/App.vue                  |  3 ++
 src/components/HeaderBar.vue | 99 ++++++++++++++++++++++++++++++++++++
 2 files changed, 102 insertions(+)
 create mode 100644 src/components/HeaderBar.vue

diff --git a/src/App.vue b/src/App.vue
index 58a43a9..f9c1f6b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,6 @@
 <template>
   <div class="layout">
+    <HeaderBar />
     <Main />
     <Footer />
     <transition name="fade">
@@ -12,12 +13,14 @@
 
 <script>
 import { mapState, mapMutations } from 'vuex';
+import HeaderBar from './components/HeaderBar.vue';
 import Main from './components/Main.vue';
 import Footer from './components/Footer.vue';
 
 export default {
   name: 'App',
   components: {
+    HeaderBar,
     Main,
     Footer,
   },
diff --git a/src/components/HeaderBar.vue b/src/components/HeaderBar.vue
new file mode 100644
index 0000000..57e357d
--- /dev/null
+++ b/src/components/HeaderBar.vue
@@ -0,0 +1,99 @@
+<template>
+  <header class="header">
+    <div class="header__left">
+      <span class="header__name">ORBITAL</span>
+      <span class="header__dot" :class="{ 'header__dot--playing': appStatus === 'playing' }" aria-hidden="true"></span>
+    </div>
+    <div class="header__right">
+      <span class="header__status">{{ statusText }}</span>
+    </div>
+  </header>
+</template>
+
+<script>
+import { mapState } from 'vuex';
+
+export default {
+  name: 'HeaderBar',
+  computed: {
+    ...mapState(['appStatus']),
+    ...mapState({
+      currentCode: (state) => state.airports.currentCode,
+      currentId: (state) => state.music.currentId,
+      musicList: (state) => state.music.list,
+    }),
+    currentStationName() {
+      return this.musicList[this.currentId]?.name ?? '';
+    },
+    statusText() {
+      if (this.appStatus === 'playing') {
+        return `NOW PLAYING: ${this.currentCode} / ${this.currentStationName}`;
+      }
+      return '';
+    },
+  },
+};
+</script>
+
+<style scoped>
+.header {
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 24px;
+  background: var(--surface);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border-bottom: 1px solid var(--glass-border);
+  grid-area: header;
+  z-index: 10;
+}
+
+.header__left {
+  display: flex;
+  align-items: center;
+}
+
+.header__name {
+  font-family: var(--font-display);
+  font-size: 18px;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--accent-neutral);
+}
+
+.header__dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--accent-neutral);
+  margin-left: 8px;
+  display: inline-block;
+  vertical-align: middle;
+  opacity: 0.3;
+  transform: scale(0.8);
+}
+
+.header__dot--playing {
+  animation: dot-breathe 2s ease-in-out infinite;
+}
+
+.header__status {
+  font-family: var(--font-body);
+  font-size: 11px;
+  color: var(--text-dim);
+}
+
+@keyframes dot-breathe {
+  0%, 100% {
+    opacity: 0.3;
+    transform: scale(0.8);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+</style>

From 9cd17d330c9a3cf12d4ee23d3e12217a1ba18c40 Mon Sep 17 00:00:00 2001
From: Ivan Kalachikov <ivan.kalachikov@gmail.com>
Date: Fri, 6 Mar 2026 14:20:02 +0000
Subject: [PATCH 06/22] feat(orbital): add Sphere play/pause component with
 breathing, rings, and state animations

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/components/Sphere.vue | 151 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 151 insertions(+)
 create mode 100644 src/components/Sphere.vue

diff --git a/src/components/Sphere.vue b/src/components/Sphere.vue
new file mode 100644
index 0000000..6991140
--- /dev/null
+++ b/src/components/Sphere.vue
@@ -0,0 +1,151 @@
+<template>
+  <button
+    class="sphere"
+    :class="stateClass"
+    @click="$emit('toggle')"
+    role="button"
+    :aria-label="`Toggle playback. Currently ${appStatus}`"
+    tabindex="0"
+  >
+    <span v-if="appStatus === 'playing'" class="sphere__ring" v-for="n in 3" :key="n"></span>
+    <span v-if="isBuffering" class="sphere__loading-ring"></span>
+  </button>
+</template>
+
+<script>
+export default {
+  name: 'Sphere',
+  props: {
+    appStatus: {
+      type: String,
+      required: true,
+    },
+    isBuffering: {
+      type: Boolean,
+      default: false,
+    },
+    hasError: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ['toggle'],
+  computed: {
+    stateClass() {
+      return {
+        'sphere--playing': this.appStatus === 'playing',
+        'sphere--paused': this.appStatus === 'paused',
+        'sphere--buffering': this.isBuffering,
+        'sphere--error': this.hasError,
+      };
+    },
+  },
+};
+</script>
+
+<style scoped>
+.sphere {
+  width: 160px;
+  height: 160px;
+  border-radius: 50%;
+  background: radial-gradient(
+    circle at 40% 35%,
+    rgba(200, 180, 255, 0.25) 0%,
+    rgba(170, 136, 255, 0.15) 30%,
+    rgba(170, 136, 255, 0.05) 60%,
+    transparent 80%
+  );
+  box-shadow:
+    0 0 40px var(--accent-neutral-glow),
+    inset 0 0 30px rgba(170, 136, 255, 0.1);
+  border: 1px solid rgba(170, 136, 255, 0.15);
+  cursor: pointer;
+  position: relative;
+  transition: box-shadow 0.6s ease, transform 0.6s ease;
+  /* Reset button styles */
+  padding: 0;
+  outline: none;
+  font: inherit;
+  color: inherit;
+  flex-shrink: 0;
+  z-index: 2;
+}
+
+/* Paused (breathing) */
+.sphere--paused {
+  animation: breathe 4s ease-in-out infinite;
+}
+
+@keyframes breathe {
+  0%, 100% { transform: scale(1); box-shadow: 0 0 40px var(--accent-neutral-glow); }
+  50% { transform: scale(1.04); box-shadow: 0 0 60px var(--accent-neutral-glow); }
+}
+
+/* Playing */
+.sphere--playing {
+  transform: scale(1.02);
+  box-shadow:
+    0 0 60px var(--accent-neutral-glow),
+    0 0 120px rgba(170, 136, 255, 0.15);
+}
+
+/* Rings (playing state) */
+.sphere__ring {
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  border: 2px solid var(--accent-neutral);
+  pointer-events: none;
+  animation: ring-expand 3s ease-out infinite;
+}
+
+.sphere__ring:nth-child(1) { animation-delay: 0s; }
+.sphere__ring:nth-child(2) { animation-delay: 1s; }
+.sphere__ring:nth-child(3) { animation-delay: 2s; }
+
+@keyframes ring-expand {
+  0% { transform: scale(1); opacity: 0.4; border-width: 2px; }
+  100% { transform: scale(2.5); opacity: 0; border-width: 0.5px; }
+}
+
+/* Buffering */
+.sphere--buffering {
+  animation: breathe 1.5s ease-in-out infinite;
+}
+
+.sphere--buffering .sphere__loading-ring {
+  /* exists */
+}
+
+.sphere__loading-ring {
+  position: absolute;
+  inset: -8px;
+  border-radius: 50%;
+  border: 2px solid transparent;
+  border-top-color: var(--warning);
+  animation: orbit-ring 1.2s linear infinite;
+  pointer-events: none;
+}
+
+@keyframes orbit-ring {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+/* Error */
+.sphere--error {
+  box-shadow: 0 0 40px rgba(255, 102, 85, 0.3);
+  opacity: 0.7;
+}
+
+/* Responsive */
+@media (max-width: 1023px) { .sphere { width: 140px; height: 140px; } }
+@media (max-width: 767px) { .sphere { width: 120px; height: 120px; } }
+@media (max-width: 479px) { .sphere { width: 100px; height: 100px; } }
+
+/* Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .sphere, .sphere--paused, .sphere--buffering { animation: none; }
+  .sphere__ring, .sphere__loading-ring { animation: none; display: none; }
+}
+</style>

From a0bcdab9243d9e24104880655bf4863f715e41b5 Mon Sep 17 00:00:00 2001
From: Ivan Kalachikov <ivan.kalachikov@gmail.com>
Date: Fri, 6 Mar 2026 14:20:32 +0000
Subject: [PATCH 07/22] feat(orbital): add DataList reusable component with
 search, scroll, and volume slider

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/components/DataList.vue | 232 ++++++++++++++++++++++++++++++++++++
 1 file changed, 232 insertions(+)
 create mode 100644 src/components/DataList.vue

diff --git a/src/components/DataList.vue b/src/components/DataList.vue
new file mode 100644
index 0000000..df59b82
--- /dev/null
+++ b/src/components/DataList.vue
@@ -0,0 +1,232 @@
+<template>
+  <div class="data-list">
+    <span class="data-list__label">{{ label }}</span>
+    <div class="data-list__search-wrapper">
+      <input
+        class="data-list__search"
+        type="text"
+        :placeholder="'Search...'"
+        v-model="query"
+        :aria-label="'Search ' + label"
+      />
+    </div>
+    <div class="data-list__items" role="listbox" :aria-label="label + ' selection'">
+      <div
+        v-for="item in filteredItems"
+        :key="item[valueKey]"
+        class="data-list__row"
+        :class="{ 'data-list__row--active': item[valueKey] === modelValue }"
+        role="option"
+        :aria-selected="item[valueKey] === modelValue"
+        @click="$emit('update:modelValue', item[valueKey])"
+      >
+        <span class="data-list__indicator">{{ item[valueKey] === modelValue ? '*' : '' }}</span>
+        <span class="data-list__primary">{{ item[labelKey] }}</span>
+        <span v-for="sec in secondaryKeys" :key="sec.key" class="data-list__secondary">
+          {{ item[sec.key] }}
+        </span>
+      </div>
+    </div>
+    <div class="data-list__volume">
+      <span class="data-list__vol-label">VOL</span>
+      <input
+        type="range"
+        class="data-list__slider"
+        min="0"
+        max="100"
+        :value="Math.round(volume * 100)"
+        @input="$emit('update:volume', Number($event.target.value) / 100)"
+        :aria-label="label + ' volume'"
+      />
+      <span class="data-list__vol-value">{{ Math.round(volume * 100) }}%</span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'DataList',
+  props: {
+    items: { type: Array, required: true },
+    valueKey: { type: String, required: true },
+    labelKey: { type: String, required: true },
+    secondaryKeys: { type: Array, default: () => [] },
+    filterKeys: { type: Array, required: true },
+    modelValue: { required: true },
+    volume: { type: Number, required: true },
+    label: { type: String, required: true },
+    accentColor: { type: String, default: '--accent-cool' },
+  },
+  emits: ['update:modelValue', 'update:volume'],
+  data() {
+    return {
+      query: '',
+    };
+  },
+  computed: {
+    filteredItems() {
+      if (!this.query) return this.items;
+      const q = this.query.toLowerCase();
+      return this.items.filter((item) =>
+        this.filterKeys.some((key) =>
+          String(item[key] || '').toLowerCase().includes(q)
+        )
+      );
+    },
+  },
+  methods: {
+    applyAccentColor() {
+      const glowVar = this.accentColor + '-glow';
+      this.$el.style.setProperty('--accent', 'var(' + this.accentColor + ')');
+      this.$el.style.setProperty('--accent-glow', 'var(' + glowVar + ')');
+    },
+  },
+  mounted() {
+    this.applyAccentColor();
+  },
+  watch: {
+    accentColor() {
+      this.applyAccentColor();
+    },
+  },
+};
+</script>
+
+<style>
+.data-list__label {
+  font-family: var(--font-body);
+  font-size: 11px;
+  font-weight: 400;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--text-dim);
+  display: block;
+  margin-bottom: 12px;
+}
+
+.data-list__search {
+  width: 100%;
+  font-family: var(--font-body);
+  font-size: 13px;
+  color: var(--text-primary);
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid var(--glass-border);
+  border-radius: 8px;
+  padding: 0 12px;
+  height: 36px;
+  outline: none;
+  transition: border-color 0.2s ease;
+}
+.data-list__search::placeholder {
+  color: var(--text-muted);
+}
+.data-list__search:focus {
+  border-color: var(--accent);
+}
+
+.data-list__items {
+  max-height: 300px;
+  overflow-y: auto;
+  margin: 12px 0;
+}
+/* Custom scrollbar */
+.data-list__items::-webkit-scrollbar { width: 4px; }
+.data-list__items::-webkit-scrollbar-track { background: transparent; }
+.data-list__items::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border-radius: 2px; }
+
+.data-list__row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0 12px;
+  height: 44px;
+  cursor: pointer;
+  color: var(--text-dim);
+  transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
+  border-left: 2px solid transparent;
+}
+.data-list__row:hover {
+  color: var(--text-primary);
+  background: rgba(255, 255, 255, 0.03);
+}
+.data-list__row--active {
+  color: var(--accent);
+  border-left-color: var(--accent);
+  box-shadow: inset 4px 0 8px var(--accent-glow);
+}
+
+.data-list__indicator {
+  width: 12px;
+  text-align: center;
+  flex-shrink: 0;
+  color: var(--accent);
+}
+
+.data-list__primary {
+  flex: 1;
+  font-family: var(--font-body);
+  font-size: 14px;
+  font-weight: 400;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.data-list__secondary {
+  font-family: var(--font-body);
+  font-size: 12px;
+  color: var(--text-dim);
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  flex-shrink: 0;
+}
+
+.data-list__volume {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 12px;
+}
+
+.data-list__vol-label,
+.data-list__vol-value {
+  font-family: var(--font-body);
+  font-size: 11px;
+  color: var(--text-dim);
+  flex-shrink: 0;
+}
+
+.data-list__slider {
+  -webkit-appearance: none;
+  appearance: none;
+  flex: 1;
+  height: 4px;
+  background: rgba(255, 255, 255, 0.08);
+  border-radius: 2px;
+  outline: none;
+}
+.data-list__slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 12px;
+  height: 12px;
+  background: var(--accent);
+  border-radius: 50%;
+  cursor: pointer;
+  box-shadow: 0 0 8px var(--accent-glow);
+}
+.data-list__slider::-moz-range-thumb {
+  width: 12px;
+  height: 12px;
+  background: var(--accent);
+  border-radius: 50%;
+  cursor: pointer;
+  border: none;
+  box-shadow: 0 0 8px var(--accent-glow);
+}
+
+@media (pointer: coarse) {
+  .data-list__search { height: 44px; }
+  .data-list__row { min-height: 44px; }
+  .data-list__slider { padding: 20px 0; }
+}
+</style>

From 817a5d68a9f07b414b6d0e0e0928c1f6d4a4e61e Mon Sep 17 00:00:00 2001
From: Ivan Kalachikov <ivan.kalachikov@gmail.com>
Date: Fri, 6 Mar 2026 14:20:41 +0000
Subject: [PATCH 08/22] feat(orbital): add GlassPanel with adaptive
 glassmorphism, 3D tilt, ghost text

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/components/GlassPanel.vue | 143 ++++++++++++++++++++++++++++++++++
 1 file changed, 143 insertions(+)
 create mode 100644 src/components/GlassPanel.vue

diff --git a/src/components/GlassPanel.vue b/src/components/GlassPanel.vue
new file mode 100644
index 0000000..c6f5c57
--- /dev/null
+++ b/src/components/GlassPanel.vue
@@ -0,0 +1,143 @@
+<template>
+  <div
+    class="panel"
+    :class="[tiltClass]"
+    @mousemove="onMouseMove"
+    @mouseleave="onMouseLeave"
+    :style="panelStyle"
+  >
+    <span v-if="ghostText" class="panel__ghost" aria-hidden="true">{{ displayGhost }}</span>
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'GlassPanel',
+  props: {
+    tilt: {
+      type: String,
+      default: 'none',
+    },
+    ghostText: {
+      type: String,
+      default: '',
+    },
+    accentColor: {
+      type: String,
+      default: '--accent-neutral',
+    },
+  },
+  data() {
+    return {
+      displayGhost: this.ghostText,
+    };
+  },
+  watch: {
+    ghostText(newVal) {
+      setTimeout(() => {
+        this.displayGhost = newVal;
+      }, 200);
+    },
+  },
+  computed: {
+    tiltClass() {
+      if (this.tilt === 'left') return 'panel--left';
+      if (this.tilt === 'right') return 'panel--right';
+      return '';
+    },
+    panelStyle() {
+      return {};
+    },
+  },
+  methods: {
+    onMouseMove(e) {
+      if (window.innerWidth < 768) return;
+      const rect = e.currentTarget.getBoundingClientRect();
+      const x = (e.clientX - rect.left) / rect.width - 0.5;
+      const y = (e.clientY - rect.top) / rect.height - 0.5;
+      const baseY = this.tilt === 'left' ? 2 : this.tilt === 'right' ? -2 : 0;
+      e.currentTarget.style.transform = `perspective(800px) rotateY(${baseY + x * 3}deg) rotateX(${-y * 2}deg)`;
+    },
+    onMouseLeave(e) {
+      if (window.innerWidth < 768) return;
+      e.currentTarget.style.transition = 'transform 0.4s ease-out';
+      if (this.tilt === 'left') {
+        e.currentTarget.style.transform = 'perspective(800px) rotateY(2deg)';
+      } else if (this.tilt === 'right') {
+        e.currentTarget.style.transform = 'perspective(800px) rotateY(-2deg)';
+      } else {
+        e.currentTarget.style.transform = '';
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+.panel {
+  background: var(--surface);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  border: 1px solid var(--glass-border);
+  border-radius: 16px;
+  padding: 24px;
+  width: 320px;
+  max-height: 60vh;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  overflow: hidden;
+  transition: background 0.4s ease, backdrop-filter 0.4s ease, border-color 0.4s ease, transform 0.4s ease-out;
+  z-index: 2;
+}
+
+.panel:hover,
+.panel:focus-within {
+  background: var(--surface-active);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border-color: var(--glass-border-active);
+}
+
+.panel--left {
+  transform: perspective(800px) rotateY(2deg);
+}
+.panel--right {
+  transform: perspective(800px) rotateY(-2deg);
+}
+
+.panel__ghost {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-family: var(--font-display);
+  font-size: 120px;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  color: var(--text-muted);
+  pointer-events: none;
+  user-select: none;
+  white-space: nowrap;
+  transition: opacity 0.4s ease;
+  text-transform: uppercase;
+}
+
+@media (max-width: 1023px) {
+  .panel { max-width: 280px; }
+  .panel--left { transform: perspective(800px) rotateY(1deg); }
+  .panel--right { transform: perspective(800px) rotateY(-1deg); }
+}
+@media (max-width: 767px) {
+  .panel {
+    width: 100%;
+    max-width: none;
+    max-height: none;
+    transform: none !important;
+    border-radius: 0;
+    padding: 16px;
+  }
+  .panel__ghost { display: none; }
+}
+</style>

From 8c0b056a73e4816c6ffcac12a02e6f96a4987510 Mon Sep 17 00:00:00 2001
From: Ivan Kalachikov <ivan.kalachikov@gmail.com>
Date: Fri, 6 Mar 2026 14:22:47 +0000
Subject: [PATCH 09/22] feat(orbital): rewrite Main.vue with sphere + glass
 panels desktop layout

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/components/Main.vue | 288 +++++++++++-----------------------------
 1 file changed, 78 insertions(+), 210 deletions(-)

diff --git a/src/components/Main.vue b/src/components/Main.vue
index 6f65ed9..e5ee735 100644
--- a/src/components/Main.vue
+++ b/src/components/Main.vue
@@ -1,61 +1,45 @@
 <template>
-  <audio
-    ref="musicPlayer"
-    @error="musicErrorHandler"
-    @play="musicPlayHandler"
-    :src="currentMusicUrl"
-    crossorigin="anonymous"
-  />
-  <audio
-    ref="airportPlayer"
-    @error="airportErrorHandler"
-    @play="airportPlayHandler"
-    :src="currentAirportUrl"
-    crossorigin="anonymous"
-  />
-  <av-line
-    class="audio-visual-music"
-    :line-width="2"
-    line-color="#21212a"
-    ref-link="musicPlayer"
-    :canv-width="1400"
-    :canv-height="210"
-    :fft-size="512"
-  />
-  <av-line
-    class="audio-visual-airport"
-    :line-width="2"
-    line-color="#252535"
-    ref-link="airportPlayer"
-    :canv-width="1000"
-    :canv-height="282"
-    :fft-size="512"
-  />
-  <main class="content">
-    <div class="container">
-      <div class="row justify-center">
-        <div v-if="isChristmasTime" class="christmas">
-          <img
-            src="../assets/christmas-hat.png"
-            :alt="t('ui.christmas')"
-            :title="t('ui.christmas')"
-            class="christmas-hat"
-          >
-        </div>
-        <Logo />
-      </div>
-      <div class="row justify-center">
-        <div
-          :class="['playpause', appStatus === 'playing' ? 'playing' : '']"
-          @click="toggleAppStatus()"
-          :title="appStatus === 'playing' ? t('ui.pause') : t('ui.play')"
-        ></div>
-      </div>
-      <div class="row justify-center cards-row">
-        <Music :audio="this.$refs.musicPlayer" />
-        <Airports :audio="this.$refs.airportPlayer" />
-      </div>
-    </div>
+  <audio ref="musicPlayer" @error="musicErrorHandler" @play="musicPlayHandler" :src="currentMusicUrl" crossorigin="anonymous" />
+  <audio ref="airportPlayer" @error="airportErrorHandler" @play="airportPlayHandler" :src="currentAirportUrl" crossorigin="anonymous" />
+
+  <main class="main-area">
+    <GlassPanel tilt="left" :ghostText="currentAirportCode" accent-color="--accent-cool">
+      <DataList
+        :items="airports"
+        value-key="codeIATA"
+        label-key="city"
+        :secondary-keys="[{ key: 'codeIATA' }, { key: 'countryCode' }]"
+        :filter-keys="['city', 'codeIATA', 'codeICAO', 'country']"
+        :model-value="currentAirportCode"
+        @update:model-value="setCurrentAirportCode"
+        :volume="airportVolume"
+        @update:volume="setAirportVolume"
+        label="ATC FEED"
+        accent-color="--accent-cool"
+      />
+    </GlassPanel>
+
+    <Sphere
+      :app-status="appStatus"
+      :is-buffering="isBuffering"
+      :has-error="hasError"
+      @toggle="toggleAppStatus"
+    />
+
+    <GlassPanel tilt="right" :ghostText="currentMusicName" accent-color="--accent-warm">
+      <DataList
+        :items="musicList"
+        value-key="id"
+        label-key="name"
+        :filter-keys="['name', 'description']"
+        :model-value="currentMusicId"
+        @update:model-value="setCurrentMusicId"
+        :volume="musicVolume"
+        @update:volume="setMusicVolume"
+        label="MUSIC FEED"
+        accent-color="--accent-warm"
+      />
+    </GlassPanel>
   </main>
 </template>
 
@@ -63,9 +47,9 @@
 import { useI18n } from 'vue-i18n';
 import { mapState, mapMutations } from 'vuex';
 import { safePause, safePlay, safeLoad } from '../utilites';
-import Airports from './Airports.vue';
-import Music from './Music.vue';
-import Logo from '../assets/logo.svg';
+import Sphere from './Sphere.vue';
+import GlassPanel from './GlassPanel.vue';
+import DataList from './DataList.vue';
 
 export default {
   name: 'Main',
@@ -82,14 +66,22 @@ export default {
       currentAirportUrl: (state) => state.airports.currentUrl,
       currentMusicUrl: (state) => state.music.currentUrl,
       MusicError: (state) => state.music.error,
+      airports: (state) => state.airports.list,
+      currentAirportCode: (state) => state.airports.currentCode,
+      airportVolume: (state) => state.airports.volume,
+      musicList: (state) => state.music.list,
+      currentMusicId: (state) => state.music.currentId,
+      musicVolume: (state) => state.music.volume,
     }),
-    isChristmasTime() {
-      const currentDate = Date.now();
-      const currentYear = new Date().getFullYear();
-      const currentMonth = new Date().getMonth();
-      const christmasStart = new Date(`${currentMonth === 11 ? currentYear : currentYear + 1}-12-20`).getTime();
-      const christmasEnd = Date(christmasStart + 60 * 60 * 24 * 20 * 1000);
-      return (currentDate > christmasStart) && (currentDate < christmasEnd);
+    currentMusicName() {
+      const station = this.musicList[this.currentMusicId];
+      return station ? station.name : '';
+    },
+    isBuffering() {
+      return this.$store.state.airports.status === 'pending' || this.$store.state.music.status === 'pending';
+    },
+    hasError() {
+      return this.$store.state.airports.status === 'failed' || this.$store.state.music.status === 'failed';
     },
   },
   watch: {
@@ -125,6 +117,12 @@ export default {
         this.setAirportError(null);
       }
     },
+    airportVolume(newVal) {
+      if (this.$refs.airportPlayer) this.$refs.airportPlayer.volume = newVal;
+    },
+    musicVolume(newVal) {
+      if (this.$refs.musicPlayer) this.$refs.musicPlayer.volume = newVal;
+    },
   },
   methods: {
     ...mapMutations([
@@ -134,6 +132,10 @@ export default {
       'setMusicError',
       'setMusicStatus',
       'showToast',
+      'setCurrentAirportCode',
+      'setAirportVolume',
+      'setCurrentMusicId',
+      'setMusicVolume',
     ]),
     toggleAppStatus() {
       const newStatus = this.appStatus === 'playing' ? 'paused' : 'playing';
@@ -176,159 +178,25 @@ export default {
       }
     },
   },
-  components: {
-    Music,
-    Airports,
-    Logo,
-  },
+  components: { Sphere, GlassPanel, DataList },
 };
 </script>
 
 <style>
-.content {
+.main-area {
+  grid-area: main;
   display: flex;
   align-items: center;
   justify-content: center;
-  flex: 1;
-}
-
-.container {
-  width: 100%;
-  padding-top: 40px;
-  padding-bottom: 40px;
-}
-
-.cards-row {
-  gap: 12px;
-}
-
-.playpause {
+  gap: 32px;
+  padding: 24px;
   position: relative;
-  background: #191921;
-  border: 6px #a3a4a7;
-  outline: none;
-  height: 140px;
-  width: 140px;
-  cursor: pointer;
-  border-radius: 50%;
-  animation: pulse 2s ease-in infinite alternate;
-  animation-play-state: paused;
-  margin-top: 75px;
-  margin-bottom: 60px;
-}
-
-.playpause.playing,
-.playpause:hover {
-  animation-play-state: running;
-}
-
-.playpause:focus {
-  outline: none;
-}
-
-.playpause:before {
-  content: "";
-  position: absolute;
-  top: 50px;
-  left: 56px;
-  height: 0;
-  border-style: solid;
-  border-width: 20px 0 20px 40px;
-  border-color: transparent transparent transparent #eeeeee;
-  transition: 0.2s ease;
-}
-
-.playpause.playing:before {
-  left: 54px;
-  height: 40px;
-  border-width: 0 0 0 35px;
-}
-
-.playpause.playing:after {
-  width: 11px;
-}
-
-.playpause:after {
-  content: "";
-  position: absolute;
-  background: inherit;
-  width: 0;
-  height: 60px;
-  top: 30px;
-  left: 66px;
-  transition: 0.15s ease-in-out;
-}
-
-.christmas {
-  position: absolute;
-  transform: translate(100px, -50%);
 }
 
-.christmas-hat {
-   width: 91px;
-  animation: christmas 2s ease-in infinite alternate;
-}
-
-@media screen and (min-width: 768px) {
-  .audio-visual-music canvas,
-  .audio-visual-airport canvas {
-    position: absolute;
-    left: 50%;
-    top: calc(50% - 92px);
-    transform: translate(-50%, -50%);
-  }
-
-  .audio-visual-music canvas {
-    width: 1400px;
-    height: 210px;
-  }
-
-  .audio-visual-airport canvas {
-    width: 1000px;
-    height: 282px;
-  }
-}
-
-@media screen and (max-width: 768px) {
-  .audio-visual-airport canvas,
-  .audio-visual-music canvas {
-    display: none;
-  }
-}
-
-@keyframes pulse {
-  0% {
-    box-shadow: 0 0 45px 15px rgba(85, 98, 212, 0.302);
-  }
-
-  50% {
-    transform: scale(1);
-    box-shadow: 0 0 30px 15px rgba(85, 98, 212, 0.5);
-  }
-
-  100% {
-    box-shadow: 0 0 35px 12px rgba(85, 98, 212, 0.4);
-  }
-}
-
-@keyframes christmas {
-  0% {
-    transform: rotate(0deg)
-  }
-  20% {
-    transform: rotate(5deg)
-  }
-  40% {
-    transform: rotate(-5deg)
-  }
-  60% {
-    transform: rotate(10deg)
-  }
-  80% {
-    transform: rotate(-10deg)
-  }
-  100% {
-    transform: rotate(0deg)
+@media (max-width: 1023px) {
+  .main-area {
+    gap: 24px;
+    padding: 16px;
   }
 }
 </style>

From 39011bf14effab64da451a1ac4375ba037f572d1 Mon Sep 17 00:00:00 2001
From: Ivan Kalachikov <ivan.kalachikov@gmail.com>
Date: Fri, 6 Mar 2026 14:22:50 +0000
Subject: [PATCH 10/22] feat(orbital): restyle Footer to minimal single-line
 glassmorphic bar

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/components/Footer.vue | 140 +++++++++++---------------------------
 1 file changed, 38 insertions(+), 102 deletions(-)

diff --git a/src/components/Footer.vue b/src/components/Footer.vue
index 7ca1b3d..6c38262 100644
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -1,40 +1,12 @@
 <template>
   <footer class="footer">
-    <div class="footer-row">
-      <div class="footer-col">
-        <p>
-          <span>{{ t('ui.inspiredBy') }}</span>
-          <a href="https://listentothe.cloud" target="_blank" rel="noopener">https://listentothe.cloud</a>
-        </p>
-        <p>
-          <span>{{ t('ui.thanksTo') }}</span>
-          <a href="https://somafm.com" target="_blank" rel="noopener">https://somafm.com</a>
-          {{ t('ui.forMusic') }}
-        </p>
-        <p>
-          <a href="https://www.liveatc.net" target="_blank" rel="noopener">https://www.liveatc.net</a>
-          {{ t('ui.forDispatcherTalks') }}
-        </p>
-      </div>
-      <div class="footer-col footer-col--right">
-        <div class="about-wrapper">
-          <p class="about-toggle" @click="showAbout = !showAbout">
-            {{ t('ui.about') }}
-          </p>
-          <div v-if="showAbout" class="about-content">
-            <p>{{ t('ui.aboutText') }}</p>
-          </div>
-        </div>
-        <p>
-          <span>{{ t('ui.frontendBy') }}</span>
-          <a href="https://github.com/Ivankalachikov/" target="_blank" rel="noopener">{{ t('authors.kalachikov') }}</a>
-        </p>
-        <p>
-          <span>{{ t('ui.designBy') }}</span>
-          <a href="https://www.behance.net/tatiana_emelyanova" target="_blank" rel="noopener">{{ t('authors.emelyanova') }}</a>
-        </p>
-      </div>
-    </div>
+    <span>{{ t('ui.inspiredBy') }} <a href="https://listentothe.cloud" target="_blank" rel="noopener">listentothe.cloud</a></span>
+    <span class="footer__sep">|</span>
+    <span>{{ t('ui.frontendBy') }} <a href="https://github.com/Ivankalachikov/" target="_blank" rel="noopener">{{ t('authors.kalachikov') }}</a></span>
+    <span class="footer__sep">|</span>
+    <span>{{ t('ui.designBy') }} <a href="https://www.behance.net/tatiana_emelyanova" target="_blank" rel="noopener">{{ t('authors.emelyanova') }}</a></span>
+    <span class="footer__sep">|</span>
+    <span>v0.2.0</span>
   </footer>
 </template>
 
@@ -47,81 +19,45 @@ export default {
     const { t } = useI18n();
     return { t };
   },
-  data() {
-    return { showAbout: false };
-  },
 };
 </script>
 
 <style>
 .footer {
-  background: #23232C;
-  padding: 24px 40px;
-}
-
-.footer-row {
+  grid-area: footer;
   display: flex;
-  justify-content: space-between;
+  align-items: center;
   flex-wrap: wrap;
-  gap: 16px;
-}
-
-.footer-col {
-  flex: 1;
-  min-width: 280px;
-}
-
-.footer-col--right {
-  text-align: right;
-}
-
-.footer p {
-  margin: 0 0 4px;
-  font-size: 14px;
-  color: #dadada;
-}
-
-.about-wrapper {
-  position: relative;
-  display: inline-block;
-  margin-left: auto;
-}
-
-.about-toggle {
-  cursor: pointer;
-  display: inline-block;
-}
-
-.about-toggle:hover {
-  color: #eee;
-}
-
-.about-content {
-  position: absolute;
-  bottom: 100%;
-  right: 0;
-  background: #23242B;
-  border: 1px solid #45444B;
-  border-radius: 6px;
-  padding: 12px 16px;
-  width: 380px;
-  max-width: 90vw;
-  z-index: 100;
-  margin-bottom: 8px;
-}
-
-@media (max-width: 768px) {
+  gap: 0;
+  height: 36px;
+  padding: 0 24px;
+  background: var(--surface);
+  backdrop-filter: blur(6px);
+  -webkit-backdrop-filter: blur(6px);
+  border-top: 1px solid var(--glass-border);
+  font-family: var(--font-body);
+  font-size: 11px;
+  font-weight: 300;
+  color: var(--text-dim);
+  overflow-x: auto;
+  white-space: nowrap;
+}
+.footer a {
+  color: var(--text-primary);
+  text-decoration: none;
+}
+.footer a:hover {
+  color: #fff;
+  text-decoration: underline;
+}
+.footer__sep {
+  margin: 0 8px;
+  color: var(--text-muted);
+}
+@media (max-width: 767px) {
   .footer {
-    padding: 24px 16px;
-  }
-
-  .footer-col--right {
-    text-align: left;
-  }
-
-  .about-content {
-    right: auto;
-    left: 0;
+    padding: 0 16px;
+    font-size: 10px;
   }
 }
 </style>

From fde8039e288d75b74d448a5edc47c8c223cf4754 Mon Sep 17 00:00:00 2001
From: Ivan Kalachikov <ivan.kalachikov@gmail.com>
Date: Fri, 6 Mar 2026 14:24:46 +0000
Subject: [PATCH 11/22] fix(orbital): remove vue-audio-visual import from
 main.js
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Moved up from cleanup phase — blocks dev server since vue-audio-visual
is no longer used by any component.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/main.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/main.js b/src/main.js
index c3a653a..5c0c540 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,5 +1,4 @@
 import { createApp } from 'vue';
-import AudioVisual from 'vue-audio-visual';
 import store from './store';
 import i18n from './locales/i18n';
 import App from './App.vue';
@@ -22,8 +21,7 @@ function initGA() {
 
 const app = createApp(App);
 app.use(store)
-  .use(i18n)
-  .use(AudioVisual);
+  .use(i18n);
 
 initGA();
 

From 7d94781e549f7d57048879a5839213045d4507ac Mon Sep 17 00:00:00 2001
From: Ivan Kalachikov <ivan.kalachikov@gmail.com>
Date: Fri, 6 Mar 2026 14:30:44 +0000
Subject: [PATCH 12/22] feat(orbital): add Starfield canvas with parallax and
 audio reactivity

Create Starfield.vue with Canvas 2D starfield background featuring:
- 200 stars (desktop) / 100 stars (mobile) with random size, brightness, depth
- Mouse-driven parallax on desktop, auto-drift on mobile
- musicAmplitude modulates brightness, airportAmplitude modulates twinkle rate
- ResizeObserver + devicePixelRatio for crisp HiDPI rendering
- prefers-reduced-motion support (single static frame, no rAF loop)
- Full cleanup in beforeUnmount (rAF, mousemove listener, ResizeObserver)

Integrate into Main.vue as first child of main-area for z-index 0 layering.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/components/Main.vue      |   5 +-
 src/components/Starfield.vue | 182 +++++++++++++++++++++++++++++++++++
 2 files changed, 186 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Starfield.vue

diff --git a/src/components/Main.vue b/src/components/Main.vue
index e5ee735..9b6c47f 100644
--- a/src/components/Main.vue
+++ b/src/components/Main.vue
@@ -3,6 +3,8 @@
   <audio ref="airportPlayer" @error="airportErrorHandler" @play="airportPlayHandler" :src="currentAirportUrl" crossorigin="anonymous" />
 
   <main class="main-area">
+    <Starfield />
+
     <GlassPanel tilt="left" :ghostText="currentAirportCode" accent-color="--accent-cool">
       <DataList
         :items="airports"
@@ -50,6 +52,7 @@ import { safePause, safePlay, safeLoad } from '../utilites';
 import Sphere from './Sphere.vue';
 import GlassPanel from './GlassPanel.vue';
 import DataList from './DataList.vue';
+import Starfield from './Starfield.vue';
 
 export default {
   name: 'Main',
@@ -178,7 +181,7 @@ export default {
       }
     },
   },
-  components: { Sphere, GlassPanel, DataList },
+  components: { Sphere, GlassPanel, DataList, Starfield },
 };
 </script>
 
diff --git a/src/components/Starfield.vue b/src/components/Starfield.vue
new file mode 100644
index 0000000..63089ae
--- /dev/null
+++ b/src/components/Starfield.vue
@@ -0,0 +1,182 @@
+<template>
+  <canvas ref="canvas" class="starfield" aria-hidden="true"></canvas>
+</template>
+
+<script>
+export default {
+  name: 'Starfield',
+  props: {
+    musicAmplitude: {
+      type: Number,
+      default: 0,
+    },
+    airportAmplitude: {
+      type: Number,
+      default: 0,
+    },
+  },
+  data() {
+    return {
+      stars: [],
+      mouseX: 0,
+      mouseY: 0,
+      rafId: null,
+      resizeObserver: null,
+      reducedMotion: false,
+      canvasWidth: 0,
+      canvasHeight: 0,
+    };
+  },
+  mounted() {
+    this.reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    this.initCanvas();
+    this.generateStars();
+    this.setupResizeObserver();
+
+    if (!this.reducedMotion) {
+      window.addEventListener('mousemove', this.onMouseMove);
+      this.startLoop();
+    } else {
+      this.renderFrame(performance.now());
+    }
+  },
+  beforeUnmount() {
+    if (this.rafId != null) {
+      cancelAnimationFrame(this.rafId);
+      this.rafId = null;
+    }
+    window.removeEventListener('mousemove', this.onMouseMove);
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+      this.resizeObserver = null;
+    }
+  },
+  methods: {
+    initCanvas() {
+      const canvas = this.$refs.canvas;
+      const parent = canvas.parentElement;
+      const dpr = window.devicePixelRatio || 1;
+      const width = parent.clientWidth;
+      const height = parent.clientHeight;
+
+      canvas.width = width * dpr;
+      canvas.height = height * dpr;
+      canvas.style.width = width + 'px';
+      canvas.style.height = height + 'px';
+
+      this.canvasWidth = width;
+      this.canvasHeight = height;
+
+      const ctx = canvas.getContext('2d');
+      ctx.scale(dpr, dpr);
+    },
+    generateStars() {
+      const isMobile = window.innerWidth < 768;
+      const count = isMobile ? 100 : 200;
+      const stars = [];
+
+      for (let i = 0; i < count; i++) {
+        stars.push({
+          x: Math.random(),
+          y: Math.random(),
+          size: 0.5 + Math.random() * 1.5,
+          baseBrightness: 0.2 + Math.random() * 0.6,
+          depth: 1 + Math.random() * 2,
+          twinkleOffset: Math.random() * Math.PI * 2,
+        });
+      }
+
+      this.stars = stars;
+    },
+    setupResizeObserver() {
+      const canvas = this.$refs.canvas;
+      const parent = canvas.parentElement;
+
+      this.resizeObserver = new ResizeObserver(() => {
+        this.initCanvas();
+        if (this.reducedMotion) {
+          this.renderFrame(performance.now());
+        }
+      });
+
+      this.resizeObserver.observe(parent);
+    },
+    onMouseMove(e) {
+      this.mouseX = e.clientX;
+      this.mouseY = e.clientY;
+    },
+    startLoop() {
+      const loop = (time) => {
+        if (!document.hidden) {
+          this.renderFrame(time);
+        }
+        this.rafId = requestAnimationFrame(loop);
+      };
+      this.rafId = requestAnimationFrame(loop);
+    },
+    renderFrame(time) {
+      const canvas = this.$refs.canvas;
+      if (!canvas) return;
+
+      const ctx = canvas.getContext('2d');
+      const width = this.canvasWidth;
+      const height = this.canvasHeight;
+
+      ctx.clearRect(0, 0, width, height);
+
+      const isMobile = window.innerWidth < 768;
+      const centerX = width / 2;
+      const centerY = height / 2;
+
+      for (let i = 0; i < this.stars.length; i++) {
+        const star = this.stars[i];
+
+        // Calculate parallax offset
+        let offsetX, offsetY;
+        if (isMobile) {
+          const drift = Math.sin(time * 0.0001) * 20;
+          offsetX = drift * star.depth * 0.02;
+          offsetY = drift * star.depth * 0.015;
+        } else {
+          offsetX = (this.mouseX - centerX) * star.depth * 0.02;
+          offsetY = (this.mouseY - centerY) * star.depth * 0.015;
+        }
+
+        // Calculate screen position with wrapping
+        let sx = star.x * width + offsetX;
+        let sy = star.y * height + offsetY;
+
+        // Wrap stars that drift off-screen
+        sx = ((sx % width) + width) % width;
+        sy = ((sy % height) + height) % height;
+
+        // Audio-modulated brightness
+        let brightness = star.baseBrightness + this.musicAmplitude * 0.2;
+
+        // Airport amplitude modulates twinkle
+        const twinkleSpeed = 0.003 + this.airportAmplitude * 0.01;
+        const twinkle = Math.sin(time * twinkleSpeed + star.twinkleOffset) * 0.15;
+        brightness += twinkle;
+
+        // Clamp brightness to valid range
+        brightness = Math.max(0, Math.min(1, brightness));
+
+        // Draw star
+        ctx.beginPath();
+        ctx.arc(sx, sy, star.size, 0, Math.PI * 2);
+        ctx.fillStyle = `rgba(255, 255, 255, ${brightness})`;
+        ctx.fill();
+      }
+    },
+  },
+};
+</script>
+
+<style>
+.starfield {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+}
+</style>

From 15c7683e331ae2858aaa1a048b388ece9d9b4e75 Mon Sep 17 00:00:00 2001
From: Ivan Kalachikov <ivan.kalachikov@gmail.com>
Date: Fri, 6 Mar 2026 14:30:53 +0000
Subject: [PATCH 13/22] feat(orbital): add useAudioAnalyser composable for Web
 Audio API

Plain JS factory function that wraps Web Audio API to provide real-time
frequency analysis from <audio> elements. Uses a shared AudioContext
singleton and WeakMap-cached MediaElementSource nodes to avoid browser
limits and double-bind errors.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/composables/useAudioAnalyser.js | 134 ++++++++++++++++++++++++++++
 1 file changed, 134 insertions(+)
 create mode 100644 src/composables/useAudioAnalyser.js

diff --git a/src/composables/useAudioAnalyser.js b/src/composables/useAudioAnalyser.js
new file mode 100644
index 0000000..f1932f5
--- /dev/null
+++ b/src/composables/useAudioAnalyser.js
@@ -0,0 +1,134 @@
+/**
+ * useAudioAnalyser — Web Audio API frequency analyser for audio-reactive visuals.
+ *
+ * Wraps the Web Audio API to provide real-time frequency data from <audio> elements.
+ * Designed for use with Options API components (no Vue imports).
+ *
+ * Usage:
+ *   const audio = useAudioAnalyser();
+ *   audio.connect(audioElement);        // in mounted()
+ *   const amp = audio.getAmplitude();   // in rAF loop, returns 0–1
+ *   audio.disconnect();                 // in beforeUnmount()
+ */
+
+// ---------------------------------------------------------------------------
+// Shared AudioContext singleton — browsers limit to ~6 AudioContexts total,
+// so every analyser instance must share the same context.
+// ---------------------------------------------------------------------------
+let sharedContext = null;
+
+function getAudioContext() {
+  if (!sharedContext) {
+    sharedContext = new (window.AudioContext || window.webkitAudioContext)();
+  }
+  return sharedContext;
+}
+
+// ---------------------------------------------------------------------------
+// MediaElementSource cache — calling createMediaElementSource() twice on the
+// same <audio> element throws an InvalidStateError. A WeakMap lets us reuse
+// the source node without preventing garbage-collection of detached elements.
+// ---------------------------------------------------------------------------
+const sourceCache = new WeakMap();
+
+/**
+ * Factory function that returns an audio analyser instance.
+ *
+ * @returns {{ analyser: AnalyserNode|null, frequencyData: Uint8Array|null, connect: Function, disconnect: Function, getAmplitude: Function }}
+ */
+export function useAudioAnalyser() {
+  let analyser = null;
+  let frequencyData = null;
+
+  /**
+   * Connect to an <audio> (or <video>) element and start analysing.
+   *
+   * - Lazily creates / resumes the shared AudioContext (handles autoplay policy).
+   * - Reuses a cached MediaElementSourceNode if one already exists for the element.
+   * - Wires the graph: source → analyser → destination so audio still plays
+   *   through speakers.
+   *
+   * @param {HTMLMediaElement} audioElement — the <audio> element to analyse
+   */
+  function connect(audioElement) {
+    if (!audioElement) return;
+
+    const ctx = getAudioContext();
+
+    // Resume context if suspended (browser autoplay policy)
+    if (ctx.state === 'suspended') {
+      ctx.resume();
+    }
+
+    // Get or create MediaElementSource for this element (cached to avoid double-bind error)
+    let source = sourceCache.get(audioElement);
+    if (!source) {
+      source = ctx.createMediaElementSource(audioElement);
+      sourceCache.set(audioElement, source);
+    }
+
+    // Create AnalyserNode — fftSize 256 gives 128 frequency bins, enough for
+    // smooth visual reactivity without excessive CPU cost.
+    analyser = ctx.createAnalyser();
+    analyser.fftSize = 256;
+
+    // Wire the audio graph: source → analyser → destination
+    // The source→destination path keeps audio audible in speakers.
+    source.connect(analyser);
+    analyser.connect(ctx.destination);
+
+    // Pre-allocate the typed array for getByteFrequencyData()
+    frequencyData = new Uint8Array(analyser.frequencyBinCount);
+  }
+
+  /**
+   * Disconnect the analyser from the audio graph.
+   *
+   * - Does NOT close the shared AudioContext (other instances may use it).
+   * - Does NOT disconnect source→analyser (the cached source is reused; a
+   *   future connect() call on the same element would fail otherwise).
+   */
+  function disconnect() {
+    if (analyser) {
+      try {
+        analyser.disconnect();
+      } catch (_) {
+        // Already disconnected — safe to ignore
+      }
+      analyser = null;
+      frequencyData = null;
+    }
+  }
+
+  /**
+   * Sample current frequency data and return the average amplitude (0–1).
+   *
+   * Call this once per animation frame inside a requestAnimationFrame loop.
+   *
+   * @returns {number} Normalised amplitude where 0 = silence, 1 = max volume
+   */
+  function getAmplitude() {
+    if (!analyser || !frequencyData) return 0;
+
+    analyser.getByteFrequencyData(frequencyData);
+
+    // Sum all frequency bins and normalise: each bin is 0–255, so dividing
+    // the average by 255 maps the result to 0–1.
+    let sum = 0;
+    for (let i = 0; i < frequencyData.length; i++) {
+      sum += frequencyData[i];
+    }
+
+    return sum / (frequencyData.length * 255);
+  }
+
+  return {
+    /** @type {AnalyserNode|null} Direct access to the AnalyserNode (read-only intent) */
+    get analyser() { return analyser; },
+    /** @type {Uint8Array|null} Raw frequency bin data (updated by getAmplitude) */
+    get frequencyData() { return frequencyData; },
+    connect,
+    disconnect,
+    getAmplitude,
+  };
+}

From 45070fbf681dbb10fc7aacb7206162a82f591387 Mon Sep 17 00:00:00 2001
From: Ivan Kalachikov <ivan.kalachikov@gmail.com>
Date: Fri, 6 Mar 2026 14:35:17 +0000
Subject: [PATCH 14/22] fix(orbital): address code quality review findings for
 Starfield and useAudioAnalyser

- Cache canvas context in Starfield instead of calling getContext each frame
- Add zero-size canvas guard to prevent NaN from modulo with 0
- Add disconnect() at top of connect() to prevent AnalyserNode leaks on reconnect
- Disconnect source before rewiring to prevent accumulated audio graph connections
- Add try/catch around AudioContext creation for robustness

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/components/Starfield.vue        | 11 ++++++-----
 src/composables/useAudioAnalyser.js | 16 ++++++++++++++--
 2 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/src/components/Starfield.vue b/src/components/Starfield.vue
index 63089ae..9ccc073 100644
--- a/src/components/Starfield.vue
+++ b/src/components/Starfield.vue
@@ -25,6 +25,7 @@ export default {
       reducedMotion: false,
       canvasWidth: 0,
       canvasHeight: 0,
+      ctx: null,
     };
   },
   mounted() {
@@ -67,8 +68,8 @@ export default {
       this.canvasWidth = width;
       this.canvasHeight = height;
 
-      const ctx = canvas.getContext('2d');
-      ctx.scale(dpr, dpr);
+      this.ctx = canvas.getContext('2d');
+      this.ctx.scale(dpr, dpr);
     },
     generateStars() {
       const isMobile = window.innerWidth < 768;
@@ -115,12 +116,12 @@ export default {
       this.rafId = requestAnimationFrame(loop);
     },
     renderFrame(time) {
-      const canvas = this.$refs.canvas;
-      if (!canvas) return;
+      const ctx = this.ctx;
+      if (!ctx) return;
 
-      const ctx = canvas.getContext('2d');
       const width = this.canvasWidth;
       const height = this.canvasHeight;
+      if (width === 0 || height === 0) return;
 
       ctx.clearRect(0, 0, width, height);
 
diff --git a/src/composables/useAudioAnalyser.js b/src/composables/useAudioAnalyser.js
index f1932f5..e40c357 100644
--- a/src/composables/useAudioAnalyser.js
+++ b/src/composables/useAudioAnalyser.js
@@ -19,7 +19,12 @@ let sharedContext = null;
 
 function getAudioContext() {
   if (!sharedContext) {
-    sharedContext = new (window.AudioContext || window.webkitAudioContext)();
+    try {
+      sharedContext = new (window.AudioContext || window.webkitAudioContext)();
+    } catch (e) {
+      console.warn('useAudioAnalyser: Web Audio API unavailable', e);
+      return null;
+    }
   }
   return sharedContext;
 }
@@ -53,7 +58,11 @@ export function useAudioAnalyser() {
   function connect(audioElement) {
     if (!audioElement) return;
 
+    // Clean up any previous connection before rewiring
+    disconnect();
+
     const ctx = getAudioContext();
+    if (!ctx) return;
 
     // Resume context if suspended (browser autoplay policy)
     if (ctx.state === 'suspended') {
@@ -72,8 +81,11 @@ export function useAudioAnalyser() {
     analyser = ctx.createAnalyser();
     analyser.fftSize = 256;
 
+    // Disconnect source from any previous outputs before rewiring
+    source.disconnect();
+
     // Wire the audio graph: source → analyser → destination
-    // The source→destination path keeps audio audible in speakers.
+    // Routing through the analyser keeps audio audible in speakers.
     source.connect(analyser);
     analyser.connect(ctx.destination);
 

From ee6d8350c946b24b0ff6167d4008956fb90da568 Mon Sep 17 00:00:00 2001
From: Ivan Kalachikov <ivan.kalachikov@gmail.com>
Date: Fri, 6 Mar 2026 14:38:10 +0000
Subject: [PATCH 15/22] feat(orbital): add ParticleCanvas with dual orbit
 system and audio reactivity
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Create ParticleCanvas.vue with two particle systems orbiting the central
sphere — music particles (inner, #FFCC66) and airport particles (outer,
#44FFBB). Features include:

- Audio-reactive modulation via useAudioAnalyser (radius, brightness, speed)
- Trail effect using semi-transparent rgba overlay
- Object pooling with pre-allocated particles and visibility toggling
- Responsive particle counts via matchMedia (mobile/desktop)
- Reduced motion support (static render, no animation loop)
- Performance: rAF loop with document.hidden skip, cached canvas context,
  zero-size canvas guard, ResizeObserver for sizing with devicePixelRatio

Wire audio analysers into Main.vue:
- Create and connect useAudioAnalyser instances for both audio elements
- Pass amplitude data to Starfield via rAF-driven data properties
- Track sphere position via updateSphereRect for orbit center
- Clean up all listeners, observers, and rAF loops in beforeUnmount

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/components/Main.vue           |  83 ++++++-
 src/components/ParticleCanvas.vue | 384 ++++++++++++++++++++++++++++++
 2 files changed, 464 insertions(+), 3 deletions(-)
 create mode 100644 src/components/ParticleCanvas.vue

diff --git a/src/components/Main.vue b/src/components/Main.vue
index 9b6c47f..9e6e46c 100644
--- a/src/components/Main.vue
+++ b/src/components/Main.vue
@@ -3,7 +3,13 @@
   <audio ref="airportPlayer" @error="airportErrorHandler" @play="airportPlayHandler" :src="currentAirportUrl" crossorigin="anonymous" />
 
   <main class="main-area">
-    <Starfield />
+    <Starfield :musicAmplitude="musicAmplitude" :airportAmplitude="airportAmplitude" />
+    <ParticleCanvas
+      :musicAnalyser="musicAudio"
+      :airportAnalyser="airportAudio"
+      :sphereRect="sphereRect"
+      :isPlaying="appStatus === 'playing'"
+    />
 
     <GlassPanel tilt="left" :ghostText="currentAirportCode" accent-color="--accent-cool">
       <DataList
@@ -49,17 +55,29 @@
 import { useI18n } from 'vue-i18n';
 import { mapState, mapMutations } from 'vuex';
 import { safePause, safePlay, safeLoad } from '../utilites';
+import { useAudioAnalyser } from '../composables/useAudioAnalyser';
 import Sphere from './Sphere.vue';
 import GlassPanel from './GlassPanel.vue';
 import DataList from './DataList.vue';
 import Starfield from './Starfield.vue';
+import ParticleCanvas from './ParticleCanvas.vue';
 
 export default {
   name: 'Main',
   setup() {
     const { t } = useI18n();
     return {
-      t, safePause, safePlay, safeLoad,
+      t, safePause, safePlay, safeLoad, useAudioAnalyser,
+    };
+  },
+  data() {
+    return {
+      musicAudio: null,
+      airportAudio: null,
+      sphereRect: null,
+      musicAmplitude: 0,
+      airportAmplitude: 0,
+      amplitudeRafId: null,
     };
   },
   computed: {
@@ -91,6 +109,7 @@ export default {
     appStatus(newVal) {
       if (newVal === 'playing') {
         this.play();
+        this.connectAnalysers();
       }
       if (newVal === 'paused') {
         this.pause();
@@ -127,6 +146,29 @@ export default {
       if (this.$refs.musicPlayer) this.$refs.musicPlayer.volume = newVal;
     },
   },
+  mounted() {
+    this.musicAudio = this.useAudioAnalyser();
+    this.airportAudio = this.useAudioAnalyser();
+
+    this.updateSphereRect();
+    this._resizeHandler = () => this.updateSphereRect();
+    window.addEventListener('resize', this._resizeHandler);
+
+    this.startAmplitudeLoop();
+  },
+  beforeUnmount() {
+    if (this.musicAudio) this.musicAudio.disconnect();
+    if (this.airportAudio) this.airportAudio.disconnect();
+
+    if (this._resizeHandler) {
+      window.removeEventListener('resize', this._resizeHandler);
+    }
+
+    if (this.amplitudeRafId != null) {
+      cancelAnimationFrame(this.amplitudeRafId);
+      this.amplitudeRafId = null;
+    }
+  },
   methods: {
     ...mapMutations([
       'setAppStatus',
@@ -180,8 +222,43 @@ export default {
         this.$refs.airportPlayer.play();
       }
     },
+    connectAnalysers() {
+      if (this.musicAudio && this.$refs.musicPlayer) {
+        this.musicAudio.connect(this.$refs.musicPlayer);
+      }
+      if (this.airportAudio && this.$refs.airportPlayer) {
+        this.airportAudio.connect(this.$refs.airportPlayer);
+      }
+    },
+    updateSphereRect() {
+      this.$nextTick(() => {
+        const sphereEl = this.$el?.querySelector('.sphere');
+        const mainEl = this.$el?.querySelector('.main-area') || this.$el;
+        if (!sphereEl || !mainEl) return;
+
+        const sphereBounds = sphereEl.getBoundingClientRect();
+        const mainBounds = mainEl.getBoundingClientRect();
+
+        this.sphereRect = {
+          x: sphereBounds.left - mainBounds.left,
+          y: sphereBounds.top - mainBounds.top,
+          width: sphereBounds.width,
+          height: sphereBounds.height,
+        };
+      });
+    },
+    startAmplitudeLoop() {
+      const loop = () => {
+        if (!document.hidden) {
+          this.musicAmplitude = this.musicAudio ? this.musicAudio.getAmplitude() : 0;
+          this.airportAmplitude = this.airportAudio ? this.airportAudio.getAmplitude() : 0;
+        }
+        this.amplitudeRafId = requestAnimationFrame(loop);
+      };
+      this.amplitudeRafId = requestAnimationFrame(loop);
+    },
   },
-  components: { Sphere, GlassPanel, DataList, Starfield },
+  components: { Sphere, GlassPanel, DataList, Starfield, ParticleCanvas },
 };
 </script>
 
diff --git a/src/components/ParticleCanvas.vue b/src/components/ParticleCanvas.vue
new file mode 100644
index 0000000..5f61386
--- /dev/null
+++ b/src/components/ParticleCanvas.vue
@@ -0,0 +1,384 @@
+<template>
+  <canvas ref="canvas" class="particles" role="img" aria-label="Audio visualization"></canvas>
+</template>
+
+<script>
+export default {
+  name: 'ParticleCanvas',
+  props: {
+    musicAnalyser: {
+      type: Object,
+      default: null,
+    },
+    airportAnalyser: {
+      type: Object,
+      default: null,
+    },
+    sphereRect: {
+      type: Object,
+      default: null,
+    },
+    isPlaying: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      ctx: null,
+      canvasWidth: 0,
+      canvasHeight: 0,
+      rafId: null,
+      resizeObserver: null,
+      reducedMotion: false,
+      isMobile: false,
+      musicParticles: [],
+      airportParticles: [],
+      lastTime: 0,
+    };
+  },
+  computed: {
+    musicCount() {
+      if (this.reducedMotion) return 10;
+      if (!this.isPlaying) return 20;
+      return this.isMobile ? 25 : 50;
+    },
+    airportCount() {
+      if (this.reducedMotion) return 10;
+      if (!this.isPlaying) return 20;
+      return this.isMobile ? 20 : 40;
+    },
+    orbitCenterX() {
+      if (!this.sphereRect) return this.canvasWidth / 2;
+      return this.sphereRect.x + this.sphereRect.width / 2;
+    },
+    orbitCenterY() {
+      if (!this.sphereRect) return this.canvasHeight / 2;
+      return this.sphereRect.y + this.sphereRect.height / 2;
+    },
+    sphereRadius() {
+      if (!this.sphereRect) return 80;
+      return this.sphereRect.width / 2;
+    },
+  },
+  mounted() {
+    this.reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    this.isMobile = window.matchMedia('(max-width: 767px)').matches;
+
+    this._mobileQuery = window.matchMedia('(max-width: 767px)');
+    this._mobileHandler = (e) => {
+      this.isMobile = e.matches;
+      this.updateVisibleCounts();
+    };
+    this._mobileQuery.addEventListener('change', this._mobileHandler);
+
+    this.initCanvas();
+    this.createParticlePool();
+    this.setupResizeObserver();
+
+    if (this.reducedMotion) {
+      this.renderStatic();
+    } else {
+      this.lastTime = performance.now();
+      this.startLoop();
+    }
+  },
+  beforeUnmount() {
+    if (this.rafId != null) {
+      cancelAnimationFrame(this.rafId);
+      this.rafId = null;
+    }
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+      this.resizeObserver = null;
+    }
+    if (this._mobileQuery && this._mobileHandler) {
+      this._mobileQuery.removeEventListener('change', this._mobileHandler);
+    }
+  },
+  watch: {
+    isPlaying() {
+      this.updateVisibleCounts();
+    },
+  },
+  methods: {
+    initCanvas() {
+      const canvas = this.$refs.canvas;
+      if (!canvas) return;
+      const parent = canvas.parentElement;
+      if (!parent) return;
+
+      const dpr = window.devicePixelRatio || 1;
+      const width = parent.clientWidth;
+      const height = parent.clientHeight;
+
+      if (width === 0 || height === 0) return;
+
+      canvas.width = width * dpr;
+      canvas.height = height * dpr;
+      canvas.style.width = width + 'px';
+      canvas.style.height = height + 'px';
+
+      this.canvasWidth = width;
+      this.canvasHeight = height;
+
+      this.ctx = canvas.getContext('2d');
+      this.ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    },
+
+    createParticlePool() {
+      // Pre-create maximum possible particles for object pooling
+      const maxMusic = this.isMobile ? 30 : 60;
+      const maxAirport = this.isMobile ? 25 : 50;
+
+      this.musicParticles = [];
+      for (let i = 0; i < maxMusic; i++) {
+        this.musicParticles.push(this.createMusicParticle(i < this.musicCount));
+      }
+
+      this.airportParticles = [];
+      for (let i = 0; i < maxAirport; i++) {
+        this.airportParticles.push(this.createAirportParticle(i < this.airportCount));
+      }
+    },
+
+    createMusicParticle(visible) {
+      const r = this.sphereRadius;
+      return {
+        visible: visible,
+        angle: Math.random() * Math.PI * 2,
+        baseOrbitRadius: r + 20 + Math.random() * 60,
+        orbitRadius: 0,
+        size: 2 + Math.random() * 3,
+        baseOpacity: 0.4 + Math.random() * 0.6,
+        angularSpeed: 0.2 + Math.random() * 0.6,
+        // Elliptical orbit: slight eccentricity
+        eccentricity: 0.85 + Math.random() * 0.15,
+        brightnessOffset: Math.random() * Math.PI * 2,
+      };
+    },
+
+    createAirportParticle(visible) {
+      const r = this.sphereRadius;
+      return {
+        visible: visible,
+        angle: Math.random() * Math.PI * 2,
+        baseOrbitRadius: r + 90 + Math.random() * 70,
+        orbitRadius: 0,
+        size: 1.5 + Math.random() * 2.5,
+        baseOpacity: 0.3 + Math.random() * 0.7,
+        angularSpeed: 0.15 + Math.random() * 0.5,
+        eccentricity: 0.8 + Math.random() * 0.2,
+        brightnessOffset: Math.random() * Math.PI * 2,
+        // Jitter values for airport particles
+        jitterX: 0,
+        jitterY: 0,
+        burstSpeed: 0,
+      };
+    },
+
+    updateVisibleCounts() {
+      const mc = this.musicCount;
+      for (let i = 0; i < this.musicParticles.length; i++) {
+        this.musicParticles[i].visible = i < mc;
+      }
+      const ac = this.airportCount;
+      for (let i = 0; i < this.airportParticles.length; i++) {
+        this.airportParticles[i].visible = i < ac;
+      }
+    },
+
+    setupResizeObserver() {
+      const canvas = this.$refs.canvas;
+      if (!canvas) return;
+      const parent = canvas.parentElement;
+      if (!parent) return;
+
+      this.resizeObserver = new ResizeObserver(() => {
+        this.initCanvas();
+        if (this.reducedMotion) {
+          this.renderStatic();
+        }
+      });
+
+      this.resizeObserver.observe(parent);
+    },
+
+    startLoop() {
+      const loop = (time) => {
+        if (!document.hidden) {
+          this.renderFrame(time);
+        }
+        this.rafId = requestAnimationFrame(loop);
+      };
+      this.rafId = requestAnimationFrame(loop);
+    },
+
+    renderStatic() {
+      const ctx = this.ctx;
+      if (!ctx) return;
+
+      const width = this.canvasWidth;
+      const height = this.canvasHeight;
+      if (width === 0 || height === 0) return;
+
+      ctx.clearRect(0, 0, width, height);
+
+      const cx = this.orbitCenterX;
+      const cy = this.orbitCenterY;
+
+      // Draw 10 music particles statically
+      for (let i = 0; i < this.musicParticles.length; i++) {
+        const p = this.musicParticles[i];
+        if (!p.visible) continue;
+        const x = cx + Math.cos(p.angle) * p.baseOrbitRadius;
+        const y = cy + Math.sin(p.angle) * p.baseOrbitRadius * p.eccentricity;
+        ctx.beginPath();
+        ctx.arc(x, y, p.size, 0, Math.PI * 2);
+        ctx.fillStyle = `rgba(255, 204, 102, ${p.baseOpacity * 0.6})`;
+        ctx.shadowBlur = 4;
+        ctx.shadowColor = '#FFCC66';
+        ctx.fill();
+      }
+
+      ctx.shadowBlur = 0;
+      ctx.shadowColor = 'transparent';
+
+      // Draw 10 airport particles statically
+      for (let i = 0; i < this.airportParticles.length; i++) {
+        const p = this.airportParticles[i];
+        if (!p.visible) continue;
+        const x = cx + Math.cos(p.angle) * p.baseOrbitRadius;
+        const y = cy + Math.sin(p.angle) * p.baseOrbitRadius * p.eccentricity;
+        ctx.beginPath();
+        ctx.arc(x, y, p.size, 0, Math.PI * 2);
+        ctx.fillStyle = `rgba(68, 255, 187, ${p.baseOpacity * 0.5})`;
+        ctx.fill();
+      }
+    },
+
+    renderFrame(time) {
+      const ctx = this.ctx;
+      if (!ctx) return;
+
+      const width = this.canvasWidth;
+      const height = this.canvasHeight;
+      if (width === 0 || height === 0) return;
+
+      const dt = Math.min((time - this.lastTime) / 1000, 0.1); // seconds, capped at 100ms
+      this.lastTime = time;
+
+      // Trail effect: overlay semi-transparent background instead of clearRect
+      ctx.fillStyle = 'rgba(8, 8, 18, 0.08)';
+      ctx.fillRect(0, 0, width, height);
+
+      const cx = this.orbitCenterX;
+      const cy = this.orbitCenterY;
+
+      // Read audio amplitudes
+      const musicAmp = this.isPlaying && this.musicAnalyser
+        ? this.musicAnalyser.getAmplitude()
+        : 0;
+      const airportAmp = this.isPlaying && this.airportAnalyser
+        ? this.airportAnalyser.getAmplitude()
+        : 0;
+
+      const speedMultiplier = this.isPlaying ? 1 : 0.1;
+
+      // --- Music particles (inner orbit) ---
+      ctx.shadowBlur = 4;
+      ctx.shadowColor = '#FFCC66';
+
+      for (let i = 0; i < this.musicParticles.length; i++) {
+        const p = this.musicParticles[i];
+        if (!p.visible) continue;
+
+        // Update angle
+        p.angle += p.angularSpeed * dt * speedMultiplier;
+
+        // Audio modulation: amplitude modulates orbit radius +/-15px
+        const radiusMod = this.isPlaying ? musicAmp * 15 : 0;
+        p.orbitRadius = p.baseOrbitRadius + radiusMod * Math.sin(p.angle * 2);
+
+        // Position (elliptical orbit)
+        const x = cx + Math.cos(p.angle) * p.orbitRadius;
+        const y = cy + Math.sin(p.angle) * p.orbitRadius * p.eccentricity;
+
+        // Frequency-modulated brightness
+        const brightnessMod = this.isPlaying
+          ? Math.sin(time * 0.003 + p.brightnessOffset) * musicAmp * 0.3
+          : 0;
+        const opacity = Math.max(0.4, Math.min(1.0, p.baseOpacity + brightnessMod));
+
+        ctx.beginPath();
+        ctx.arc(x, y, p.size, 0, Math.PI * 2);
+        ctx.fillStyle = `rgba(255, 204, 102, ${opacity})`;
+        ctx.fill();
+      }
+
+      // Reset shadow for airport particles
+      ctx.shadowBlur = 0;
+      ctx.shadowColor = 'transparent';
+
+      // --- Airport particles (outer orbit) ---
+      for (let i = 0; i < this.airportParticles.length; i++) {
+        const p = this.airportParticles[i];
+        if (!p.visible) continue;
+
+        // Jittery movement: airport particles have random jitter
+        const jitterStrength = 0.5 + airportAmp * 2;
+        p.jitterX += (Math.random() - 0.5) * jitterStrength;
+        p.jitterY += (Math.random() - 0.5) * jitterStrength;
+        // Dampen jitter to prevent drift
+        p.jitterX *= 0.92;
+        p.jitterY *= 0.92;
+
+        // Burst acceleration on voice activity (airport amplitude > threshold)
+        if (this.isPlaying && airportAmp > 0.15) {
+          p.burstSpeed = p.angularSpeed * (1 + airportAmp * 3);
+        } else {
+          p.burstSpeed *= 0.95; // decay
+          if (p.burstSpeed < p.angularSpeed) {
+            p.burstSpeed = p.angularSpeed;
+          }
+        }
+
+        const effectiveSpeed = this.isPlaying ? p.burstSpeed || p.angularSpeed : p.angularSpeed;
+        p.angle += effectiveSpeed * dt * speedMultiplier;
+
+        // Audio modulation: amplitude modulates speed (already done above)
+        p.orbitRadius = p.baseOrbitRadius;
+
+        // Position (elliptical orbit + jitter)
+        const x = cx + Math.cos(p.angle) * p.orbitRadius + p.jitterX;
+        const y = cy + Math.sin(p.angle) * p.orbitRadius * p.eccentricity + p.jitterY;
+
+        // Frequency-modulated brightness
+        const brightnessMod = this.isPlaying
+          ? Math.sin(time * 0.004 + p.brightnessOffset) * airportAmp * 0.4
+          : 0;
+        const opacity = Math.max(0.3, Math.min(1.0, p.baseOpacity + brightnessMod));
+
+        // Frequency bands modulate visible count — hide some particles when amplitude is low
+        if (this.isPlaying && airportAmp < 0.05 && i > this.airportCount * 0.6) {
+          continue;
+        }
+
+        ctx.beginPath();
+        ctx.arc(x, y, p.size, 0, Math.PI * 2);
+        ctx.fillStyle = `rgba(68, 255, 187, ${opacity})`;
+        ctx.fill();
+      }
+    },
+  },
+};
+</script>
+
+<style>
+.particles {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  pointer-events: none;
+}
+</style>

From 6d0df45cda51612f6797fb1c838edc1bd6bd4d3d Mon Sep 17 00:00:00 2001
From: Ivan Kalachikov <ivan.kalachikov@gmail.com>
Date: Fri, 6 Mar 2026 14:41:45 +0000
Subject: [PATCH 16/22] fix(orbital): address code quality review findings for
 ParticleCanvas and Main.vue

- Remove useAudioAnalyser from setup() return, call directly in mounted()
- ParticleCanvas now accepts musicAmplitude/airportAmplitude props instead of
  raw analyser objects, eliminating duplicate getAmplitude() calls per frame
- Connect analysers on mount if already in playing state
- Always allocate desktop max pool size to prevent overflow on viewport change

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/components/Main.vue           | 14 +++++++++-----
 src/components/ParticleCanvas.vue | 28 ++++++++++++----------------
 2 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/src/components/Main.vue b/src/components/Main.vue
index 9e6e46c..a1df02a 100644
--- a/src/components/Main.vue
+++ b/src/components/Main.vue
@@ -5,8 +5,8 @@
   <main class="main-area">
     <Starfield :musicAmplitude="musicAmplitude" :airportAmplitude="airportAmplitude" />
     <ParticleCanvas
-      :musicAnalyser="musicAudio"
-      :airportAnalyser="airportAudio"
+      :musicAmplitude="musicAmplitude"
+      :airportAmplitude="airportAmplitude"
       :sphereRect="sphereRect"
       :isPlaying="appStatus === 'playing'"
     />
@@ -67,7 +67,7 @@ export default {
   setup() {
     const { t } = useI18n();
     return {
-      t, safePause, safePlay, safeLoad, useAudioAnalyser,
+      t, safePause, safePlay, safeLoad,
     };
   },
   data() {
@@ -147,8 +147,12 @@ export default {
     },
   },
   mounted() {
-    this.musicAudio = this.useAudioAnalyser();
-    this.airportAudio = this.useAudioAnalyser();
+    this.musicAudio = useAudioAnalyser();
+    this.airportAudio = useAudioAnalyser();
+
+    if (this.appStatus === 'playing') {
+      this.connectAnalysers();
+    }
 
     this.updateSphereRect();
     this._resizeHandler = () => this.updateSphereRect();
diff --git a/src/components/ParticleCanvas.vue b/src/components/ParticleCanvas.vue
index 5f61386..3a84e97 100644
--- a/src/components/ParticleCanvas.vue
+++ b/src/components/ParticleCanvas.vue
@@ -6,13 +6,13 @@
 export default {
   name: 'ParticleCanvas',
   props: {
-    musicAnalyser: {
-      type: Object,
-      default: null,
+    musicAmplitude: {
+      type: Number,
+      default: 0,
     },
-    airportAnalyser: {
-      type: Object,
-      default: null,
+    airportAmplitude: {
+      type: Number,
+      default: 0,
     },
     sphereRect: {
       type: Object,
@@ -127,9 +127,9 @@ export default {
     },
 
     createParticlePool() {
-      // Pre-create maximum possible particles for object pooling
-      const maxMusic = this.isMobile ? 30 : 60;
-      const maxAirport = this.isMobile ? 25 : 50;
+      // Always allocate desktop max so viewport changes don't overflow the pool
+      const maxMusic = 60;
+      const maxAirport = 50;
 
       this.musicParticles = [];
       for (let i = 0; i < maxMusic; i++) {
@@ -275,13 +275,9 @@ export default {
       const cx = this.orbitCenterX;
       const cy = this.orbitCenterY;
 
-      // Read audio amplitudes
-      const musicAmp = this.isPlaying && this.musicAnalyser
-        ? this.musicAnalyser.getAmplitude()
-        : 0;
-      const airportAmp = this.isPlaying && this.airportAnalyser
-        ? this.airportAnalyser.getAmplitude()
-        : 0;
+      // Read audio amplitudes from props (Main.vue samples once per frame)
+      const musicAmp = this.isPlaying ? this.musicAmplitude : 0;
+      const airportAmp = this.isPlaying ? this.airportAmplitude : 0;
 
       const speedMultiplier = this.isPlaying ? 1 : 0.1;
 

From 7400f64120624dddd248574a5509a819b6609cb0 Mon Sep 17 00:00:00 2001
From: Ivan Kalachikov <ivan.kalachikov@gmail.com>
Date: Fri, 6 Mar 2026 14:44:45 +0000
Subject: [PATCH 17/22] feat(orbital): add MobileDrawer and responsive layout
 for mobile/tablet

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/components/Main.vue         |  98 +++++++++++-----
 src/components/MobileDrawer.vue | 197 ++++++++++++++++++++++++++++++++
 2 files changed, 265 insertions(+), 30 deletions(-)
 create mode 100644 src/components/MobileDrawer.vue

diff --git a/src/components/Main.vue b/src/components/Main.vue
index a1df02a..305cbc1 100644
--- a/src/components/Main.vue
+++ b/src/components/Main.vue
@@ -11,21 +11,24 @@
       :isPlaying="appStatus === 'playing'"
     />
 
-    <GlassPanel tilt="left" :ghostText="currentAirportCode" accent-color="--accent-cool">
-      <DataList
-        :items="airports"
-        value-key="codeIATA"
-        label-key="city"
-        :secondary-keys="[{ key: 'codeIATA' }, { key: 'countryCode' }]"
-        :filter-keys="['city', 'codeIATA', 'codeICAO', 'country']"
-        :model-value="currentAirportCode"
-        @update:model-value="setCurrentAirportCode"
-        :volume="airportVolume"
-        @update:volume="setAirportVolume"
-        label="ATC FEED"
-        accent-color="--accent-cool"
-      />
-    </GlassPanel>
+    <!-- Desktop: panels + sphere -->
+    <template v-if="!isMobile">
+      <GlassPanel tilt="left" :ghostText="currentAirportCode" accent-color="--accent-cool">
+        <DataList
+          :items="airports"
+          value-key="codeIATA"
+          label-key="city"
+          :secondary-keys="[{ key: 'codeIATA' }, { key: 'countryCode' }]"
+          :filter-keys="['city', 'codeIATA', 'codeICAO', 'country']"
+          :model-value="currentAirportCode"
+          @update:model-value="setCurrentAirportCode"
+          :volume="airportVolume"
+          @update:volume="setAirportVolume"
+          label="ATC FEED"
+          accent-color="--accent-cool"
+        />
+      </GlassPanel>
+    </template>
 
     <Sphere
       :app-status="appStatus"
@@ -34,20 +37,37 @@
       @toggle="toggleAppStatus"
     />
 
-    <GlassPanel tilt="right" :ghostText="currentMusicName" accent-color="--accent-warm">
-      <DataList
-        :items="musicList"
-        value-key="id"
-        label-key="name"
-        :filter-keys="['name', 'description']"
-        :model-value="currentMusicId"
-        @update:model-value="setCurrentMusicId"
-        :volume="musicVolume"
-        @update:volume="setMusicVolume"
-        label="MUSIC FEED"
-        accent-color="--accent-warm"
-      />
-    </GlassPanel>
+    <template v-if="!isMobile">
+      <GlassPanel tilt="right" :ghostText="currentMusicName" accent-color="--accent-warm">
+        <DataList
+          :items="musicList"
+          value-key="id"
+          label-key="name"
+          :filter-keys="['name', 'description']"
+          :model-value="currentMusicId"
+          @update:model-value="setCurrentMusicId"
+          :volume="musicVolume"
+          @update:volume="setMusicVolume"
+          label="MUSIC FEED"
+          accent-color="--accent-warm"
+        />
+      </GlassPanel>
+    </template>
+
+    <!-- Mobile: drawer -->
+    <MobileDrawer
+      v-if="isMobile"
+      :airportItems="airports"
+      :musicItems="musicList"
+      :currentAirportCode="currentAirportCode"
+      :currentMusicId="currentMusicId"
+      :airportVolume="airportVolume"
+      :musicVolume="musicVolume"
+      @update:airportCode="setCurrentAirportCode"
+      @update:musicId="setCurrentMusicId"
+      @update:airportVolume="setAirportVolume"
+      @update:musicVolume="setMusicVolume"
+    />
   </main>
 </template>
 
@@ -61,6 +81,7 @@ import GlassPanel from './GlassPanel.vue';
 import DataList from './DataList.vue';
 import Starfield from './Starfield.vue';
 import ParticleCanvas from './ParticleCanvas.vue';
+import MobileDrawer from './MobileDrawer.vue';
 
 export default {
   name: 'Main',
@@ -72,6 +93,7 @@ export default {
   },
   data() {
     return {
+      isMobile: false,
       musicAudio: null,
       airportAudio: null,
       sphereRect: null,
@@ -158,6 +180,11 @@ export default {
     this._resizeHandler = () => this.updateSphereRect();
     window.addEventListener('resize', this._resizeHandler);
 
+    this._mobileQuery = window.matchMedia('(max-width: 767px)');
+    this.isMobile = this._mobileQuery.matches;
+    this._mobileHandler = (e) => { this.isMobile = e.matches; };
+    this._mobileQuery.addEventListener('change', this._mobileHandler);
+
     this.startAmplitudeLoop();
   },
   beforeUnmount() {
@@ -168,6 +195,10 @@ export default {
       window.removeEventListener('resize', this._resizeHandler);
     }
 
+    if (this._mobileQuery && this._mobileHandler) {
+      this._mobileQuery.removeEventListener('change', this._mobileHandler);
+    }
+
     if (this.amplitudeRafId != null) {
       cancelAnimationFrame(this.amplitudeRafId);
       this.amplitudeRafId = null;
@@ -262,7 +293,7 @@ export default {
       this.amplitudeRafId = requestAnimationFrame(loop);
     },
   },
-  components: { Sphere, GlassPanel, DataList, Starfield, ParticleCanvas },
+  components: { Sphere, GlassPanel, DataList, Starfield, ParticleCanvas, MobileDrawer },
 };
 </script>
 
@@ -283,4 +314,11 @@ export default {
     padding: 16px;
   }
 }
+
+@media (max-width: 767px) {
+  .main-area {
+    flex-direction: column;
+    padding-bottom: 60px; /* space for collapsed drawer */
+  }
+}
 </style>
diff --git a/src/components/MobileDrawer.vue b/src/components/MobileDrawer.vue
new file mode 100644
index 0000000..553fefa
--- /dev/null
+++ b/src/components/MobileDrawer.vue
@@ -0,0 +1,197 @@
+<template>
+  <div class="drawer" :class="{ 'drawer--collapsed': collapsed }">
+    <div
+      class="drawer__handle"
+      @click="onHandleClick"
+      @touchstart="onTouchStart"
+      @touchmove="onTouchMove"
+      @touchend="onTouchEnd"
+    >
+      <div class="drawer__handle-bar" />
+    </div>
+
+    <div class="drawer__tabs" role="tablist">
+      <button
+        class="drawer__tab"
+        :class="{ 'drawer__tab--active': activeTab === 'atc' }"
+        role="tab"
+        :aria-selected="activeTab === 'atc'"
+        @click="activeTab = 'atc'"
+      >
+        ATC
+      </button>
+      <button
+        class="drawer__tab"
+        :class="{ 'drawer__tab--active': activeTab === 'music' }"
+        role="tab"
+        :aria-selected="activeTab === 'music'"
+        @click="activeTab = 'music'"
+      >
+        MUSIC
+      </button>
+    </div>
+
+    <div class="drawer__content" role="tabpanel">
+      <DataList
+        v-if="activeTab === 'atc'"
+        :items="airportItems"
+        value-key="codeIATA"
+        label-key="city"
+        :secondary-keys="[{ key: 'codeIATA' }, { key: 'countryCode' }]"
+        :filter-keys="['city', 'codeIATA', 'codeICAO', 'country']"
+        :model-value="currentAirportCode"
+        @update:model-value="$emit('update:airportCode', $event)"
+        :volume="airportVolume"
+        @update:volume="$emit('update:airportVolume', $event)"
+        label="ATC FEED"
+        accent-color="--accent-cool"
+      />
+      <DataList
+        v-if="activeTab === 'music'"
+        :items="musicItems"
+        value-key="id"
+        label-key="name"
+        :filter-keys="['name', 'description']"
+        :model-value="currentMusicId"
+        @update:model-value="$emit('update:musicId', $event)"
+        :volume="musicVolume"
+        @update:volume="$emit('update:musicVolume', $event)"
+        label="MUSIC FEED"
+        accent-color="--accent-warm"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import DataList from './DataList.vue';
+
+export default {
+  name: 'MobileDrawer',
+  components: { DataList },
+  props: {
+    airportItems: {
+      type: Array,
+      default: () => [],
+    },
+    musicItems: {
+      type: Array,
+      default: () => [],
+    },
+    currentAirportCode: {
+      type: String,
+      default: '',
+    },
+    currentMusicId: {
+      type: [String, Number],
+      default: '',
+    },
+    airportVolume: {
+      type: Number,
+      default: 1,
+    },
+    musicVolume: {
+      type: Number,
+      default: 1,
+    },
+  },
+  emits: [
+    'update:airportCode',
+    'update:musicId',
+    'update:airportVolume',
+    'update:musicVolume',
+  ],
+  data() {
+    return {
+      collapsed: true,
+      activeTab: 'atc',
+      touchStartY: 0,
+    };
+  },
+  methods: {
+    onTouchStart(e) {
+      this.touchStartY = e.touches[0].clientY;
+    },
+    onTouchMove(e) {
+      e.preventDefault();
+    },
+    onTouchEnd(e) {
+      const delta = e.changedTouches[0].clientY - this.touchStartY;
+      if (delta > 50) this.collapsed = true;
+      if (delta < -50) this.collapsed = false;
+    },
+    onHandleClick() {
+      this.collapsed = !this.collapsed;
+    },
+  },
+};
+</script>
+
+<style>
+.drawer {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  max-height: 50vh;
+  border-radius: 16px 16px 0 0;
+  background: var(--surface-active);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border-top: 1px solid var(--glass-border-active);
+  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  z-index: 20;
+  display: flex;
+  flex-direction: column;
+}
+
+.drawer--collapsed {
+  transform: translateY(calc(100% - 48px));
+}
+
+.drawer__handle {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 8px 0;
+  cursor: grab;
+}
+
+.drawer__handle-bar {
+  width: 40px;
+  height: 4px;
+  border-radius: 2px;
+  background: var(--text-muted);
+}
+
+.drawer__tabs {
+  display: flex;
+  height: 48px;
+}
+
+.drawer__tab {
+  flex: 1;
+  background: none;
+  border: none;
+  color: var(--text-dim);
+  font-family: var(--font-body);
+  font-size: 12px;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  cursor: pointer;
+  border-bottom: 2px solid transparent;
+  transition: color 0.2s, border-color 0.2s;
+}
+
+.drawer__tab--active {
+  color: var(--text-primary);
+  border-bottom-color: var(--accent-neutral);
+}
+
+.drawer__content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0 16px 16px;
+}
+</style>

From 0699ab1d22fb1316393573ac2a5659ea34912120 Mon Sep 17 00:00:00 2001
From: Ivan Kalachikov <ivan.kalachikov@gmail.com>
Date: Fri, 6 Mar 2026 14:47:35 +0000
Subject: [PATCH 18/22] fix(orbital): address code quality review for
 MobileDrawer

- Use @touchmove.prevent instead of manual preventDefault (passive listener fix)
- Add role="region" and aria-label on drawer root
- Add id, aria-controls, aria-labelledby for complete ARIA tab pattern
- Remove dead onTouchMove method

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/components/MobileDrawer.vue | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/components/MobileDrawer.vue b/src/components/MobileDrawer.vue
index 553fefa..b2c9522 100644
--- a/src/components/MobileDrawer.vue
+++ b/src/components/MobileDrawer.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="drawer" :class="{ 'drawer--collapsed': collapsed }">
+  <div class="drawer" :class="{ 'drawer--collapsed': collapsed }" role="region" aria-label="Audio controls">
     <div
       class="drawer__handle"
       @click="onHandleClick"
       @touchstart="onTouchStart"
-      @touchmove="onTouchMove"
+      @touchmove.prevent
       @touchend="onTouchEnd"
     >
       <div class="drawer__handle-bar" />
@@ -12,26 +12,30 @@
 
     <div class="drawer__tabs" role="tablist">
       <button
+        id="tab-atc"
         class="drawer__tab"
         :class="{ 'drawer__tab--active': activeTab === 'atc' }"
         role="tab"
         :aria-selected="activeTab === 'atc'"
+        aria-controls="drawer-panel"
         @click="activeTab = 'atc'"
       >
         ATC
       </button>
       <button
+        id="tab-music"
         class="drawer__tab"
         :class="{ 'drawer__tab--active': activeTab === 'music' }"
         role="tab"
         :aria-selected="activeTab === 'music'"
+        aria-controls="drawer-panel"
         @click="activeTab = 'music'"
       >
         MUSIC
       </button>
     </div>
 
-    <div class="drawer__content" role="tabpanel">
+    <div class="drawer__content" id="drawer-panel" role="tabpanel" :aria-labelledby="activeTab === 'atc' ? 'tab-atc' : 'tab-music'">
       <DataList
         v-if="activeTab === 'atc'"
         :items="airportItems"
@@ -112,9 +116,6 @@ export default {
     onTouchStart(e) {
       this.touchStartY = e.touches[0].clientY;
     },
-    onTouchMove(e) {
-      e.preventDefault();
-    },
     onTouchEnd(e) {
       const delta = e.changedTouches[0].clientY - this.touchStartY;
       if (delta > 50) this.collapsed = true;

From a1ccc2a4c5c782f6ac05f2d095954d469c4e9fd9 Mon Sep 17 00:00:00 2001
From: Ivan Kalachikov <ivan.kalachikov@gmail.com>
Date: Fri, 6 Mar 2026 14:58:00 +0000
Subject: [PATCH 19/22] fix(orbital): move ghost text near sphere, add
 play/pause icons, wire i18n, scroll active item

- Move ghost text from GlassPanel overlay to sphere zone (above/below orb)
  to improve list readability
- Add play triangle and pause bars icons to Sphere for clear button affordance
- Wire i18n ($t) for all hardcoded UI strings: search, volume, labels, tabs
- Add scrollToActive() to DataList to center the active selection on mount
  and selection change
- Clean up GlassPanel: remove unused ghost text props and CSS

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/components/DataList.vue     | 21 ++++++++++-
 src/components/GlassPanel.vue   | 39 -------------------
 src/components/HeaderBar.vue    |  7 +++-
 src/components/Main.vue         | 66 ++++++++++++++++++++++++++++-----
 src/components/MobileDrawer.vue | 13 +++++--
 src/components/Sphere.vue       | 64 ++++++++++++++++++++++++++++++--
 src/locales/messages.js         | 63 +++++++++++++++++++++++++++++++
 7 files changed, 214 insertions(+), 59 deletions(-)

diff --git a/src/components/DataList.vue b/src/components/DataList.vue
index df59b82..59328ff 100644
--- a/src/components/DataList.vue
+++ b/src/components/DataList.vue
@@ -5,7 +5,7 @@
       <input
         class="data-list__search"
         type="text"
-        :placeholder="'Search...'"
+        :placeholder="t('ui.search')"
         v-model="query"
         :aria-label="'Search ' + label"
       />
@@ -28,7 +28,7 @@
       </div>
     </div>
     <div class="data-list__volume">
-      <span class="data-list__vol-label">VOL</span>
+      <span class="data-list__vol-label">{{ t('ui.volume') }}</span>
       <input
         type="range"
         class="data-list__slider"
@@ -44,8 +44,14 @@
 </template>
 
 <script>
+import { useI18n } from 'vue-i18n';
+
 export default {
   name: 'DataList',
+  setup() {
+    const { t } = useI18n();
+    return { t };
+  },
   props: {
     items: { type: Array, required: true },
     valueKey: { type: String, required: true },
@@ -80,14 +86,25 @@ export default {
       this.$el.style.setProperty('--accent', 'var(' + this.accentColor + ')');
       this.$el.style.setProperty('--accent-glow', 'var(' + glowVar + ')');
     },
+    scrollToActive() {
+      const container = this.$el?.querySelector('.data-list__items');
+      if (!container) return;
+      const activeRow = container.querySelector('.data-list__row--active');
+      if (!activeRow) return;
+      activeRow.scrollIntoView({ block: 'center', behavior: 'smooth' });
+    },
   },
   mounted() {
     this.applyAccentColor();
+    this.$nextTick(() => this.scrollToActive());
   },
   watch: {
     accentColor() {
       this.applyAccentColor();
     },
+    modelValue() {
+      this.$nextTick(() => this.scrollToActive());
+    },
   },
 };
 </script>
diff --git a/src/components/GlassPanel.vue b/src/components/GlassPanel.vue
index c6f5c57..559688a 100644
--- a/src/components/GlassPanel.vue
+++ b/src/components/GlassPanel.vue
@@ -4,9 +4,7 @@
     :class="[tiltClass]"
     @mousemove="onMouseMove"
     @mouseleave="onMouseLeave"
-    :style="panelStyle"
   >
-    <span v-if="ghostText" class="panel__ghost" aria-hidden="true">{{ displayGhost }}</span>
     <slot></slot>
   </div>
 </template>
@@ -19,36 +17,17 @@ export default {
       type: String,
       default: 'none',
     },
-    ghostText: {
-      type: String,
-      default: '',
-    },
     accentColor: {
       type: String,
       default: '--accent-neutral',
     },
   },
-  data() {
-    return {
-      displayGhost: this.ghostText,
-    };
-  },
-  watch: {
-    ghostText(newVal) {
-      setTimeout(() => {
-        this.displayGhost = newVal;
-      }, 200);
-    },
-  },
   computed: {
     tiltClass() {
       if (this.tilt === 'left') return 'panel--left';
       if (this.tilt === 'right') return 'panel--right';
       return '';
     },
-    panelStyle() {
-      return {};
-    },
   },
   methods: {
     onMouseMove(e) {
@@ -107,23 +86,6 @@ export default {
   transform: perspective(800px) rotateY(-2deg);
 }
 
-.panel__ghost {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  font-family: var(--font-display);
-  font-size: 120px;
-  font-weight: 700;
-  letter-spacing: 0.05em;
-  color: var(--text-muted);
-  pointer-events: none;
-  user-select: none;
-  white-space: nowrap;
-  transition: opacity 0.4s ease;
-  text-transform: uppercase;
-}
-
 @media (max-width: 1023px) {
   .panel { max-width: 280px; }
   .panel--left { transform: perspective(800px) rotateY(1deg); }
@@ -138,6 +100,5 @@ export default {
     border-radius: 0;
     padding: 16px;
   }
-  .panel__ghost { display: none; }
 }
 </style>
diff --git a/src/components/HeaderBar.vue b/src/components/HeaderBar.vue
index 57e357d..5963172 100644
--- a/src/components/HeaderBar.vue
+++ b/src/components/HeaderBar.vue
@@ -11,10 +11,15 @@
 </template>
 
 <script>
+import { useI18n } from 'vue-i18n';
 import { mapState } from 'vuex';
 
 export default {
   name: 'HeaderBar',
+  setup() {
+    const { t } = useI18n();
+    return { t };
+  },
   computed: {
     ...mapState(['appStatus']),
     ...mapState({
@@ -27,7 +32,7 @@ export default {
     },
     statusText() {
       if (this.appStatus === 'playing') {
-        return `NOW PLAYING: ${this.currentCode} / ${this.currentStationName}`;
+        return `${this.t('ui.nowPlaying')}: ${this.currentCode} / ${this.currentStationName}`;
       }
       return '';
     },
diff --git a/src/components/Main.vue b/src/components/Main.vue
index 305cbc1..95079ee 100644
--- a/src/components/Main.vue
+++ b/src/components/Main.vue
@@ -13,7 +13,7 @@
 
     <!-- Desktop: panels + sphere -->
     <template v-if="!isMobile">
-      <GlassPanel tilt="left" :ghostText="currentAirportCode" accent-color="--accent-cool">
+      <GlassPanel tilt="left" accent-color="--accent-cool">
         <DataList
           :items="airports"
           value-key="codeIATA"
@@ -24,21 +24,25 @@
           @update:model-value="setCurrentAirportCode"
           :volume="airportVolume"
           @update:volume="setAirportVolume"
-          label="ATC FEED"
+          :label="t('ui.atcFeed')"
           accent-color="--accent-cool"
         />
       </GlassPanel>
     </template>
 
-    <Sphere
-      :app-status="appStatus"
-      :is-buffering="isBuffering"
-      :has-error="hasError"
-      @toggle="toggleAppStatus"
-    />
+    <div class="sphere-zone">
+      <span v-if="!isMobile" class="sphere-zone__ghost sphere-zone__ghost--left" aria-hidden="true">{{ currentAirportCode }}</span>
+      <Sphere
+        :app-status="appStatus"
+        :is-buffering="isBuffering"
+        :has-error="hasError"
+        @toggle="toggleAppStatus"
+      />
+      <span v-if="!isMobile" class="sphere-zone__ghost sphere-zone__ghost--right" aria-hidden="true">{{ currentMusicName }}</span>
+    </div>
 
     <template v-if="!isMobile">
-      <GlassPanel tilt="right" :ghostText="currentMusicName" accent-color="--accent-warm">
+      <GlassPanel tilt="right" accent-color="--accent-warm">
         <DataList
           :items="musicList"
           value-key="id"
@@ -48,7 +52,7 @@
           @update:model-value="setCurrentMusicId"
           :volume="musicVolume"
           @update:volume="setMusicVolume"
-          label="MUSIC FEED"
+          :label="t('ui.musicFeed')"
           accent-color="--accent-warm"
         />
       </GlassPanel>
@@ -321,4 +325,46 @@ export default {
     padding-bottom: 60px; /* space for collapsed drawer */
   }
 }
+
+.sphere-zone {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.sphere-zone__ghost {
+  position: absolute;
+  font-family: var(--font-display);
+  font-size: 64px;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  color: rgba(232, 232, 236, 0.07);
+  pointer-events: none;
+  user-select: none;
+  white-space: nowrap;
+  text-transform: uppercase;
+  z-index: 1;
+  overflow: hidden;
+  max-width: 240px;
+}
+
+.sphere-zone__ghost--left {
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-bottom: 8px;
+}
+
+.sphere-zone__ghost--right {
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-top: 8px;
+}
+
+@media (max-width: 1023px) {
+  .sphere-zone__ghost { font-size: 48px; }
+}
 </style>
diff --git a/src/components/MobileDrawer.vue b/src/components/MobileDrawer.vue
index b2c9522..2668d24 100644
--- a/src/components/MobileDrawer.vue
+++ b/src/components/MobileDrawer.vue
@@ -20,7 +20,7 @@
         aria-controls="drawer-panel"
         @click="activeTab = 'atc'"
       >
-        ATC
+        {{ t('ui.atc') }}
       </button>
       <button
         id="tab-music"
@@ -31,7 +31,7 @@
         aria-controls="drawer-panel"
         @click="activeTab = 'music'"
       >
-        MUSIC
+        {{ t('ui.music') }}
       </button>
     </div>
 
@@ -47,7 +47,7 @@
         @update:model-value="$emit('update:airportCode', $event)"
         :volume="airportVolume"
         @update:volume="$emit('update:airportVolume', $event)"
-        label="ATC FEED"
+        :label="t('ui.atcFeed')"
         accent-color="--accent-cool"
       />
       <DataList
@@ -60,7 +60,7 @@
         @update:model-value="$emit('update:musicId', $event)"
         :volume="musicVolume"
         @update:volume="$emit('update:musicVolume', $event)"
-        label="MUSIC FEED"
+        :label="t('ui.musicFeed')"
         accent-color="--accent-warm"
       />
     </div>
@@ -68,11 +68,16 @@
 </template>
 
 <script>
+import { useI18n } from 'vue-i18n';
 import DataList from './DataList.vue';
 
 export default {
   name: 'MobileDrawer',
   components: { DataList },
+  setup() {
+    const { t } = useI18n();
+    return { t };
+  },
   props: {
     airportItems: {
       type: Array,
diff --git a/src/components/Sphere.vue b/src/components/Sphere.vue
index 6991140..5ceaa94 100644
--- a/src/components/Sphere.vue
+++ b/src/components/Sphere.vue
@@ -7,6 +7,8 @@
     :aria-label="`Toggle playback. Currently ${appStatus}`"
     tabindex="0"
   >
+    <span v-if="appStatus !== 'playing'" class="sphere__play" aria-hidden="true"></span>
+    <span v-if="appStatus === 'playing'" class="sphere__pause" aria-hidden="true"></span>
     <span v-if="appStatus === 'playing'" class="sphere__ring" v-for="n in 3" :key="n"></span>
     <span v-if="isBuffering" class="sphere__loading-ring"></span>
   </button>
@@ -138,10 +140,66 @@ export default {
   opacity: 0.7;
 }
 
+/* Play icon (triangle) */
+.sphere__play {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-40%, -50%);
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 18px 0 18px 30px;
+  border-color: transparent transparent transparent rgba(200, 180, 255, 0.35);
+  transition: border-color 0.3s ease;
+}
+
+.sphere:hover .sphere__play {
+  border-color: transparent transparent transparent rgba(200, 180, 255, 0.7);
+}
+
+/* Pause icon (two bars) */
+.sphere__pause {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(calc(-50% - 8px), -50%);
+  width: 8px;
+  height: 28px;
+  background: rgba(200, 180, 255, 0.2);
+  border-radius: 2px;
+  box-shadow: 16px 0 0 rgba(200, 180, 255, 0.2);
+  transition: background 0.3s ease, box-shadow 0.3s ease;
+}
+
+.sphere:hover .sphere__pause {
+  background: rgba(200, 180, 255, 0.5);
+  box-shadow: 16px 0 0 rgba(200, 180, 255, 0.5);
+}
+
+/* Hover glow */
+.sphere:hover {
+  box-shadow:
+    0 0 60px var(--accent-neutral-glow),
+    0 0 100px rgba(170, 136, 255, 0.2);
+}
+
 /* Responsive */
-@media (max-width: 1023px) { .sphere { width: 140px; height: 140px; } }
-@media (max-width: 767px) { .sphere { width: 120px; height: 120px; } }
-@media (max-width: 479px) { .sphere { width: 100px; height: 100px; } }
+@media (max-width: 1023px) {
+  .sphere { width: 140px; height: 140px; }
+  .sphere__play { border-width: 15px 0 15px 25px; }
+  .sphere__pause { width: 7px; height: 24px; transform: translate(calc(-50% - 7px), -50%); box-shadow: 14px 0 0 rgba(200, 180, 255, 0.2); }
+}
+@media (max-width: 767px) {
+  .sphere { width: 120px; height: 120px; }
+  .sphere__play { border-width: 12px 0 12px 20px; }
+  .sphere__pause { width: 6px; height: 20px; transform: translate(calc(-50% - 6px), -50%); box-shadow: 12px 0 0 rgba(200, 180, 255, 0.2); }
+}
+@media (max-width: 479px) {
+  .sphere { width: 100px; height: 100px; }
+  .sphere__play { border-width: 10px 0 10px 17px; }
+  .sphere__pause { width: 5px; height: 18px; transform: translate(calc(-50% - 5px), -50%); box-shadow: 10px 0 0 rgba(200, 180, 255, 0.2); }
+}
 
 /* Reduced motion */
 @media (prefers-reduced-motion: reduce) {
diff --git a/src/locales/messages.js b/src/locales/messages.js
index 67e1542..51ea2cc 100644
--- a/src/locales/messages.js
+++ b/src/locales/messages.js
@@ -20,6 +20,13 @@ const messages = {
       selectAirport: 'Select Airport',
       selectMusic: 'Select Music',
       thanksTo: 'Thanks: ',
+      search: 'Search...',
+      volume: 'VOL',
+      atcFeed: 'ATC FEED',
+      musicFeed: 'MUSIC FEED',
+      atc: 'ATC',
+      music: 'MUSIC',
+      nowPlaying: 'NOW PLAYING',
     },
   },
   ru: {
@@ -43,6 +50,13 @@ const messages = {
       selectAirport: 'Выберите аэропорт',
       selectMusic: 'Выберите музыку',
       thanksTo: 'Спасибо: ',
+      search: 'Поиск...',
+      volume: 'ГРОМК',
+      atcFeed: 'РАДИОЭФИР',
+      musicFeed: 'МУЗЫКА',
+      atc: 'РАДИО',
+      music: 'МУЗЫКА',
+      nowPlaying: 'СЕЙЧАС ИГРАЕТ',
     },
   },
   es: {
@@ -66,6 +80,13 @@ const messages = {
       selectAirport: 'Seleccionar aeropuerto',
       selectMusic: 'Seleccionar música',
       thanksTo: 'Gracias: ',
+      search: 'Buscar...',
+      volume: 'VOL',
+      atcFeed: 'RADIO ATC',
+      musicFeed: 'MÚSICA',
+      atc: 'ATC',
+      music: 'MÚSICA',
+      nowPlaying: 'REPRODUCIENDO',
     },
   },
   fr: {
@@ -89,6 +110,13 @@ const messages = {
       selectAirport: 'Choisir un aéroport',
       selectMusic: 'Choisir la musique',
       thanksTo: 'Remerciements : ',
+      search: 'Rechercher...',
+      volume: 'VOL',
+      atcFeed: 'RADIO ATC',
+      musicFeed: 'MUSIQUE',
+      atc: 'ATC',
+      music: 'MUSIQUE',
+      nowPlaying: 'EN COURS',
     },
   },
   de: {
@@ -112,6 +140,13 @@ const messages = {
       selectAirport: 'Flughafen wählen',
       selectMusic: 'Musik wählen',
       thanksTo: 'Danke: ',
+      search: 'Suchen...',
+      volume: 'LAUTST',
+      atcFeed: 'FUNKVERKEHR',
+      musicFeed: 'MUSIK',
+      atc: 'FUNK',
+      music: 'MUSIK',
+      nowPlaying: 'LÄUFT GERADE',
     },
   },
   pt: {
@@ -135,6 +170,13 @@ const messages = {
       selectAirport: 'Selecionar aeroporto',
       selectMusic: 'Selecionar música',
       thanksTo: 'Agradecimentos: ',
+      search: 'Pesquisar...',
+      volume: 'VOL',
+      atcFeed: 'RÁDIO ATC',
+      musicFeed: 'MÚSICA',
+      atc: 'ATC',
+      music: 'MÚSICA',
+      nowPlaying: 'TOCANDO AGORA',
     },
   },
   zh: {
@@ -158,6 +200,13 @@ const messages = {
       selectAirport: '选择机场',
       selectMusic: '选择音乐',
       thanksTo: '致谢：',
+      search: '搜索...',
+      volume: '音量',
+      atcFeed: '航空管制',
+      musicFeed: '音乐',
+      atc: '管制',
+      music: '音乐',
+      nowPlaying: '正在播放',
     },
   },
   ja: {
@@ -181,6 +230,13 @@ const messages = {
       selectAirport: '空港を選択',
       selectMusic: '音楽を選択',
       thanksTo: '感謝：',
+      search: '検索...',
+      volume: '音量',
+      atcFeed: '航空管制',
+      musicFeed: '音楽',
+      atc: '管制',
+      music: '音楽',
+      nowPlaying: '再生中',
     },
   },
   ko: {
@@ -204,6 +260,13 @@ const messages = {
       selectAirport: '공항 선택',
       selectMusic: '음악 선택',
       thanksTo: '감사: ',
+      search: '검색...',
+      volume: '볼륨',
+      atcFeed: '관제 교신',
+      musicFeed: '음악',
+      atc: '관제',
+      music: '음악',
+      nowPlaying: '재생 중',
     },
   },
 };

From 45f6a2bc17081d882a02126bad878b4616d14c68 Mon Sep 17 00:00:00 2001
From: Ivan Kalachikov <ivan.kalachikov@gmail.com>
Date: Fri, 6 Mar 2026 15:08:23 +0000
Subject: [PATCH 20/22] fix(orbital): hide footer on mobile to prevent drawer
 overlap (QG3)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/components/Footer.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/Footer.vue b/src/components/Footer.vue
index 6c38262..dda66b8 100644
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -56,8 +56,7 @@ export default {
 }
 @media (max-width: 767px) {
   .footer {
-    padding: 0 16px;
-    font-size: 10px;
+    display: none;
   }
 }
 </style>

From d1f350c51e3a3502cdfa0763d63e36eaa38ec5b0 Mon Sep 17 00:00:00 2001
From: Ivan Kalachikov <ivan.kalachikov@gmail.com>
Date: Fri, 6 Mar 2026 15:08:50 +0000
Subject: [PATCH 21/22] feat(orbital): add global keyboard shortcuts for
 playback and volume

Space toggles play/pause, [ ] adjust music volume, { } adjust ATC volume.
Escape in search fields clears and blurs.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/components/Main.vue | 33 +++++++++++++++++++++++++++++++++
 1 file changed, 33 insertions(+)

diff --git a/src/components/Main.vue b/src/components/Main.vue
index 95079ee..9da27f7 100644
--- a/src/components/Main.vue
+++ b/src/components/Main.vue
@@ -190,8 +190,14 @@ export default {
     this._mobileQuery.addEventListener('change', this._mobileHandler);
 
     this.startAmplitudeLoop();
+
+    this._keydownHandler = this.handleKeydown.bind(this);
+    window.addEventListener('keydown', this._keydownHandler);
   },
   beforeUnmount() {
+    if (this._keydownHandler) {
+      window.removeEventListener('keydown', this._keydownHandler);
+    }
     if (this.musicAudio) this.musicAudio.disconnect();
     if (this.airportAudio) this.airportAudio.disconnect();
 
@@ -221,6 +227,33 @@ export default {
       'setCurrentMusicId',
       'setMusicVolume',
     ]),
+    handleKeydown(e) {
+      if (e.target.tagName === 'INPUT') {
+        if (e.key === 'Escape') {
+          e.target.blur();
+          e.target.value = '';
+        }
+        return;
+      }
+      switch (e.key) {
+        case ' ':
+          e.preventDefault();
+          this.toggleAppStatus();
+          break;
+        case '[':
+          this.setMusicVolume(Math.max(0, this.musicVolume - 0.1));
+          break;
+        case ']':
+          this.setMusicVolume(Math.min(1, this.musicVolume + 0.1));
+          break;
+        case '{':
+          this.setAirportVolume(Math.max(0, this.airportVolume - 0.1));
+          break;
+        case '}':
+          this.setAirportVolume(Math.min(1, this.airportVolume + 0.1));
+          break;
+      }
+    },
     toggleAppStatus() {
       const newStatus = this.appStatus === 'playing' ? 'paused' : 'playing';
       this.setAppStatus(newStatus);

From 5624976b5b87a6e1f81906e306868f727fe917ed Mon Sep 17 00:00:00 2001
From: Ivan Kalachikov <ivan.kalachikov@gmail.com>
Date: Fri, 6 Mar 2026 15:09:41 +0000
Subject: [PATCH 22/22] chore(orbital): remove old components,
 vue-audio-visual, and christmas asset

Deleted: CustomSelect.vue, Airports.vue, Music.vue, christmas-hat.png
Uninstalled: vue-audio-visual

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 package-lock.json               |  51 --------
 package.json                    |   1 -
 src/assets/christmas-hat.png    | Bin 10241 -> 0 bytes
 src/components/Airports.vue     | 102 ---------------
 src/components/CustomSelect.vue | 216 --------------------------------
 src/components/Music.vue        |  94 --------------
 6 files changed, 464 deletions(-)
 delete mode 100644 src/assets/christmas-hat.png
 delete mode 100644 src/components/Airports.vue
 delete mode 100644 src/components/CustomSelect.vue
 delete mode 100644 src/components/Music.vue

diff --git a/package-lock.json b/package-lock.json
index 5d7f284..954ce51 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,6 @@
       "version": "0.2.0",
       "dependencies": {
         "vue": "^3.5.0",
-        "vue-audio-visual": "git+https://github.com/Ivankalachikov/vue-audio-visual.git",
         "vue-i18n": "^11.0.0",
         "vuex": "^4.1.0"
       },
@@ -1441,15 +1440,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/axios": {
-      "version": "0.21.4",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.4.tgz",
-      "integrity": "sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==",
-      "license": "MIT",
-      "dependencies": {
-        "follow-redirects": "^1.14.0"
-      }
-    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -1596,17 +1586,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/core-js": {
-      "version": "3.48.0",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.48.0.tgz",
-      "integrity": "sha512-zpEHTy1fjTMZCKLHUZoVeylt9XrzaIN2rbPXEt0k+q7JE5CkCZdo6bNq55bn24a69CH7ErAVLKijxJja4fw+UQ==",
-      "hasInstallScript": true,
-      "license": "MIT",
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/core-js"
-      }
-    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -2561,26 +2540,6 @@
       "dev": true,
       "license": "ISC"
     },
-    "node_modules/follow-redirects": {
-      "version": "1.15.11",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.11.tgz",
-      "integrity": "sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ==",
-      "funding": [
-        {
-          "type": "individual",
-          "url": "https://github.com/sponsors/RubenVerborgh"
-        }
-      ],
-      "license": "MIT",
-      "engines": {
-        "node": ">=4.0"
-      },
-      "peerDependenciesMeta": {
-        "debug": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/for-each": {
       "version": "0.3.5",
       "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.5.tgz",
@@ -4775,16 +4734,6 @@
         }
       }
     },
-    "node_modules/vue-audio-visual": {
-      "version": "2.2.2",
-      "resolved": "git+ssh://git@github.com/Ivankalachikov/vue-audio-visual.git#5309cf6623cc7c0d122ad6675edd1518342815a5",
-      "license": "MIT",
-      "dependencies": {
-        "axios": "^0.21.1",
-        "core-js": "^3.7.0",
-        "vue": "^3.1.2"
-      }
-    },
     "node_modules/vue-eslint-parser": {
       "version": "9.4.3",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.4.3.tgz",
diff --git a/package.json b/package.json
index d167e2a..65df52a 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,6 @@
   },
   "dependencies": {
     "vue": "^3.5.0",
-    "vue-audio-visual": "git+https://github.com/Ivankalachikov/vue-audio-visual.git",
     "vue-i18n": "^11.0.0",
     "vuex": "^4.1.0"
   },
diff --git a/src/assets/christmas-hat.png b/src/assets/christmas-hat.png
deleted file mode 100644
index 0a10ad8e71512ab00779d2f050e6f643f4c97089..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 10241
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
Hu0mjf$p=9K

diff --git a/src/components/Airports.vue b/src/components/Airports.vue
deleted file mode 100644
index 5051081..0000000
--- a/src/components/Airports.vue
+++ /dev/null
@@ -1,102 +0,0 @@
-<template>
-  <div class="card-col">
-    <div class="card">
-      <div class="card-header">
-        <div :class="['icon-wrapper', airportsStatus === 'failed' && 'error']">
-          <Spinner v-if="airportsStatus === 'pending' && appStatus === 'playing'" class="spinner" />
-          <airportIcon />
-        </div>
-        <CustomSelect
-          :options="airports"
-          :model-value="currentAirportCode"
-          value-key="codeIATA"
-          label-key="city"
-          filter-key="city"
-          :placeholder="t('ui.selectAirport')"
-          @update:model-value="handleChange"
-        >
-          <template #selected="{ option }">
-            {{ option.city }} ({{ option.codeIATA }})
-          </template>
-          <template #option="{ option }">
-            <img
-              :src="`https://flagcdn.com/32x24/${option.countryCode}.png`"
-              width="32"
-              height="24"
-              :alt="option.country"
-            />
-            <span>{{ option.city }} <span class="text-secondary">({{ option.codeIATA }})</span></span>
-          </template>
-        </CustomSelect>
-      </div>
-      <input
-        type="range"
-        class="slider"
-        min="0"
-        max="100"
-        value="85"
-        @input="handleVolumeChange(Number($event.target.value))"
-        :disabled="airportsStatus === 'failed'"
-      />
-    </div>
-  </div>
-</template>
-
-<script>
-import { mapState, mapMutations } from 'vuex';
-import { useI18n } from 'vue-i18n';
-import airportIcon from '../assets/airport.svg';
-import Spinner from '../assets/tail-spin.svg';
-import CustomSelect from './CustomSelect.vue';
-
-export default {
-  name: 'Airports',
-  components: {
-    airportIcon,
-    Spinner,
-    CustomSelect,
-  },
-  props: ['audio'],
-  beforeUpdate() {
-    this.audio.addEventListener('waiting', this.setPending);
-    this.audio.addEventListener('emptied', this.setPending);
-    this.audio.addEventListener('loadeddata', this.setReady);
-  },
-  beforeUnmount() {
-    this.audio.removeEventListener('waiting', this.setPending);
-    this.audio.removeEventListener('emptied', this.setPending);
-    this.audio.removeEventListener('loadeddata', this.setReady);
-  },
-  setup() {
-    const { t } = useI18n();
-    return { t };
-  },
-  computed: mapState({
-    airports: (state) => state.airports.list,
-    currentAirportCode: (state) => state.airports.currentCode,
-    airportsStatus: (state) => state.airports.status,
-    airportVolume: (state) => state.airports.volume,
-    appStatus: (state) => state.appStatus,
-  }),
-  watch: {
-    airportVolume(newVal) {
-      this.audio.volume = newVal;
-    },
-  },
-  methods: {
-    ...mapMutations(['setCurrentAirportCode', 'setAirportStatus', 'setAirportVolume']),
-    handleChange(code) {
-      this.setCurrentAirportCode(code);
-    },
-    handleVolumeChange(value) {
-      this.setAirportVolume(value / 100);
-    },
-    setPending() {
-      this.setAirportStatus('pending');
-    },
-    setReady() {
-      this.setAirportStatus('ready');
-    },
-  },
-};
-</script>
diff --git a/src/components/CustomSelect.vue b/src/components/CustomSelect.vue
deleted file mode 100644
index 0d5be69..0000000
--- a/src/components/CustomSelect.vue
+++ /dev/null
@@ -1,216 +0,0 @@
-<template>
-  <div class="dropdown" ref="root" :class="{ open }">
-    <button type="button" class="dropdown__trigger" @click="toggle">
-      <span v-if="selectedOption" class="dropdown__value">
-        <slot name="selected" :option="selectedOption">
-          {{ selectedOption[labelKey] }}
-        </slot>
-      </span>
-      <span v-else class="dropdown__placeholder">{{ placeholder }}</span>
-      <span class="dropdown__arrow">&#9662;</span>
-    </button>
-    <div v-if="open" class="dropdown__panel">
-      <input
-        ref="searchInput"
-        v-model="query"
-        class="dropdown__search"
-        placeholder="Search..."
-        @keydown.esc="open = false"
-      />
-      <div class="dropdown__list">
-        <div
-          v-for="opt in filteredOptions"
-          :key="opt[valueKey]"
-          class="dropdown__option"
-          :class="{ 'dropdown__option--active': opt[valueKey] === modelValue }"
-          @click="select(opt)"
-        >
-          <slot name="option" :option="opt">
-            {{ opt[labelKey] }}
-          </slot>
-        </div>
-        <div v-if="filteredOptions.length === 0" class="dropdown__empty">
-          No results
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'CustomSelect',
-  props: {
-    options: { type: Array, required: true },
-    modelValue: { default: null },
-    valueKey: { type: String, required: true },
-    labelKey: { type: String, required: true },
-    filterKey: { type: String, default: '' },
-    placeholder: { type: String, default: 'Select...' },
-  },
-  emits: ['update:modelValue'],
-  data() {
-    return {
-      open: false,
-      query: '',
-    };
-  },
-  computed: {
-    selectedOption() {
-      return this.options.find((o) => o[this.valueKey] === this.modelValue) || null;
-    },
-    filteredOptions() {
-      if (!this.query) return this.options;
-      const key = this.filterKey || this.labelKey;
-      const q = this.query.toLowerCase();
-      return this.options.filter((o) => String(o[key]).toLowerCase().includes(q));
-    },
-  },
-  methods: {
-    toggle() {
-      this.open = !this.open;
-      if (this.open) {
-        this.query = '';
-        this.$nextTick(() => this.$refs.searchInput?.focus());
-      }
-    },
-    select(opt) {
-      this.$emit('update:modelValue', opt[this.valueKey]);
-      this.open = false;
-    },
-    onClickOutside(e) {
-      if (this.$refs.root && !this.$refs.root.contains(e.target)) {
-        this.open = false;
-      }
-    },
-  },
-  mounted() {
-    document.addEventListener('click', this.onClickOutside);
-  },
-  beforeUnmount() {
-    document.removeEventListener('click', this.onClickOutside);
-  },
-};
-</script>
-
-<style>
-.dropdown {
-  position: relative;
-  flex: 1;
-  min-width: 0;
-}
-
-.dropdown__trigger {
-  width: 100%;
-  padding: 10px 12px;
-  font-size: 16px;
-  background: #23242B;
-  color: #dadada;
-  border: 1.5px solid #45444B;
-  border-radius: 6px;
-  cursor: pointer;
-  outline: none;
-  text-align: left;
-  display: flex;
-  align-items: center;
-  font-family: inherit;
-}
-
-.dropdown__trigger:focus,
-.dropdown.open .dropdown__trigger {
-  border-color: #313DA9;
-}
-
-.dropdown__value {
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.dropdown__placeholder {
-  flex: 1;
-  color: #666;
-}
-
-.dropdown__arrow {
-  margin-left: 8px;
-  color: #45444B;
-  font-size: 12px;
-}
-
-.dropdown__panel {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  right: 0;
-  margin-top: 4px;
-  background: #23242B;
-  border: 1.5px solid #45444B;
-  border-radius: 6px;
-  z-index: 100;
-  overflow: hidden;
-}
-
-.dropdown__search {
-  width: 100%;
-  padding: 8px 12px;
-  background: #191921;
-  color: #dadada;
-  border: none;
-  border-bottom: 1px solid #45444B;
-  outline: none;
-  font-size: 14px;
-  font-family: inherit;
-}
-
-.dropdown__search::placeholder {
-  color: #666;
-}
-
-.dropdown__list {
-  max-height: 300px;
-  overflow-y: auto;
-}
-
-.dropdown__option {
-  padding: 8px 12px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  min-height: 40px;
-}
-
-.dropdown__option:hover {
-  background: #191921;
-}
-
-.dropdown__option--active {
-  background: #191921;
-}
-
-.dropdown__option img {
-  flex-shrink: 0;
-  border-radius: 2px;
-}
-
-.dropdown__empty {
-  padding: 12px;
-  text-align: center;
-  color: #666;
-}
-
-.dropdown__list::-webkit-scrollbar {
-  width: 6px;
-}
-
-.dropdown__list::-webkit-scrollbar-track {
-  background: #23242B;
-}
-
-.dropdown__list::-webkit-scrollbar-thumb {
-  background: #45444B;
-  border-radius: 3px;
-}
-</style>
diff --git a/src/components/Music.vue b/src/components/Music.vue
deleted file mode 100644
index 88aff6d..0000000
--- a/src/components/Music.vue
+++ /dev/null
@@ -1,94 +0,0 @@
-<template>
-  <div class="card-col">
-    <div class="card">
-      <div class="card-header">
-        <div :class="['icon-wrapper', musicStatus === 'failed' && 'error']">
-          <Spinner v-if="musicStatus === 'pending' && appStatus === 'playing'" class="spinner" />
-          <musicIcon />
-        </div>
-        <CustomSelect
-          :options="music"
-          :model-value="currentMusicId"
-          value-key="id"
-          label-key="name"
-          filter-key="name"
-          :placeholder="t('ui.selectMusic')"
-          @update:model-value="handleChange"
-        >
-          <template #option="{ option }">
-            <img :src="option.imageUrl" width="40" height="40" :alt="option.name" />
-            <span :title="option.description">{{ option.name }}</span>
-          </template>
-        </CustomSelect>
-      </div>
-      <input
-        type="range"
-        class="slider"
-        min="0"
-        max="100"
-        value="100"
-        @input="handleVolumeChange(Number($event.target.value))"
-        :disabled="musicStatus === 'failed'"
-      />
-    </div>
-  </div>
-</template>
-
-<script>
-import { useI18n } from 'vue-i18n';
-import { mapState, mapMutations } from 'vuex';
-import musicIcon from '../assets/music.svg';
-import Spinner from '../assets/tail-spin.svg';
-import CustomSelect from './CustomSelect.vue';
-
-export default {
-  name: 'Music',
-  setup() {
-    const { t } = useI18n();
-    return { t };
-  },
-  props: ['audio'],
-  beforeUpdate() {
-    this.audio.addEventListener('waiting', this.setPending);
-    this.audio.addEventListener('emptied', this.setPending);
-    this.audio.addEventListener('loadeddata', this.setReady);
-  },
-  beforeUnmount() {
-    this.audio.removeEventListener('waiting', this.setPending);
-    this.audio.removeEventListener('emptied', this.setPending);
-    this.audio.removeEventListener('loadeddata', this.setReady);
-  },
-  computed: mapState({
-    music: (state) => state.music.list,
-    musicStatus: (state) => state.music.status,
-    musicVolume: (state) => state.music.volume,
-    currentMusicId: (state) => state.music.currentId,
-    appStatus: (state) => state.appStatus,
-  }),
-  watch: {
-    musicVolume(newVal) {
-      this.audio.volume = newVal;
-    },
-  },
-  methods: {
-    ...mapMutations(['setCurrentMusicId', 'setMusicStatus', 'setMusicVolume']),
-    handleChange(id) {
-      this.setCurrentMusicId(id);
-    },
-    handleVolumeChange(value) {
-      this.setMusicVolume(value / 100);
-    },
-    setPending() {
-      this.setMusicStatus('pending');
-    },
-    setReady() {
-      this.setMusicStatus('ready');
-    },
-  },
-  components: {
-    musicIcon,
-    Spinner,
-    CustomSelect,
-  },
-};
-</script>