From 36b859cabbc67ff9b7af0cad718609734d866030 Mon Sep 17 00:00:00 2001
From: "Leon.Schmidt" <159480018+leonw21342315@users.noreply.github.com>
Date: Thu, 20 Aug 2026 18:59:51 +0200
Subject: [PATCH] ENH - add persistent dynamic island activities (#17)

* FIX - layer dynamic island above phone camera

The phone screen stacking context kept the Dynamic Island below the physical frame and its camera lens. Render the island at device-shell level, position it around the lens, and keep expanded notification spacing in sync.

* ADD - preview all dynamic island states

Reuse the runtime component for a development-only gallery and size expanded previews to the actual phone display so they cannot be clipped.

* FIX - match dynamic island live activity behavior

Show each activity only outside its owning app, use reference-sized activity layouts, and remove the separate expand glyph in favor of direct island taps.

* FIX - refine dynamic island live controls

Keep background activity state separate from foreground visibility so the island remains visible in the compact closed-phone peek. Match the timer, stopwatch, music, collapse, and spacing behavior to the supplied references.

* FIX - keep business call availability after closing

Stop treating the closed phone UI as the end of business-call readiness. Route background service-line calls only after revalidating the employee, owned device, and registered SIM.

* FIX - remove dock apps from home grid

The stored Home layout treated dock and grid shortcuts independently, so default dock apps appeared twice. Let the dock own those default placements and migrate saved layouts by removing matching grid shortcuts.

* FIX - keep memo island active after closing

Memo recording was cancelled as soon as the UI closed, while uploads required an active UI session and reopening a locked phone forced the home route. Keep the recorder bound to the physical device, revalidate device ownership server-side for uploads, preserve the last route behind the lock screen, and render only a compact frame, display, and live Dynamic Island while closed.

* ENH - align live activity controls with phone hardware

Report compact live-activity state to the client so Space opens Home or the enabled lock screen contextually. Apply the phone hardware volume as a shared output level for app media, games, YouTube playback, radio, and auxiliary sounds, and render the volume speaker icon in grey.

* FIX - hide paused music live activity

The music island previously depended only on the selected track, which remains set after playback pauses. Require active playback as well so the island closes when music stops while preserving the track for later resume.

---------

Co-authored-by: DerEchteAlec <bycraky@gmail.com>
---
 frontend/src/App.vue                          |  79 +-
 .../AppDevelopmentPreview.contract.test.ts    |  31 +-
 frontend/src/assets/main.css                  |  91 +--
 ...companiesServiceLineCalls.contract.test.ts |  36 +
 frontend/src/components/PayphoneOverlay.vue   |   5 +-
 .../PhoneDynamicIsland.contract.test.ts       | 147 +++-
 .../src/components/PhoneDynamicIsland.vue     | 718 ++++++++++++++----
 frontend/src/components/PhoneMemoRecorder.vue |  23 +-
 frontend/src/features/games/memory/audio.ts   |   7 +-
 .../src/features/games/minesweeper/audio.ts   |   4 +-
 .../src/features/games/neon-drop/audio.ts     |   7 +-
 .../src/features/games/number-merge/audio.ts  |   4 +-
 .../src/features/games/sky-flappy/audio.ts    |   4 +-
 .../src/features/games/tower-stack/audio.ts   |   4 +-
 frontend/src/phoneAudio.contract.test.ts      |  37 +
 frontend/src/phoneInventory.contract.test.ts  |  18 +-
 frontend/src/router/index.ts                  |   6 +
 frontend/src/stores/app-store.test.ts         |  47 +-
 frontend/src/stores/app-store.ts              |  17 +-
 frontend/src/stores/music.ts                  |  20 +-
 frontend/src/types/dynamicIsland.ts           |   7 +
 frontend/src/utils/homeLayout.test.ts         |  35 +
 frontend/src/utils/homeLayout.ts              |  31 +
 frontend/src/utils/phoneAudio.ts              |  96 +++
 frontend/src/utils/tones.test.ts              |   3 +-
 frontend/src/utils/tones.ts                   |   5 +-
 frontend/src/views/apps/FlipTokApp.vue        |  20 +-
 ...PhoneDynamicIslandGallery.contract.test.ts |  70 ++
 .../development/PhoneDynamicIslandGallery.vue | 303 ++++++++
 .../SkyUiKitchenSinkView.contract.test.ts     |   4 +-
 frontend/testserver/index.cjs                 |   1 +
 frontend/testserver/smoke.cjs                 |   1 +
 sky_phone/source/client/main.lua              |  34 +
 sky_phone/source/server/companies.lua         |  22 +-
 sky_phone/source/server/memos.lua             |  21 +-
 sky_phone/source/server/phone.lua             |   1 -
 36 files changed, 1644 insertions(+), 315 deletions(-)
 create mode 100644 frontend/src/phoneAudio.contract.test.ts
 create mode 100644 frontend/src/types/dynamicIsland.ts
 create mode 100644 frontend/src/utils/phoneAudio.ts
 create mode 100644 frontend/src/views/development/PhoneDynamicIslandGallery.contract.test.ts
 create mode 100644 frontend/src/views/development/PhoneDynamicIslandGallery.vue

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 3ff419b..78ebe16 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -56,6 +56,7 @@ import { useNotesStore } from '@/stores/notes'
 import { useMemosStore } from '@/stores/memos'
 import { useWeatherStore } from '@/stores/weather'
 import { useEasyShareStore } from '@/stores/easyshare'
+import { useRadioStore } from '@/stores/radio'
 import {
   useNotificationsStore,
   type PhoneNotification,
@@ -70,10 +71,15 @@ import type {
   CompanyUnreadCounts,
 } from '@/types/companies'
 import type { PhoneCall } from '@/types/phone'
+import type { DynamicIslandActivity } from '@/types/dynamicIsland'
 import type { EasyShareEvent } from '@/types/easyshare'
 import type { CryptoMarketChangedData } from '@/types/crypto'
 import type { CityWarnEventData } from '@/types/citywarn'
 import { nuiCall } from '@/utils/nui'
+import {
+  installPhoneAudioController,
+  setPhoneOutputVolume,
+} from '@/utils/phoneAudio'
 import { formatTimer } from '@/utils/clock'
 import { parsePhonePreferences } from '@/utils/preferences'
 import { getHairlinePixelStyle } from '@/utils/rendering'
@@ -82,6 +88,7 @@ import { isTrustedRootMessageSource } from '@/utils/windowMessages'
 import SpringboardView from '@/views/SpringboardView.vue'
 
 type AppMessage = {
+  openHome?: boolean
   type?: string
   data?:
     | CalendarReminderData
@@ -313,6 +320,7 @@ const notes = useNotesStore()
 const memos = useMemosStore()
 const weather = useWeatherStore()
 const easyShare = useEasyShareStore()
+const radio = useRadioStore()
 const notifications = useNotificationsStore()
 const route = useRoute()
 const router = useRouter()
@@ -335,8 +343,13 @@ const DARK_STATUS_BAR_APP_IDS = new Set([
   'minesweeper',
   'number-merge',
 ])
+const isDynamicIslandGalleryRoute = computed(
+  () => isDevelopment && route.name === 'development-dynamic-islands',
+)
 const isDevelopmentRoute = computed(
-  () => isDevelopment && route.name === 'development-sky-ui',
+  () =>
+    isDevelopment &&
+    (route.name === 'development-sky-ui' || isDynamicIslandGalleryRoute.value),
 )
 const appTransitionName = computed(() =>
   route.query.transition === 'app-switch' ? 'app-switch' : 'app-window',
@@ -356,9 +369,12 @@ const setupPreviewDismissed = ref(false)
 const setupDevelopmentSkipped = ref(false)
 const setupAppearanceSelected = ref(false)
 const pendingUnlockRoute = ref<string | null>(null)
+const openHomeRequested = ref(false)
 const unlockedServicesLoaded = ref(false)
 const controlCenterOpened = ref(false)
 const activitySuspended = ref(false)
+const dynamicIslandExpanded = ref(false)
+const dynamicIslandActivity = ref<DynamicIslandActivity | null>(null)
 const simPicker = ref<SimPickerPayload | null>(null)
 const setupRequired = computed(
   () =>
@@ -432,6 +448,12 @@ const phoneResolutionStyle = computed<CSSProperties>(() => ({
 }))
 const phoneStageStyle = computed<CSSProperties>(() => ({
   ...phoneResolutionStyle.value,
+  '--phone-live-activity-peek-height':
+    dynamicIslandActivity.value === 'music'
+      ? '190px'
+      : dynamicIslandActivity.value === 'recording'
+        ? '132px'
+        : '112px',
   visibility: activitySuspended.value ? 'hidden' : 'visible',
 }))
 const phoneDisplayStyle = computed<CSSProperties>(() => ({
@@ -449,6 +471,7 @@ let unlockTimer: number | undefined
 let passcodeLockTimer: number | undefined
 let hardwareVolumeHudTimer: number | undefined
 let unlockedServicesIdle: number | undefined
+let removePhoneAudioController: (() => void) | undefined
 let phoneClosePending = false
 let simPickerClosePending = false
 
@@ -758,6 +781,7 @@ function onMessage(event: MessageEvent<AppMessage>): void {
       })
     }
   } else if (event.data?.type === 'app:open') {
+    openHomeRequested.value = event.data.openHome === true
     hydratePhone(event.data.data as PhoneOpenPayload)
     void syncNavigationState().then(() => nuiCall('ui:opened'))
   } else if (event.data?.type === 'device:updated') {
@@ -1473,6 +1497,7 @@ function onFocusOut(event: FocusEvent): void {
 }
 
 onMounted(() => {
+  removePhoneAudioController = installPhoneAudioController()
   document.addEventListener('focusin', onFocusIn)
   document.addEventListener('focusout', onFocusOut)
   window.addEventListener('message', onMessage)
@@ -1587,6 +1612,23 @@ watch(
   },
 )
 
+watch(
+  () => Boolean(dynamicIslandActivity.value || calls.activeCall),
+  (active) => {
+    void nuiCall('ui:live-activity', { active })
+  },
+  { immediate: true },
+)
+
+watch(
+  hardwareAlertVolume,
+  (volume) => {
+    setPhoneOutputVolume(volume / 100)
+    if (radio.data.connected) void radio.setVolume(volume)
+  },
+  { immediate: true },
+)
+
 watch(
   () => phone.isOpen,
   (isOpen) => {
@@ -1619,7 +1661,8 @@ watch(
     }
     isLocked.value = setupRequired.value
       ? false
-      : !isDevelopment || developmentLockScreenPreview
+      : developmentLockScreenPreview ||
+        (!isDevelopment && phone.security.enabled)
     passcodeRequired.value = isLocked.value && phone.security.enabled
     unlockedServicesLoaded.value = false
     controlCenterOpened.value = false
@@ -1637,8 +1680,18 @@ watch(
       startPasscodeLock(passcodeRetrySeconds.value)
     }
     phone.setLaunchOrigin(null)
-    if (isLocked.value || setupRequired.value) void router.replace('/')
-    else loadUnlockedPhoneData()
+    if (setupRequired.value) {
+      void router.replace('/')
+    } else if (openHomeRequested.value) {
+      openHomeRequested.value = false
+      if (isLocked.value) pendingUnlockRoute.value = '/'
+      else {
+        void router.replace('/')
+        loadUnlockedPhoneData()
+      }
+    } else if (!isLocked.value) {
+      loadUnlockedPhoneData()
+    }
   },
 )
 
@@ -1650,6 +1703,7 @@ watch(
 )
 
 onBeforeUnmount(() => {
+  removePhoneAudioController?.()
   updateTextInputFocus(false)
   cancelUnlockedPhoneDataLoad()
   weather.stop()
@@ -1688,12 +1742,15 @@ onBeforeUnmount(() => {
         phone.isOpen ||
         notifications.current ||
         calls.activeCall ||
+        dynamicIslandActivity ||
         notifications.devicePreviews.length
       "
       class="phone-stage"
       :class="{
         'phone-stage--browser-preview': isBrowserPreview,
         'phone-stage--landscape': phone.cameraLandscape,
+        'phone-stage--live-activity':
+          !phone.isOpen && Boolean(dynamicIslandActivity || calls.activeCall),
         'phone-stage--peek': notifications.isPeeking,
       }"
       :style="phoneStageStyle"
@@ -1713,7 +1770,12 @@ onBeforeUnmount(() => {
           @open="openNotificationPreview"
         />
         <div
-          v-if="phone.isOpen || notifications.current || calls.activeCall"
+          v-if="
+            phone.isOpen ||
+            notifications.current ||
+            calls.activeCall ||
+            dynamicIslandActivity
+          "
           class="phone-resolution-wrapper phone-resolution-wrapper--primary"
         >
           <div class="phone-resolution-canvas phone-resolution-canvas--primary">
@@ -1721,6 +1783,7 @@ onBeforeUnmount(() => {
               class="phone-device"
               :class="{
                 'phone-app--light': !displayedDarkMode,
+                'phone-device--island-expanded': dynamicIslandExpanded,
                 [`phone-app--${phone.preferences.settings.graphicsMode}`]: true,
               }"
               :aria-label="phone.t('Common.phone')"
@@ -1832,7 +1895,6 @@ onBeforeUnmount(() => {
                     @control-center="toggleControlCenter"
                     @lock="lockPhone"
                   />
-                  <PhoneDynamicIsland v-if="!setupRequired" />
                   <SpringboardView
                     v-if="!isDevelopmentRoute && !setupRequired"
                     @edit-mode-change="springboardEditing = $event"
@@ -1918,6 +1980,11 @@ onBeforeUnmount(() => {
                 aria-hidden="true"
                 draggable="false"
               />
+              <PhoneDynamicIsland
+                v-if="!setupRequired && !isDynamicIslandGalleryRoute"
+                @expanded-change="dynamicIslandExpanded = $event"
+                @live-activity-change="dynamicIslandActivity = $event"
+              />
             </section>
           </div>
         </div>
diff --git a/frontend/src/AppDevelopmentPreview.contract.test.ts b/frontend/src/AppDevelopmentPreview.contract.test.ts
index da85cf8..bd46b82 100644
--- a/frontend/src/AppDevelopmentPreview.contract.test.ts
+++ b/frontend/src/AppDevelopmentPreview.contract.test.ts
@@ -2,7 +2,7 @@ import { readFileSync } from 'node:fs'
 
 import { describe, expect, it } from 'vitest'
 
-const source = readFileSync(new URL('./App.vue', import.meta.url), 'utf8')
+const source = readFileSync(new URL('./App.vue', import.meta.url), 'utf8').replace(/\r\n/g, '\n')
 const mainCss = readFileSync(
   new URL('./assets/main.css', import.meta.url),
   'utf8',
@@ -22,15 +22,32 @@ describe('browser development preview contract', () => {
 
   it('starts unlocked while preserving an explicit lock screen preview', () => {
     expect(source).toContain("developmentParameters.has('lockScreenPreview')")
-    expect(source).toContain(': !isDevelopment || developmentLockScreenPreview')
+    expect(source).toContain(
+      'developmentLockScreenPreview ||\n        (!isDevelopment && phone.security.enabled)',
+    )
     expect(source).toContain("developmentParameters.has('setupPreview')")
   })
 
-  it('loads authenticated app data without replacing direct app routes', () => {
-    expect(source).toContain(
+  it('restores the active route after the lock screen', () => {
+    expect(source).toMatch(
+      /if \(setupRequired\.value\) \{[\s\S]*?router\.replace\('\/'\)/,
+    )
+    expect(source).toMatch(
+      /else if \(!isLocked\.value\) \{\s*loadUnlockedPhoneData\(\)/,
+    )
+    expect(source).not.toContain(
       "if (isLocked.value || setupRequired.value) void router.replace('/')",
     )
-    expect(source).toContain('else loadUnlockedPhoneData()')
+  })
+
+  it('opens Space-triggered live activities on Home or the enabled lock screen', () => {
+    expect(source).toContain(
+      'openHomeRequested.value = event.data.openHome === true',
+    )
+    expect(source).toContain(
+      "if (isLocked.value) pendingUnlockRoute.value = '/'",
+    )
+    expect(source).toContain("void router.replace('/')")
   })
 
   it('requires the passcode again after a full device lock', () => {
@@ -100,7 +117,9 @@ describe('browser development preview contract', () => {
     expect(source).toContain("developmentParameters.has('browserPreview')")
     expect(source).toContain('import.meta.env.DEV ||')
     expect(source).toContain("'phone-stage--browser-preview': isBrowserPreview")
-    expect(source).toContain('return (availableScale * 0.94) / PHONE_BASE_SCALE')
+    expect(source).toContain(
+      'return (availableScale * 0.94) / PHONE_BASE_SCALE',
+    )
     expect(mainCss).toMatch(
       /\.phone-stage--browser-preview\s*\{[^}]*place-items:\s*center;[^}]*padding:\s*0;/s,
     )
diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
index 41ea588..1eb36f7 100644
--- a/frontend/src/assets/main.css
+++ b/frontend/src/assets/main.css
@@ -259,6 +259,20 @@ button {
   transform: translateY(calc(100% - 190px));
   transform-origin: right bottom;
 }
+
+.phone-stage--live-activity .phone-resolution-wrapper--primary .phone-device {
+  pointer-events: none;
+  transform: translateY(
+    calc(100% - var(--phone-live-activity-peek-height, 145px))
+  );
+  transform-origin: right bottom;
+}
+.phone-stage--live-activity
+  .phone-device
+  > :not(.phone-screen):not(.phone-device__frame):not(.phone-dynamic-island),
+.phone-stage--live-activity .phone-screen > * {
+  visibility: hidden;
+}
 .phone-lift-enter-active {
   transition: opacity 0.52s linear;
 }
@@ -384,7 +398,7 @@ button {
   overflow: hidden;
   border: 1px solid rgb(255 255 255 / 16%);
   border-radius: 15px;
-  color: #0a84ff;
+  color: #a9abb2;
   background: rgb(47 47 51 / 98%);
   box-shadow: 0 8px 24px rgb(0 0 0 / 28%);
   pointer-events: none;
@@ -672,6 +686,9 @@ button {
   transition: transform 280ms var(--sky-ease-out, ease-out);
   will-change: transform;
 }
+.phone-device--island-expanded .phone-notification {
+  top: 130px !important;
+}
 .phone-notification__icon {
   width: 38px;
   height: 38px;
@@ -795,78 +812,6 @@ button {
   cursor: pointer;
   pointer-events: auto;
 }
-.phone-dynamic-island {
-  position: absolute;
-  z-index: 98;
-  top: 12px;
-  left: 50%;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  width: 300px;
-  min-height: 72px;
-  padding: 10px 12px 10px 16px;
-  border: 1px solid rgb(255 255 255 / 10%);
-  border-radius: 28px;
-  color: #fff;
-  background: #050505;
-  box-shadow: 0 8px 24px rgb(0 0 0 / 45%);
-  transform: translateX(-50%);
-}
-.phone-dynamic-island__caller {
-  min-width: 0;
-  flex: 1;
-}
-.phone-dynamic-island__caller span,
-.phone-dynamic-island__caller strong {
-  display: block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.phone-dynamic-island__caller span {
-  color: rgb(255 255 255 / 58%);
-  font-size: 11px;
-  line-height: 14px;
-}
-.phone-dynamic-island__caller strong {
-  margin-top: 2px;
-  font-size: 15px;
-  line-height: 18px;
-}
-.phone-dynamic-island__actions {
-  display: flex;
-  gap: 8px;
-}
-.phone-dynamic-island__actions .sky-button--icon-only {
-  width: 44px;
-  min-width: 44px;
-  height: 44px;
-}
-.phone-dynamic-island__actions svg {
-  width: 19px;
-  height: 19px;
-}
-.phone-dynamic-island__answer {
-  --sky-app-accent: #34c759;
-}
-.phone-dynamic-island-enter-active,
-.phone-dynamic-island-leave-active {
-  transition:
-    opacity 180ms ease,
-    transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
-}
-.phone-dynamic-island-enter-from,
-.phone-dynamic-island-leave-to {
-  opacity: 0;
-  transform: translateX(-50%) scale(0.86);
-}
-@media (prefers-reduced-motion: reduce) {
-  .phone-dynamic-island-enter-active,
-  .phone-dynamic-island-leave-active {
-    transition: none;
-  }
-}
 .phone-home-indicator {
   position: absolute;
   z-index: 90;
diff --git a/frontend/src/companiesServiceLineCalls.contract.test.ts b/frontend/src/companiesServiceLineCalls.contract.test.ts
index b604bcc..c110c9f 100644
--- a/frontend/src/companiesServiceLineCalls.contract.test.ts
+++ b/frontend/src/companiesServiceLineCalls.contract.test.ts
@@ -14,6 +14,10 @@ const callsServer = readFileSync(
   new URL('../../sky_phone/source/server/calls.lua', import.meta.url),
   'utf8',
 ).replace(/\r\n/g, '\n')
+const phoneServer = readFileSync(
+  new URL('../../sky_phone/source/server/phone.lua', import.meta.url),
+  'utf8',
+).replace(/\r\n/g, '\n')
 const companiesStore = readFileSync(
   new URL('./stores/companies.ts', import.meta.url),
   'utf8',
@@ -85,3 +89,35 @@ describe('Companies outbound service-line call contract', () => {
     expect(startCompanyCall).not.toContain('data.callerNumber')
   })
 })
+
+describe('Companies background call availability contract', () => {
+  it('keeps call availability enabled after the phone UI closes', () => {
+    const closeDevice = sourceBlock(
+      phoneServer,
+      `Bridge.Callbacks.Register(${quote}sky_phone:device:close${quote}`,
+      `Bridge.Callbacks.Register(${quote}sky_phone:device:notification-open${quote}`,
+    )
+
+    expect(closeDevice).toContain('sessions[source] = nil')
+    expect(closeDevice).not.toContain(
+      'SkyPhoneCompanies.ClearCallAvailability(source)',
+    )
+  })
+
+  it('routes background calls only to an owned phone with the same registered SIM', () => {
+    const getCallTargets = sourceBlock(
+      companiesServer,
+      'function SkyPhoneCompanies.GetCallTargets(',
+      '\n\nlocal function profile_row(',
+    )
+
+    expect(getCallTargets).toContain('SkyPhone.LoadDevice(readiness.imei)')
+    expect(getCallTargets).toContain(
+      'SkyPhone.FindDeviceSlots(source, readiness.imei)',
+    )
+    expect(getCallTargets).toContain('device.sim_id == readiness.sim_id')
+    expect(getCallTargets).toContain('device.sim_type == "registered"')
+    expect(getCallTargets).toContain('device.registered_at ~= nil')
+    expect(getCallTargets).not.toContain('current_device(source, true)')
+  })
+})
diff --git a/frontend/src/components/PayphoneOverlay.vue b/frontend/src/components/PayphoneOverlay.vue
index eb1fbd3..fef7d10 100644
--- a/frontend/src/components/PayphoneOverlay.vue
+++ b/frontend/src/components/PayphoneOverlay.vue
@@ -3,6 +3,7 @@ import { computed, nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
 
 import payphoneFrame from '@/assets/img/payphone/american-payphone-frame.png'
 import { nuiCall } from '@/utils/nui'
+import { registerPhoneMediaElement } from '@/utils/phoneAudio'
 import { isTrustedRootMessageSource } from '@/utils/windowMessages'
 
 type PayphoneState =
@@ -70,7 +71,9 @@ const buttonSounds: HTMLAudioElement[] = []
 function prepareButtonSounds(): void {
   if (buttonSounds.length) return
   for (let index = 0; index < 4; index += 1) {
-    const sound = new Audio(`${import.meta.env.BASE_URL}sounds/button.mp3`)
+    const sound = registerPhoneMediaElement(
+      new Audio(`${import.meta.env.BASE_URL}sounds/button.mp3`),
+    )
     sound.preload = 'auto'
     sound.volume = 0.55
     buttonSounds.push(sound)
diff --git a/frontend/src/components/PhoneDynamicIsland.contract.test.ts b/frontend/src/components/PhoneDynamicIsland.contract.test.ts
index 7997f79..627f510 100644
--- a/frontend/src/components/PhoneDynamicIsland.contract.test.ts
+++ b/frontend/src/components/PhoneDynamicIsland.contract.test.ts
@@ -5,8 +5,15 @@ import { describe, expect, it } from 'vitest'
 const source = readFileSync(
   new URL('./PhoneDynamicIsland.vue', import.meta.url),
   'utf8',
+).replace(/\r\n/g, '\n')
+const appSource = readFileSync(
+  new URL('../App.vue', import.meta.url),
+  'utf8',
+).replace(/\r\n/g, '\n')
+const mainCss = readFileSync(
+  new URL('../assets/main.css', import.meta.url),
+  'utf8',
 )
-const appSource = readFileSync(new URL('../App.vue', import.meta.url), 'utf8')
 const recorderSource = readFileSync(
   new URL('./PhoneMemoRecorder.vue', import.meta.url),
   'utf8',
@@ -19,16 +26,23 @@ const clockSource = readFileSync(
   new URL('../views/apps/ClockApp.vue', import.meta.url),
   'utf8',
 )
+const serverMemosSource = readFileSync(
+  new URL('../../../sky_phone/source/server/memos.lua', import.meta.url),
+  'utf8',
+)
 
 describe('Phone Dynamic Island contract', () => {
   it('renders once at phone shell level instead of forcing calls into Phone', () => {
     expect(appSource).toContain(
       "import PhoneDynamicIsland from '@/components/PhoneDynamicIsland.vue'",
     )
-    expect(appSource).toContain('<PhoneDynamicIsland v-if="!setupRequired" />')
     expect(appSource).toContain(
-      'phone.isOpen || notifications.current || calls.activeCall',
+      "'phone-device--island-expanded': dynamicIslandExpanded",
     )
+    expect(appSource).toMatch(
+      /class="phone-device__frame"[\s\S]*?<PhoneDynamicIsland[\s\S]*?@expanded-change="dynamicIslandExpanded = \$event"[\s\S]*?@live-activity-change="dynamicIslandActivity = \$event"/,
+    )
+    expect(appSource).toContain('dynamicIslandActivity ||')
     expect(appSource).not.toContain(
       "window.setTimeout(() => void router.push('/apps/phone'), 0)",
     )
@@ -45,7 +59,44 @@ describe('Phone Dynamic Island contract', () => {
     expect(source).toContain('call.answeredAt ?? call.startedAt')
   })
 
+  it('hides an activity in its owning foreground app but restores it after closing', () => {
+    expect(source).toContain(
+      'if (!currentActivity || !phone.isOpen) return currentActivity',
+    )
+    expect(source).toContain("activeAppId.value === 'phone'")
+    expect(source).toContain(
+      "currentActivity === 'recording' && activeAppId.value === 'memos'",
+    )
+    expect(source).toContain("activeAppId.value === 'clock'")
+    expect(source).toContain(
+      "currentActivity === 'music' && activeAppId.value === 'music'",
+    )
+  })
+
+  it('shows only a compact frame and island for background live activities', () => {
+    expect(source).toContain("'live-activity-change': [activity:")
+    expect(source).toContain("emit('live-activity-change', nextActivity)")
+    expect(appSource).toContain(
+      "'phone-stage--live-activity':\n          !phone.isOpen && Boolean(dynamicIslandActivity || calls.activeCall)",
+    )
+    expect(mainCss).toMatch(
+      /\.phone-stage--live-activity[\s\S]*?pointer-events:\s*none;[\s\S]*?--phone-live-activity-peek-height/,
+    )
+    expect(mainCss).toMatch(
+      /\.phone-stage--live-activity[\s\S]*?> :not\(\.phone-screen\):not\(\.phone-device__frame\):not\(\.phone-dynamic-island\)[\s\S]*?\.phone-screen > \*[\s\S]*?visibility:\s*hidden;/,
+    )
+    expect(appSource).toContain("? '190px'")
+    expect(appSource).toContain("? '132px'")
+    expect(appSource).toContain(": '112px'")
+    expect(source).toContain(
+      "!phone.isOpen ||\n            activity.value === 'incoming-call' ||",
+    )
+  })
+
   it('connects music, recorder, timer, and stopwatch controls to their stores', () => {
+    expect(source).toContain(
+      "if (music.isPlaying && music.currentTrack) return 'music'",
+    )
     expect(source).toContain('@click.stop="music.previous()"')
     expect(source).toContain('@click.stop="music.toggle()"')
     expect(source).toContain('@click.stop="music.next()"')
@@ -53,9 +104,31 @@ describe('Phone Dynamic Island contract', () => {
     expect(source).toContain('clock.pauseTimer(Date.now())')
     expect(source).toContain('clock.pauseStopwatch(Date.now())')
     expect(source).toContain('clock.addLap(Date.now())')
+    expect(source).not.toContain('phone-dynamic-island__lap')
+    expect(source).toContain('phone-dynamic-island__stopwatch-meta')
+    expect(source).toContain('{{ stopwatchLapLabel }}')
+    expect(source).toContain('{{ stopwatchLapValue }}')
+    expect(source).toContain('{{ stopwatchTotalDisplay }}')
   })
 
-  it('keeps recorder state available across app changes', () => {
+  it('matches the reference music player and timer control layouts', () => {
+    expect(source).toContain('phone-dynamic-island__music-equalizer')
+    expect(source).toContain('phone-dynamic-island__progress-track')
+    expect(source).toContain('{{ musicElapsedLabel }}')
+    expect(source).toContain('{{ musicRemainingLabel }}')
+    expect(source).not.toContain('Airplay')
+    expect(source).toContain('<X aria-hidden="true" />')
+    expect(source).toMatch(
+      /\.phone-dynamic-island--timer\.phone-dynamic-island__copy|\.phone-dynamic-island--timer \.phone-dynamic-island__copy/,
+    )
+    expect(source).toContain(
+      '.phone-dynamic-island--music .phone-dynamic-island__actions--media',
+    )
+    expect(source).toContain('justify-content: center')
+    expect(source).toContain('gap: 34px')
+  })
+
+  it('keeps recorder state available across app changes and phone closes', () => {
     expect(recorderSource).toContain(
       "message.type === 'memo:recordStateRequest'",
     )
@@ -65,6 +138,15 @@ describe('Phone Dynamic Island contract', () => {
     expect(memosSource).not.toContain(
       "if (recordingActive.value) postRecorderCommand('memo:recordCancel')",
     )
+    expect(recorderSource).toContain('() => phone.device?.imei ?? null')
+    expect(recorderSource).not.toContain(
+      'if (!isOpen || deviceSessionChanged) cancelRecording()',
+    )
+    expect(recorderSource).toContain('deviceImei: finalDeviceImei')
+    expect(serverMemosSource).toContain('device_owner(src, data.deviceImei)')
+    expect(serverMemosSource).toContain(
+      'SkyPhone.FindDeviceSlots(source, imei)[1]',
+    )
   })
 
   it('opens both clock live activities on the correct clock tab', () => {
@@ -75,13 +157,68 @@ describe('Phone Dynamic Island contract', () => {
     )
   })
 
+  it('opens activities by tapping the island without a separate expand icon', () => {
+    expect(source).toContain('@click.stop="toggleExpanded"')
+    expect(source).toContain('@click.stop="openActivity"')
+    expect(source).not.toContain('Maximize2')
+    expect(source).not.toContain('phone-dynamic-island__open-icon')
+  })
+
+  it('collapses expanded activities on taps, swipes, and scrolling outside', () => {
+    expect(source).toContain('ref="islandElement"')
+    expect(source).toContain(
+      "document.addEventListener('pointerdown', onOutsidePointerDown, true)",
+    )
+    expect(source).toContain(
+      "document.addEventListener('scroll', collapseExpanded, true)",
+    )
+    expect(source).toContain('islandElement.value?.contains(event.target)')
+    expect(source).toContain('expanded.value = false')
+    expect(source).toContain(
+      "document.removeEventListener('pointerdown', onOutsidePointerDown, true)",
+    )
+    expect(source).toContain(
+      "document.removeEventListener('scroll', collapseExpanded, true)",
+    )
+  })
+
   it('animates state changes and moves popup notifications below expanded UI', () => {
     expect(source).toContain('<Transition name="phone-dynamic-island">')
     expect(source).toContain(
       '<Transition name="phone-dynamic-island-content" mode="out-in">',
     )
     expect(source).toContain(".phone-dynamic-island[data-expanded='true']")
-    expect(source).toContain('~ .phone-notification-provider')
+    expect(source).toContain("emit('expanded-change', false)")
+    expect(mainCss).toContain(
+      '.phone-device--island-expanded .phone-notification',
+    )
     expect(source).toContain('@media (prefers-reduced-motion: reduce)')
   })
+
+  it('renders below the top edge and above the physical camera frame', () => {
+    expect(source).toMatch(
+      /\.phone-dynamic-island\s*\{[^}]*z-index:\s*102;[^}]*top:\s*30px;/s,
+    )
+    expect(mainCss).not.toMatch(/\.phone-dynamic-island\s*\{/)
+  })
+
+  it('keeps compact and expanded islands close to the physical camera proportions', () => {
+    expect(source).toMatch(
+      /\.phone-dynamic-island\s*\{[^}]*width:\s*126px;[^}]*height:\s*38px;/s,
+    )
+    expect(source).toMatch(
+      /\.phone-dynamic-island\[data-expanded='true'\]\s*\{[^}]*width:\s*318px;[^}]*height:\s*74px;/s,
+    )
+    expect(source).toMatch(
+      /\.phone-dynamic-island--incoming-call\[data-expanded='true'\]\s*\{[^}]*height:\s*68px;/s,
+    )
+    expect(source).toMatch(
+      /\.phone-dynamic-island--music\[data-expanded='true'\]\s*\{[^}]*width:\s*316px;[^}]*height:\s*150px;/s,
+    )
+    expect(source).toMatch(
+      /\.phone-dynamic-island--stopwatch\[data-expanded='true'\]\s*\{[^}]*height:\s*70px;/s,
+    )
+    expect(source).toContain('box-sizing: border-box')
+    expect(source).toContain('padding: 8px 16px 8px 10px')
+  })
 })
diff --git a/frontend/src/components/PhoneDynamicIsland.vue b/frontend/src/components/PhoneDynamicIsland.vue
index 2293ab0..aa17e84 100644
--- a/frontend/src/components/PhoneDynamicIsland.vue
+++ b/frontend/src/components/PhoneDynamicIsland.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import {
   Gauge,
-  Maximize2,
   Mic,
   Pause,
   Phone,
@@ -13,6 +12,7 @@ import {
   SkipForward,
   Square,
   Timer,
+  X,
 } from 'lucide-vue-next'
 import {
   computed,
@@ -28,31 +28,45 @@ import { useCallsStore } from '@/stores/calls'
 import { useClockStore } from '@/stores/clock'
 import { useMusicStore } from '@/stores/music'
 import { usePhoneStore } from '@/stores/phone'
+import type { DynamicIslandActivity } from '@/types/dynamicIsland'
 import type { MemoRecorderState } from '@/types/memos'
 import {
   elapsedMilliseconds,
   formatStopwatch,
   formatTimer,
   remainingMilliseconds,
-  timerProgressRatio,
 } from '@/utils/clock'
 import { formatPhoneNumber } from '@/utils/phone'
 import { isTrustedRootMessageSource } from '@/utils/windowMessages'
 
-type IslandActivity =
-  | 'call'
-  | 'incoming-call'
-  | 'music'
-  | 'recording'
-  | 'stopwatch'
-  | 'timer'
-
+const props = withDefaults(
+  defineProps<{
+    preview?: boolean
+    previewActivity?: DynamicIslandActivity
+    previewExpanded?: boolean
+    previewEyebrow?: string
+    previewProgress?: number
+    previewSubtitle?: string
+    previewTitle?: string
+    previewValue?: string
+  }>(),
+  {
+    preview: false,
+    previewExpanded: false,
+    previewProgress: 0,
+  },
+)
+const emit = defineEmits<{
+  'expanded-change': [expanded: boolean]
+  'live-activity-change': [activity: DynamicIslandActivity | null]
+}>()
 const router = useRouter()
 const calls = useCallsStore()
 const clock = useClockStore()
 const music = useMusicStore()
 const phone = usePhoneStore()
 const expanded = ref(false)
+const islandElement = ref<HTMLElement | null>(null)
 const now = ref(Date.now())
 const recorderState = ref<MemoRecorderState>({
   elapsedMs: 0,
@@ -62,6 +76,14 @@ const recorderState = ref<MemoRecorderState>({
 let collapseTimer: number | undefined
 let ticker: number | undefined
 
+const activeAppId = computed(() => {
+  const currentRoute = router.currentRoute.value
+  return currentRoute.name === 'app' &&
+    typeof currentRoute.params.appId === 'string'
+    ? currentRoute.params.appId
+    : ''
+})
+
 const recordingActive = computed(() =>
   ['paused', 'recording', 'starting', 'stopping', 'uploading'].includes(
     recorderState.value.state,
@@ -79,7 +101,7 @@ const timerActive = computed(
 const stopwatchActive = computed(
   () => clock.stopwatchStartedAt !== null || clock.stopwatchAccumulated > 0,
 )
-const activity = computed<IslandActivity | null>(() => {
+const liveActivity = computed<DynamicIslandActivity | null>(() => {
   const call = calls.activeCall
   if (call?.direction === 'incoming' && call.state === 'ringing') {
     return 'incoming-call'
@@ -88,9 +110,33 @@ const activity = computed<IslandActivity | null>(() => {
   if (recordingActive.value) return 'recording'
   if (timerActive.value) return 'timer'
   if (stopwatchActive.value) return 'stopwatch'
-  if (music.currentTrack) return 'music'
+  if (music.isPlaying && music.currentTrack) return 'music'
   return null
 })
+const runtimeActivity = computed<DynamicIslandActivity | null>(() => {
+  const currentActivity = liveActivity.value
+  if (!currentActivity || !phone.isOpen) return currentActivity
+  if (
+    (currentActivity === 'incoming-call' || currentActivity === 'call') &&
+    activeAppId.value === 'phone'
+  ) {
+    return null
+  }
+  if (currentActivity === 'recording' && activeAppId.value === 'memos') {
+    return null
+  }
+  if (
+    (currentActivity === 'timer' || currentActivity === 'stopwatch') &&
+    activeAppId.value === 'clock'
+  ) {
+    return null
+  }
+  if (currentActivity === 'music' && activeAppId.value === 'music') return null
+  return currentActivity
+})
+const activity = computed<DynamicIslandActivity | null>(() =>
+  props.preview ? (props.previewActivity ?? null) : runtimeActivity.value,
+)
 const activityKey = computed(() => {
   if (activity.value === 'incoming-call' || activity.value === 'call') {
     return `${activity.value}:${calls.activeCall?.id ?? ''}`
@@ -100,8 +146,15 @@ const activityKey = computed(() => {
   }
   return activity.value
 })
-const isExpanded = computed(
-  () => activity.value === 'incoming-call' || expanded.value,
+const isExpanded = computed(() =>
+  props.preview
+    ? props.previewExpanded
+    : Boolean(
+        activity.value &&
+          (!phone.isOpen ||
+            activity.value === 'incoming-call' ||
+            expanded.value),
+      ),
 )
 const callContact = computed(() => {
   const number = calls.activeCall?.otherNumber
@@ -112,10 +165,17 @@ const callContact = computed(() => {
 })
 const callName = computed(() => {
   const number = calls.activeCall?.otherNumber ?? ''
-  return callContact.value?.name ?? formatPhoneNumber(number)
+  return (
+    props.previewTitle ?? callContact.value?.name ?? formatPhoneNumber(number)
+  )
 })
 const callInitials = computed(() =>
-  (callContact.value?.name ?? calls.activeCall?.otherNumber ?? '')
+  (
+    props.previewTitle ??
+    callContact.value?.name ??
+    calls.activeCall?.otherNumber ??
+    ''
+  )
     .split(/\s+/)
     .map((part) => part.charAt(0).toUpperCase())
     .filter(Boolean)
@@ -128,6 +188,7 @@ const callDuration = computed(() => {
   return formatDuration(now.value - (call.answeredAt ?? call.startedAt))
 })
 const callStatus = computed(() => {
+  if (props.previewSubtitle !== undefined) return props.previewSubtitle
   const call = calls.activeCall
   if (!call) return ''
   if (call.state === 'connected') return callDuration.value
@@ -148,9 +209,6 @@ const timerValue = computed(() =>
     now.value,
   ),
 )
-const timerProgress = computed(() =>
-  timerProgressRatio(timerValue.value, clock.timerDuration),
-)
 const stopwatchValue = computed(() =>
   elapsedMilliseconds(
     clock.stopwatchAccumulated,
@@ -158,15 +216,44 @@ const stopwatchValue = computed(() =>
     now.value,
   ),
 )
+const stopwatchLapLabel = computed(() =>
+  props.preview
+    ? 'LAP 1'
+    : `${phone.t('Apps.clock.lap').toLocaleUpperCase(phone.lang)} ${clock.laps.length + 1}`,
+)
+const stopwatchLapValue = computed(() => {
+  if (props.preview) return '00:02'
+  const latestCompletedLap = clock.laps[0] ?? 0
+  return formatLapTime(stopwatchValue.value - latestCompletedLap)
+})
+const stopwatchTotalDisplay = computed(() => {
+  if (props.preview) return '00:11,48'
+  const decimalSeparator =
+    new Intl.NumberFormat(phone.lang)
+      .formatToParts(1.1)
+      .find((part) => part.type === 'decimal')?.value ?? '.'
+  return formatStopwatch(stopwatchValue.value).replace('.', decimalSeparator)
+})
 const musicProgress = computed(() =>
-  music.duration > 0
-    ? Math.max(0, Math.min(1, music.currentTime / music.duration))
-    : 0,
+  props.preview
+    ? props.previewProgress
+    : music.duration > 0
+      ? Math.max(0, Math.min(1, music.currentTime / music.duration))
+      : 0,
 )
 const progressStyle = computed<CSSProperties>(() => ({
   '--dynamic-island-progress': `${musicProgress.value * 100}%`,
 }))
+const musicElapsedLabel = computed(() =>
+  props.preview ? '1:20' : formatPlaybackTime(music.currentTime),
+)
+const musicRemainingLabel = computed(() =>
+  props.preview
+    ? '-2:15'
+    : `-${formatPlaybackTime(Math.max(0, music.duration - music.currentTime))}`,
+)
 const activityTitle = computed(() => {
+  if (props.previewTitle !== undefined) return props.previewTitle
   switch (activity.value) {
     case 'incoming-call':
       return phone.t('Apps.phone.incoming')
@@ -198,6 +285,7 @@ const recordingStatus = computed(() => {
   }
 })
 const compactValue = computed(() => {
+  if (props.previewValue !== undefined) return props.previewValue
   switch (activity.value) {
     case 'call':
       return callDuration.value || callStatus.value
@@ -213,13 +301,50 @@ const compactValue = computed(() => {
       return ''
   }
 })
-const visibleLevels = computed(() =>
-  recorderState.value.levels
-    .slice(-12)
-    .map((level) => Math.max(0.12, Math.min(1, Number(level) || 0))),
-)
+const visibleLevels = computed(() => {
+  const levels = props.preview
+    ? [0.24, 0.48, 0.82, 0.38, 0.64, 0.92, 0.56, 0.76, 0.34, 0.68, 0.44, 0.86]
+    : recorderState.value.levels.slice(-12)
+  return levels.map((level) => Math.max(0.12, Math.min(1, Number(level) || 0)))
+})
+const expandedEyebrow = computed(() => {
+  if (props.previewEyebrow !== undefined) return props.previewEyebrow
+  if (activity.value === 'incoming-call') return phone.t('Apps.phone.incoming')
+  if (activity.value === 'recording') return recordingStatus.value
+  if (activity.value === 'music') return phone.t('Apps.music.nowPlaying')
+  if (activity.value === 'timer') return phone.t('Apps.clock.tabs.timer')
+  if (activity.value === 'stopwatch') {
+    return phone.t('Apps.clock.tabs.stopwatch')
+  }
+  return phone.t('Apps.phone.connected')
+})
+const expandedTitle = computed(() => {
+  if (props.previewTitle !== undefined) return props.previewTitle
+  if (activity.value === 'call' || activity.value === 'incoming-call') {
+    return callName.value
+  }
+  if (activity.value === 'music') return music.currentTrack?.title ?? ''
+  if (activity.value === 'recording') {
+    return formatDuration(recorderState.value.elapsedMs)
+  }
+  if (activity.value === 'timer') return formatTimer(timerValue.value)
+  return formatStopwatch(stopwatchValue.value)
+})
+const expandedSubtitle = computed(() => {
+  if (props.previewSubtitle !== undefined) return props.previewSubtitle
+  if (activity.value === 'call' || activity.value === 'incoming-call') {
+    return callStatus.value
+  }
+  if (activity.value === 'music') return music.currentTrack?.artist ?? ''
+  if (activity.value === 'timer') return clock.timerNote
+  if (activity.value === 'recording') return recordingStatus.value
+  return phone.t(
+    clock.stopwatchStartedAt === null ? 'Common.start' : 'Common.stop',
+  )
+})
 
 watch(activityKey, (nextActivity) => {
+  if (props.preview) return
   window.clearTimeout(collapseTimer)
   if (!nextActivity) {
     expanded.value = false
@@ -233,6 +358,23 @@ watch(activityKey, (nextActivity) => {
   }
 })
 
+watch(
+  liveActivity,
+  (nextActivity) => {
+    if (!props.preview) emit('live-activity-change', nextActivity)
+  },
+  { immediate: true },
+)
+
+watch(
+  [isExpanded, activity],
+  ([nextExpanded, nextActivity]) => {
+    if (props.preview) return
+    emit('expanded-change', Boolean(nextActivity && nextExpanded))
+  },
+  { immediate: true },
+)
+
 function formatDuration(milliseconds: number): string {
   const totalSeconds = Math.max(0, Math.floor(milliseconds / 1000))
   const hours = Math.floor(totalSeconds / 3600)
@@ -243,12 +385,41 @@ function formatDuration(milliseconds: number): string {
     : `${String(minutes).padStart(2, '0')}:${seconds}`
 }
 
+function formatPlaybackTime(seconds: number): string {
+  const safeSeconds = Math.max(0, Math.floor(seconds))
+  return `${Math.floor(safeSeconds / 60)}:${String(safeSeconds % 60).padStart(2, '0')}`
+}
+
+function formatLapTime(milliseconds: number): string {
+  const totalSeconds = Math.max(0, Math.floor(milliseconds / 1000))
+  const minutes = Math.floor(totalSeconds / 60)
+  const seconds = totalSeconds % 60
+  return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`
+}
+
 function toggleExpanded(): void {
+  if (props.preview) return
   if (activity.value === 'incoming-call') return
   window.clearTimeout(collapseTimer)
   expanded.value = !expanded.value
 }
 
+function collapseExpanded(): void {
+  if (!expanded.value) return
+  window.clearTimeout(collapseTimer)
+  expanded.value = false
+}
+
+function onOutsidePointerDown(event: PointerEvent): void {
+  if (
+    event.target instanceof Node &&
+    islandElement.value?.contains(event.target)
+  ) {
+    return
+  }
+  collapseExpanded()
+}
+
 function openActivity(): void {
   const currentActivity = activity.value
   if (!currentActivity) return
@@ -312,7 +483,10 @@ function onMessage(event: MessageEvent): void {
 }
 
 onMounted(() => {
+  if (props.preview) return
   window.addEventListener('message', onMessage)
+  document.addEventListener('pointerdown', onOutsidePointerDown, true)
+  document.addEventListener('scroll', collapseExpanded, true)
   ticker = window.setInterval(() => {
     now.value = Date.now()
   }, 250)
@@ -320,7 +494,13 @@ onMounted(() => {
 })
 
 onBeforeUnmount(() => {
+  if (!props.preview) {
+    emit('expanded-change', false)
+    emit('live-activity-change', null)
+  }
   window.removeEventListener('message', onMessage)
+  document.removeEventListener('pointerdown', onOutsidePointerDown, true)
+  document.removeEventListener('scroll', collapseExpanded, true)
   window.clearInterval(ticker)
   window.clearTimeout(collapseTimer)
 })
@@ -330,12 +510,19 @@ onBeforeUnmount(() => {
   <Transition name="phone-dynamic-island">
     <section
       v-if="activity"
+      ref="islandElement"
       class="phone-dynamic-island"
       :class="`phone-dynamic-island--${activity}`"
       :data-expanded="isExpanded"
+      :data-preview="props.preview ? 'true' : undefined"
       :aria-label="activityTitle"
-      :role="activity === 'incoming-call' ? 'alert' : undefined"
-      :aria-atomic="activity === 'incoming-call' ? 'true' : undefined"
+      :aria-hidden="props.preview || undefined"
+      :role="
+        !props.preview && activity === 'incoming-call' ? 'alert' : undefined
+      "
+      :aria-atomic="
+        !props.preview && activity === 'incoming-call' ? 'true' : undefined
+      "
     >
       <Transition name="phone-dynamic-island-content" mode="out-in">
         <button
@@ -367,16 +554,16 @@ onBeforeUnmount(() => {
             aria-hidden="true"
           />
           <img
-            v-else-if="music.currentTrack?.artwork"
+            v-else-if="music.currentTrack?.artwork && !props.preview"
             class="phone-dynamic-island__compact-artwork"
             :src="music.currentTrack.artwork"
             alt=""
           />
-          <Play
+          <span
             v-else
-            class="phone-dynamic-island__compact-icon phone-dynamic-island__compact-icon--music"
+            class="phone-dynamic-island__compact-artwork phone-dynamic-island__compact-artwork--fallback"
             aria-hidden="true"
-          />
+          ></span>
           <span class="phone-dynamic-island__compact-value">{{
             compactValue
           }}</span>
@@ -423,7 +610,11 @@ onBeforeUnmount(() => {
                 >{{ callInitials }}</span
               >
               <img
-                v-else-if="activity === 'music' && music.currentTrack?.artwork"
+                v-else-if="
+                  activity === 'music' &&
+                  music.currentTrack?.artwork &&
+                  !props.preview
+                "
                 :src="music.currentTrack.artwork"
                 alt=""
               />
@@ -445,58 +636,36 @@ onBeforeUnmount(() => {
                 <Gauge v-else />
               </span>
             </span>
-            <span class="phone-dynamic-island__copy">
+            <span
+              v-if="activity === 'stopwatch'"
+              class="phone-dynamic-island__stopwatch-copy"
+            >
+              <span class="phone-dynamic-island__stopwatch-meta">
+                <span>{{ stopwatchLapLabel }}</span>
+                <strong>{{ stopwatchLapValue }}</strong>
+              </span>
+              <strong class="phone-dynamic-island__stopwatch-total">
+                {{ stopwatchTotalDisplay }}
+              </strong>
+            </span>
+            <span v-else class="phone-dynamic-island__copy">
               <span class="phone-dynamic-island__eyebrow">
-                {{
-                  activity === 'incoming-call'
-                    ? phone.t('Apps.phone.incoming')
-                    : activity === 'recording'
-                      ? recordingStatus
-                      : activity === 'music'
-                        ? phone.t('Apps.music.nowPlaying')
-                        : activity === 'timer'
-                          ? phone.t('Apps.clock.tabs.timer')
-                          : activity === 'stopwatch'
-                            ? phone.t('Apps.clock.tabs.stopwatch')
-                            : phone.t('Apps.phone.connected')
-                }}
+                {{ expandedEyebrow }}
               </span>
               <strong class="phone-dynamic-island__title">
-                {{
-                  activity === 'call' || activity === 'incoming-call'
-                    ? callName
-                    : activity === 'music'
-                      ? music.currentTrack?.title
-                      : activity === 'recording'
-                        ? formatDuration(recorderState.elapsedMs)
-                        : activity === 'timer'
-                          ? formatTimer(timerValue)
-                          : formatStopwatch(stopwatchValue)
-                }}
+                {{ expandedTitle }}
               </strong>
               <span class="phone-dynamic-island__subtitle">
-                {{
-                  activity === 'call' || activity === 'incoming-call'
-                    ? callStatus
-                    : activity === 'music'
-                      ? music.currentTrack?.artist
-                      : activity === 'timer'
-                        ? clock.timerNote
-                        : activity === 'recording'
-                          ? recordingStatus
-                          : phone.t(
-                              clock.stopwatchStartedAt === null
-                                ? 'Common.start'
-                                : 'Common.stop',
-                            )
-                }}
+                {{ expandedSubtitle }}
               </span>
             </span>
-            <Maximize2
-              v-if="activity !== 'incoming-call'"
-              class="phone-dynamic-island__open-icon"
+            <span
+              v-if="activity === 'music'"
+              class="phone-dynamic-island__music-equalizer"
               aria-hidden="true"
-            />
+            >
+              <i></i><i></i><i></i><i></i>
+            </span>
           </button>
 
           <div
@@ -515,15 +684,11 @@ onBeforeUnmount(() => {
             class="phone-dynamic-island__progress"
             :style="progressStyle"
             aria-hidden="true"
-          ></div>
-          <div
-            v-else-if="activity === 'timer'"
-            class="phone-dynamic-island__progress phone-dynamic-island__progress--timer"
-            :style="{
-              '--dynamic-island-progress': `${timerProgress * 100}%`,
-            }"
-            aria-hidden="true"
-          ></div>
+          >
+            <span>{{ musicElapsedLabel }}</span>
+            <i class="phone-dynamic-island__progress-track"></i>
+            <span>{{ musicRemainingLabel }}</span>
+          </div>
 
           <div
             v-if="activity === 'incoming-call'"
@@ -532,18 +697,18 @@ onBeforeUnmount(() => {
             <button
               type="button"
               class="phone-dynamic-island__call-action phone-dynamic-island__call-action--decline"
+              :aria-label="phone.t('Apps.phone.decline')"
               @click.stop="endCall"
             >
               <PhoneOff aria-hidden="true" />
-              <span>{{ phone.t('Apps.phone.decline') }}</span>
             </button>
             <button
               type="button"
               class="phone-dynamic-island__call-action phone-dynamic-island__call-action--answer"
+              :aria-label="phone.t('Apps.phone.answer')"
               @click.stop="calls.answer()"
             >
               <Phone aria-hidden="true" />
-              <span>{{ phone.t('Apps.phone.answer') }}</span>
             </button>
           </div>
           <div
@@ -587,7 +752,10 @@ onBeforeUnmount(() => {
               "
               @click.stop="music.toggle()"
             >
-              <Pause v-if="music.isPlaying" aria-hidden="true" />
+              <Pause
+                v-if="props.preview || music.isPlaying"
+                aria-hidden="true"
+              />
               <Play v-else aria-hidden="true" />
             </button>
             <button
@@ -606,7 +774,10 @@ onBeforeUnmount(() => {
             <button
               type="button"
               class="phone-dynamic-island__action"
-              :disabled="!['paused', 'recording'].includes(recorderState.state)"
+              :disabled="
+                !props.preview &&
+                !['paused', 'recording'].includes(recorderState.state)
+              "
               :aria-label="
                 phone.t(
                   recorderState.state === 'paused'
@@ -625,7 +796,10 @@ onBeforeUnmount(() => {
             <button
               type="button"
               class="phone-dynamic-island__action phone-dynamic-island__action--recording"
-              :disabled="!['paused', 'recording'].includes(recorderState.state)"
+              :disabled="
+                !props.preview &&
+                !['paused', 'recording'].includes(recorderState.state)
+              "
               :aria-label="phone.t('Apps.memos.stop')"
               @click.stop="postRecorderCommand('memo:recordStop')"
             >
@@ -642,7 +816,7 @@ onBeforeUnmount(() => {
               :aria-label="phone.t('Common.reset')"
               @click.stop="clock.resetTimer()"
             >
-              <RotateCcw aria-hidden="true" />
+              <X aria-hidden="true" />
             </button>
             <button
               type="button"
@@ -656,7 +830,10 @@ onBeforeUnmount(() => {
               "
               @click.stop="toggleTimer"
             >
-              <Play v-if="clock.timerStartedAt === null" aria-hidden="true" />
+              <Play
+                v-if="!props.preview && clock.timerStartedAt === null"
+                aria-hidden="true"
+              />
               <Pause v-else aria-hidden="true" />
             </button>
           </div>
@@ -677,11 +854,7 @@ onBeforeUnmount(() => {
                   : clock.addLap(Date.now())
               "
             >
-              <RotateCcw
-                v-if="clock.stopwatchStartedAt === null"
-                aria-hidden="true"
-              />
-              <span v-else class="phone-dynamic-island__lap">+1</span>
+              <RotateCcw aria-hidden="true" />
             </button>
             <button
               type="button"
@@ -696,7 +869,7 @@ onBeforeUnmount(() => {
               @click.stop="toggleStopwatch"
             >
               <Play
-                v-if="clock.stopwatchStartedAt === null"
+                v-if="!props.preview && clock.stopwatchStartedAt === null"
                 aria-hidden="true"
               />
               <Pause v-else aria-hidden="true" />
@@ -708,25 +881,17 @@ onBeforeUnmount(() => {
   </Transition>
 </template>
 
-<style>
-.phone-dynamic-island[data-expanded='true']
-  ~ .phone-notification-provider
-  .phone-notification {
-  top: 130px !important;
-}
-</style>
-
 <style scoped>
 .phone-dynamic-island {
   position: absolute;
-  z-index: 99;
-  top: 6px;
+  z-index: 102;
+  top: 30px;
   left: 50%;
-  width: 132px;
+  width: 126px;
   max-width: calc(100% - 24px);
-  height: 44px;
+  height: 38px;
   overflow: hidden;
-  border-radius: 24px;
+  border-radius: 999px;
   color: #fff;
   background: #000;
   box-shadow: 0 5px 18px rgb(0 0 0 / 22%);
@@ -739,15 +904,57 @@ onBeforeUnmount(() => {
     box-shadow 360ms ease;
 }
 
+.phone-dynamic-island--call:not([data-expanded='true']) {
+  width: 138px;
+}
+
+.phone-dynamic-island--music:not([data-expanded='true']) {
+  width: 172px;
+}
+
+.phone-dynamic-island--recording:not([data-expanded='true']) {
+  width: 148px;
+}
+
+.phone-dynamic-island--timer:not([data-expanded='true']) {
+  width: 144px;
+}
+
+.phone-dynamic-island--stopwatch:not([data-expanded='true']) {
+  width: 156px;
+}
+
+.phone-dynamic-island[data-preview='true'] {
+  pointer-events: none;
+}
+
 .phone-dynamic-island[data-expanded='true'] {
-  width: 356px;
-  height: 118px;
-  border-radius: 30px;
+  width: 318px;
+  height: 74px;
+  border-radius: 999px;
   box-shadow: 0 12px 32px rgb(0 0 0 / 32%);
 }
 
 .phone-dynamic-island--incoming-call[data-expanded='true'] {
-  height: 124px;
+  height: 68px;
+}
+
+.phone-dynamic-island--music[data-expanded='true'] {
+  width: 316px;
+  height: 150px;
+  border-radius: 32px;
+}
+
+.phone-dynamic-island--recording[data-expanded='true'] {
+  height: 92px;
+}
+
+.phone-dynamic-island--timer[data-expanded='true'] {
+  height: 70px;
+}
+
+.phone-dynamic-island--stopwatch[data-expanded='true'] {
+  height: 70px;
 }
 
 .phone-dynamic-island__compact,
@@ -764,16 +971,16 @@ onBeforeUnmount(() => {
 .phone-dynamic-island__compact {
   display: flex;
   width: 100%;
-  height: 44px;
-  padding: 0 10px;
+  height: 38px;
+  padding: 0 9px;
   align-items: center;
   gap: 7px;
   background: transparent;
 }
 
 .phone-dynamic-island__compact-icon {
-  width: 17px;
-  height: 17px;
+  width: 16px;
+  height: 16px;
   flex: 0 0 auto;
   stroke-width: 2.4;
 }
@@ -795,18 +1002,23 @@ onBeforeUnmount(() => {
 }
 
 .phone-dynamic-island__compact-artwork {
-  width: 24px;
-  height: 24px;
+  width: 22px;
+  height: 22px;
   flex: 0 0 auto;
   border-radius: 7px;
   object-fit: cover;
 }
 
+.phone-dynamic-island__compact-artwork--fallback,
+.phone-dynamic-island__symbol--music {
+  background: linear-gradient(180deg, #ff9f43 0%, #e6538d 52%, #8b5cf6 100%);
+}
+
 .phone-dynamic-island__compact-value {
   min-width: 0;
   overflow: hidden;
   flex: 1 1 auto;
-  font-size: 12px;
+  font-size: 11px;
   font-variant-numeric: tabular-nums;
   font-weight: 650;
   letter-spacing: -0.15px;
@@ -859,13 +1071,53 @@ onBeforeUnmount(() => {
 .phone-dynamic-island__expanded {
   position: relative;
   display: grid;
+  box-sizing: border-box;
   height: 100%;
-  padding: 10px 11px;
+  padding: 8px 10px;
   grid-template-columns: minmax(0, 1fr) auto;
   grid-template-rows: minmax(0, 1fr) auto;
   column-gap: 10px;
 }
 
+.phone-dynamic-island--music .phone-dynamic-island__expanded {
+  padding: 10px 12px;
+  grid-template-columns: minmax(0, 1fr);
+  grid-template-rows: 48px 18px minmax(0, 1fr);
+  row-gap: 4px;
+}
+
+.phone-dynamic-island--music .phone-dynamic-island__summary {
+  grid-column: 1;
+  grid-row: 1;
+}
+
+.phone-dynamic-island--timer .phone-dynamic-island__expanded,
+.phone-dynamic-island--stopwatch .phone-dynamic-island__expanded {
+  padding: 8px 16px 8px 10px;
+  grid-template-columns: auto minmax(0, 1fr);
+  grid-template-rows: 1fr;
+  column-gap: 8px;
+}
+
+.phone-dynamic-island--timer .phone-dynamic-island__summary,
+.phone-dynamic-island--stopwatch .phone-dynamic-island__summary {
+  justify-content: flex-end;
+  grid-column: 2;
+  grid-row: 1;
+}
+
+.phone-dynamic-island--timer .phone-dynamic-island__leading,
+.phone-dynamic-island--stopwatch .phone-dynamic-island__leading {
+  display: none;
+}
+
+.phone-dynamic-island--timer .phone-dynamic-island__copy {
+  align-items: baseline;
+  flex-direction: row;
+  justify-content: flex-end;
+  gap: 7px;
+}
+
 .phone-dynamic-island__summary {
   display: flex;
   min-width: 0;
@@ -886,6 +1138,12 @@ onBeforeUnmount(() => {
   border-radius: 14px;
 }
 
+.phone-dynamic-island--music .phone-dynamic-island__leading,
+.phone-dynamic-island--music .phone-dynamic-island__leading img,
+.phone-dynamic-island--music .phone-dynamic-island__symbol {
+  border-radius: 11px;
+}
+
 .phone-dynamic-island__leading img {
   display: block;
   object-fit: cover;
@@ -910,8 +1168,11 @@ onBeforeUnmount(() => {
 }
 
 .phone-dynamic-island__symbol--music {
-  color: #e6bbff;
-  background: #3d184d;
+  color: transparent;
+}
+
+.phone-dynamic-island__symbol--music svg {
+  display: none;
 }
 
 .phone-dynamic-island__symbol--recording {
@@ -956,7 +1217,7 @@ onBeforeUnmount(() => {
 }
 
 .phone-dynamic-island--music .phone-dynamic-island__eyebrow {
-  color: #d28cff;
+  display: none;
 }
 
 .phone-dynamic-island__title,
@@ -966,6 +1227,101 @@ onBeforeUnmount(() => {
   white-space: nowrap;
 }
 
+.phone-dynamic-island--timer .phone-dynamic-island__eyebrow,
+.phone-dynamic-island--stopwatch .phone-dynamic-island__eyebrow {
+  color: #ffad33;
+  font-size: 10px;
+  line-height: 1;
+}
+
+.phone-dynamic-island--timer .phone-dynamic-island__title,
+.phone-dynamic-island--stopwatch .phone-dynamic-island__title {
+  color: #ffb340;
+  font-size: 27px;
+  font-weight: 450;
+  letter-spacing: -1.2px;
+  line-height: 1;
+}
+
+.phone-dynamic-island--timer .phone-dynamic-island__subtitle,
+.phone-dynamic-island--stopwatch .phone-dynamic-island__subtitle {
+  display: none;
+}
+
+.phone-dynamic-island--stopwatch .phone-dynamic-island__title {
+  font-size: 22px;
+  letter-spacing: -0.8px;
+}
+
+.phone-dynamic-island__stopwatch-copy {
+  display: flex;
+  min-width: 0;
+  align-items: flex-end;
+  flex-direction: column;
+  justify-content: center;
+  gap: 1px;
+  font-variant-numeric: tabular-nums;
+}
+
+.phone-dynamic-island__stopwatch-meta {
+  display: flex;
+  align-items: baseline;
+  justify-content: flex-end;
+  gap: 8px;
+  color: #62310e;
+  font-size: 10px;
+  font-weight: 750;
+  letter-spacing: 0.3px;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.phone-dynamic-island__stopwatch-meta strong {
+  color: #ff9f43;
+  font-size: 12px;
+  font-weight: 650;
+}
+
+.phone-dynamic-island__stopwatch-total {
+  color: #ff9f43;
+  font-size: 31px;
+  font-weight: 350;
+  letter-spacing: -1.4px;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.phone-dynamic-island__music-equalizer {
+  display: flex;
+  height: 24px;
+  margin-left: auto;
+  align-items: center;
+  gap: 2px;
+  color: #d28cff;
+}
+
+.phone-dynamic-island__music-equalizer i {
+  width: 2px;
+  border-radius: 2px;
+  background: currentcolor;
+}
+
+.phone-dynamic-island__music-equalizer i:nth-child(1) {
+  height: 10px;
+}
+
+.phone-dynamic-island__music-equalizer i:nth-child(2) {
+  height: 18px;
+}
+
+.phone-dynamic-island__music-equalizer i:nth-child(3) {
+  height: 14px;
+}
+
+.phone-dynamic-island__music-equalizer i:nth-child(4) {
+  height: 8px;
+}
+
 .phone-dynamic-island__title {
   font-size: 14px;
   font-variant-numeric: tabular-nums;
@@ -981,13 +1337,6 @@ onBeforeUnmount(() => {
   line-height: 13px;
 }
 
-.phone-dynamic-island__open-icon {
-  width: 13px;
-  height: 13px;
-  margin-left: auto;
-  color: #71717a;
-}
-
 .phone-dynamic-island__waveform {
   position: absolute;
   right: 118px;
@@ -1010,30 +1359,35 @@ onBeforeUnmount(() => {
 }
 
 .phone-dynamic-island__progress {
-  position: absolute;
-  right: 12px;
-  bottom: 10px;
-  left: 12px;
-  height: 2px;
-  overflow: hidden;
-  border-radius: 2px;
-  background: #27272a;
+  display: grid;
+  align-items: center;
+  gap: 6px;
+  grid-column: 1;
+  grid-row: 2;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  color: #8e8e93;
+  font-size: 9px;
+  font-variant-numeric: tabular-nums;
 }
 
-.phone-dynamic-island__progress::after {
+.phone-dynamic-island__progress-track {
+  position: relative;
+  height: 3px;
+  overflow: hidden;
+  border-radius: 999px;
+  background: #343438;
+}
+
+.phone-dynamic-island__progress-track::after {
   display: block;
   width: var(--dynamic-island-progress);
   height: 100%;
   border-radius: inherit;
-  background: #bf5af2;
+  background: #a1a1aa;
   content: '';
   transition: width 250ms linear;
 }
 
-.phone-dynamic-island__progress--timer::after {
-  background: #ff9f0a;
-}
-
 .phone-dynamic-island__actions {
   display: flex;
   min-width: 98px;
@@ -1049,11 +1403,56 @@ onBeforeUnmount(() => {
   gap: 5px;
 }
 
+.phone-dynamic-island--music .phone-dynamic-island__actions--media {
+  min-width: 0;
+  justify-content: center;
+  gap: 34px;
+  grid-column: 1;
+  grid-row: 3;
+}
+
+.phone-dynamic-island--music .phone-dynamic-island__action {
+  color: #fff;
+  background: transparent;
+}
+
+.phone-dynamic-island--music .phone-dynamic-island__action svg {
+  width: 22px;
+  height: 22px;
+}
+
+.phone-dynamic-island--music .phone-dynamic-island__action--primary svg {
+  width: 26px;
+  height: 26px;
+}
+
 .phone-dynamic-island__actions--incoming {
-  min-width: 126px;
+  min-width: 98px;
   gap: 10px;
 }
 
+.phone-dynamic-island--timer .phone-dynamic-island__actions,
+.phone-dynamic-island--stopwatch .phone-dynamic-island__actions {
+  min-width: 94px;
+  justify-content: flex-start;
+  gap: 6px;
+  grid-column: 1;
+  grid-row: 1;
+}
+
+.phone-dynamic-island--timer .phone-dynamic-island__action,
+.phone-dynamic-island--stopwatch .phone-dynamic-island__action {
+  width: 44px;
+  height: 44px;
+}
+
+.phone-dynamic-island--timer .phone-dynamic-island__action--timer,
+.phone-dynamic-island--stopwatch .phone-dynamic-island__action--timer {
+  order: -1;
+  color: #ff9f0a;
+  background: #4a2d0b;
+}
+
 .phone-dynamic-island__action {
   display: grid;
   width: 44px;
@@ -1098,15 +1497,13 @@ onBeforeUnmount(() => {
 }
 
 .phone-dynamic-island__call-action {
-  display: flex;
-  width: 58px;
-  min-height: 64px;
-  padding: 4px 0 0;
-  align-items: center;
-  flex-direction: column;
-  gap: 4px;
+  display: grid;
+  width: 44px;
+  height: 44px;
+  padding: 0;
+  place-items: center;
+  border-radius: 50%;
   background: transparent;
-  font-size: 9px;
 }
 
 .phone-dynamic-island__call-action svg {
@@ -1124,11 +1521,6 @@ onBeforeUnmount(() => {
   background: #30d158;
 }
 
-.phone-dynamic-island__lap {
-  font-size: 13px;
-  font-weight: 750;
-}
-
 .phone-dynamic-island-enter-active,
 .phone-dynamic-island-leave-active {
   transition:
diff --git a/frontend/src/components/PhoneMemoRecorder.vue b/frontend/src/components/PhoneMemoRecorder.vue
index 67bb605..fd50ad2 100644
--- a/frontend/src/components/PhoneMemoRecorder.vue
+++ b/frontend/src/components/PhoneMemoRecorder.vue
@@ -54,6 +54,7 @@ let metadata: MemoRecordingMetadata = { note: '', pinned: false, title: '' }
 let currentState: MemoRecorderStateName = 'idle'
 let currentElapsedMs = 0
 let currentCorrelationId = ''
+let recordingDeviceImei = ''
 let removeRecorderErrorListener: (() => void) | null = null
 
 function postRecorderState(state: MemoRecorderStateName, error?: string): void {
@@ -153,6 +154,7 @@ function resetRecordingData(): void {
   pausedStartedAt = 0
   totalPausedMs = 0
   currentElapsedMs = 0
+  recordingDeviceImei = ''
   liveLevels = Array(LIVE_LEVEL_SAMPLES).fill(0.08)
 }
 
@@ -189,7 +191,8 @@ function failRecording(error: string, generation = recordingGeneration): void {
 }
 
 async function startRecording(data: Record<string, unknown>): Promise<void> {
-  if (!phone.isOpen) {
+  const deviceImei = phone.device?.imei
+  if (!phone.isOpen || !deviceImei) {
     console.error('[Memos] Cannot start a recording while the phone is closed.')
     return
   }
@@ -217,6 +220,7 @@ async function startRecording(data: Record<string, unknown>): Promise<void> {
   metadata = { note: '', pinned: false, title: '' }
   updateMetadata(data)
   resetRecordingData()
+  recordingDeviceImei = deviceImei
   postRecorderState('starting')
   try {
     const acquiredStream = await navigator.mediaDevices.getUserMedia({
@@ -340,6 +344,7 @@ async function stopRecording(data: Record<string, unknown>): Promise<void> {
     if (generation !== recordingGeneration) return
     const waveform = compressedWaveform()
     const finalMetadata = { ...metadata }
+    const finalDeviceImei = recordingDeviceImei
     const exceededSizeLimit = recordingTooLarge
     cleanupRecorder(false)
     resetRecordingData()
@@ -355,6 +360,7 @@ async function stopRecording(data: Record<string, unknown>): Promise<void> {
     liveLevels = waveform.slice(-LIVE_LEVEL_SAMPLES)
     const uploadData = {
       correlationId,
+      deviceImei: finalDeviceImei,
       durationMs,
       mimeType,
       note: finalMetadata.note,
@@ -569,18 +575,9 @@ function onMessage(event: MessageEvent): void {
 onMounted(() => window.addEventListener('message', onMessage))
 
 watch(
-  () =>
-    [
-      phone.isOpen,
-      phone.device?.imei ?? null,
-      phone.deviceSessionToken,
-    ] as const,
-  ([isOpen, imei, sessionToken], previous) => {
-    const deviceSessionChanged =
-      previous !== undefined &&
-      previous[0] &&
-      (previous[1] !== imei || previous[2] !== sessionToken)
-    if (!isOpen || deviceSessionChanged) cancelRecording()
+  () => phone.device?.imei ?? null,
+  (imei, previousImei) => {
+    if (previousImei && imei !== previousImei) cancelRecording()
   },
 )
 
diff --git a/frontend/src/features/games/memory/audio.ts b/frontend/src/features/games/memory/audio.ts
index 70a1e50..a54d6aa 100644
--- a/frontend/src/features/games/memory/audio.ts
+++ b/frontend/src/features/games/memory/audio.ts
@@ -1,3 +1,5 @@
+import { getPhoneOutputVolume } from '@/utils/phoneAudio'
+
 export type MemorySound = 'flip' | 'match' | 'mismatch' | 'win'
 
 type Tone = {
@@ -46,7 +48,10 @@ export function playMemorySound(sound: MemorySound, enabled: boolean): void {
     oscillator.type = tone.type
     oscillator.frequency.setValueAtTime(tone.frequency, start)
     gain.gain.setValueAtTime(0.0001, start)
-    gain.gain.exponentialRampToValueAtTime(tone.volume, start + 0.012)
+    gain.gain.exponentialRampToValueAtTime(
+      Math.max(0.0001, tone.volume * getPhoneOutputVolume()),
+      start + 0.012,
+    )
     gain.gain.exponentialRampToValueAtTime(0.0001, end)
     oscillator.connect(gain)
     gain.connect(audioContext.destination)
diff --git a/frontend/src/features/games/minesweeper/audio.ts b/frontend/src/features/games/minesweeper/audio.ts
index 46b3dce..9726cfd 100644
--- a/frontend/src/features/games/minesweeper/audio.ts
+++ b/frontend/src/features/games/minesweeper/audio.ts
@@ -1,3 +1,5 @@
+import { registerPhoneMediaElement } from '@/utils/phoneAudio'
+
 import flagUrl from '@/assets/audio/minesweeper/flag.wav?url'
 import clearUrl from '@/assets/audio/minesweeper/clear.wav?url'
 import mineUrl from '@/assets/audio/minesweeper/mine.wav?url'
@@ -28,7 +30,7 @@ function getPlayers(sound: MinesweeperSound): HTMLAudioElement[] {
   if (existing) return existing
 
   const players = Array.from({ length: 3 }, () => {
-    const player = new Audio(soundUrls[sound])
+    const player = registerPhoneMediaElement(new Audio(soundUrls[sound]))
     player.preload = 'auto'
     player.volume = 0.82
     return player
diff --git a/frontend/src/features/games/neon-drop/audio.ts b/frontend/src/features/games/neon-drop/audio.ts
index ffc132f..c3cf322 100644
--- a/frontend/src/features/games/neon-drop/audio.ts
+++ b/frontend/src/features/games/neon-drop/audio.ts
@@ -1,3 +1,5 @@
+import { getPhoneOutputVolume } from '@/utils/phoneAudio'
+
 export type NeonDropSound =
   | 'clear'
   | 'drop'
@@ -48,7 +50,10 @@ function playSequence(sound: NeonDropSound): void {
     oscillator.type = type
     oscillator.frequency.setValueAtTime(frequency, start + delay)
     gain.gain.setValueAtTime(0.0001, start + delay)
-    gain.gain.exponentialRampToValueAtTime(0.12, start + delay + 0.008)
+    gain.gain.exponentialRampToValueAtTime(
+      Math.max(0.0001, 0.12 * getPhoneOutputVolume()),
+      start + delay + 0.008,
+    )
     gain.gain.exponentialRampToValueAtTime(0.0001, start + delay + duration)
     oscillator.connect(gain)
     gain.connect(context.destination)
diff --git a/frontend/src/features/games/number-merge/audio.ts b/frontend/src/features/games/number-merge/audio.ts
index 23ab2f1..ca89ba3 100644
--- a/frontend/src/features/games/number-merge/audio.ts
+++ b/frontend/src/features/games/number-merge/audio.ts
@@ -1,3 +1,5 @@
+import { registerPhoneMediaElement } from '@/utils/phoneAudio'
+
 import gameOverUrl from '@/assets/audio/number-merge/game-over.wav?url'
 import mergeUrl from '@/assets/audio/number-merge/merge.wav?url'
 import moveUrl from '@/assets/audio/number-merge/move.wav?url'
@@ -18,7 +20,7 @@ function getPlayers(sound: NumberMergeSound): HTMLAudioElement[] {
   if (existing) return existing
 
   const players = Array.from({ length: 3 }, () => {
-    const player = new Audio(soundUrls[sound])
+    const player = registerPhoneMediaElement(new Audio(soundUrls[sound]))
     player.preload = 'auto'
     player.volume = 0.82
     return player
diff --git a/frontend/src/features/games/sky-flappy/audio.ts b/frontend/src/features/games/sky-flappy/audio.ts
index a8af227..40cb679 100644
--- a/frontend/src/features/games/sky-flappy/audio.ts
+++ b/frontend/src/features/games/sky-flappy/audio.ts
@@ -1,3 +1,5 @@
+import { registerPhoneMediaElement } from '@/utils/phoneAudio'
+
 import crashUrl from '@/assets/audio/sky-flappy/crash.wav?url'
 import flapUrl from '@/assets/audio/sky-flappy/flap.wav?url'
 import pointUrl from '@/assets/audio/sky-flappy/point.wav?url'
@@ -11,7 +13,7 @@ export function playSkyFlappySound(sound: SkyFlappySound, enabled: boolean): voi
   let players = pools.get(sound)
   if (!players) {
     players = Array.from({ length: 3 }, () => {
-      const player = new Audio(urls[sound])
+      const player = registerPhoneMediaElement(new Audio(urls[sound]))
       player.preload = 'auto'
       player.volume = 0.84
       return player
diff --git a/frontend/src/features/games/tower-stack/audio.ts b/frontend/src/features/games/tower-stack/audio.ts
index 5c9374f..d2c6e42 100644
--- a/frontend/src/features/games/tower-stack/audio.ts
+++ b/frontend/src/features/games/tower-stack/audio.ts
@@ -1,3 +1,5 @@
+import { registerPhoneMediaElement } from '@/utils/phoneAudio'
+
 import fallUrl from '@/assets/audio/tower-stack/fall.wav?url'
 import hitUrl from '@/assets/audio/tower-stack/hit.wav?url'
 import perfectUrl from '@/assets/audio/tower-stack/perfect.wav?url'
@@ -18,7 +20,7 @@ function getPlayers(sound: TowerStackSound): HTMLAudioElement[] {
   if (existing) return existing
 
   const players = Array.from({ length: 3 }, () => {
-    const player = new Audio(soundUrls[sound])
+    const player = registerPhoneMediaElement(new Audio(soundUrls[sound]))
     player.preload = 'auto'
     player.volume = 0.84
     return player
diff --git a/frontend/src/phoneAudio.contract.test.ts b/frontend/src/phoneAudio.contract.test.ts
new file mode 100644
index 0000000..f5ea468
--- /dev/null
+++ b/frontend/src/phoneAudio.contract.test.ts
@@ -0,0 +1,37 @@
+import { readFileSync } from 'node:fs'
+
+import { describe, expect, it } from 'vitest'
+
+const appSource = readFileSync(new URL('./App.vue', import.meta.url), 'utf8')
+const audioSource = readFileSync(
+  new URL('./utils/phoneAudio.ts', import.meta.url),
+  'utf8',
+)
+const mainCss = readFileSync(
+  new URL('./assets/main.css', import.meta.url),
+  'utf8',
+)
+const musicSource = readFileSync(
+  new URL('./stores/music.ts', import.meta.url),
+  'utf8',
+)
+
+describe('phone audio output contract', () => {
+  it('applies the hardware volume to app media and live YouTube playback', () => {
+    expect(appSource).toContain('installPhoneAudioController()')
+    expect(appSource).toContain('setPhoneOutputVolume(volume / 100)')
+    expect(appSource).toContain(
+      'if (radio.data.connected) void radio.setVolume(volume)',
+    )
+    expect(audioSource).toContain(
+      "document.addEventListener('play', onMediaPlay, true)",
+    )
+    expect(audioSource).toContain('localVolume * outputVolume')
+    expect(musicSource).toContain('registerPhoneMediaElement(new Audio())')
+    expect(musicSource).toContain('store.volume * getPhoneOutputVolume() * 100')
+  })
+
+  it('renders the hardware speaker symbol in grey', () => {
+    expect(mainCss).toMatch(/\.phone-volume-hud\s*\{[\s\S]*?color:\s*#a9abb2;/)
+  })
+})
diff --git a/frontend/src/phoneInventory.contract.test.ts b/frontend/src/phoneInventory.contract.test.ts
index d6e589c..9af37bd 100644
--- a/frontend/src/phoneInventory.contract.test.ts
+++ b/frontend/src/phoneInventory.contract.test.ts
@@ -3,7 +3,7 @@ import { readFileSync } from 'node:fs'
 import { describe, expect, it } from 'vitest'
 
 const readResourceFile = (path: string) =>
-  readFileSync(new URL(`../../sky_phone/${path}`, import.meta.url), 'utf8')
+  readFileSync(new URL(`../../sky_phone/${path}`, import.meta.url), 'utf8').replace(/\r\n/g, '\n')
 const readFrontendFile = (path: string) =>
   readFileSync(new URL(path, import.meta.url), 'utf8')
 
@@ -232,6 +232,22 @@ describe('phone inventory contracts', () => {
     )
   })
 
+  it('opens a running live activity with Space without affecting normal gameplay', () => {
+    const phoneClient = readResourceFile('source/client/main.lua')
+
+    expect(phoneClient).toContain(
+      'RegisterCommand("sky_phone_live_activity_open"',
+    )
+    expect(phoneClient).toContain(
+      'if not live_activity_active or is_open or open_requested then',
+    )
+    expect(phoneClient).toContain(
+      'RegisterKeyMapping(\n    "sky_phone_live_activity_open"',
+    )
+    expect(phoneClient).toContain('"SPACE"')
+    expect(phoneClient).toContain('RegisterNUICallback("ui:live-activity"')
+  })
+
   it('keeps a server-selected unique handset as the preferred hotkey device', () => {
     const phoneServer = readResourceFile('source/server/phone.lua')
 
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index e48ea1a..c168ca0 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -15,6 +15,12 @@ const developmentRoutes: RouteRecordRaw[] = import.meta.env.DEV
         name: 'development-sky-ui',
         path: '/development/sky-ui/:demo?',
       },
+      {
+        component: () =>
+          import('@/views/development/PhoneDynamicIslandGallery.vue'),
+        name: 'development-dynamic-islands',
+        path: '/development/dynamic-islands',
+      },
     ]
   : []
 
diff --git a/frontend/src/stores/app-store.test.ts b/frontend/src/stores/app-store.test.ts
index f65e70f..47c414f 100644
--- a/frontend/src/stores/app-store.test.ts
+++ b/frontend/src/stores/app-store.test.ts
@@ -64,6 +64,41 @@ describe('app store', () => {
     expect(apps.isInstalled('snake')).toBe(false)
     expect(apps.isInstalled('health')).toBe(true)
     expect(apps.isInstalled('citywarn')).toBe(true)
+    expect(apps.homeLayout.dock).toEqual([
+      'phone',
+      'messages',
+      'camera',
+      'clock',
+    ])
+    for (const dockAppId of ['phone', 'messages', 'camera', 'clock']) {
+      expect(apps.homeLayout.grid).not.toContain(dockAppId)
+    }
+  })
+
+  it('migrates current layouts so dock apps are not repeated in the grid', () => {
+    const apps = useAppStoreStore()
+
+    apps.hydrate({
+      homeLayout: {
+        dock: ['phone', 'messages', 'camera', 'clock'],
+        grid: ['phone', 'messages', 'calculator', 'camera', 'clock'],
+        hidden: [],
+        pageCount: 1,
+        version: HOME_LAYOUT_VERSION,
+      },
+    })
+
+    expect(apps.homeLayout.dock).toEqual([
+      'phone',
+      'messages',
+      'camera',
+      'clock',
+    ])
+    for (const dockAppId of ['phone', 'messages', 'camera', 'clock']) {
+      expect(apps.homeLayout.grid).not.toContain(dockAppId)
+    }
+    expect(apps.homeLayout.grid).toContain('calculator')
+    expect(mocks.phone.saveDeviceNamespace).toHaveBeenCalledTimes(1)
   })
 
   it('removes old automatic apps unless the player installed them', () => {
@@ -320,7 +355,7 @@ describe('app store', () => {
     const apps = useAppStoreStore()
     apps.hydrate(null)
     mocks.phone.saveDeviceNamespace.mockClear()
-    const sourceIndex = apps.homeLayout.grid.indexOf('phone')
+    const sourceIndex = apps.homeLayout.grid.indexOf('calculator')
     expect(sourceIndex).toBeGreaterThanOrEqual(0)
 
     expect(
@@ -329,7 +364,7 @@ describe('app store', () => {
         HOME_GRID_PAGE_SIZE,
       ]),
     ).toBe(true)
-    expect(apps.homeLayout.grid[HOME_GRID_PAGE_SIZE]).toBe('phone')
+    expect(apps.homeLayout.grid[HOME_GRID_PAGE_SIZE]).toBe('calculator')
     expect(mocks.phone.saveDeviceNamespace).toHaveBeenCalledTimes(1)
   })
 
@@ -386,18 +421,18 @@ describe('app store', () => {
     mocks.phone.saveDeviceNamespace.mockClear()
 
     const notesIndex = apps.homeLayout.grid.indexOf('notes')
-    const clockIndex = apps.homeLayout.grid.indexOf('clock')
+    const settingsIndex = apps.homeLayout.grid.indexOf('settings')
     const folderId = apps.createHomeFolder(
       'grid',
       notesIndex,
       'grid',
-      clockIndex,
+      settingsIndex,
       'Utilities',
     )
 
     expect(folderId).toBeTruthy()
     expect(getHomeFolder(apps.homeLayout, folderId!)?.apps).toEqual([
-      'clock',
+      'settings',
       'notes',
     ])
     const mailIndex = apps.homeLayout.grid.indexOf('mail')
@@ -405,7 +440,7 @@ describe('app store', () => {
     apps.moveHomeFolderApp(folderId!, 2, 0)
     apps.renameHomeFolder(folderId!, 'Work')
     expect(getHomeFolder(apps.homeLayout, folderId!)).toMatchObject({
-      apps: ['mail', 'notes', 'clock'],
+      apps: ['mail', 'notes', 'settings'],
       name: 'Work',
     })
 
diff --git a/frontend/src/stores/app-store.ts b/frontend/src/stores/app-store.ts
index 6c4a63f..990799d 100644
--- a/frontend/src/stores/app-store.ts
+++ b/frontend/src/stores/app-store.ts
@@ -25,6 +25,7 @@ import {
   parseHomeLayout,
   reflowHomeGridForWidgetChange,
   renameHomeFolder,
+  removeDockGridDuplicates,
   removeHomeApp,
   restoreHomeApp,
   type HomeArea,
@@ -45,7 +46,7 @@ const pendingInstallations = new WeakMap<
 >()
 
 function getDefaultGridIds(): LaunchablePhoneAppId[] {
-  return [...PHONE_APPS]
+  return PHONE_APPS.filter((app) => app.dockOrder === null)
     .sort((a, b) => a.gridOrder - b.gridOrder)
     .map((app) => app.id)
 }
@@ -263,12 +264,16 @@ export const useAppStoreStore = defineStore('app-store', {
         getDefaultGridIds(),
         getDefaultDockIds(),
       )
-      this.homeLayout = parseHomeLayout(
+      const parsedHomeLayout = parseHomeLayout(
         data?.homeLayout,
         defaults,
         installedIds,
         false,
       )
+      const normalizedHomeLayout = removeDockGridDuplicates(parsedHomeLayout)
+      const removedDockGridDuplicates =
+        normalizedHomeLayout !== parsedHomeLayout
+      this.homeLayout = normalizedHomeLayout
       const protectedHiddenAppIds =
         this.homeLayout.hidden.filter(isProtectedHomeApp)
       for (const appId of protectedHiddenAppIds) {
@@ -292,6 +297,7 @@ export const useAppStoreStore = defineStore('app-store', {
       this.hydrated = true
       if (
         protectedHiddenAppIds.length ||
+        removedDockGridDuplicates ||
         removedLegacyDefaults ||
         layoutVersion === 2 ||
         layoutVersion === 3 ||
@@ -320,11 +326,8 @@ export const useAppStoreStore = defineStore('app-store', {
         getDefaultDockIds(),
       )
       const previous = JSON.stringify(this.homeLayout)
-      this.homeLayout = parseHomeLayout(
-        this.homeLayout,
-        defaults,
-        installedIds,
-        false,
+      this.homeLayout = removeDockGridDuplicates(
+        parseHomeLayout(this.homeLayout, defaults, installedIds, false),
       )
 
       for (const appId of [...this.homeLayout.hidden]) {
diff --git a/frontend/src/stores/music.ts b/frontend/src/stores/music.ts
index 5aba534..38187a0 100644
--- a/frontend/src/stores/music.ts
+++ b/frontend/src/stores/music.ts
@@ -7,6 +7,11 @@ import type {
   MusicTrack,
 } from '@/types/music'
 import { nuiCall } from '@/utils/nui'
+import {
+  getPhoneOutputVolume,
+  registerPhoneMediaElement,
+  subscribePhoneOutputVolume,
+} from '@/utils/phoneAudio'
 
 export type YouTubePlayer = {
   destroy: () => void
@@ -48,7 +53,7 @@ declare global {
   }
 }
 
-const audio = new Audio()
+const audio = registerPhoneMediaElement(new Audio())
 audio.preload = 'auto'
 const YOUTUBE_API_TIMEOUT_MS = 12000
 let audioBound = false
@@ -59,6 +64,11 @@ let youtubeApiPromise: Promise<YouTubeApi> | null = null
 let youtubePlayer: YouTubePlayer | null = null
 let youtubeProgressTimer: number | null = null
 
+subscribePhoneOutputVolume((volume) => {
+  const localVolume = useMusicStore().volume
+  youtubePlayer?.setVolume(localVolume * volume * 100)
+})
+
 export function musicTrackKey(
   track: Pick<MusicTrack, 'id' | 'source'>,
 ): string {
@@ -276,7 +286,7 @@ async function loadYouTubeTrack(videoId: string): Promise<void> {
   const api = await loadYouTubeApi()
   const store = useMusicStore()
   if (youtubePlayer) {
-    youtubePlayer.setVolume(store.volume * 100)
+    youtubePlayer.setVolume(store.volume * getPhoneOutputVolume() * 100)
     youtubePlayer.loadVideoById(videoId)
     youtubePlayer.playVideo()
     startYoutubeProgress()
@@ -319,7 +329,9 @@ async function loadYouTubeTrack(videoId: string): Promise<void> {
         },
         onReady: (event) => {
           youtubePlayer = event.target
-          event.target.setVolume(useMusicStore().volume * 100)
+          event.target.setVolume(
+            useMusicStore().volume * getPhoneOutputVolume() * 100,
+          )
           event.target.playVideo()
           startYoutubeProgress()
           resolve()
@@ -554,7 +566,7 @@ export const useMusicStore = defineStore('music', {
     setVolume(value: number): void {
       this.volume = Math.max(0, Math.min(1, value))
       audio.volume = this.volume
-      youtubePlayer?.setVolume(this.volume * 100)
+      youtubePlayer?.setVolume(this.volume * getPhoneOutputVolume() * 100)
     },
     stop(): void {
       stopActiveMedia()
diff --git a/frontend/src/types/dynamicIsland.ts b/frontend/src/types/dynamicIsland.ts
new file mode 100644
index 0000000..9f12011
--- /dev/null
+++ b/frontend/src/types/dynamicIsland.ts
@@ -0,0 +1,7 @@
+export type DynamicIslandActivity =
+  | 'call'
+  | 'incoming-call'
+  | 'music'
+  | 'recording'
+  | 'stopwatch'
+  | 'timer'
diff --git a/frontend/src/utils/homeLayout.test.ts b/frontend/src/utils/homeLayout.test.ts
index ee7e058..8222d44 100644
--- a/frontend/src/utils/homeLayout.test.ts
+++ b/frontend/src/utils/homeLayout.test.ts
@@ -21,6 +21,7 @@ import {
   moveHomeFolderApp,
   parseHomeLayout,
   reflowHomeGridForWidgetChange,
+  removeDockGridDuplicates,
   removeHomeApp,
   renameHomeFolder,
   restoreHomeApp,
@@ -78,6 +79,40 @@ describe('home layout', () => {
     expect(layout.version).toBe(HOME_LAYOUT_VERSION)
   })
 
+  it('removes dock apps from the grid and normalizes affected folders', () => {
+    const layout: HomeLayout = {
+      ...defaults,
+      dock: [
+        'phone',
+        {
+          apps: ['messages', 'mail'],
+          id: 'folder-abcdef',
+          name: 'Dock',
+          type: 'folder',
+        },
+        null,
+        null,
+      ],
+      grid: [
+        'phone',
+        {
+          apps: ['messages', 'notes'],
+          id: 'folder-ghijkl',
+          name: 'Grid',
+          type: 'folder',
+        },
+        'mail',
+        'clock',
+        ...Array.from({ length: HOME_GRID_PAGE_SIZE - 4 }, () => null),
+      ],
+    }
+
+    const normalized = removeDockGridDuplicates(layout)
+
+    expect(normalized.grid.slice(0, 3)).toEqual(['notes', 'clock', null])
+    expect(normalized.dock).toEqual(layout.dock)
+  })
+
   it('migrates compact persisted arrays and appends newly installed apps', () => {
     const layout = parseHomeLayout(
       {
diff --git a/frontend/src/utils/homeLayout.ts b/frontend/src/utils/homeLayout.ts
index a9b3ac9..abc5411 100644
--- a/frontend/src/utils/homeLayout.ts
+++ b/frontend/src/utils/homeLayout.ts
@@ -505,6 +505,37 @@ export function createDefaultHomeLayout(
   }
 }
 
+export function removeDockGridDuplicates(layout: HomeLayout): HomeLayout {
+  const dockAppIds = new Set<LaunchablePhoneAppId>()
+  for (const item of layout.dock) {
+    if (typeof item === 'string') dockAppIds.add(item)
+    if (isHomeFolder(item)) {
+      for (const appId of item.apps) dockAppIds.add(appId)
+    }
+  }
+  if (!dockAppIds.size) return layout
+
+  let changed = false
+  const grid = layout.grid.map((item): HomeSlot => {
+    if (typeof item === 'string') {
+      if (!dockAppIds.has(item)) return item
+      changed = true
+      return null
+    }
+    if (!isHomeFolder(item)) return null
+
+    const apps = item.apps.filter((appId) => !dockAppIds.has(appId))
+    if (apps.length === item.apps.length) return cloneItem(item)
+    changed = true
+    return normalizeFolder({ ...item, apps })
+  })
+  if (!changed) return layout
+
+  const next = cloneLayout(layout)
+  next.grid = compactGridPages(grid)
+  return next
+}
+
 export function parseHomeLayout(
   value: unknown,
   defaults: HomeLayout,
diff --git a/frontend/src/utils/phoneAudio.ts b/frontend/src/utils/phoneAudio.ts
new file mode 100644
index 0000000..d399954
--- /dev/null
+++ b/frontend/src/utils/phoneAudio.ts
@@ -0,0 +1,96 @@
+type PhoneAudioVolumeListener = (volume: number) => void
+
+const mediaElements = new Map<HTMLMediaElement, boolean>()
+const mediaLocalVolumes = new WeakMap<HTMLMediaElement, number>()
+const volumeListeners = new Set<PhoneAudioVolumeListener>()
+
+let documentListenerReferences = 0
+let outputVolume = 1
+
+function clampVolume(volume: number): number {
+  return Math.max(0, Math.min(1, Number.isFinite(volume) ? volume : 0))
+}
+
+function applyMediaVolume(element: HTMLMediaElement): void {
+  const localVolume = mediaLocalVolumes.get(element) ?? element.volume
+  const nextVolume = clampVolume(localVolume * outputVolume)
+  if (Math.abs(element.volume - nextVolume) < 0.001) return
+  element.volume = nextVolume
+}
+
+function onMediaVolumeChange(event: Event): void {
+  const element = event.currentTarget as HTMLMediaElement
+  const currentLocalVolume = mediaLocalVolumes.get(element) ?? element.volume
+  const expectedVolume = clampVolume(currentLocalVolume * outputVolume)
+  if (Math.abs(element.volume - expectedVolume) < 0.001) return
+  mediaLocalVolumes.set(element, clampVolume(element.volume))
+  applyMediaVolume(element)
+}
+
+function onMediaPlay(event: Event): void {
+  if (event.target instanceof HTMLMediaElement) {
+    trackPhoneMediaElement(event.target, false)
+  }
+}
+
+function trackPhoneMediaElement<T extends HTMLMediaElement>(
+  element: T,
+  persistent: boolean,
+): T {
+  if (mediaElements.has(element)) {
+    if (persistent) mediaElements.set(element, true)
+    return element
+  }
+  mediaElements.set(element, persistent)
+  mediaLocalVolumes.set(element, clampVolume(element.volume))
+  element.addEventListener('volumechange', onMediaVolumeChange)
+  applyMediaVolume(element)
+  return element
+}
+
+export function getPhoneOutputVolume(): number {
+  return outputVolume
+}
+
+export function installPhoneAudioController(): () => void {
+  documentListenerReferences += 1
+  if (documentListenerReferences === 1) {
+    document.addEventListener('play', onMediaPlay, true)
+    document
+      .querySelectorAll<HTMLMediaElement>('audio, video')
+      .forEach((element) => trackPhoneMediaElement(element, false))
+  }
+
+  return () => {
+    documentListenerReferences = Math.max(0, documentListenerReferences - 1)
+    if (documentListenerReferences === 0) {
+      document.removeEventListener('play', onMediaPlay, true)
+    }
+  }
+}
+
+export function registerPhoneMediaElement<T extends HTMLMediaElement>(
+  element: T,
+): T {
+  return trackPhoneMediaElement(element, true)
+}
+
+export function setPhoneOutputVolume(volume: number): void {
+  outputVolume = clampVolume(volume)
+  for (const [element, persistent] of mediaElements) {
+    if (!persistent && !element.isConnected && element.paused) {
+      element.removeEventListener('volumechange', onMediaVolumeChange)
+      mediaElements.delete(element)
+      continue
+    }
+    applyMediaVolume(element)
+  }
+  for (const listener of volumeListeners) listener(outputVolume)
+}
+
+export function subscribePhoneOutputVolume(
+  listener: PhoneAudioVolumeListener,
+): () => void {
+  volumeListeners.add(listener)
+  return () => volumeListeners.delete(listener)
+}
diff --git a/frontend/src/utils/tones.test.ts b/frontend/src/utils/tones.test.ts
index 24cd5f6..a45536c 100644
--- a/frontend/src/utils/tones.test.ts
+++ b/frontend/src/utils/tones.test.ts
@@ -32,7 +32,7 @@ describe('phone tones', () => {
       }> = []
       vi.stubGlobal(
         'Audio',
-        class {
+        class extends EventTarget {
           currentTime = 7
           loop = false
           pause = pause
@@ -42,6 +42,7 @@ describe('phone tones', () => {
           volume = 0
 
           constructor(src: string) {
+            super()
             this.src = src
             players.push(this)
           }
diff --git a/frontend/src/utils/tones.ts b/frontend/src/utils/tones.ts
index f6f13c3..d22cad9 100644
--- a/frontend/src/utils/tones.ts
+++ b/frontend/src/utils/tones.ts
@@ -1,3 +1,4 @@
+import { registerPhoneMediaElement } from '@/utils/phoneAudio'
 import type { AlarmSoundId } from '@/utils/alarms'
 import type { NotificationSoundId } from '@/utils/preferences'
 
@@ -495,8 +496,8 @@ export function playPhoneVibration(
   kind: PhoneVibrationKind,
   loop: boolean,
 ): () => void {
-  const player = new Audio(
-    `${import.meta.env.BASE_URL}${VIBRATION_SOUND_PATHS[kind]}`,
+  const player = registerPhoneMediaElement(
+    new Audio(`${import.meta.env.BASE_URL}${VIBRATION_SOUND_PATHS[kind]}`),
   )
   let stopped = false
   player.loop = loop
diff --git a/frontend/src/views/apps/FlipTokApp.vue b/frontend/src/views/apps/FlipTokApp.vue
index e089523..42cc360 100644
--- a/frontend/src/views/apps/FlipTokApp.vue
+++ b/frontend/src/views/apps/FlipTokApp.vue
@@ -77,6 +77,10 @@ import {
   SkyToggle,
 } from '@/ui'
 import { nuiCall } from '@/utils/nui'
+import {
+  getPhoneOutputVolume,
+  subscribePhoneOutputVolume,
+} from '@/utils/phoneAudio'
 
 type Tab = 'feed' | 'discover' | 'create' | 'activity' | 'profile'
 type AuthMode = 'login' | 'register'
@@ -194,6 +198,8 @@ let flipTokYoutubePlayer: YouTubePlayer | null = null
 let flipTokYoutubeApi: YouTubeApi | null = null
 let flipTokYoutubeOwner = ''
 let flipTokYoutubeVideoId = ''
+let flipTokYoutubeVolume = 0
+let removePhoneOutputVolumeListener: (() => void) | undefined
 let observer: IntersectionObserver | null = null
 let videoClickTimer: number | null = null
 let likePulseTimer: number | null = null
@@ -786,6 +792,7 @@ async function playFlipTokYoutube(
   seconds = 0,
 ): Promise<void> {
   flipTokYoutubeOwner = owner
+  flipTokYoutubeVolume = volume
   try {
     const api = await loadYouTubeApi()
     flipTokYoutubeApi = api
@@ -794,7 +801,7 @@ async function playFlipTokYoutube(
         flipTokYoutubeVideoId = videoId
         flipTokYoutubePlayer.loadVideoById(videoId)
       }
-      flipTokYoutubePlayer.setVolume(volume)
+      flipTokYoutubePlayer.setVolume(volume * getPhoneOutputVolume())
       flipTokYoutubePlayer.seekTo(Math.max(0, seconds), true)
       flipTokYoutubePlayer.playVideo()
       if (owner === 'composer') customMusicLoadFailed.value = false
@@ -835,7 +842,7 @@ async function playFlipTokYoutube(
           },
           onReady: (event) => {
             flipTokYoutubePlayer = event.target
-            event.target.setVolume(volume)
+            event.target.setVolume(volume * getPhoneOutputVolume())
             event.target.seekTo(Math.max(0, seconds), true)
             event.target.playVideo()
             if (owner === 'composer') customMusicLoadFailed.value = false
@@ -1627,7 +1634,10 @@ watch(originalVolume, (value) => {
 
 watch(musicVolume, (value) => {
   if (composerMusic.value) composerMusic.value.volume = value / 100
-  if (flipTokYoutubeOwner === 'composer') flipTokYoutubePlayer?.setVolume(value)
+  if (flipTokYoutubeOwner === 'composer') {
+    flipTokYoutubeVolume = value
+    flipTokYoutubePlayer?.setVolume(value * getPhoneOutputVolume())
+  }
 })
 
 watch(
@@ -1655,6 +1665,9 @@ watch(
 )
 
 onMounted(async () => {
+  removePhoneOutputVolumeListener = subscribePhoneOutputVolume((volume) => {
+    flipTokYoutubePlayer?.setVolume(flipTokYoutubeVolume * volume)
+  })
   const profileSelection = messageMedia.consumeMany<ProfileMediaContext>(
     'fliptok:profile-avatar',
   )
@@ -1731,6 +1744,7 @@ onMounted(async () => {
 })
 
 onBeforeUnmount(() => {
+  removePhoneOutputVolumeListener?.()
   observer?.disconnect()
   if (videoClickTimer !== null) window.clearTimeout(videoClickTimer)
   if (likePulseTimer !== null) window.clearTimeout(likePulseTimer)
diff --git a/frontend/src/views/development/PhoneDynamicIslandGallery.contract.test.ts b/frontend/src/views/development/PhoneDynamicIslandGallery.contract.test.ts
new file mode 100644
index 0000000..3ee94c5
--- /dev/null
+++ b/frontend/src/views/development/PhoneDynamicIslandGallery.contract.test.ts
@@ -0,0 +1,70 @@
+import { readFileSync } from 'node:fs'
+
+import { describe, expect, it } from 'vitest'
+
+const gallerySource = readFileSync(
+  new URL('./PhoneDynamicIslandGallery.vue', import.meta.url),
+  'utf8',
+)
+const islandSource = readFileSync(
+  new URL('../../components/PhoneDynamicIsland.vue', import.meta.url),
+  'utf8',
+)
+const appSource = readFileSync(
+  new URL('../../App.vue', import.meta.url),
+  'utf8',
+)
+const routerSource = readFileSync(
+  new URL('../../router/index.ts', import.meta.url),
+  'utf8',
+)
+
+describe('Dynamic Island development gallery contract', () => {
+  it('shows every runtime activity and both supported presentation sizes', () => {
+    for (const activity of [
+      'incoming-call',
+      'call',
+      'music',
+      'recording',
+      'timer',
+      'stopwatch',
+    ]) {
+      expect(gallerySource).toContain(`activity: '${activity}'`)
+    }
+    expect(gallerySource).toContain("label: 'Compact'")
+    expect(gallerySource).toContain("label: 'Expanded'")
+    expect(
+      gallerySource.match(
+        /activity: '(?:incoming-call|call|music|recording|timer|stopwatch)'/g,
+      ),
+    ).toHaveLength(11)
+  })
+
+  it('uses the production component with inert preview data', () => {
+    expect(gallerySource).toContain('<PhoneDynamicIsland')
+    expect(gallerySource).toContain(':preview-activity="variant.activity"')
+    expect(islandSource).toContain('previewActivity?: DynamicIslandActivity')
+    expect(islandSource).toContain(
+      ':data-preview="props.preview ? \'true\' : undefined"',
+    )
+    expect(islandSource).toContain(".phone-dynamic-island[data-preview='true']")
+    expect(gallerySource).toMatch(
+      /\.dynamic-island-gallery__stage\s*\{[^}]*width:\s*100%;/s,
+    )
+    expect(gallerySource).toMatch(
+      /dynamic-island-gallery__preview\.phone-dynamic-island[\s\S]*?max-width:\s*calc\(100% - 12px\);/,
+    )
+  })
+
+  it('keeps the gallery development-only and hides the live island above it', () => {
+    expect(routerSource).toContain("name: 'development-dynamic-islands'")
+    expect(routerSource).toContain("path: '/development/dynamic-islands'")
+    expect(routerSource).toMatch(
+      /const developmentRoutes[^=]*=\s*import\.meta\.env\.DEV/,
+    )
+    expect(appSource).toContain("route.name === 'development-dynamic-islands'")
+    expect(appSource).toContain(
+      'v-if="!setupRequired && !isDynamicIslandGalleryRoute"',
+    )
+  })
+})
diff --git a/frontend/src/views/development/PhoneDynamicIslandGallery.vue b/frontend/src/views/development/PhoneDynamicIslandGallery.vue
new file mode 100644
index 0000000..d7749dd
--- /dev/null
+++ b/frontend/src/views/development/PhoneDynamicIslandGallery.vue
@@ -0,0 +1,303 @@
+<script setup lang="ts">
+import PhoneDynamicIsland from '@/components/PhoneDynamicIsland.vue'
+import type { DynamicIslandActivity } from '@/types/dynamicIsland'
+
+type GalleryVariant = {
+  activity: DynamicIslandActivity
+  expanded: boolean
+  eyebrow: string
+  label: string
+  progress?: number
+  subtitle: string
+  title: string
+  value: string
+}
+
+type GalleryGroup = {
+  label: string
+  variants: GalleryVariant[]
+}
+
+const galleryGroups: GalleryGroup[] = [
+  {
+    label: 'Incoming call',
+    variants: [
+      {
+        activity: 'incoming-call',
+        expanded: true,
+        eyebrow: 'Incoming call',
+        label: 'Expanded',
+        subtitle: 'mobile',
+        title: 'Tania Castillo',
+        value: 'Incoming',
+      },
+    ],
+  },
+  {
+    label: 'Active call',
+    variants: [
+      {
+        activity: 'call',
+        expanded: false,
+        eyebrow: 'Connected',
+        label: 'Compact',
+        subtitle: '00:42',
+        title: 'Alex Rivera',
+        value: '00:42',
+      },
+      {
+        activity: 'call',
+        expanded: true,
+        eyebrow: 'Connected',
+        label: 'Expanded',
+        subtitle: '00:42',
+        title: 'Alex Rivera',
+        value: '00:42',
+      },
+    ],
+  },
+  {
+    label: 'Music',
+    variants: [
+      {
+        activity: 'music',
+        expanded: false,
+        eyebrow: 'Now Playing',
+        label: 'Compact',
+        progress: 0.64,
+        subtitle: 'Los Santos Radio',
+        title: 'Night Drive',
+        value: 'Night Drive',
+      },
+      {
+        activity: 'music',
+        expanded: true,
+        eyebrow: 'Now Playing',
+        label: 'Expanded',
+        progress: 0.64,
+        subtitle: 'Los Santos Radio',
+        title: 'Night Drive',
+        value: 'Night Drive',
+      },
+    ],
+  },
+  {
+    label: 'Voice recording',
+    variants: [
+      {
+        activity: 'recording',
+        expanded: false,
+        eyebrow: 'Recording',
+        label: 'Compact',
+        subtitle: 'Voice memo',
+        title: '00:37',
+        value: '00:37',
+      },
+      {
+        activity: 'recording',
+        expanded: true,
+        eyebrow: 'Recording',
+        label: 'Expanded',
+        subtitle: 'Voice memo',
+        title: '00:37',
+        value: '00:37',
+      },
+    ],
+  },
+  {
+    label: 'Timer',
+    variants: [
+      {
+        activity: 'timer',
+        expanded: false,
+        eyebrow: 'Timer',
+        label: 'Compact',
+        progress: 0.47,
+        subtitle: '',
+        title: '0:21',
+        value: '0:21',
+      },
+      {
+        activity: 'timer',
+        expanded: true,
+        eyebrow: 'Timer',
+        label: 'Expanded',
+        progress: 0.47,
+        subtitle: '',
+        title: '0:21',
+        value: '0:21',
+      },
+    ],
+  },
+  {
+    label: 'Stopwatch',
+    variants: [
+      {
+        activity: 'stopwatch',
+        expanded: false,
+        eyebrow: 'Stopwatch',
+        label: 'Compact',
+        subtitle: '',
+        title: '00:11,48',
+        value: '00:11,48',
+      },
+      {
+        activity: 'stopwatch',
+        expanded: true,
+        eyebrow: 'Stopwatch',
+        label: 'Expanded',
+        subtitle: '',
+        title: '00:11,48',
+        value: '00:11,48',
+      },
+    ],
+  },
+]
+</script>
+
+<template>
+  <main class="dynamic-island-gallery">
+    <header class="dynamic-island-gallery__header">
+      <span>Development preview</span>
+      <h1>Dynamic Islands</h1>
+      <p>Every runtime activity in its supported compact and expanded state.</p>
+    </header>
+
+    <section
+      v-for="group in galleryGroups"
+      :key="group.label"
+      class="dynamic-island-gallery__group"
+    >
+      <h2>{{ group.label }}</h2>
+      <article
+        v-for="variant in group.variants"
+        :key="`${variant.activity}-${variant.label}`"
+        class="dynamic-island-gallery__variant"
+      >
+        <span>{{ variant.label }}</span>
+        <div
+          class="dynamic-island-gallery__stage"
+          :class="{
+            'dynamic-island-gallery__stage--expanded': variant.expanded,
+          }"
+        >
+          <PhoneDynamicIsland
+            class="dynamic-island-gallery__preview"
+            preview
+            :preview-activity="variant.activity"
+            :preview-expanded="variant.expanded"
+            :preview-eyebrow="variant.eyebrow"
+            :preview-progress="variant.progress"
+            :preview-subtitle="variant.subtitle"
+            :preview-title="variant.title"
+            :preview-value="variant.value"
+          />
+        </div>
+      </article>
+    </section>
+  </main>
+</template>
+
+<style scoped>
+.dynamic-island-gallery {
+  position: absolute;
+  z-index: 2;
+  inset: 0;
+  overflow-y: auto;
+  padding: 58px 6px 32px;
+  color: #f7f7fb;
+  background:
+    radial-gradient(circle at 50% 0%, rgb(96 75 180 / 22%), transparent 30%),
+    linear-gradient(180deg, #111116 0%, #070709 100%);
+  scrollbar-width: none;
+}
+
+.dynamic-island-gallery::-webkit-scrollbar {
+  display: none;
+}
+
+.dynamic-island-gallery__header,
+.dynamic-island-gallery__group {
+  width: 100%;
+  max-width: 356px;
+  margin-inline: auto;
+}
+
+.dynamic-island-gallery__header {
+  padding: 4px 8px 18px;
+}
+
+.dynamic-island-gallery__header span,
+.dynamic-island-gallery__variant > span {
+  color: #a7a7b3;
+  font-size: 11px;
+  font-weight: 650;
+  letter-spacing: 0.55px;
+  text-transform: uppercase;
+}
+
+.dynamic-island-gallery__header h1 {
+  margin: 4px 0 5px;
+  font-size: 28px;
+  letter-spacing: -0.8px;
+}
+
+.dynamic-island-gallery__header p {
+  margin: 0;
+  color: #b6b6c2;
+  font-size: 12px;
+  line-height: 17px;
+}
+
+.dynamic-island-gallery__group {
+  padding: 14px 0 18px;
+  border-top: 1px solid rgb(255 255 255 / 9%);
+}
+
+.dynamic-island-gallery__group h2 {
+  margin: 0 8px 10px;
+  font-size: 15px;
+  letter-spacing: -0.2px;
+}
+
+.dynamic-island-gallery__variant + .dynamic-island-gallery__variant {
+  margin-top: 10px;
+}
+
+.dynamic-island-gallery__variant > span {
+  display: block;
+  margin: 0 10px 5px;
+  font-size: 9px;
+}
+
+.dynamic-island-gallery__stage {
+  display: grid;
+  width: 100%;
+  min-height: 72px;
+  overflow: hidden;
+  place-items: center;
+  border: 1px solid rgb(255 255 255 / 8%);
+  border-radius: 30px;
+  background:
+    radial-gradient(circle at 70% 15%, rgb(93 89 255 / 24%), transparent 34%),
+    #1a1a22;
+}
+
+.dynamic-island-gallery__stage--expanded {
+  min-height: 142px;
+}
+
+:deep(.dynamic-island-gallery__preview.phone-dynamic-island) {
+  position: relative;
+  top: auto;
+  left: auto;
+  max-width: calc(100% - 12px);
+  transform: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .dynamic-island-gallery {
+    scroll-behavior: auto;
+  }
+}
+</style>
diff --git a/frontend/src/views/development/SkyUiKitchenSinkView.contract.test.ts b/frontend/src/views/development/SkyUiKitchenSinkView.contract.test.ts
index 1f190e1..fe5e302 100644
--- a/frontend/src/views/development/SkyUiKitchenSinkView.contract.test.ts
+++ b/frontend/src/views/development/SkyUiKitchenSinkView.contract.test.ts
@@ -229,9 +229,7 @@ describe('development Sky UI Kitchen Sink contract', () => {
       /const developmentRoutes[^=]*=\s*import\.meta\.env\.DEV[\s\S]*?import\('@\/views\/development\/SkyUiKitchenSinkView\.vue'\)/,
     )
     expect(routerSource).toContain("name: 'development-sky-ui'")
-    expect(appSource).toContain(
-      "isDevelopment && route.name === 'development-sky-ui'",
-    )
+    expect(appSource).toContain("route.name === 'development-sky-ui'")
     expect(appSource).toContain(
       'isDevelopmentRoute ? String(route.name) : route.path',
     )
diff --git a/frontend/testserver/index.cjs b/frontend/testserver/index.cjs
index a829646..f89ceb9 100644
--- a/frontend/testserver/index.cjs
+++ b/frontend/testserver/index.cjs
@@ -23,6 +23,7 @@ const lifecycleEndpoints = new Set([
   'notification:focus',
   'sim:picker-close',
   'ui:input-focus',
+  'ui:live-activity',
   'ui:opened',
   'ui:ready',
 ])
diff --git a/frontend/testserver/smoke.cjs b/frontend/testserver/smoke.cjs
index 782f746..5a0a574 100644
--- a/frontend/testserver/smoke.cjs
+++ b/frontend/testserver/smoke.cjs
@@ -1157,6 +1157,7 @@ async function main() {
       'notification:focus',
       'sim:picker-close',
       'ui:input-focus',
+      'ui:live-activity',
       'ui:opened',
       'ui:ready',
     ]
diff --git a/sky_phone/source/client/main.lua b/sky_phone/source/client/main.lua
index 0eea389..42bf0e2 100644
--- a/sky_phone/source/client/main.lua
+++ b/sky_phone/source/client/main.lua
@@ -6,6 +6,8 @@ local open_without_focus = false
 local device_payload = nil
 local equipped_phone_number = nil
 local nui_generation = 0
+local live_activity_active = false
+local open_home_requested = false
 
 local function get_equipped_phone_number()
     if not device_payload or not device_payload.device.sim then
@@ -75,7 +77,9 @@ local function send_open_message()
     SendNUIMessage({
         type = "app:open",
         data = payload,
+        openHome = open_home_requested,
     })
+    open_home_requested = false
 end
 
 local function open_phone()
@@ -169,6 +173,25 @@ RegisterCommand("sky_phone_toggle", function()
     Bridge.Callbacks.Trigger("sky_phone:device:open-request", {})
 end, false)
 
+RegisterCommand("sky_phone_live_activity_open", function()
+    if not live_activity_active or is_open or open_requested then
+        return
+    end
+
+    open_home_requested = true
+    local result = Bridge.Callbacks.Trigger("sky_phone:device:open-request", {})
+    if not result or not result.success then
+        open_home_requested = false
+    end
+end, false)
+
+RegisterKeyMapping(
+    "sky_phone_live_activity_open",
+    locale.Controls.OpenPhone,
+    "keyboard",
+    "SPACE"
+)
+
 if Config.Phone.Keybind then
     if type(Config.Phone.Keybind) ~= "string" or Config.Phone.Keybind == "" then
         error("[sky_phone] Config.Phone.Keybind must be a non-empty keyboard key name or false.")
@@ -255,6 +278,15 @@ RegisterNUICallback("ui:input-focus", function(data, cb)
     cb({ success = true })
 end)
 
+RegisterNUICallback("ui:live-activity", function(data, cb)
+    if type(data) ~= "table" or type(data.active) ~= "boolean" then
+        cb({ success = false, error = "invalid_request" })
+        return
+    end
+    live_activity_active = data.active
+    cb({ success = true })
+end)
+
 RegisterNUICallback("close", function(data, cb)
     if type(data) ~= "table" then
         cb({ success = false, error = "invalid_request" })
@@ -302,6 +334,8 @@ RegisterNetEvent("sky_phone:device:invalidated", function()
     close_phone(false)
     device_payload = nil
     update_equipped_phone_number(nil)
+    live_activity_active = false
+    open_home_requested = false
 end)
 
 RegisterNetEvent("sky_phone:device:error", function(error_code)
diff --git a/sky_phone/source/server/companies.lua b/sky_phone/source/server/companies.lua
index e955f1b..a7943f4 100644
--- a/sky_phone/source/server/companies.lua
+++ b/sky_phone/source/server/companies.lua
@@ -679,18 +679,16 @@ function SkyPhoneCompanies.GetCallTargets(company_id)
     end
     for source, readiness in pairs(call_availability) do
         local member = online[source] and call_member(source) or nil
-        local device = member and current_device(source, true) or nil
-        if not member or not device or member.company_id ~= readiness.company_id
-            or readiness.company_id ~= company_id or readiness.imei ~= device.imei
-            or readiness.sim_id ~= device.sim_id
-        then
-            if not member or not device or member.company_id ~= readiness.company_id
-                or readiness.imei ~= (device and device.imei)
-                or readiness.sim_id ~= (device and device.sim_id)
-            then
-                call_availability[source] = nil
-            end
-        else
+        local device = member and SkyPhone.LoadDevice(readiness.imei) or nil
+        local device_slots = device and SkyPhone.FindDeviceSlots(source, readiness.imei) or {}
+        local readiness_valid = member and device and device_slots[1]
+            and member.company_id == readiness.company_id
+            and device.sim_id == readiness.sim_id
+            and device.sim_type == "registered"
+            and device.registered_at ~= nil
+        if not readiness_valid then
+            call_availability[source] = nil
+        elseif readiness.company_id == company_id then
             targets[#targets + 1] = {
                 source = source,
                 simId = device.sim_id,
diff --git a/sky_phone/source/server/memos.lua b/sky_phone/source/server/memos.lua
index df674f9..c31084b 100644
--- a/sky_phone/source/server/memos.lua
+++ b/sky_phone/source/server/memos.lua
@@ -51,6 +51,23 @@ local function session_owner(source)
     }
 end
 
+local function device_owner(source, imei)
+    if not SkyPhoneImei.IsValid(imei) then
+        return nil, { success = false, error = "invalid_request" }
+    end
+    if not SkyPhone.FindDeviceSlots(source, imei)[1] then
+        return nil, { success = false, error = "owner_changed" }
+    end
+    local device = SkyPhone.LoadDevice(imei)
+    if not device then
+        return nil, { success = false, error = "device_not_found" }
+    end
+    return {
+        account_id = device.account_id and tonumber(device.account_id) or nil,
+        imei = imei,
+    }
+end
+
 local function owner_condition(owner, alias)
     local prefix = alias and ("`%s`."):format(alias) or ""
     if owner.account_id then
@@ -317,7 +334,7 @@ RegisterNetEvent("sky_phone:memos:request-upload", function(data)
         upload_result(src, type(data) == "table" and data.correlationId or nil, false, "invalid_memo")
         return
     end
-    local owner, error_response = session_owner(src)
+    local owner, error_response = device_owner(src, data.deviceImei)
     if not owner then
         upload_result(src, memo.correlation_id, false, error_response.error)
         return
@@ -392,7 +409,7 @@ RegisterNetEvent("sky_phone:memos:complete-upload", function(data)
         return
     end
     state.completing = true
-    local owner, error_response = session_owner(src)
+    local owner, error_response = device_owner(src, state.owner.imei)
     if not owner or owner.imei ~= state.owner.imei or owner.account_id ~= state.owner.account_id then
         pending_uploads[request_id] = nil
         local rejected, _, trusted_remote = SkyPhoneMedia.VerifyRemoteUpload(state, data.remoteId, data.url)
diff --git a/sky_phone/source/server/phone.lua b/sky_phone/source/server/phone.lua
index 0fbe374..147fbad 100644
--- a/sky_phone/source/server/phone.lua
+++ b/sky_phone/source/server/phone.lua
@@ -958,7 +958,6 @@ Bridge.Debug(
 )
 
 Bridge.Callbacks.Register("sky_phone:device:close", function(source)
-    SkyPhoneCompanies.ClearCallAvailability(source)
     sessions[source] = nil
     return { success = true }
 end)